@2lab.ai/ui 0.0.0-stage → 0.2.0

package/dist/agent-inbox.js

@@ -0,0 +1,1061 @@
+import { d as define, U as UiElement, p as prefersReducedMotion, e as esc, f as escAttr } from "./html-elD6Bb_u.js";
+import { b as fmtDuration, f as fmtAgo, g as fmtUsd, d as fmtInt } from "./format-BBGWXPzk.js";
+const styles = `
+:host {
+  --ib-run-bg: color-mix(in srgb, var(--st-run) 16%, var(--ib-card));
+  --ib-run-fg: color-mix(in srgb, var(--st-run) 70%, var(--ib-text));
+  --ib-wait-bg: color-mix(in srgb, var(--st-wait) 16%, var(--ib-card));
+  --ib-wait-fg: color-mix(in srgb, var(--st-wait) 70%, var(--ib-text));
+  --ib-done-bg: color-mix(in srgb, var(--st-done) 16%, var(--ib-card));
+  --ib-done-fg: color-mix(in srgb, var(--st-done) 70%, var(--ib-text));
+  --ib-fail-bg: color-mix(in srgb, var(--st-fail) 16%, var(--ib-card));
+  --ib-fail-fg: color-mix(in srgb, var(--st-fail-text) 70%, var(--ib-text));
+  --ib-rest-bg: var(--ib-pill);
+  --ib-rest-fg: var(--ib-text-2);
+}
+.ib { container: ib / inline-size; position: relative; }
+
+/* Board = equal columns. No overflow clip on columns: a card flying between columns stays visible. */
+.ib-board { display: grid; grid-template-columns: repeat(var(--ib-cols, 3), minmax(0, 1fr)); gap: 12px; align-items: start; }
+.ib-col { position: relative; background: var(--ib-col); border-radius: 14px; padding: 2px 4px 4px; min-width: 0; display: flex; flex-direction: column; }
+.ib-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 10px; min-height: 40px; }
+.ib-col-spark { color: var(--ib-spark); display: inline-flex; flex-shrink: 0; }
+.ib-col-spark svg, .ib-spark svg { width: 14px; height: 14px; }
+.ib-col-name { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ib-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+:host([lang="ko"]) .ib-col-name { letter-spacing: 0.04em; }
+.ib-count { flex-shrink: 0; background: var(--ib-pill); color: var(--ib-text-2); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 500; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
+.ib-cards { position: relative; display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
+.ib-empty { margin: 0; text-align: center; color: var(--ib-muted); font-size: 13px; padding: 14px 8px 18px; }
+.ib-empty[hidden] { display: none; }
+
+/* List = the same columns stacked full width (same DOM). Forced with view="list"; automatic below 640px. */
+:host([view="list"]) .ib-board { grid-template-columns: minmax(0, 1fr); }
+:host([view="list"]) .ib-col-name { flex: 0 1 auto; text-align: left; }
+:host([view="list"]) .ib-summary { -webkit-line-clamp: 1; }
+:host([view="list"]) .ib-empty { padding: 10px 8px 16px; }
+/* Narrow board: the columns scroll sideways inside the board (the page never scrolls sideways). */
+@container ib (max-width: 839px) {
+  :host(:not([view="list"])) .ib-board {
+    grid-template-columns: repeat(var(--ib-cols, 3), minmax(min(300px, 84cqi), 1fr));
+    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 8px;
+  }
+  :host(:not([view="list"])) .ib-col { scroll-snap-align: start; }
+}
+@container ib (max-width: 639px) {
+  :host(:not([view="board"])) .ib-board { grid-template-columns: minmax(0, 1fr); overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; }
+  :host(:not([view="board"])) .ib-col-name { flex: 0 1 auto; text-align: left; }
+  :host(:not([view="board"])) .ib-summary { -webkit-line-clamp: 1; }
+  :host(:not([view="board"])) .ib-empty { padding: 10px 8px 16px; }
+}
+
+/* ── CARD — collapsed face + in-place expansion ── */
+.ib-card {
+  position: relative; background: var(--ib-card); border: 1px solid var(--ib-card-border); border-radius: 12px;
+  box-shadow: var(--ib-shadow); color: var(--ib-text); transition: border-color 150ms ease, box-shadow 150ms ease;
+  --st-color: var(--ib-muted);
+}
+.ib-card[data-status="waiting"] { --st-color: var(--st-wait); }
+.ib-card[data-status="running"] { --st-color: var(--st-run); }
+.ib-card[data-status="done"] { --st-color: var(--st-done); }
+.ib-card[data-status="failed"] { --st-color: var(--st-fail); }
+/* Parked cards are dimmed with colour, not opacity (opacity would fight the enter / exit fades). */
+.ib-card[data-status="idle"] { background: var(--ib-card-dim); box-shadow: none; }
+.ib-card[data-status="idle"] .ib-title { color: var(--ib-text-2); font-weight: 500; }
+.ib-card[data-status="idle"] .ib-summary { color: var(--ib-muted); }
+.ib-card.is-flying { z-index: 5; box-shadow: var(--ib-shadow-raised); }
+.ib-card.is-exiting { position: absolute; z-index: 1; pointer-events: none; }
+.ib-face { display: block; padding: 12px 14px; border-radius: 11px; container: ibface / inline-size; }
+.ib-face[role="button"] { cursor: pointer; }
+.ib-face:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
+.ib-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ib-spark { flex-shrink: 0; display: inline-flex; color: var(--st-color); }
+.ib-title { flex: 1 1 auto; font-size: 15px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ib-summary {
+  margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ib-text-2);
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
+}
+/* The task in progress. */
+.ib-task { margin-top: 8px; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--ib-text); background: var(--ib-pill); border-radius: 8px; padding: 5px 9px; }
+.ib-task-id { flex-shrink: 0; color: var(--ib-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
+.ib-task-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ib-task-time { flex-shrink: 0; color: var(--ib-text-2); font-variant-numeric: tabular-nums; }
+/* Sub-agents: status dots + counts. */
+.ib-agents { margin-top: 8px; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ib-text-2); }
+.ib-agents > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ib-muted); }
+.ib-dots { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
+.ib-adot { width: 7px; height: 7px; border-radius: 50%; background: var(--ib-muted); display: inline-block; }
+.ib-adot.is-running { background: var(--st-run); animation: ib-pulse 1.6s ease-in-out infinite; }
+.ib-adot.is-done { background: var(--st-done); }
+.ib-adot.is-failed { background: var(--st-fail); }
+.ib-adot.is-unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ib-muted); }
+.ib-dots-more { font-size: 11px; color: var(--ib-muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
+.ib-agents-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.ib-agents-text b { color: var(--ib-text); font-weight: 600; }
+.ib-agents-text .ib-fail { color: var(--st-fail-text); font-weight: 600; }
+/* Tokens · cost. */
+.ib-usage { margin-top: 8px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ib-text-2); font-variant-numeric: tabular-nums; }
+.ib-cnt { color: var(--ib-text); font-weight: 600; }
+.ib-unit { margin-left: 3px; color: var(--ib-muted); }
+.ib-sep { color: var(--ib-muted); }
+/* Files the run made: count, newest chips, +N. */
+.ib-arts { display: flex; align-items: center; gap: 5px; margin-top: 8px; min-width: 0; overflow: hidden; }
+.ib-arts-n { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--ib-text-2); font-variant-numeric: tabular-nums; }
+.ib-glyph { width: 14px; height: 14px; flex-shrink: 0; }
+.ib-chip {
+  display: inline-flex; align-items: center; gap: 5px; flex: 1 1 0; min-width: 0; max-width: 160px; height: 24px; padding: 0 8px;
+  border: 1px solid var(--ib-card-border); border-radius: 999px; background: var(--ib-pill); color: var(--ib-text); font-size: 11.5px; line-height: 1;
+  --tint: var(--text-secondary);
+}
+.ib-chip .ib-glyph { color: var(--tint); }
+.ib-chip.is-image { --tint: var(--green); }
+.ib-chip.is-html { --tint: var(--orange); }
+.ib-chip.is-audio { --tint: var(--purple); }
+.ib-chip.is-video, .ib-chip.is-pdf { --tint: var(--red); }
+.ib-chip.is-markdown { --tint: var(--accent); }
+.ib-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ib-arts-more { flex-shrink: 0; font-size: 11px; color: var(--ib-muted); }
+/* Foot: the status tag, then the metrics on the right (a narrow foot wraps them below). */
+.ib-foot { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ib-text-2); min-width: 0; }
+.ib-tag {
+  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; flex: 0 1 auto; height: 24px; padding: 0 10px 0 8px;
+  border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums;
+}
+.ib-tag[data-tone="run"] { background: var(--ib-run-bg); color: var(--ib-run-fg); }
+.ib-tag[data-tone="wait"] { background: var(--ib-wait-bg); color: var(--ib-wait-fg); }
+.ib-tag[data-tone="done"] { background: var(--ib-done-bg); color: var(--ib-done-fg); }
+.ib-tag[data-tone="fail"] { background: var(--ib-fail-bg); color: var(--ib-fail-fg); }
+.ib-tag[data-tone="rest"] { background: var(--ib-rest-bg); color: var(--ib-rest-fg); }
+.ib-tag-text { overflow: hidden; text-overflow: ellipsis; }
+.ib-tag-icon { flex-shrink: 0; display: inline-flex; align-items: center; color: currentColor; }
+.ib-tag-icon svg { width: 12px; height: 12px; }
+.ib-ago { color: inherit; }
+.ib-ago::before { content: "·"; margin: 0 6px; }
+/* The state word ("Running · ", "Done in ") goes only when the face has 300px of content or less. */
+@container ibface (max-width: 300px) { .ib-tag .ib-pre { display: none; } }
+.ib-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
+.ib-dot.is-hollow { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
+/* The running ring: its track follows the tag colour, so it reads on the tint. */
+.ib-spin {
+  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
+  border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-right-color: currentColor;
+  animation: ib-spin 0.9s linear infinite;
+}
+.ib-metrics { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; row-gap: 4px; max-width: 100%; color: var(--ib-muted); flex-shrink: 0; margin-left: auto; font-variant-numeric: tabular-nums; }
+.ib-metric { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; }
+.ib-metric + .ib-metric { border-left: 1px solid var(--ib-card-border); }
+.ib-metric:last-child { padding-right: 0; }
+.ib-metric svg { width: 13px; height: 13px; }
+.ib-metric.is-warn svg { color: var(--st-wait); }
+.ib-metric.is-danger { color: var(--st-fail-text); font-weight: 600; }
+
+/* Expansion — grid row 0fr → 1fr; cards below ride the animated row. */
+.ib-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-expand) var(--ease-out); }
+.ib-card.is-open .ib-expand { grid-template-rows: 1fr; }
+.ib-expand-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity var(--dur-expand) var(--ease-out); }
+.ib-card.is-open .ib-expand-inner { opacity: 1; }
+.ib-card.no-motion .ib-expand, .ib-card.no-motion .ib-expand-inner { transition: none; }
+.ib-body { margin: 0 14px; padding: 12px 0 14px; border-top: 1px solid var(--ib-card-border); font-size: 13px; color: var(--ib-text-2); }
+/* Steps: dot + connector, the current step's dot in ink. */
+.ib-more { font-size: 12px; color: var(--ib-muted); padding: 0 0 6px 16px; }
+.ib-steps { list-style: none; margin: 0; padding: 0; }
+.ib-step { position: relative; display: flex; gap: 10px; padding: 0 0 8px 16px; line-height: 1.4; color: var(--ib-text-2); }
+.ib-step::before { content: ''; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ib-muted); opacity: 0.55; }
+.ib-step::after { content: ''; position: absolute; left: 4.5px; top: 15px; bottom: 1px; width: 1px; background: var(--ib-card-border); }
+.ib-step:last-child { padding-bottom: 0; }
+.ib-step:last-child::after { display: none; }
+.ib-step.is-current { color: var(--ib-text); }
+.ib-step.is-current::before { background: var(--ib-text); opacity: 1; }
+.ib-step.is-pending { color: var(--ib-muted); }
+.ib-step-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.ib-step-meta { flex-shrink: 0; color: var(--ib-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
+/* Button row: model on the left, secondary outline buttons, one ink primary last. */
+.ib-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ib-card-border); }
+.ib-bar:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
+.ib-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ib-muted); font-size: 13px; }
+.ib-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-left: auto; }
+.ib-btn {
+  display: inline-flex; align-items: center; justify-content: center; background: var(--ib-card); border: 1px solid var(--ib-card-border);
+  border-radius: 8px; color: var(--ib-text); font: inherit; font-size: 13px; font-weight: 500; padding: 5px 12px; min-height: 32px;
+  white-space: nowrap; cursor: pointer;
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease, transform var(--dur-press) var(--ease-out);
+}
+.ib-btn.is-primary { background: var(--ib-text); border-color: var(--ib-text); color: var(--ib-card); }
+.ib-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.ib-btn:active:not([aria-disabled="true"]):not(:focus-visible) { transform: scale(0.97); }
+
+@keyframes ib-spin { to { transform: rotate(360deg); } }
+@keyframes ib-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+
+/* Hover — pointer devices only; colour / border, never movement. */
+@media (hover: hover) and (pointer: fine) {
+  .ib-card:hover { border-color: var(--ib-muted); }
+  .ib-card[data-status="idle"]:hover { border-color: var(--ib-card-border); }
+  .ib-btn:hover:not([aria-disabled="true"]) { border-color: var(--ib-muted); }
+  .ib-btn.is-primary:hover:not([aria-disabled="true"]) { border-color: var(--ib-text); opacity: 0.88; }
+}
+/* 44px targets on touch and narrow screens. */
+@media (pointer: coarse), (max-width: 639px) {
+  .ib-btn { min-height: 44px; padding: 8px 14px; }
+}
+/* Reduced motion: the global rule only shortens durations, so infinite loops stop here; the ring stays whole. */
+@media (prefers-reduced-motion: reduce) {
+  .ib-spin { animation: none; border-color: currentColor; }
+  .ib-adot.is-running { animation: none; }
+}
+`;
+const BOARD_HOLD_MS = 900;
+const ANNOUNCE_MS = 1e3;
+const MAX_DOTS = 6;
+const MAX_CHIPS = 4;
+const MAX_DETAILS = 5;
+const COUNT_MS = 900;
+const STATUSES = ["waiting", "running", "done", "failed", "idle"];
+function agoKo(at, now = Date.now()) {
+  const s = Math.max(0, Math.floor((now - at) / 1e3));
+  if (s < 45) return "방금";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${Math.max(1, m)}분 전`;
+  const h = Math.floor(m / 60);
+  if (h < 48) return `${h}시간 전`;
+  return `${Math.floor(h / 24)}일 전`;
+}
+const STRINGS = {
+  en: {
+    status: {
+      waiting: "Waiting for you",
+      running: "Running",
+      done: "Done",
+      failed: "Failed",
+      idle: "Idle"
+    },
+    doneIn: "Done in ",
+    empty: "Nothing here",
+    open: "Open",
+    columns: { needs: "Needs you", running: "Running", done: "Done" },
+    agents: "Sub-agents",
+    agentsRunning: (n) => `running ${n}`,
+    agentsFailed: (n) => `failed ${n}`,
+    tok: "tok",
+    tokTitle: "Total tokens",
+    costTitle: "API-equivalent cost",
+    steps: "Tasks done / total",
+    ctx: (p) => `Context window used — ${p}%`,
+    arts: "Files the run made",
+    earlier: (n) => `+${n} earlier`,
+    announce: (w, r) => `${w} need${w === 1 ? "s" : ""} you, ${r} running`,
+    changed: (title, word) => `${title}: ${word}.`,
+    ago: (at, now) => fmtAgo(at, now)
+  },
+  ko: {
+    status: {
+      waiting: "입력 대기",
+      running: "실행 중",
+      done: "완료",
+      failed: "실패",
+      idle: "대기"
+    },
+    doneIn: "완료 · ",
+    empty: "비어 있음",
+    open: "열기",
+    columns: { needs: "응답 필요", running: "실행 중", done: "완료" },
+    agents: "서브에이전트",
+    agentsRunning: (n) => `실행 ${n}`,
+    agentsFailed: (n) => `실패 ${n}`,
+    tok: "tok",
+    tokTitle: "총 토큰",
+    costTitle: "API 환산 비용",
+    steps: "완료한 task / 전체",
+    ctx: (p) => `컨텍스트 ${p}% 사용`,
+    arts: "모델이 만든 산출물",
+    earlier: (n) => `이전 ${n}개 더`,
+    announce: (w, r) => `응답이 필요한 세션 ${w}개, 실행 중 ${r}개`,
+    changed: (title, word) => `${title}: ${word}.`,
+    ago: agoKo
+  }
+};
+const SPARK_SVG = '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7 1.5c.5 3.3 2.2 5 5.5 5.5-3.3.5-5 2.2-5.5 5.5C6.5 9.2 4.8 7.5 1.5 7c3.3-.5 5-2.2 5.5-5.5z"/><circle cx="13" cy="12.6" r="1.3"/></svg>';
+const WAIT_SVG = '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.8 15 14H1z"/></svg>';
+const FAIL_SVG = '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm-.8 3h1.6v4.8H7.2zM8 12.3a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>';
+const TASKS_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 4.2l1.4 1.4 2.4-2.6M2.5 10.2l1.4 1.4 2.4-2.6M9 4.5h4.5M9 10.5h4.5"/></svg>';
+const CTX_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="8" r="5.6"/><path d="M8 8V2.4A5.6 5.6 0 0 1 13.6 8z" fill="currentColor" stroke="none"/></svg>';
+const AGENTS_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="4" cy="3.5" r="1.8"/><circle cx="12" cy="8" r="1.8"/><circle cx="12" cy="13" r="1.8"/><path d="M4 5.3v5.2c0 1.4 1.1 2.5 2.5 2.5h3.7M4 8h6.2"/></svg>';
+const ART_GLYPH = {
+  image: '<rect x="2" y="3" width="12" height="10" rx="1.5"/><circle cx="6" cy="6.5" r="1.2"/><path d="M14 11l-3.5-3.5L4 13"/>',
+  audio: '<path d="M2.5 7.5v1M5 5.5v5M7.5 3v10M10 5v6M12.5 6.5v3"/>',
+  video: '<rect x="2" y="4" width="9" height="8" rx="1.5"/><path d="M11 7l3-2v6l-3-2z"/>',
+  html: '<path d="M5.5 5L2.5 8l3 3M10.5 5l3 3-3 3M9 3.5l-2 9"/>',
+  markdown: '<path d="M4 2h5l3 3v9H4z"/><path d="M6 8h4M6 10.5h4M6 5.5h1.5"/>',
+  pdf: '<path d="M4 2h5l3 3v9H4z"/><path d="M9 2v3h3M6 10h4"/>',
+  text: '<path d="M3 4h10M3 7h10M3 10h7M3 13h5"/>',
+  file: '<path d="M4 2h5l3 3v9H4z"/><path d="M9 2v3h3"/>'
+};
+const glyph = (k) => `<svg class="ib-glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ART_GLYPH[k]}</svg>`;
+const num = (v) => {
+  const n = Number(v);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+};
+const finite = (v) => typeof v === "number" && Number.isFinite(v);
+function statusOf(card) {
+  return STATUSES.includes(card?.status) ? card.status : "idle";
+}
+function statusTone(status) {
+  return status === "waiting" ? "wait" : status === "running" ? "run" : status === "done" ? "done" : status === "failed" ? "fail" : "rest";
+}
+function artifactKind(name) {
+  const m = /\.([a-z0-9]{1,6})$/i.exec(String(name ?? "").trim());
+  const ext = m ? m[1].toLowerCase() : "";
+  if (/^(png|jpe?g|gif|webp|svg|avif|bmp)$/.test(ext)) return "image";
+  if (/^html?$/.test(ext)) return "html";
+  if (/^(md|mdx|markdown)$/.test(ext)) return "markdown";
+  if (ext === "pdf") return "pdf";
+  if (/^(mp3|wav|m4a|ogg|flac|aac)$/.test(ext)) return "audio";
+  if (/^(mp4|mov|webm|mkv)$/.test(ext)) return "video";
+  if (/^(txt|log|csv|json|ya?ml|xml)$/.test(ext)) return "text";
+  return "file";
+}
+function agentDots(a, max = MAX_DOTS) {
+  const total = Math.floor(num(a?.total));
+  if (!total) return { dots: [], more: 0 };
+  const running = Math.min(total, Math.floor(num(a?.running)));
+  const failed = Math.min(total - running, Math.floor(num(a?.failed)));
+  const done = Math.min(total - running - failed, Math.floor(num(a?.done)));
+  const all = [
+    ...Array(running).fill("running"),
+    ...Array(failed).fill("failed"),
+    ...Array(done).fill("done"),
+    ...Array(total - running - failed - done).fill("unknown")
+  ];
+  return { dots: all.slice(0, max), more: Math.max(0, total - max) };
+}
+function boardCounts(columns) {
+  const seen = /* @__PURE__ */ new Set();
+  let needs = 0;
+  let running = 0;
+  for (const col of Array.isArray(columns) ? columns : []) {
+    for (const c of Array.isArray(col?.cards) ? col.cards : []) {
+      if (!c || seen.has(String(c.id))) continue;
+      seen.add(String(c.id));
+      const s = statusOf(c);
+      if (s === "waiting" || s === "failed") needs++;
+      else if (s === "running") running++;
+    }
+  }
+  return { needs, running };
+}
+function columnsByStatus(cards, lang = "en") {
+  const L = STRINGS[lang === "ko" ? "ko" : "en"].columns;
+  const list = Array.isArray(cards) ? cards : [];
+  const of = (...s) => list.filter((c) => c && s.includes(statusOf(c)));
+  return [
+    { id: "needs-you", label: L.needs, cards: of("waiting", "failed") },
+    { id: "running", label: L.running, cards: of("running") },
+    { id: "done", label: L.done, cards: of("done", "idle") }
+  ];
+}
+function holdLanes(want, drawn, holds, now, on) {
+  const lanes = /* @__PURE__ */ Object.create(null);
+  const next = /* @__PURE__ */ Object.create(null);
+  let wakeAt = 0;
+  for (const key of Object.keys(want)) {
+    const to = want[key];
+    const from = drawn[key];
+    lanes[key] = to;
+    if (!on || !from || from === to) continue;
+    const h = holds[key];
+    const until = h && h.from === from ? h.until : now + BOARD_HOLD_MS;
+    if (now >= until) continue;
+    lanes[key] = from;
+    next[key] = { from, to, until };
+    if (!wakeAt || until < wakeAt) wakeAt = until;
+  }
+  return { lanes, holds: next, wakeAt };
+}
+function placeHolds(slots, lanes, drawnOrder) {
+  const out = /* @__PURE__ */ Object.create(null);
+  for (const k of Object.keys(slots)) out[k] = slots[k].slice();
+  const moves = [];
+  const dropped = [];
+  for (const col of Object.keys(out)) {
+    const list = out[col];
+    for (let i = list.length - 1; i >= 0; i--) {
+      const id = list[i];
+      const lane = lanes[id];
+      if (!lane || lane === col) continue;
+      if (!out[lane]) {
+        dropped.push(id);
+        continue;
+      }
+      list.splice(i, 1);
+      moves.push({ id, home: lane, at: Math.max(0, (drawnOrder[lane] ?? []).indexOf(id)) });
+    }
+  }
+  moves.sort((a, b) => a.at - b.at);
+  for (const m of moves) {
+    const l = out[m.home];
+    l.splice(Math.min(m.at, l.length), 0, m.id);
+  }
+  return { slots: out, dropped };
+}
+function fmtCount(kind, v) {
+  return kind === "usd" ? fmtUsd(v) : fmtInt(v);
+}
+function statusWord(c, t) {
+  const own = typeof c.statusText === "string" ? c.statusText.trim() : "";
+  return own || t.status[statusOf(c)];
+}
+function renderStatus(c, t) {
+  const s = statusOf(c);
+  const word = statusWord(c, t);
+  const since = num(c.since);
+  const acc = num(c.elapsedMs);
+  const ago = since ? `<span class="ib-ago" data-at="${since}"></span>` : "";
+  const icon = (inner) => `<span class="ib-tag-icon" aria-hidden="true">${inner}</span>`;
+  if (s === "running") {
+    const text = since || acc ? `<span class="ib-pre">${esc(word)} · </span><span class="ib-clock" data-clock data-from="${since}" data-acc="${acc}"></span>` : esc(word);
+    return `${icon('<span class="ib-spin"></span>')}<span class="ib-tag-text">${text}</span>`;
+  }
+  if (s === "waiting") return `${icon(WAIT_SVG)}<span class="ib-tag-text">${esc(word)}${ago}</span>`;
+  if (s === "failed") return `${icon(FAIL_SVG)}<span class="ib-tag-text">${esc(word)}${ago}</span>`;
+  if (s === "done") {
+    const pre = c.statusText?.trim() ? `${esc(word)} · ` : esc(t.doneIn);
+    const text = acc ? `<span class="ib-pre">${pre}</span>${esc(fmtDuration(acc))}` : esc(word);
+    return `${icon('<span class="ib-dot"></span>')}<span class="ib-tag-text">${text}${ago}</span>`;
+  }
+  return `${icon('<span class="ib-dot is-hollow"></span>')}<span class="ib-tag-text">${esc(word)}${ago}</span>`;
+}
+function renderTask(c) {
+  const task = c.task;
+  if (!task || typeof task.label !== "string" || !task.label) return "";
+  const from = num(task.startedAt);
+  const fixed = num(task.elapsedMs);
+  const time = from ? `<span class="ib-task-time" data-clock data-from="${from}" data-acc="0"></span>` : fixed ? `<span class="ib-task-time">${esc(fmtDuration(fixed))}</span>` : "";
+  return `<div class="ib-task" title="${escAttr(task.label)}">${task.id ? `<span class="ib-task-id">#${esc(task.id)}</span>` : ""}<span class="ib-task-name">${esc(task.label)}</span>${time}</div>`;
+}
+function renderAgents(c, t) {
+  const { dots, more } = agentDots(c.agents);
+  if (!dots.length) return "";
+  const total = Math.floor(num(c.agents?.total));
+  const running = Math.min(total, Math.floor(num(c.agents?.running)));
+  const failed = Math.floor(num(c.agents?.failed));
+  const parts = [`${esc(t.agents)} <b>${total}</b>`];
+  if (running) parts.push(esc(t.agentsRunning(running)));
+  if (failed) parts.push(`<span class="ib-fail">${esc(t.agentsFailed(failed))}</span>`);
+  const words = [`${t.agents} ${total}`, running ? t.agentsRunning(running) : "", failed ? t.agentsFailed(failed) : ""].filter(Boolean).join(", ");
+  return `<div class="ib-agents" title="${escAttr(words)}">${AGENTS_SVG}<span class="ib-dots" aria-hidden="true">${dots.map((d) => `<i class="ib-adot is-${d}"></i>`).join(
+    ""
+  )}${more ? `<span class="ib-dots-more">+${more}</span>` : ""}</span><span class="ib-agents-text">${parts.join(" · ")}</span></div>`;
+}
+function renderUsage(c, t) {
+  const parts = [];
+  if (finite(c.tokens) && c.tokens >= 0)
+    parts.push(
+      `<span class="ib-use" title="${escAttr(t.tokTitle)}"><span class="ib-cnt" data-cnt="tok" data-to="${c.tokens}">${fmtInt(c.tokens)}</span><span class="ib-unit">${esc(t.tok)}</span></span>`
+    );
+  if (finite(c.costUsd) && c.costUsd >= 0)
+    parts.push(
+      `<span class="ib-use" title="${escAttr(t.costTitle)}"><span class="ib-cnt" data-cnt="usd" data-to="${c.costUsd}">${fmtUsd(c.costUsd)}</span></span>`
+    );
+  return parts.length ? `<div class="ib-usage">${parts.join('<span class="ib-sep" aria-hidden="true">·</span>')}</div>` : "";
+}
+function renderArtifacts(c, t) {
+  const names = (Array.isArray(c.artifacts) ? c.artifacts : []).filter((n) => typeof n === "string" && n);
+  if (!names.length) return "";
+  const shown = names.slice(0, MAX_CHIPS);
+  const more = names.length - shown.length;
+  return `<div class="ib-arts"><span class="ib-arts-n" title="${escAttr(t.arts)}">${glyph("file")}${names.length}</span>${shown.map((n) => {
+    const k = artifactKind(n);
+    return `<span class="ib-chip is-${k}" title="${escAttr(n)}">${glyph(k)}<span class="ib-chip-name">${esc(n)}</span></span>`;
+  }).join("")}${more > 0 ? `<span class="ib-arts-more">+${more}</span>` : ""}</div>`;
+}
+function renderMetrics(c, t) {
+  const out = [];
+  const total = Math.floor(num(c.steps?.total));
+  if (total) {
+    const done = Math.min(total, Math.floor(num(c.steps?.done)));
+    out.push(`<span class="ib-metric" title="${escAttr(t.steps)}">${TASKS_SVG}${done}/${total}</span>`);
+  }
+  const pct = num(c.contextPct);
+  if (pct) {
+    const p = Math.round(Math.min(pct, 100));
+    const lv = pct > 80 ? " is-danger" : pct > 60 ? " is-warn" : "";
+    out.push(`<span class="ib-metric${lv}" title="${escAttr(t.ctx(p))}">${CTX_SVG}${p}%</span>`);
+  }
+  return out.length ? `<span class="ib-metrics">${out.join("")}</span>` : "";
+}
+function renderFace(c, t = STRINGS.en) {
+  return `<div class="ib-head"><span class="ib-spark" aria-hidden="true">${SPARK_SVG}</span><span class="ib-title">${esc(c.title)}</span></div>${c.summary ? `<div class="ib-summary">${esc(c.summary)}</div>` : ""}${renderTask(c)}${renderAgents(c, t)}${renderUsage(c, t)}${renderArtifacts(c, t)}<div class="ib-foot"><span class="ib-tag" data-tone="${statusTone(
+    statusOf(c)
+  )}">${renderStatus(c, t)}</span>${renderMetrics(c, t)}</div>`;
+}
+function renderButton(cardId, a, primary) {
+  const why = typeof a.disabled === "string" ? a.disabled : "";
+  const off = !!a.disabled;
+  return `<button type="button" class="ib-btn${primary ? " is-primary" : ""}" data-act="${escAttr(a.id)}" data-key="${escAttr(
+    `a:${cardId}:${a.id}`
+  )}"${off ? ' aria-disabled="true"' : ""}${why ? ` title="${escAttr(why)}"` : ""}>${esc(a.label)}${why ? `<span class="sr-only"> — ${esc(why)}</span>` : ""}</button>`;
+}
+function renderBody(c, t = STRINGS.en, openLabel = t.open) {
+  const id = String(c.id);
+  const raw = (Array.isArray(c.details) ? c.details : []).map((d) => typeof d === "string" ? { label: d } : d).filter((d) => !!d && typeof d.label === "string" && d.label !== "");
+  let steps = "";
+  if (raw.length) {
+    const folded = Math.max(0, raw.length - MAX_DETAILS);
+    const shown = raw.slice(folded);
+    steps = `<div class="ib-steps-wrap">${folded ? `<div class="ib-more">${esc(t.earlier(folded))}</div>` : ""}<ol class="ib-steps">${shown.map((d, i) => {
+      const state = d.state ?? (i === shown.length - 1 ? "current" : "done");
+      return `<li class="ib-step is-${state === "current" || state === "pending" ? state : "done"}"><span class="ib-step-text">${esc(
+        d.label
+      )}</span>${d.meta ? `<span class="ib-step-meta">${esc(d.meta)}</span>` : ""}</li>`;
+    }).join("")}</ol></div>`;
+  }
+  const primary = c.primary && c.primary.id != null && c.primary.label ? c.primary : null;
+  const decides = !!primary && !primary.disabled;
+  const btns = [];
+  for (const a of Array.isArray(c.actions) ? c.actions : [])
+    if (a && a.id != null && a.label) btns.push(renderButton(id, a, false));
+  if (openLabel)
+    btns.push(
+      `<button type="button" class="ib-btn${decides ? "" : " is-primary"}" data-open data-key="${escAttr(`o:${id}`)}">${esc(openLabel)}</button>`
+    );
+  if (primary) btns.push(renderButton(id, primary, decides));
+  const model = c.model ? `<span class="ib-model">${esc(c.model)}</span>` : "";
+  const bar = btns.length || model ? `<div class="ib-bar">${model}<span class="ib-actions">${btns.join("")}</span></div>` : "";
+  return steps || bar ? `<div class="ib-body">${steps}${bar}</div>` : "";
+}
+class UiAgentInbox extends UiElement {
+  static styles = [styles];
+  static get observedAttributes() {
+    return ["lang"];
+  }
+  #wrap = null;
+  #board = null;
+  #live = null;
+  #cards = /* @__PURE__ */ new Map();
+  #cols = /* @__PURE__ */ new Map();
+  #order = /* @__PURE__ */ Object.create(null);
+  #open = /* @__PURE__ */ new Set();
+  #holds = /* @__PURE__ */ Object.create(null);
+  #lastStatus = /* @__PURE__ */ new Map();
+  #seq = 0;
+  #painted = false;
+  #holdTimer;
+  #tickTimer;
+  #announceTimer;
+  #announcePending = "";
+  #lastCounts = "";
+  #shown = /* @__PURE__ */ new Map();
+  #counting = /* @__PURE__ */ new Map();
+  #raf = 0;
+  attributeChangedCallback() {
+    this.requestRender();
+  }
+  get #lang() {
+    return this.getAttribute("lang") === "ko" ? "ko" : "en";
+  }
+  get #t() {
+    return STRINGS[this.#lang];
+  }
+  constructor() {
+    super();
+    this.root.addEventListener("click", (e) => this.#onClick(e));
+    this.root.addEventListener("keydown", (e) => this.#onKey(e));
+  }
+  disconnectedCallback() {
+    clearTimeout(this.#holdTimer);
+    clearTimeout(this.#announceTimer);
+    clearInterval(this.#tickTimer);
+    if (this.#raf && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.#raf);
+    this.#holdTimer = this.#announceTimer = this.#tickTimer = void 0;
+    this.#raf = 0;
+    for (const [key, c] of this.#counting) {
+      c.el.textContent = fmtCount(c.kind, c.to);
+      this.#shown.set(key, c.to);
+    }
+    this.#counting.clear();
+    this.#holds = /* @__PURE__ */ Object.create(null);
+  }
+  /** The board is reconciled by `update()` (keyed, persistent nodes); there is no single markup string. */
+  render() {
+    return "";
+  }
+  // ── Events ──
+  #cardOf(el) {
+    const li = el?.closest?.("li.ib-card[data-card]");
+    return li ? li.getAttribute("data-card") ?? null : null;
+  }
+  #onClick(e) {
+    const target = e.target;
+    const act = target?.closest?.("[data-act]");
+    if (act) {
+      const id = this.#cardOf(act);
+      if (id === null || act.getAttribute("aria-disabled") === "true") return;
+      this.emit("ui-action", { cardId: id, actionId: act.getAttribute("data-act") ?? "" });
+      return;
+    }
+    const open = target?.closest?.("[data-open]");
+    if (open) {
+      const id = this.#cardOf(open);
+      if (id !== null) this.emit("ui-open", { cardId: id });
+      return;
+    }
+    const face = target?.closest?.('.ib-face[role="button"]');
+    if (face) {
+      const id = this.#cardOf(face);
+      if (id !== null) this.#toggle(id, false);
+    }
+  }
+  #onKey(e) {
+    const target = e.target;
+    if (!target) return;
+    if ((e.key === "Enter" || e.key === " ") && target.matches?.('.ib-face[role="button"]')) {
+      e.preventDefault();
+      if (e.repeat) return;
+      const id2 = this.#cardOf(target);
+      if (id2 !== null) this.#toggle(id2, true);
+      return;
+    }
+    if (e.key !== "Escape") return;
+    const tag = String(target.tagName || "").toUpperCase();
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable) return;
+    const li = target.closest?.("li.ib-card.is-open");
+    const id = li ? li.getAttribute("data-card") : null;
+    if (id === null || !this.#open.has(id)) return;
+    e.stopPropagation();
+    if (this.#toggle(id, true)) this.#cards.get(id)?.face.focus({ preventScroll: true });
+  }
+  /** Open / close one card in place. Keyboard toggles skip the transition. Returns false when the host prevented it. */
+  #toggle(id, instant) {
+    const sh = this.#cards.get(id);
+    if (!sh || !sh.face.hasAttribute("aria-controls")) return false;
+    const open = !this.#open.has(id);
+    if (!this.emit("ui-toggle", { cardId: id, expanded: open })) return false;
+    if (open) this.#open.add(id);
+    else this.#open.delete(id);
+    if (instant) sh.el.classList.add("no-motion");
+    this.#applyOpen(sh, open);
+    if (instant) {
+      void sh.el.offsetHeight;
+      sh.el.classList.remove("no-motion");
+    }
+    return true;
+  }
+  #applyOpen(sh, open) {
+    if (sh.el.classList.contains("is-open") !== open) sh.el.classList.toggle("is-open", open);
+    if (sh.face.hasAttribute("aria-controls")) sh.face.setAttribute("aria-expanded", String(open));
+    sh.expand.toggleAttribute("inert", !open);
+  }
+  // ── Reconciler ──
+  #skeleton() {
+    if (this.#wrap) return;
+    const wrap = document.createElement("div");
+    wrap.className = "ib";
+    const live = document.createElement("p");
+    live.className = "sr-only";
+    live.setAttribute("role", "status");
+    live.setAttribute("aria-live", "polite");
+    live.setAttribute("aria-atomic", "true");
+    const board = document.createElement("div");
+    board.className = "ib-board";
+    wrap.append(live, board);
+    this.content.append(wrap);
+    this.#wrap = wrap;
+    this.#live = live;
+    this.#board = board;
+  }
+  #colShell(id) {
+    const n = ++this.#seq;
+    const el = document.createElement("section");
+    el.className = "ib-col";
+    el.setAttribute("data-col", id);
+    const head = document.createElement("div");
+    head.className = "ib-col-head";
+    head.innerHTML = `<span class="ib-col-spark" aria-hidden="true">${SPARK_SVG}</span>`;
+    const name = document.createElement("h3");
+    name.className = "ib-col-name";
+    name.id = `ib-c${n}-name`;
+    const count = document.createElement("span");
+    count.className = "ib-count";
+    count.id = `ib-c${n}-count`;
+    head.append(name, count);
+    const list = document.createElement("ul");
+    list.className = "ib-cards";
+    list.setAttribute("role", "list");
+    const empty = document.createElement("p");
+    empty.className = "ib-empty";
+    el.setAttribute("aria-labelledby", `${name.id} ${count.id}`);
+    el.append(head, list, empty);
+    return { el, name, count, list, empty };
+  }
+  #shell(id) {
+    const el = document.createElement("li");
+    el.className = "ib-card";
+    el.setAttribute("data-card", id);
+    const face = document.createElement("div");
+    face.className = "ib-face";
+    face.setAttribute("data-key", `f:${id}`);
+    const expand = document.createElement("div");
+    expand.className = "ib-expand";
+    expand.id = `ib-x${++this.#seq}`;
+    expand.setAttribute("inert", "");
+    const body = document.createElement("div");
+    body.className = "ib-expand-inner";
+    expand.append(body);
+    el.append(face, expand);
+    return { el, face, expand, body, faceHtml: null, bodyHtml: null, col: "", status: "", flip: null };
+  }
+  #motion() {
+    const cs = typeof getComputedStyle === "function" ? getComputedStyle(this) : null;
+    const ms = (name, fallback) => {
+      const raw = cs?.getPropertyValue(name).trim() ?? "";
+      const v = Number.parseFloat(raw);
+      if (!Number.isFinite(v)) return fallback;
+      return /[^m]s$/.test(raw) ? v * 1e3 : v;
+    };
+    const str = (name, fallback) => cs?.getPropertyValue(name).trim() || fallback;
+    return {
+      move: ms("--dur-move", 320),
+      fade: ms("--dur-fade", 180),
+      easeOut: str("--ease-out", "cubic-bezier(0.23, 1, 0.32, 1)"),
+      easeInOut: str("--ease-in-out", "cubic-bezier(0.77, 0, 0.175, 1)")
+    };
+  }
+  /** Top-left of the card's full-size box as drawn (a move in flight included, an entrance scale not). */
+  #boxOf(el) {
+    const r = el.getBoundingClientRect();
+    return { x: r.left + r.width / 2 - el.offsetWidth / 2, y: r.top + r.height / 2 - el.offsetHeight / 2 };
+  }
+  update() {
+    this.#skeleton();
+    const board = this.#board;
+    const t = this.#t;
+    const d = this.data;
+    const now = Date.now();
+    const activeKey = this.root.activeElement?.dataset?.key;
+    const hidden = typeof document !== "undefined" && document.hidden;
+    const reduced = prefersReducedMotion();
+    const live = this.#painted && !hidden;
+    const canAnimate = live && typeof HTMLElement.prototype.animate === "function";
+    const openLabel = d?.openLabel === false ? false : typeof d?.openLabel === "string" ? d.openLabel : t.open;
+    const startOpen = new Set((Array.isArray(d?.expanded) ? d.expanded : []).map(String));
+    const cols = [];
+    const cardById = /* @__PURE__ */ new Map();
+    const slots = /* @__PURE__ */ Object.create(null);
+    const want = /* @__PURE__ */ Object.create(null);
+    for (const col of Array.isArray(d?.columns) ? d.columns : []) {
+      if (!col || col.id == null) continue;
+      const cid = String(col.id);
+      if (slots[cid]) continue;
+      slots[cid] = [];
+      cols.push({ id: cid, col });
+      for (const card of Array.isArray(col.cards) ? col.cards : []) {
+        if (!card || card.id == null) continue;
+        const id = String(card.id);
+        if (cardById.has(id)) continue;
+        cardById.set(id, card);
+        slots[cid].push(id);
+        want[id] = cid;
+      }
+    }
+    const changes = [];
+    const nextStatus = /* @__PURE__ */ new Map();
+    for (const [id, card] of cardById) {
+      const s = statusOf(card);
+      const prev = this.#lastStatus.get(id);
+      if (prev && prev !== s) changes.push(card);
+      nextStatus.set(id, s);
+    }
+    this.#lastStatus = nextStatus;
+    const drawn = /* @__PURE__ */ Object.create(null);
+    for (const [id, sh] of this.#cards) if (want[id] && slots[sh.col]) drawn[id] = sh.col;
+    const held = holdLanes(want, drawn, this.#holds, now, live && !reduced);
+    const placed = placeHolds(slots, held.lanes, this.#order);
+    for (const id of placed.dropped) delete held.holds[id];
+    this.#holds = held.holds;
+    clearTimeout(this.#holdTimer);
+    this.#holdTimer = void 0;
+    if (held.wakeAt)
+      this.#holdTimer = setTimeout(
+        () => {
+          this.#holdTimer = void 0;
+          this.requestRender();
+        },
+        Math.max(0, held.wakeAt - now) + 20
+      );
+    const first = /* @__PURE__ */ new Map();
+    const firstCol = /* @__PURE__ */ new Map();
+    const firstStatus = /* @__PURE__ */ new Map();
+    for (const [id, sh] of this.#cards) {
+      firstCol.set(id, sh.col);
+      firstStatus.set(id, sh.status);
+      if (canAnimate) first.set(id, this.#boxOf(sh.el));
+    }
+    board.style.setProperty("--ib-cols", String(Math.max(1, cols.length)));
+    cols.forEach(({ id }, i) => {
+      let c = this.#cols.get(id);
+      if (!c) {
+        c = this.#colShell(id);
+        this.#cols.set(id, c);
+      }
+      if (board.children[i] !== c.el) board.insertBefore(c.el, board.children[i] ?? null);
+    });
+    const fresh = /* @__PURE__ */ new Set();
+    const order = /* @__PURE__ */ Object.create(null);
+    for (const { id: colId, col } of cols) {
+      const c = this.#cols.get(colId);
+      const ids = placed.slots[colId];
+      order[colId] = ids;
+      ids.forEach((id, i) => {
+        let sh = this.#cards.get(id);
+        if (!sh) {
+          sh = this.#shell(id);
+          this.#cards.set(id, sh);
+          fresh.add(id);
+          if (startOpen.has(id)) this.#open.add(id);
+        }
+        this.#patch(sh, id, cardById.get(id), t, openLabel, live && !reduced);
+        sh.col = colId;
+        if (c.list.children[i] !== sh.el) c.list.insertBefore(sh.el, c.list.children[i] ?? null);
+      });
+      const name = String(col.label ?? "");
+      if (c.name.textContent !== name) c.name.textContent = name;
+      const count = String(ids.length);
+      if (c.count.textContent !== count) c.count.textContent = count;
+      const empty = typeof col.emptyText === "string" && col.emptyText ? col.emptyText : t.empty;
+      if (c.empty.textContent !== empty) c.empty.textContent = empty;
+      if (c.empty.hidden !== ids.length > 0) c.empty.hidden = ids.length > 0;
+    }
+    this.#order = order;
+    const motion = canAnimate ? this.#motion() : null;
+    for (const [id, sh] of this.#cards) {
+      if (cardById.has(id)) continue;
+      this.#cards.delete(id);
+      this.#open.delete(id);
+      this.#shown.delete(`${id}\0tok`);
+      this.#shown.delete(`${id}\0usd`);
+      this.#exit(sh, first.get(id), slots[firstCol.get(id) ?? ""] ? motion : null);
+    }
+    for (const [id, c] of this.#cols) {
+      if (slots[id]) continue;
+      c.el.remove();
+      this.#cols.delete(id);
+    }
+    if (motion) {
+      for (const [id, sh] of this.#cards) {
+        if (fresh.has(id)) {
+          sh.el.animate(
+            reduced ? [{ opacity: 0 }, { opacity: 1 }] : [
+              { opacity: 0, transform: "scale(0.97)" },
+              { opacity: 1, transform: "scale(1)" }
+            ],
+            { duration: motion.fade, easing: motion.easeOut }
+          );
+          continue;
+        }
+        const prev = firstStatus.get(id);
+        if (!reduced && prev && prev !== sh.status)
+          sh.face.querySelector(".ib-tag-icon")?.animate(
+            [
+              { opacity: 0, transform: "scale(0.6)" },
+              { opacity: 1, transform: "scale(1)" }
+            ],
+            { duration: motion.move, easing: motion.easeOut }
+          );
+        const a = first.get(id);
+        if (!a) continue;
+        const wasFlying = sh.el.classList.contains("is-flying");
+        if (sh.flip) {
+          sh.flip.cancel();
+          sh.flip = null;
+        }
+        if (wasFlying) sh.el.classList.remove("is-flying");
+        const b = this.#boxOf(sh.el);
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) continue;
+        this.#flip(sh, dx, dy, wasFlying || firstCol.get(id) !== sh.col, motion, reduced);
+      }
+    }
+    if (d)
+      this.#announce(
+        cols.map((c) => c.col),
+        changes,
+        t
+      );
+    if (activeKey && this.root.activeElement?.dataset?.key !== activeKey) {
+      const next = this.$$("[data-key]").find((el) => el.dataset.key === activeKey);
+      next?.focus({ preventScroll: true });
+    }
+    this.#tickIn(this.content);
+    this.#syncTick();
+    if (d) this.#painted = true;
+  }
+  #patch(sh, id, card, t, openLabel, countUp) {
+    const status = statusOf(card);
+    if (sh.status !== status) {
+      sh.status = status;
+      sh.el.setAttribute("data-status", status);
+    }
+    const face = renderFace(card, t);
+    if (sh.faceHtml !== face) {
+      sh.face.innerHTML = face;
+      sh.faceHtml = face;
+      const phase = `-${Math.round((typeof performance !== "undefined" ? performance.now() : Date.now()) % 900)}ms`;
+      for (const s of Array.from(sh.face.querySelectorAll(".ib-spin"))) s.style.animationDelay = phase;
+      this.#countUp(id, sh.face, countUp);
+    }
+    const body = renderBody(card, t, openLabel);
+    if (sh.bodyHtml !== body) {
+      sh.body.innerHTML = body;
+      sh.bodyHtml = body;
+    }
+    if (body) {
+      if (sh.face.getAttribute("role") !== "button") {
+        sh.face.setAttribute("role", "button");
+        sh.face.setAttribute("tabindex", "0");
+        sh.face.setAttribute("aria-controls", sh.expand.id);
+      }
+    } else if (sh.face.hasAttribute("role")) {
+      for (const a of ["role", "tabindex", "aria-controls", "aria-expanded"]) sh.face.removeAttribute(a);
+      this.#open.delete(id);
+    }
+    this.#applyOpen(sh, this.#open.has(id));
+  }
+  /** Move = translate only, raised while it changes column. Reduced motion: no travel, a fade where it landed. */
+  #flip(sh, dx, dy, raise, m, reduced) {
+    if (reduced) {
+      if (raise) sh.el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: m.fade, easing: "linear" });
+      return;
+    }
+    if (raise) sh.el.classList.add("is-flying");
+    const anim = sh.el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "translate(0, 0)" }], {
+      duration: m.move,
+      easing: m.easeInOut,
+      composite: "add"
+    });
+    sh.flip = anim;
+    anim.onfinish = () => {
+      if (sh.flip !== anim) return;
+      sh.flip = null;
+      sh.el.classList.remove("is-flying");
+    };
+  }
+  /** Exit = opacity only, absolutely placed in its column where it was drawn, so the rest FLIP into the gap. */
+  #exit(sh, box, m) {
+    if (sh.flip) {
+      sh.flip.cancel();
+      sh.flip = null;
+    }
+    const section = sh.el.closest(".ib-col");
+    if (!box || !section || !m) {
+      sh.el.remove();
+      return;
+    }
+    const hr = section.getBoundingClientRect();
+    const width = sh.el.offsetWidth;
+    sh.el.removeAttribute("data-card");
+    sh.el.setAttribute("aria-hidden", "true");
+    sh.el.setAttribute("inert", "");
+    sh.el.classList.add("is-exiting");
+    sh.el.style.left = `${box.x - hr.left}px`;
+    sh.el.style.top = `${box.y - hr.top}px`;
+    sh.el.style.width = `${width}px`;
+    section.append(sh.el);
+    const anim = sh.el.animate([{ opacity: 1 }, { opacity: 0 }], {
+      duration: m.fade,
+      easing: m.easeOut,
+      fill: "forwards"
+    });
+    anim.onfinish = anim.oncancel = () => sh.el.remove();
+  }
+  /**
+   * The polite region says "N need you, M running" — the first sentence at once, then only real changes; a burst
+   * within ANNOUNCE_MS is said once (the last text). One card changing status is named first.
+   */
+  #announce(columns, changes, t) {
+    const live = this.#live;
+    if (!live) return;
+    const c = boardCounts(columns);
+    const counts = t.announce(c.needs, c.running);
+    if (!changes.length && counts === this.#lastCounts) return;
+    this.#lastCounts = counts;
+    const text = changes.length === 1 ? `${t.changed(String(changes[0].title ?? ""), statusWord(changes[0], t))} ${counts}` : counts;
+    this.#announcePending = text;
+    if (!live.textContent && !this.#announceTimer) {
+      live.textContent = text;
+      return;
+    }
+    if (this.#announceTimer || live.textContent === text) return;
+    this.#announceTimer = setTimeout(() => {
+      this.#announceTimer = void 0;
+      if (live.textContent !== this.#announcePending) live.textContent = this.#announcePending;
+    }, ANNOUNCE_MS);
+  }
+  /** Clocks and ages are written in place (never by a re-render), once a second while any is on the board. */
+  #tickIn(root) {
+    const now = Date.now();
+    const t = this.#t;
+    for (const el of Array.from(root.querySelectorAll("[data-clock]"))) {
+      const from = Number(el.dataset.from) || 0;
+      const acc = Number(el.dataset.acc) || 0;
+      const text = fmtDuration(acc + (from ? Math.max(0, now - from) : 0));
+      if (el.textContent !== text) el.textContent = text;
+    }
+    for (const el of Array.from(root.querySelectorAll("[data-at]"))) {
+      const text = t.ago(Number(el.dataset.at) || 0, now);
+      if (el.textContent !== text) el.textContent = text;
+    }
+  }
+  #syncTick() {
+    const need = !!this.content.querySelector("[data-clock], [data-at]");
+    if (need && !this.#tickTimer) this.#tickTimer = setInterval(() => this.#tickIn(this.content), 1e3);
+    else if (!need && this.#tickTimer) {
+      clearInterval(this.#tickTimer);
+      this.#tickTimer = void 0;
+    }
+  }
+  /** Tokens and cost count up (900 ms, ease-out cubic) when they grow on a card on screen; else they are set. */
+  #countUp(id, root, animate) {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+    for (const el of Array.from(root.querySelectorAll("[data-cnt]"))) {
+      const kind = el.dataset.cnt ?? "tok";
+      const key = `${id}\0${kind}`;
+      const to = Number(el.dataset.to) || 0;
+      const shown = this.#shown.get(key);
+      if (shown === void 0 || !(to > shown) || !animate || typeof requestAnimationFrame !== "function") {
+        this.#shown.set(key, to);
+        this.#counting.delete(key);
+        continue;
+      }
+      el.textContent = fmtCount(kind, shown);
+      this.#counting.set(key, { el, kind, from: shown, to, t0: now });
+    }
+    if (this.#counting.size && !this.#raf && typeof requestAnimationFrame === "function")
+      this.#raf = requestAnimationFrame(this.#step);
+  }
+  #step = (now) => {
+    for (const [key, c] of this.#counting) {
+      const p = Math.min(1, Math.max(0, (now - c.t0) / COUNT_MS));
+      const v = p >= 1 ? c.to : c.from + (c.to - c.from) * (1 - (1 - p) ** 3);
+      const text = fmtCount(c.kind, v);
+      if (c.el.textContent !== text) c.el.textContent = text;
+      this.#shown.set(key, v);
+      if (p >= 1) this.#counting.delete(key);
+    }
+    this.#raf = this.#counting.size ? requestAnimationFrame(this.#step) : 0;
+  };
+}
+define("ui-agent-inbox", UiAgentInbox);
+export {
+  ANNOUNCE_MS,
+  BOARD_HOLD_MS,
+  UiAgentInbox,
+  agentDots,
+  artifactKind,
+  boardCounts,
+  columnsByStatus,
+  holdLanes,
+  placeHolds,
+  statusOf,
+  statusTone
+};
+//# sourceMappingURL=agent-inbox.js.map