@unofficialbox/box-open-elements 0.19.0 → 0.20.0

package/dist/foundations/motion/behaviors.js

@@ -0,0 +1,24 @@
+import { boeMotionDuration, boeMotionEasing } from "./tokens.js";
+export const boeMotionStagger = "var(--boe-profile-motion-stagger, 50ms)";
+export const boeEntranceKeyframes = `
+@keyframes boe-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes boe-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
+@keyframes boe-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes boe-status-check { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
+@keyframes boe-status-spin { to { transform: rotate(360deg); } }
+`;
+export const boeEntrance = (name = "rise") => `animation: boe-${name} ${boeMotionDuration.arrival} ${boeMotionEasing.enter} both;`;
+export const boeStaggerStyles = `animation-delay: calc(var(--i, 0) * ${boeMotionStagger});`;
+/** Put padding on a grandchild, not the collapsible child. Pair with inert. */
+export const boeDisclosureStyles = (selector = ".boe-disclosure") => `
+${selector} { display: grid; grid-template-rows: 0fr; transition: grid-template-rows ${boeMotionDuration.panel} ${boeMotionEasing.enter}; }
+${selector}[data-open] { grid-template-rows: 1fr; }
+${selector} > * { min-height: 0; overflow: hidden; padding-block: 0; }
+`;
+/** Include in document and shadow styles: media rules do not cross shadow roots. */
+export const boeReducedMotionPolicy = `
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
+    animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
+}
+`;

package/dist/foundations/motion/index.d.ts

@@ -1,2 +1,4 @@
 export { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, boeTransition, } from "./tokens.js";
 export type { BoeMotionDuration, BoeMotionEasing } from "./tokens.js";
+export * from "./behaviors.js";
+export * from "./scroll-pin.js";

package/dist/foundations/motion/index.js

@@ -1 +1,3 @@
 export { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, boeTransition, } from "./tokens.js";
+export * from "./behaviors.js";
+export * from "./scroll-pin.js";

package/dist/foundations/motion/scroll-pin.d.ts

@@ -0,0 +1,19 @@
+/** Scroll following is changed by user intent, never by resize-induced scroll events. */
+export declare class ScrollPinController {
+    private readonly viewport;
+    private readonly onChange;
+    pinned: boolean;
+    private cleanup;
+    private observer?;
+    private pointer;
+    private lastTop;
+    private touchY;
+    constructor(viewport: HTMLElement, onChange?: (showJump: boolean) => void);
+    connect(content?: Element): void;
+    private atBottom;
+    private notify;
+    unpin(): void;
+    contentChanged(newMessage?: boolean): void;
+    jump(): void;
+    disconnect(): void;
+}

package/dist/foundations/motion/scroll-pin.js

@@ -0,0 +1,60 @@
+/** Scroll following is changed by user intent, never by resize-induced scroll events. */
+export class ScrollPinController {
+    viewport;
+    onChange;
+    pinned = true;
+    cleanup = [];
+    observer;
+    pointer = false;
+    lastTop = 0;
+    touchY = 0;
+    constructor(viewport, onChange = () => { }) {
+        this.viewport = viewport;
+        this.onChange = onChange;
+    }
+    connect(content = this.viewport) {
+        this.disconnect();
+        const on = (kind, fn) => {
+            this.viewport.addEventListener(kind, fn);
+            this.cleanup.push(() => this.viewport.removeEventListener(kind, fn));
+        };
+        on("wheel", e => { if (e.deltaY < 0)
+            this.unpin(); });
+        on("keydown", e => { if (["ArrowUp", "PageUp", "Home"].includes(e.key))
+            this.unpin(); });
+        on("touchstart", e => { this.touchY = e.touches[0]?.clientY ?? 0; });
+        on("touchmove", e => { const y = e.touches[0]?.clientY ?? this.touchY; if (y > this.touchY)
+            this.unpin(); this.touchY = y; });
+        on("pointerdown", () => { this.pointer = true; this.lastTop = this.viewport.scrollTop; });
+        const release = () => { this.pointer = false; };
+        this.viewport.ownerDocument.addEventListener("pointerup", release);
+        this.cleanup.push(() => this.viewport.ownerDocument.removeEventListener("pointerup", release));
+        on("scroll", () => {
+            if (this.pointer && this.viewport.scrollTop < this.lastTop)
+                this.unpin();
+            this.lastTop = this.viewport.scrollTop;
+            if (this.atBottom())
+                this.pinned = true;
+            this.notify();
+        });
+        if (typeof ResizeObserver !== "undefined") {
+            this.observer = new ResizeObserver(() => this.contentChanged());
+            this.observer.observe(this.viewport);
+            if (content !== this.viewport)
+                this.observer.observe(content);
+        }
+    }
+    atBottom() { return this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop < 40; }
+    notify() { this.onChange(!this.pinned && !this.atBottom()); }
+    unpin() { this.pinned = false; this.notify(); }
+    contentChanged(newMessage = false) { if (newMessage)
+        this.pinned = true; if (this.pinned)
+        this.viewport.scrollTop = this.viewport.scrollHeight; this.notify(); }
+    jump() {
+        this.pinned = true;
+        const reduced = this.viewport.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        this.viewport.scrollTo?.({ top: this.viewport.scrollHeight, behavior: reduced ? "instant" : "smooth" });
+        this.onChange(false);
+    }
+    disconnect() { this.cleanup.forEach(fn => fn()); this.cleanup = []; this.observer?.disconnect(); }
+}

package/dist/foundations/motion/tokens.d.ts

@@ -6,6 +6,8 @@
  * prefers-reduced-motion policy is one place to update.
  */
 export declare const boeMotionDuration: {
+    readonly arrival: "var(--boe-profile-motion-arrival, 200ms)";
+    readonly panel: "var(--boe-profile-motion-panel, 320ms)";
     /** Quick accent transitions (charts, micro-feedback) */
     readonly fast: "var(--boe-profile-motion-fast, 120ms)";
     /**

package/dist/foundations/motion/tokens.js

@@ -6,6 +6,8 @@
  * prefers-reduced-motion policy is one place to update.
  */
 export const boeMotionDuration = {
+    arrival: "var(--boe-profile-motion-arrival, 200ms)",
+    panel: "var(--boe-profile-motion-panel, 320ms)",
     /** Quick accent transitions (charts, micro-feedback) */
     fast: "var(--boe-profile-motion-fast, 120ms)",
     /**

package/dist/foundations/profiles/registry.d.ts

@@ -52,6 +52,9 @@ export declare const DESIGN_PROFILE_VARIABLES: {
         readonly primaryFocus: "--boe-profile-shadow-primary-focus";
     };
     readonly motion: {
+        readonly arrival: "--boe-profile-motion-arrival";
+        readonly panel: "--boe-profile-motion-panel";
+        readonly stagger: "--boe-profile-motion-stagger";
         readonly fast: "--boe-profile-motion-fast";
         readonly interactive: "--boe-profile-motion-interactive";
         readonly medium: "--boe-profile-motion-medium";

package/dist/foundations/profiles/registry.js

@@ -51,6 +51,9 @@ export const DESIGN_PROFILE_VARIABLES = {
         primaryFocus: "--boe-profile-shadow-primary-focus",
     },
     motion: {
+        arrival: "--boe-profile-motion-arrival",
+        panel: "--boe-profile-motion-panel",
+        stagger: "--boe-profile-motion-stagger",
         fast: "--boe-profile-motion-fast",
         interactive: "--boe-profile-motion-interactive",
         medium: "--boe-profile-motion-medium",

package/dist/foundations/profiles/types.d.ts

@@ -50,6 +50,9 @@ export interface DesignProfileElevation {
     primaryFocus?: string;
 }
 export interface DesignProfileMotion {
+    arrival?: string;
+    panel?: string;
+    stagger?: string;
     fast?: string;
     interactive?: string;
     medium?: string;

package/dist/foundations/status/index.d.ts

@@ -0,0 +1,6 @@
+export type StatusKind = "pending" | "active" | "done" | "warning" | "failed" | "skipped";
+export declare const toStatusKind: (status: string) => StatusKind;
+export declare const statusLabel: (kind: StatusKind) => string;
+/** Decorative markup. Pair with visible words or the StatusIcon component. */
+export declare const boeStatusGlyph: (kind: StatusKind) => string;
+export declare const boeStatusStyles = "\n.boe-status { flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; }\n.boe-status[data-kind=\"active\"] { color: var(--boe-token-surface-surface-brand, #0061d5); animation: boe-status-spin .8s linear infinite; }\n.boe-status[data-kind=\"active\"] circle { opacity: .25; }\n.boe-status[data-kind=\"done\"] { color: var(--boe-token-text-status-text-success, #187657); }\n.boe-status[data-kind=\"warning\"] { color: var(--boe-token-text-status-text-warning, #946400); }\n.boe-status[data-kind=\"failed\"] { color: var(--boe-token-text-status-text-error, #c52a46); }\n.boe-status[data-kind=\"skipped\"] circle { stroke-dasharray: 2 2; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) circle { fill: currentColor; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) path { stroke: var(--boe-token-surface-surface, #fff); stroke-linecap: round; }\n.boe-status[data-kind=\"done\"] { animation: boe-pop 200ms ease-out both; }\n.boe-status[data-kind=\"done\"] path { stroke-dasharray: 20; animation: boe-status-check 200ms ease-out both; }\n";

package/dist/foundations/status/index.js

@@ -0,0 +1,33 @@
+const mappings = {
+    pending: "pending", info: "pending", active: "active", running: "active", in_progress: "active",
+    done: "done", succeeded: "done", completed: "done", pass: "done", approved: "done",
+    warning: "warning", warn: "warning", failed: "failed", fail: "failed", error: "failed",
+    skipped: "skipped", rejected: "skipped",
+};
+export const toStatusKind = (status) => mappings[status] ?? "pending";
+export const statusLabel = (kind) => ({
+    pending: "Pending", active: "In progress", done: "Done", warning: "Done with a warning",
+    failed: "Failed", skipped: "Skipped",
+})[kind];
+/** Decorative markup. Pair with visible words or the StatusIcon component. */
+export const boeStatusGlyph = (kind) => {
+    const state = toStatusKind(kind);
+    const path = state === "done" ? '<path d="m4 8 3 3 5-6"/>'
+        : state === "failed" ? '<path d="m5 5 6 6m0-6-6 6"/>'
+            : state === "warning" ? '<path d="M5 8h6"/>'
+                : state === "active" ? '<path d="M8 1a7 7 0 0 1 7 7"/>' : "";
+    return `<svg class="boe-status" data-kind="${state}" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="7"/>${path}</svg>`;
+};
+export const boeStatusStyles = `
+.boe-status { flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; }
+.boe-status[data-kind="active"] { color: var(--boe-token-surface-surface-brand, #0061d5); animation: boe-status-spin .8s linear infinite; }
+.boe-status[data-kind="active"] circle { opacity: .25; }
+.boe-status[data-kind="done"] { color: var(--boe-token-text-status-text-success, #187657); }
+.boe-status[data-kind="warning"] { color: var(--boe-token-text-status-text-warning, #946400); }
+.boe-status[data-kind="failed"] { color: var(--boe-token-text-status-text-error, #c52a46); }
+.boe-status[data-kind="skipped"] circle { stroke-dasharray: 2 2; }
+.boe-status:is([data-kind="done"], [data-kind="warning"], [data-kind="failed"]) circle { fill: currentColor; }
+.boe-status:is([data-kind="done"], [data-kind="warning"], [data-kind="failed"]) path { stroke: var(--boe-token-surface-surface, #fff); stroke-linecap: round; }
+.boe-status[data-kind="done"] { animation: boe-pop 200ms ease-out both; }
+.boe-status[data-kind="done"] path { stroke-dasharray: 20; animation: boe-status-check 200ms ease-out both; }
+`;

package/dist/index.d.ts

@@ -134,3 +134,13 @@ export * from "./patterns/task/index.js";
 export * from "./patterns/governance/index.js";
 export * from "./patterns/insights/index.js";
 export * from "./element-maps.js";
+export * from "./components/feedback/status-icon.js";
+export * from "./components/collections/fact-list.js";
+export * from "./components/collections/check-list.js";
+export * from "./components/collections/document-list.js";
+export * from "./components/collections/result-blocks.js";
+export * from "./patterns/run/run-summary.js";
+export * from "./patterns/agent-workspace/index.js";
+export * from "./patterns/call-console/index.js";
+export * from "./foundations/status/index.js";
+export * from "./patterns/run/progress.js";

package/dist/index.js

@@ -148,3 +148,13 @@ export * from "./patterns/task/index.js";
 export * from "./patterns/governance/index.js";
 export * from "./patterns/insights/index.js";
 export * from "./element-maps.js";
+export * from "./components/feedback/status-icon.js";
+export * from "./components/collections/fact-list.js";
+export * from "./components/collections/check-list.js";
+export * from "./components/collections/document-list.js";
+export * from "./components/collections/result-blocks.js";
+export * from "./patterns/run/run-summary.js";
+export * from "./patterns/agent-workspace/index.js";
+export * from "./patterns/call-console/index.js";
+export * from "./foundations/status/index.js";
+export * from "./patterns/run/progress.js";

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

@@ -16,6 +16,15 @@ export declare class AgentChat extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
     private controller;
+    private readonly scope;
+    private composing;
+    private scrollPin?;
+    private resizeObserver?;
+    private messageCount;
+    private jumpEl;
+    focusComposer(): void;
+    proposalAnchor(messageId: string, proposalId: string): string;
+    focusProposal(messageId: string, proposalId: string): void;
     private ownsController;
     private pendingStart;
     private unsubscribeFns;

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

@@ -3,6 +3,11 @@ import { isSafeHref } from "../internal/safe-href.js";
 import { BaseElement } from "../../core/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+import { ScrollPinController, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { boeStatusGlyph, boeStatusStyles } from "../../foundations/status/index.js";
+import { ResultBlocks, resultDocumentIds } from "../../components/collections/result-blocks.js";
+import { RunSummary } from "../run/run-summary.js";
+let chatInstance = 0;
 const DEFAULT_TAG_NAME = "box-agent-chat";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")
@@ -365,9 +370,22 @@ const elementStyles = `
 export class AgentChat extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["agent-name", "heading", "placeholder", "token"];
+        return ["agent-name", "heading", "placeholder", "token", "hidden", "hide-citations"];
     }
     controller = null;
+    scope = `boe-chat-${++chatInstance}`;
+    composing = false;
+    scrollPin;
+    resizeObserver;
+    messageCount = 0;
+    jumpEl;
+    focusComposer() { this.inputEl?.focus({ preventScroll: true }); }
+    proposalAnchor(messageId, proposalId) { return `${this.scope}-${encodeURIComponent(messageId)}-${encodeURIComponent(proposalId)}`; }
+    focusProposal(messageId, proposalId) {
+        const card = this.shadowRoot?.getElementById(this.proposalAnchor(messageId, proposalId));
+        card?.scrollIntoView({ block: "nearest" });
+        card?.focus({ preventScroll: true });
+    }
     ownsController = false;
     pendingStart = false;
     unsubscribeFns = [];
@@ -425,6 +443,8 @@ export class AgentChat extends BaseElement {
         this.adoptController(value);
     }
     attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "hidden" && newValue === null && this.isRendered)
+            this.focusComposer();
         if (name === "token") {
             this.scheduleStart();
         }
@@ -442,10 +462,26 @@ export class AgentChat extends BaseElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        if (this.controller && !this.ownsController && this.unsubscribeFns.length === 0)
+            this.subscribeToController(this.controller);
+        this.scrollPin?.connect();
+        if (typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver(() => this.scrollPin?.contentChanged());
+            this.resizeObserver.observe(this.threadEl);
+            for (const child of Array.from(this.threadEl.children))
+                this.resizeObserver.observe(child);
+        }
         this.scheduleStart();
     }
     disconnectedCallback() {
-        this.teardownController();
+        this.scrollPin?.disconnect();
+        this.resizeObserver?.disconnect();
+        if (this.ownsController)
+            this.teardownController();
+        else {
+            this.unsubscribeFns.forEach(fn => fn());
+            this.unsubscribeFns = [];
+        }
     }
     /** Send the composer's contents (or an explicit body) as a user turn. */
     async send(body) {
@@ -455,11 +491,13 @@ export class AgentChat extends BaseElement {
         }
         // Clear only once the controller has accepted the turn, so a refused
         // send (no controller, or a disconnected session) never loses typing.
-        const sent = await this.controller?.send(text);
-        if (sent && body === undefined && this.inputEl) {
+        const accepted = this.controller?.getState().connected;
+        const sending = this.controller?.send(text);
+        if (accepted && body === undefined && this.inputEl) {
             this.inputEl.value = "";
             this.syncComposer();
         }
+        await sending;
     }
     /** Stop the in-flight generation; the partial reply is kept. */
     stop() {
@@ -558,6 +596,13 @@ export class AgentChat extends BaseElement {
         const canResolve = Boolean(this.controller?.config.transport.resolveAction);
         return message.proposals
             .map(proposal => {
+            if (proposal.decision) {
+                const failed = proposal.outcome === "failed";
+                return `<div part="proposal" tabindex="-1" id="${this.proposalAnchor(message.id, proposal.id)}" data-proposal-id="${escapeHtml(proposal.id)}" data-decision="${escapeHtml(proposal.decision)}" ${failed ? 'role="alert"' : ""}>
+          <span part="decision">${boeStatusGlyph(failed ? "failed" : proposal.decision === "approved" ? "done" : "skipped")}${proposal.decision === "approved" ? failed ? "Approved · didn't complete" : "Approved" : "Rejected"} · <span part="proposal-title">${escapeHtml(proposal.title)}</span></span>
+          ${proposal.note ? `<p part="proposal-note">${escapeHtml(proposal.note)}</p>` : ""}
+          ${failed ? `<button part="retry" data-message-id="${escapeHtml(message.id)}">Try again</button>` : ""}</div>`;
+            }
             const params = (proposal.params ?? [])
                 .map(param => `
               <dt part="param-label">${escapeHtml(param.label)}</dt>
@@ -567,20 +612,22 @@ export class AgentChat extends BaseElement {
             const actions = canResolve && !proposal.decision
                 ? `
               <div part="proposal-actions">
-                <button type="button" part="proposal-action" data-action="approve" data-proposal-id="${escapeHtml(proposal.id)}">Approve</button>
-                <button type="button" part="proposal-action" data-action="reject" data-proposal-id="${escapeHtml(proposal.id)}">Reject</button>
-                <button type="button" part="proposal-action" data-action="modify" data-proposal-id="${escapeHtml(proposal.id)}">Modify</button>
+                <button type="button" part="proposal-action" data-action="approve" data-proposal-id="${escapeHtml(proposal.id)}" ${proposal.resolving ? "disabled" : ""} aria-busy="${proposal.resolving === "approved"}">${proposal.resolving === "approved" ? boeStatusGlyph("active") : ""}Approve</button>
+                <button type="button" part="proposal-action" data-action="reject" data-proposal-id="${escapeHtml(proposal.id)}" ${proposal.resolving ? "disabled" : ""} aria-busy="${proposal.resolving === "rejected"}">${proposal.resolving === "rejected" ? boeStatusGlyph("active") : ""}Reject</button>
+                <button type="button" part="proposal-action" data-action="modify" data-proposal-id="${escapeHtml(proposal.id)}" ${proposal.resolving ? "disabled" : ""}>Modify</button>
               </div>
             `
                 : "";
             return `
-          <div part="proposal" data-proposal-id="${escapeHtml(proposal.id)}"${proposal.decision ? ` data-decision="${escapeHtml(proposal.decision)}"` : ""}>
+          <div part="proposal" tabindex="-1" id="${this.proposalAnchor(message.id, proposal.id)}" data-proposal-id="${escapeHtml(proposal.id)}">
+            <span>${boeStatusGlyph("pending")} Needs your approval</span>
             <span part="proposal-title">${escapeHtml(proposal.title)}</span>
             ${proposal.summary ? `<p part="proposal-summary">${escapeHtml(proposal.summary)}</p>` : ""}
             ${params ? `<dl part="proposal-params">${params}</dl>` : ""}
             ${proposal.decision ? `<span part="decision">${proposal.decision === "approved" ? "Approved" : "Rejected"}</span>` : ""}
             ${proposal.note ? `<p part="proposal-note">${escapeHtml(proposal.note)}</p>` : ""}
             ${actions}
+            <p part="proposal-note">To change it, reply with the new values.</p>
           </div>
         `;
         })
@@ -589,7 +636,8 @@ export class AgentChat extends BaseElement {
     messageInnerHtml(message) {
         const name = message.role === "user" ? "You" : (message.actor?.name ?? this.agentName);
         const initials = message.actor?.initials ?? initialsOf(name);
-        const citations = message.citations
+        const documentIds = resultDocumentIds(message.blocks ?? []);
+        const citations = (this.hasAttribute("hide-citations") ? [] : message.citations.filter(c => !documentIds.includes(c.id)))
             .map(citation => this.citationHtml(message.id, citation))
             .join("");
         return `
@@ -597,10 +645,14 @@ export class AgentChat extends BaseElement {
         <span part="avatar" aria-hidden="true">${escapeHtml(initials)}</span>
         <span part="author">${escapeHtml(name)}</span>
       </div>
-      <p part="body">${escapeHtml(message.body)}${message.status === "streaming" ? `<span part="caret" aria-hidden="true"></span>` : ""}</p>
+      ${message.role === "agent" ? '<box-run-summary></box-run-summary>' : ""}
+      <p part="body">${escapeHtml(message.body)}${message.status === "streaming" && !message.blocks?.length ? `<span part="caret" aria-hidden="true"></span>` : ""}</p>
+      <box-result-blocks></box-result-blocks>
+      ${message.completeness?.status === "incomplete" ? '<p part="incomplete" role="status">This reply may be incomplete.</p>' : ""}
       ${message.status === "error" && message.errorMessage ? `<p part="error" role="alert">${escapeHtml(message.errorMessage)}</p>` : ""}
       ${citations ? `<div part="citations">${citations}</div>` : ""}
       ${this.proposalHtml(message)}
+      ${message.proposals.some(p => p.outcome === "failed") ? "" : (message.options ?? []).map((o, i) => `<button part="option" data-option="${i}">${escapeHtml(o.label)}</button>`).join("")}
     `;
     }
     /**
@@ -620,7 +672,12 @@ export class AgentChat extends BaseElement {
             },
             agentName: this.agentName,
             citations: message.citations.map(({ id, href, label }) => ({ id, href, label })),
-            proposals: message.proposals.map(({ id, title, summary, params, decision, note }) => ({
+            hideCitations: this.hasAttribute("hide-citations"),
+            blocks: message.blocks,
+            completeness: message.completeness?.status,
+            options: message.options,
+            proposals: message.proposals.map(({ id, title, summary, params, decision, note, outcome, resolving }) => ({
+                outcome, resolving,
                 id,
                 title,
                 summary,
@@ -656,21 +713,38 @@ export class AgentChat extends BaseElement {
         body.insertBefore(document.createTextNode(message.body), body.firstChild);
     }
     renderTemplate() {
+        ResultBlocks.register();
+        RunSummary.register();
         if (!this.shadowRoot) {
             return;
         }
         // The composer is part of the stable shell: a streaming reply patches
         // only [part="thread"], so typing is never interrupted.
         this.shadowRoot.innerHTML = `
-      <style>${elementStyles}</style>
+      <style>${elementStyles}
+      [part="message"][data-role="agent"]{border:0;background:transparent;padding-inline:0;max-width:75ch;min-width:0}
+      [part="message"][data-role="user"]{background:var(--boe-token-surface-surface-secondary,#f4f4f4)}
+      [part="proposal"]{border:1px solid var(--boe-token-stroke-stroke,#ddd);background:var(--boe-token-surface-surface,#fff);box-shadow:var(--boe-profile-shadow-overlay,0 3px 14px #0001)}
+      [part="proposal"][data-decision]{border:0;background:transparent;box-shadow:none;padding-inline:0}
+      [part="decision"]{background:none;border-radius:0;padding:0;gap:.4rem;font:inherit}
+      [part="proposal-action"][data-action="approve"],[part="proposal-action"][aria-busy="true"]{background:var(--boe-token-surface-surface-brand,#0061d5);color:var(--boe-token-text-text-on-brand,#fff);border-color:transparent}
+      [part="proposal-action"]:disabled:not([aria-busy="true"]){opacity:.5}
+      [part="composer"]{position:relative;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:12px;padding:.4rem}
+      [part="input"]{border:0;resize:none;max-height:180px;padding-right:5rem;box-sizing:border-box}
+      [part="composer-actions"]{position:absolute;right:.5rem;bottom:.5rem}
+      [part="jump"]{justify-self:center;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:999px;padding:.4rem .8rem;background:var(--boe-token-surface-surface,#fff);color:inherit;cursor:pointer}
+      .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+      ${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}</style>
       <section part="panel">
         <div part="header">
           <h2 part="title"></h2>
           <span part="status" role="status" aria-live="polite"></span>
         </div>
-        <ol part="thread" role="log" aria-live="polite" aria-relevant="additions"></ol>
+        <ol part="thread" role="log" aria-live="polite" aria-relevant="additions" tabindex="0"></ol>
+        <button part="jump" hidden>Jump to latest</button>
         <div part="composer">
-          <textarea part="input" rows="2"></textarea>
+          <label class="sr-only" id="${this.scope}-label">Message</label>
+          <textarea part="input" rows="2" aria-labelledby="${this.scope}-label"></textarea>
           <div part="composer-actions">
             <button type="button" part="stop" hidden>Stop</button>
             <button type="button" part="send">Send</button>
@@ -685,6 +759,11 @@ export class AgentChat extends BaseElement {
         this.statusEl = this.shadowRoot.querySelector('[part="status"]');
     }
     setupListeners() {
+        this.jumpEl = this.shadowRoot.querySelector('[part="jump"]');
+        this.scrollPin = new ScrollPinController(this.threadEl, show => { this.jumpEl.hidden = !show; });
+        this.jumpEl.addEventListener("click", () => this.scrollPin?.jump());
+        this.inputEl.addEventListener("compositionstart", () => { this.composing = true; });
+        this.inputEl.addEventListener("compositionend", () => { this.composing = false; });
         this.sendEl.addEventListener("click", () => {
             void this.send();
         });
@@ -693,7 +772,7 @@ export class AgentChat extends BaseElement {
         });
         this.inputEl.addEventListener("keydown", event => {
             // Enter sends, Shift+Enter makes a newline — the conversational default.
-            if (event.key === "Enter" && !event.shiftKey) {
+            if (event.key === "Enter" && !event.shiftKey && !event.isComposing && !this.composing && event.keyCode !== 229) {
                 event.preventDefault();
                 void this.send();
             }
@@ -703,15 +782,31 @@ export class AgentChat extends BaseElement {
         });
         this.threadEl.addEventListener("click", event => {
             const target = event.target;
+            const messageId = target.closest('[part="message"]')?.getAttribute("data-message-id") ?? "";
+            const option = target.closest("[data-option]");
+            if (option) {
+                const prompt = this.controller?.getMessage(messageId)?.options?.[Number(option.dataset.option)]?.prompt;
+                if (prompt)
+                    void this.send(prompt);
+                return;
+            }
+            if (target.closest('[part="retry"]')) {
+                const messages = this.controller?.getState().messages ?? [];
+                const index = messages.findIndex(m => m.id === messageId);
+                const request = messages.slice(0, index).reverse().find(m => m.role === "user");
+                if (request)
+                    void this.send(request.body);
+                return;
+            }
             const proposalButton = target.closest('[part="proposal-action"]');
             if (proposalButton && this.threadEl.contains(proposalButton)) {
                 const proposalId = proposalButton.getAttribute("data-proposal-id") ?? "";
                 const action = proposalButton.getAttribute("data-action") ?? "";
                 if (action === "approve") {
-                    void this.controller?.resolveAction(proposalId, "approved");
+                    void this.controller?.resolveAction(proposalId, "approved", undefined, messageId);
                 }
                 else if (action === "reject") {
-                    void this.controller?.resolveAction(proposalId, "rejected");
+                    void this.controller?.resolveAction(proposalId, "rejected", undefined, messageId);
                 }
                 else if (action === "modify") {
                     // Modifying needs the host's own editor, so this surfaces intent.
@@ -744,6 +839,9 @@ export class AgentChat extends BaseElement {
         const streaming = this.controller?.getState().streaming ?? false;
         this.inputEl.placeholder = this.placeholder;
         this.sendEl.disabled = streaming || this.inputEl.value.trim().length === 0;
+        this.sendEl.hidden = streaming;
+        this.inputEl.style.height = "auto";
+        this.inputEl.style.height = `${Math.min(180, Math.max(56, this.inputEl.scrollHeight))}px`;
         this.stopEl.hidden = !streaming;
         this.statusEl.textContent = streaming ? "Agent is responding…" : "";
     }
@@ -762,7 +860,8 @@ export class AgentChat extends BaseElement {
             : null;
         const state = this.controller?.getState() ?? null;
         const messages = state?.messages ?? [];
-        const atBottom = this.threadEl.scrollHeight - this.threadEl.scrollTop - this.threadEl.clientHeight < 40;
+        const newMessage = messages.length > this.messageCount;
+        this.messageCount = messages.length;
         this.shadowRoot.querySelector('[part="title"]').textContent = this.heading;
         if (messages.length === 0) {
             if (!this.threadEl.querySelector('[part="empty"]')) {
@@ -793,7 +892,13 @@ export class AgentChat extends BaseElement {
                 else {
                     node.setAttribute("data-signature", signature);
                     node.setAttribute("data-status", message.status);
+                    const summary = node.querySelector("box-run-summary");
+                    const results = node.querySelector("box-result-blocks");
                     node.innerHTML = this.messageInnerHtml(message);
+                    if (summary)
+                        node.querySelector("box-run-summary")?.replaceWith(summary);
+                    if (results)
+                        node.querySelector("box-result-blocks")?.replaceWith(results);
                 }
             }
             else {
@@ -806,8 +911,19 @@ export class AgentChat extends BaseElement {
                 this.threadEl.insertBefore(node, anchor);
             }
             previous = node;
+            this.resizeObserver?.observe(node);
+            const blocks = node.querySelector("box-result-blocks");
+            if (blocks && blocks.blocks !== message.blocks)
+                blocks.blocks = message.blocks ?? [];
+            const summary = node.querySelector("box-run-summary");
+            if (summary) {
+                summary.toggleAttribute("failed", message.status === "error");
+                summary.turn = { steps: message.trace ?? [], todos: message.todos ?? [], startedAt: message.startedAt ?? 0,
+                    ...(message.endedAt !== undefined ? { endedAt: message.endedAt } : {}), incomplete: message.completeness?.status === "incomplete" };
+            }
         }
         for (const stale of existing.values()) {
+            this.resizeObserver?.unobserve(stale);
             stale.remove();
         }
         if (focusKey?.part) {
@@ -817,9 +933,7 @@ export class AgentChat extends BaseElement {
             target?.focus();
         }
         // Follow the stream only when the reader is already at the bottom.
-        if (atBottom) {
-            this.threadEl.scrollTop = this.threadEl.scrollHeight;
-        }
+        this.scrollPin?.contentChanged(newMessage);
         this.syncComposer();
     }
 }

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

@@ -11,6 +11,8 @@ export declare class AgentChatController extends Controller<AgentChatState, Agen
     readonly config: AgentChatSessionConfig;
     private sendCounter;
     private activeAbortController;
+    private finishActive?;
+    private readonly resolving;
     constructor(config: AgentChatSessionConfig);
     connect(): void;
     disconnect(): void;
@@ -23,5 +25,5 @@ export declare class AgentChatController extends Controller<AgentChatState, Agen
      */
     send(body: string): Promise<AgentChatMessage | null>;
     /** Resolve a HITL proposal through the transport capability. */
-    resolveAction(proposalId: string, decision: AgentActionDecision, note?: string): Promise<AgentActionProposal | null>;
+    resolveAction(proposalId: string, decision: AgentActionDecision, note?: string, messageId?: string): Promise<AgentActionProposal | null>;
 }