@threadcrumbs/common 0.1.3 → 0.1.5

package/ui/icons.mjs

@@ -0,0 +1,98 @@
+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]))

package/ui/status.css

@@ -0,0 +1,75 @@
+[data-st='asking'] {
+  --st: var(--lamp);
+  --plate: var(--lamp-wash);
+}
+[data-st='working'] {
+  --st: var(--work);
+  --plate: var(--work-plate);
+}
+[data-st='delegating'] {
+  --st: var(--wait);
+  --plate: var(--wait-plate);
+}
+[data-st='done'] {
+  --st: var(--done);
+  --plate: var(--done-plate);
+}
+[data-st='error'] {
+  --st: var(--err);
+  --plate: var(--err-plate);
+}
+[data-st='idle'] {
+  --st: var(--idle);
+  --plate: var(--idle-plate);
+}
+
+.lamp {
+  display: inline-grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  flex: none;
+  color: var(--st, var(--idle));
+}
+.lamp svg {
+  width: 16px;
+  height: 16px;
+  overflow: visible;
+}
+.lamp .spin {
+  animation: tc-spin 1.5s linear infinite;
+  transform-origin: 8px 8px;
+}
+.lamp .spin-slow {
+  animation: tc-spin 5s linear infinite;
+  transform-origin: 8px 8px;
+}
+.lamp .blink {
+  animation: tc-blink 2s ease-in-out infinite;
+}
+
+@keyframes tc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes tc-blink {
+  0%,
+  60% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lamp .spin,
+  .lamp .spin-slow,
+  .lamp .blink {
+    animation: none;
+  }
+}

package/ui/status.mjs

@@ -0,0 +1,36 @@
+export const STATUSES = [
+  { key: 'asking', name: 'Needs you', color: '--lamp', plate: '--lamp-wash' },
+  { key: 'working', name: 'Working', color: '--work', plate: '--work-plate' },
+  { key: 'delegating', name: 'Waiting on agents', color: '--wait', plate: '--wait-plate' },
+  { key: 'done', name: 'Done', color: '--done', plate: '--done-plate' },
+  { key: 'error', name: 'Error', color: '--err', plate: '--err-plate' },
+  { key: 'idle', name: 'Idle', color: '--idle', plate: '--idle-plate' },
+]
+
+export const STATUS_KEYS = STATUSES.map((s) => s.key)
+
+export const URGENCY_ORDER = ['asking', 'error', 'done', 'working', 'delegating', 'idle']
+
+export const LIVE_STATUSES = new Set(['asking', 'working', 'delegating'])
+
+export const statusOf = (key) => STATUSES.find((s) => s.key === key) || STATUSES.at(-1)
+
+export const LAMP_ICONS = {
+  asking:
+    '<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><g class="blink"><path d="M8 .9 15.100 8 8 15.100.9 8Z" fill="var(--sign)" stroke="var(--sign)" stroke-width="1"/><path d="M6.300 6.300a1.750 1.750 0 1 1 2.700 1.500c-.7.4-1 .8-1 1.400" fill="none" stroke="var(--sign-ink)" stroke-width="1.400" stroke-linecap="round"/><circle cx="8" cy="11.300" r=".85" fill="var(--sign-ink)"/></g></svg>',
+  working:
+    '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="5.600" stroke="currentColor" stroke-opacity=".28" stroke-width="2"/><g class="spin"><path d="M8 2.400a5.600 5.600 0 0 1 5.600 5.600" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></g></svg>',
+  delegating:
+    '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><g class="spin-slow"><circle cx="8" cy="8" r="5.800" stroke="currentColor" stroke-width="1.800" stroke-dasharray="2.600 2.460"/></g><circle cx="8" cy="8" r="2.100" fill="currentColor"/></svg>',
+  done: '<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.600" fill="currentColor"/><path d="M4.900 8.200 7.100 10.400 11.100 5.800" fill="none" stroke="var(--knock)" stroke-width="1.700" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  error:
+    '<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.500 15.200 14.200H.8Z" fill="currentColor"/><path d="M8 6v4" stroke="var(--knock)" stroke-width="1.600" stroke-linecap="round"/><circle cx="8" cy="12" r=".9" fill="var(--knock)"/></svg>',
+  idle: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="5.200" stroke="currentColor" stroke-width="1.600"/></svg>',
+  pending:
+    '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="4.600" stroke="currentColor" stroke-width="1.500"/></svg>',
+}
+
+export const lampHTML = (key, cls = '') => {
+  const st = STATUS_KEYS.includes(key) || key === 'pending' ? key : 'idle'
+  return `<span class="lamp${cls ? ` ${cls}` : ''}" data-st="${st}">${LAMP_ICONS[st]}</span>`
+}

package/ui/theme.css

@@ -0,0 +1,104 @@
+:root {
+  --bg: #14161b;
+  --pane: #1b1e25;
+  --raise: #272a33;
+  --sunk: #111318;
+  --line: rgba(255, 255, 255, 0.17);
+  --line2: rgba(255, 255, 255, 0.1);
+  --text: #e6e4df;
+  --text2: #c6c5cc;
+  --text3: #9f9ea8;
+  --accent: #c96442;
+  --accent-text: #e3865f;
+  --on-accent: #ffffff;
+  --focus: #e3865f;
+  --primary: #252833;
+  --on-primary: #f2f0ec;
+
+  --lamp: #f4cf50;
+  --lamp-ink: #f4cf50;
+  --lamp-wash: #2c2510;
+  --sign: #f4cf50;
+  --sign-ink: #15191d;
+  --knock: #101117;
+  --work: #79c2f4;
+  --wait: #a784eb;
+  --done: #9be6bd;
+  --err: #f87d7c;
+  --idle: #81878d;
+  --warn: #ffb56e;
+  --work-plate: #12293a;
+  --wait-plate: #241f3d;
+  --done-plate: #14301f;
+  --err-plate: #3a1d1b;
+  --idle-plate: #1a1c25;
+  --err-wash: #3a1d1b;
+
+  --add: #9be6bd;
+  --del: #f87d7c;
+  --add-bg: #14301f;
+  --del-bg: #3a1d1b;
+
+  --c0: #2a2d38;
+  --c1: #5cacf7;
+  --c2: #3cd0bc;
+  --c3: #b9a6ff;
+  --c4: #ff8fc8;
+  --chart: #7ccbff;
+  --chart-fill: rgba(124, 203, 255, 0.13);
+  --inst: #b9b8c0;
+  --inst-soft: #b9b8c0;
+  --dial: #101727;
+  --dial-track: #2f4466;
+  --needle: #eef8ff;
+  --needle-glow: rgba(127, 207, 255, 0.55);
+  --hub: #e8ecf2;
+
+  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
+  --scrim: rgba(0, 0, 0, 0.55);
+
+  --fs-1: 12px;
+  --fs-2: 12.5px;
+  --fs-3: 13px;
+  --fs-4: 13.5px;
+  --fs-5: 14px;
+  --fs-6: 14.5px;
+  --fs-7: 15px;
+  --fs-8: 15.5px;
+  --fs-9: 16px;
+  --fs-10: 17px;
+  --fs-11: 21.5px;
+  --fs-12: 28px;
+  --lh-tight: 1.24;
+  --lh-ui: 1.42;
+  --lh-body: 1.5;
+
+  --sp-1: 2px;
+  --sp-2: 4px;
+  --sp-3: 6px;
+  --sp-4: 8px;
+  --sp-5: 10px;
+  --sp-6: 12px;
+  --sp-7: 16px;
+  --sp-8: 24px;
+  --gl: max(16px, env(safe-area-inset-left, 0px));
+  --gr: max(16px, env(safe-area-inset-right, 0px));
+
+  --r-1: 2px;
+  --r-2: 4px;
+  --r-3: 6px;
+  --r-4: 8px;
+  --r-round: 999px;
+
+  --sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --cond: 'Inter Tight Variable', 'Inter Variable', system-ui, sans-serif;
+  --mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+
+  font-size-adjust: 0.51;
+  color-scheme: dark;
+}
+:root *,
+:root *::before,
+:root *::after {
+  font-size-adjust: 0.51 !important;
+}

package/ui/where.css

@@ -0,0 +1,43 @@
+.w {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+.w > span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.w .ico {
+  color: var(--text3);
+}
+.w-folder {
+  color: var(--text);
+  font-weight: 500;
+}
+.hmark {
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-2);
+  color: var(--text2);
+  font: 600 var(--fs-1) / 1.04 var(--mono);
+}
+.eff .eb-on {
+  fill: var(--text2);
+}
+.eff .eb-off {
+  fill: var(--line);
+}
+.tk {
+  display: inline-flex;
+  vertical-align: -2px;
+  margin-right: 6px;
+  color: var(--text3);
+}
+.tk .ico {
+  width: 14px;
+  height: 14px;
+}

package/ui/where.mjs

@@ -0,0 +1,24 @@
+import { esc } from './html.mjs'
+import { ICO } from './icons.mjs'
+
+export function repoName(name, org) {
+  const scoped = /^@([^/]+)\/(.+)$/.exec(name || '')
+  return scoped && org && scoped[1].toLowerCase() === String(org).toLowerCase() ? scoped[2] : name
+}
+
+export function whereHTML(s) {
+  const org = s.org ? `<span class="w w-org" title="${esc(`Organization ${s.org}`)}">${ICO('org')}<span>${esc(s.org)}</span></span>` : ''
+  return `${org}<span class="w w-folder" title="${esc(s.projectPath || s.project || '')}">${ICO('folder')}<span>${esc(repoName(s.project, s.org) || 'unknown')}</span></span>`
+}
+
+export function whereFullHTML(s) {
+  const chip = (icon, text) => `<span class="w">${ICO(icon)}<span>${esc(text)}</span></span>`
+  return [
+    s.org && chip('org', s.org),
+    `<span class="w w-folder">${ICO('folder')}<span>${esc(repoName(s.project, s.org) || 'unknown')}</span></span>`,
+    s.worktree && chip('worktree', s.worktree),
+    s.gitBranch && chip('branch', s.gitBranch),
+  ]
+    .filter(Boolean)
+    .join('')
+}