@threadcrumbs/common 0.1.5 → 0.1.7

package/README.md

@@ -22,9 +22,14 @@ need it.
 | `@threadcrumbs/common/ui/theme.css` | The Threadcrumbs look as CSS variables: the Quieter backgrounds, lines, and text levels, Threadcrumbs orange, the six status colors and their plates, `--warn`, added and removed, the chart and gauge colors, focus, type sizes, spacing, radii, and the default `--sans`, `--cond`, and `--mono` stacks. Every element keeps one x-height (`font-size-adjust: 0.51`) |
 | `@threadcrumbs/common/ui/fonts.css` | `@font-face` rules for Inter, Inter Tight, and JetBrains Mono, Latin and Latin Extended, upright, with their `.woff2` files in `ui/fonts/`. A bundler copies the files into the app, so they load from its own origin. `tools/ui-fonts.mjs` writes both from the `@fontsource` packages |
 | `@threadcrumbs/common/ui/status` | `STATUSES` (each status's key, name, color, and plate, in the order both apps pin), `STATUS_KEYS`, `URGENCY_ORDER` (for the status row and the waffle), `LIVE_STATUSES`, `statusOf`, the status icons as SVG in `LAMP_ICONS`, and `lampHTML(status)`. `ui/status.css` colors each `[data-st]` and animates the lamps, and reduced motion stops them |
-| `@threadcrumbs/common/ui/icons` | `ICO(name)`, the line icons (organization, folder, worktree, branch, model, key, and one per tool kind); `effortBars` and `effortName`; `harnessMark` (CC, Cx, and the others); and, for tool calls, `KINDS`, `kindOf`, `kindTip`, `kindIconHTML`, `toolKinds`, and `mcpServer` |
+| `@threadcrumbs/common/ui/icons` | `ICO(name)`, the line icons (organization, folder, worktree, branch, model, key, and one per tool kind); `IC.chev`, a group heading's chevron; `effortBars` and `effortName`; `harnessMark` (CC, Cx, and the others); and, for tool calls, `KINDS`, `kindOf`, `kindTip`, `kindIconHTML`, `toolKinds`, and `mcpServer` |
 | `@threadcrumbs/common/ui/where` | `whereHTML(thread)`, the organization and repo chips, `whereFullHTML(thread)` with the worktree and branch, and `repoName(name, org)`, which drops a package scope the organization repeats. `ui/where.css` styles the chips, the harness initials, the effort bars, and the tool kind icons |
 | `@threadcrumbs/common/ui/gauge` | `contextGauge({ pct, level }, size)`, the context gauge as SVG, with `levelOf(pct)` (amber from 70%, red from 90%) and `levelClass`. `ui/gauge.css` draws it and gives a picture with a tip a slightly larger hover area (`.i-wrap`) |
+| `@threadcrumbs/common/ui/html` | `esc(text)`, `plural(n, one, many)`, `joinNames(names)` ("a, b and c"), and two attribute writers for tips: `termButton(key, label, attrs)`, a label that opens a term's text, and `instAttrs(spec, val, sub)`, the picture, value, and second line its tip shows |
+| `@threadcrumbs/common/ui/format` | How the lists word numbers and times: `compactNumber` (32.7K), `duration` (4m 12s), `callDuration` (0.4s), `ago` (7m ago), `percent`, `modelName` (Opus 5.5), and `toolLabel` (MCP tools as tool, then server) |
+| `@threadcrumbs/common/ui/rows` | Threadgauge's list rows: `rowHTML(thread, { sel, now, harnessName })` and `groupHeadHTML(group, first, { group, shut })`, with the pieces they use (`nowHTML`, `nowText`, `nowParts`, `rowDetail`, `askLine`, `errorShort`, `shownPlan`, `waitingOn`, `roughly`, `linesHTML`, `rowLabel`, `groupTally`, `turnOf`, `groupKey`). `ui/rows.css` styles the headings, rows, and term labels |
+| `@threadcrumbs/common/ui/totals` | The status lamps and the footer: `statusCounts`, `lampsHTML(counts, total, pressed)`, `footerTotals(threads)`, `footerHTML(totals, { short, bars })`, and the output-over-time log, `emptyOutputLog`, `recordOutput`, and `outputBars`. `ui/totals.css` styles them and builds on `ui/rows.css` |
+| `@threadcrumbs/common/ui/pictures` | The footer's pictures, `FOOT_DRAW` (`drawPie`, `drawWaffle`, `drawCols`) at `FOOT_SIZE`, with `footerNote`; plan ticks, `planTicks` and `planSpec`; `waffleStates` and `binTimes`; and the SVG helpers Threadgauge's other pictures use (`fx`, `clamp`, `polar`, `wideBox`, `wideSVG`, and an `esc` for SVG text). `ui/pictures.css` colors them |
 
 `launch/` is the only part of this package that starts processes, and `license/store.mjs` is the
 only part that writes a file. The readers and `orgs/` import neither. `ui/` is plain functions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadcrumbs/common",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "description": "Code the Threadcrumbs apps share, starting with the readers for each coding-agent harness.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -33,6 +33,14 @@
     "./ui/where.css": "./ui/where.css",
     "./ui/gauge": "./ui/gauge.mjs",
     "./ui/gauge.css": "./ui/gauge.css",
+    "./ui/format": "./ui/format.mjs",
+    "./ui/html": "./ui/html.mjs",
+    "./ui/pictures": "./ui/pictures.mjs",
+    "./ui/pictures.css": "./ui/pictures.css",
+    "./ui/rows": "./ui/rows.mjs",
+    "./ui/rows.css": "./ui/rows.css",
+    "./ui/totals": "./ui/totals.mjs",
+    "./ui/totals.css": "./ui/totals.css",
     "./ui/theme.css": "./ui/theme.css",
     "./ui/fonts.css": "./ui/fonts.css"
   },

package/telemetry/README.md

@@ -98,8 +98,10 @@ adapter in `../harnesses/`, so a session has the same id in both apps. Add the h
 | `error` | `turn-failed` | The last turn ended in an error | All but Hermes |
 | `done` | `unread` | The harness records that you haven't read the reply | Claude Code (the app's record), Codex, Hermes, OpenCode 2.x |
 | | `recent` | No record of reading, and the turn ended in the last 30 minutes | All |
+| | `process-idle` | The live process says it's idle, with no record of reading, and the turn ended in the last 30 minutes | Claude Code |
 | `idle` | `read` | The harness records that you've read the reply | Claude Code (the app's record), Codex, Hermes, OpenCode 2.x |
 | | `quiet` | No record of reading, and nothing for 30 minutes | All |
+| | `process-idle` | The live process says it's idle, with no record of reading, and nothing for 30 minutes | Claude Code |
 
 ### What a thread needs
 

package/telemetry/claude-code.mjs

@@ -334,7 +334,8 @@ function statusOf({ running, state, calls, subagents, awaiting, lastAt, mark, un
   const { failed, onAgents: onlyAgents } = turnEnding(state)
   const blocked = mark?.outcome === 'blocked'
   const failedTurn = failed || Boolean(mark?.failed)
-  const quiet = () => (unread ? ['done', 'unread'] : ['idle', mark ? 'read' : 'quiet'])
+  const settled = running?.status === 'idle'
+  const quiet = () => (unread ? ['done', 'unread'] : ['idle', mark ? 'read' : settled ? 'process-idle' : 'quiet'])
   if (running) {
     if (running.status === 'waiting') {
       const asked = calls.filter((c) => (c.kind ?? nameKind(c.name)) !== 'agent')
@@ -345,7 +346,7 @@ function statusOf({ running, state, calls, subagents, awaiting, lastAt, mark, un
     if (subagents || awaiting.length) return ['delegating', subagents ? 'subagents' : 'awaiting']
     if (blocked) return ['asking', 'marked-blocked']
     if (failedTurn) return ['error', 'turn-failed']
-    if (!unread && now - lastAt < ACTIVE_WINDOW_MS) return ['done', 'recent']
+    if (!unread && now - lastAt < ACTIVE_WINDOW_MS) return ['done', settled ? 'process-idle' : 'recent']
     return quiet()
   }
   if (midTurn && now - lastAt < STALE_TURN_MS) return onlyAgents ? ['delegating', 'subagents'] : ['working', 'turn-open']

package/ui/format.mjs

@@ -0,0 +1,60 @@
+const UNITS = [
+  ['B', 1e9],
+  ['M', 1e6],
+  ['K', 1e3],
+]
+
+export function compactNumber(n) {
+  if (!Number.isFinite(n)) return '—'
+  const abs = Math.abs(n)
+  for (const [suffix, size] of UNITS) {
+    if (abs < size * 0.9995) continue
+    const value = n / size
+    const shown = Math.abs(value) >= 99.95 ? String(Math.round(value)) : value.toFixed(1).replace(/\.0$/, '')
+    return `${shown}${suffix}`
+  }
+  return String(Math.round(n))
+}
+
+export function duration(ms) {
+  const seconds = Math.max(0, Math.floor(ms / 1000))
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ${minutes % 60}m`
+  return `${Math.floor(hours / 24)}d ${hours % 24}h`
+}
+
+export function callDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return '—'
+  const tenths = Math.round(ms / 100)
+  if (tenths < 10) return `${(tenths / 10).toFixed(1)}s`
+  return duration(Math.max(ms, 1000))
+}
+
+export function ago(ms) {
+  if (ms < 45 * 1000) return 'just now'
+  const minutes = Math.round(ms / 60000)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.round(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  return `${Math.round(hours / 24)}d ago`
+}
+
+export function percent(used, limit) {
+  if (!limit) return null
+  return Math.min(100, Math.max(0, (used / limit) * 100))
+}
+
+export function modelName(id) {
+  const match = /^(?:[\w.-]+\/)?claude-([a-z]+)-(\d+)(?:-(\d{1,2}))?(?:-\d{8})?(\[.*\])?$/.exec(id || '')
+  if (!match) return id || ''
+  const [, family, major, minor] = match
+  return `${family[0].toUpperCase()}${family.slice(1)} ${minor ? `${major}.${minor}` : major}`
+}
+
+export function toolLabel(name) {
+  const mcp = /^mcp__(.+?)__(.+)$/.exec(name || '')
+  return mcp ? `${mcp[2]} (${mcp[1]})` : name || ''
+}

package/ui/html.mjs

@@ -1 +1,12 @@
-export const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+export const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+
+export const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`
+
+export function joinNames(names) {
+  if (names.length <= 1) return names[0] || ''
+  return `${names.slice(0, -1).join(', ')} and ${names.at(-1)}`
+}
+
+export const termButton = (key, label, attrs = '') => `<button type="button" class="term" data-term="${esc(key)}" aria-expanded="false"${attrs ? ` ${attrs}` : ''}>${esc(label)}</button>`
+
+export const instAttrs = (spec, val = '', sub = '') => `data-inst="${esc(JSON.stringify(spec))}" data-val="${esc(val)}" data-sub="${esc(sub)}"`

package/ui/icons.mjs

@@ -1,98 +1,105 @@
-import { mcpServer } from '../lib/tool-kinds.mjs'
-import { esc } from './html.mjs'
-
-export { mcpServer }
-
-const LINE_ICONS = {
-  key: '<circle cx="8" cy="15.5" r="4.5"/><path d="M11.3 12.2 20 3.5M16.5 7l2.5 2.5M14 9.5l2 2"/>',
-  folder: '<path d="M3 7.4A1.4 1.4 0 0 1 4.4 6h4.2l2 2.5h7A1.4 1.4 0 0 1 19 9.9v7.7a1.4 1.4 0 0 1-1.4 1.4H4.4A1.4 1.4 0 0 1 3 17.6z"/>',
-  org: '<path d="M4.5 20V5.4A1.4 1.4 0 0 1 5.9 4h6.7A1.4 1.4 0 0 1 14 5.4V20"/><path d="M14 9h4.1a1.4 1.4 0 0 1 1.4 1.4V20"/><path d="M3 20h18"/><path d="M7.5 8h3M7.5 11.5h3M7.5 15h3M16.8 13h.01M16.8 16.5h.01"/>',
-  branch:
-    '<circle cx="7" cy="5.5" r="2.2"/><circle cx="7" cy="18.5" r="2.2"/><circle cx="17" cy="7.5" r="2.2"/><path d="M7 7.7v8.6"/><path d="M17 9.7c0 3.4-2.6 4.6-6 5.2-1.9.3-3.3.9-4 1.4"/>',
-  worktree: '<circle cx="6.5" cy="5" r="2.2"/><circle cx="17.5" cy="5" r="2.2"/><circle cx="12" cy="19" r="2.2"/><path d="M6.5 7.2v1.3a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3V7.2"/><path d="M12 11.5v5.3"/>',
-  model: '<path d="M11 3.5l1.8 4.9 4.9 1.8-4.9 1.8L11 16.9l-1.8-4.9-4.9-1.8 4.9-1.8z"/><path d="M18 14.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z"/>',
-  'k-read': '<path d="M13.5 3.5H7.4A1.4 1.4 0 0 0 6 4.9v14.2a1.4 1.4 0 0 0 1.4 1.4h9.2a1.4 1.4 0 0 0 1.4-1.4V8z"/><path d="M13.5 3.5V8H18"/><path d="M9 12.5h6M9 16h4"/>',
-  'k-search': '<circle cx="10.5" cy="10.5" r="6"/><path d="M15 15l5 5"/>',
-  'k-edit': '<path d="M15.2 5.3a2 2 0 0 1 2.8 0l.7.7a2 2 0 0 1 0 2.8L8.5 19 4 20l1-4.5z"/><path d="M13.5 7l3.5 3.5"/>',
-  'k-delete':
-    '<path d="M4.5 7h15"/><path d="M9.5 7V5.2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V7"/><path d="M6.5 7l.8 11.8a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4L17.5 7"/><path d="M10.2 11v5.5M13.8 11v5.5"/>',
-  'k-move': '<path d="M12 20.5H7.4A1.4 1.4 0 0 1 6 19.1V4.9a1.4 1.4 0 0 1 1.4-1.4h6.1L18 8v3"/><path d="M13.5 3.5V8H18"/><path d="M11.5 16h9M17.5 13l3 3-3 3"/>',
-  'k-execute': '<path d="M5 7l5 5-5 5"/><path d="M12.5 17H19"/>',
-  'k-fetch': '<circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.3 2.3 3.5 5.2 3.5 8.5s-1.2 6.2-3.5 8.5C9.7 18.2 8.5 15.3 8.5 12S9.7 5.8 12 3.5z"/>',
-  'k-think': '<path d="M9.5 17.5h5M10.5 20.5h3"/><path d="M12 3.5a5.5 5.5 0 0 0-3.3 9.9c.6.5 1 1.2 1 2v.1h4.6v-.1c0-.8.4-1.5 1-2A5.5 5.5 0 0 0 12 3.5z"/>',
-  'k-agent': '<path d="M2.5 12H9M6.5 9.2 9.3 12l-2.8 2.8"/><circle cx="15.5" cy="12" r="5.5" stroke-linecap="butt" stroke-dasharray="3.2 2.56"/><circle cx="15.5" cy="12" r="1.7" fill="currentColor" stroke="none"/>',
-  'k-plan': '<path d="M3.5 7.2 5.8 9.5 10 5M3.5 15.7 5.8 18 10 13.5"/><path d="M13.5 7.5H20.5M13.5 16H20.5"/>',
-  'k-communicate':
-    '<path d="M4 6.4A1.9 1.9 0 0 1 5.9 4.5h12.2A1.9 1.9 0 0 1 20 6.4v8.2a1.9 1.9 0 0 1-1.9 1.9H11.5L7 20v-3.5H5.9A1.9 1.9 0 0 1 4 14.6z"/><path d="M10.1 8.7a1.9 1.9 0 1 1 2.8 1.7c-.6.3-.9.7-.9 1.3"/><path d="M12 14h.01"/>',
-  'k-switch_mode': '<rect x="2.5" y="7" width="19" height="10" rx="5"/><circle cx="16.5" cy="12" r="2.5"/>',
-  'k-other': '<path d="M17.57 4.17A4.8 4.8 0 0 0 11.13 10.47L5.11 16.49a1.7 1.7 0 0 0 2.4 2.4L13.53 12.87A4.8 4.8 0 0 0 19.83 6.43L17.76 8.5 15.5 6.24z"/>',
-  'k-mcp': '<path d="M9 3.5v4M15 3.5v4"/><path d="M6.5 7.5h11V10a5.5 5.5 0 0 1-11 0z"/><path d="M12 15.5v5"/>',
-}
-
-export const ICON_NAMES = Object.freeze(Object.keys(LINE_ICONS))
-
-export const ICO = (name, size = 13) =>
-  `<svg class="ico" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${LINE_ICONS[name] || ''}</svg>`
-
-export const EFFORT_LEVELS = { minimal: 1, low: 1, medium: 2, high: 3, xhigh: 4, max: 5 }
-export const EFFORT_NAMES = { minimal: 'Minimal', low: 'Low', medium: 'Medium', high: 'High', xhigh: 'Extra high', max: 'Max' }
-export const effortName = (effort) => EFFORT_NAMES[String(effort).toLowerCase()] || effort || ''
-
-export function effortBars(effort) {
-  if (!effort) return ''
-  const level = EFFORT_LEVELS[String(effort).toLowerCase()] ?? 0
-  const bars = [1, 2, 3, 4, 5]
-    .map((n) => `<rect x="${n * 4 - 1.5}" y="${(20 - n * 3.2).toFixed(1)}" width="2.6" height="${(n * 3.2).toFixed(1)}" rx="1.1" class="${n <= level ? 'eb-on' : 'eb-off'}"/>`)
-    .join('')
-  const label = esc(`${effortName(effort)} effort`)
-  return `<svg class="ico eff" width="14" height="14" viewBox="0 0 24 24" role="img" aria-label="${label}"><title>${label}</title>${bars}</svg>`
-}
-
-export const HARNESS_MARKS = Object.freeze({
-  'claude-code': 'CC',
-  codex: 'Cx',
-  cursor: 'Cu',
-  antigravity: 'AG',
-  hermes: 'H',
-  opencode: 'OC',
-  kilocode: 'K',
-  'gemini-cli': 'Gm',
-  'copilot-cli': 'Cp',
-})
-export const harnessMark = (id, name = id) => HARNESS_MARKS[id] || String(name || '?')[0].toUpperCase()
-
-export const KINDS = Object.freeze({
-  read: { name: 'Read', tip: 'Reads a file' },
-  search: { name: 'Search', tip: 'Searches for text or lists files' },
-  edit: { name: 'Edit', tip: 'Creates or changes a file' },
-  delete: { name: 'Delete', tip: 'Deletes files' },
-  move: { name: 'Move', tip: 'Moves or renames files' },
-  execute: { name: 'Run', tip: 'Runs a command' },
-  fetch: { name: 'Web', tip: 'Fetches a page or searches the web' },
-  think: { name: 'Think', tip: 'Thinks or takes notes, without changing anything' },
-  agent: { name: 'Subagent', tip: 'Hands work to a subagent' },
-  plan: { name: 'Plan', tip: 'Updates the plan' },
-  communicate: { name: 'Ask', tip: 'Asks you something' },
-  switch_mode: { name: 'Mode', tip: "Changes the agent's mode" },
-  other: { name: 'Other', tip: 'A tool that has no kind yet' },
-  mcp: { name: 'MCP', tip: 'A tool from an MCP server' },
-})
-
-const COMMAND_TOOLS = /bash|shell|command|exec|terminal|powershell/i
-export function kindOf(item, byName = null) {
-  const server = item?.server || mcpServer(item?.name)
-  if (server) return { kind: 'mcp', server, shell: false }
-  const kind = KINDS[item?.kind] ? item.kind : 'other'
-  const nameKind = byName?.get(item?.name) ?? (COMMAND_TOOLS.test(item?.name || '') ? 'execute' : null)
-  return { kind, server: null, shell: kind !== 'execute' && kind !== 'other' && nameKind === 'execute' }
-}
-
-export function kindTip({ kind, server, shell }) {
-  if (kind === 'mcp') return server ? `A tool from the ${server} MCP server` : KINDS.mcp.tip
-  const tip = (KINDS[kind] || KINDS.other).tip
-  return shell ? `${tip}, with a shell command` : tip
-}
-
-export const kindIconHTML = (k) => `<span class="tk" data-k="${esc(k.kind)}" data-tip="${esc(kindTip(k))}">${ICO(`k-${k.kind}`)}</span>`
-
-export const toolKinds = (tools) => new Map((tools || []).map((t) => [t.name, t.kind]))
+import { mcpServer } from '../lib/tool-kinds.mjs'
+import { esc } from './html.mjs'
+
+export { mcpServer }
+
+const LINE_ICONS = {
+  key: '<circle cx="8" cy="15.5" r="4.5"/><path d="M11.3 12.2 20 3.5M16.5 7l2.5 2.5M14 9.5l2 2"/>',
+  folder: '<path d="M3 7.4A1.4 1.4 0 0 1 4.4 6h4.2l2 2.5h7A1.4 1.4 0 0 1 19 9.9v7.7a1.4 1.4 0 0 1-1.4 1.4H4.4A1.4 1.4 0 0 1 3 17.6z"/>',
+  org: '<path d="M4.5 20V5.4A1.4 1.4 0 0 1 5.9 4h6.7A1.4 1.4 0 0 1 14 5.4V20"/><path d="M14 9h4.1a1.4 1.4 0 0 1 1.4 1.4V20"/><path d="M3 20h18"/><path d="M7.5 8h3M7.5 11.5h3M7.5 15h3M16.8 13h.01M16.8 16.5h.01"/>',
+  branch:
+    '<circle cx="7" cy="5.5" r="2.2"/><circle cx="7" cy="18.5" r="2.2"/><circle cx="17" cy="7.5" r="2.2"/><path d="M7 7.7v8.6"/><path d="M17 9.7c0 3.4-2.6 4.6-6 5.2-1.9.3-3.3.9-4 1.4"/>',
+  worktree: '<circle cx="6.5" cy="5" r="2.2"/><circle cx="17.5" cy="5" r="2.2"/><circle cx="12" cy="19" r="2.2"/><path d="M6.5 7.2v1.3a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3V7.2"/><path d="M12 11.5v5.3"/>',
+  model: '<path d="M11 3.5l1.8 4.9 4.9 1.8-4.9 1.8L11 16.9l-1.8-4.9-4.9-1.8 4.9-1.8z"/><path d="M18 14.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z"/>',
+  'k-read': '<path d="M13.5 3.5H7.4A1.4 1.4 0 0 0 6 4.9v14.2a1.4 1.4 0 0 0 1.4 1.4h9.2a1.4 1.4 0 0 0 1.4-1.4V8z"/><path d="M13.5 3.5V8H18"/><path d="M9 12.5h6M9 16h4"/>',
+  'k-search': '<circle cx="10.5" cy="10.5" r="6"/><path d="M15 15l5 5"/>',
+  'k-edit': '<path d="M15.2 5.3a2 2 0 0 1 2.8 0l.7.7a2 2 0 0 1 0 2.8L8.5 19 4 20l1-4.5z"/><path d="M13.5 7l3.5 3.5"/>',
+  'k-delete':
+    '<path d="M4.5 7h15"/><path d="M9.5 7V5.2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V7"/><path d="M6.5 7l.8 11.8a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4L17.5 7"/><path d="M10.2 11v5.5M13.8 11v5.5"/>',
+  'k-move': '<path d="M12 20.5H7.4A1.4 1.4 0 0 1 6 19.1V4.9a1.4 1.4 0 0 1 1.4-1.4h6.1L18 8v3"/><path d="M13.5 3.5V8H18"/><path d="M11.5 16h9M17.5 13l3 3-3 3"/>',
+  'k-execute': '<path d="M5 7l5 5-5 5"/><path d="M12.5 17H19"/>',
+  'k-fetch': '<circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.3 2.3 3.5 5.2 3.5 8.5s-1.2 6.2-3.5 8.5C9.7 18.2 8.5 15.3 8.5 12S9.7 5.8 12 3.5z"/>',
+  'k-think': '<path d="M9.5 17.5h5M10.5 20.5h3"/><path d="M12 3.5a5.5 5.5 0 0 0-3.3 9.9c.6.5 1 1.2 1 2v.1h4.6v-.1c0-.8.4-1.5 1-2A5.5 5.5 0 0 0 12 3.5z"/>',
+  'k-agent': '<path d="M2.5 12H9M6.5 9.2 9.3 12l-2.8 2.8"/><circle cx="15.5" cy="12" r="5.5" stroke-linecap="butt" stroke-dasharray="3.2 2.56"/><circle cx="15.5" cy="12" r="1.7" fill="currentColor" stroke="none"/>',
+  'k-plan': '<path d="M3.5 7.2 5.8 9.5 10 5M3.5 15.7 5.8 18 10 13.5"/><path d="M13.5 7.5H20.5M13.5 16H20.5"/>',
+  'k-communicate':
+    '<path d="M4 6.4A1.9 1.9 0 0 1 5.9 4.5h12.2A1.9 1.9 0 0 1 20 6.4v8.2a1.9 1.9 0 0 1-1.9 1.9H11.5L7 20v-3.5H5.9A1.9 1.9 0 0 1 4 14.6z"/><path d="M10.1 8.7a1.9 1.9 0 1 1 2.8 1.7c-.6.3-.9.7-.9 1.3"/><path d="M12 14h.01"/>',
+  'k-switch_mode': '<rect x="2.5" y="7" width="19" height="10" rx="5"/><circle cx="16.5" cy="12" r="2.5"/>',
+  'k-other': '<path d="M17.57 4.17A4.8 4.8 0 0 0 11.13 10.47L5.11 16.49a1.7 1.7 0 0 0 2.4 2.4L13.53 12.87A4.8 4.8 0 0 0 19.83 6.43L17.76 8.5 15.5 6.24z"/>',
+  'k-mcp': '<path d="M9 3.5v4M15 3.5v4"/><path d="M6.5 7.5h11V10a5.5 5.5 0 0 1-11 0z"/><path d="M12 15.5v5"/>',
+}
+
+export const ICON_NAMES = Object.freeze(Object.keys(LINE_ICONS))
+
+export const ICO = (name, size = 13) =>
+  `<svg class="ico" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${LINE_ICONS[name] || ''}</svg>`
+
+const svg = (body, size = 16) =>
+  `<svg width="${size}" height="${size}" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`
+
+export const IC = {
+  chev: svg('<path d="M6 4l4 4-4 4"/>', 12),
+}
+
+export const EFFORT_LEVELS = { minimal: 1, low: 1, medium: 2, high: 3, xhigh: 4, max: 5 }
+export const EFFORT_NAMES = { minimal: 'Minimal', low: 'Low', medium: 'Medium', high: 'High', xhigh: 'Extra high', max: 'Max' }
+export const effortName = (effort) => EFFORT_NAMES[String(effort).toLowerCase()] || effort || ''
+
+export function effortBars(effort) {
+  if (!effort) return ''
+  const level = EFFORT_LEVELS[String(effort).toLowerCase()] ?? 0
+  const bars = [1, 2, 3, 4, 5]
+    .map((n) => `<rect x="${n * 4 - 1.5}" y="${(20 - n * 3.2).toFixed(1)}" width="2.6" height="${(n * 3.2).toFixed(1)}" rx="1.1" class="${n <= level ? 'eb-on' : 'eb-off'}"/>`)
+    .join('')
+  const label = esc(`${effortName(effort)} effort`)
+  return `<svg class="ico eff" width="14" height="14" viewBox="0 0 24 24" role="img" aria-label="${label}"><title>${label}</title>${bars}</svg>`
+}
+
+export const HARNESS_MARKS = Object.freeze({
+  'claude-code': 'CC',
+  codex: 'Cx',
+  cursor: 'Cu',
+  antigravity: 'AG',
+  hermes: 'H',
+  opencode: 'OC',
+  kilocode: 'K',
+  'gemini-cli': 'Gm',
+  'copilot-cli': 'Cp',
+})
+export const harnessMark = (id, name = id) => HARNESS_MARKS[id] || String(name || '?')[0].toUpperCase()
+
+export const KINDS = Object.freeze({
+  read: { name: 'Read', tip: 'Reads a file' },
+  search: { name: 'Search', tip: 'Searches for text or lists files' },
+  edit: { name: 'Edit', tip: 'Creates or changes a file' },
+  delete: { name: 'Delete', tip: 'Deletes files' },
+  move: { name: 'Move', tip: 'Moves or renames files' },
+  execute: { name: 'Run', tip: 'Runs a command' },
+  fetch: { name: 'Web', tip: 'Fetches a page or searches the web' },
+  think: { name: 'Think', tip: 'Thinks or takes notes, without changing anything' },
+  agent: { name: 'Subagent', tip: 'Hands work to a subagent' },
+  plan: { name: 'Plan', tip: 'Updates the plan' },
+  communicate: { name: 'Ask', tip: 'Asks you something' },
+  switch_mode: { name: 'Mode', tip: "Changes the agent's mode" },
+  other: { name: 'Other', tip: 'A tool that has no kind yet' },
+  mcp: { name: 'MCP', tip: 'A tool from an MCP server' },
+})
+
+const COMMAND_TOOLS = /bash|shell|command|exec|terminal|powershell/i
+export function kindOf(item, byName = null) {
+  const server = item?.server || mcpServer(item?.name)
+  if (server) return { kind: 'mcp', server, shell: false }
+  const kind = KINDS[item?.kind] ? item.kind : 'other'
+  const nameKind = byName?.get(item?.name) ?? (COMMAND_TOOLS.test(item?.name || '') ? 'execute' : null)
+  return { kind, server: null, shell: kind !== 'execute' && kind !== 'other' && nameKind === 'execute' }
+}
+
+export function kindTip({ kind, server, shell }) {
+  if (kind === 'mcp') return server ? `A tool from the ${server} MCP server` : KINDS.mcp.tip
+  const tip = (KINDS[kind] || KINDS.other).tip
+  return shell ? `${tip}, with a shell command` : tip
+}
+
+export const kindIconHTML = (k) => `<span class="tk" data-k="${esc(k.kind)}" data-tip="${esc(kindTip(k))}">${ICO(`k-${k.kind}`)}</span>`
+
+export const toolKinds = (tools) => new Map((tools || []).map((t) => [t.name, t.kind]))

package/ui/pictures.css

@@ -0,0 +1,100 @@
+.g-inst {
+  display: block;
+  flex: none;
+  overflow: visible;
+}
+
+.g-inst .t {
+  fill: var(--dial-track);
+}
+.g-inst .f {
+  fill: var(--inst);
+}
+.g-inst .s {
+  fill: var(--inst-soft);
+}
+.g-inst .a {
+  fill: var(--add);
+}
+.g-inst .d {
+  fill: var(--del);
+}
+.g-inst .r {
+  fill: var(--work);
+  animation: tg-pulse 1.6s ease-in-out infinite;
+}
+.g-inst .m {
+  stroke: var(--text3);
+  stroke-width: 1;
+  opacity: 0.8;
+}
+.g-inst .m.base {
+  opacity: 0.35;
+}
+
+.g-waf rect[data-st] {
+  fill: var(--st);
+}
+
+.ticks {
+  display: flex;
+  gap: 2px;
+  width: max-content;
+  max-width: 100%;
+}
+.ticks i {
+  flex: 0 1 auto;
+  width: 14px;
+  min-width: 3px;
+  height: 3px;
+  border-radius: 1px;
+  background: rgba(255, 255, 255, 0.15);
+}
+.ticks i[data-s='d'] {
+  background: var(--done);
+  opacity: 0.8;
+}
+.ticks i[data-s='c'] {
+  background: var(--st);
+}
+.ticks[data-st='working'] i[data-s='c'] {
+  animation: tg-breathe 2s ease-in-out infinite;
+}
+.ticks.compact i {
+  width: 7px;
+}
+
+.ticks {
+  position: relative;
+  --hit-t: 6px;
+  --hit-b: 6px;
+}
+.ticks::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));
+}
+.tot .i-wrap {
+  --hit-l: 1px;
+}
+
+@keyframes tg-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+@keyframes tg-breathe {
+  50% {
+    opacity: 0.45;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .g-inst .r,
+  .ticks[data-st='working'] i[data-s='c'] {
+    animation: none;
+  }
+}

package/ui/pictures.mjs

@@ -0,0 +1,158 @@
+import { URGENCY_ORDER } from './status.mjs'
+
+export const fx = (n) => n.toFixed(2)
+export const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v))
+export const polar = (r, deg) => {
+  const a = ((deg - 90) * Math.PI) / 180
+  return [r * Math.cos(a), r * Math.sin(a)]
+}
+export const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c])
+
+export const TONE_COUNT = 5
+
+export function wideBox(size, large) {
+  return { W: large ? 300 : Math.round(size * 1.9), H: large ? 46 : size >= 24 ? 16 : 13 }
+}
+
+export function wideSVG(cls, W, H, body) {
+  return `<svg class="inst g-inst ${cls}" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" aria-hidden="true">${body}</svg>`
+}
+
+export function binTimes(times, from, to, weights, n = 14) {
+  const out = Array(n).fill(0)
+  const span = Math.max(1, to - from)
+  times.forEach((at, i) => {
+    if (!at) return
+    out[clamp(Math.floor(((at - from) / span) * n), 0, n - 1)] += weights ? weights[i] : 1
+  })
+  return out
+}
+
+export function waffleStates(counts, n, order = URGENCY_ORDER) {
+  const sum = counts.reduce((a, b) => a + b, 0) || 1
+  const exact = counts.map((c) => (c / sum) * n)
+  const alloc = exact.map(Math.floor)
+  counts.forEach((c, i) => {
+    if (c && !alloc[i] && alloc.reduce((a, b) => a + b, 0) < n) alloc[i] = 1
+  })
+  for (const [, i] of exact.map((x, i) => [x - Math.floor(x), i]).sort((a, b) => b[0] - a[0])) {
+    if (alloc.reduce((a, b) => a + b, 0) >= n) break
+    if (counts[i]) alloc[i]++
+  }
+  const out = []
+  alloc.forEach((k, i) => {
+    for (let j = 0; j < k && out.length < n; j++) out.push(order[i])
+  })
+  while (out.length < n) out.push('idle')
+  return out
+}
+
+export function planTicks(plan, status, cls = '') {
+  if (!plan?.total) return ''
+  let marks = ''
+  for (let i = 0; i < plan.total; i++) {
+    const s = i < plan.done ? 'd' : i === plan.done && plan.current ? 'c' : 't'
+    marks += `<i data-s="${s}"></i>`
+  }
+  const label = `${plan.done} of ${plan.total} steps done`
+  return `<span class="ticks${cls ? ` ${esc(cls)}` : ''}" data-st="${esc(status || 'idle')}" role="img" aria-label="${esc(label)}">${marks}</span>`
+}
+
+export const planSpec = (plan) =>
+  plan?.total ? { k: 'gauge', pct: (plan.done / plan.total) * 100, plan: { done: plan.done, total: plan.total, cur: Boolean(plan.current) } } : null
+
+export const FOOT_SIZE = 34
+
+function rebin(vals, n) {
+  if (vals.length <= n) return vals.slice()
+  const out = Array(n).fill(0)
+  vals.forEach((v, i) => {
+    out[Math.min(n - 1, Math.floor((i * n) / vals.length))] += v
+  })
+  return out
+}
+
+const footSVG = (cls, size, body) => `<svg class="inst g-inst g-foot ${cls}" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" aria-hidden="true">${body}</svg>`
+
+export function drawPie(spec, size) {
+  const a = spec.a || 0
+  const r = spec.r || 0
+  const tot = a + r
+  const c = size / 2
+  const R = c - 0.5
+  if (!tot) return footSVG('g-pie', size, `<circle cx="${fx(c)}" cy="${fx(c)}" r="${fx(R)}" class="t"/>`)
+  const pt = (f) => {
+    const ang = f * 2 * Math.PI - Math.PI / 2
+    return `${fx(c + R * Math.cos(ang))},${fx(c + R * Math.sin(ang))}`
+  }
+  const slice = (f0, f1, cls) => {
+    if (f1 - f0 >= 0.9999) return `<circle cx="${fx(c)}" cy="${fx(c)}" r="${fx(R)}" class="${cls}"/>`
+    if (f1 <= f0) return ''
+    return `<path d="M${fx(c)},${fx(c)}L${pt(f0)}A${fx(R)},${fx(R)} 0 ${f1 - f0 > 0.5 ? 1 : 0} 1 ${pt(f1)}Z" class="${cls}"/>`
+  }
+  const fa = a / tot
+  return footSVG('g-pie', size, slice(0, fa, 'a') + slice(fa, 1, 'd'))
+}
+
+export function drawWaffle(spec, size) {
+  const large = size >= 60
+  const total = Math.max(0, spec.total || 0)
+  const n = Math.min(total, large ? 64 : 25)
+  if (!n) return ''
+  const g = Math.max(2, Math.ceil(Math.sqrt(n)))
+  const gap = large ? 3 : g > 4 ? 1.5 : 2
+  const cell = (size - gap * (g - 1)) / g
+  const run = spec.run ? Math.max(1, Math.round((spec.run / total) * n)) : 0
+  const states = spec.sts ? waffleStates(spec.sts, n) : null
+  let out = ''
+  for (let i = 0; i < n; i++) {
+    const x = (i % g) * (cell + gap)
+    const y = Math.floor(i / g) * (cell + gap)
+    out += `<rect x="${fx(x)}" y="${fx(y)}" width="${fx(cell)}" height="${fx(cell)}" rx="${fx(Math.min(2, cell * 0.22))}" ${states ? `data-st="${states[i]}"` : `class="${i < run ? 'r' : 't'}"`}/>`
+  }
+  return footSVG('g-waf', size, out)
+}
+
+export function drawCols(spec, size) {
+  const large = size >= 60
+  const bars = spec.bars?.some(Boolean) ? rebin(spec.bars, large ? 14 : 7) : null
+  const floor = size - 1
+  const top = 1
+  let out = `<line x1="0" x2="${size}" y1="${fx(floor + 0.5)}" y2="${fx(floor + 0.5)}" class="m base"/>`
+  const col = (i, n, gap, h, cls) => {
+    const w = (size - gap * (n - 1)) / n
+    return `<rect x="${fx(i * (w + gap))}" y="${fx(floor - h)}" width="${fx(w)}" height="${fx(h)}" rx="${large ? 1.5 : 0.6}" class="${cls}"/>`
+  }
+  if (bars) {
+    const max = Math.max(1, ...bars)
+    let last = -1
+    bars.forEach((v, i) => {
+      if (v > 0) last = i
+    })
+    bars.forEach((v, i) => {
+      if (v) out += col(i, bars.length, large ? 3 : 1.5, Math.max(1.5, (v / max) * (floor - top)), i === last ? 'f' : 's')
+    })
+  } else {
+    const v = spec.v || 0
+    const lit = v >= spec.base ? clamp(Math.floor(Math.log10(v / spec.base)) + 1, 1, 5) : 0
+    for (let i = 0; i < 5; i++) out += col(i, 5, large ? 4 : 2, ((floor - top) * (i + 1)) / 5, i < lit ? 's' : 't')
+  }
+  return footSVG('g-cols', size, out)
+}
+
+export const FOOT_DRAW = { pie: drawPie, waffle: drawWaffle, cols: drawCols }
+
+export function footerNote(spec) {
+  if (spec.k === 'pie') return 'Green is the share of lines added, and red is the share removed.'
+  if (spec.k === 'waffle' && spec.sts)
+    return `${(spec.total || 0) > 64 ? 'Each square stands for a few threads' : 'One square for each thread in the list'}, in its status color, with the ones that need you first.`
+  if (spec.k === 'waffle')
+    return (spec.total || 0) > 64
+      ? 'Each square stands for a few threads. Blue squares are running, and gray ones are not.'
+      : 'One square for each thread in the list. Blue squares are running, and gray ones are not.'
+  if (spec.k === 'cols')
+    return spec.bars?.some(Boolean)
+      ? 'Each column is a slice of time, oldest on the left. The brighter column is the latest.'
+      : 'Each bar is ten times the one before it, so this shows size, not a limit.'
+  return ''
+}