@unofficialbox/box-open-elements 0.18.0 → 0.20.0

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

@@ -16,6 +16,8 @@ export class AgentChatController extends Controller {
     config;
     sendCounter = 0;
     activeAbortController = null;
+    finishActive;
+    resolving = new Set();
     constructor(config) {
         super(createInitialState());
         this.config = config;
@@ -31,7 +33,7 @@ export class AgentChatController extends Controller {
         if (!this.state.connected) {
             return;
         }
-        this.activeAbortController?.abort();
+        this.stop();
         this.activeAbortController = null;
         this.setState(createInitialState());
         this.emit("disconnected", undefined);
@@ -42,6 +44,7 @@ export class AgentChatController extends Controller {
     /** Abort the in-flight generation; whatever already streamed is kept. */
     stop() {
         this.activeAbortController?.abort();
+        this.finishActive?.();
     }
     /**
      * Send a user turn and stream the agent's reply. One send at a time: a
@@ -52,7 +55,7 @@ export class AgentChatController extends Controller {
         if (!this.state.connected || trimmed.length === 0) {
             return null;
         }
-        this.activeAbortController?.abort();
+        this.stop();
         const abortController = typeof AbortController === "function" ? new AbortController() : null;
         this.activeAbortController = abortController;
         this.sendCounter += 1;
@@ -70,6 +73,9 @@ export class AgentChatController extends Controller {
             role: "agent",
             body: "",
             status: "streaming",
+            startedAt: Date.now(),
+            blocks: [], trace: [], todos: [], options: [],
+            completeness: { status: "streaming", missing: [] },
             ...(this.config.agentName ? { actor: { name: this.config.agentName } } : {}),
             citations: [],
             proposals: [],
@@ -89,37 +95,81 @@ export class AgentChatController extends Controller {
             });
             this.emit("messagesChanged", { messages: this.state.messages });
         };
+        const sequences = new Set();
+        let highSequence = 0;
+        let done;
+        const missing = () => Array.from({ length: highSequence }, (_, i) => i + 1).filter(i => !sequences.has(i));
+        const upsert = (items, item) => item.id && items.some(i => i.id === item.id)
+            ? items.map(i => i.id === item.id ? item : i) : [...items, item];
         const onEvent = (event) => {
             const current = this.getMessage(agentMessage.id);
-            if (!current || current.status !== "streaming") {
+            if (!current || current.status !== "streaming" || abortController?.signal.aborted || turn !== this.sendCounter || done) {
                 return;
             }
+            if (event.seq !== undefined) {
+                if (!Number.isSafeInteger(event.seq) || event.seq < 1 || event.seq > 100000)
+                    throw new Error("Invalid stream sequence");
+                if (sequences.has(event.seq))
+                    return;
+                sequences.add(event.seq);
+                highSequence = Math.max(highSequence, event.seq);
+            }
+            let patch = {};
             if (event.kind === "delta") {
-                patchAgentMessage({ body: current.body + event.text });
+                patch = { body: current.body + event.text };
             }
             else if (event.kind === "citation") {
-                patchAgentMessage({ citations: [...current.citations, event.citation] });
+                patch = { citations: upsert(current.citations, event.citation) };
             }
-            else {
-                patchAgentMessage({ proposals: [...current.proposals, event.proposal] });
+            else if (event.kind === "proposal") {
+                patch = { proposals: upsert(current.proposals, event.proposal) };
+            }
+            else if (event.kind === "block") {
+                patch = { blocks: upsert(current.blocks ?? [], event.block) };
+            }
+            else if (event.kind === "trace") {
+                patch = { trace: upsert(current.trace ?? [], event.step) };
+            }
+            else if (event.kind === "todos") {
+                patch = { todos: event.todos };
+            }
+            else if (event.kind === "options") {
+                patch = { options: event.options };
             }
+            else if (event.kind === "context") {
+                patch = { context: event.context };
+            }
+            else if (event.kind === "done") {
+                done = event.status;
+            }
+            patchAgentMessage({ ...patch, completeness: { status: "streaming", missing: missing() } });
         };
+        let finished = false;
         const finish = (patch) => {
-            patchAgentMessage(patch);
+            if (finished)
+                return;
+            finished = true;
+            const gaps = missing();
+            patchAgentMessage({ ...patch, endedAt: Date.now(), completeness: {
+                    status: patch.status === "error" ? "error" : !done || gaps.length ? "incomplete" : done,
+                    missing: gaps,
+                } });
             // A superseded send must not clear the newer send's streaming flag.
             if (turn === this.sendCounter) {
                 this.setState({ ...this.state, streaming: false });
                 this.emit("streamingChanged", { streaming: false });
             }
         };
+        this.finishActive = () => finish({ status: "complete" });
         try {
             await this.config.transport.sendMessage({
                 body: trimmed,
+                messageId: agentMessage.id,
                 token: this.config.token,
                 onEvent,
                 ...(abortController ? { signal: abortController.signal } : {}),
             });
-            finish({ status: "complete" });
+            finish({ status: done === "error" ? "error" : "complete" });
         }
         catch (error) {
             if (abortController?.signal.aborted) {
@@ -129,42 +179,58 @@ export class AgentChatController extends Controller {
             else {
                 const message = error instanceof Error ? error.message : "The agent reply failed";
                 finish({ status: "error", errorMessage: message });
-                this.setState({ ...this.state, error: message });
-                this.emit("sendFailed", { message });
+                if (turn === this.sendCounter) {
+                    this.setState({ ...this.state, error: message });
+                    this.emit("sendFailed", { message });
+                }
             }
         }
         finally {
             if (this.activeAbortController === abortController) {
                 this.activeAbortController = null;
+                this.finishActive = undefined;
             }
         }
         return this.getMessage(agentMessage.id) ?? null;
     }
     /** Resolve a HITL proposal through the transport capability. */
-    async resolveAction(proposalId, decision, note) {
+    async resolveAction(proposalId, decision, note, messageId) {
         const transport = this.config.transport;
         if (!transport.resolveAction) {
             throw new Error("Agent-chat transport does not support resolveAction");
         }
-        const holder = this.state.messages.find(message => message.proposals.some(proposal => proposal.id === proposalId));
+        const holder = this.state.messages.find(message => (!messageId || message.id === messageId) &&
+            message.proposals.some(proposal => proposal.id === proposalId));
         const pending = holder?.proposals.find(proposal => proposal.id === proposalId);
-        if (!this.state.connected || !holder || !pending || pending.decision) {
+        const key = `${holder?.id}:${proposalId}`;
+        if (!this.state.connected || !holder || !pending || pending.decision || this.resolving.has(key)) {
             return null;
         }
+        const patch = (value) => {
+            this.setState({ ...this.state, messages: this.state.messages.map(m => m.id === holder.id ? {
+                    ...m, proposals: m.proposals.map(p => p.id === proposalId ? { ...p, ...value } : p),
+                } : m) });
+            this.emit("messagesChanged", { messages: this.state.messages });
+        };
+        this.resolving.add(key);
+        patch({ resolving: decision });
         try {
             // Called on the transport so class-based implementations keep `this`.
-            const resolved = await transport.resolveAction({
+            const response = await transport.resolveAction({
                 proposalId,
+                messageId: holder.id,
                 decision,
                 ...(note !== undefined ? { note } : {}),
                 token: this.config.token,
             });
+            const resolved = { ...pending, ...response, decision };
+            delete resolved.resolving;
             this.setState({
                 ...this.state,
                 messages: this.state.messages.map(message => message.id === holder.id
                     ? {
                         ...message,
-                        proposals: message.proposals.map(proposal => proposal.id === proposalId ? { ...proposal, ...resolved } : proposal),
+                        proposals: message.proposals.map(proposal => proposal.id === proposalId ? { ...pending, ...resolved, decision } : proposal),
                     }
                     : message),
             });
@@ -178,5 +244,15 @@ export class AgentChatController extends Controller {
             this.emit("sendFailed", { message });
             return null;
         }
+        finally {
+            this.resolving.delete(key);
+            const current = this.getMessage(holder.id)?.proposals.find(p => p.id === proposalId);
+            if (current?.resolving) {
+                const clean = { ...current };
+                delete clean.resolving;
+                this.setState({ ...this.state, messages: this.state.messages.map(m => m.id === holder.id ? { ...m, proposals: m.proposals.map(p => p.id === proposalId ? clean : p) } : m) });
+                this.emit("messagesChanged", { messages: this.state.messages });
+            }
+        }
     }
 }

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

@@ -1,3 +1,4 @@
 export * from "./types.js";
 export * from "./controller.js";
 export * from "./agent-chat.js";
+export * from "./ndjson.js";

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

@@ -4,3 +4,4 @@ export * from "./types.js";
 export * from "./controller.js";
 // Composed conversation surface
 export * from "./agent-chat.js";
+export * from "./ndjson.js";

package/dist/patterns/agent-chat/ndjson.d.ts

@@ -0,0 +1,5 @@
+/** Incremental UTF-8 decoding with a bounded line buffer and early-reader cleanup. */
+export declare function readNdjson<T = unknown>(stream: ReadableStream<Uint8Array>, options?: {
+    maxLineLength?: number;
+    signal?: AbortSignal;
+}): AsyncGenerator<T>;

package/dist/patterns/agent-chat/ndjson.js

@@ -0,0 +1,41 @@
+/** Incremental UTF-8 decoding with a bounded line buffer and early-reader cleanup. */
+export async function* readNdjson(stream, options = {}) {
+    const reader = stream.getReader();
+    const decoder = new TextDecoder("utf-8", { fatal: true });
+    const limit = options.maxLineLength ?? 1048576;
+    let buffer = "";
+    let finished = false;
+    const abort = () => { void reader.cancel(options.signal?.reason); };
+    options.signal?.addEventListener("abort", abort, { once: true });
+    try {
+        while (true) {
+            options.signal?.throwIfAborted();
+            const { value, done } = await reader.read();
+            options.signal?.throwIfAborted();
+            buffer += decoder.decode(value, { stream: !done });
+            let newline;
+            while ((newline = buffer.indexOf("\n")) !== -1) {
+                const line = buffer.slice(0, newline).trim();
+                buffer = buffer.slice(newline + 1);
+                if (line.length > limit)
+                    throw new Error("NDJSON line exceeds limit");
+                if (line)
+                    yield JSON.parse(line);
+            }
+            if (buffer.length > limit)
+                throw new Error("NDJSON line exceeds limit");
+            if (done) {
+                finished = true;
+                if (buffer.trim())
+                    yield JSON.parse(buffer);
+                break;
+            }
+        }
+    }
+    finally {
+        options.signal?.removeEventListener("abort", abort);
+        if (!finished)
+            await reader.cancel().catch(() => { });
+        reader.releaseLock();
+    }
+}

package/dist/patterns/agent-chat/types.d.ts

@@ -1,4 +1,15 @@
+import type { ResultBlock } from "../../components/collections/result-blocks.js";
+import type { RunStep } from "../run/types.js";
+import type { AgentTodo } from "../run/progress.js";
 export type AgentRole = "user" | "agent";
+export interface AgentPromptOption {
+    label: string;
+    prompt: string;
+}
+export interface AgentCompleteness {
+    status: "streaming" | "complete" | "needs_input" | "error" | "incomplete";
+    missing: number[];
+}
 export type AgentMessageStatus = "streaming" | "complete" | "error";
 /** Same shape as the timeline's evidence chips — deep-linkable supporting content. */
 export interface AgentCitation {
@@ -25,6 +36,8 @@ export interface AgentActionProposal {
     }>;
     /** Present once a decision has landed. */
     decision?: AgentActionDecision;
+    outcome?: "done" | "failed";
+    resolving?: AgentActionDecision;
     note?: string;
 }
 export interface AgentChatMessage {
@@ -39,11 +52,21 @@ export interface AgentChatMessage {
     timestamp?: string;
     citations: AgentCitation[];
     proposals: AgentActionProposal[];
+    blocks?: ResultBlock[];
+    trace?: RunStep[];
+    todos?: AgentTodo[];
+    options?: AgentPromptOption[];
+    context?: Record<string, unknown>;
+    completeness?: AgentCompleteness;
+    startedAt?: number;
+    endedAt?: number;
     /** Human-readable failure detail when `status` is "error". */
     errorMessage?: string;
 }
 /** Typed stream events a transport delivers while a reply generates. */
 export type AgentStreamEvent = {
+    seq?: number;
+} & ({
     kind: "delta";
     text: string;
 } | {
@@ -52,8 +75,27 @@ export type AgentStreamEvent = {
 } | {
     kind: "proposal";
     proposal: AgentActionProposal;
-};
+} | {
+    kind: "block";
+    block: ResultBlock;
+} | {
+    kind: "trace";
+    step: RunStep;
+} | {
+    kind: "todos";
+    todos: AgentTodo[];
+} | {
+    kind: "options";
+    options: AgentPromptOption[];
+} | {
+    kind: "context";
+    context: Record<string, unknown>;
+} | {
+    kind: "done";
+    status: "complete" | "needs_input" | "error";
+});
 export interface AgentSendRequest {
+    messageId: string;
     body: string;
     token: string;
     signal?: AbortSignal;
@@ -61,6 +103,7 @@ export interface AgentSendRequest {
     onEvent: (event: AgentStreamEvent) => void;
 }
 export interface AgentResolveActionRequest {
+    messageId?: string;
     proposalId: string;
     decision: AgentActionDecision;
     note?: string;

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

@@ -0,0 +1,28 @@
+import { BaseElement } from "../../core/element.js";
+import type { AgentWorkspaceController } from "./controller.js";
+export declare class AgentWorkspace extends BaseElement {
+    static readonly tagName = "box-agent-workspace";
+    static get observedAttributes(): string[];
+    private model;
+    private unsubscribe?;
+    private observer?;
+    private mobile;
+    private chatsOpen;
+    private detailsOpen;
+    private initialized;
+    private renderedActive;
+    private sessions;
+    get workspaceController(): AgentWorkspaceController | null;
+    set workspaceController(value: AgentWorkspaceController | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private listen;
+    private resize;
+    private storageKey;
+    private toggle;
+    private closeDrawers;
+    private syncPanes;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

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

@@ -0,0 +1,215 @@
+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 { 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"]; }
+    model = null;
+    unsubscribe;
+    observer;
+    mobile = false;
+    chatsOpen = true;
+    detailsOpen = false;
+    initialized = false;
+    renderedActive = null;
+    sessions = new Map();
+    get workspaceController() { return this.model; }
+    set workspaceController(value) {
+        this.unsubscribe?.();
+        this.model = value;
+        if (this.isConnected)
+            this.listen();
+        if (this.isRendered)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.listen();
+        this.resize();
+        if (typeof ResizeObserver !== "undefined") {
+            this.observer = new ResizeObserver(() => this.resize());
+            this.observer.observe(this);
+        }
+    }
+    disconnectedCallback() { this.unsubscribe?.(); this.observer?.disconnect(); }
+    listen() { this.unsubscribe?.(); this.unsubscribe = this.model?.subscribe(() => this.update()); }
+    resize() {
+        const width = this.getBoundingClientRect().width || 1200;
+        const mobile = width < 900;
+        if (!this.initialized || mobile !== this.mobile) {
+            this.chatsOpen = !mobile;
+            this.detailsOpen = width >= 1200;
+            if (!mobile) {
+                try {
+                    const saved = JSON.parse(localStorage.getItem(this.storageKey()) ?? "null");
+                    if (saved && typeof saved.chats === "boolean" && typeof saved.details === "boolean") {
+                        this.chatsOpen = saved.chats;
+                        this.detailsOpen = saved.details;
+                    }
+                }
+                catch { }
+            }
+            this.mobile = mobile;
+            this.initialized = true;
+        }
+        this.syncPanes();
+    }
+    storageKey() { return `boe-workspace:${this.getAttribute("viewer-key") ?? "default"}`; }
+    toggle(pane) {
+        if (pane === "chats") {
+            this.chatsOpen = !this.chatsOpen;
+            if (this.mobile)
+                this.detailsOpen = false;
+        }
+        else {
+            this.detailsOpen = !this.detailsOpen;
+            if (this.mobile)
+                this.chatsOpen = false;
+        }
+        if (!this.mobile)
+            try {
+                localStorage.setItem(this.storageKey(), JSON.stringify({ chats: this.chatsOpen, details: this.detailsOpen }));
+            }
+            catch { }
+        this.syncPanes();
+        if (this.mobile && (this.chatsOpen || this.detailsOpen))
+            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;
+        this.toggleAttribute("data-mobile", this.mobile);
+        for (const [pane, open] of [["chats", this.chatsOpen], ["details", this.detailsOpen]]) {
+            const el = this.shadowRoot.getElementById(pane);
+            el.inert = !open;
+            el.toggleAttribute("data-open", open);
+            if (this.mobile && open) {
+                el.setAttribute("role", "dialog");
+                el.setAttribute("aria-modal", "true");
+                el.setAttribute("aria-label", pane === "chats" ? "Conversations" : "Conversation details");
+            }
+            else {
+                el.removeAttribute("role");
+                el.removeAttribute("aria-modal");
+            }
+            this.shadowRoot.querySelector(`[data-toggle="${pane}"]`).setAttribute("aria-expanded", String(open));
+        }
+        const overlaid = this.mobile && (this.chatsOpen || this.detailsOpen);
+        this.shadowRoot.querySelector("#conversation").inert = overlaid;
+        this.shadowRoot.querySelector("#scrim").hidden = !overlaid;
+        for (const chat of this.sessions.values())
+            chat.toggleAttribute("hide-citations", this.detailsOpen);
+    }
+    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>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}
+    box-agent-chat::part(thread){flex:1;min-height:0;max-block-size:none;align-content:start}
+    button,a{font:inherit;color:inherit} button{cursor:pointer;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:999px;background:var(--boe-token-surface-surface,#fff);min-height:32px;padding:.3rem .8rem;font-size:13px;font-weight:600}
+    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}
+    [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>
+    <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>`;
+    }
+    setupListeners() {
+        this.shadowRoot.querySelector("#new").addEventListener("click", () => { this.model?.newChat(); if (this.mobile)
+            this.closeDrawers(); });
+        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.addEventListener("keydown", event => {
+            const e = event;
+            if (e.key === "Escape" && this.mobile) {
+                e.preventDefault();
+                this.closeDrawers();
+            }
+            if (e.key === "Tab" && this.mobile && (this.chatsOpen || this.detailsOpen))
+                trapTabKey(e, this.shadowRoot.getElementById(this.chatsOpen ? "chats" : "details"));
+        });
+    }
+    update() {
+        if (!this.isRendered)
+            return;
+        const list = this.shadowRoot.querySelector("#list");
+        const activeRow = this.shadowRoot.activeElement?.getAttribute("data-chat-id");
+        list.replaceChildren();
+        for (const summary of this.model?.summaries ?? []) {
+            const b = document.createElement("button");
+            b.setAttribute("part", "chat");
+            b.dataset.chatId = summary.id;
+            b.textContent = summary.title;
+            if (summary.id === this.model?.activeId)
+                b.setAttribute("aria-current", "page");
+            const small = document.createElement("small");
+            small.textContent = summary.status;
+            b.append(small);
+            b.addEventListener("click", () => { this.model?.select(summary.id); if (this.mobile)
+                this.closeDrawers(); });
+            list.append(b);
+            if (summary.id === activeRow)
+                b.focus({ preventScroll: true });
+        }
+        for (const [id, element] of this.sessions)
+            if (!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 ?? []) {
+            let element = this.sessions.get(chat.id);
+            if (!element) {
+                element = new AgentChat();
+                element.chatController = chat.controller;
+                this.sessions.set(chat.id, element);
+                this.shadowRoot.querySelector("#sessions").append(element);
+            }
+            element.hidden = chat.id !== this.model?.activeId;
+            element.inert = element.hidden;
+        }
+        const details = this.model?.details;
+        this.shadowRoot.querySelector("#context").textContent = details?.context ? Object.entries(details.context).map(([key, value]) => `${key}: ${typeof value === "object" ? JSON.stringify(value) : String(value)}`).join("\n") : "";
+        const approvals = this.shadowRoot.querySelector("#approvals");
+        approvals.replaceChildren();
+        for (const { messageId, proposal } of details?.approvals ?? []) {
+            const b = document.createElement("button");
+            b.textContent = `${proposal.title} — ${proposal.outcome === "failed" ? "Approved · didn't complete" : proposal.decision ?? "Needs your approval"}`;
+            b.addEventListener("click", () => { if (this.mobile)
+                this.closeDrawers(); this.sessions.get(this.model?.activeId ?? "")?.focusProposal(messageId, proposal.id); });
+            approvals.append(b);
+        }
+        const sources = this.shadowRoot.querySelector("#sources");
+        sources.replaceChildren();
+        for (const source of details?.sources ?? []) {
+            const el = document.createElement(source.href && isSafeHref(source.href) ? "a" : "span");
+            el.textContent = source.label;
+            if (el instanceof HTMLAnchorElement) {
+                el.href = source.href;
+                el.target = "_blank";
+                el.rel = "noopener noreferrer";
+            }
+            sources.append(el);
+        }
+        this.syncPanes();
+        if (this.renderedActive !== this.model?.activeId) {
+            this.renderedActive = this.model?.activeId ?? null;
+            this.sessions.get(this.renderedActive ?? "")?.focusComposer();
+        }
+    }
+}
+AgentWorkspace.register();

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

@@ -0,0 +1,38 @@
+import { AgentChatController } from "../agent-chat/controller.js";
+import type { AgentActionProposal, AgentCitation, AgentChatState } from "../agent-chat/types.js";
+export interface WorkspaceChat {
+    id: string;
+    controller: AgentChatController;
+}
+export interface WorkspaceSummary {
+    id: string;
+    title: string;
+    status: string;
+}
+export interface WorkspaceDetails {
+    context?: Record<string, unknown>;
+    approvals: {
+        messageId: string;
+        proposal: AgentActionProposal;
+    }[];
+    sources: AgentCitation[];
+}
+export declare const conversationTitle: (body: string, max?: number) => string;
+export declare function conversationDetails(state: Readonly<AgentChatState>): WorkspaceDetails;
+/** Owns independent sessions. Selecting a chat never disconnects another one. */
+export declare class AgentWorkspaceController {
+    private readonly createSession;
+    readonly chats: WorkspaceChat[];
+    activeId: string | null;
+    private seq;
+    private listeners;
+    private subscriptions;
+    constructor(createSession: () => AgentChatController);
+    subscribe(listener: () => void): () => void;
+    private emit;
+    newChat(): WorkspaceChat;
+    select(id: string): void;
+    get summaries(): WorkspaceSummary[];
+    get details(): WorkspaceDetails;
+    destroy(): void;
+}