@2lab.ai/ui 0.1.1 → 0.2.0

package/README.md

@@ -9,6 +9,7 @@ Agent UI components from the 2lab soma-work dashboard, as **Web Components** wit
 | Agent Run (screen) | `<ui-agent-run>` | What the agent is doing now, its plan, and what it needs from you |
 | Agent Inbox | `<ui-agent-inbox>` | Which runs need you, which are running, which are done |
 | AI Answer | `<ui-ai-answer>` | The answer, the links in it, copy, response time |
+| Tool Call Card | `<ui-tool-call-card>`, `<ui-tool-call-group>` | What the agent called, with what, what came back, and how long it took |
 | Agent Queue | `<ui-agent-queue>` | Provider capacity, rate limits, and the scheduled-job lane |
 | Context Window | `<ui-context-window>` | How full the context is and how far auto-compaction is |
 | Memory Panel | `<ui-memory-panel>` | What the agent remembers about you — search, edit, delete with undo |

package/dist/agent-inbox.js

@@ -1,4 +1,4 @@
-import { d as define, U as UiElement, p as prefersReducedMotion, e as esc, f as escAttr } from "./html-DZWnrdcg.js";
+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 {

package/dist/agent-queue.js

@@ -1,4 +1,4 @@
-import { d as define, U as UiElement, e as esc, f as escAttr } from "./html-DZWnrdcg.js";
+import { d as define, U as UiElement, e as esc, f as escAttr } from "./html-elD6Bb_u.js";
 const HOUR = 36e5;
 const DAY = 864e5;
 const D7 = 7 * DAY;

package/dist/agent-run.js

@@ -1,4 +1,4 @@
-import { d as define, U as UiElement, f as escAttr, e as esc } from "./html-DZWnrdcg.js";
+import { d as define, U as UiElement, f as escAttr, e as esc } from "./html-elD6Bb_u.js";
 import { b as fmtDuration, a as fmtClock } from "./format-BBGWXPzk.js";
 const styles = `
 :host { --ar-wait-text: color-mix(in srgb, var(--st-wait) 74%, var(--text)); }

package/dist/ai-answer.js

@@ -1,4 +1,4 @@
-import { d as define, U as UiElement, e as esc, f as escAttr, s as safeHref, p as prefersReducedMotion } from "./html-DZWnrdcg.js";
+import { d as define, U as UiElement, e as esc, f as escAttr, s as safeHref, p as prefersReducedMotion } from "./html-elD6Bb_u.js";
 const styles = `
 .ui-root { container: ans / inline-size; }
 .ans-card { position: relative; padding: 12px 14px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--ib-shadow); overflow: hidden; }

package/dist/components/tool-call-card/index.d.ts

@@ -0,0 +1,7 @@
+export type { ToolCallData, ToolCallGroupData, ToolCallStatus, ToolIcon } from './logic.js';
+export { formatToolClock, formatToolMs, groupStats, highlightJson, TOOL_ICONS, toCodeText, toolIcon, } from './logic.js';
+export type { ToolCallLang, ToolCallStrings } from './strings.js';
+export { toolCallStrings } from './strings.js';
+export type { ToolCallActionDetail, ToolCallCopyDetail, ToolCallPart, ToolCallToggleDetail } from './tool-call-card.js';
+export { normStatus, UiToolCallCard } from './tool-call-card.js';
+export { callKeys, UiToolCallGroup } from './tool-call-group.js';

package/dist/components/tool-call-card/logic.d.ts

@@ -0,0 +1,87 @@
+/**
+ * `running` — the call is in flight. `success` / `error` — it returned. `interrupted` — the run ended (stopped turn,
+ * crashed process) before this call returned a result: neither running nor failed.
+ */
+export type ToolCallStatus = 'running' | 'success' | 'error' | 'interrupted';
+export type ToolIcon = 'wrench' | 'search' | 'file' | 'edit' | 'terminal' | 'globe' | 'agent' | 'list' | 'plug';
+export interface ToolCallData {
+    /** Tool name as the agent calls it, shown in mono — `Read`, `mcp__github__get_issue`. */
+    name: string;
+    /** One human line — `src/app.ts (lines 1-80)`. */
+    summary?: string;
+    /** Icon in the tile. Default `toolIcon(name)`. */
+    icon?: ToolIcon;
+    status: ToolCallStatus;
+    /** Object → pretty JSON; a JSON string is parsed; other text is shown as is. */
+    args?: unknown;
+    result?: unknown;
+    /** Shown when status is `error`. */
+    error?: string;
+    /** Epoch ms the call started — the live timer counts from here while running. */
+    startedAt?: number;
+    /** Final duration in ms. */
+    duration?: number;
+    /** Epoch ms clock time the call started, shown muted in the body as HH:MM:SS. */
+    at?: number;
+    /** Set → controlled; unset → the element keeps its own open state. */
+    open?: boolean;
+    /** Initial open state while uncontrolled (read on the first render only). */
+    defaultOpen?: boolean;
+    /** Default true: opens when the call turns to error, closes again on the next run unless toggled by hand. */
+    openOnError?: boolean;
+    /** Shows Retry next to the error → `ui-retry`. */
+    canRetry?: boolean;
+    /** Default 220 — taller blocks get a fade and Show all / Show less. */
+    maxCodeHeight?: number;
+    /** The host is fetching args/result: the body shows a quiet Loading… line. */
+    loading?: boolean;
+    /** The host's fetch failed: this message plus Try again → `ui-reload`. */
+    detailError?: string;
+    /** One muted line in the body (e.g. “Showing the first 256 KiB of 1.2 MB”). */
+    note?: string;
+    /** Default true; false → the header button is out of the tab order (the host runs a roving focus). */
+    focusable?: boolean;
+    /** Host key for the call, echoed as `detail.id` in every event (and used by the group to keep cards). */
+    id?: string;
+}
+export interface ToolCallGroupData {
+    calls: ToolCallData[];
+    /** Label once every call is done. Default “Used N tools”. */
+    label?: string;
+    /** Label while any call runs. Default “Using tools…”. */
+    runningLabel?: string;
+    /** Total ms. Default: the sum of the calls' durations, or the time measured while running. */
+    duration?: number;
+    /** Set → controlled; unset → the element keeps its own open state. */
+    open?: boolean;
+    /** Initial open state while uncontrolled (read on the first render only). */
+    defaultOpen?: boolean;
+    /** Default true; false → the group's and the cards' header buttons are out of the tab order. */
+    focusable?: boolean;
+}
+/** 0.4s · 12.3s · 2m 05s · 1h 02m. Live timers always show tenths below a minute; a final value under 1s reads 350ms. */
+export declare function formatToolMs(ms: number, live?: boolean): string;
+/** Clock time HH:MM:SS (24h) in the card's language; empty for a missing or invalid time. */
+export declare function formatToolClock(at: number | undefined, lang?: 'en' | 'ko'): string;
+/**
+ * What a code block shows: objects pretty-printed, a string that holds JSON parsed and pretty-printed, any other
+ * text as is. `json` says whether the text may be highlighted.
+ */
+export declare function toCodeText(value: unknown): {
+    text: string;
+    json: boolean;
+};
+/** JSON text → escaped HTML with `tc-k` (key), `tc-s` (string), `tc-n` (number), `tc-l` (literal) spans. */
+export declare function highlightJson(text: string): string;
+/** The tile icon for a tool name: Read/Write → file, Edit → edit, Bash → terminal, Grep/Glob/WebSearch → search,
+ * WebFetch → globe, Agent/Task → agent, TodoWrite → list, mcp__* → plug, anything else → wrench. */
+export declare function toolIcon(name: string): ToolIcon;
+/** Line count of a block (for the cap estimate when the layout cannot be measured). */
+export declare function lineCount(text: string): number;
+/** What the group line says about its calls. `interrupted` counts as neither running nor failed. */
+export declare function groupStats(calls: ToolCallData[]): {
+    running: boolean;
+    failed: number;
+    sum: number | undefined;
+};
+export declare const TOOL_ICONS: Record<ToolIcon, string>;

package/dist/components/tool-call-card/strings.d.ts

@@ -0,0 +1,94 @@
+/** UI copy. English by default, Korean with `lang="ko"` (the soma-work 작업 로그 wording). */
+declare const en: {
+    running: string;
+    done: string;
+    failed: string;
+    noResult: string;
+    args: string;
+    result: string;
+    waiting: string;
+    nothing: string;
+    failedDefault: string;
+    interrupted: string;
+    showAll: string;
+    showLess: string;
+    retry: string;
+    reload: string;
+    loading: string;
+    copy: (part: string) => string;
+    copied: string;
+    selected: string;
+    startedAt: (clock: string) => string;
+    sayRunning: (name: string) => string;
+    sayDone: (name: string) => string;
+    sayFailed: (name: string, error: string) => string;
+    sayInterrupted: (name: string) => string;
+    used: (n: number) => string;
+    using: string;
+    nFailed: (n: number) => string;
+    groupSay: (label: string, failed: number) => string;
+};
+export type ToolCallStrings = typeof en;
+export declare const STRINGS: {
+    en: {
+        running: string;
+        done: string;
+        failed: string;
+        noResult: string;
+        args: string;
+        result: string;
+        waiting: string;
+        nothing: string;
+        failedDefault: string;
+        interrupted: string;
+        showAll: string;
+        showLess: string;
+        retry: string;
+        reload: string;
+        loading: string;
+        copy: (part: string) => string;
+        copied: string;
+        selected: string;
+        startedAt: (clock: string) => string;
+        sayRunning: (name: string) => string;
+        sayDone: (name: string) => string;
+        sayFailed: (name: string, error: string) => string;
+        sayInterrupted: (name: string) => string;
+        used: (n: number) => string;
+        using: string;
+        nFailed: (n: number) => string;
+        groupSay: (label: string, failed: number) => string;
+    };
+    ko: {
+        running: string;
+        done: string;
+        failed: string;
+        noResult: string;
+        args: string;
+        result: string;
+        waiting: string;
+        nothing: string;
+        failedDefault: string;
+        interrupted: string;
+        showAll: string;
+        showLess: string;
+        retry: string;
+        reload: string;
+        loading: string;
+        copy: (part: string) => string;
+        copied: string;
+        selected: string;
+        startedAt: (clock: string) => string;
+        sayRunning: (name: string) => string;
+        sayDone: (name: string) => string;
+        sayFailed: (name: string, error: string) => string;
+        sayInterrupted: (name: string) => string;
+        used: (n: number) => string;
+        using: string;
+        nFailed: (n: number) => string;
+        groupSay: (label: string, failed: number) => string;
+    };
+};
+export type ToolCallLang = keyof typeof STRINGS;
+export declare function toolCallStrings(lang: string | null | undefined): ToolCallStrings;
+export {};

package/dist/components/tool-call-card/styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Tool Call Card + Group. Sizes and timings follow the affectUI Tool Call Card pattern; every colour is a dashboard
+ * token or a color-mix() of tokens, so light and dark both read.
+ */
+export declare const styles = "\n:host { --tc-ink: var(--text); --tc-text: var(--text-secondary); --tc-muted: var(--text-tertiary);\n  --tc-bg: var(--surface); --tc-line: var(--border); --tc-tile: var(--surface-raised);\n  --tc-hover: color-mix(in srgb, var(--text) 3.5%, var(--surface));\n  --tc-code: color-mix(in srgb, var(--surface-raised) 60%, var(--surface));\n  --tc-ring: var(--surface);\n  --tc-red: var(--st-fail-text); --tc-red-bg: color-mix(in srgb, var(--st-fail) 7%, var(--surface));\n  --tc-red-line: color-mix(in srgb, var(--st-fail) 24%, transparent);\n  --tc-key: var(--text); --tc-str: color-mix(in srgb, var(--green) 62%, var(--accent)); --tc-num: var(--orange);\n  --tc-lit: var(--purple); --tc-shine: var(--text);\n  --tc-lift: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);\n  --tc-ease: var(--ease-out);\n  min-width: 0; font-size: 13.5px; line-height: 1.4; letter-spacing: -0.006em; }\n[hidden] { display: none !important; }\nbutton { appearance: none; margin: 0; border: 0; background: none; text-align: left; letter-spacing: inherit; }\n\n/* Card */\n.tc { position: relative; border: 1px solid var(--tc-line); border-radius: 12px; background: var(--tc-bg); box-shadow: var(--tc-lift); }\n.tc-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px 8px 9px;\n  border-radius: 11px; color: var(--tc-text); transition: background-color 160ms ease; }\n.tc[data-open] > .tc-head { border-radius: 11px 11px 0 0; }\n.tc-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px;\n  background: var(--tc-tile); box-shadow: inset 0 0 0 1px var(--tc-line); color: var(--tc-ink); }\n.tc-icon > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }\n.tc-main { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }\n.tc-name { flex: 0 1 auto; max-width: 55%; overflow: hidden; color: var(--tc-ink); font-family: var(--mono); font-size: 12.5px;\n  font-weight: 500; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }\n.tc-summary { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--tc-text); text-overflow: ellipsis; white-space: nowrap; }\n.tc-status { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--tc-muted); font-size: 12.5px;\n  font-variant-numeric: tabular-nums; white-space: nowrap; }\n.tc-status.is-in { animation: tc-in 360ms var(--tc-ease) both; }\n.tc[data-status=\"error\"] .tc-status { color: var(--tc-red); }\n.tc-status > svg { width: 14px; height: 14px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }\n.tc-spin { animation: tc-spin 800ms linear infinite; }\n.tc-spin circle { stroke: currentColor; stroke-width: 1.6; opacity: 0.25; }\n.tc-spin path { stroke: var(--st-run); stroke-width: 1.6; }\n.tc-ok { stroke: var(--st-done); stroke-width: 1.8; }\n.is-in .tc-ok path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tc-draw 360ms var(--tc-ease) 80ms forwards; }\n.tc-err { stroke: var(--st-fail); stroke-width: 1.5; }\n.tc-stop { stroke: currentColor; stroke-width: 1.5; }\n.tc-chev { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--tc-muted); stroke-width: 1.5; stroke-linecap: round;\n  stroke-linejoin: round; transition: transform 360ms var(--tc-ease); }\n.tc[data-open] > .tc-head .tc-chev, .tcg[data-open] > .tcg-head .tc-chev { transform: rotate(180deg); }\n@media (hover: hover) {\n  .tc-head:hover { background: var(--tc-hover); }\n  .tc-head:hover .tc-chev { stroke: var(--tc-ink); }\n  .tcg-head:hover { background: var(--tc-hover); color: var(--tc-ink); }\n  .tc-copy:hover { background: var(--tc-hover); color: var(--tc-ink); }\n  .tc-more:hover { color: var(--tc-ink); }\n  .tc-btn:hover { background: var(--tc-hover); }\n}\n\n/* Body: 0fr \u2192 1fr, so the height animates without measuring */\n.tc-body { display: grid; grid-template-rows: 0fr; opacity: 0;\n  transition: grid-template-rows 380ms var(--tc-ease), opacity 240ms ease; }\n.tc-body[data-open] { grid-template-rows: 1fr; opacity: 1; }\n.tc-clip { min-height: 0; overflow: hidden; }\n.tc-sections { display: grid; gap: 12px; padding: 12px; border-top: 1px solid var(--tc-line); }\n.tc-top { display: flex; justify-content: flex-end; margin: -2px 0 -6px; }\n.tc-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }\n.tc-line > p { min-width: 0; }\n.tc-head-end { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }\n.tc-at { flex: none; color: var(--tc-muted); font-size: 11.5px; line-height: 16px; font-variant-numeric: tabular-nums; }\n.tc-section { display: grid; gap: 6px; min-width: 0; }\n.tc-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }\n.tc-label { color: var(--tc-muted); font-size: 12px; font-weight: 500; }\n.tc-pending, .tc-note { margin: 0; color: var(--tc-muted); font-size: 12.5px; }\n.tc-note { font-size: 12px; }\n\n.tc-copy { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0;\n  border-radius: 6px; color: var(--tc-muted); transition: background-color 160ms ease, color 160ms ease; }\n.tc-copy svg { position: absolute; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4;\n  stroke-linecap: round; stroke-linejoin: round;\n  transition: opacity 200ms ease, transform 320ms var(--tc-ease), filter 200ms ease; }\n.tc-copy-done { opacity: 0; transform: scale(0.6); filter: blur(2px); stroke-width: 1.7; }\n.tc-copy[data-copied] { color: var(--st-done); }\n.tc-copy[data-copied] .tc-copy-icon { opacity: 0; transform: scale(0.6); filter: blur(2px); }\n.tc-copy[data-copied] .tc-copy-done { opacity: 1; transform: none; filter: none; }\n\n/* Code wraps instead of scrolling sideways; a capped block fades out at the bottom */\n.tc-code { position: relative; margin: 0; padding: 10px 12px; overflow: hidden; border-radius: 8px; background: var(--tc-code);\n  box-shadow: inset 0 0 0 1px var(--tc-line); color: var(--tc-text); font-family: var(--mono); font-size: 12px;\n  line-height: 1.6; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;\n  transition: max-height 420ms var(--tc-ease); }\n.tc-code[data-json] { color: var(--tc-muted); }\n.tc-code code { display: block; font: inherit; }\n.tc-code::after { content: \"\"; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 56px; border-radius: 0 0 7px 7px;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--tc-code) 0%, transparent), var(--tc-code));\n  opacity: 0; transition: opacity 240ms ease; pointer-events: none; }\n.tc-code[data-capped]::after { opacity: 1; }\n.tc-k { color: var(--tc-key); }\n.tc-s { color: var(--tc-str); }\n.tc-n { color: var(--tc-num); }\n.tc-l { color: var(--tc-lit); }\n.tc-more { position: relative; justify-self: start; padding: 2px 4px; margin-left: -4px; border-radius: 5px; color: var(--tc-text);\n  font-size: 12.5px; font-weight: 500; transition: color 160ms ease; }\n\n/* Error: the message and an optional Retry; a failed host fetch: the message and Try again */\n.tc-error { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px 9px 11px; border-radius: 8px;\n  background: var(--tc-red-bg); box-shadow: inset 0 0 0 1px var(--tc-red-line); }\n.tc-error > svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: none; stroke-linecap: round; }\n.tc-error-text { flex: 1; min-width: 0; margin: 0; color: var(--tc-red); font-size: 13px; line-height: 1.45;\n  white-space: pre-wrap; overflow-wrap: anywhere; }\n.tc-reload-row { display: flex; align-items: center; gap: 8px; }\n.tc-reload-row > .tc-pending { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.tc-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none; height: 26px; margin: -3px 0;\n  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);\n  color: var(--tc-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background-color 160ms ease; }\n.tc-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;\n  stroke-linejoin: round; transition: transform 200ms var(--tc-ease); }\n.tc-btn:active svg { transform: rotate(-60deg); }\n\n/* Group: one quiet line with the tools' icons stacked, the cards below */\n.tcg { display: grid; }\n.tcg-head { display: flex; align-items: center; gap: 9px; justify-self: start; max-width: 100%; min-height: 36px;\n  padding: 4px 10px 4px 5px; border-radius: 10px; color: var(--tc-text);\n  transition: background-color 160ms ease, color 160ms ease; }\n.tcg-stack { display: flex; flex: none; }\n.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); }\n.tcg-stack .tc-icon.is-in { animation: tc-pop 420ms var(--tc-ease) both; }\n.tcg-stack .tc-icon + .tc-icon { margin-left: -5px; }\n.tcg-stack .tc-icon > svg { width: 13px; height: 13px; }\n.tcg-title { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; }\n.tcg-title.is-in { animation: tc-in 360ms var(--tc-ease) both; }\n.tcg-label { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; font-weight: 500; }\n.tcg-failed { flex: none; color: var(--tc-red); }\n.tcg-time { flex: none; color: var(--tc-muted); font-variant-numeric: tabular-nums; }\n.tcg-list { display: grid; gap: 8px; padding-top: 8px; }\n\n/* A band of the text colour sweeping over \u201CUsing tools\u2026\u201D */\n.tc-shine::after { content: attr(data-text); content: attr(data-text) / \"\"; position: absolute; inset: 0; white-space: nowrap;\n  color: transparent; background: linear-gradient(90deg, transparent 38%, var(--tc-shine) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;\n  -webkit-background-clip: text; background-clip: text; animation: tc-sweep 1.8s linear infinite; pointer-events: none; }\n\n@keyframes tc-in { from { opacity: 0; transform: translateY(3px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }\n@keyframes tc-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }\n@keyframes tc-spin { to { transform: rotate(360deg); } }\n@keyframes tc-draw { to { stroke-dashoffset: 0; } }\n@keyframes tc-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }\n\n/* Touch: every control gets a 44px target without changing the layout */\n@media (pointer: coarse) {\n  .tcg-head { min-height: 44px; }\n  .tc-copy::before, .tc-more::before, .tc-btn::before { content: \"\"; position: absolute; inset: -10px; }\n  .tc-more::before { inset: -12px -8px; }\n  .tc-btn::before { inset: -9px -4px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .tc-shine::after { display: none; }\n  .tc-spin { animation: none; }\n  .is-in .tc-ok path { animation: none; stroke-dashoffset: 0; }\n}\n";

package/dist/components/tool-call-card/tool-call-card.d.ts

@@ -0,0 +1,49 @@
+import { UiElement } from '../../core/element.js';
+import { type ToolCallData, type ToolCallStatus } from './logic.js';
+/** Which code block an event is about. */
+export type ToolCallPart = 'args' | 'result';
+export interface ToolCallToggleDetail {
+    open: boolean;
+    /** `data.id` when set. */
+    id?: string;
+}
+export interface ToolCallCopyDetail {
+    part: ToolCallPart;
+    text: string;
+    id?: string;
+}
+export interface ToolCallActionDetail {
+    id?: string;
+}
+export declare 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>";
+export declare 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>";
+/** A status the card knows; anything else reads as `interrupted` (neutral, no timer). */
+export declare function normStatus(s: unknown): ToolCallStatus;
+/** The tile glyph for a call: its `icon` when it names one, else `toolIcon(name)`. */
+export declare function callIconSvg(d: Pick<ToolCallData, 'name' | 'icon'>): string;
+/**
+ * `<ui-tool-call-card>` — one tool call of an agent: icon, name, summary and status (spinner with a live timer, a
+ * drawn check with the duration, Failed, or No result) on one line; open it for the arguments and the result as
+ * highlighted JSON with copy buttons, long blocks capped with Show all, errors with Retry.
+ */
+export declare class UiToolCallCard extends UiElement<ToolCallData> {
+    #private;
+    static styles: string[];
+    static get observedAttributes(): string[];
+    constructor();
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+    /** 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. */
+    protected focusFallback(): HTMLElement | null;
+    focus(options?: FocusOptions): void;
+    /** Whether the body is open now (controlled `data.open`, else the element's own state). */
+    get isOpen(): boolean;
+    protected render(): string;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-tool-call-card': UiToolCallCard;
+    }
+}

package/dist/components/tool-call-card/tool-call-group.d.ts

@@ -0,0 +1,32 @@
+import { UiElement } from '../../core/element.js';
+import { type ToolCallData, type ToolCallGroupData } from './logic.js';
+import { type UiToolCallCard } from './tool-call-card.js';
+/** Stable keys for a group's calls: `id:<id>` when the call has an id, else `i:<index>` (duplicates get a suffix). */
+export declare function callKeys(calls: ToolCallData[]): string[];
+/**
+ * `<ui-tool-call-group>` — several tool calls folded into one quiet line: the last three tools' icons stacked,
+ * “Used 3 tools · 1 failed · 2.4s” (or “Using tools…” with a light sweep while any call runs). Open it for one
+ * `<ui-tool-call-card>` per call. The cards live in a list outside the re-rendered line and are reconciled by key,
+ * so a group update never re-creates them (open state, timers and copy checks survive).
+ */
+export declare class UiToolCallGroup extends UiElement<ToolCallGroupData> {
+    #private;
+    static styles: string[];
+    static get observedAttributes(): string[];
+    constructor();
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+    /** Focus the group's header button. */
+    focus(options?: FocusOptions): void;
+    /** Whether the list is open now (controlled `data.open`, else the element's own state). */
+    get isOpen(): boolean;
+    /** The card elements, in call order. */
+    get cards(): UiToolCallCard[];
+    protected render(): string;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-tool-call-group': UiToolCallGroup;
+    }
+}

package/dist/context-window.js

@@ -1,4 +1,4 @@
-import { d as define, U as UiElement, f as escAttr, e as esc, p as prefersReducedMotion } from "./html-DZWnrdcg.js";
+import { d as define, U as UiElement, f as escAttr, e as esc, p as prefersReducedMotion } from "./html-elD6Bb_u.js";
 import { e as fmtTokens } from "./format-BBGWXPzk.js";
 const styles = `
 :host { --cw-c1: var(--accent); --cw-c2: color-mix(in srgb, var(--accent) 42%, var(--ib-pill)); --cw-c3: var(--purple); --cw-c4: var(--green);

package/dist/core/element.d.ts

@@ -23,6 +23,8 @@ export declare abstract class UiElement<D = unknown> extends HTMLElement {
     /** Render synchronously (tests, or right before measuring). Cancels a queued render. */
     renderNow(): void;
     protected update(): void;
+    /** Where focus goes when the focused element is gone after a render (its key no longer rendered). Default: nowhere. */
+    protected focusFallback(): HTMLElement | null;
     /** The component's markup. */
     protected abstract render(): string;
     /** Hook after each render (wire listeners on fresh nodes, start timers). */

package/dist/{html-DZWnrdcg.js → html-elD6Bb_u.js}

@@ -66,6 +66,11 @@ class UiElement extends HTMLElement {
     this.requestRender();
   }
   connectedCallback() {
+    if (Object.hasOwn(this, "data")) {
+      const early = this.data;
+      delete this.data;
+      this.data = early;
+    }
     this.requestRender();
   }
   disconnectedCallback() {
@@ -88,20 +93,23 @@ class UiElement extends HTMLElement {
     this.update();
   }
   update() {
-    const key = this.#focusedKey();
+    const focus = this.#focusState();
     this.content.innerHTML = this.render();
-    if (key) {
-      const next = Array.from(this.content.querySelectorAll("[data-key]")).find(
-        (el) => el.dataset.key === key
-      );
-      next?.focus({ preventScroll: true });
-    }
     this.updated();
+    if (!focus) return;
+    const next = focus.key === void 0 ? void 0 : Array.from(this.content.querySelectorAll("[data-key]")).find(
+      (el) => el.dataset.key === focus.key
+    );
+    (next ?? this.focusFallback())?.focus({ preventScroll: true });
+  }
+  /** Where focus goes when the focused element is gone after a render (its key no longer rendered). Default: nowhere. */
+  focusFallback() {
+    return null;
   }
-  #focusedKey() {
+  #focusState() {
     try {
       const active = this.root.activeElement;
-      return active && this.content.contains(active) ? active.dataset?.key : void 0;
+      return active && this.content.contains(active) ? { key: active.dataset?.key } : void 0;
     } catch {
       return void 0;
     }
@@ -164,4 +172,4 @@ export {
   safeHref as s,
   tokensCss as t
 };
-//# sourceMappingURL=html-DZWnrdcg.js.map
+//# sourceMappingURL=html-elD6Bb_u.js.map

package/dist/html-elD6Bb_u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-elD6Bb_u.js","sources":["../src/core/tokens.ts","../src/core/element.ts","../src/core/html.ts"],"sourcesContent":["import tokens from './tokens.json';\n\n/**\n * Design tokens. Inside every component's shadow root the dashboard names (`--text`, `--surface`, `--st-run` …)\n * are defined on `:host` and read the public `--ui-*` property first, so a page themes every component by\n * setting `--ui-text` etc. (or loading `@2lab.ai/ui/tokens.css`). Without any page tokens a component follows\n * `prefers-color-scheme`, and the `theme=\"light|dark\"` attribute pins it.\n */\nexport type TokenSet = Record<string, string>;\nexport const LIGHT: TokenSet = tokens.light;\nexport const DARK: TokenSet = tokens.dark;\nexport const SHARED: TokenSet = tokens.shared;\n\nfunction hostVars(set: TokenSet): string {\n  return Object.entries(set)\n    .map(([k, v]) => `--${k}: var(--ui-${k}, ${v});`)\n    .join(' ');\n}\n\nfunction pageVars(set: TokenSet): string {\n  return Object.entries(set)\n    .map(([k, v]) => `--ui-${k}: ${v};`)\n    .join(' ');\n}\n\n/** Shared stylesheet prepended to every component's shadow root. */\nexport const baseCss = `\n:host { ${hostVars(SHARED)} ${hostVars(LIGHT)}\n  display: block; box-sizing: border-box; color: var(--text); font-family: var(--font);\n  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; color-scheme: light; }\n:host([theme=\"dark\"]) { ${hostVars(DARK)} color-scheme: dark; }\n@media (prefers-color-scheme: dark) { :host(:not([theme=\"light\"])) { ${hostVars(DARK)} color-scheme: dark; } }\n:host([hidden]) { display: none; }\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, textarea, select { font: inherit; color: inherit; }\nbutton { cursor: pointer; }\n:focus { outline: none; }\n:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }\n.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;\n  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\n.mono { font-family: var(--mono); }\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }\n}\n`;\n\n/** Optional page-level tokens (`@2lab.ai/ui/tokens.css`): `data-theme=\"dark|light\"` on any ancestor switches. */\nexport const tokensCss = `/* @2lab.ai/ui design tokens */\n:root, [data-theme=\"light\"] { ${pageVars(SHARED)} ${pageVars(LIGHT)} color-scheme: light; }\n[data-theme=\"dark\"] { ${pageVars(DARK)} color-scheme: dark; }\n@media (prefers-color-scheme: dark) { :root:not([data-theme=\"light\"]) { ${pageVars(DARK)} color-scheme: dark; } }\n`;\n","import { baseCss } from './tokens';\n\n/**\n * Base class for every @2lab.ai/ui component.\n *\n * - Open shadow root with `baseCss` + the subclass's `static styles`.\n * - Data in, events out: set `el.data = {...}` (or the component's own properties) → one batched render;\n *   user intent leaves as a bubbling, composed `CustomEvent` (`ui-*`) that the host app handles.\n * - `render()` returns an HTML string; every dynamic value must go through `esc` / `escAttr` / `safeHref`.\n * - Focus survives a re-render when the focused element carries `data-key` (restored to the same key).\n * - Subclasses that tick (timers) should update text nodes in place instead of re-rendering.\n */\nexport abstract class UiElement<D = unknown> extends HTMLElement {\n  static styles: string[] = [];\n\n  protected readonly root: ShadowRoot;\n  protected readonly content: HTMLElement;\n  #data: D | undefined;\n  #queued = false;\n  #gen = 0;\n\n  constructor() {\n    super();\n    this.root = this.attachShadow({ mode: 'open' });\n    const ctor = this.constructor as typeof UiElement;\n    const style = document.createElement('style');\n    style.textContent = [baseCss, ...ctor.styles].join('\\n');\n    this.content = document.createElement('div');\n    this.content.setAttribute('part', 'root');\n    this.content.className = 'ui-root';\n    this.root.append(style, this.content);\n  }\n\n  get data(): D | undefined {\n    return this.#data;\n  }\n\n  set data(value: D | undefined) {\n    this.#data = value;\n    this.requestRender();\n  }\n\n  connectedCallback(): void {\n    // `data` set before this element was defined (its module loaded after the host's script ran) is an own\n    // property that shadows the accessor: move it through the setter. Here, not in the constructor — a subclass\n    // setter may use private fields that only exist once construction is done.\n    if (Object.hasOwn(this, 'data')) {\n      const early = (this as { data?: D }).data;\n      delete (this as { data?: D }).data;\n      this.data = early;\n    }\n    this.requestRender();\n  }\n\n  disconnectedCallback(): void {}\n\n  /** Batch renders into one microtask. */\n  requestRender(): void {\n    if (this.#queued) return;\n    this.#queued = true;\n    const gen = this.#gen;\n    queueMicrotask(() => {\n      if (!this.#queued || gen !== this.#gen) return;\n      this.#queued = false;\n      if (this.isConnected) this.update();\n    });\n  }\n\n  /** Render synchronously (tests, or right before measuring). Cancels a queued render. */\n  renderNow(): void {\n    this.#queued = false;\n    this.#gen++;\n    this.update();\n  }\n\n  protected update(): void {\n    const focus = this.#focusState();\n    this.content.innerHTML = this.render();\n    // After updated(): a subclass may unhide or move what was focused there (a display:none element takes no focus).\n    this.updated();\n    if (!focus) return;\n    // Compare dataset values instead of building a selector: keys may hold any characters.\n    const next =\n      focus.key === undefined\n        ? undefined\n        : Array.from(this.content.querySelectorAll<HTMLElement>('[data-key]')).find(\n            (el) => el.dataset.key === focus.key,\n          );\n    (next ?? this.focusFallback())?.focus({ preventScroll: true });\n  }\n\n  /** Where focus goes when the focused element is gone after a render (its key no longer rendered). Default: nowhere. */\n  protected focusFallback(): HTMLElement | null {\n    return null;\n  }\n\n  #focusState(): { key: string | undefined } | undefined {\n    try {\n      const active = this.root.activeElement as HTMLElement | null;\n      return active && this.content.contains(active) ? { key: active.dataset?.key } : undefined;\n    } catch {\n      return undefined;\n    }\n  }\n\n  /** The component's markup. */\n  protected abstract render(): string;\n\n  /** Hook after each render (wire listeners on fresh nodes, start timers). */\n  protected updated(): void {}\n\n  /** Dispatch a bubbling, composed, cancelable event. Returns false when a listener called preventDefault(). */\n  protected emit<T>(name: string, detail: T): boolean {\n    return this.dispatchEvent(new CustomEvent<T>(name, { detail, bubbles: true, composed: true, cancelable: true }));\n  }\n\n  /** Query inside the shadow root. */\n  protected $<E extends Element = HTMLElement>(selector: string): E | null {\n    return this.root.querySelector<E>(selector);\n  }\n\n  protected $$<E extends Element = HTMLElement>(selector: string): E[] {\n    return Array.from(this.root.querySelectorAll<E>(selector));\n  }\n}\n\n/** Register a custom element once (safe to import twice). */\nexport function define(tag: string, ctor: CustomElementConstructor): void {\n  if (typeof customElements !== 'undefined' && !customElements.get(tag)) customElements.define(tag, ctor);\n}\n\n/** True when the user asked for less motion. */\nexport function prefersReducedMotion(): boolean {\n  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/** HTML-escape text for element content. Every model-, user- or tool-written string goes through this. */\nexport function esc(value: unknown): string {\n  return String(value ?? '')\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;');\n}\n\n/** Escape for a double-quoted attribute value. */\nexport function escAttr(value: unknown): string {\n  return esc(value).replace(/\"/g, '&quot;').replace(/'/g, '&#39;');\n}\n\nconst SAFE_SCHEMES = /^(https?:|mailto:)/i;\n\n/** A link target that cannot run script: http(s)/mailto only, otherwise `#`. */\nexport function safeHref(url: unknown): string {\n  const s = String(url ?? '').trim();\n  return SAFE_SCHEMES.test(s) ? escAttr(s) : '#';\n}\n\n/** Join class names, skipping falsy entries. */\nexport function cls(...names: Array<string | false | null | undefined>): string {\n  return names.filter(Boolean).join(' ');\n}\n\n/** `key=\"value\"` pairs for truthy values, escaped. `true` renders a bare boolean attribute. */\nexport function attrs(map: Record<string, string | number | boolean | null | undefined>): string {\n  let out = '';\n  for (const [k, v] of Object.entries(map)) {\n    if (v === false || v === null || v === undefined) continue;\n    out += v === true ? ` ${k}` : ` ${k}=\"${escAttr(v)}\"`;\n  }\n  return out;\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './components/ai-answer/index.js';
 export * from './components/context-window/index.js';
 export * from './components/memory-panel/index.js';
 export * from './components/model-picker/index.js';
+export * from './components/tool-call-card/index.js';
 export { define, prefersReducedMotion, UiElement } from './core/element.js';
 export { clamp, fmtAgo, fmtClock, fmtDuration, fmtInt, fmtTokens, fmtUsd } from './core/format.js';
 export { attrs, cls, esc, escAttr, safeHref } from './core/html.js';

package/dist/index.js

@@ -5,7 +5,8 @@ import { UiAiAnswer, answerCopyText, answerLinkInfo, answerLinkKey, answerLinkif
 import { CELLS, UiContextWindow, cellMap, contextLevel, contextParts, markIndex } from "./context-window.js";
 import { FOLD_MS, UNDO_MS, UiMemoryPanel, entryKeys, entryMatches, highlight, isSameEdit, shortText, storeUsed, usageAfterAdd, usageLevel } from "./memory-panel.js";
 import { MODEL_EFFORT_LEVELS, UiModelPicker, anchorMoved, anchorSpot, fmtModelPrice, fmtModelTokens, meterSegments, modelEffortLabel, modelEffortLevels, modelGlyph, modelMeters, placeModelMenu, validModelPrice } from "./model-picker.js";
-import { D, L, S, U, a, b, c, d, e, f, p, s, t } from "./html-DZWnrdcg.js";
+import { TOOL_ICONS, UiToolCallCard, UiToolCallGroup, callKeys, formatToolClock, formatToolMs, groupStats, highlightJson, normStatus, toCodeText, toolCallStrings, toolIcon } from "./tool-call-card.js";
+import { D, L, S, U, a, b, c, d, e, f, p, s, t } from "./html-elD6Bb_u.js";
 import { c as c2, f as f2, a as a2, b as b2, d as d2, e as e2, g } from "./format-BBGWXPzk.js";
 export {
   ANNOUNCE_MS,
@@ -17,6 +18,7 @@ export {
   LOW_PCT,
   MODEL_EFFORT_LEVELS,
   S as SHARED,
+  TOOL_ICONS,
   UNDO_MS,
   UiAgentInbox,
   UiAgentQueue,
@@ -26,6 +28,8 @@ export {
   U as UiElement,
   UiMemoryPanel,
   UiModelPicker,
+  UiToolCallCard,
+  UiToolCallGroup,
   accountState,
   advanceProvider,
   agentDots,
@@ -42,6 +46,7 @@ export {
   axisPos,
   b as baseCss,
   boardCounts,
+  callKeys,
   capacityNews,
   cellMap,
   c2 as clamp,
@@ -67,7 +72,11 @@ export {
   fmtPct,
   e2 as fmtTokens,
   g as fmtUsd,
+  formatToolClock,
+  formatToolMs,
+  groupStats,
   highlight,
+  highlightJson,
   holdLanes,
   isSameEdit,
   laneNews,
@@ -79,6 +88,7 @@ export {
   modelMeters,
   nextRefill,
   niceMax,
+  normStatus,
   normalize,
   orderJobs,
   placeHolds,
@@ -106,8 +116,11 @@ export {
   storeUsed,
   timeText,
   timelineMarks,
+  toCodeText,
   toMs,
   t as tokensCss,
+  toolCallStrings,
+  toolIcon,
   upNext,
   usageAfterAdd,
   usageLevel,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/memory-panel.js

@@ -1,4 +1,4 @@
-import { d as define, U as UiElement, e as esc, f as escAttr, p as prefersReducedMotion } from "./html-DZWnrdcg.js";
+import { d as define, U as UiElement, e as esc, f as escAttr, p as prefersReducedMotion } from "./html-elD6Bb_u.js";
 import { d as fmtInt } from "./format-BBGWXPzk.js";
 const styles = `
 :host { --mm-fold: 320ms; --mm-warn: var(--yellow); --mm-danger-bg: color-mix(in srgb, var(--red) 11%, transparent);

package/dist/model-picker.js

@@ -1,4 +1,4 @@
-import { d as define, U as UiElement, f as escAttr, e as esc, p as prefersReducedMotion } from "./html-DZWnrdcg.js";
+import { d as define, U as UiElement, f as escAttr, e as esc, p as prefersReducedMotion } from "./html-elD6Bb_u.js";
 function morphInto(el, html) {
   const tpl = document.createElement("template");
   tpl.innerHTML = html;