@unofficialbox/box-open-elements 0.21.0 → 0.23.0

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

@@ -1,12 +1,12 @@
 import { BaseElement } from "../../core/element.js";
 import { AgentChat } from "../agent-chat/agent-chat.js";
 import { isSafeHref } from "../internal/safe-href.js";
-import { boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { boeMotionEasing, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
 import { trapTabKey } from "../../foundations/a11y/focus.js";
 const DEFAULT_TAG_NAME = "box-agent-workspace";
 export class AgentWorkspace extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
-    static get observedAttributes() { return ["viewer-key"]; }
+    static get observedAttributes() { return ["viewer-key", "hide-toggles"]; }
     model = null;
     unsubscribe;
     observer;
@@ -15,7 +15,20 @@ export class AgentWorkspace extends BaseElement {
     detailsOpen = false;
     initialized = false;
     renderedActive = null;
+    chatIds = "";
+    lastPanes = null;
     sessions = new Map();
+    /** Host-controlled pane state; mobile drawers remain mutually exclusive. */
+    get panes() { return { chats: this.chatsOpen, details: this.detailsOpen }; }
+    set panes(value) {
+        if (value.chats !== undefined)
+            this.chatsOpen = value.chats;
+        if (value.details !== undefined)
+            this.detailsOpen = value.details;
+        if (this.mobile && this.chatsOpen && this.detailsOpen)
+            this.chatsOpen = false;
+        this.syncPanes();
+    }
     get workspaceController() { return this.model; }
     set workspaceController(value) {
         this.unsubscribe?.();
@@ -58,15 +71,16 @@ export class AgentWorkspace extends BaseElement {
         this.syncPanes();
     }
     storageKey() { return `boe-workspace:${this.getAttribute("viewer-key") ?? "default"}`; }
-    toggle(pane) {
+    toggle(pane) { this.open(pane, !(pane === "chats" ? this.chatsOpen : this.detailsOpen)); }
+    open(pane, open) {
         if (pane === "chats") {
-            this.chatsOpen = !this.chatsOpen;
-            if (this.mobile)
+            this.chatsOpen = open;
+            if (this.mobile && open)
                 this.detailsOpen = false;
         }
         else {
-            this.detailsOpen = !this.detailsOpen;
-            if (this.mobile)
+            this.detailsOpen = open;
+            if (this.mobile && open)
                 this.chatsOpen = false;
         }
         if (!this.mobile)
@@ -75,13 +89,16 @@ export class AgentWorkspace extends BaseElement {
             }
             catch { }
         this.syncPanes();
-        if (this.mobile && (this.chatsOpen || this.detailsOpen))
+        if (this.mobile && open)
             this.shadowRoot.querySelector(`#${pane} button`)?.focus({ preventScroll: true });
     }
     closeDrawers() { this.chatsOpen = false; this.detailsOpen = false; this.syncPanes(); this.sessions.get(this.model?.activeId ?? "")?.focusComposer(); }
     syncPanes() {
         if (!this.isRendered)
             return;
+        const toggleGroup = this.shadowRoot.querySelector('[part="toggles"]');
+        if (toggleGroup)
+            toggleGroup.hidden = this.hasAttribute("hide-toggles");
         this.toggleAttribute("data-mobile", this.mobile);
         for (const [pane, open] of [["chats", this.chatsOpen], ["details", this.detailsOpen]]) {
             const el = this.shadowRoot.getElementById(pane);
@@ -103,13 +120,19 @@ export class AgentWorkspace extends BaseElement {
         this.shadowRoot.querySelector("#scrim").hidden = !overlaid;
         for (const chat of this.sessions.values())
             chat.toggleAttribute("hide-citations", this.detailsOpen);
+        for (const pane of ["chats", "details"]) {
+            const open = this.panes[pane];
+            if (this.lastPanes?.[pane] !== open)
+                this.dispatchEvent(new CustomEvent("pane-change", { bubbles: true, composed: true, detail: { pane, open, mobile: this.mobile } }));
+        }
+        this.lastPanes = this.panes;
     }
     renderTemplate() {
         AgentChat.register();
         this.shadowRoot.innerHTML = `<style>
     :host{display:block;height:100%;min-height:30rem;color:var(--boe-token-text-text,#222);font:inherit}:host([hidden]){display:none !important}
     *{box-sizing:border-box} section{position:relative;overflow:clip;height:100%;display:flex;min-width:0}
-    aside{width:0;overflow:clip;transition:width var(--boe-profile-motion-panel,320ms) ease-out;background:var(--boe-token-surface-surface,#fff)} aside[data-open]{width:280px;flex-shrink:0}
+    aside{width:0;overflow:clip;transition:width var(--boe-profile-motion-panel,320ms) ${boeMotionEasing.enter};background:var(--boe-token-surface-surface,#fff)} aside[data-open]{width:280px;flex-shrink:0}
     aside>div{width:280px;height:100%;padding:1rem;overflow:auto} main{min-width:0;flex:1;overflow:clip;display:flex;flex-direction:column;background:var(--boe-token-surface-surface,#fff)} nav{display:flex;justify-content:space-between;padding:.5rem}
     #conversation{flex:1;min-height:0} #sessions,box-agent-chat{height:100%}
     box-agent-chat::part(panel){height:100%;box-sizing:border-box;display:flex;flex-direction:column;border:0;border-radius:0}
@@ -118,13 +141,13 @@ export class AgentWorkspace extends BaseElement {
     button:focus-visible,a:focus-visible{outline:2px solid var(--boe-token-surface-surface-brand,#0061d5);outline-offset:2px}
     [part="chat"]{display:block;text-align:left;width:100%;border:0;background:none;padding:.65rem;border-radius:6px}
     [aria-current="page"]{background:var(--boe-token-surface-surface-secondary,#f3f3f3)} small{display:block;color:var(--boe-token-text-text-secondary,#666)}
-    #scrim{position:absolute;inset:0;background:#0005;border:0;border-radius:0;z-index:2} [hidden]{display:none!important}
+    #scrim{position:absolute;inset:0;background:var(--boe-workspace-scrim,rgba(0,0,0,.33));border:0;border-radius:0;z-index:2} [hidden]{display:none!important}
     [data-close]{display:none} :host([data-mobile]) [data-close]{display:block;margin-bottom:.5rem}
     :host([data-mobile]) aside{position:absolute;inset-block:0;z-index:3} :host([data-mobile]) #details{right:0}
     #approvals button,#sources a{display:block;margin:.5rem 0;text-align:left} #context{white-space:pre-wrap;overflow-wrap:anywhere}
     ${boeReducedMotionPolicy}</style><section part="workspace">
     <aside id="chats" part="chats"><div><button data-close>Close conversations</button><slot name="chats"><button id="new">New chat</button><div id="list"></div></slot></div></aside>
-    <main><nav><button data-toggle="chats" aria-controls="chats">Conversations</button><button data-toggle="details" aria-controls="details">Details</button></nav><div id="conversation" part="conversation"><slot name="conversation"><div id="sessions"></div></slot></div></main>
+    <main><nav><slot name="header"><div part="toggles" ${this.hasAttribute("hide-toggles") ? "hidden" : ""}><button data-toggle="chats" aria-controls="chats">Conversations</button><button data-toggle="details" aria-controls="details">Details</button></div></slot></nav><div id="conversation" part="conversation"><slot name="conversation"><div id="sessions"></div></slot></div></main>
     <button id="scrim" aria-label="Close panel" hidden></button>
     <aside id="details" part="details"><div><button data-close>Close details</button><slot name="details"><h2>Conversation details</h2><div id="context"></div><h3>Approvals</h3><div id="approvals"></div><h3>Sources</h3><div id="sources"></div></slot></div></aside></section>`;
     }
@@ -134,6 +157,8 @@ export class AgentWorkspace extends BaseElement {
         this.shadowRoot.querySelector("#scrim").addEventListener("click", () => this.closeDrawers());
         this.shadowRoot.querySelectorAll("[data-close]").forEach(b => b.addEventListener("click", () => this.closeDrawers()));
         this.shadowRoot.querySelectorAll("[data-toggle]").forEach(b => b.addEventListener("click", () => this.toggle(b.dataset.toggle)));
+        this.shadowRoot.querySelector('slot[name="conversation"]').addEventListener("slotchange", () => this.update());
+        this.shadowRoot.querySelector('slot[name="chats"]').addEventListener("slotchange", () => this.update());
         this.shadowRoot.addEventListener("keydown", event => {
             const e = event;
             if (e.key === "Escape" && this.mobile) {
@@ -148,9 +173,15 @@ export class AgentWorkspace extends BaseElement {
         if (!this.isRendered)
             return;
         const list = this.shadowRoot.querySelector("#list");
+        const hostChats = this.shadowRoot.querySelector('slot[name="chats"]').assignedElements().length > 0;
+        const ids = (this.model?.chats ?? []).map(chat => chat.id).join("\u0000");
+        if (ids !== this.chatIds) {
+            this.chatIds = ids;
+            this.dispatchEvent(new CustomEvent("chats-change", { bubbles: true, composed: true, detail: { ids: (this.model?.chats ?? []).map(chat => chat.id), activeId: this.model?.activeId ?? null } }));
+        }
         const activeRow = this.shadowRoot.activeElement?.getAttribute("data-chat-id");
         list.replaceChildren();
-        for (const summary of this.model?.summaries ?? []) {
+        for (const summary of hostChats ? [] : this.model?.summaries ?? []) {
             const b = document.createElement("button");
             b.setAttribute("part", "chat");
             b.dataset.chatId = summary.id;
@@ -160,18 +191,19 @@ export class AgentWorkspace extends BaseElement {
             const small = document.createElement("small");
             small.textContent = summary.status;
             b.append(small);
-            b.addEventListener("click", () => { this.model?.select(summary.id); if (this.mobile)
+            b.addEventListener("click", () => { this.model?.select(summary.id); this.dispatchEvent(new CustomEvent("conversation-selected", { bubbles: true, composed: true, detail: { id: summary.id } })); if (this.mobile)
                 this.closeDrawers(); });
             list.append(b);
             if (summary.id === activeRow)
                 b.focus({ preventScroll: true });
         }
+        const hostConversation = this.shadowRoot.querySelector('slot[name="conversation"]').assignedElements().length > 0;
         for (const [id, element] of this.sessions)
-            if (!this.model?.chats.some(c => c.id === id && c.controller === element.chatController)) {
+            if (hostConversation || !this.model?.chats.some(c => c.id === id && c.controller === element.chatController)) {
                 element.remove();
                 this.sessions.delete(id);
             }
-        for (const chat of this.model?.chats ?? []) {
+        for (const chat of hostConversation ? [] : this.model?.chats ?? []) {
             let element = this.sessions.get(chat.id);
             if (!element) {
                 element = new AgentChat();

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

@@ -23,15 +23,21 @@ export declare function conversationDetails(state: Readonly<AgentChatState>): Wo
 export declare class AgentWorkspaceController {
     private readonly createSession;
     readonly chats: WorkspaceChat[];
+    private readonly removed;
     activeId: string | null;
     private seq;
     private listeners;
     private subscriptions;
-    constructor(createSession: () => AgentChatController);
+    constructor(createSession: (id: string, seed?: unknown) => AgentChatController);
     subscribe(listener: () => void): () => void;
     private emit;
     newChat(): WorkspaceChat;
     select(id: string): void;
+    /** Temporarily remove a conversation without destroying its stream or history. */
+    remove(id: string): boolean;
+    restore(id: string, seed?: unknown): WorkspaceChat | null;
+    removeChat(id: string): boolean;
+    restoreChat(id: string, seed?: unknown): boolean;
     get summaries(): WorkspaceSummary[];
     get details(): WorkspaceDetails;
     destroy(): void;

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

@@ -4,7 +4,8 @@ export const conversationTitle = (body, max = 48) => {
         return text || "New chat";
     const cut = text.slice(0, max);
     const space = cut.lastIndexOf(" ");
-    return `${space > 0 ? cut.slice(0, space) : cut}…`;
+    const end = space >= max / 2 ? cut.slice(0, space) : cut;
+    return `${end.replace(/[\s,.;:!?-]+$/g, "")}…`;
 };
 export function conversationDetails(state) {
     const sources = new Map();
@@ -31,6 +32,7 @@ export function conversationDetails(state) {
 export class AgentWorkspaceController {
     createSession;
     chats = [];
+    removed = new Map();
     activeId = null;
     seq = 0;
     listeners = new Set();
@@ -43,7 +45,8 @@ export class AgentWorkspaceController {
     newChat() {
         let chat = this.chats.find(c => c.controller.getState().messages.length === 0);
         if (!chat) {
-            chat = { id: `chat-${++this.seq}`, controller: this.createSession() };
+            const id = `chat-${++this.seq}`;
+            chat = { id, controller: this.createSession(id) };
             chat.controller.connect();
             this.chats.push(chat);
             this.subscriptions.push(chat.controller.subscribe("messagesChanged", () => this.emit()), chat.controller.subscribe("streamingChanged", () => this.emit()));
@@ -53,6 +56,41 @@ export class AgentWorkspaceController {
     }
     select(id) { if (!this.chats.some(c => c.id === id))
         return; this.activeId = id; this.emit(); }
+    /** Temporarily remove a conversation without destroying its stream or history. */
+    remove(id) {
+        const index = this.chats.findIndex(chat => chat.id === id);
+        if (index < 0)
+            return false;
+        const [chat] = this.chats.splice(index, 1);
+        chat.controller.stop();
+        this.removed.set(id, { chat: chat, index });
+        if (this.activeId === id)
+            this.activeId = this.chats[Math.min(index, this.chats.length - 1)]?.id ?? null;
+        this.emit();
+        return true;
+    }
+    restore(id, seed) {
+        const removed = this.removed.get(id);
+        if (this.chats.some(chat => chat.id === id))
+            return null;
+        if (removed) {
+            this.removed.delete(id);
+            this.chats.splice(Math.min(removed.index, this.chats.length), 0, removed.chat);
+            this.select(id);
+            return removed.chat;
+        }
+        const chat = { id, controller: this.createSession(id, seed) };
+        chat.controller.connect();
+        this.chats.push(chat);
+        this.subscriptions.push(chat.controller.subscribe("messagesChanged", () => this.emit()), chat.controller.subscribe("streamingChanged", () => this.emit()));
+        const match = /^chat-(\d+)$/.exec(id);
+        if (match)
+            this.seq = Math.max(this.seq, Number(match[1]));
+        this.select(id);
+        return chat;
+    }
+    removeChat(id) { return this.remove(id); }
+    restoreChat(id, seed) { return this.restore(id, seed) !== null; }
     get summaries() {
         return this.chats.map(c => {
             const state = c.controller.getState();
@@ -61,5 +99,5 @@ export class AgentWorkspaceController {
         });
     }
     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(); }
+    destroy() { this.subscriptions.forEach(fn => fn()); this.subscriptions = []; [...this.chats, ...[...this.removed.values()].map(item => item.chat)].forEach(c => { c.controller.disconnect(); c.controller.destroy(); }); this.removed.clear(); this.listeners.clear(); }
 }

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

@@ -1,15 +1,25 @@
 import { BaseElement } from "../../core/element.js";
+import { type CallEntry } from "./types.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";
+    static get observedAttributes(): string[];
     private model;
+    private labels;
+    private failureRule;
     private unsubscribe?;
     private selected;
     private clearing;
     private rowSignatures;
     get callController(): CallConsoleController | null;
     set callController(value: CallConsoleController | null);
+    get heading(): string;
+    set heading(value: string);
+    get serviceLabels(): Record<string, string>;
+    set serviceLabels(value: Record<string, string>);
+    get isFailed(): (entry: CallEntry) => boolean;
+    set isFailed(value: (entry: CallEntry) => boolean);
     private listen;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -30,7 +30,10 @@ export async function copyCallText(text, doc = document) {
 }
 export class CallConsole extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() { return ["heading", "hide-heading"]; }
     model = null;
+    labels = {};
+    failureRule = callFailed;
     unsubscribe;
     selected = "";
     clearing = false;
@@ -39,6 +42,14 @@ export class CallConsole extends BaseElement {
     set callController(value) { this.unsubscribe?.(); this.model = value; if (this.isConnected)
         this.listen(); if (this.isRendered)
         this.update(); }
+    get heading() { return this.getAttribute("heading") ?? "API calls"; }
+    set heading(value) { this.setAttribute("heading", value); }
+    get serviceLabels() { return this.labels; }
+    set serviceLabels(value) { this.labels = value; if (this.isRendered)
+        this.update(); }
+    get isFailed() { return this.failureRule; }
+    set isFailed(value) { this.failureRule = value; if (this.isRendered)
+        this.update(); }
     listen() { this.unsubscribe?.(); this.unsubscribe = this.model?.subscribe(() => this.update()); }
     connectedCallback() { super.connectedCallback(); this.listen(); }
     disconnectedCallback() { this.unsubscribe?.(); }
@@ -73,7 +84,7 @@ export class CallConsole extends BaseElement {
     @container(max-width:640px){box-split-view::part(split-view){grid-template-columns:minmax(0,1fr)!important}box-split-view::part(separator){display:none}#list{min-height:0;max-height:17rem}#inspector{border-top:1px solid var(--boe-token-stroke-stroke,#ddd)}.search{flex-basis:100%}}
     ${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}</style>
     <section part="console" aria-label="API call console">
-    <header><div><h2>API calls</h2><small>Inspect requests, responses, and tool outcomes</small></div><span id="connection" role="status"></span><box-button id="retry" label="Reconnect" tone="neutral" hidden></box-button></header>
+    <header><div part="heading"><h2></h2><small>Inspect requests, responses, and tool outcomes</small></div><span id="connection" role="status"></span><box-button id="retry" label="Reconnect" tone="neutral" hidden></box-button></header>
     <div class="filters"><label class="search">Search <input id="search" type="search" placeholder="Method, URL, or summary"></label><label>Service <select id="service" aria-label="Service"><option value="">All services</option></select></label><label><input type="checkbox" id="errors"> Errors only</label><box-button id="clear" label="Clear calls" tone="neutral"></box-button></div>
     <box-split-view resizable ratio="0.42" label="Calls and request inspector"><section slot="primary" aria-label="Calls"><div class="pane-heading"><h3>Requests</h3><span id="count" class="muted" role="status"></span></div><div id="list"></div><p id="list-empty" role="status" hidden></p></section><section aria-label="Request inspector"><div class="pane-heading"><h3>Inspector</h3><box-button data-copy="both" label="Copy both" tone="neutral"></box-button><span id="copy-status" role="status"></span></div><p id="detail-empty">Select a request to inspect its details.</p><div id="inspector" hidden><h3 id="summary"></h3><p id="metadata" class="muted"></p><p id="outcome" role="status" hidden></p><h3 class="code-heading">Request</h3><box-code-block id="request" copy-label="Copy request" wrap></box-code-block><h3 class="code-heading">Response</h3><box-code-block id="response" copy-label="Copy response" wrap></box-code-block></div></section></box-split-view></section>`;
     }
@@ -125,6 +136,8 @@ export class CallConsole extends BaseElement {
     update() {
         if (!this.isRendered)
             return;
+        this.shadowRoot.querySelector('[part="heading"]').hidden = this.hasAttribute("hide-heading");
+        this.shadowRoot.querySelector("h2").textContent = this.heading;
         const state = this.model?.connection ?? "connecting";
         const connection = this.shadowRoot.querySelector("#connection");
         connection.textContent = this.model ? ({ live: "Live", connecting: "Connecting…", reconnecting: "Reconnecting…", unavailable: "Endpoint unavailable" }[state]) : "Not connected";
@@ -138,13 +151,15 @@ export class CallConsole extends BaseElement {
             if (!Array.from(service.options).some(o => o.value === name)) {
                 const option = document.createElement("option");
                 option.value = name;
-                option.textContent = name;
                 service.append(option);
             }
+        for (const option of Array.from(service.options))
+            if (option.value)
+                option.textContent = this.labels[option.value] ?? option.value;
         const errors = this.shadowRoot.querySelector("#errors").checked;
-        const entries = this.model?.entries.filter(e => (!service.value || e.service === service.value) && (!errors || callFailed(e))) ?? [];
+        const entries = this.model?.entries.filter(e => (!service.value || e.service === service.value) && (!errors || this.failureRule(e))) ?? [];
         const query = this.filters.query.trim().toLowerCase();
-        const filtered = entries.filter(e => `${e.method} ${e.url} ${e.summary} ${e.service}`.toLowerCase().includes(query));
+        const filtered = entries.filter(e => `${e.method} ${e.url} ${e.summary} ${e.service} ${this.labels[e.service] ?? ""}`.toLowerCase().includes(query));
         entries.splice(0, entries.length, ...filtered);
         if (!entries.some(e => e.id === this.selected))
             this.selected = entries[0]?.id ?? "";
@@ -163,12 +178,12 @@ export class CallConsole extends BaseElement {
                 button.addEventListener("click", () => { this.selected = entry.id; this.update(); this.dispatchEvent(new CustomEvent("call-selected", { bubbles: true, composed: true, detail: { id: entry.id } })); });
             }
             button.setAttribute("aria-current", String(entry.id === this.selected));
-            const labels = [callStatus(entry), entry.service, entry.summary, entry.pending ? "In progress" : `${Math.round(entry.durationMs)} ms`];
+            const labels = [callStatus(entry, this.failureRule), this.labels[entry.service] ?? entry.service, entry.summary, entry.pending ? "In progress" : `${Math.round(entry.durationMs)} ms`];
             const signature = JSON.stringify(labels);
             if (this.rowSignatures.get(button) !== signature) {
                 button.replaceChildren(...labels.map((text, index) => { const span = document.createElement("span"); span.textContent = text; span.className = ["state", "muted", "summary", "duration"][index]; if (index === 0) {
                     const icon = document.createElement("span");
-                    icon.innerHTML = boeStatusGlyph(entry.pending ? "active" : callFailed(entry) ? "failed" : entry.expected ? "skipped" : "done");
+                    icon.innerHTML = boeStatusGlyph(this.failureRule(entry) ? "failed" : entry.pending ? "active" : entry.expected ? "skipped" : "done");
                     span.prepend(icon);
                 } return span; }));
                 this.rowSignatures.set(button, signature);
@@ -184,13 +199,13 @@ export class CallConsole extends BaseElement {
         this.shadowRoot.querySelector("#count").textContent = `${entries.length} of ${this.model?.entries.length ?? 0}`;
         const empty = this.shadowRoot.querySelector("#list-empty");
         empty.hidden = entries.length > 0 || !!this.model && state === "connecting";
-        empty.textContent = !this.model ? "Connect a call controller to inspect requests." : state === "unavailable" ? "The /calls endpoint is unavailable. Start the agent, then reconnect." : state === "reconnecting" ? "Connection interrupted. Reconnect to load calls." : this.model.entries.length ? "No requests match these filters." : "No calls yet. New requests will appear here.";
+        empty.textContent = !this.model ? "Connect a call controller to inspect requests." : state === "unavailable" ? "Call history is unavailable. Reconnect when the service is ready." : state === "reconnecting" ? "Connection interrupted. Reconnect to load calls." : this.model.entries.length ? "No requests match these filters." : "No calls yet. New requests will appear here.";
         const entry = entries.find(e => e.id === this.selected);
         this.shadowRoot.querySelector('[data-copy="both"]').disabled = !entry;
         this.shadowRoot.querySelector("#inspector").hidden = !entry;
         this.shadowRoot.querySelector("#detail-empty").hidden = !!entry;
         this.shadowRoot.querySelector("#summary").textContent = entry?.summary ?? "";
-        this.shadowRoot.querySelector("#metadata").textContent = entry ? `${entry.service} · ${entry.method} · ${entry.pending ? "In progress" : `${entry.durationMs} ms`} · ${new Date(entry.startedAt).toLocaleTimeString()}` : "";
+        this.shadowRoot.querySelector("#metadata").textContent = entry ? `${this.labels[entry.service] ?? entry.service} · ${entry.method} · ${entry.pending ? "In progress" : `${entry.durationMs} ms`} · ${new Date(entry.startedAt).toLocaleTimeString()}` : "";
         const outcome = this.shadowRoot.querySelector("#outcome");
         outcome.hidden = !entry || !(entry.error || entry.rpcError || entry.expected || entry.pending);
         outcome.textContent = entry?.rpcError ? `Tool failed despite HTTP ${entry.status}: ${entry.rpcError}` : entry?.error ?? entry?.expected ?? (entry?.pending ? "Waiting for the response…" : "");

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

@@ -7,12 +7,13 @@ export interface CallConsoleTransport {
 /** Transport injection keeps networking out of the component. */
 export declare class CallConsoleController {
     readonly transport: CallConsoleTransport;
+    readonly maxEntries: number;
     entries: CallEntry[];
     connection: CallConnection;
     private listeners;
     private abort?;
     private close?;
-    constructor(transport: CallConsoleTransport);
+    constructor(transport: CallConsoleTransport, maxEntries?: number);
     subscribe(fn: () => void): () => void;
     private emit;
     apply(event: CallEvent): void;

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

@@ -1,23 +1,25 @@
 /** Transport injection keeps networking out of the component. */
 export class CallConsoleController {
     transport;
+    maxEntries;
     entries = [];
     connection = "connecting";
     listeners = new Set();
     abort;
     close;
-    constructor(transport) {
+    constructor(transport, maxEntries = 300) {
         this.transport = transport;
+        this.maxEntries = maxEntries;
     }
     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;
+            this.entries = event.entries.slice(0, this.maxEntries);
         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.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]).slice(0, this.maxEntries);
         this.emit();
     }
     async connect() {

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

@@ -11,8 +11,19 @@ export function createCallConsoleTransport(base = "/calls") {
                 events.addEventListener(type, event => {
                     try {
                         const data = JSON.parse(event.data);
-                        if (data.type === type)
-                            onEvent(data);
+                        if (data && typeof data === "object" && "type" in data) {
+                            if (data.type === type)
+                                onEvent(data);
+                        }
+                        else if (type === "call" && data && !Array.isArray(data)) {
+                            onEvent({ type: "call", entry: data });
+                        }
+                        else if (type === "snapshot" && (Array.isArray(data) || "entries" in data)) {
+                            onEvent({ type: "snapshot", entries: Array.isArray(data) ? data : data.entries });
+                        }
+                        else if (type === "clear") {
+                            onEvent({ type: "clear" });
+                        }
                     }
                     catch {
                         onConnection("reconnecting");

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

@@ -28,5 +28,5 @@ export type CallEvent = {
 };
 export type CallConnection = "connecting" | "live" | "reconnecting" | "unavailable";
 export declare const callFailed: (entry: CallEntry) => boolean;
-export declare const callStatus: (entry: CallEntry) => string;
+export declare const callStatus: (entry: CallEntry, isFailed?: (entry: CallEntry) => boolean) => string;
 export declare const formatCallHttp: (entry: CallEntry, side?: "request" | "response" | "both") => string;

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

@@ -1,5 +1,5 @@
-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 callFailed = (entry) => Boolean(entry.rpcError || (!entry.expected && (entry.error || entry.status === 0 || entry.status >= 400)));
+export const callStatus = (entry, isFailed = callFailed) => entry.rpcError ? "Tool error" : entry.expected && !isFailed(entry) ? "Expected" : isFailed(entry) ? "Failed" : entry.pending ? "Pending" : "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 ?? ""}`;

package/dist/patterns/comments/comment-thread.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeBrandInteractiveStyles, boeFocusRingShadow, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeFocusRingShadow, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-comment-thread";

package/dist/patterns/content-explorer/adapters/action-menu.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../../core/index.js";
 import { applyRovingTabindex, handleRovingKeydown } from "../../../foundations/a11y/index.js";
-import { boeFocusRingShadow, boeNeutralInteractiveStyles, } from "../../../foundations/tokens/index.js";
+import { boeFocusRingShadow, boeNeutralInteractiveStyles, } from "../../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../../foundations/motion/index.js";
 import { boePanel } from "../../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-explorer-action-menu";

package/dist/patterns/content-explorer/adapters/list.js

@@ -1,7 +1,7 @@
 import { resolveExplorerItemGesture, shouldActivateOnClick, shouldToggleOnEnter, } from "../types.js";
 import { formatItemMetaLine, itemSummarySignature } from "./item-summary.js";
 import { BaseElement } from "../../../core/index.js";
-import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../../foundations/motion/index.js";
 import { boePanel, boeRadius } from "../../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-explorer-list";

package/dist/patterns/content-explorer/adapters/table.js

@@ -1,7 +1,7 @@
 import { resolveExplorerItemGesture, shouldActivateOnClick, shouldToggleOnEnter, } from "../types.js";
 import { formatItemDate, formatItemOwner, formatItemShared, formatItemSize, itemSummarySignature, } from "./item-summary.js";
 import { BaseElement } from "../../../core/index.js";
-import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../../foundations/motion/index.js";
 import { boePanel, boeRadius } from "../../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-explorer-table";

package/dist/patterns/content-explorer/adapters/toolbar.js

@@ -1,7 +1,7 @@
 import { BaseElement } from "../../../core/index.js";
 import { SearchField, } from "../../../components/forms/search-field.js";
 import { applyRovingTabindex, handleRovingKeydown } from "../../../foundations/a11y/index.js";
-import { boeNeutralInteractiveStyles } from "../../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../../foundations/motion/index.js";
 import { boePanel } from "../../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-explorer-toolbar";

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

@@ -4,7 +4,7 @@ import { formatItemSize } from "../content-explorer/adapters/item-summary.js";
 import { DropZone } from "../../components/files/drop-zone.js";
 import { ProgressBar } from "../../components/feedback/progress-bar.js";
 import { BaseElement } from "../../core/index.js";
-import { DESIGN_SYSTEM_CHANGE_EVENT, resolveDesignIllustration, } from "../../foundations/tokens/index.js";
+import { DESIGN_SYSTEM_CHANGE_EVENT, resolveDesignIllustration, } from "../../foundations/tokens/registry.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-content-uploader";

package/dist/patterns/file-request/file-request-builder.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-file-request-builder";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")