@threadcrumbs/common 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadcrumbs/common",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "description": "Code the Threadcrumbs apps share, starting with the readers for each coding-agent harness.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,7 +25,16 @@
     "./license": "./license/index.mjs",
     "./license/store": "./license/store.mjs",
     "./orgs": "./orgs/index.mjs",
-    "./lib/*": "./lib/*.mjs"
+    "./lib/*": "./lib/*.mjs",
+    "./ui/status": "./ui/status.mjs",
+    "./ui/status.css": "./ui/status.css",
+    "./ui/icons": "./ui/icons.mjs",
+    "./ui/where": "./ui/where.mjs",
+    "./ui/where.css": "./ui/where.css",
+    "./ui/gauge": "./ui/gauge.mjs",
+    "./ui/gauge.css": "./ui/gauge.css",
+    "./ui/theme.css": "./ui/theme.css",
+    "./ui/fonts.css": "./ui/fonts.css"
   },
   "files": [
     "NOTICES.md",
@@ -34,9 +43,15 @@
     "license/",
     "lib/",
     "orgs/",
-    "telemetry/"
+    "telemetry/",
+    "ui/"
   ],
   "scripts": {
     "test": "node --test \"test/**/*.test.mjs\""
+  },
+  "devDependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/inter-tight": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0"
   }
 }

package/telemetry/README.md

@@ -59,6 +59,7 @@ adapter in `../harnesses/`, so a session has the same id in both apps. Add the h
 | `tool` | `{ name, startedAt, target, kind }` or `null` | The tool running right now, only while working or delegating. `target` is its short file path, command, or search, as in `Detail.activity`, or `''` when the harness doesn't record one. `kind` is one of the [tool kinds](#tool-kinds) |
 | `tokens` | `{ input, output, cacheRead, cacheWrite }` or `null` | Totals for the session's own thread. `input` leaves out cache reads and writes |
 | `context` | `{ used, limit }` or `null` | Tokens in the window after the last reply; `limit` is `0` when unknown |
+| `contextHistory` | number[] or `null` | The context after each reply, oldest first, for a sparkline: at most 24 whole numbers, evenly spaced across the session and always ending at `context.used`. A reply written twice counts once. Each reader keeps a running sample as it reads, never the whole history; OpenCode 2.x reads only the replies newer than the last one it saw, once the session changes, leaves the newest for the next read while it has no `time.completed`, and starts over if replies were removed. `null` for Cursor, Antigravity, and Hermes, whose session scan sees no per-reply counts, and before the first reply |
 | `costUsd` | number or `null` | Spend as the harness records it; `null` when it doesn't |
 | `lines` | `{ added, removed }` or `null` | Lines changed, as the harness records it |
 | `plan` | `{ total, done, current }` or `null` | Plan progress, if the agent keeps one |
@@ -157,6 +158,15 @@ Again, a `null` field means the harness doesn't record it. The shared helpers fo
 (`startCall`, `endCall`, `toolTarget`, `keepNewest`, `fileList`, and the limits) are in
 `../lib/telemetry-fields.mjs`.
 
+`sessionDetail(id, { filesOnly: true })` returns only `{ id, sessionId, files }`, with each file
+as `{ path }`, from what the session scan already holds. It's for finding other threads that
+changed the same files, so it never opens the readers that serve an open thread.
+
+The readers that serve an open thread (thoughts and replies for Claude Code, Codex, Cursor, and
+Antigravity) are kept for the last three sessions opened. Claude Code's and Codex's read the
+transcript from its end first, in growing steps, until they have the newest 50 replies, and then
+follow it forwards.
+
 ### Context breakdown
 
 `contextBreakdown` splits the context into parts, so an app can show what fills it.
@@ -169,8 +179,8 @@ Again, a `null` field means the harness doesn't record it. The shared helpers fo
   them aren't read, so an app should call it the default. Free space is `limit - total -
   reserved`.
 - **`parts`** are `[{ id, tokens, items }]` in this order: `messages`, `system`,
-  `builtInTools`, `mcpTools`, `skills`, `memory`. A part a harness doesn't let us size is left
-  out, and its tokens stay in `system`.
+  `builtInTools`, `mcpTools`, `skills`, `memory`. A part the harness records is sent even at 0
+  tokens; one it doesn't record is left out, and its tokens stay in `system`.
   - `messages` items: `{ id: 'prompts' }`, `{ id: 'replies' }`, `{ id: 'summary' }` (from the
     last compaction), and `{ id: 'tool', name }` for each tool's calls and results.
   - `mcpTools` items: `{ name, tools }` per server, `tools` a count or `null`.
@@ -182,6 +192,11 @@ Again, a `null` field means the harness doesn't record it. The shared helpers fo
   - That gives a characters-per-token ratio for the text of each fixed part (system prompt,
     tool definitions, MCP servers, skills, memory files), so each part is its text length at
     that ratio. A part added later counts at the same ratio.
+  - The ratio is used only when the system prompt and tool definitions were recorded, as in
+    Claude Code's `api-request-shape`. Otherwise it would spread their unrecorded text over the
+    parts that were, so each recorded part is its text at 4 characters a token, and `system` is
+    the rest of the fixed count. That's always the case for Codex, whose built-in tool
+    definitions aren't written.
   - `messages` is the rest of the total. Each request's growth over the one before is split
     among the prompts, replies, and tool calls and results since then, by text length. After a
     compaction, the next request's growth over the fixed parts is the summary.
@@ -199,8 +214,8 @@ Again, a `null` field means the harness doesn't record it. The shared helpers fo
   - Codex: the rollout's base instructions and developer messages, its AGENTS.md messages, and
     its `additional_tools` items. Its built-in tool definitions aren't written, so they're in
     `system`.
-- **Read only for an open thread,** by the same second reader as thoughts and replies. It keeps
-  numbers and names, never the text.
+- **Its sizes are kept by the session scan,** which already reads every record, as numbers and
+  names only, never the text, so opening a thread doesn't read its transcript again.
 
 ### Tool kinds
 

package/telemetry/antigravity.mjs

@@ -233,6 +233,7 @@ export function antigravity({
         tool: null,
         tokens: null,
         context: null,
+        contextHistory: null,
         costUsd: null,
         lines: null,
         plan: planSummary(plan),
@@ -251,9 +252,10 @@ export function antigravity({
     return sessions
   }
 
-  async function sessionDetail(key) {
+  async function sessionDetail(key, { filesOnly = false } = {}) {
     const id = String(key).replace(/^antigravity:/, '')
     if (!known.has(id)) return null
+    if (filesOnly) return { id: `antigravity:${id}`, sessionId: id, files: null }
     const sessionDir = path.join(brainDir, id)
     const found = await transcriptOf(sessionDir)
     const state = (found && (await transcripts.read(found.file, found.stat).catch(() => null))) || emptyTranscript()

package/telemetry/claude-code.mjs

@@ -6,7 +6,8 @@ import { awaitedPeers, readLiveSessions, transcriptDetail, transcriptReader, tur
 import { exists, listDirs, listFiles, num } from '../lib/fsutil.mjs'
 import { contextBreakdown } from '../lib/context-breakdown.mjs'
 import { recentReaders } from '../lib/jsonl-follower.mjs'
-import { DETAIL_LIMITS, RECENT_MS, askOf, number, planSummary, text, titleFromPrompt, toolNow } from '../lib/telemetry-fields.mjs'
+import { nameKind } from '../lib/tool-kinds.mjs'
+import { DETAIL_LIMITS, RECENT_MS, askOf, filePaths, number, planSummary, sampleList, text, titleFromPrompt, toolNow } from '../lib/telemetry-fields.mjs'
 
 export { nextPlan } from '../lib/telemetry-fields.mjs'
 
@@ -27,10 +28,10 @@ export function claudeCode({
   const projectsDir = path.join(home, 'projects')
   const liveDir = path.join(home, 'sessions')
   const catalogDir = path.join(home, 'cache', 'model-catalog')
-  const transcripts = transcriptReader({ detail: true })
+  const transcripts = transcriptReader({ detail: true, sizes: true })
   const subagentFiles = transcriptReader()
   const subagentDetails = transcriptReader({ detail: true, words: true })
-  const openedFor = recentReaders(() => transcriptReader({ words: true, sizes: true }), OPENED_KEPT)
+  const openedFor = recentReaders(() => transcriptReader({ words: true, tail: true }), OPENED_KEPT)
   const desktopRecords = desktopRecordReader()
   const olderReaders = new Map()
   const metas = new Map()
@@ -219,11 +220,11 @@ export function claudeCode({
     const read = await openedFor(file).read(file, stat).catch(() => null)
     const limit = contextLimit(limits, state.model)
     const reserved = limit ? Math.min(RESERVED_TOKENS, limit) : RESERVED_TOKENS
-    return { words: read?.words ?? null, contextBreakdown: contextBreakdown(read?.sizes, { total: state.context, limit, reserved }) }
+    return { words: read?.words ?? null, contextBreakdown: contextBreakdown(state.sizes, { total: state.context, limit, reserved }) }
   }
 
   function olderReader(file) {
-    const reader = olderReaders.get(file) || transcriptReader({ detail: true })
+    const reader = olderReaders.get(file) || transcriptReader({ detail: true, sizes: true })
     olderReaders.delete(file)
     olderReaders.set(file, reader)
     while (olderReaders.size > OLDER_KEPT) olderReaders.delete(olderReaders.keys().next().value)
@@ -252,13 +253,14 @@ export function claudeCode({
     }
   }
 
-  async function sessionDetail(sessionKey, { subagent = null } = {}) {
+  async function sessionDetail(sessionKey, { subagent = null, filesOnly = false } = {}) {
     const id = String(sessionKey).replace(/^claude-code:/, '')
     const file = known.get(id)
     const stat = file ? await fsp.stat(file).catch(() => null) : null
     if (!stat) return null
     if (subagent != null) return subagentDetail(file, id, String(subagent))
     const state = await transcripts.read(file, stat)
+    if (filesOnly) return { id: `claude-code:${id}`, sessionId: id, files: filePaths(state.detail.files, state.cwd) }
     const said = await opened(file, stat, state, await contextLimits())
     return {
       id: `claude-code:${id}`,
@@ -334,7 +336,10 @@ function statusOf({ running, state, calls, subagents, awaiting, lastAt, mark, un
   const failedTurn = failed || Boolean(mark?.failed)
   const quiet = () => (unread ? ['done', 'unread'] : ['idle', mark ? 'read' : 'quiet'])
   if (running) {
-    if (running.status === 'waiting') return ['asking', calls.some((c) => c.questions) ? 'question' : calls.length ? 'approval' : 'waiting']
+    if (running.status === 'waiting') {
+      const asked = calls.filter((c) => (c.kind ?? nameKind(c.name)) !== 'agent')
+      return ['asking', asked.some((c) => c.questions) ? 'question' : asked.length ? 'approval' : 'waiting']
+    }
     const busy = running.status ? running.status === 'busy' : midTurn
     if (busy) return onlyAgents ? ['delegating', 'subagents'] : ['working', running.status ? 'process-busy' : 'turn-open']
     if (subagents || awaiting.length) return ['delegating', subagents ? 'subagents' : 'awaiting']
@@ -364,7 +369,8 @@ function toSession({ id, state, stat, running, subagents, workingSubagents, awai
   const unread = Boolean(mark) && (state.handedBackAt || mark.activeAt) > mark.focusedAt
   const calls = [...state.open.values()].sort((a, b) => a.startedAt - b.startedAt)
   const [status, statusReason] = statusOf({ running, state, calls, subagents, awaiting, lastAt: lastActivityAt, mark, unread, now })
-  const errorText = state.detail?.errors.at(-1)?.message || mark?.errorText || ''
+  const markFailed = Boolean(mark?.failed) && !turnEnding(state).failed
+  const errorText = (markFailed && mark.errorText) || state.detail?.errors.at(-1)?.message || mark?.errorText || ''
   const midTurn = Boolean(state.ending && !state.ending.handedBack)
   const turnOpen = midTurn && (status === 'working' || status === 'delegating' || status === 'asking')
   const { projectPath, project, worktree } = projectOf(mark?.cwd || state.firstCwd || state.cwd, mark?.originCwd)
@@ -388,6 +394,7 @@ function toSession({ id, state, stat, running, subagents, workingSubagents, awai
     tool: status === 'working' || status === 'delegating' ? currentTool(state.open) : null,
     tokens: { ...state.tokens },
     context: state.context ? { used: state.context, limit } : null,
+    contextHistory: sampleList(state.contextSample, state.context),
     costUsd: state.unpriced || totals.unpriced ? (state.cost ? state.cost.usd : null) : state.spend + totals.spend,
     lines: { added: state.lines.added + totals.added, removed: state.lines.removed + totals.removed },
     plan: planSummary(state.plan),

package/telemetry/codex.mjs

@@ -16,8 +16,10 @@ import {
   clipBlock,
   diffHunk,
   emptyActivity,
+  emptySample,
   endCall,
   fileList,
+  filePaths,
   inputKind,
   joinedText,
   keepNewest,
@@ -27,10 +29,13 @@ import {
   planItems,
   planSummary,
   relativePath,
+  sampleList,
+  samplePoint,
   settleCalls,
   startCall,
   text,
   textList,
+  wordsFull,
   titleFromPrompt,
   toolInput,
   toolNow,
@@ -40,6 +45,7 @@ import {
 const ACTIVE_WINDOW_MS = 30 * 60 * 1000
 const SUBAGENT_WINDOW_MS = 10 * 60 * 1000
 const OPENED_KEPT = 3
+const TAIL_BYTES = 512 * 1024
 const COMPACT_SHARE = 0.9
 const REPORTED_SHARE = 0.95
 const ROLLOUT_FILE = /^rollout-.{19}-([0-9a-f-]{36})(?:_[0-9a-f-]{36})?\.jsonl$/i
@@ -140,6 +146,7 @@ function emptyRollout() {
     fallbackPrompts: 0,
     open: false,
     turnStartedAt: 0,
+    turnId: '',
     usageLimits: null,
     failed: false,
     calls: new Map(),
@@ -147,6 +154,9 @@ function emptyRollout() {
     lines: { added: 0, removed: 0 },
     tokens: null,
     context: null,
+    contextSample: emptySample(),
+    sizes: emptySizes(),
+    sent: emptySent(),
     plan: null,
     history: [],
     contextParts: null,
@@ -162,13 +172,19 @@ function emptyRollout() {
 
 const AGENTS_FILE = /^# AGENTS\.md instructions for ([^\n]+)/
 
-const emptyOpened = () => ({
-  lastAt: 0,
-  thoughts: [],
-  replies: [],
-  sizes: emptySizes(),
-  sent: { base: 0, developer: [], other: 0, memory: new Map(), tools: new Map() },
-})
+const emptyWords = () => ({ lastAt: 0, thoughts: [], replies: [] })
+
+function applyWords(state, record) {
+  const at = Date.parse(record.timestamp) || state.lastAt
+  state.lastAt = at
+  const item = record.payload
+  if (record.type !== 'response_item' || !item || typeof item !== 'object') return
+  const id = text(item.id) || null
+  if (item.type === 'reasoning') keepText(state.thoughts, 'thoughts', { id, at, text: joinedText(item.summary, 'summary_text', 'text') })
+  else if (item.type === 'message' && item.role === 'assistant') keepText(state.replies, 'replies', { id, at, text: joinedText(item.content, 'output_text', 'text') })
+}
+
+const emptySent = () => ({ base: 0, developer: [], other: 0, memory: new Map(), tools: new Map() })
 
 function callName(item) {
   if (item.type === 'local_shell_call') return 'shell'
@@ -182,14 +198,11 @@ function codexFixed(sent) {
   fixed.system = developer + (sent.developer.includes(sent.base) ? 0 : sent.base) + sent.other
   fixed.mcp = new Map(sent.tools)
   fixed.memory = new Map(sent.memory)
+  fixed.recorded = new Set(['system', 'mcpTools', 'memory'])
   return fixed
 }
 
-function applyOpened(state, record) {
-  const at = Date.parse(record.timestamp) || state.lastAt
-  state.lastAt = at
-  const item = record.payload
-  if (!item || typeof item !== 'object') return
+function applySizes(state, record, item, at) {
   const { sizes, sent } = state
   const before = sizes.first == null
   if (record.type === 'session_meta') {
@@ -203,14 +216,10 @@ function applyOpened(state, record) {
   } else if (record.type !== 'response_item') {
     return
   } else if (item.type === 'reasoning') {
-    const said = joinedText(item.summary, 'summary_text', 'text')
-    keepText(state.thoughts, 'thoughts', { id: text(item.id) || null, at, text: said })
-    sizeReply(sizes, said.length)
+    sizeReply(sizes, joinedText(item.summary, 'summary_text', 'text').length)
     return
   } else if (item.type === 'message' && item.role === 'assistant') {
-    const said = joinedText(item.content, 'output_text', 'text')
-    keepText(state.replies, 'replies', { id: text(item.id) || null, at, text: said })
-    sizeReply(sizes, said.length)
+    sizeReply(sizes, joinedText(item.content, 'output_text', 'text').length)
     return
   } else if (CALLS.has(item.type)) {
     sizeCall(sizes, text(item.call_id), callName(item), (text(item.arguments) || text(item.input) || JSON.stringify(item.action ?? '')).length)
@@ -226,7 +235,7 @@ function applyOpened(state, record) {
   } else if (item.type === 'message') {
     const raw = contentText(item.content)
     const agents = item.role === 'user' ? AGENTS_FILE.exec(raw) : null
-    if (agents) sent.memory.set(`${agents[1].trim().replace(/[\/]+$/, '')}/AGENTS.md`, raw.length)
+    if (agents) sent.memory.set(`${agents[1].trim().replace(/[\\/]+$/, '')}/AGENTS.md`, raw.length)
     else if (item.role === 'user' && promptText(raw)) {
       sizePrompt(sizes, raw.length)
       return
@@ -249,6 +258,7 @@ function applyRecord(state, record) {
   }
   const payload = record.payload
   if (!payload || typeof payload !== 'object') return
+  applySizes(state, record, payload, at || state.lastAt)
   if (record.type === 'session_meta') applyMeta(state, payload)
   else if (record.type === 'turn_context') applySettings(state, payload.model, payload.effort, payload.cwd)
   else if (record.type === 'response_item') applyItem(state, payload, at || state.lastAt)
@@ -363,13 +373,16 @@ function addLines(state, patch) {
 function applyEvent(state, event, at) {
   switch (event.type) {
     case 'task_started':
-    case 'turn_started':
-      if (!state.open) state.turnStartedAt = at
+    case 'turn_started': {
+      const turn = text(event.turn_id)
+      if (!state.open || (turn && turn !== state.turnId)) state.turnStartedAt = at
+      if (turn) state.turnId = turn
       state.open = true
       state.failed = false
       state.calls.clear()
       settleCalls(state.activity)
       break
+    }
     case 'task_complete':
     case 'turn_complete':
       state.open = false
@@ -451,6 +464,7 @@ function applyTokens(state, info, at) {
   const sum = number(total?.total_tokens)
   if (sum === state.lastTotal) return
   state.lastTotal = sum
+  samplePoint(state.contextSample, last.total_tokens)
   keepNewest(state.history, { at, context: number(last.total_tokens), output: number(last.output_tokens) }, DETAIL_LIMITS.history)
 }
 
@@ -463,7 +477,7 @@ export function codex({
   const locksDir = path.join(home, 'thread-writer-locks')
   const indexFile = path.join(home, 'session_index.jsonl')
   const rollouts = jsonlFollower({ empty: emptyRollout, apply: applyRecord })
-  const openedFor = recentReaders(() => jsonlFollower({ empty: emptyOpened, apply: applyOpened }), OPENED_KEPT)
+  const openedFor = recentReaders(() => jsonlFollower({ empty: emptyWords, apply: applyWords, tail: { bytes: TAIL_BYTES, enough: wordsFull } }), OPENED_KEPT)
   let index = { mtime: -1, names: new Map() }
   let known = new Map()
   let childrenOf = new Map()
@@ -571,11 +585,12 @@ export function codex({
     return state ? { file, stat, state } : null
   }
 
-  async function sessionDetail(key) {
+  async function sessionDetail(key, { filesOnly = false } = {}) {
     const id = String(key).replace(/^codex:/, '').toLowerCase()
     const found = await readKnown(id)
     if (!found || found.state.subagent || found.state.internal) return null
     const { file, stat, state } = found
+    if (filesOnly) return { id: `codex:${id}`, sessionId: id, files: filePaths(state.files, state.cwd) }
     const said = await openedFor(file).read(file, stat).catch(() => null)
     const limit = state.context?.limit || null
     const subagents = []
@@ -612,7 +627,7 @@ export function codex({
       prompts: (state.typed ? state.promptList : state.fallbackPromptList).map((p) => ({ ...p })),
       thoughts: textList(said?.thoughts),
       replies: textList(said?.replies),
-      contextBreakdown: contextBreakdown(said?.sizes, {
+      contextBreakdown: contextBreakdown(state.sizes, {
         total: state.context?.used,
         limit,
         reserved: limit ? Math.round(limit * (1 - COMPACT_SHARE / REPORTED_SHARE)) : null,
@@ -668,6 +683,7 @@ function toSession({ id, state, names, live, turnLive, fresh, locking, unread, s
     tool,
     tokens: state.tokens ? { ...state.tokens } : null,
     context: state.context && state.context.used ? { ...state.context } : null,
+    contextHistory: sampleList(state.contextSample, state.context?.used),
     costUsd: null,
     lines: { ...state.lines },
     plan: planSummary(state.plan),

package/telemetry/cursor.mjs

@@ -198,9 +198,10 @@ export function cursor({
     return list.sort((a, b) => a.startedAt - b.startedAt).slice(-DETAIL_LIMITS.subagents)
   }
 
-  async function sessionDetail(key) {
+  async function sessionDetail(key, { filesOnly = false } = {}) {
     const id = String(key).replace(/^cursor:/, '')
     const entry = known.get(id)
+    if (filesOnly) return entry ? { id: `cursor:${id}`, sessionId: id, files: null } : null
     const stat = entry ? await fsp.stat(entry.file).catch(() => null) : null
     if (!stat) return null
     const state = await follow(entry.file, stat)
@@ -273,6 +274,7 @@ export function cursor({
         tool: open && state.tool ? { ...toolNow(state.tool), target: clip(relativePath(state.tool.target, projectPath)) } : null,
         tokens: null,
         context: null,
+        contextHistory: null,
         costUsd: null,
         lines: null,
         plan: planSummary(state.plan),

package/telemetry/hermes.mjs

@@ -122,10 +122,11 @@ export function hermes({ home = resolveHermesHome(), now = Date.now } = {}) {
     return sessions
   }
 
-  async function sessionDetail(key) {
+  async function sessionDetail(key, { filesOnly = false } = {}) {
     const match = /^hermes:([^:]+):(.+)$/.exec(String(key))
     if (!match) return null
     const [, profile, rootId] = match
+    if (filesOnly) return { id: `hermes:${profile}:${rootId}`, sessionId: rootId, files: null }
     const store = (await storeFiles()).find((s) => s.profile === profile)
     if (!store) return null
     const detail = await withReadOnly(store.file, (db) => detailFrom(db, rootId, now()), null)
@@ -423,6 +424,7 @@ function toSession({ db, profile, tip, root, chain, ids, open, errands, workingS
       ? { input: tokens[0] || 0, output: tokens[1] || 0, cacheRead: tokens[2] || 0, cacheWrite: tokens[3] || 0 }
       : null,
     context: used ? { used, limit: contextLimit(lengths, text(tip.model), tip.billing_base_url) } : null,
+    contextHistory: null,
     costUsd: costs.some((c) => c != null) ? costs.reduce((total, c) => total + number(c), 0) : null,
     lines: null,
     plan: planSummary(latestPlan(db, ids, messages)),

package/ui/fonts.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  src: url('./fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
+}
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  src: url('./fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
+}
+@font-face {
+  font-family: 'Inter Tight Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  src: url('./fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2-variations');
+}
+@font-face {
+  font-family: 'Inter Tight Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  src: url('./fonts/inter-tight-latin-wght-normal.woff2') format('woff2-variations');
+}
+@font-face {
+  font-family: 'JetBrains Mono Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  src: url('./fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
+}
+@font-face {
+  font-family: 'JetBrains Mono Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  src: url('./fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
+}

package/ui/gauge.css

@@ -0,0 +1,75 @@
+.inst {
+  display: block;
+  flex: none;
+  overflow: visible;
+}
+.i-dial {
+  fill: var(--dial);
+  stroke: var(--line);
+  stroke-width: 1;
+}
+.i-mini .i-dial {
+  stroke-width: 2.4;
+}
+.i-hub {
+  fill: var(--hub);
+}
+.i-track,
+.i-fill,
+.i-red {
+  fill: none;
+  stroke-width: 6;
+  stroke-linecap: round;
+}
+.i-track {
+  stroke: var(--dial-track);
+}
+.i-fill {
+  stroke: var(--inst);
+}
+.i-red {
+  stroke: var(--err);
+  opacity: 0.8;
+}
+.i-mini .i-track,
+.i-mini .i-fill,
+.i-mini .i-red {
+  stroke-width: 10;
+}
+.inst[data-level='high'] .i-fill {
+  stroke: var(--warn);
+}
+.inst[data-level='full'] .i-fill {
+  stroke: var(--err);
+}
+.i-needle {
+  stroke: var(--needle);
+  stroke-width: 3.2;
+  stroke-linecap: round;
+  filter: drop-shadow(0 0 3px var(--needle-glow));
+}
+.i-mini .i-needle {
+  stroke-width: 6;
+  filter: none;
+}
+.i-label {
+  fill: var(--text);
+  font: 600 12px var(--cond);
+}
+.i-wrap {
+  position: relative;
+}
+.i-wrap::after {
+  content: '';
+  position: absolute;
+  top: calc(-1 * var(--hit-t, 4px));
+  right: calc(-1 * var(--hit-r, 4px));
+  bottom: calc(-1 * var(--hit-b, 4px));
+  left: calc(-1 * var(--hit-l, 4px));
+}
+.i-wrap:has(+ .i-wrap) {
+  --hit-r: 2px;
+}
+.i-wrap + .i-wrap {
+  --hit-l: 2px;
+}

package/ui/gauge.mjs

@@ -0,0 +1,14 @@
+const ARC = 'M-19.8,19.8 A28,28 0 1 1 19.8,19.8'
+const fx = (n) => n.toFixed(2)
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v))
+
+export const levelOf = (pct) => (pct == null ? 'unknown' : pct >= 90 ? 'full' : pct >= 70 ? 'high' : 'ok')
+export const levelClass = (spec) => (spec.level === 'full' ? 'x' : spec.level === 'high' ? 'h' : 'f')
+
+export function contextGauge(spec, size = 18) {
+  const mini = size <= 30
+  const p = clamp(spec.pct ?? 0, 0, 100)
+  const level = spec.level || levelOf(spec.pct ?? null)
+  const body = `<path d="${ARC}" class="i-track" pathLength="100"/><path d="${ARC}" class="i-red" pathLength="100" stroke-dasharray="10 100" stroke-dashoffset="-90"/><path d="${ARC}" class="i-fill" pathLength="100" stroke-dasharray="${fx(p)} 100"/><line x1="0" y1="0" x2="${mini ? 19 : 21}" y2="0" class="i-needle" transform="rotate(${fx(135 + (270 * p) / 100)})"/>${mini ? '' : `<text x="0" y="28" class="i-label" text-anchor="middle">${Math.round(p)}%</text>`}`
+  return `<svg class="inst${mini ? ' i-mini' : ''}" data-k="gauge" data-level="${level}" width="${size}" height="${size}" viewBox="-36 -36 72 72" aria-hidden="true"><circle r="35" class="i-dial"/>${body}<circle r="${mini ? 6 : 4.5}" class="i-hub"/></svg>`
+}

package/ui/html.mjs

@@ -0,0 +1 @@
+export const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])