@threadcrumbs/common 0.1.4 → 0.1.6

package/ui/icons.mjs

@@ -0,0 +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>`
+
+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 ''
+}