@unofficialbox/box-open-elements 0.19.0 → 0.20.0

package/dist/patterns/agent-workspace/controller.js

@@ -0,0 +1,65 @@
+export const conversationTitle = (body, max = 48) => {
+    const text = body.trim().replace(/\s+/g, " ");
+    if (text.length <= max)
+        return text || "New chat";
+    const cut = text.slice(0, max);
+    const space = cut.lastIndexOf(" ");
+    return `${space > 0 ? cut.slice(0, space) : cut}…`;
+};
+export function conversationDetails(state) {
+    const sources = new Map();
+    const approvals = [];
+    let context;
+    for (const message of state.messages) {
+        if (message.context)
+            context = message.context;
+        for (const citation of message.citations)
+            if (!sources.has(citation.id))
+                sources.set(citation.id, citation);
+        for (const block of message.blocks ?? [])
+            if (block.type === "documents")
+                for (const item of block.items) {
+                    if (!sources.has(item.id))
+                        sources.set(item.id, { id: item.id, label: item.name, ...(item.href ? { href: item.href } : {}) });
+                }
+        for (const proposal of message.proposals)
+            approvals.push({ messageId: message.id, proposal });
+    }
+    return { ...(context ? { context } : {}), approvals, sources: [...sources.values()] };
+}
+/** Owns independent sessions. Selecting a chat never disconnects another one. */
+export class AgentWorkspaceController {
+    createSession;
+    chats = [];
+    activeId = null;
+    seq = 0;
+    listeners = new Set();
+    subscriptions = [];
+    constructor(createSession) {
+        this.createSession = createSession;
+    }
+    subscribe(listener) { this.listeners.add(listener); return () => this.listeners.delete(listener); }
+    emit() { this.listeners.forEach(fn => fn()); }
+    newChat() {
+        let chat = this.chats.find(c => c.controller.getState().messages.length === 0);
+        if (!chat) {
+            chat = { id: `chat-${++this.seq}`, controller: this.createSession() };
+            chat.controller.connect();
+            this.chats.push(chat);
+            this.subscriptions.push(chat.controller.subscribe("messagesChanged", () => this.emit()), chat.controller.subscribe("streamingChanged", () => this.emit()));
+        }
+        this.select(chat.id);
+        return chat;
+    }
+    select(id) { if (!this.chats.some(c => c.id === id))
+        return; this.activeId = id; this.emit(); }
+    get summaries() {
+        return this.chats.map(c => {
+            const state = c.controller.getState();
+            return { id: c.id, title: conversationTitle(state.messages.find(m => m.role === "user")?.body ?? ""),
+                status: state.messages.some(m => m.proposals.some(p => !p.decision)) ? "Needs your approval" : state.streaming ? "Working…" : "" };
+        });
+    }
+    get details() { const chat = this.chats.find(c => c.id === this.activeId); return chat ? conversationDetails(chat.controller.getState()) : { approvals: [], sources: [] }; }
+    destroy() { this.subscriptions.forEach(fn => fn()); this.subscriptions = []; this.chats.forEach(c => { c.controller.disconnect(); c.controller.destroy(); }); this.listeners.clear(); }
+}

package/dist/patterns/agent-workspace/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./controller.js";
+export * from "./agent-workspace.js";

package/dist/patterns/agent-workspace/index.js

@@ -0,0 +1,2 @@
+export * from "./controller.js";
+export * from "./agent-workspace.js";

package/dist/patterns/call-console/call-console.d.ts

@@ -0,0 +1,17 @@
+import { BaseElement } from "../../core/element.js";
+import type { CallConsoleController } from "./controller.js";
+export declare function copyCallText(text: string, doc?: Document): Promise<boolean>;
+export declare class CallConsole extends BaseElement {
+    static readonly tagName = "box-call-console";
+    private model;
+    private unsubscribe?;
+    private selected;
+    get callController(): CallConsoleController | null;
+    set callController(value: CallConsoleController | null);
+    private listen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

package/dist/patterns/call-console/call-console.js

@@ -0,0 +1,107 @@
+import { BaseElement } from "../../core/element.js";
+import { SplitView } from "../../components/layout/split-view.js";
+import { boeEntrance, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { callFailed, callStatus, formatCallHttp } from "./types.js";
+const DEFAULT_TAG_NAME = "box-call-console";
+export async function copyCallText(text, doc = document) {
+    try {
+        await doc.defaultView?.navigator.clipboard.writeText(text);
+        if (doc.defaultView?.navigator.clipboard)
+            return true;
+    }
+    catch { }
+    const active = doc.activeElement;
+    const textarea = doc.createElement("textarea");
+    textarea.value = text;
+    textarea.style.cssText = "position:fixed;opacity:0";
+    doc.body.append(textarea);
+    textarea.select();
+    try {
+        return doc.execCommand?.("copy") ?? false;
+    }
+    finally {
+        textarea.remove();
+        active?.focus({ preventScroll: true });
+    }
+}
+export class CallConsole extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    model = null;
+    unsubscribe;
+    selected = "";
+    get callController() { return this.model; }
+    set callController(value) { this.unsubscribe?.(); this.model = value; if (this.isConnected)
+        this.listen(); if (this.isRendered)
+        this.update(); }
+    listen() { this.unsubscribe?.(); this.unsubscribe = this.model?.subscribe(() => this.update()); }
+    connectedCallback() { super.connectedCallback(); this.listen(); }
+    disconnectedCallback() { this.unsubscribe?.(); }
+    renderTemplate() {
+        SplitView.register();
+        this.shadowRoot.innerHTML = `<style>:host{display:block;min-width:0;color:var(--boe-token-text-text,#222);font:inherit}:host([hidden]){display:none !important}
+    header{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center} pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;max-height:30rem;overflow:auto}
+    button,select{font:inherit;color:inherit;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:5px;padding:.4rem;cursor:pointer}
+    [part="call"]{width:100%;display:grid;grid-template-columns:5rem 5rem minmax(0,1fr) 4rem;text-align:left;gap:.5rem;margin:.4rem 0;${boeEntrance()}}
+    #list{container-type:inline-size} [part="call"] span{min-width:0;overflow-wrap:anywhere}
+    @container(max-width:420px){[part="call"]{grid-template-columns:minmax(0,1fr) auto}[part="call"] span:nth-child(even){text-align:right}}
+    [aria-current="true"]{background:var(--boe-token-surface-surface-secondary,#f5f5f5)} [part="skeleton"]{height:2rem;margin:.5rem;background:var(--boe-token-surface-surface-secondary,#eee)}
+    ${boeEntranceKeyframes}${boeReducedMotionPolicy}</style>
+    <header><span id="connection" role="status"></span><label>Service <select id="service"><option value="">All</option></select></label><label><input type="checkbox" id="errors"> Errors only</label><button id="clear">Clear</button><span id="copy-status" role="status"></span></header>
+    <box-split-view resizable ratio="0.4"><div slot="primary" id="list"></div><div><button data-copy="request">Copy request</button><button data-copy="response">Copy response</button><button data-copy="both">Copy both</button><h3>Request <button data-copy="request" aria-label="Copy request code">⧉</button></h3><pre id="request"></pre><h3>Response <button data-copy="response" aria-label="Copy response code">⧉</button></h3><pre id="response"></pre></div></box-split-view>`;
+    }
+    setupListeners() {
+        this.shadowRoot.querySelector("#service").addEventListener("change", () => this.update());
+        this.shadowRoot.querySelector("#errors").addEventListener("change", () => this.update());
+        this.shadowRoot.querySelector("#clear").addEventListener("click", () => { void this.model?.clear().catch(() => { this.shadowRoot.querySelector("#copy-status").textContent = "Unable to clear calls"; }); });
+        this.shadowRoot.querySelectorAll("[data-copy]").forEach(b => b.addEventListener("click", async () => {
+            const entry = this.model?.entries.find(e => e.id === this.selected);
+            if (!entry)
+                return;
+            const ok = await copyCallText(formatCallHttp(entry, b.dataset.copy));
+            this.shadowRoot.querySelector("#copy-status").textContent = ok ? "Copied" : "Copy unavailable; select the text to copy";
+        }));
+    }
+    update() {
+        const state = this.model?.connection ?? "connecting";
+        this.shadowRoot.querySelector("#connection").textContent = state === "unavailable" ? "Restart the agent: /calls is unavailable" : state;
+        const service = this.shadowRoot.querySelector("#service");
+        const services = [...new Set(this.model?.entries.map(e => e.service) ?? [])];
+        for (const name of services)
+            if (!Array.from(service.options).some(o => o.value === name)) {
+                const option = document.createElement("option");
+                option.value = name;
+                option.textContent = name;
+                service.append(option);
+            }
+        const errors = this.shadowRoot.querySelector("#errors").checked;
+        const entries = this.model?.entries.filter(e => (!service.value || e.service === service.value) && (!errors || callFailed(e))) ?? [];
+        if (!entries.some(e => e.id === this.selected))
+            this.selected = entries[0]?.id ?? "";
+        const list = this.shadowRoot.querySelector("#list");
+        const focused = this.shadowRoot.activeElement?.getAttribute("data-call-id");
+        list.querySelectorAll('[part="skeleton"]').forEach(el => el.remove());
+        const existing = new Map(Array.from(list.children).map(el => [el.getAttribute("data-call-id"), el]));
+        for (const entry of entries) {
+            let button = existing.get(entry.id);
+            existing.delete(entry.id);
+            if (!button) {
+                button = document.createElement("button");
+                button.setAttribute("part", "call");
+                button.dataset.callId = entry.id;
+                button.addEventListener("click", () => { this.selected = entry.id; this.update(); });
+            }
+            button.setAttribute("aria-current", String(entry.id === this.selected));
+            button.replaceChildren(...[callStatus(entry), entry.service, entry.summary, `${Math.round(entry.durationMs)} ms`].map(text => { const span = document.createElement("span"); span.textContent = text; return span; }));
+            list.append(button);
+            if (entry.id === focused)
+                button.focus({ preventScroll: true });
+        }
+        existing.forEach(el => el.remove());
+        if (!entries.length && state === "connecting")
+            list.innerHTML = '<div part="skeleton"></div><div part="skeleton"></div><div part="skeleton"></div>';
+        const entry = entries.find(e => e.id === this.selected);
+        this.shadowRoot.querySelector("#request").textContent = entry ? formatCallHttp(entry, "request") : "Select a call";
+        this.shadowRoot.querySelector("#response").textContent = entry ? formatCallHttp(entry, "response") : "";
+    }
+}
+CallConsole.register();

package/dist/patterns/call-console/controller.d.ts

@@ -0,0 +1,23 @@
+import type { CallConnection, CallEntry, CallEvent } from "./types.js";
+export interface CallConsoleTransport {
+    snapshot(signal: AbortSignal): Promise<CallEntry[]>;
+    subscribe(onEvent: (event: CallEvent) => void, onConnection: (state: CallConnection) => void): () => void;
+    clear(): Promise<void>;
+}
+/** Transport injection keeps networking out of the component. */
+export declare class CallConsoleController {
+    readonly transport: CallConsoleTransport;
+    entries: CallEntry[];
+    connection: CallConnection;
+    private listeners;
+    private abort?;
+    private close?;
+    constructor(transport: CallConsoleTransport);
+    subscribe(fn: () => void): () => void;
+    private emit;
+    apply(event: CallEvent): void;
+    connect(): Promise<void>;
+    clear(): Promise<void>;
+    disconnect(): void;
+    destroy(): void;
+}

package/dist/patterns/call-console/controller.js

@@ -0,0 +1,50 @@
+/** Transport injection keeps networking out of the component. */
+export class CallConsoleController {
+    transport;
+    entries = [];
+    connection = "connecting";
+    listeners = new Set();
+    abort;
+    close;
+    constructor(transport) {
+        this.transport = transport;
+    }
+    subscribe(fn) { this.listeners.add(fn); return () => this.listeners.delete(fn); }
+    emit() { this.listeners.forEach(fn => fn()); }
+    apply(event) {
+        if (event.type === "snapshot")
+            this.entries = event.entries;
+        else if (event.type === "clear")
+            this.entries = [];
+        else
+            this.entries = this.entries.some(e => e.id === event.entry.id) ? this.entries.map(e => e.id === event.entry.id ? event.entry : e) : [event.entry, ...this.entries];
+        this.emit();
+    }
+    async connect() {
+        this.disconnect();
+        const abort = new AbortController();
+        this.abort = abort;
+        this.connection = "connecting";
+        this.emit();
+        try {
+            const entries = await this.transport.snapshot(abort.signal);
+            if (abort.signal.aborted)
+                return;
+            this.apply({ type: "snapshot", entries });
+            this.close = this.transport.subscribe(event => { if (!abort.signal.aborted)
+                this.apply(event); }, state => { if (!abort.signal.aborted) {
+                this.connection = state;
+                this.emit();
+            } });
+        }
+        catch (error) {
+            if (!abort.signal.aborted) {
+                this.connection = error instanceof Error && error.message === "404" ? "unavailable" : "reconnecting";
+                this.emit();
+            }
+        }
+    }
+    async clear() { await this.transport.clear(); this.apply({ type: "clear" }); }
+    disconnect() { this.abort?.abort(); this.close?.(); this.close = undefined; }
+    destroy() { this.disconnect(); this.listeners.clear(); }
+}

package/dist/patterns/call-console/http-transport.d.ts

@@ -0,0 +1,3 @@
+import type { CallConsoleTransport } from "./controller.js";
+/** Optional browser adapter for the documented snapshot/SSE/DELETE contract. */
+export declare function createCallConsoleTransport(base?: string): CallConsoleTransport;

package/dist/patterns/call-console/http-transport.js

@@ -0,0 +1,26 @@
+/** Optional browser adapter for the documented snapshot/SSE/DELETE contract. */
+export function createCallConsoleTransport(base = "/calls") {
+    return {
+        async snapshot(signal) { const response = await fetch(base, { signal }); if (!response.ok)
+            throw new Error(String(response.status)); return await response.json(); },
+        subscribe(onEvent, onConnection) {
+            const events = new EventSource(`${base}/stream`);
+            events.onopen = () => onConnection("live");
+            events.onerror = () => onConnection("reconnecting");
+            for (const type of ["snapshot", "call", "clear"])
+                events.addEventListener(type, event => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        if (data.type === type)
+                            onEvent(data);
+                    }
+                    catch {
+                        onConnection("reconnecting");
+                    }
+                });
+            return () => events.close();
+        },
+        async clear() { const response = await fetch(base, { method: "DELETE" }); if (!response.ok)
+            throw new Error(String(response.status)); },
+    };
+}

package/dist/patterns/call-console/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./controller.js";
+export * from "./http-transport.js";
+export * from "./call-console.js";

package/dist/patterns/call-console/index.js

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./controller.js";
+export * from "./http-transport.js";
+export * from "./call-console.js";

package/dist/patterns/call-console/types.d.ts

@@ -0,0 +1,32 @@
+export interface CallEntry {
+    id: string;
+    startedAt: number;
+    durationMs: number;
+    pending: boolean;
+    service: string;
+    summary: string;
+    method: string;
+    url: string;
+    requestHeaders: Record<string, string>;
+    requestBody?: string;
+    status: number;
+    statusText: string;
+    responseHeaders: Record<string, string>;
+    responseBody?: string;
+    error?: string;
+    expected?: string;
+    rpcError?: string;
+}
+export type CallEvent = {
+    type: "snapshot";
+    entries: CallEntry[];
+} | {
+    type: "call";
+    entry: CallEntry;
+} | {
+    type: "clear";
+};
+export type CallConnection = "connecting" | "live" | "reconnecting" | "unavailable";
+export declare const callFailed: (entry: CallEntry) => boolean;
+export declare const callStatus: (entry: CallEntry) => string;
+export declare const formatCallHttp: (entry: CallEntry, side?: "request" | "response" | "both") => string;

package/dist/patterns/call-console/types.js

@@ -0,0 +1,8 @@
+export const callFailed = (entry) => !entry.pending && Boolean(entry.error || entry.rpcError || (!entry.expected && (entry.status < 200 || entry.status >= 300)));
+export const callStatus = (entry) => entry.pending ? "Pending" : entry.rpcError ? "Tool error" : entry.error ? "Failed" : entry.expected ? "Expected" : callFailed(entry) ? "Failed" : "Done";
+export const formatCallHttp = (entry, side = "both") => {
+    const headers = (h) => Object.entries(h).map(([k, v]) => `${k}: ${v}`).join("\n");
+    const request = `${entry.method} ${entry.url}\n${headers(entry.requestHeaders)}\n\n${entry.requestBody ?? ""}`;
+    const response = `HTTP ${entry.status} ${entry.statusText}\n${headers(entry.responseHeaders)}\n\n${entry.responseBody ?? ""}${entry.rpcError || entry.error ? `\n${entry.rpcError ?? entry.error}` : ""}`;
+    return side === "request" ? request : side === "response" ? response : `${request}\n\n${response}`;
+};

package/dist/patterns/content-uploader/content-uploader.js

@@ -728,7 +728,8 @@ export class ContentUploader extends BaseElement {
             </div>
             <box-progress-bar
               part="row-progress"
-              label="${escapeHtml(`${item.name} upload progress`)}"
+              hide-label
+              label="${escapeHtml(item.name)}"
               max="100"
               value="${String(Math.round(item.progress * 100))}"
             ></box-progress-bar>

package/dist/patterns/run/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./types.js";
 export * from "./run-trace.js";
+export * from "./progress.js";
+export * from "./run-summary.js";

package/dist/patterns/run/index.js

@@ -2,3 +2,5 @@
 export * from "./types.js";
 // Machine execution trace surface
 export * from "./run-trace.js";
+export * from "./progress.js";
+export * from "./run-summary.js";

package/dist/patterns/run/progress.d.ts

@@ -0,0 +1,24 @@
+import { type StatusKind } from "../../foundations/status/index.js";
+import { type RunStep } from "./types.js";
+export interface AgentTodo {
+    id: string;
+    content: string;
+    status: "pending" | "in_progress" | "completed" | "skipped";
+}
+export interface RunTurn {
+    steps: RunStep[];
+    todos: AgentTodo[];
+    startedAt: number;
+    endedAt?: number;
+    incomplete?: boolean;
+}
+export declare function formatElapsed(ms: number): string;
+export declare function splitStepTitle(title: string): {
+    source?: string;
+    action: string;
+};
+export declare function progress(turn: RunTurn, failed?: boolean, now?: number, threshold?: number): {
+    kind: StatusKind;
+    label: string;
+    elapsed?: string;
+};

package/dist/patterns/run/progress.js

@@ -0,0 +1,32 @@
+import { toStatusKind } from "../../foundations/status/index.js";
+import { resolveRunSteps } from "./types.js";
+export function formatElapsed(ms) {
+    if (!Number.isFinite(ms) || ms < 0)
+        return "";
+    if (ms < 100)
+        return "<0.1 s";
+    if (ms < 10000)
+        return `${(ms / 1000).toFixed(1)} s`;
+    const seconds = Math.round(ms / 1000);
+    return seconds < 60 ? `${seconds} s` : `${Math.floor(seconds / 60)} min ${seconds % 60} s`;
+}
+export function splitStepTitle(title) {
+    const at = title.indexOf(" · ");
+    return at < 0 ? { action: title } : { source: title.slice(0, at), action: title.slice(at + 3) };
+}
+export function progress(turn, failed = false, now = Date.now(), threshold = 2000) {
+    const resolved = resolveRunSteps(turn.steps);
+    if (turn.endedAt === undefined) {
+        const step = [...resolved.steps].reverse().find(s => s.status === "running");
+        const label = turn.todos.find(t => t.status === "in_progress")?.content ?? (step ? splitStepTitle(step.step.title).action : "Thinking");
+        const elapsed = Math.max(0, now - turn.startedAt);
+        return { kind: "active", label: `${label}…`, ...(elapsed >= threshold ? { elapsed: `${Math.floor(elapsed / 1000)} s` } : {}) };
+    }
+    const took = formatElapsed(turn.endedAt - turn.startedAt);
+    if (failed || resolved.status === "failed")
+        return { kind: "failed", label: `Stopped after ${took}` };
+    if (turn.incomplete)
+        return { kind: "warning", label: `Cut short after ${took}` };
+    const warnings = resolved.steps.filter(s => toStatusKind(s.status) === "warning").length;
+    return { kind: warnings ? "warning" : "done", label: `Worked for ${took}${warnings ? ` · ${warnings} warning${warnings === 1 ? "" : "s"}` : ""}` };
+}

package/dist/patterns/run/run-summary.d.ts

@@ -0,0 +1,21 @@
+import { BaseElement } from "../../core/element.js";
+import { type RunTurn } from "./progress.js";
+export declare class RunSummary extends BaseElement {
+    static readonly tagName = "box-run-summary";
+    static get observedAttributes(): string[];
+    private value;
+    private timer;
+    private planSignature;
+    private traceSignature;
+    get turn(): RunTurn;
+    set turn(turn: RunTurn);
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncTimer;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private updateLabel;
+    protected update(): void;
+}

package/dist/patterns/run/run-summary.js

@@ -0,0 +1,82 @@
+import { BaseElement } from "../../core/element.js";
+import { boeDisclosureStyles, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { StatusIcon } from "../../components/feedback/status-icon.js";
+import { toStatusKind } from "../../foundations/status/index.js";
+import { RunTrace } from "./run-trace.js";
+import { progress } from "./progress.js";
+const DEFAULT_TAG_NAME = "box-run-summary";
+export class RunSummary extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() { return ["open", "failed", "elapsed-threshold"]; }
+    value = { steps: [], todos: [], startedAt: 0, endedAt: 0 };
+    timer;
+    planSignature = "";
+    traceSignature = "";
+    get turn() { return this.value; }
+    set turn(turn) { this.value = turn; if (this.isRendered)
+        this.update(); }
+    get open() { return this.hasAttribute("open"); }
+    set open(value) { this.toggleAttribute("open", value); }
+    connectedCallback() { super.connectedCallback(); this.syncTimer(); }
+    disconnectedCallback() { clearInterval(this.timer); this.timer = undefined; }
+    syncTimer() {
+        if (this.value.endedAt === undefined && this.isConnected && !this.timer)
+            this.timer = setInterval(() => this.updateLabel(), 1000);
+        if (this.value.endedAt !== undefined) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    renderTemplate() {
+        StatusIcon.register();
+        RunTrace.register();
+        this.shadowRoot.innerHTML = `<style>:host{display:block;font:inherit;color:var(--boe-token-text-text-secondary,#666)}:host([hidden]){display:none !important}
+    button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:.5rem 0;display:flex;gap:.5rem;align-items:center}
+    [part="clock"]{font-variant-numeric:tabular-nums} ul{padding:0;list-style:none} li{display:flex;gap:.5rem;margin:.5rem 0}
+    @keyframes boe-shimmer{50%{opacity:.6}} [data-running] [part="label"]{animation:boe-shimmer 1.4s ease-in-out infinite}
+    ${boeDisclosureStyles()}${boeEntranceKeyframes}${boeReducedMotionPolicy}</style>
+    <button part="trigger" aria-expanded="false" aria-controls="details"><box-status-icon></box-status-icon><span part="label" role="status"></span><span part="clock" aria-hidden="true"></span><span aria-hidden="true">›</span></button>
+    <div id="details" part="disclosure" class="boe-disclosure" inert><div><ul part="plan"></ul><box-run-trace></box-run-trace></div></div>`;
+    }
+    setupListeners() { this.shadowRoot.querySelector("button").addEventListener("click", () => { this.open = !this.open; }); }
+    updateLabel() {
+        const p = progress(this.value, this.hasAttribute("failed"), Date.now(), Number(this.getAttribute("elapsed-threshold") ?? 2000));
+        const label = this.shadowRoot.querySelector('[part="label"]');
+        if (label.textContent !== p.label)
+            label.textContent = p.label;
+        this.shadowRoot.querySelector('[part="clock"]').textContent = p.elapsed ?? "";
+        this.shadowRoot.querySelector("box-status-icon").kind = p.kind;
+        this.shadowRoot.querySelector("button").toggleAttribute("data-running", p.kind === "active");
+        this.shadowRoot.querySelector("button").setAttribute("aria-label", p.label);
+    }
+    update() {
+        if (!this.isRendered)
+            return;
+        this.updateLabel();
+        this.syncTimer();
+        this.shadowRoot.querySelector("button").setAttribute("aria-expanded", String(this.open));
+        const disclosure = this.shadowRoot.querySelector("#details");
+        disclosure.toggleAttribute("data-open", this.open);
+        disclosure.inert = !this.open;
+        disclosure.setAttribute("aria-hidden", String(!this.open));
+        const signature = JSON.stringify(this.value.todos);
+        if (signature !== this.planSignature) {
+            this.planSignature = signature;
+            const list = this.shadowRoot.querySelector("ul");
+            list.replaceChildren();
+            for (const todo of this.value.todos) {
+                const li = document.createElement("li");
+                const icon = new StatusIcon();
+                icon.kind = toStatusKind(todo.status);
+                li.append(icon, document.createTextNode(todo.content));
+                list.append(li);
+            }
+        }
+        const traceSignature = JSON.stringify(this.value.steps);
+        if (traceSignature !== this.traceSignature) {
+            this.traceSignature = traceSignature;
+            this.shadowRoot.querySelector("box-run-trace").steps = this.value.steps;
+        }
+    }
+}
+RunSummary.register();

package/dist/patterns/run/run-trace.d.ts

@@ -25,6 +25,7 @@ export declare class RunTrace extends BaseElement {
     private stepsRaw;
     private stepsCache;
     private readonly expandedIds;
+    private readonly previousStatuses;
     get heading(): string;
     set heading(value: string);
     get steps(): RunStep[];

package/dist/patterns/run/run-trace.js

@@ -2,6 +2,8 @@ import { formatRunDuration, formatRunSummary, isRunStepRecord, resolveRunSteps,
 import { ProgressBar } from "../../components/feedback/progress-bar.js";
 import { BaseElement } from "../../core/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
+import { boeStatusGlyph, boeStatusStyles, toStatusKind } from "../../foundations/status/index.js";
+import { boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-run-trace";
 /** Escape a value for use inside a double-quoted attribute selector. */
 const cssAttrValue = (value) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
@@ -285,6 +287,7 @@ export class RunTrace extends BaseElement {
     stepsRaw = null;
     stepsCache = [];
     expandedIds = new Set();
+    previousStatuses = new Map();
     get heading() {
         return this.getAttribute("heading") ?? "Run";
     }
@@ -332,7 +335,11 @@ export class RunTrace extends BaseElement {
         if (!this.shadowRoot) {
             return;
         }
-        this.shadowRoot.innerHTML = `<style>${elementStyles}</style><div part="host"></div>`;
+        this.shadowRoot.innerHTML = `<style>${elementStyles}
+    [part="step"] [part="marker"]{border:0;background:none;display:inline-flex}
+    ${boeEntranceKeyframes}${boeStatusStyles}
+    [data-settled] .boe-status[data-kind="done"], [data-settled] .boe-status[data-kind="done"] path { animation: none; }
+    ${boeReducedMotionPolicy}</style><div part="host"></div>`;
         this.hostEl = this.shadowRoot.querySelector('[part="host"]');
     }
     setupListeners() {
@@ -379,7 +386,7 @@ export class RunTrace extends BaseElement {
             <span part="child-label">${escapeHtml(child.label)}</span>
             ${clamped === null
                 ? "<span></span>"
-                : `<box-progress-bar label="${escapeHtml(child.label)} progress" value="${String(clamped)}"></box-progress-bar>`}
+                : `<box-progress-bar label="${escapeHtml(child.label)}" value="${String(clamped)}"></box-progress-bar>`}
             <span part="child-status">${RUN_STEP_STATUS_LABEL[status]}</span>
           </li>
         `;
@@ -395,6 +402,7 @@ export class RunTrace extends BaseElement {
         const rows = resolution.steps
             .map(entry => {
             const { step, status, position } = entry;
+            const settled = this.previousStatuses.get(step.id) === status;
             const duration = formatRunDuration(step.startedAt, step.finishedAt);
             // Slot-only detail counts: a host projecting logs for a step with no
             // JSON description still needs the toggle that reveals them.
@@ -412,7 +420,7 @@ export class RunTrace extends BaseElement {
         `;
             return `
           <li part="step" data-status="${status}" data-step-id="${escapeHtml(step.id)}" style="--run-tone:${STATUS_TONE[status]};">
-            <span part="marker" aria-hidden="true"></span>
+            <span part="marker" aria-hidden="true" ${settled ? "data-settled" : ""}>${boeStatusGlyph(toStatusKind(status))}</span>
             <div part="step-body">
               <div part="topline">
                 <span part="step-title">${escapeHtml(step.title)}</span>
@@ -430,6 +438,9 @@ export class RunTrace extends BaseElement {
         })
             .join("");
         const summary = formatRunSummary(resolution);
+        this.previousStatuses.clear();
+        for (const { step, status } of resolution.steps)
+            this.previousStatuses.set(step.id, status);
         this.hostEl.innerHTML = `
       <section part="panel" aria-label="${escapeHtml(this.heading)}">
         <div part="header">