@unofficialbox/box-open-elements 0.19.0 → 0.21.0

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;
+}

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,20 @@
+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;
+    private clearing;
+    private rowSignatures;
+    get callController(): CallConsoleController | null;
+    set callController(value: CallConsoleController | null);
+    private listen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private get filters();
+    protected update(): void;
+}