@teaflask/assistant 0.0.0 → 0.6.0

package/dist/components/subscription-connect-flow.js

@@ -0,0 +1,319 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { subscriptionConnectMessageOf, } from "../contract/subscriptions.js";
+import { beginSubscriptionAuthorization, completeSubscriptionAuthorization, disconnectSubscription, } from "../transport/serving-api.js";
+import { failureSentenceOf } from "../core/error-copy.js";
+import { ServingApiError } from "../transport/serving-error.js";
+import { TfButton } from "./primitives/button.js";
+import { pollStanding } from "./standing-poll.js";
+import { HeartbeatLine, NOT_CONNECTED_HEADLINE, NotConnected, notConnectedExplanationOf, PopupBlocked, } from "./subscription-connect-arms.js";
+import { ConnectedStanding } from "./subscription-connected-standing.js";
+import { useSubscriptionRecheck } from "./subscription-recheck.js";
+const _PROVIDER_NAMES = {
+    openai_chatgpt: "ChatGPT",
+};
+export function providerNameOf(provider) {
+    return _PROVIDER_NAMES[provider] ?? provider;
+}
+export const DISCLOSURE_LINE = "Conversations here will use your ChatGPT plan's included usage.";
+const _POPUP_NAME = "teaflask-subscription-connect";
+const _POPUP_FEATURES = "popup,width=520,height=720";
+const _POPUP_CLOSED_POLL_MS = 500;
+const _POPUP_CLOSED_GRACE_MS = 1000;
+const _SIGN_IN_EXPIRED_SENTENCE = "The sign-in took too long and has expired. Start it again.";
+function _signInFailedSentenceOf(name) {
+    return `${name} didn't finish the sign-in. Try again.`;
+}
+export function useSubscriptionConnectFlow(status, session, refreshSubscriptions, noteSignedIn) {
+    const [flow, setFlow] = useState({ kind: "idle" });
+    const busyRef = useRef(false);
+    const latestStatusRef = useRef(status);
+    const noteSignedInRef = useRef(noteSignedIn);
+    useEffect(() => {
+        latestStatusRef.current = status;
+        noteSignedInRef.current = noteSignedIn;
+    });
+    useEffect(() => {
+        if (flow.kind !== "in_popup" && flow.kind !== "popup_blocked") {
+            return;
+        }
+        return _awaitTheCallback({
+            session,
+            provider: status.provider,
+            busyRef,
+            latestStatusRef,
+            refreshSubscriptions,
+            noteSignedInRef,
+            setFlow,
+        }, flow);
+    }, [flow, session, status.provider, refreshSubscriptions]);
+    const holdsAPresentationAwaitingARead = status.state === "verifying" ||
+        flow.kind === "landed" ||
+        flow.kind === "removed" ||
+        flow.kind === "checking";
+    const checking = flow.kind === "checking";
+    useEffect(() => {
+        if (!holdsAPresentationAwaitingARead) {
+            return;
+        }
+        return pollStanding(refreshSubscriptions, checking
+            ? () => {
+                setFlow({ kind: "not_connected" });
+            }
+            : undefined);
+    }, [holdsAPresentationAwaitingARead, checking, status, refreshSubscriptions]);
+    const wires = {
+        session,
+        provider: status.provider,
+        busyRef,
+        noteSignedInRef,
+        latestStatusRef,
+        refreshSubscriptions,
+        setFlow,
+    };
+    const errorSentence = flow.kind === "error" ? flow.sentence : null;
+    const flowInProgress = _isInProgress(flow);
+    _reconcile(flow, status, setFlow);
+    return {
+        flow,
+        flowInProgress,
+        errorSentence,
+        begin: () => {
+            if (busyRef.current) {
+                return;
+            }
+            const popup = window.open("about:blank", _POPUP_NAME, _POPUP_FEATURES);
+            void _begin(wires, popup);
+        },
+        disconnect: () => void _disconnect(wires),
+        cancel: () => {
+            if (flow.kind === "in_popup") {
+                flow.popup.close();
+            }
+            setFlow({ kind: "idle" });
+        },
+        noteTabOpened: () => {
+            if (flow.kind === "popup_blocked" && !flow.tabOpened) {
+                setFlow({ ...flow, tabOpened: true });
+            }
+        },
+    };
+}
+function _isInProgress(flow) {
+    return (flow.kind === "starting" ||
+        flow.kind === "in_popup" ||
+        flow.kind === "popup_blocked" ||
+        flow.kind === "completing" ||
+        flow.kind === "checking" ||
+        flow.kind === "landed" ||
+        flow.kind === "removed");
+}
+function _reconcile(flow, status, setFlow) {
+    if (flow.kind === "removed" || flow.kind === "landed") {
+        if (status !== flow.before) {
+            setFlow({ kind: "idle" });
+        }
+    }
+    else if (flow.kind === "checking") {
+        if (status !== flow.before) {
+            setFlow(status.connected && status.state !== "bounced"
+                ? { kind: "idle" }
+                : { kind: "not_connected" });
+        }
+    }
+    else if (status.connected &&
+        status.state !== "bounced" &&
+        (_isInProgress(flow) || flow.kind === "not_connected")) {
+        setFlow({ kind: "idle" });
+    }
+}
+async function _begin(wires, popup) {
+    const { busyRef, setFlow } = wires;
+    busyRef.current = true;
+    setFlow({ kind: "starting" });
+    try {
+        const authorization = await beginSubscriptionAuthorization(wires.session, wires.provider);
+        const expiresAt = Date.now() + authorization.expires_in * 1000;
+        if (popup === null) {
+            setFlow({
+                kind: "popup_blocked",
+                authorization,
+                expiresAt,
+                tabOpened: false,
+            });
+        }
+        else if (popup.closed) {
+            setFlow({ kind: "idle" });
+        }
+        else {
+            popup.location.href = authorization.authorize_url;
+            setFlow({ kind: "in_popup", popup, expiresAt });
+        }
+    }
+    catch (error) {
+        popup?.close();
+        setFlow({ kind: "error", sentence: failureSentenceOf(error) });
+    }
+    finally {
+        busyRef.current = false;
+    }
+}
+async function _disconnect(wires) {
+    const { busyRef, latestStatusRef, refreshSubscriptions, setFlow } = wires;
+    if (busyRef.current) {
+        return;
+    }
+    busyRef.current = true;
+    try {
+        await disconnectSubscription(wires.session, wires.provider);
+        refreshSubscriptions();
+        setFlow({ kind: "removed", before: latestStatusRef.current });
+    }
+    catch (error) {
+        setFlow({ kind: "error", sentence: failureSentenceOf(error) });
+    }
+    finally {
+        busyRef.current = false;
+    }
+}
+function _awaitTheCallback(wires, flow) {
+    const { latestStatusRef, refreshSubscriptions, setFlow } = wires;
+    const serverOrigin = new URL(wires.session.baseUrl, window.location.href)
+        .origin;
+    let settled = false;
+    const settle = () => {
+        if (settled) {
+            return false;
+        }
+        settled = true;
+        return true;
+    };
+    const onMessage = (event) => {
+        const message = subscriptionConnectMessageOf(event, serverOrigin, wires.provider);
+        if (message === null || !settle()) {
+            return;
+        }
+        if (message.kind === "code") {
+            void _complete(wires, {
+                code: message.code,
+                state: message.state,
+                client_id: message.client_id,
+            });
+            return;
+        }
+        setFlow(message.kind === "denied"
+            ? { kind: "not_connected" }
+            : {
+                kind: "error",
+                sentence: _signInFailedSentenceOf(providerNameOf(wires.provider)),
+            });
+    };
+    window.addEventListener("message", onMessage);
+    const expiry = window.setTimeout(() => {
+        if (!settle()) {
+            return;
+        }
+        if (flow.kind === "in_popup") {
+            flow.popup.close();
+        }
+        setFlow({ kind: "error", sentence: _SIGN_IN_EXPIRED_SENTENCE });
+    }, Math.max(0, flow.expiresAt - Date.now()));
+    let closedWatch;
+    let grace;
+    if (flow.kind === "in_popup") {
+        const { popup } = flow;
+        closedWatch = window.setInterval(() => {
+            if (!popup.closed || grace !== undefined) {
+                return;
+            }
+            grace = window.setTimeout(() => {
+                if (!settle()) {
+                    return;
+                }
+                refreshSubscriptions();
+                setFlow({ kind: "checking", before: latestStatusRef.current });
+            }, _POPUP_CLOSED_GRACE_MS);
+        }, _POPUP_CLOSED_POLL_MS);
+    }
+    return () => {
+        window.removeEventListener("message", onMessage);
+        window.clearTimeout(expiry);
+        if (closedWatch !== undefined) {
+            window.clearInterval(closedWatch);
+        }
+        if (grace !== undefined) {
+            window.clearTimeout(grace);
+        }
+    };
+}
+async function _complete(wires, request) {
+    const { busyRef, latestStatusRef, refreshSubscriptions, setFlow } = wires;
+    if (busyRef.current) {
+        return;
+    }
+    busyRef.current = true;
+    setFlow({ kind: "completing" });
+    try {
+        await completeSubscriptionAuthorization(wires.session, wires.provider, request);
+        refreshSubscriptions();
+        wires.noteSignedInRef.current();
+        setFlow({ kind: "landed", before: latestStatusRef.current });
+    }
+    catch (error) {
+        setFlow(_isADeclinedSignIn(error)
+            ? { kind: "not_connected" }
+            : { kind: "error", sentence: failureSentenceOf(error) });
+    }
+    finally {
+        busyRef.current = false;
+    }
+}
+export function ProviderConnectSection({ status, session, refreshSubscriptions, refreshStandingAndGate, onSignedIn, }) {
+    const name = providerNameOf(status.provider);
+    const connect = useSubscriptionConnectFlow(status, session, refreshSubscriptions, onSignedIn);
+    const recheck = useSubscriptionRecheck(status.bounce_cause === "quota" ? status : null, session, refreshStandingAndGate);
+    const standing = status.connected && !connect.flowInProgress;
+    const notConnected = connect.flow.kind === "not_connected";
+    const offersTheSignIn = connect.flow.kind === "idle" || connect.flow.kind === "starting";
+    return (_jsxs("section", { className: "tf:flex tf:flex-col tf:gap-2", "aria-label": `Connect ${name}`, children: [offersTheSignIn && !standing ? (_jsx("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-muted-foreground", children: DISCLOSURE_LINE })) : null, standing ? (_jsx(ConnectedStanding, { name: name, status: status, errorSentence: connect.errorSentence ?? recheck.errorSentence, outcome: notConnected
+                    ? {
+                        headline: NOT_CONNECTED_HEADLINE,
+                        detail: notConnectedExplanationOf(name),
+                    }
+                    : null, rechecking: recheck.rechecking, onRecheck: recheck.recheck, onReconnect: connect.begin, onDisconnect: connect.disconnect })) : (_jsx(ConnectFlow, { name: name, flow: connect.flow, errorSentence: connect.errorSentence, onBegin: connect.begin, onCancel: connect.cancel, onTabOpened: connect.noteTabOpened }))] }));
+}
+export function ConnectFlow({ name, flow, errorSentence, onBegin, onCancel, onTabOpened, }) {
+    if (flow.kind === "removed") {
+        return (_jsx("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-muted-foreground", role: "status", children: "Disconnected." }));
+    }
+    if (flow.kind === "landed") {
+        return _jsx(HeartbeatLine, { sentence: `Verifying your ${name} connection…` });
+    }
+    if (flow.kind === "completing") {
+        return _jsx(HeartbeatLine, { sentence: `Finishing your ${name} sign-in…` });
+    }
+    if (flow.kind === "checking") {
+        return _jsx(HeartbeatLine, { sentence: `Checking your ${name} connection…` });
+    }
+    if (flow.kind === "in_popup" ||
+        (flow.kind === "popup_blocked" && flow.tabOpened)) {
+        const where = flow.kind === "in_popup" ? "window" : "tab";
+        return (_jsxs("div", { className: "tf:flex tf:flex-col tf:gap-2", children: [_jsx(HeartbeatLine, { sentence: `Finish signing in to ${name} in the ${where} that opened.` }), _jsx(TfButton, { variant: "ghost", className: "tf:self-start", onClick: onCancel, children: "Cancel" })] }));
+    }
+    if (flow.kind === "popup_blocked") {
+        return (_jsx(PopupBlocked, { authorization: flow.authorization, onCancel: onCancel, onTabOpened: onTabOpened }));
+    }
+    if (flow.kind === "not_connected") {
+        return _jsx(NotConnected, { name: name, onBegin: onBegin });
+    }
+    return (_jsxs("div", { className: "tf:flex tf:flex-col tf:gap-2", children: [errorSentence === null ? null : (_jsx("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-destructive", role: "alert", children: errorSentence })), _jsx(TfButton, { variant: "primary", className: "tf:self-start", onClick: onBegin, disabled: flow.kind === "starting", children: flow.kind === "starting"
+                    ? `Connecting ${name}…`
+                    : flow.kind === "error"
+                        ? "Try again"
+                        : `Sign in with ${name}` })] }));
+}
+function _isADeclinedSignIn(error) {
+    return (error instanceof ServingApiError &&
+        error.code === "SUBSCRIPTION_SIGN_IN_DECLINED");
+}

package/dist/components/subscription-connected-standing.d.ts

@@ -0,0 +1,16 @@
+import type { SubscriptionStatus } from "../contract/subscriptions.js";
+interface ConnectOutcome {
+    headline: string;
+    detail: string;
+}
+export declare function ConnectedStanding({ name, status, errorSentence, outcome, rechecking, onRecheck, onReconnect, onDisconnect, }: {
+    name: string;
+    status: SubscriptionStatus;
+    errorSentence: string | null;
+    outcome: ConnectOutcome | null;
+    rechecking: boolean;
+    onRecheck: () => void;
+    onReconnect: () => void;
+    onDisconnect: () => void;
+}): import("react").JSX.Element;
+export {};

package/dist/components/subscription-connected-standing.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDownIcon, OpenAiMarkIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+import { checkingPlanSentenceOf, HeartbeatLine, ManageUsageLink, notEligibleSentenceOf, planLimitSentenceOf, } from "./subscription-connect-arms.js";
+export function ConnectedStanding({ name, status, errorSentence, outcome, rechecking, onRecheck, onReconnect, onDisconnect, }) {
+    const [actionsOpen, setActionsOpen] = useState(false);
+    const actionsId = `tf-provider-actions-${status.provider}`;
+    const active = status.state === "active";
+    return (_jsxs("div", { className: "tf:flex tf:flex-col tf:gap-3", children: [_jsx(ConnectedStandingHeader, { name: name, status: status, actionsOpen: actionsOpen, actionsId: actionsId, onToggleActions: () => {
+                    setActionsOpen((current) => !current);
+                } }), status.state === "bounced" ? null : (_jsxs("p", { className: "tf:m-0 tf:text-xs tf:text-tf-muted-foreground", children: ["Uses your ", name, " plan's included usage."] })), _jsx(StandingLine, { name: name, status: status, outcome: outcome, active: active }), status.offered ? null : (_jsxs("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-muted-foreground", children: [name, " sign-in is no longer offered here."] })), status.state === "bounced" && rechecking ? (_jsx(HeartbeatLine, { sentence: checkingPlanSentenceOf(name) })) : status.state === "bounced" ? (_jsx(BouncedRemedy, { name: name, status: status, onRecheck: onRecheck, onReconnect: onReconnect })) : null, errorSentence === null ? null : (_jsx("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-destructive", role: "alert", children: errorSentence })), actionsOpen ? (_jsxs("div", { id: actionsId, className: "tf:flex tf:flex-wrap tf:justify-end tf:gap-2 tf:border-t tf:pt-2", children: [status.bounce_cause === "quota" ? null : (_jsx(ManageUsageLink, { provider: status.provider, variant: "outline" })), _jsxs(TfButton, { variant: "outline", onClick: onDisconnect, children: ["Disconnect ", name] })] })) : null] }));
+}
+function StandingLine({ name, status, outcome, active, }) {
+    if (outcome !== null) {
+        return (_jsxs("div", { className: "tf:flex tf:flex-col tf:gap-1", role: "status", children: [_jsx("p", { className: "tf:m-0 tf:text-tf-label tf:font-medium tf:text-tf-foreground", children: outcome.headline }), _jsx("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-muted-foreground", children: outcome.detail })] }));
+    }
+    if (active) {
+        return null;
+    }
+    if (status.state === "verifying") {
+        return (_jsx(HeartbeatLine, { sentence: standingSentenceOf(name, status), tone: "foreground" }));
+    }
+    return (_jsx("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-foreground", role: "status", children: standingSentenceOf(name, status) }));
+}
+function BouncedRemedy({ name, status, onRecheck, onReconnect, }) {
+    if (status.bounce_cause === "quota") {
+        return (_jsxs("div", { className: "tf:flex tf:flex-wrap tf:items-center tf:gap-2", children: [_jsx(ManageUsageLink, { provider: status.provider }), status.offered ? (_jsx(TfButton, { variant: "outline", onClick: onRecheck, children: "Check again" })) : null] }));
+    }
+    if (!status.offered) {
+        return null;
+    }
+    return (_jsxs(TfButton, { variant: "primary", className: "tf:self-start", onClick: onReconnect, children: ["Reconnect ", name] }));
+}
+function ConnectedStandingHeader({ name, status, actionsOpen, actionsId, onToggleActions, }) {
+    return (_jsxs("div", { className: "tf:flex tf:items-center tf:justify-between tf:gap-3", children: [_jsxs("div", { className: "tf:flex tf:min-w-0 tf:items-center tf:gap-2.5", children: [_jsx("span", { className: "tf:flex tf:size-8 tf:shrink-0 tf:items-center tf:justify-center tf:rounded-full tf:bg-tf-muted tf:text-tf-foreground", children: _jsx(OpenAiMarkIcon, {}) }), _jsxs("div", { className: "tf:flex tf:min-w-0 tf:flex-col", children: [_jsx("span", { className: "tf:truncate tf:text-tf-label tf:font-medium tf:text-tf-foreground", children: name }), _jsx("span", { className: "tf:truncate tf:text-xs tf:text-tf-muted-foreground", children: "AI subscription" })] })] }), _jsxs(TfButton, { variant: "outline", className: "tf:shrink-0", "aria-expanded": actionsOpen, "aria-controls": actionsId, onClick: onToggleActions, children: [_jsx("span", { "aria-hidden": true, className: stateDotClassOf(status) }), stateChipLabelOf(status), _jsx(ChevronDownIcon, {})] })] }));
+}
+function stateDotClassOf(status) {
+    if (status.state === "bounced" && status.bounce_cause !== "quota") {
+        return "tf:size-1.5 tf:rounded-full tf:bg-tf-destructive";
+    }
+    if (status.state === "bounced") {
+        return "tf:size-1.5 tf:rounded-full tf:bg-tf-muted-foreground";
+    }
+    return "tf:size-1.5 tf:rounded-full tf:bg-tf-foreground";
+}
+function stateChipLabelOf(status) {
+    if (status.state === "verifying") {
+        return "Verifying";
+    }
+    if (status.state === "bounced") {
+        return status.bounce_cause === "quota" ? "Limit reached" : "Reconnect";
+    }
+    return "Connected";
+}
+function standingSentenceOf(name, status) {
+    if (status.state === "verifying") {
+        return `Verifying your ${name} connection…`;
+    }
+    if (status.state === "bounced") {
+        if (status.bounce_cause === "quota") {
+            return planLimitSentenceOf(name);
+        }
+        if (status.bounce_cause === "not_eligible") {
+            return notEligibleSentenceOf(name);
+        }
+        return `Your ${name} connection stopped working.`;
+    }
+    return `Connected to ${name}.`;
+}

package/dist/components/subscription-plan-notice.d.ts

@@ -0,0 +1 @@
+export declare function SubscriptionPlanNotice(): import("react").JSX.Element | null;

package/dist/components/subscription-plan-notice.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { readPlanNoticeSeen, writePlanNoticeSeen, } from "../persistence/plan-notice.js";
+import { OpenAiMarkIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+import { manageUsageUrlOf } from "./subscription-connect-arms.js";
+import { providerNameOf } from "./subscription-connect-flow.js";
+import { useAssistantSession } from "./teaflask-assistant-provider.js";
+import { useCell } from "./use-store-cell.js";
+export function SubscriptionPlanNotice() {
+    const session = useAssistantSession();
+    const due = useCell(session.planNoticeDue);
+    const statuses = useCell(session.subscriptions);
+    if (due === null) {
+        return null;
+    }
+    const standing = statuses?.find((status) => Object.is(status.provider, due));
+    const active = standing?.connected === true && standing.state === "active";
+    if (!active || readPlanNoticeSeen(session.publishableKey, due)) {
+        return null;
+    }
+    const name = providerNameOf(due);
+    const manageUsageUrl = manageUsageUrlOf(due);
+    const dismiss = () => {
+        writePlanNoticeSeen(session.publishableKey, due);
+        session.acknowledgePlanNotice();
+    };
+    return (_jsxs("div", { className: "tf:mb-3 tf:flex tf:flex-col tf:gap-2 tf:rounded-xl tf:bg-tf-accent tf:p-3", role: "status", children: [_jsxs("p", { className: "tf:m-0 tf:flex tf:items-center tf:gap-2 tf:text-tf-label tf:font-medium tf:text-tf-foreground", children: [_jsx(OpenAiMarkIcon, {}), "You're using your ", name, " plan"] }), _jsxs("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-muted-foreground", children: ["Eligible usage in this app uses your ", name, " plan.", " ", manageUsageUrl === null ? (_jsxs(_Fragment, { children: ["Manage usage in your ", name, " settings."] })) : (_jsxs(_Fragment, { children: [_jsx("a", { href: manageUsageUrl, target: "_blank", rel: "noopener noreferrer", className: "tf:text-tf-foreground tf:underline tf:underline-offset-2", children: "Manage usage" }), " ", "in your ", name, " settings."] }))] }), _jsx(TfButton, { variant: "primary", className: "tf:self-start", onClick: dismiss, children: "Got it" })] }));
+}

package/dist/components/subscription-recheck.d.ts

@@ -0,0 +1,10 @@
+import type { SubscriptionStatus } from "../contract/subscriptions.js";
+import type { TokenSession } from "../transport/token-session.js";
+interface SubscriptionRecheckControl {
+    rechecking: boolean;
+    errorSentence: string | null;
+    recheck: () => void;
+}
+export declare function useRefreshStandingAndGate(): () => void;
+export declare function useSubscriptionRecheck(status: SubscriptionStatus | null, session: TokenSession, refresh: () => void): SubscriptionRecheckControl;
+export {};

package/dist/components/subscription-recheck.js

@@ -0,0 +1,73 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { failureSentenceOf } from "../core/error-copy.js";
+import { recheckSubscription } from "../transport/serving-api.js";
+import { pollStanding } from "./standing-poll.js";
+import { useAssistantSession } from "./teaflask-assistant-provider.js";
+export function useRefreshStandingAndGate() {
+    const session = useAssistantSession();
+    return useCallback(() => {
+        session.refreshSubscriptions();
+        session.refreshAssistantConfig();
+    }, [session]);
+}
+export function useSubscriptionRecheck(status, session, refresh) {
+    const [state, setState] = useState({ kind: "idle" });
+    const busyRef = useRef(false);
+    if (state.kind === "settling" && _theRowMovedOn(status, state.anchors)) {
+        setState({ kind: "settled" });
+    }
+    const settled = state.kind === "settled";
+    useEffect(() => {
+        if (settled) {
+            refresh();
+        }
+    }, [settled, refresh]);
+    const settling = state.kind === "settling";
+    useEffect(() => {
+        if (!settling) {
+            return;
+        }
+        return pollStanding(refresh, () => {
+            setState({ kind: "idle" });
+        });
+    }, [settling, refresh]);
+    const recheck = () => {
+        if (busyRef.current || status === null) {
+            return;
+        }
+        busyRef.current = true;
+        setState({ kind: "asking" });
+        void recheckSubscription(session, status.provider)
+            .then(({ standing, probeStarted }) => {
+            refresh();
+            setState(probeStarted
+                ? {
+                    kind: "settling",
+                    anchors: {
+                        echoedHorizon: standing.bounce_retry_at,
+                        askedWith: status,
+                    },
+                }
+                : { kind: "idle" });
+        })
+            .catch((error) => {
+            setState({ kind: "error", sentence: failureSentenceOf(error) });
+        })
+            .finally(() => {
+            busyRef.current = false;
+        });
+    };
+    return {
+        rechecking: state.kind === "asking" || settling,
+        errorSentence: state.kind === "error" ? state.sentence : null,
+        recheck,
+    };
+}
+function _theRowMovedOn(status, anchors) {
+    if (status === anchors.askedWith) {
+        return false;
+    }
+    return (status?.state !== "bounced" ||
+        status.bounce_retry_at !== anchors.echoedHorizon);
+}

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

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export declare function SurfaceBoundary({ surface, shelfItem, degrade, onError, children, }: {
+    surface: string;
+    shelfItem?: boolean;
+    degrade?: "card" | "silent";
+    onError?: (error: Error) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/surface-boundary.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component, } from "react";
+import { useOptionalAssistantSession } from "./teaflask-assistant-provider.js";
+export function SurfaceBoundary({ surface, shelfItem = false, degrade = "card", onError, children, }) {
+    const session = useOptionalAssistantSession();
+    return (_jsx(SurfaceCatchBoundary, { surface: surface, shelfItem: shelfItem, degrade: degrade, onFailure: onError ?? session?.reportError, children: children }));
+}
+const FALLBACK_CARD_STYLE = {
+    boxSizing: "border-box",
+    display: "block",
+    width: "100%",
+    maxWidth: "768px",
+    margin: "8px auto",
+    padding: "12px 16px",
+    border: "1px solid rgba(0, 0, 0, 0.14)",
+    borderRadius: "10px",
+    background: "#ffffff",
+    color: "#171717",
+    font: '400 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+    textAlign: "left",
+};
+class SurfaceCatchBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error, info) {
+        let observerThrew = false;
+        let observerError;
+        try {
+            this.props.onFailure?.(error);
+        }
+        catch (thrown) {
+            observerThrew = true;
+            observerError = thrown;
+        }
+        try {
+            console.error(`[teaflask-assistant] The ${this.props.surface} surface failed to render.`, error, info.componentStack);
+            if (observerThrew) {
+                console.error("[teaflask-assistant] The host onError observer itself threw while handling that failure.", observerError);
+            }
+        }
+        catch {
+        }
+    }
+    render() {
+        if (!this.state.failed) {
+            return this.props.children;
+        }
+        if (this.props.degrade === "silent") {
+            return null;
+        }
+        return (_jsx("div", { role: "alert", "data-tf-surface-fallback": this.props.surface, ...(this.props.shelfItem ? { "data-tf-shelf-item": "" } : {}), style: FALLBACK_CARD_STYLE, children: "This part of the assistant hit an error." }));
+    }
+}

package/dist/components/suspension-surfaces.d.ts

@@ -0,0 +1,3 @@
+export declare function SuspensionSurfaces({ rowIndexByToolCallId, }: {
+    rowIndexByToolCallId: ReadonlyMap<string, number>;
+}): import("react").JSX.Element | null;