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

package/dist/tool-call-card.js

@@ -0,0 +1,1046 @@
+import { e as esc, d as define, U as UiElement, f as escAttr } from "./html-elD6Bb_u.js";
+function formatToolMs(ms, live = false) {
+  const v = Math.max(0, Number(ms) || 0);
+  if (!live && v < 1e3) return `${Math.max(1, Math.round(v))}ms`;
+  if (v < 6e4) return `${(Math.floor(v / 100) / 10).toFixed(1)}s`;
+  const s = Math.floor(v / 1e3);
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${String(s % 60).padStart(2, "0")}s`;
+  return `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`;
+}
+function formatToolClock(at, lang = "en") {
+  const v = Number(at);
+  if (at === void 0 || at === null || !Number.isFinite(v) || Number.isNaN(new Date(v).getTime())) return "";
+  try {
+    return new Date(v).toLocaleTimeString(lang === "ko" ? "ko-KR" : "en-GB", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hourCycle: "h23"
+    });
+  } catch {
+    return "";
+  }
+}
+function toCodeText(value) {
+  if (typeof value === "string") {
+    const head = value.trimStart().charAt(0);
+    if (head === "{" || head === "[") {
+      try {
+        return { text: JSON.stringify(JSON.parse(value), null, 2), json: true };
+      } catch {
+      }
+    }
+    return { text: value, json: false };
+  }
+  if (value === void 0) return { text: "", json: false };
+  try {
+    const s = JSON.stringify(value, null, 2);
+    return s === void 0 ? { text: String(value), json: false } : { text: s, json: true };
+  } catch {
+    return { text: String(value), json: false };
+  }
+}
+const JSON_TOKEN = /("(?:\\.|[^"\\])*")(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g;
+function highlightJson(text) {
+  return esc(text).replace(JSON_TOKEN, (m, str, colon) => {
+    if (str) return colon ? `<span class="tc-k">${str}</span>${colon}` : `<span class="tc-s">${str}</span>`;
+    return `<span class="tc-${m.charCodeAt(0) >= 97 ? "l" : "n"}">${m}</span>`;
+  });
+}
+const ICON_BY_NAME = {
+  Read: "file",
+  Write: "file",
+  Edit: "edit",
+  MultiEdit: "edit",
+  NotebookEdit: "edit",
+  Bash: "terminal",
+  BashOutput: "terminal",
+  Grep: "search",
+  Glob: "search",
+  WebSearch: "search",
+  WebFetch: "globe",
+  Agent: "agent",
+  Task: "agent",
+  TodoWrite: "list"
+};
+function toolIcon(name) {
+  const n = String(name ?? "");
+  if (Object.hasOwn(ICON_BY_NAME, n)) return ICON_BY_NAME[n];
+  return n.startsWith("mcp__") ? "plug" : "wrench";
+}
+function lineCount(text) {
+  let n = 1;
+  for (let i = text.indexOf("\n"); i !== -1; i = text.indexOf("\n", i + 1)) n++;
+  return n;
+}
+function groupStats(calls) {
+  let running = false;
+  let failed = 0;
+  let sum = 0;
+  let all = calls.length > 0;
+  for (const c of calls) {
+    if (c.status === "running") running = true;
+    else if (c.status === "error") failed++;
+    const d = Number(c.duration);
+    if (c.duration === void 0 || c.duration === null || !Number.isFinite(d)) all = false;
+    else sum += Math.max(0, d);
+  }
+  return { running, failed, sum: all ? sum : void 0 };
+}
+const G = (d) => `<svg viewBox="0 0 16 16" aria-hidden="true">${d}</svg>`;
+const TOOL_ICONS = {
+  wrench: G(
+    '<path d="M13.4 4.6 11.6 6.4 9.9 6.1 9.6 4.4l1.8-1.8a3.2 3.2 0 0 0-4.3 4L2.9 10.8a1.6 1.6 0 0 0 2.3 2.3L9.4 8.9a3.2 3.2 0 0 0 4-4.3Z"/>'
+  ),
+  search: G('<circle cx="7" cy="7" r="4.25"/><path d="m10.2 10.2 3.3 3.3"/>'),
+  file: G(
+    '<path d="M9 1.9H4.6a1 1 0 0 0-1 1v10.2a1 1 0 0 0 1 1h6.8a1 1 0 0 0 1-1V5.3Z"/><path d="M9 1.9v3.4h3.4M5.9 8.6h4.2M5.9 11h2.8"/>'
+  ),
+  edit: G(
+    '<path d="M10.3 2.9a1.5 1.5 0 0 1 2.1 0l.7.7a1.5 1.5 0 0 1 0 2.1L6.4 12.4l-3.3.8.8-3.3Z"/><path d="m9.2 4 2.8 2.8"/>'
+  ),
+  terminal: G('<rect x="1.9" y="2.9" width="12.2" height="10.2" rx="2"/><path d="m4.6 6.3 2 1.8-2 1.8M8.4 10.1h3"/>'),
+  globe: G(
+    '<circle cx="8" cy="8" r="6.1"/><path d="M1.9 8h12.2M8 1.9c-1.7 1.7-2.5 3.7-2.5 6.1s.8 4.4 2.5 6.1c1.7-1.7 2.5-3.7 2.5-6.1S9.7 3.6 8 1.9Z"/>'
+  ),
+  agent: G(
+    '<rect x="2.9" y="5.1" width="10.2" height="8" rx="2.4"/><path d="M8 2.4v2.7M6.1 8.6v1M9.9 8.6v1M1.4 9.1v1.4M14.6 9.1v1.4"/>'
+  ),
+  list: G('<path d="m2.4 4.1.9.9 1.6-1.9M2.4 8.6l.9.9 1.6-1.9M2.6 12.6h1.9M7.2 4.2h6.4M7.2 8.2h6.4M7.2 12.6h6.4"/>'),
+  plug: G('<path d="M5.9 1.9v2.9M10.1 1.9v2.9M4.1 4.8h7.8v2.3a3.9 3.9 0 0 1-7.8 0ZM8 11v3.1"/>')
+};
+const en = {
+  running: "Running",
+  done: "Finished",
+  failed: "Failed",
+  noResult: "No result",
+  args: "Arguments",
+  result: "Result",
+  waiting: "Waiting for result…",
+  nothing: "No arguments or result.",
+  failedDefault: "The tool call failed.",
+  interrupted: "The run ended before this call returned.",
+  showAll: "Show all",
+  showLess: "Show less",
+  retry: "Retry",
+  reload: "Try again",
+  loading: "Loading…",
+  copy: (part) => `Copy ${part.toLowerCase()}`,
+  copied: "Copied",
+  selected: "Selected — press ⌘C / Ctrl+C to copy",
+  startedAt: (clock) => `Started at ${clock}`,
+  sayRunning: (name) => `${name} running`,
+  sayDone: (name) => `${name} finished`,
+  sayFailed: (name, error) => `${name} failed${error ? `: ${error}` : ""}`,
+  sayInterrupted: (name) => `${name} ended without a result`,
+  used: (n) => `Used ${n} ${n === 1 ? "tool" : "tools"}`,
+  using: "Using tools…",
+  nFailed: (n) => `${n} failed`,
+  groupSay: (label, failed) => `${label}${failed ? `, ${failed} failed` : ""}`
+};
+const ko = {
+  running: "실행 중",
+  done: "완료",
+  failed: "실패",
+  noResult: "결과 없음",
+  args: "입력",
+  result: "결과",
+  waiting: "결과 기다리는 중…",
+  nothing: "입력과 결과 없음",
+  failedDefault: "툴 호출이 실패했어요",
+  interrupted: "이 호출이 끝나기 전에 실행이 멈췄어요",
+  showAll: "모두 보기",
+  showLess: "접기",
+  retry: "다시 시도",
+  reload: "다시 시도",
+  loading: "불러오는 중…",
+  copy: (part) => `${part} 복사`,
+  copied: "복사됨",
+  selected: "선택했습니다 — ⌘C / Ctrl+C로 복사",
+  startedAt: (clock) => `${clock} 시작`,
+  sayRunning: (name) => `${name} 실행 중`,
+  sayDone: (name) => `${name} 완료`,
+  sayFailed: (name, error) => `${name} 실패${error ? `: ${error}` : ""}`,
+  sayInterrupted: (name) => `${name} 결과 없이 끝남`,
+  used: (n) => `툴 ${n}개 사용`,
+  using: "툴 사용 중…",
+  nFailed: (n) => `${n}개 실패`,
+  groupSay: (label, failed) => `${label}${failed ? `, ${failed}개 실패` : ""}`
+};
+const STRINGS = { en, ko };
+function toolCallStrings(lang) {
+  return lang === "ko" ? STRINGS.ko : STRINGS.en;
+}
+const styles = `
+:host { --tc-ink: var(--text); --tc-text: var(--text-secondary); --tc-muted: var(--text-tertiary);
+  --tc-bg: var(--surface); --tc-line: var(--border); --tc-tile: var(--surface-raised);
+  --tc-hover: color-mix(in srgb, var(--text) 3.5%, var(--surface));
+  --tc-code: color-mix(in srgb, var(--surface-raised) 60%, var(--surface));
+  --tc-ring: var(--surface);
+  --tc-red: var(--st-fail-text); --tc-red-bg: color-mix(in srgb, var(--st-fail) 7%, var(--surface));
+  --tc-red-line: color-mix(in srgb, var(--st-fail) 24%, transparent);
+  --tc-key: var(--text); --tc-str: color-mix(in srgb, var(--green) 62%, var(--accent)); --tc-num: var(--orange);
+  --tc-lit: var(--purple); --tc-shine: var(--text);
+  --tc-lift: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
+  --tc-ease: var(--ease-out);
+  min-width: 0; font-size: 13.5px; line-height: 1.4; letter-spacing: -0.006em; }
+[hidden] { display: none !important; }
+button { appearance: none; margin: 0; border: 0; background: none; text-align: left; letter-spacing: inherit; }
+
+/* Card */
+.tc { position: relative; border: 1px solid var(--tc-line); border-radius: 12px; background: var(--tc-bg); box-shadow: var(--tc-lift); }
+.tc-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px 8px 9px;
+  border-radius: 11px; color: var(--tc-text); transition: background-color 160ms ease; }
+.tc[data-open] > .tc-head { border-radius: 11px 11px 0 0; }
+.tc-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px;
+  background: var(--tc-tile); box-shadow: inset 0 0 0 1px var(--tc-line); color: var(--tc-ink); }
+.tc-icon > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
+.tc-main { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
+.tc-name { flex: 0 1 auto; max-width: 55%; overflow: hidden; color: var(--tc-ink); font-family: var(--mono); font-size: 12.5px;
+  font-weight: 500; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
+.tc-summary { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--tc-text); text-overflow: ellipsis; white-space: nowrap; }
+.tc-status { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--tc-muted); font-size: 12.5px;
+  font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tc-status.is-in { animation: tc-in 360ms var(--tc-ease) both; }
+.tc[data-status="error"] .tc-status { color: var(--tc-red); }
+.tc-status > svg { width: 14px; height: 14px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
+.tc-spin { animation: tc-spin 800ms linear infinite; }
+.tc-spin circle { stroke: currentColor; stroke-width: 1.6; opacity: 0.25; }
+.tc-spin path { stroke: var(--st-run); stroke-width: 1.6; }
+.tc-ok { stroke: var(--st-done); stroke-width: 1.8; }
+.is-in .tc-ok path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tc-draw 360ms var(--tc-ease) 80ms forwards; }
+.tc-err { stroke: var(--st-fail); stroke-width: 1.5; }
+.tc-stop { stroke: currentColor; stroke-width: 1.5; }
+.tc-chev { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--tc-muted); stroke-width: 1.5; stroke-linecap: round;
+  stroke-linejoin: round; transition: transform 360ms var(--tc-ease); }
+.tc[data-open] > .tc-head .tc-chev, .tcg[data-open] > .tcg-head .tc-chev { transform: rotate(180deg); }
+@media (hover: hover) {
+  .tc-head:hover { background: var(--tc-hover); }
+  .tc-head:hover .tc-chev { stroke: var(--tc-ink); }
+  .tcg-head:hover { background: var(--tc-hover); color: var(--tc-ink); }
+  .tc-copy:hover { background: var(--tc-hover); color: var(--tc-ink); }
+  .tc-more:hover { color: var(--tc-ink); }
+  .tc-btn:hover { background: var(--tc-hover); }
+}
+
+/* Body: 0fr → 1fr, so the height animates without measuring */
+.tc-body { display: grid; grid-template-rows: 0fr; opacity: 0;
+  transition: grid-template-rows 380ms var(--tc-ease), opacity 240ms ease; }
+.tc-body[data-open] { grid-template-rows: 1fr; opacity: 1; }
+.tc-clip { min-height: 0; overflow: hidden; }
+.tc-sections { display: grid; gap: 12px; padding: 12px; border-top: 1px solid var(--tc-line); }
+.tc-top { display: flex; justify-content: flex-end; margin: -2px 0 -6px; }
+.tc-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.tc-line > p { min-width: 0; }
+.tc-head-end { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
+.tc-at { flex: none; color: var(--tc-muted); font-size: 11.5px; line-height: 16px; font-variant-numeric: tabular-nums; }
+.tc-section { display: grid; gap: 6px; min-width: 0; }
+.tc-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
+.tc-label { color: var(--tc-muted); font-size: 12px; font-weight: 500; }
+.tc-pending, .tc-note { margin: 0; color: var(--tc-muted); font-size: 12.5px; }
+.tc-note { font-size: 12px; }
+
+.tc-copy { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0;
+  border-radius: 6px; color: var(--tc-muted); transition: background-color 160ms ease, color 160ms ease; }
+.tc-copy svg { position: absolute; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4;
+  stroke-linecap: round; stroke-linejoin: round;
+  transition: opacity 200ms ease, transform 320ms var(--tc-ease), filter 200ms ease; }
+.tc-copy-done { opacity: 0; transform: scale(0.6); filter: blur(2px); stroke-width: 1.7; }
+.tc-copy[data-copied] { color: var(--st-done); }
+.tc-copy[data-copied] .tc-copy-icon { opacity: 0; transform: scale(0.6); filter: blur(2px); }
+.tc-copy[data-copied] .tc-copy-done { opacity: 1; transform: none; filter: none; }
+
+/* Code wraps instead of scrolling sideways; a capped block fades out at the bottom */
+.tc-code { position: relative; margin: 0; padding: 10px 12px; overflow: hidden; border-radius: 8px; background: var(--tc-code);
+  box-shadow: inset 0 0 0 1px var(--tc-line); color: var(--tc-text); font-family: var(--mono); font-size: 12px;
+  line-height: 1.6; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
+  transition: max-height 420ms var(--tc-ease); }
+.tc-code[data-json] { color: var(--tc-muted); }
+.tc-code code { display: block; font: inherit; }
+.tc-code::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 56px; border-radius: 0 0 7px 7px;
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--tc-code) 0%, transparent), var(--tc-code));
+  opacity: 0; transition: opacity 240ms ease; pointer-events: none; }
+.tc-code[data-capped]::after { opacity: 1; }
+.tc-k { color: var(--tc-key); }
+.tc-s { color: var(--tc-str); }
+.tc-n { color: var(--tc-num); }
+.tc-l { color: var(--tc-lit); }
+.tc-more { position: relative; justify-self: start; padding: 2px 4px; margin-left: -4px; border-radius: 5px; color: var(--tc-text);
+  font-size: 12.5px; font-weight: 500; transition: color 160ms ease; }
+
+/* Error: the message and an optional Retry; a failed host fetch: the message and Try again */
+.tc-error { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px 9px 11px; border-radius: 8px;
+  background: var(--tc-red-bg); box-shadow: inset 0 0 0 1px var(--tc-red-line); }
+.tc-error > svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: none; stroke-linecap: round; }
+.tc-error-text { flex: 1; min-width: 0; margin: 0; color: var(--tc-red); font-size: 13px; line-height: 1.45;
+  white-space: pre-wrap; overflow-wrap: anywhere; }
+.tc-reload-row { display: flex; align-items: center; gap: 8px; }
+.tc-reload-row > .tc-pending { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.tc-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none; height: 26px; margin: -3px 0;
+  padding: 0 10px 0 8px; border-radius: 7px; background: var(--tc-bg); box-shadow: inset 0 0 0 1px var(--tc-line), var(--tc-lift);
+  color: var(--tc-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background-color 160ms ease; }
+.tc-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
+  stroke-linejoin: round; transition: transform 200ms var(--tc-ease); }
+.tc-btn:active svg { transform: rotate(-60deg); }
+
+/* Group: one quiet line with the tools' icons stacked, the cards below */
+.tcg { display: grid; }
+.tcg-head { display: flex; align-items: center; gap: 9px; justify-self: start; max-width: 100%; min-height: 36px;
+  padding: 4px 10px 4px 5px; border-radius: 10px; color: var(--tc-text);
+  transition: background-color 160ms ease, color 160ms ease; }
+.tcg-stack { display: flex; flex: none; }
+.tcg-stack .tc-icon { width: 24px; height: 24px; box-shadow: inset 0 0 0 1px var(--tc-line), 0 0 0 2px var(--tc-ring); }
+.tcg-stack .tc-icon.is-in { animation: tc-pop 420ms var(--tc-ease) both; }
+.tcg-stack .tc-icon + .tc-icon { margin-left: -5px; }
+.tcg-stack .tc-icon > svg { width: 13px; height: 13px; }
+.tcg-title { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; }
+.tcg-title.is-in { animation: tc-in 360ms var(--tc-ease) both; }
+.tcg-label { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; font-weight: 500; }
+.tcg-failed { flex: none; color: var(--tc-red); }
+.tcg-time { flex: none; color: var(--tc-muted); font-variant-numeric: tabular-nums; }
+.tcg-list { display: grid; gap: 8px; padding-top: 8px; }
+
+/* A band of the text colour sweeping over “Using tools…” */
+.tc-shine::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; white-space: nowrap;
+  color: transparent; background: linear-gradient(90deg, transparent 38%, var(--tc-shine) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;
+  -webkit-background-clip: text; background-clip: text; animation: tc-sweep 1.8s linear infinite; pointer-events: none; }
+
+@keyframes tc-in { from { opacity: 0; transform: translateY(3px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
+@keyframes tc-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
+@keyframes tc-spin { to { transform: rotate(360deg); } }
+@keyframes tc-draw { to { stroke-dashoffset: 0; } }
+@keyframes tc-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
+
+/* Touch: every control gets a 44px target without changing the layout */
+@media (pointer: coarse) {
+  .tcg-head { min-height: 44px; }
+  .tc-copy::before, .tc-more::before, .tc-btn::before { content: ""; position: absolute; inset: -10px; }
+  .tc-more::before { inset: -12px -8px; }
+  .tc-btn::before { inset: -9px -4px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .tc-shine::after { display: none; }
+  .tc-spin { animation: none; }
+  .is-in .tc-ok path { animation: none; stroke-dashoffset: 0; }
+}
+`;
+const COPIED_MS = 1400;
+const TICK_MS$1 = 100;
+const DEFAULT_CAP = 220;
+const LINE_PX = 19.2;
+const CODE_PAD = 20;
+const SPIN_SVG = '<svg class="tc-spin" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="5.8"/><path d="M8 2.2a5.8 5.8 0 0 1 5.8 5.8"/></svg>';
+const OK_SVG = '<svg class="tc-ok" viewBox="0 0 16 16" aria-hidden="true"><path d="m3.6 8.5 3 2.9 5.8-6.4" pathLength="1"/></svg>';
+const ERR_SVG = '<svg class="tc-err" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.1"/><path d="M8 4.9v3.6M8 11v.1"/></svg>';
+const STOP_SVG = '<svg class="tc-stop" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.1"/><path d="M5.4 8h5.2"/></svg>';
+const CHEV_SVG = '<svg class="tc-chev" viewBox="0 0 16 16" aria-hidden="true"><path d="m4.4 6.2 3.6 3.6 3.6-3.6"/></svg>';
+const COPY_SVG = '<svg class="tc-copy-icon" viewBox="0 0 16 16" aria-hidden="true"><rect x="5.4" y="5.4" width="8.1" height="8.1" rx="1.9"/><path d="M10.6 5.4V4.3a1.6 1.6 0 0 0-1.6-1.6H4.3a1.6 1.6 0 0 0-1.6 1.6V9a1.6 1.6 0 0 0 1.6 1.6h1.1"/></svg>';
+const DONE_SVG = '<svg class="tc-copy-done" viewBox="0 0 16 16" aria-hidden="true"><path d="m3.6 8.5 3 2.9 5.8-6.4"/></svg>';
+const RETRY_SVG = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.8 8a5.2 5.2 0 1 0 1.5-3.7"/><path d="M2.6 2.4v2.9h2.9"/></svg>';
+const STATUSES = /* @__PURE__ */ new Set(["running", "success", "error", "interrupted"]);
+function normStatus(s) {
+  return STATUSES.has(s) ? s : "interrupted";
+}
+function callIconSvg(d) {
+  const key = d.icon && Object.hasOwn(TOOL_ICONS, d.icon) ? d.icon : toolIcon(d.name);
+  return TOOL_ICONS[key];
+}
+const finite$1 = (v) => {
+  if (v === void 0 || v === null || v === "") return void 0;
+  const n = Number(v);
+  return Number.isFinite(n) ? n : void 0;
+};
+const HEAD_CHARS_PER_LINE = 240;
+function cutAfterLines(text, n) {
+  let i = -1;
+  for (let k = 0; k < n; k++) {
+    i = text.indexOf("\n", i + 1);
+    if (i === -1) return text.length;
+  }
+  return i;
+}
+class UiToolCallCard extends UiElement {
+  static styles = [styles];
+  static get observedAttributes() {
+    return ["lang"];
+  }
+  #open = false;
+  #auto = false;
+  #shownOpen = false;
+  #rendered = false;
+  #status;
+  #statusIn = false;
+  #runStart = 0;
+  #measured;
+  #tick = 0;
+  #full = /* @__PURE__ */ new Set();
+  #copied = /* @__PURE__ */ new Set();
+  #copyTimers = /* @__PURE__ */ new Map();
+  #code = /* @__PURE__ */ new Map();
+  #ro;
+  #saidStatus;
+  #live;
+  constructor() {
+    super();
+    this.#live = document.createElement("span");
+    this.#live.className = "sr-only";
+    this.#live.setAttribute("role", "status");
+    this.#live.setAttribute("aria-live", "polite");
+    this.root.append(this.#live);
+    this.root.addEventListener("click", (e) => this.#click(e));
+  }
+  attributeChangedCallback() {
+    this.requestRender();
+  }
+  disconnectedCallback() {
+    this.#stopTick();
+    this.#ro?.disconnect();
+  }
+  /** Focus the header button (the card's one tab stop). */
+  /** Retry, Try again, a Show all that went away, an auto-closed body: focus stays on the card's header. */
+  focusFallback() {
+    return this.$(".tc-head");
+  }
+  focus(options) {
+    if (!this.$(".tc-head") && this.data && this.isConnected) this.renderNow();
+    const head = this.$(".tc-head");
+    if (head) head.focus(options);
+    else super.focus(options);
+  }
+  /** Whether the body is open now (controlled `data.open`, else the element's own state). */
+  get isOpen() {
+    return this.data ? this.#isOpen(this.data) : false;
+  }
+  get #lang() {
+    return this.getAttribute("lang") === "ko" ? "ko" : "en";
+  }
+  get #t() {
+    return toolCallStrings(this.#lang);
+  }
+  #isOpen(d) {
+    return d.open ?? this.#open;
+  }
+  #startOf(d) {
+    return finite$1(d.startedAt) ?? this.#runStart;
+  }
+  #liveMs(d) {
+    return Math.max(0, Date.now() - this.#startOf(d));
+  }
+  /** Status transitions: first-render defaults, measured time, open-on-error. */
+  #sync(d, st) {
+    const prev = this.#status;
+    this.#statusIn = false;
+    if (prev === void 0) {
+      this.#open = !!d.defaultOpen;
+      if (st === "running") this.#runStart = Date.now();
+    } else if (st !== prev) {
+      this.#statusIn = true;
+      if (prev === "running") {
+        this.#measured = this.#liveMs(d);
+        this.#stopTick();
+      }
+      if (st === "running") {
+        this.#runStart = Date.now();
+        this.#measured = void 0;
+      }
+      if (d.open === void 0 && d.openOnError !== false) {
+        if (st === "error" && !this.#open) {
+          this.#open = true;
+          this.#auto = true;
+        } else if (prev === "error" && this.#auto) {
+          this.#open = false;
+          this.#auto = false;
+        }
+      }
+    }
+    this.#status = st;
+  }
+  render() {
+    const d = this.data;
+    if (!d) return "";
+    const st = normStatus(d.status);
+    this.#sync(d, st);
+    const t = this.#t;
+    const open = this.#isOpen(d);
+    if (!this.#rendered) {
+      this.#rendered = true;
+      this.#shownOpen = open;
+    }
+    const shown = this.#shownOpen;
+    const summary = d.summary === void 0 || d.summary === null ? "" : String(d.summary);
+    const head = `<button type="button" class="tc-head" data-act="toggle" data-key="head" aria-expanded="${shown}" aria-controls="tc-body"${d.focusable === false ? ' tabindex="-1"' : ""}><span class="tc-icon" aria-hidden="true">${callIconSvg(d)}</span><span class="tc-main"><code class="tc-name">${esc(
+      d.name
+    )}</code>${summary ? `<span class="tc-summary" title="${escAttr(summary)}">${esc(summary)}</span>` : ""}</span>${this.#statusHtml(
+      d,
+      st,
+      t
+    )}${CHEV_SVG}</button>`;
+    const sections = open || shown ? `<div class="tc-sections">${this.#bodyHtml(d, st, t)}</div>` : "";
+    return `<div class="tc" data-status="${st}"${shown ? " data-open" : ""}>${head}<div class="tc-body" id="tc-body"${shown ? " data-open" : " inert"}><div class="tc-clip">${sections}</div></div></div>`;
+  }
+  #statusHtml(d, st, t) {
+    const cls = `tc-status${this.#statusIn ? " is-in" : ""}`;
+    if (st === "running")
+      return `<span class="${cls}">${SPIN_SVG}<span class="sr-only">${esc(t.running)}, </span><span class="tc-time">${esc(
+        formatToolMs(this.#liveMs(d), true)
+      )}</span></span>`;
+    if (st === "success") {
+      const ms = finite$1(d.duration) ?? this.#measured;
+      return `<span class="${cls}">${OK_SVG}<span class="sr-only">${esc(t.done)}${ms !== void 0 ? ", " : ""}</span>${ms !== void 0 ? `<span class="tc-time">${esc(formatToolMs(ms))}</span>` : ""}</span>`;
+    }
+    if (st === "error") return `<span class="${cls}">${ERR_SVG}<span class="tc-time">${esc(t.failed)}</span></span>`;
+    const dur = finite$1(d.duration);
+    return `<span class="${cls}">${STOP_SVG}<span class="tc-time">${esc(t.noResult)}${dur !== void 0 ? ` · ${esc(formatToolMs(dur))}` : ""}</span></span>`;
+  }
+  #bodyHtml(d, st, t) {
+    const items = [];
+    const at = formatToolClock(d.at, this.#lang);
+    let clock = at ? `<time class="tc-at" datetime="${escAttr(new Date(Number(d.at)).toISOString())}" title="${escAttr(
+      t.startedAt(at)
+    )}">${esc(at)}</time>` : "";
+    const take = () => {
+      if (items.length) return "";
+      const c = clock;
+      clock = "";
+      return c;
+    };
+    const line = (cls, text) => {
+      const c = take();
+      const p = `<p class="${cls}">${esc(text)}</p>`;
+      return c ? `<div class="tc-line">${p}${c}</div>` : p;
+    };
+    if (st === "interrupted") items.push(line("tc-pending", t.interrupted));
+    if (st === "error") {
+      const msg = d.error === void 0 || d.error === null || d.error === "" ? t.failedDefault : String(d.error);
+      items.push(
+        `<div class="tc-error">${ERR_SVG}<p class="tc-error-text">${esc(msg)}</p>${d.canRetry ? `<button type="button" class="tc-btn" data-act="retry" data-key="retry">${RETRY_SVG}${esc(t.retry)}</button>` : ""}</div>`
+      );
+    }
+    const hasArgs = d.args !== void 0;
+    const hasResult = d.result !== void 0;
+    const cap = this.#cap(d);
+    if (hasArgs) items.push(this.#section("args", t.args, d.args, cap, t, take()));
+    else this.#code.delete("args");
+    if (hasResult) items.push(this.#section("result", t.result, d.result, cap, t, take()));
+    else {
+      this.#code.delete("result");
+      if (st === "running" && !d.loading && !d.detailError)
+        items.push(
+          `<div class="tc-section"><div class="tc-section-head"><span class="tc-label">${esc(
+            t.result
+          )}</span>${take()}</div><p class="tc-pending">${esc(t.waiting)}</p></div>`
+        );
+    }
+    if (d.loading) items.push(line("tc-pending tc-loading", t.loading));
+    else if (d.detailError)
+      items.push(
+        `<div class="tc-reload-row"><p class="tc-pending">${esc(
+          d.detailError
+        )}</p><button type="button" class="tc-btn" data-act="reload" data-key="reload">${RETRY_SVG}${esc(t.reload)}</button></div>`
+      );
+    else if (st === "success" && !hasArgs && !hasResult) items.push(line("tc-pending", t.nothing));
+    if (d.note !== void 0 && d.note !== null && d.note !== "") items.push(line("tc-note", String(d.note)));
+    if (clock) items.unshift(`<div class="tc-top">${clock}</div>`);
+    return items.join("");
+  }
+  #section(part, label, value, cap, t, clock) {
+    const c = this.#codeOf(part, value);
+    const full = this.#full.has(part);
+    const code = this.#codeHtml(c, full, cap);
+    const copied = this.#copied.has(part);
+    const copy = copied ? t.copied : t.copy(label);
+    return `<div class="tc-section" data-part="${part}"><div class="tc-section-head"><span class="tc-label">${esc(
+      label
+    )}</span><span class="tc-head-end">${clock}<button type="button" class="tc-copy" data-act="copy" data-part="${part}" data-key="copy-${part}" aria-label="${escAttr(
+      copy
+    )}" title="${escAttr(copy)}"${copied ? " data-copied" : ""}>${COPY_SVG}${DONE_SVG}</button></span></div><pre class="tc-code" data-part="${part}"${c.json ? " data-json" : ""}><code${code.partial ? " data-partial" : ""}>${code.html}</code></pre><button type="button" class="tc-more" data-act="more" data-part="${part}" data-key="more-${part}" aria-expanded="${full}" hidden>${esc(
+      full ? t.showLess : t.showAll
+    )}</button></div>`;
+  }
+  /** Text + highlighted HTML per block, kept across renders while the value is the same. */
+  #codeOf(part, value) {
+    const hit = this.#code.get(part);
+    if (hit && hit.value === value) return hit;
+    const { text, json } = toCodeText(value);
+    if (hit && hit.text === text) {
+      hit.value = value;
+      return hit;
+    }
+    if (hit) this.#full.delete(part);
+    const c = { value, text, json, lines: lineCount(text) };
+    this.#code.set(part, c);
+    return c;
+  }
+  /**
+   * A block far taller than the cap renders only its first lines (enough to fill the cap, so it is capped all the
+   * same); Show all, a fallback selection, or a block that fits renders the whole. A 256 KiB result costs its first
+   * screen until someone asks for the rest.
+   */
+  #codeHtml(c, full, cap) {
+    const keep = Math.ceil((cap + 24) / LINE_PX) + 20;
+    const maxChars = keep * HEAD_CHARS_PER_LINE;
+    if (!full && (c.lines > keep || c.text.length > maxChars)) {
+      if (c.head?.keep !== keep) {
+        const head = c.text.slice(0, Math.min(cutAfterLines(c.text, keep), maxChars));
+        c.head = { keep, html: c.json ? highlightJson(head) : esc(head) };
+      }
+      return { html: c.head.html, partial: true };
+    }
+    c.html ??= c.json ? highlightJson(c.text) : esc(c.text);
+    return { html: c.html, partial: false };
+  }
+  /** Puts the whole block into a partially rendered code element (in place). */
+  #fillCode(part) {
+    const code = this.$(`pre.tc-code[data-part="${part}"] > code[data-partial]`);
+    const c = this.#code.get(part);
+    if (!code || !c) return;
+    code.innerHTML = this.#codeHtml(c, true, 0).html;
+    code.removeAttribute("data-partial");
+  }
+  updated() {
+    const d = this.data;
+    if (d) {
+      const open = this.#isOpen(d);
+      if (open !== this.#shownOpen) {
+        this.$(".tc-body")?.getBoundingClientRect();
+        this.#shownOpen = open;
+        this.#applyOpen(open);
+      }
+    }
+    this.#measure();
+    this.#observe();
+    this.#syncTick();
+    this.#announce();
+  }
+  #applyOpen(open) {
+    this.$(".tc")?.toggleAttribute("data-open", open);
+    this.$(".tc-head")?.setAttribute("aria-expanded", String(open));
+    const body = this.$(".tc-body");
+    body?.toggleAttribute("data-open", open);
+    body?.toggleAttribute("inert", !open);
+  }
+  #click(e) {
+    const btn = e.target?.closest?.("[data-act]");
+    const d = this.data;
+    if (!btn || !d) return;
+    const act = btn.getAttribute("data-act");
+    const part = btn.getAttribute("data-part") === "result" ? "result" : "args";
+    if (act === "toggle") this.#toggle(d);
+    else if (act === "copy") this.#copy(part);
+    else if (act === "more") this.#more(part);
+    else if (act === "retry") this.emit("ui-retry", this.#withId({}));
+    else if (act === "reload") this.emit("ui-reload", this.#withId({}));
+  }
+  #withId(detail) {
+    const id = this.data?.id;
+    return id === void 0 || id === null ? detail : { ...detail, id: String(id) };
+  }
+  #toggle(d) {
+    const next = !this.#isOpen(d);
+    if (!this.emit("ui-toggle", this.#withId({ open: next }))) return;
+    this.#auto = false;
+    if (d.open !== void 0) return;
+    this.#open = next;
+    this.renderNow();
+  }
+  /** Show all / Show less changes the block in place, so its height animates and a re-render keeps it. */
+  #more(part) {
+    if (this.#full.has(part)) this.#full.delete(part);
+    else {
+      this.#full.add(part);
+      this.#fillCode(part);
+    }
+    this.#measure();
+  }
+  #cap(d) {
+    return Math.max(40, finite$1(d.maxCodeHeight) ?? DEFAULT_CAP);
+  }
+  /** Caps blocks taller than maxCodeHeight (+24px slack) with a fade; Show all opens to the natural height. */
+  #measure() {
+    const d = this.data;
+    if (!d) return;
+    const t = this.#t;
+    const cap = this.#cap(d);
+    for (const pre of this.$$("pre.tc-code")) {
+      const part = pre.dataset.part === "result" ? "result" : "args";
+      const c = this.#code.get(part);
+      let h = pre.scrollHeight;
+      if (!h && c) h = c.lines * LINE_PX + CODE_PAD;
+      const capped = h > cap + 24;
+      const full = capped && this.#full.has(part);
+      pre.toggleAttribute("data-capped", capped && !full);
+      pre.style.maxHeight = capped ? `${full ? Math.ceil(h) : cap}px` : "";
+      const more = pre.parentElement?.querySelector(".tc-more");
+      if (!more) continue;
+      more.hidden = !capped;
+      more.setAttribute("aria-expanded", String(full));
+      const label = full ? t.showLess : t.showAll;
+      if (more.textContent !== label) more.textContent = label;
+    }
+  }
+  /** Re-measure when a block's wrapped height changes (width change, panel shown after display:none). */
+  #observe() {
+    if (typeof ResizeObserver === "undefined") return;
+    this.#ro ??= new ResizeObserver(() => this.#measure());
+    this.#ro.disconnect();
+    for (const code of this.$$("pre.tc-code > code")) this.#ro.observe(code);
+  }
+  #copy(part) {
+    const c = this.#code.get(part);
+    if (!c) return;
+    if (!this.emit("ui-copy", this.#withId({ part, text: c.text }))) return;
+    const done = () => this.#flashCopied(part);
+    const fallback = () => this.#select(part);
+    try {
+      const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+      if (clip && typeof clip.writeText === "function") clip.writeText(c.text).then(done, fallback);
+      else fallback();
+    } catch {
+      fallback();
+    }
+  }
+  /** The copy icon morphs into a check for 1.4 s — in place, and a re-render in between keeps it. */
+  #flashCopied(part) {
+    this.#copied.add(part);
+    this.#paintCopy(part);
+    this.#speak(this.#t.copied);
+    clearTimeout(this.#copyTimers.get(part));
+    this.#copyTimers.set(
+      part,
+      window.setTimeout(() => {
+        this.#copied.delete(part);
+        this.#copyTimers.delete(part);
+        this.#paintCopy(part);
+      }, COPIED_MS)
+    );
+  }
+  #paintCopy(part) {
+    const b = this.$(`.tc-copy[data-part="${part}"]`);
+    if (!b) return;
+    const t = this.#t;
+    const on = this.#copied.has(part);
+    const label = on ? t.copied : t.copy(part === "args" ? t.args : t.result);
+    b.toggleAttribute("data-copied", on);
+    b.setAttribute("aria-label", label);
+    b.setAttribute("title", label);
+  }
+  /** Without clipboard access (plain http, a denied permission) the block's text is selected for ⌘C / Ctrl+C. */
+  #select(part) {
+    this.#fillCode(part);
+    const code = this.$(`pre.tc-code[data-part="${part}"] > code`);
+    try {
+      const sel = typeof getSelection === "function" ? getSelection() : null;
+      if (code && sel) {
+        const range = document.createRange();
+        range.selectNodeContents(code);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    } catch {
+    }
+    this.#speak(this.#t.selected);
+  }
+  #speak(text) {
+    if (this.#live.textContent !== text) this.#live.textContent = text;
+  }
+  /** Status changes are announced once; a card that first appears finished or failed stays quiet. */
+  #announce() {
+    const d = this.data;
+    if (!d) return;
+    const st = normStatus(d.status);
+    if (st === this.#saidStatus) return;
+    const first = this.#saidStatus === void 0;
+    this.#saidStatus = st;
+    if (first && st !== "running") return;
+    const t = this.#t;
+    const name = String(d.name ?? "");
+    this.#speak(
+      st === "running" ? t.sayRunning(name) : st === "success" ? t.sayDone(name) : st === "error" ? t.sayFailed(name, d.error ? String(d.error) : "") : t.sayInterrupted(name)
+    );
+  }
+  /** The live timer ticks a text node in place every 100 ms — only while running and connected. */
+  #syncTick() {
+    const run = !!this.data && normStatus(this.data.status) === "running" && this.isConnected;
+    if (run && !this.#tick) this.#tick = window.setInterval(() => this.#paintTime(), TICK_MS$1);
+    else if (!run) this.#stopTick();
+  }
+  #stopTick() {
+    if (!this.#tick) return;
+    clearInterval(this.#tick);
+    this.#tick = 0;
+  }
+  #paintTime() {
+    const d = this.data;
+    if (!d || normStatus(d.status) !== "running" || !this.isConnected) {
+      this.#stopTick();
+      return;
+    }
+    const node = this.$(".tc-status .tc-time")?.firstChild;
+    const text = formatToolMs(this.#liveMs(d), true);
+    if (node && node.nodeType === Node.TEXT_NODE && node.data !== text) node.data = text;
+  }
+}
+define("ui-tool-call-card", UiToolCallCard);
+const TICK_MS = 100;
+const STACK = 3;
+function callKeys(calls) {
+  const seen = /* @__PURE__ */ new Set();
+  return calls.map((c, i) => {
+    const id = c && c.id !== void 0 && c.id !== null && c.id !== "" ? `id:${c.id}` : `i:${i}`;
+    const key = seen.has(id) ? `${id}#${i}` : id;
+    seen.add(key);
+    return key;
+  });
+}
+function sameCall(a, b) {
+  if (a === b) return true;
+  const ka = Object.keys(a);
+  if (ka.length !== Object.keys(b).length) return false;
+  for (const k of ka) if (!Object.is(a[k], b[k])) return false;
+  return true;
+}
+const finite = (v) => {
+  if (v === void 0 || v === null || v === "") return void 0;
+  const n = Number(v);
+  return Number.isFinite(n) ? n : void 0;
+};
+class UiToolCallGroup extends UiElement {
+  static styles = [styles];
+  static get observedAttributes() {
+    return ["lang", "theme"];
+  }
+  #open = false;
+  #shownOpen = false;
+  #rendered = false;
+  #running;
+  #titleIn = false;
+  #acc = 0;
+  #since = null;
+  #lastEnd = 0;
+  #tick = 0;
+  #keys = [];
+  #stack = /* @__PURE__ */ new Set();
+  #cards = /* @__PURE__ */ new Map();
+  #saidRunning;
+  #body;
+  #list;
+  #live;
+  constructor() {
+    super();
+    this.#body = document.createElement("div");
+    this.#body.className = "tc-body tcg-body";
+    this.#body.id = "tcg-body";
+    this.#body.hidden = true;
+    this.#body.setAttribute("inert", "");
+    const clip = document.createElement("div");
+    clip.className = "tc-clip";
+    this.#list = document.createElement("div");
+    this.#list.className = "tcg-list";
+    this.#list.setAttribute("role", "list");
+    clip.append(this.#list);
+    this.#body.append(clip);
+    this.#live = document.createElement("span");
+    this.#live.className = "sr-only";
+    this.#live.setAttribute("role", "status");
+    this.#live.setAttribute("aria-live", "polite");
+    this.root.append(this.#body, this.#live);
+    this.root.addEventListener("click", (e) => {
+      if (e.target?.closest?.(".tcg-head")) this.#toggle();
+    });
+  }
+  attributeChangedCallback() {
+    this.requestRender();
+  }
+  disconnectedCallback() {
+    this.#stopTick();
+  }
+  /** Focus the group's header button. */
+  focus(options) {
+    if (!this.$(".tcg-head") && this.data && this.isConnected) this.renderNow();
+    const head = this.$(".tcg-head");
+    if (head) head.focus(options);
+    else super.focus(options);
+  }
+  /** Whether the list is open now (controlled `data.open`, else the element's own state). */
+  get isOpen() {
+    return this.data ? this.#isOpen(this.data) : false;
+  }
+  /** The card elements, in call order. */
+  get cards() {
+    return Array.from(this.#cards.values(), (e) => e.el);
+  }
+  get #t() {
+    return toolCallStrings(this.getAttribute("lang"));
+  }
+  #isOpen(d) {
+    return d.open ?? this.#open;
+  }
+  /** Time with tools running, added up over running stretches (e.g. a pause before a retry). */
+  #syncRun(running, calls) {
+    const prev = this.#running;
+    this.#titleIn = prev !== void 0 && prev !== running;
+    const now = Date.now();
+    if (running && this.#since === null) {
+      const starts = calls.filter((c) => c.status === "running").map((c) => finite(c.startedAt)).filter((v) => v !== void 0);
+      const first = starts.length ? Math.min(...starts) : now;
+      this.#since = Math.min(now, Math.max(this.#lastEnd, first));
+    } else if (!running && this.#since !== null) {
+      this.#lastEnd = now;
+      this.#acc += now - this.#since;
+      this.#since = null;
+    }
+    if (prev !== running && !running) this.#stopTick();
+    this.#running = running;
+  }
+  #liveMs() {
+    return this.#acc + (this.#since === null ? 0 : Math.max(0, Date.now() - this.#since));
+  }
+  render() {
+    const d = this.data;
+    if (!d) return "";
+    const calls = Array.isArray(d.calls) ? d.calls : [];
+    const t = this.#t;
+    const { running, failed, sum } = groupStats(calls);
+    this.#syncRun(running, calls);
+    if (!this.#rendered) this.#open = !!d.defaultOpen;
+    const open = this.#isOpen(d);
+    const first = !this.#rendered;
+    if (first) {
+      this.#rendered = true;
+      this.#shownOpen = open;
+    }
+    const shown = this.#shownOpen;
+    const keys = callKeys(calls);
+    this.#keys = keys;
+    const from = Math.max(0, calls.length - STACK);
+    const stackKeys = /* @__PURE__ */ new Set();
+    let stack = "";
+    for (let i = from; i < calls.length; i++) {
+      stackKeys.add(keys[i]);
+      const enter = !first && !this.#stack.has(keys[i]);
+      stack += `<span class="tc-icon${enter ? " is-in" : ""}">${callIconSvg(calls[i] ?? { name: "" })}</span>`;
+    }
+    this.#stack = stackKeys;
+    const title = running ? d.runningLabel || t.using : d.label || t.used(calls.length);
+    const ms = running ? this.#liveMs() : finite(d.duration) ?? sum ?? (this.#acc > 0 ? this.#acc : void 0);
+    return `<div class="tcg"${running ? " data-running" : ""}${shown ? " data-open" : ""}><button type="button" class="tcg-head" data-key="head" aria-expanded="${shown}" aria-controls="tcg-body"${d.focusable === false ? ' tabindex="-1"' : ""}><span class="tcg-stack" aria-hidden="true">${stack}</span><span class="tcg-title${this.#titleIn ? " is-in" : ""}"><span class="tcg-label${running ? " tc-shine" : ""}" data-text="${escAttr(title)}">${esc(title)}</span>${!running && failed ? `<span class="tcg-failed">· ${esc(t.nFailed(failed))}</span>` : ""}${ms !== void 0 ? `<span class="tcg-time">· ${esc(formatToolMs(ms, running))}</span>` : ""}</span>${CHEV_SVG}</button></div>`;
+  }
+  updated() {
+    const d = this.data;
+    this.#body.hidden = !d;
+    if (d) {
+      this.#reconcile(d);
+      const open = this.#isOpen(d);
+      if (open !== this.#shownOpen) {
+        this.$(".tcg")?.getBoundingClientRect();
+        this.#shownOpen = open;
+      }
+      this.#applyOpen(this.#shownOpen);
+    }
+    this.#syncTick();
+    this.#announce();
+  }
+  /** One card per call, keyed by id (else index): create / remove only what changed, keep the rest in place. */
+  #reconcile(d) {
+    const calls = Array.isArray(d.calls) ? d.calls : [];
+    const keys = this.#keys.length === calls.length ? this.#keys : callKeys(calls);
+    const lang = this.getAttribute("lang");
+    const theme = this.getAttribute("theme");
+    const next = /* @__PURE__ */ new Map();
+    calls.forEach((call, i) => {
+      if (!call) return;
+      let entry = this.#cards.get(keys[i]);
+      if (!entry) {
+        const el = document.createElement("ui-tool-call-card");
+        el.setAttribute("role", "listitem");
+        entry = { el, data: void 0 };
+      }
+      syncAttr(entry.el, "lang", lang);
+      syncAttr(entry.el, "theme", theme);
+      const data = d.focusable === false && call.focusable === void 0 ? { ...call, focusable: false } : call;
+      if (!entry.data || !sameCall(entry.data, data)) {
+        entry.data = data;
+        entry.el.data = data;
+      }
+      next.set(keys[i], entry);
+    });
+    for (const [key, entry] of this.#cards) if (!next.has(key)) entry.el.remove();
+    let at = this.#list.firstElementChild;
+    for (const { el } of next.values()) {
+      if (el === at) at = at.nextElementSibling;
+      else this.#list.insertBefore(el, at);
+    }
+    this.#cards = next;
+  }
+  #applyOpen(open) {
+    this.$(".tcg")?.toggleAttribute("data-open", open);
+    this.$(".tcg-head")?.setAttribute("aria-expanded", String(open));
+    this.#body.toggleAttribute("data-open", open);
+    this.#body.toggleAttribute("inert", !open);
+  }
+  #toggle() {
+    const d = this.data;
+    if (!d) return;
+    const next = !this.#isOpen(d);
+    if (!this.emit("ui-toggle", { open: next })) return;
+    if (d.open !== void 0) return;
+    this.#open = next;
+    this.#shownOpen = next;
+    this.#applyOpen(next);
+  }
+  /** Running ↔ done is announced once each way; a group that first appears done stays quiet. */
+  #announce() {
+    const d = this.data;
+    if (!d) return;
+    const running = !!this.#running;
+    if (running === this.#saidRunning) return;
+    const first = this.#saidRunning === void 0;
+    this.#saidRunning = running;
+    if (first && !running) return;
+    const t = this.#t;
+    const calls = Array.isArray(d.calls) ? d.calls : [];
+    const text = running ? d.runningLabel || t.using : t.groupSay(d.label || t.used(calls.length), groupStats(calls).failed);
+    if (this.#live.textContent !== text) this.#live.textContent = text;
+  }
+  #syncTick() {
+    const run = !!this.data && !!this.#running && this.isConnected;
+    if (run && !this.#tick) this.#tick = window.setInterval(() => this.#paintTime(), TICK_MS);
+    else if (!run) this.#stopTick();
+  }
+  #stopTick() {
+    if (!this.#tick) return;
+    clearInterval(this.#tick);
+    this.#tick = 0;
+  }
+  #paintTime() {
+    if (!this.#running || !this.isConnected) {
+      this.#stopTick();
+      return;
+    }
+    const node = this.$(".tcg-time")?.firstChild;
+    const text = `· ${formatToolMs(this.#liveMs(), true)}`;
+    if (node && node.nodeType === Node.TEXT_NODE && node.data !== text) node.data = text;
+  }
+}
+function syncAttr(el, name, value) {
+  if (el.getAttribute(name) === value) return;
+  if (value === null) el.removeAttribute(name);
+  else el.setAttribute(name, value);
+}
+define("ui-tool-call-group", UiToolCallGroup);
+export {
+  TOOL_ICONS,
+  UiToolCallCard,
+  UiToolCallGroup,
+  callKeys,
+  formatToolClock,
+  formatToolMs,
+  groupStats,
+  highlightJson,
+  normStatus,
+  toCodeText,
+  toolCallStrings,
+  toolIcon
+};
+//# sourceMappingURL=tool-call-card.js.map