@teaflask/assistant 0.0.0 → 0.6.0

package/dist/components/react-tool-view.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+export function reactToolView(component) {
+    const View = component;
+    return {
+        mount(container, props) {
+            const root = createRoot(container);
+            let unmounted = false;
+            const unmountLate = () => {
+                if (!unmounted) {
+                    unmounted = true;
+                    queueMicrotask(() => {
+                        root.unmount();
+                    });
+                }
+            };
+            const latch = {
+                inSyncWindow: false,
+                failed: false,
+                error: undefined,
+                onLateFailure: (error) => {
+                    unmountLate();
+                    container.dispatchEvent(new CustomEvent(TOOL_VIEW_LATE_FAILURE_EVENT, { detail: error }));
+                },
+            };
+            const renderInto = (next) => {
+                const alreadyFailed = latch.failed;
+                if (alreadyFailed) {
+                    return;
+                }
+                latch.inSyncWindow = true;
+                try {
+                    flushSync(() => {
+                        root.render(_jsx(_CatchBoundary, { latch: latch, children: _jsx(View, { ...next }) }));
+                    });
+                }
+                finally {
+                    latch.inSyncWindow = false;
+                }
+                if (latch.failed) {
+                    unmountLate();
+                    throw latch.error;
+                }
+            };
+            renderInto(props);
+            return {
+                update: renderInto,
+                destroy: () => {
+                    if (!unmounted) {
+                        unmounted = true;
+                        root.unmount();
+                    }
+                },
+            };
+        },
+    };
+}
+export const TOOL_VIEW_LATE_FAILURE_EVENT = "teaflask-tool-view-late-failure";
+class _CatchBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        const latch = this.props.latch;
+        const alreadyFailed = latch.failed;
+        latch.failed = true;
+        latch.error = error;
+        if (!latch.inSyncWindow && !alreadyFailed) {
+            latch.onLateFailure(error);
+        }
+    }
+    render() {
+        if (this.state.failed) {
+            return null;
+        }
+        return this.props.children;
+    }
+}

package/dist/components/reasoning-row.d.ts

@@ -0,0 +1,4 @@
+import type { ReasoningRow as ReasoningRowModel } from "../core/transcript-rows.js";
+export declare function ReasoningRow({ view }: {
+    view: ReasoningRowModel;
+}): import("react").JSX.Element;

package/dist/components/reasoning-row.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LightbulbIcon } from "lucide-react";
+import { REASONING_SETTLED_LABEL, REASONING_STREAMING_LABEL, } from "../core/reasoning-copy.js";
+import { Disclosure, DisclosureChevron } from "./primitives/disclosure.js";
+import { ShimmerText } from "./streaming-states.js";
+export function ReasoningRow({ view }) {
+    return (_jsx(Disclosure, { variant: "bare", open: view.streaming || undefined, className: "tf:w-full", summaryClassName: "tf:flex tf:w-fit tf:items-center tf:gap-3 tf:py-1.5 tf:text-tf-label tf:text-tf-muted-foreground tf:hover:text-tf-foreground", bodyClassName: "tf:ps-7 tf:pt-1 tf:pb-2", summary: _jsxs(_Fragment, { children: [_jsxs("span", { "data-tf-reasoning-mark": "", className: view.streaming
+                        ? "tf:grid tf:size-4 tf:shrink-0 tf:place-items-center tf:opacity-45"
+                        : "tf:grid tf:size-4 tf:shrink-0 tf:place-items-center", children: [_jsx(LightbulbIcon, { "aria-hidden": true, className: "tf:size-4" }), _jsx("span", { className: "tf:sr-only", children: view.streaming ? "Thinking" : "Thought" })] }), view.streaming ? (_jsx(ShimmerText, { className: "tf:leading-none", children: REASONING_STREAMING_LABEL })) : (_jsx("span", { className: "tf:leading-none", children: REASONING_SETTLED_LABEL })), _jsx(DisclosureChevron, { revealOnInteraction: true })] }), children: _jsx("p", { className: "tf:text-tf-label tf:whitespace-pre-wrap tf:text-tf-muted-foreground", children: view.text }) }));
+}

package/dist/components/receipt-rows.d.ts

@@ -0,0 +1,3 @@
+export declare function TurnFailedReceiptRows({ receipts, }: {
+    receipts: readonly string[];
+}): import("react").JSX.Element;

package/dist/components/receipt-rows.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon } from "lucide-react";
+export function TurnFailedReceiptRows({ receipts, }) {
+    return (_jsx("div", { className: "tf:flex tf:flex-col tf:gap-1 tf:py-1", children: receipts.map((receipt, index) => (_jsxs("p", { "data-tf-turn-failed-receipt": "", className: "tf:flex tf:items-center tf:gap-2 tf:text-xs tf:text-tf-muted-foreground", children: [_jsx(CircleAlertIcon, { "aria-hidden": true, className: "tf:size-3.5 tf:shrink-0 tf:text-tf-destructive" }), _jsx("span", { className: "tf:sr-only", children: "Turn failed:" }), _jsx("span", { className: "tf:min-w-0", children: receipt })] }, `${receipt}-${String(index)}`))) }));
+}

package/dist/components/run-status-announcer.d.ts

@@ -0,0 +1,5 @@
+import type { TurnStatus } from "../contract/threads.js";
+export declare function RunStatusAnnouncer({ status, decisionsPending, }: {
+    status: TurnStatus | null;
+    decisionsPending: boolean;
+}): import("react").JSX.Element;

package/dist/components/run-status-announcer.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { announcedStatusOf } from "../core/run-status.js";
+export function RunStatusAnnouncer({ status, decisionsPending, }) {
+    const state = announcedStatusOf(status, decisionsPending);
+    return (_jsx("span", { "data-tf-status-announcer": "", role: "status", className: "tf:sr-only", children: state === "waiting"
+            ? "Waiting for your input"
+            : state === null
+                ? ""
+                : "The assistant is working" }));
+}

package/dist/components/scroll-follow-guards.d.ts

@@ -0,0 +1 @@
+export declare function ScrollFollowGuards(): null;

package/dist/components/scroll-follow-guards.js

@@ -0,0 +1,156 @@
+"use client";
+import { useEffect } from "react";
+import { useStickToBottomContext, } from "use-stick-to-bottom";
+const TAKEOVER_TRAVEL_PX = 16;
+export function ScrollFollowGuards() {
+    const { scrollRef, state, stopScroll, scrollToBottom } = useStickToBottomContext();
+    useEffect(() => {
+        const scrollElement = scrollRef.current;
+        if (scrollElement === null) {
+            return;
+        }
+        const teardowns = [
+            _installShrinkRefollow(scrollElement, state, scrollToBottom),
+            _installWheelEscape(scrollElement, state, stopScroll),
+            _installTravelGuards(scrollElement, state, stopScroll, scrollToBottom),
+        ];
+        return () => {
+            for (const teardown of teardowns) {
+                teardown();
+            }
+        };
+    }, [scrollRef, scrollToBottom, state, stopScroll]);
+    return null;
+}
+function _installShrinkRefollow(scrollElement, state, scrollToBottom) {
+    const clockStart = Date.now();
+    let clockProven = false;
+    let shrinkPendingProof = false;
+    const landAtBottom = () => {
+        state.scrollTop = scrollElement.scrollHeight - scrollElement.clientHeight;
+        void scrollToBottom({
+            animation: "instant",
+            wait: true,
+            preserveScrollPosition: true,
+        });
+    };
+    let proofFrame = requestAnimationFrame(function proveClock() {
+        if (Date.now() > clockStart) {
+            clockProven = true;
+            if (shrinkPendingProof && state.isAtBottom) {
+                shrinkPendingProof = false;
+                landAtBottom();
+            }
+            return;
+        }
+        proofFrame = requestAnimationFrame(proveClock);
+    });
+    let lastClientHeight = null;
+    const observer = new ResizeObserver(() => {
+        const height = scrollElement.clientHeight;
+        const previousHeight = lastClientHeight;
+        lastClientHeight = height;
+        const viewportShrank = previousHeight !== null && height < previousHeight;
+        if (!viewportShrank || !state.isAtBottom) {
+            return;
+        }
+        if (!clockProven) {
+            shrinkPendingProof = true;
+            return;
+        }
+        landAtBottom();
+    });
+    observer.observe(scrollElement);
+    return () => {
+        cancelAnimationFrame(proofFrame);
+        observer.disconnect();
+    };
+}
+function _installWheelEscape(scrollElement, state, stopScroll) {
+    const handleWheel = (event) => {
+        const wheelingUp = event.deltaY < 0 && Math.abs(event.deltaY) > Math.abs(event.deltaX);
+        const transcriptOverflows = scrollElement.scrollHeight > scrollElement.clientHeight;
+        if (wheelingUp &&
+            transcriptOverflows &&
+            state.animation?.ignoreEscapes !== true &&
+            !wheelConsumedBelow(event.target, scrollElement)) {
+            stopScroll();
+        }
+    };
+    scrollElement.addEventListener("wheel", handleWheel, {
+        passive: true,
+        capture: true,
+    });
+    return () => {
+        scrollElement.removeEventListener("wheel", handleWheel, {
+            capture: true,
+        });
+    };
+}
+function _installTravelGuards(scrollElement, state, stopScroll, scrollToBottom) {
+    let lastScrollTop = scrollElement.scrollTop;
+    let lastScrollHeight = scrollElement.scrollHeight;
+    let lastBottomGap = scrollElement.scrollHeight -
+        scrollElement.clientHeight -
+        scrollElement.scrollTop;
+    let upwardTravel = 0;
+    const handleScroll = (event) => {
+        if (event.target !== scrollElement) {
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = scrollElement;
+        const bottomGap = scrollHeight - clientHeight - scrollTop;
+        const previousTop = lastScrollTop;
+        const previousScrollHeight = lastScrollHeight;
+        const previousBottomGap = lastBottomGap;
+        lastScrollTop = scrollTop;
+        lastScrollHeight = scrollHeight;
+        lastBottomGap = bottomGap;
+        const libraryWroteIt = scrollTop === state.ignoreScrollToTop;
+        const movedUp = scrollTop < previousTop;
+        const movedDown = scrollTop > previousTop;
+        const contentShrankUnderUs = scrollHeight < previousScrollHeight || state.resizeDifference < 0;
+        const overscrollSettleAtBottom = bottomGap <= 1;
+        if (libraryWroteIt || movedDown) {
+            upwardTravel = 0;
+        }
+        if (movedUp &&
+            !libraryWroteIt &&
+            !contentShrankUnderUs &&
+            !overscrollSettleAtBottom &&
+            state.animation?.ignoreEscapes !== true) {
+            upwardTravel += previousTop - scrollTop;
+            if (upwardTravel > TAKEOVER_TRAVEL_PX) {
+                upwardTravel = 0;
+                stopScroll();
+                return;
+            }
+        }
+        const closingTheGap = movedDown && previousBottomGap - bottomGap > 1;
+        if (!state.isAtBottom && closingTheGap && bottomGap <= 1) {
+            void scrollToBottom({ animation: "instant" });
+        }
+    };
+    const scrollRoot = scrollElement.getRootNode();
+    scrollRoot.addEventListener("scroll", handleScroll, {
+        passive: true,
+        capture: true,
+    });
+    return () => {
+        scrollRoot.removeEventListener("scroll", handleScroll, {
+            capture: true,
+        });
+    };
+}
+function wheelConsumedBelow(target, scrollElement) {
+    let element = target instanceof Element ? target : null;
+    while (element !== null && element !== scrollElement) {
+        const canStillScrollUp = element.scrollTop > 0 && element.scrollHeight > element.clientHeight;
+        if (canStillScrollUp &&
+            ["auto", "scroll", "overlay"].includes(getComputedStyle(element).overflowY)) {
+            return true;
+        }
+        element = element.parentElement;
+    }
+    return false;
+}

package/dist/components/served-suggestions.d.ts

@@ -0,0 +1,3 @@
+import type { ServedSuggestionsConfig } from "../contract/assistant-config.js";
+import type { AssistantSuggestion } from "./conversation-view.js";
+export declare function servedSuggestionsForPath(config: ServedSuggestionsConfig, pathname: string): readonly AssistantSuggestion[];

package/dist/components/served-suggestions.js

@@ -0,0 +1,29 @@
+export function servedSuggestionsForPath(config, pathname) {
+    const route = _longestCoveringRoute(config.routes ?? [], pathname);
+    const items = route === null ? (config.default ?? []) : (route.suggestions ?? []);
+    return items.map((item) => ({ prompt: item.prompt, kind: item.kind }));
+}
+function _longestCoveringRoute(routes, pathname) {
+    let covering = null;
+    let coveringLength = -1;
+    for (const route of routes) {
+        const fence = _fenceOf(route.path_prefix);
+        if (!_aFenceCovers(fence, pathname)) {
+            continue;
+        }
+        if (fence.length > coveringLength) {
+            covering = route;
+            coveringLength = fence.length;
+        }
+    }
+    return covering;
+}
+function _fenceOf(prefix) {
+    return prefix.replace(/\/+$/, "");
+}
+function _aFenceCovers(fence, pathname) {
+    if (fence === "") {
+        return true;
+    }
+    return pathname === fence || pathname.startsWith(fence + "/");
+}

package/dist/components/slot-boundary.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export declare function HostSlotBoundary({ slot, fallback, children, }: {
+    slot: string;
+    fallback: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SlotOrDefault({ render, fallback, filledAnnex, }: {
+    render: () => ReactNode;
+    fallback: ReactNode;
+    filledAnnex?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/slot-boundary.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+import { hostFillDeclines } from "../core/host-fill.js";
+import { useOptionalAssistantSession } from "./teaflask-assistant-provider.js";
+export function HostSlotBoundary({ slot, fallback, children, }) {
+    const session = useOptionalAssistantSession();
+    return (_jsx(_SlotCatch, { slot: slot, fallback: fallback, reportError: session?.reportError, children: children }));
+}
+class _SlotCatch extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        const shaped = error instanceof Error ? error : new Error(String(error));
+        this.props.reportError?.(shaped);
+        console.error(`[teaflask-assistant] The host "${this.props.slot}" slot threw; the package rendering took over.`, shaped);
+    }
+    render() {
+        if (this.state.failed) {
+            return _jsx(_Fragment, { children: this.props.fallback });
+        }
+        return _jsx(_Fragment, { children: this.props.children });
+    }
+}
+export function SlotOrDefault({ render, fallback, filledAnnex, }) {
+    const filled = render();
+    if (hostFillDeclines(filled)) {
+        return _jsx(_Fragment, { children: fallback });
+    }
+    return (_jsxs(_Fragment, { children: [filled, filledAnnex] }));
+}

package/dist/components/standing-poll.d.ts

@@ -0,0 +1 @@
+export declare function pollStanding(refresh: () => void, onExhausted?: () => void): () => void;

package/dist/components/standing-poll.js

@@ -0,0 +1,25 @@
+const STANDING_POLL_MS = 4000;
+const MAX_STANDING_POLL_ATTEMPTS = 5;
+export function pollStanding(refresh, onExhausted) {
+    let attempts = 0;
+    let timer;
+    const arm = () => {
+        timer = window.setTimeout(() => {
+            if (attempts === MAX_STANDING_POLL_ATTEMPTS) {
+                onExhausted?.();
+                return;
+            }
+            attempts += 1;
+            refresh();
+            if (attempts < MAX_STANDING_POLL_ATTEMPTS || onExhausted) {
+                arm();
+            }
+        }, STANDING_POLL_MS);
+    };
+    arm();
+    return () => {
+        if (timer !== undefined) {
+            window.clearTimeout(timer);
+        }
+    };
+}

package/dist/components/streaming-states.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export declare function TypingIndicator(): import("react").JSX.Element;
+export declare function ShimmerText({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Spinner({ label, }: {
+    label: string;
+}): import("react").JSX.Element;
+export declare function StreamingLine({ children }: {
+    children: string;
+}): import("react").JSX.Element;

package/dist/components/streaming-states.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from "./primitives/cx.js";
+export function TypingIndicator() {
+    return (_jsx("span", { "data-tf-working-dot": "", className: "tf:animate-tf-pulse tf:text-tf-body tf:text-tf-foreground tf:motion-reduce:animate-none", role: "status", "aria-label": "The assistant is working", children: "●" }));
+}
+export function ShimmerText({ children, className, }) {
+    return (_jsxs("span", { "data-tf-shimmer-text": "", className: cx("tf:inline-grid", className), children: [_jsx("span", { "data-tf-shimmer-base": "", className: "tf:col-start-1 tf:row-start-1", children: children }), _jsx("span", { "data-tf-shimmer-highlight": "", "aria-hidden": true, className: "tf:col-start-1 tf:row-start-1", children: children })] }));
+}
+export function Spinner({ label, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", "data-tf-spinner": "", className: "tf:size-3.5 tf:shrink-0 tf:animate-tf-spin tf:motion-reduce:animate-none", children: _jsx("path", { d: "M8 1.5a6.5 6.5 0 1 1-6.5 6.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }), _jsx("span", { children: label })] }));
+}
+export function StreamingLine({ children }) {
+    return (_jsx(ShimmerText, { className: "tf:text-tf-label tf:text-tf-muted-foreground", children: children }));
+}

package/dist/components/subagent-count-pill.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import { type ThreadDispatch } from "../contract/dispatches.js";
+import { type SubagentRosterEntry } from "../core/subagent-roster.js";
+export declare function SubagentCountPill({ dispatches, threadId, renderPreview, }: {
+    dispatches: ReadonlyMap<number, ThreadDispatch>;
+    threadId?: string;
+    renderPreview?: (entry: SubagentRosterEntry) => ReactNode;
+}): import("react").JSX.Element | null;

package/dist/components/subagent-count-pill.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { activityTitleOf } from "../core/activity-title.js";
+import { ChevronRightIcon } from "lucide-react";
+import { useRef } from "react";
+import { dispatchFailed, dispatchIsRunning, } from "../contract/dispatches.js";
+import { subagentIdentityTokenOf } from "../core/agent-identity.js";
+import { coworkerIndicesOf } from "../core/subagent-presence.js";
+import { rosterEntriesOf, settledDurationLabelOf, subagentPillLabelOf, subagentRosterOf, } from "../core/subagent-roster.js";
+import { AgentIdentityMark } from "./agent-identity-mark.js";
+import { ShimmerText } from "./streaming-states.js";
+import { ChildTranscriptPreview } from "./child-transcript.js";
+import { TfButton } from "./primitives/button.js";
+import { SubagentPreviewPopover } from "./subagent-preview-popover.js";
+import { useFloatingDismiss, useRosterDisclosure, } from "./use-roster-disclosure.js";
+import { usePreviewChoreography, usePreviewEscape, } from "./use-roster-preview.js";
+const _ROSTER_PREDICATES = {
+    isRunning: dispatchIsRunning,
+    hasFailed: dispatchFailed,
+};
+export function SubagentCountPill({ dispatches, threadId, renderPreview, }) {
+    const { open, rosterId, triggerRef, wrapperRef, onWrapperPointerEnter, onWrapperPointerLeave, onWrapperBlur, onTriggerPointerDown, onTriggerPointerCancel, onTriggerFocus, onTriggerClick, onTriggerKeyDown, close, refocusTrigger, } = useRosterDisclosure();
+    const roster = subagentRosterOf(rosterEntriesOf(dispatches.values(), _ROSTER_PREDICATES));
+    const label = subagentPillLabelOf(roster);
+    if (label === null) {
+        return null;
+    }
+    const variantIndices = coworkerIndicesOf(dispatches.values());
+    return (_jsxs("div", { ref: wrapperRef, "data-tf-subagent-pill": "", "data-tf-shelf-item": "", className: "tf:pointer-events-auto tf:relative tf:w-fit", onPointerEnter: onWrapperPointerEnter, onPointerLeave: onWrapperPointerLeave, onBlur: onWrapperBlur, children: [_jsxs(TfButton, { ref: triggerRef, "data-tf-glass": "", variant: "outline", className: "tf:min-h-11 tf:px-3 tf:md:px-2.5", "aria-label": `Subagents: ${label}`, "aria-expanded": open, "aria-controls": open ? rosterId : undefined, onPointerDown: onTriggerPointerDown, onPointerCancel: onTriggerPointerCancel, onFocus: onTriggerFocus, onClick: onTriggerClick, onKeyDown: onTriggerKeyDown, children: [_jsx(AgentIdentityMark, { register: "subagent", size: "md", className: "tf:text-tf-muted-foreground" }), roster.failed.length > 0 ? (_jsx("span", { "aria-hidden": true, className: "tf:size-1.5 tf:shrink-0 tf:rounded-full tf:bg-tf-destructive" })) : null, roster.running.length > 0 ? (_jsx(ShimmerText, { className: "tf:text-tf-muted-foreground", children: label })) : (label)] }), open ? (_jsx(SubagentRosterCard, { id: rosterId, roster: roster, variantIndices: variantIndices, threadId: threadId, renderPreview: renderPreview, triggerRef: triggerRef, onClose: close, refocusTrigger: refocusTrigger })) : null] }));
+}
+function SubagentRosterCard({ id, roster, variantIndices, threadId, renderPreview, triggerRef, onClose, refocusTrigger, }) {
+    const cardRef = useRef(null);
+    const floatingRef = useRef(null);
+    const { previewKey, setPreviewKey, previewRef, previewOpenerRef, mutePreviewFocusOpenRef, onPreviewChange, onPreviewOpener, onPreviewFocus, focusPreview, } = usePreviewChoreography();
+    useFloatingDismiss(floatingRef, triggerRef, onClose);
+    const buckets = [
+        { title: "Running", entries: roster.running },
+        { title: "Completed", entries: roster.completed },
+        { title: "Failed", entries: roster.failed },
+    ].filter((bucket) => bucket.entries.length > 0);
+    const withHeaders = buckets.length > 1;
+    const previewEntry = previewKey === null
+        ? null
+        : (buckets
+            .flatMap((bucket) => bucket.entries)
+            .find((entry) => entry.key === previewKey) ?? null);
+    usePreviewEscape({
+        floatingRef,
+        previewRef,
+        previewOpenerRef,
+        mutePreviewFocusOpenRef,
+        previewKey,
+        setPreviewKey,
+        onClose,
+        refocusTrigger,
+    });
+    return (_jsxs("div", { ref: floatingRef, "data-tf-subagent-disclosure": "", className: "tf:absolute tf:bottom-full tf:start-1/2 tf:-translate-x-1/2 tf:pb-2", children: [_jsx("div", { ref: cardRef, id: id, role: "dialog", "aria-label": "Subagents", tabIndex: -1, "data-tf-glass": "", className: "tf:flex tf:w-72 tf:flex-col tf:overflow-hidden tf:rounded-2xl tf:border tf:focus-visible:outline-2 tf:focus-visible:outline-offset-2 tf:focus-visible:outline-tf-ring", children: _jsx(RosterBucketList, { buckets: buckets, withHeaders: withHeaders, variantIndices: variantIndices, previewable: threadId !== undefined || renderPreview !== undefined, previewKey: previewKey, previewId: `${id}-preview`, onPreviewChange: onPreviewChange, onPreviewOpener: onPreviewOpener, onPreviewFocus: onPreviewFocus, focusPreview: focusPreview }) }), previewEntry !== null &&
+                (threadId !== undefined || renderPreview !== undefined) ? (_jsx(RosterPreview, { entry: previewEntry, id: id, anchorRef: cardRef, previewRef: previewRef, threadId: threadId, renderPreview: renderPreview, variantIndices: variantIndices }, previewEntry.key)) : null] }));
+}
+function RosterPreview({ entry, id, anchorRef, previewRef, threadId, renderPreview, variantIndices, }) {
+    return (_jsx(SubagentPreviewPopover, { id: `${id}-preview`, anchorRef: anchorRef, previewRef: previewRef, label: entry.label, children: renderPreview !== undefined ? (renderPreview(entry)) : threadId !== undefined ? (_jsx(ChildTranscriptPreview, { threadId: threadId, childSessionId: entry.childSessionId, variantIndex: variantIndices.get(entry.childSessionId) }, entry.key)) : null }, entry.key));
+}
+function RosterBucketList({ buckets, withHeaders, variantIndices, previewable, previewKey, previewId, onPreviewChange, onPreviewOpener, onPreviewFocus, focusPreview, }) {
+    return (_jsx("ul", { className: "tf:m-0 tf:flex tf:max-h-64 tf:list-none tf:flex-col tf:overflow-y-auto tf:p-2 tf:ps-2", children: buckets.map((bucket) => (_jsxs("li", { className: "tf:flex tf:flex-col", children: [withHeaders ? (_jsx("p", { className: "tf:m-0 tf:px-2 tf:pt-1.5 tf:pb-0.5 tf:text-xs tf:font-medium tf:text-tf-muted-foreground", children: bucket.title })) : null, _jsx("ul", { className: "tf:m-0 tf:flex tf:list-none tf:flex-col tf:ps-0", children: bucket.entries.map((entry) => (_jsx(SubagentRosterLine, { entry: entry, variantIndex: variantIndices.get(entry.childSessionId), previewable: previewable, previewOpen: previewKey === entry.key, onPreviewChange: (nextOpen) => {
+                            onPreviewChange(entry.key, nextOpen);
+                        }, onPreviewOpener: onPreviewOpener, onPreviewFocus: (opener) => {
+                            onPreviewFocus(entry.key, opener);
+                        }, focusPreview: focusPreview, previewId: previewId }, entry.key))) })] }, bucket.title))) }));
+}
+function SubagentRosterLine({ entry, variantIndex, previewable, previewOpen, onPreviewChange, onPreviewOpener, onPreviewFocus, focusPreview, previewId, }) {
+    const workedLabel = settledDurationLabelOf(entry.startedAt, entry.settledAt);
+    const statusWord = entry.running
+        ? "Working"
+        : entry.failed
+            ? "Failed"
+            : "Finished";
+    const line = (_jsx(RosterLineBody, { entry: entry, variantIndex: variantIndex, previewable: previewable, previewOpen: previewOpen, workedLabel: workedLabel, statusWord: statusWord }));
+    if (!previewable) {
+        return (_jsx("li", { className: "tf:flex tf:flex-col tf:gap-0.5 tf:text-tf-label tf:text-tf-foreground", children: _jsx("span", { className: "tf:flex tf:items-center tf:px-2 tf:py-1.5", children: line }) }));
+    }
+    return (_jsx("li", { className: "tf:flex tf:flex-col tf:gap-0.5 tf:text-tf-label tf:text-tf-foreground", children: _jsx(TfButton, { variant: "bare", "aria-haspopup": "dialog", "aria-expanded": previewOpen, "aria-controls": previewOpen ? previewId : undefined, "aria-label": [
+                variantIndex !== undefined
+                    ? `Subagent ${String(variantIndex)}`
+                    : null,
+                entry.label,
+                workedLabel !== null ? `${statusWord} · ${workedLabel}` : statusWord,
+                entry.failed ? entry.note : null,
+            ]
+                .filter((part) => part !== null)
+                .join(" — "), className: "tf:group/subagent tf:min-h-11 tf:w-full tf:justify-start tf:px-2 tf:py-1.5 tf:hover:bg-tf-accent", onPointerEnter: (event) => {
+                if (event.pointerType !== "touch") {
+                    onPreviewOpener(event.currentTarget);
+                    onPreviewChange(true);
+                }
+            }, onFocus: (event) => {
+                onPreviewFocus(event.currentTarget);
+            }, onClick: (event) => {
+                onPreviewOpener(event.currentTarget);
+                onPreviewChange(true);
+            }, onKeyDown: (event) => {
+                if (!previewOpen || event.key !== "ArrowRight") {
+                    return;
+                }
+                event.preventDefault();
+                focusPreview();
+            }, children: line }) }));
+}
+function RosterLineBody({ entry, variantIndex, previewable, previewOpen, workedLabel, statusWord, }) {
+    return (_jsxs("span", { className: "tf:flex tf:w-full tf:items-start tf:gap-2", children: [_jsxs("span", { "data-tf-subagent-identity": subagentIdentityTokenOf(entry.childSessionId), className: "tf:relative tf:flex tf:h-6 tf:min-w-6 tf:shrink-0 tf:items-center tf:justify-center tf:px-1", children: [_jsx(AgentIdentityMark, { register: "subagent", variantIndex: variantIndex }), entry.failed ? (_jsx("span", { "aria-hidden": true, className: "tf:absolute tf:-end-0.5 tf:-bottom-0.5 tf:size-2 tf:rounded-full tf:border tf:border-tf-background tf:bg-tf-destructive" })) : null] }), _jsxs("span", { className: "tf:flex tf:min-w-0 tf:flex-1 tf:flex-col tf:items-start tf:gap-0.5", children: [_jsxs("span", { className: "tf:flex tf:min-h-6 tf:w-full tf:min-w-0 tf:items-center tf:gap-2", children: [_jsx("span", { "data-tf-subagent-label": "", className: "tf:min-w-0 tf:flex-1 tf:truncate tf:text-start", title: entry.label, children: activityTitleOf(entry.label) }), previewable ? (_jsx(ChevronRightIcon, { "aria-hidden": true, className: previewOpen
+                                    ? "tf:size-4 tf:shrink-0 tf:text-tf-muted-foreground tf:opacity-100 tf:transition-opacity"
+                                    : "tf:size-4 tf:shrink-0 tf:text-tf-muted-foreground tf:opacity-0 tf:transition-opacity tf:group-hover/subagent:opacity-100 tf:group-focus-visible/subagent:opacity-100 tf:pointer-coarse:opacity-100" })) : null] }), _jsxs("span", { className: "tf:flex tf:w-full tf:min-w-0 tf:items-baseline tf:gap-1.5 tf:text-xs tf:text-tf-muted-foreground", children: [_jsx("span", { "data-tf-subagent-status": "", className: entry.failed ? "tf:text-tf-destructive" : undefined, children: entry.running ? (_jsx(ShimmerText, { children: statusWord })) : (statusWord) }), workedLabel !== null ? (_jsx("span", { "data-tf-subagent-worked": "", className: "tf:truncate", children: `· ${workedLabel}` })) : null] }), entry.failed && entry.note !== null ? (_jsx("span", { "data-tf-subagent-note": "", className: "tf:w-full tf:min-w-0 tf:truncate tf:text-start tf:text-xs tf:text-tf-muted-foreground", title: entry.note, children: entry.note })) : null] })] }));
+}

package/dist/components/subagent-current-work.d.ts

@@ -0,0 +1,6 @@
+import type { ToolCallViewModel } from "../core/tool-call-display.js";
+export declare const SubagentCurrentWorkContext: import("react").Context<ReadonlyMap<string, ToolCallViewModel>>;
+export type SubagentCurrentWorkPublisher = (childSessionId: string, view: ToolCallViewModel | null) => void;
+export declare const SubagentCurrentWorkPublisherContext: import("react").Context<SubagentCurrentWorkPublisher>;
+export declare function useSubagentCurrentWork(): ReadonlyMap<string, ToolCallViewModel>;
+export declare function useSubagentCurrentWorkPublisher(): SubagentCurrentWorkPublisher;

package/dist/components/subagent-current-work.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, useContext } from "react";
+const EMPTY_CURRENT_WORK = new Map();
+export const SubagentCurrentWorkContext = createContext(EMPTY_CURRENT_WORK);
+const NOOP_PUBLISHER = () => undefined;
+export const SubagentCurrentWorkPublisherContext = createContext(NOOP_PUBLISHER);
+export function useSubagentCurrentWork() {
+    return useContext(SubagentCurrentWorkContext);
+}
+export function useSubagentCurrentWorkPublisher() {
+    return useContext(SubagentCurrentWorkPublisherContext);
+}

package/dist/components/subagent-delegation-surface.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { ThreadDispatch } from "../contract/dispatches.js";
+export declare function focusIfRestorable(opener: HTMLElement | null): void;
+export declare function SubagentDelegationSurface({ dispatches, threadId, renderPreview, children, }: {
+    dispatches: ReadonlyMap<number, ThreadDispatch>;
+    threadId: string | undefined;
+    renderPreview?: (childSessionId: string, variantIndex?: number) => ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;