@threadcrumbs/common 0.1.4 → 0.1.6

package/ui/rows.css

@@ -0,0 +1,403 @@
+.term {
+  display: inline-block;
+  padding: 0;
+  background: none;
+  border: 0;
+  color: var(--text3);
+  font: 400 var(--fs-4) / 17px var(--cond);
+  text-align: left;
+  text-decoration: underline dotted transparent;
+  text-underline-offset: 3px;
+  white-space: nowrap;
+  cursor: help;
+}
+.term:hover,
+.term[aria-expanded='true'] {
+  color: var(--text);
+  text-decoration-color: currentColor;
+}
+.i-wrap {
+  display: inline-flex;
+  flex: none;
+  border-radius: 50%;
+  cursor: help;
+}
+.i-wrap:empty {
+  display: none;
+}
+
+.grp-h {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 12px 5px var(--gl);
+  background: var(--bg);
+  color: var(--text2);
+  font: 600 var(--fs-4) / 1.24 var(--cond);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.grp-h[data-kind='repo'] {
+  font-size: var(--fs-5);
+  letter-spacing: 0;
+  text-transform: none;
+}
+.grp-h[data-k='you'] .g-l {
+  color: var(--lamp);
+}
+.grp-h .ico {
+  color: var(--text3);
+}
+.grp-h .n {
+  color: var(--text3);
+  font-weight: 500;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+.grp-h .hint {
+  margin-left: auto;
+  color: var(--text3);
+  font: 400 var(--fs-4) / 1.04 var(--cond);
+  letter-spacing: 0;
+  text-transform: none;
+  white-space: nowrap;
+}
+.grp-h .hint kbd {
+  display: inline-block;
+  margin-right: 3px;
+  padding: 2px 4px;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  font: 500 var(--fs-3) / 1.04 var(--mono);
+}
+@media (hover: none) {
+  .grp-h .hint {
+    display: none;
+  }
+}
+.grp-h .g-cols {
+  display: none;
+  letter-spacing: 0;
+  text-transform: none;
+}
+.grp-t {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+  margin-left: -4px;
+  padding: 2px 6px 2px 0;
+  background: none;
+  border: 0;
+  border-radius: 5px;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: left;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.grp-t > svg {
+  flex: none;
+  margin-top: 2px;
+  color: var(--text3);
+  transition: transform 0.14s;
+}
+.grp-t[aria-expanded='true'] > svg {
+  transform: rotate(90deg);
+}
+.grp-t:hover .g-c:last-child > span {
+  text-decoration: underline;
+  text-decoration-color: var(--text3);
+  text-underline-offset: 3px;
+}
+.grp-t:focus-visible {
+  outline: 2px solid var(--accent-text);
+  outline-offset: 1px;
+}
+section[data-shut] .grp-h {
+  padding-bottom: 7px;
+  border-bottom: 1px solid var(--line2);
+}
+.g-flow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 8px;
+  min-width: 0;
+}
+.g-l {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+.g-flow > .g-l {
+  display: contents;
+}
+.g-c {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+}
+.g-tallies {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 4px;
+  letter-spacing: 0;
+  text-transform: none;
+}
+.g-tally {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.g-tally .lamp,
+.g-tally .lamp svg {
+  width: 13px;
+  height: 13px;
+}
+.g-tally b {
+  color: var(--text2);
+  font: 600 var(--fs-5) / 1.04 var(--cond);
+}
+.g-tally[data-st='asking'] b {
+  color: var(--lamp);
+}
+.g-tally[data-st='error'] b {
+  color: var(--err);
+}
+@media (pointer: coarse) {
+  .grp-t {
+    min-height: 36px;
+    padding-block: 6px;
+  }
+}
+
+.row {
+  position: relative;
+}
+.row-main {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  column-gap: 7px;
+  row-gap: 1px;
+  width: 100%;
+  margin: 0;
+  padding: 8px 12px 10px var(--gl);
+  background: none;
+  border: 0;
+  border-radius: 0;
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+}
+.row-main:hover {
+  background: var(--raise);
+}
+.row-main:focus-visible {
+  outline-offset: -2px;
+  border-radius: var(--r-3);
+}
+.row-main > .row-where {
+  grid-row: 1;
+  grid-column: 1 / -1;
+}
+.row-main > .lamp {
+  grid-row: 2;
+  grid-column: 1;
+  margin-top: 2px;
+}
+.row-main > .row-text {
+  grid-row: 2;
+  grid-column: 2;
+}
+.row-main > .nums {
+  grid-row: 2;
+  grid-column: 3;
+}
+.row-main > .row-why {
+  grid-row: 3;
+  grid-column: 2 / -1;
+}
+.row-main > .row-meta {
+  grid-row: 4;
+  grid-column: 2 / -1;
+}
+.row-main > .row-plan {
+  grid-row: 5;
+  grid-column: 2 / -1;
+  justify-self: start;
+  max-width: 100%;
+}
+.row-where {
+  display: flex;
+  align-items: center;
+  gap: 0 10px;
+  min-width: 0;
+  margin-bottom: 2px;
+  overflow: hidden;
+  color: var(--text3);
+  font: 400 var(--fs-4) / 1.43 var(--cond);
+  white-space: nowrap;
+}
+.row-where .w {
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+.row-where .w > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.row-where .w-folder {
+  color: var(--text2);
+  font-weight: 400;
+}
+.row-where .ico,
+.row-meta .ico {
+  width: 12px;
+  height: 12px;
+}
+.row-h {
+  flex: none;
+  width: auto;
+  height: 15px;
+  margin-left: auto;
+  padding: 0 3px;
+  border: 0;
+  color: var(--text3);
+  font: 500 var(--fs-2) / 16px var(--mono);
+}
+.row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.row-title {
+  font: 500 var(--fs-8) / 1.36 var(--sans);
+  overflow-wrap: anywhere;
+}
+.row[data-st='idle'] .row-title {
+  color: var(--text2);
+  font-weight: 400;
+}
+.row-sub {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.row-now {
+  display: inline-flex;
+  flex: none;
+  align-items: baseline;
+  gap: 6px;
+  color: var(--text2);
+  font: 400 var(--fs-5) / 1.43 var(--cond);
+}
+.now-h {
+  color: var(--text2);
+  font-weight: 400;
+}
+.row[data-st='asking'] .now-h,
+.row[data-st='error'] .now-h {
+  color: var(--st);
+  font-weight: 500;
+}
+.now-v {
+  color: var(--text3);
+  font-weight: 400;
+}
+.now-d {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text2);
+  font: 400 var(--fs-4) / 1.43 var(--mono);
+  text-overflow: ellipsis;
+}
+.now-d.plain {
+  font: 400 var(--fs-5) / 1.43 var(--cond);
+}
+.now-d.rich {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  font: 400 var(--fs-7) / 1.51 var(--cond);
+}
+.nd-tool {
+  flex: none;
+  color: var(--text);
+  font: 600 var(--fs-7) / 1.51 var(--cond);
+}
+.nd-dur {
+  flex: none;
+  color: var(--text3);
+  font: 400 var(--fs-6) / 1.51 var(--cond);
+}
+.nd-t {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text2);
+  font: 400 var(--fs-6) / 1.51 var(--mono);
+  text-overflow: ellipsis;
+}
+.row-why {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--text);
+  font: 400 var(--fs-5) / 1.38 var(--cond);
+  overflow-wrap: anywhere;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.row-why.mono {
+  font: 400 var(--fs-4) / 1.43 var(--mono);
+}
+.row-meta {
+  display: none;
+  color: var(--text3);
+  font: 400 var(--fs-4) / 1.43 var(--cond);
+  overflow-wrap: anywhere;
+}
+.row-meta > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 10px;
+}
+.nums {
+  display: grid;
+  justify-items: end;
+  gap: 1px;
+  min-width: 0;
+  font: 500 var(--fs-6) / 1.43 var(--cond);
+  font-variant-numeric: tabular-nums;
+}
+.nums .xtra {
+  display: none;
+  color: var(--text3);
+}
+.add {
+  color: var(--add);
+}
+.del {
+  color: var(--del);
+}
+.row-plan {
+  display: flex;
+  margin-top: 5px;
+}

package/ui/rows.mjs

@@ -0,0 +1,172 @@
+import { ago, callDuration, compactNumber, duration, modelName, percent, toolLabel } from './format.mjs'
+import { esc, instAttrs, joinNames, plural, termButton } from './html.mjs'
+import { IC, ICO, effortBars, effortName, harnessMark } from './icons.mjs'
+import { planSpec, planTicks } from './pictures.mjs'
+import { URGENCY_ORDER, lampHTML, statusOf } from './status.mjs'
+import { repoName, whereHTML } from './where.mjs'
+
+export const turnOf = (s) => (['asking', 'error', 'done'].includes(s.status) ? 'you' : ['working', 'delegating'].includes(s.status) ? 'run' : 'quiet')
+
+export const groupKey = (group, g) => `${group}:${g.key}`
+
+export const roughly = (ms) => duration(ms).replace(/ \d+s$/, '')
+const turnStart = (s) => s.turnStartedAt || s.lastActivityAt
+
+export function shownPlan(s) {
+  const p = s?.plan
+  return p && s.status === 'done' && p.done < p.total ? { ...p, done: p.total, current: '' } : p
+}
+
+export function waitingOn(s) {
+  const names = []
+  if (s.subagents) names.push(plural(s.subagents, 'subagent', 'subagents'))
+  const peers = s.awaiting || []
+  const name = (p) => p.title || 'another session'
+  if (peers.length > 2) names.push(name(peers[0]), plural(peers.length - 1, 'other session', 'other sessions'))
+  else names.push(...peers.map(name))
+  return names.length ? `Waiting on ${joinNames(names)}` : 'Waiting on agents'
+}
+
+export function nowParts(s, now) {
+  switch (s.status) {
+    case 'working':
+      return { h: 'Working', v: roughly(now - turnStart(s)) }
+    case 'delegating':
+      return { h: waitingOn(s), v: roughly(now - turnStart(s)) }
+    case 'asking':
+      return { h: 'Waiting for your answer', v: duration(now - s.lastActivityAt) }
+    case 'done':
+      return { h: 'Finished', v: ago(now - s.lastActivityAt) }
+    case 'error':
+      return { h: 'Stopped on an API error', v: ago(now - s.lastActivityAt) }
+    default:
+      return { h: 'Last active', v: ago(now - s.lastActivityAt) }
+  }
+}
+
+export function nowText(s, now) {
+  const p = nowParts(s, now)
+  return p.v ? `${p.h} ${p.v}` : p.h
+}
+
+export function nowHTML(s, now) {
+  const p = nowParts(s, now)
+  return `<span class="now-h">${esc(p.h)}</span>${p.v ? `<span class="now-v">${esc(p.v)}</span>` : ''}`
+}
+
+export function rowDetail(s, now) {
+  if (s.status === 'working') {
+    if (!s.tool) return { cls: 'rich', html: '<span class="nd-tool">Thinking</span>' }
+    const since = Number.isFinite(s.tool.startedAt) ? s.tool.startedAt : now
+    return {
+      cls: 'rich',
+      html: `<span class="nd-tool">${esc(toolLabel(s.tool.name))}</span><span class="nd-dur num" data-since="${since}">${esc(callDuration(now - since))}</span>${s.tool.target ? `<span class="nd-t">${esc(s.tool.target)}</span>` : ''}`,
+    }
+  }
+  if (s.status === 'delegating') {
+    const names = (s.workingSubagents || []).map((a) => a.name).filter(Boolean)
+    return names.length ? { cls: 'plain', html: esc(names.join(', ')) } : null
+  }
+  return null
+}
+
+export function errorShort(text) {
+  const m = /^(API Error:\s*\d+)\s*(\{.*\})\s*$/s.exec(text || '')
+  if (m) {
+    try {
+      const body = JSON.parse(m[2])
+      if (body?.error?.message) return `${m[1]} ${body.error.message}`
+    } catch {}
+  }
+  return text || ''
+}
+
+export function askLine(s) {
+  if ((s.status !== 'asking' && s.status !== 'error') || !s.ask) return null
+  const a = s.ask
+  if (a.type === 'question') {
+    const q = a.questions?.[0]
+    const text = q?.text || q?.header
+    return text ? { kind: 'question', text } : null
+  }
+  if (a.type === 'approval') {
+    if (a.target) return { kind: 'approval', text: a.target, mono: true }
+    return a.tool ? { kind: 'approval', text: toolLabel(a.tool), mono: false } : null
+  }
+  if (a.type === 'error') return { kind: 'error', text: errorShort(a.text) || 'The last turn failed.' }
+  return null
+}
+
+export const linesHTML = (l) => (l ? `<span class="add">+${compactNumber(l.added)}</span> <span class="del">−${compactNumber(l.removed)}</span>` : '—')
+
+export function rowLabel(s, harnessName = (id) => id) {
+  const p = shownPlan(s)
+  const pct = s.context ? percent(s.context.used, s.context.limit) : null
+  return [
+    s.org,
+    s.project,
+    statusOf(s.status).name,
+    s.title,
+    harnessName(s.harness),
+    s.gitBranch,
+    modelName(s.model),
+    s.effort && `${effortName(s.effort)} effort`,
+    pct != null && `Context ${Math.round(pct)}%`,
+    p?.total && `Plan ${p.done} of ${p.total}`,
+  ]
+    .filter(Boolean)
+    .join(', ')
+}
+
+function ticksHTML(s) {
+  const p = shownPlan(s)
+  if (!p?.total || s.status === 'idle') return ''
+  return `<span class="row-plan" data-term="plan" data-rowtip ${instAttrs(planSpec(p), `${p.done} of ${p.total} steps`, p.current || 'All steps done')}>${planTicks(p, s.status)}</span>`
+}
+
+export function rowHTML(s, { sel = null, now = Date.now(), harnessName = (id) => id } = {}) {
+  const current = s.id === sel
+  const name = harnessName(s.harness)
+  const det = rowDetail(s, now)
+  const ask = askLine(s)
+  const meta = [
+    s.gitBranch && `<span>${ICO('branch')}${esc(s.gitBranch)}</span>`,
+    s.worktree && `<span>${ICO('worktree')}${esc(s.worktree)}</span>`,
+    s.model && `<span>${ICO('model')}${esc(modelName(s.model))}${effortBars(s.effort)}</span>`,
+  ]
+    .filter(Boolean)
+    .join('')
+  return `<li class="row" data-id="${esc(s.id)}" data-st="${esc(s.status)}" data-turn="${turnOf(s)}"${current ? ' data-current' : ''}>
+    <button type="button" class="row-main" data-act="select" data-key="${esc(s.id)}" data-peek="${esc(s.id)}" aria-label="${esc(rowLabel(s, harnessName))}"${current ? ' aria-current="true"' : ''}>
+      <span class="row-where">${whereHTML(s)}<span class="hmark row-h" title="${esc(name)}">${esc(harnessMark(s.harness, name))}</span></span>
+      ${lampHTML(s.status)}
+      <span class="row-text"><span class="row-title">${esc(s.title)}</span><span class="row-sub"><span class="row-now num" data-now="${esc(s.id)}">${nowHTML(s, now)}</span>${det ? `<span class="now-d ${det.cls}">${det.html}</span>` : ''}</span></span>
+      <span class="nums"><span class="xtra">${esc(compactNumber(s.tokens?.output))}</span><span class="xtra">${linesHTML(s.lines)}</span></span>
+      ${ask ? `<span class="row-why${ask.mono ? ' mono' : ''}">${esc(ask.text)}</span>` : ''}
+      <span class="row-meta">${meta}</span>
+      ${ticksHTML(s)}
+    </button>
+  </li>`
+}
+
+function groupLabel(g) {
+  if (g.kind !== 'repo') return `<span class="g-l">${esc(g.label)}</span>`
+  const org = g.org ? `<span class="g-c">${ICO('org')}<span>${esc(g.org)}</span></span>` : ''
+  return `<span class="g-l">${org}<span class="g-c" title="${esc(g.path || g.label)}">${ICO('folder')}<span>${esc(repoName(g.label, g.org))}</span></span></span>`
+}
+
+export function groupTally(g) {
+  if (g.kind === 'status') return ''
+  const counts = new Map()
+  for (const s of g.items) counts.set(s.status, (counts.get(s.status) || 0) + 1)
+  const parts = URGENCY_ORDER.filter((k) => counts.get(k)).map(
+    (k) => `<span class="g-tally" data-st="${k}" title="${esc(`${statusOf(k).name}: ${counts.get(k)}`)}">${lampHTML(k)}<b>${counts.get(k)}</b></span>`,
+  )
+  return parts.length ? `<span class="g-tallies">${parts.join('')}</span>` : ''
+}
+
+export function groupHeadHTML(g, first, { group = 'turn', shut = false } = {}) {
+  const key = groupKey(group, g)
+  const extra = first ? `<span class="hint"><kbd>N</kbd>next waiting</span><span class="g-cols">${termButton('output', 'Output')}${termButton('linesColumn', 'Lines')}</span>` : ''
+  return `<h2 class="grp-h" data-k="${esc(g.key)}" data-kind="${esc(g.kind)}"><button type="button" class="grp-t" data-act="grp-toggle" data-key="${esc(key)}" aria-expanded="${!shut}" aria-label="${esc(`${shut ? 'Show' : 'Hide'} ${g.label}, ${g.items.length}`)}">${IC.chev}<span class="g-flow">${groupLabel(g)}<span class="n">${g.items.length}</span>${shut ? groupTally(g) : ''}</span></button>${extra}</h2>`
+}

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>`
+}