@teaflask/assistant 0.6.0 → 0.7.0

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

@@ -35,7 +35,7 @@ export function useSubscriptionConnectFlow(status, session, refreshSubscriptions
         noteSignedInRef.current = noteSignedIn;
     });
     useEffect(() => {
-        if (flow.kind !== "in_popup" && flow.kind !== "popup_blocked") {
+        if (flow.kind !== "in_popup") {
             return;
         }
         return _awaitTheCallback({
@@ -84,6 +84,10 @@ export function useSubscriptionConnectFlow(status, session, refreshSubscriptions
                 return;
             }
             const popup = window.open("about:blank", _POPUP_NAME, _POPUP_FEATURES);
+            if (popup === null) {
+                setFlow({ kind: "popup_blocked" });
+                return;
+            }
             void _begin(wires, popup);
         },
         disconnect: () => void _disconnect(wires),
@@ -93,11 +97,6 @@ export function useSubscriptionConnectFlow(status, session, refreshSubscriptions
             }
             setFlow({ kind: "idle" });
         },
-        noteTabOpened: () => {
-            if (flow.kind === "popup_blocked" && !flow.tabOpened) {
-                setFlow({ ...flow, tabOpened: true });
-            }
-        },
     };
 }
 function _isInProgress(flow) {
@@ -134,25 +133,20 @@ async function _begin(wires, popup) {
     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) {
+        if (popup.closed) {
             setFlow({ kind: "idle" });
         }
         else {
             popup.location.href = authorization.authorize_url;
-            setFlow({ kind: "in_popup", popup, expiresAt });
+            setFlow({
+                kind: "in_popup",
+                popup,
+                expiresAt: Date.now() + authorization.expires_in * 1000,
+            });
         }
     }
     catch (error) {
-        popup?.close();
+        popup.close();
         setFlow({ kind: "error", sentence: failureSentenceOf(error) });
     }
     finally {
@@ -214,34 +208,27 @@ function _awaitTheCallback(wires, flow) {
         if (!settle()) {
             return;
         }
-        if (flow.kind === "in_popup") {
-            flow.popup.close();
-        }
+        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) {
+    const { popup } = flow;
+    const closedWatch = window.setInterval(() => {
+        if (!popup.closed || grace !== undefined) {
+            return;
+        }
+        grace = window.setTimeout(() => {
+            if (!settle()) {
                 return;
             }
-            grace = window.setTimeout(() => {
-                if (!settle()) {
-                    return;
-                }
-                refreshSubscriptions();
-                setFlow({ kind: "checking", before: latestStatusRef.current });
-            }, _POPUP_CLOSED_GRACE_MS);
-        }, _POPUP_CLOSED_POLL_MS);
-    }
+            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);
-        }
+        window.clearInterval(closedWatch);
         if (grace !== undefined) {
             window.clearTimeout(grace);
         }
@@ -281,9 +268,9 @@ export function ProviderConnectSection({ status, session, refreshSubscriptions,
                         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 }))] }));
+                    : 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 }))] }));
 }
-export function ConnectFlow({ name, flow, errorSentence, onBegin, onCancel, onTabOpened, }) {
+export function ConnectFlow({ name, flow, errorSentence, onBegin, onCancel, }) {
     if (flow.kind === "removed") {
         return (_jsx("p", { className: "tf:m-0 tf:text-tf-label tf:text-tf-muted-foreground", role: "status", children: "Disconnected." }));
     }
@@ -296,13 +283,11 @@ export function ConnectFlow({ name, flow, errorSentence, onBegin, onCancel, onTa
     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 === "in_popup") {
+        return (_jsxs("div", { className: "tf:flex tf:flex-col tf:gap-2", children: [_jsx(HeartbeatLine, { sentence: `Finish signing in to ${name} in the window that opened.` }), _jsx(TfButton, { variant: "secondary", className: "tf:self-start", onClick: onCancel, children: "Cancel" })] }));
     }
     if (flow.kind === "popup_blocked") {
-        return (_jsx(PopupBlocked, { authorization: flow.authorization, onCancel: onCancel, onTabOpened: onTabOpened }));
+        return _jsx(PopupBlocked, { onBegin: onBegin, onCancel: onCancel });
     }
     if (flow.kind === "not_connected") {
         return _jsx(NotConnected, { name: name, onBegin: onBegin });

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

@@ -10,11 +10,11 @@ export function ConnectedStanding({ name, status, errorSentence, outcome, rechec
     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] }));
+                } }), status.state === "bounced" || !status.offered ? 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 })] }));
+        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", 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;
@@ -22,7 +22,7 @@ function StandingLine({ name, status, outcome, active, }) {
     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) }));
+    return (_jsx("p", { className: "tf:m-0 tf:text-tf-label", role: "status", children: standingSentenceOf(name, status) }));
 }
 function BouncedRemedy({ name, status, onRecheck, onReconnect, }) {
     if (status.bounce_cause === "quota") {
@@ -34,7 +34,7 @@ function BouncedRemedy({ name, status, onRecheck, onReconnect, }) {
     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, {})] })] }));
+    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", 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", 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") {
@@ -43,14 +43,17 @@ function stateDotClassOf(status) {
     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";
+    return "tf:size-1.5 tf:rounded-full tf:bg-current";
 }
 function stateChipLabelOf(status) {
     if (status.state === "verifying") {
         return "Verifying";
     }
     if (status.state === "bounced") {
-        return status.bounce_cause === "quota" ? "Limit reached" : "Reconnect";
+        if (status.bounce_cause === "quota") {
+            return "Limit reached";
+        }
+        return status.offered ? "Reconnect" : "Not working";
     }
     return "Connected";
 }

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

@@ -15,8 +15,10 @@ export function SubscriptionPlanNotice() {
         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)) {
+    const inUse = standing?.connected === true &&
+        standing.state === "active" &&
+        standing.offered;
+    if (!inUse || readPlanNoticeSeen(session.publishableKey, due)) {
         return null;
     }
     const name = providerNameOf(due);

package/dist/components/teaflask-assistant-provider.d.ts

@@ -13,27 +13,120 @@ import type { ServingApiError } from "../transport/serving-error.js";
 import type { TokenSession } from "../transport/token-session.js";
 import type { ToolViewRegistry } from "../core/tool-view.js";
 import type { AssistantSuggestionInput } from "./conversation-view.js";
+/**
+ * The identity props for a signed-in user, always passed together. When
+ * `userId` changes, including to undefined on sign-out, everything from the
+ * previous user is dropped and a fresh session starts.
+ */
 export interface TeaflaskAssistantIdentityProps {
+    /**
+     * Your stable id for the signed-in user. It must equal the `user_id` claim
+     * in the token that `getEndUserToken` returns, or the assistant shows a
+     * setup error instead of a conversation.
+     */
     userId: string;
+    /**
+     * Returns a short-lived token from your backend that proves who the user
+     * is: an HS256 JWT with `user_id` and `exp` (and optionally `email`),
+     * signed with the JWT secret from Settings → Keys in Teaflask. It is called
+     * whenever the assistant needs a new session token, and returning null
+     * continues anonymously.
+     */
     getEndUserToken: () => string | null | Promise<string | null>;
 }
+/**
+ * The identity props for a page with no signed-in user. Leave both `userId` and
+ * `getEndUserToken` unset, and the visitor chats anonymously.
+ */
 export interface TeaflaskAssistantAnonymousProps {
+    /** Leave unset for anonymous visitors. */
     userId?: undefined;
+    /** Leave unset for anonymous visitors. */
     getEndUserToken?: undefined;
 }
+/**
+ * Props for `TeaflaskAssistantProvider`. Pass the shared props, plus either
+ * both `userId` and `getEndUserToken` for a signed-in user or neither for an
+ * anonymous visitor.
+ */
 export type TeaflaskAssistantProviderProps = TeaflaskAssistantProviderBaseProps & (TeaflaskAssistantIdentityProps | TeaflaskAssistantAnonymousProps);
+/**
+ * The props shared by `TeaflaskAssistantProvider` and `TeaflaskAssistant`,
+ * except the identity pair. Changing `publishableKey`, `baseUrl` or `userId`
+ * starts a separate session.
+ */
 export interface TeaflaskAssistantProviderBaseProps {
+    /**
+     * Your agent's publishable key from Teaflask. It is meant for browser code,
+     * and requests are accepted only from your allowed origins.
+     */
     publishableKey: string;
+    /**
+     * The Teaflask API origin, which defaults to `https://api.teaflask.com`. A
+     * trailing slash is ignored.
+     */
     baseUrl?: string;
+    /**
+     * How this page calls your API when the agent runs an action, with the
+     * user's own cookies, headers or a request you build. Without it, the agent
+     * cannot run actions here and tells the user to do the step themselves.
+     */
     actionsAdapter?: ActionsAdapter;
+    /**
+     * Called with an app-relative path when the agent takes the user to a page,
+     * so wire it to your router. It may return a promise that resolves once
+     * your router has the navigation. Without it, the agent cannot navigate on
+     * this page.
+     */
     onNavigate?: (path: string) => void | Promise<void>;
+    /**
+     * Called with errors for your error reporting: a failed send or stop, a
+     * dropped stream, a conversation that fails to open, a failed session-token
+     * request, or a crash inside an assistant surface.
+     */
     onError?: (error: Error) => void;
+    /**
+     * Called with product analytics events (approval submits and stream
+     * failures) that you can forward to your own analytics. If it throws, the
+     * error goes to `onError`.
+     */
     onTelemetry?: (event: AssistantTelemetryEvent) => void;
+    /**
+     * Theme tokens and dark-mode overrides, compared by value, so passing a new
+     * object literal on every render is fine. Under a strict Content Security
+     * Policy this needs inline styles allowed (`style-src-attr`). Otherwise set
+     * the `--tf-` variables in your CSS instead.
+     */
     theme?: AssistantTheme;
+    /**
+     * Forces light, dark or OS-following (`"auto"`) colors on every assistant
+     * surface. Omit it to stay light unless an ancestor element carries
+     * `data-tf-theme="dark"`.
+     */
     mode?: AssistantThemeMode;
+    /**
+     * Your own logo or mascot, shown on the corner widget and on the drawer's
+     * welcome screen. It fills a 4rem square, so a bare `<svg viewBox>` or
+     * `<img>` works without sizing. Omit it, or pass a falsy value, to show the
+     * Teaflask flask.
+     */
     companionMark?: ReactNode;
+    /**
+     * Opening prompts for the drawer's welcome screen, compared by value. Omit
+     * it to use the prompts configured for your agent in Teaflask for the
+     * current page. Any value, even `[]`, replaces those entirely.
+     */
     suggestions?: readonly AssistantSuggestionInput[];
+    /**
+     * Your own components for displaying specific tools and actions in the
+     * conversation, keyed by tool name (`action__<slug>` for an action). Define
+     * the registry once at module scope rather than inside a component.
+     */
     toolViews?: ToolViewRegistry;
+    /**
+     * Your app content. Components inside it can use the assistant hooks, such
+     * as `useAssistantActivity` and `useConversation`.
+     */
     children?: ReactNode;
 }
 interface AssistantSessionValue {
@@ -65,5 +158,11 @@ interface AssistantSessionValue {
 }
 export declare function useAssistantSession(): AssistantSessionValue;
 export declare function useOptionalAssistantSession(): AssistantSessionValue | null;
+/**
+ * Connects to Teaflask and shares one live conversation with every assistant
+ * component and hook inside it, without rendering any UI of its own. Use it in
+ * place of `TeaflaskAssistant` when you place the surfaces yourself or build
+ * your own UI.
+ */
 export declare function TeaflaskAssistantProvider({ publishableKey, baseUrl, userId, getEndUserToken, actionsAdapter, onNavigate, onError, onTelemetry, theme, mode, companionMark, suggestions, toolViews, children, }: TeaflaskAssistantProviderProps): import("react").JSX.Element;
 export {};

package/dist/components/teaflask-assistant.d.ts

@@ -1,11 +1,44 @@
 import { type AssistantCompanionProps } from "./assistant-companion.js";
 import { type TeaflaskAssistantProviderProps } from "./teaflask-assistant-provider.js";
+/**
+ * The imperative handle you get through a ref on `TeaflaskAssistant`. It exists
+ * only while the component is mounted.
+ */
 export interface TeaflaskAssistantHandle {
+    /**
+     * Opens the ⌘K palette even when the hotkey is disabled or rebound. The
+     * corner widget hides while the palette is open. Call it as
+     * `ref.current?.openPalette()`.
+     */
     openPalette: () => void;
 }
+/**
+ * The props `TeaflaskAssistant` adds on top of the provider's, for the palette
+ * hotkey and the widget's corner.
+ */
 export interface TeaflaskAssistantRootProps {
+    /**
+     * The keyboard shortcut that toggles the palette. It defaults to `"mod+k"`,
+     * where mod is ⌘ on macOS and Ctrl elsewhere, and takes the same syntax for
+     * other keys (`"mod+j"`, `"ctrl+shift+p"`). Pass `false` to disable it. An
+     * unrecognized value also disables it, with a console warning, and a key
+     * press your own handler calls `preventDefault()` on is ignored.
+     */
     hotkey?: string | false;
+    /**
+     * The screen corner where the widget and its drawer sit. The default is
+     * `"bottom-right"`.
+     */
     corner?: AssistantCompanionProps["corner"];
 }
+/**
+ * Props for `TeaflaskAssistant`, which are all the provider props plus `hotkey`
+ * and `corner`.
+ */
 export type TeaflaskAssistantProps = TeaflaskAssistantProviderProps & TeaflaskAssistantRootProps;
+/**
+ * The all-in-one assistant. It contains the provider plus the corner widget
+ * (which opens the chat drawer) and the ⌘K palette, so mount it once in the
+ * layout that wraps every page. Pass a ref to get a `TeaflaskAssistantHandle`.
+ */
 export declare const TeaflaskAssistant: import("react").ForwardRefExoticComponent<TeaflaskAssistantProps & import("react").RefAttributes<TeaflaskAssistantHandle>>;

package/dist/components/tool-views/action-view.js

@@ -6,7 +6,7 @@ const REQUEST_SECTIONS = [
     ["query", "Query"],
     ["body", "Body"],
 ];
-const VALUE_PANE_CLASS = "tf:m-0 tf:whitespace-pre-wrap tf:font-mono tf:text-xs tf:text-tf-foreground";
+const VALUE_PANE_CLASS = "tf:m-0 tf:whitespace-pre-wrap tf:font-mono tf:text-xs tf:text-tf-card-foreground";
 export const actionToolView = statelessToolView(_renderAction);
 function _renderAction({ call }) {
     const root = el("div", "tf:flex tf:flex-col tf:gap-2");

package/dist/components/tool-views/parts-classes.d.ts

@@ -1,17 +1,17 @@
-export declare const CARD_CLASS = "tf:overflow-hidden tf:rounded-lg tf:border tf:border-tf-border tf:bg-tf-card";
+export declare const CARD_CLASS = "tf:overflow-hidden tf:rounded-lg tf:border tf:border-tf-border tf:bg-tf-card tf:text-tf-card-foreground";
 export declare const CARD_TITLE_CLASS = "tf:mb-1 tf:text-tf-label tf:font-medium tf:text-tf-foreground";
 export declare const ROW_CLASS = "tf:flex tf:min-w-0 tf:items-center tf:gap-2.5 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:first:border-t-0";
-export declare const ROW_LINK_CLASS = "tf:no-underline tf:hover:bg-tf-accent";
+export declare const ROW_LINK_CLASS = "tf:group/row tf:text-inherit tf:no-underline tf:hover:bg-tf-accent";
 export declare const ROW_ICON_CLASS = "tf:flex tf:size-6 tf:shrink-0 tf:items-center tf:justify-center tf:rounded-[5px] tf:bg-tf-muted tf:text-tf-muted-foreground";
 export declare const ROW_TEXT_CLASS = "tf:flex tf:min-w-0 tf:flex-1 tf:flex-col tf:leading-[1.35]";
-export declare const ROW_TITLE_CLASS = "tf:truncate tf:text-tf-label tf:font-medium tf:text-tf-foreground";
+export declare const ROW_TITLE_CLASS = "tf:truncate tf:text-tf-label tf:font-medium tf:text-tf-card-foreground tf:group-hover/row:text-tf-accent-foreground";
 export declare const ROW_SECONDARY_CLASS = "tf:truncate tf:text-xs tf:text-tf-muted-foreground";
 export declare const ROW_TRAIL_CLASS = "tf:ms-auto tf:flex tf:shrink-0 tf:items-center tf:gap-2";
-export declare const BADGE_CLASS = "tf:inline-flex tf:shrink-0 tf:items-center tf:rounded-[3px] tf:border tf:border-tf-border tf:px-1.5 tf:py-px tf:text-[11px] tf:leading-4 tf:font-medium tf:text-tf-foreground";
+export declare const BADGE_CLASS = "tf:inline-flex tf:shrink-0 tf:items-center tf:rounded-[3px] tf:border tf:border-tf-border tf:px-1.5 tf:py-px tf:text-[11px] tf:leading-4 tf:font-medium tf:text-tf-card-foreground tf:group-hover/row:text-tf-accent-foreground";
 export declare const FACT_LIST_CLASS = "tf:m-0 tf:border-t tf:border-tf-border tf:first:border-t-0";
 export declare const FACT_ROW_CLASS = "tf:grid tf:grid-cols-[minmax(6rem,30%)_minmax(0,1fr)] tf:gap-x-3 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:first:border-t-0";
 export declare const FACT_LABEL_CLASS = "tf:min-w-0 tf:text-xs tf:text-tf-muted-foreground tf:wrap-anywhere";
-export declare const FACT_VALUE_CLASS = "tf:m-0 tf:min-w-0 tf:text-xs tf:text-tf-foreground tf:wrap-anywhere";
+export declare const FACT_VALUE_CLASS = "tf:m-0 tf:min-w-0 tf:text-xs tf:text-tf-card-foreground tf:wrap-anywhere";
 export declare const CAPTION_ROW_CLASS = "tf:flex tf:items-center tf:justify-between tf:gap-3 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:text-xs tf:text-tf-muted-foreground tf:first:border-t-0";
 export declare const CARD_BLOCK_CLASS = "tf:border-t tf:border-tf-border tf:px-2.5 tf:py-2 tf:first:border-t-0";
 export declare const BODY_REGION_CLASS = "tf:max-h-72 tf:overflow-auto tf:border-t tf:border-tf-border tf:px-2.5 tf:py-2 tf:first:border-t-0";

package/dist/components/tool-views/parts-classes.js

@@ -1,17 +1,17 @@
-export const CARD_CLASS = "tf:overflow-hidden tf:rounded-lg tf:border tf:border-tf-border tf:bg-tf-card";
+export const CARD_CLASS = "tf:overflow-hidden tf:rounded-lg tf:border tf:border-tf-border tf:bg-tf-card tf:text-tf-card-foreground";
 export const CARD_TITLE_CLASS = "tf:mb-1 tf:text-tf-label tf:font-medium tf:text-tf-foreground";
 export const ROW_CLASS = "tf:flex tf:min-w-0 tf:items-center tf:gap-2.5 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:first:border-t-0";
-export const ROW_LINK_CLASS = "tf:no-underline tf:hover:bg-tf-accent";
+export const ROW_LINK_CLASS = "tf:group/row tf:text-inherit tf:no-underline tf:hover:bg-tf-accent";
 export const ROW_ICON_CLASS = "tf:flex tf:size-6 tf:shrink-0 tf:items-center tf:justify-center tf:rounded-[5px] tf:bg-tf-muted tf:text-tf-muted-foreground";
 export const ROW_TEXT_CLASS = "tf:flex tf:min-w-0 tf:flex-1 tf:flex-col tf:leading-[1.35]";
-export const ROW_TITLE_CLASS = "tf:truncate tf:text-tf-label tf:font-medium tf:text-tf-foreground";
+export const ROW_TITLE_CLASS = "tf:truncate tf:text-tf-label tf:font-medium tf:text-tf-card-foreground tf:group-hover/row:text-tf-accent-foreground";
 export const ROW_SECONDARY_CLASS = "tf:truncate tf:text-xs tf:text-tf-muted-foreground";
 export const ROW_TRAIL_CLASS = "tf:ms-auto tf:flex tf:shrink-0 tf:items-center tf:gap-2";
-export const BADGE_CLASS = "tf:inline-flex tf:shrink-0 tf:items-center tf:rounded-[3px] tf:border tf:border-tf-border tf:px-1.5 tf:py-px tf:text-[11px] tf:leading-4 tf:font-medium tf:text-tf-foreground";
+export const BADGE_CLASS = "tf:inline-flex tf:shrink-0 tf:items-center tf:rounded-[3px] tf:border tf:border-tf-border tf:px-1.5 tf:py-px tf:text-[11px] tf:leading-4 tf:font-medium tf:text-tf-card-foreground tf:group-hover/row:text-tf-accent-foreground";
 export const FACT_LIST_CLASS = "tf:m-0 tf:border-t tf:border-tf-border tf:first:border-t-0";
 export const FACT_ROW_CLASS = "tf:grid tf:grid-cols-[minmax(6rem,30%)_minmax(0,1fr)] tf:gap-x-3 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:first:border-t-0";
 export const FACT_LABEL_CLASS = "tf:min-w-0 tf:text-xs tf:text-tf-muted-foreground tf:wrap-anywhere";
-export const FACT_VALUE_CLASS = "tf:m-0 tf:min-w-0 tf:text-xs tf:text-tf-foreground tf:wrap-anywhere";
+export const FACT_VALUE_CLASS = "tf:m-0 tf:min-w-0 tf:text-xs tf:text-tf-card-foreground tf:wrap-anywhere";
 export const CAPTION_ROW_CLASS = "tf:flex tf:items-center tf:justify-between tf:gap-3 tf:border-t tf:border-tf-border tf:px-2.5 tf:py-1.5 tf:text-xs tf:text-tf-muted-foreground tf:first:border-t-0";
 export const CARD_BLOCK_CLASS = "tf:border-t tf:border-tf-border tf:px-2.5 tf:py-2 tf:first:border-t-0";
 export const BODY_REGION_CLASS = `tf:max-h-72 tf:overflow-auto ${CARD_BLOCK_CLASS}`;

package/dist/components/tool-views/parts.d.ts

@@ -1,11 +1,25 @@
 import type { ReactNode } from "react";
+/**
+ * The small label shown above a card. Use it on its own above ToolViewBones,
+ * which draw no card.
+ */
 export declare function ToolViewTitle({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
+/**
+ * A bordered card holding rows, facts, captions or a body, with an optional
+ * small `title` above it; the base container for a tool view built from these
+ * parts, so it matches the assistant's built-in views.
+ */
 export declare function ToolViewCard({ title, children, ...rest }: {
     title?: string;
     children: ReactNode;
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;
+/**
+ * A list row with an optional icon tile, a title, a muted second line and
+ * trailing content such as a ToolViewBadge. With `href` the row is a plain link
+ * that navigates the whole page, since a view can't reach your app's router.
+ */
 export declare function ToolViewRow({ icon, title, secondary, trailing, href, ...rest }: {
     icon?: ReactNode;
     title: ReactNode;
@@ -13,29 +27,59 @@ export declare function ToolViewRow({ icon, title, secondary, trailing, href, ..
     trailing?: ReactNode;
     href?: string;
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;
+/**
+ * Label and value rows, in the order given, for showing a record's properties.
+ */
 export declare function ToolViewFacts({ facts, ...rest }: {
     facts: readonly {
         label: string;
         value: ReactNode;
     }[];
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;
+/**
+ * A quiet, muted line inside a card, such as a count or a response status, with
+ * optional `trailing` content on the right.
+ */
 export declare function ToolViewCaption({ children, trailing, ...rest }: {
     children: ReactNode;
     trailing?: ReactNode;
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;
+/**
+ * A labelled scrolling region inside a card, up to 18rem tall, for a document,
+ * a diff or other long content; `label` is its accessible name. Extra `data-*`
+ * attributes pass through to the element.
+ */
 export declare function ToolViewBody({ label, children, ...rest }: {
     label: string;
     children: ReactNode;
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;
+/**
+ * A scrolling area inside a card, up to 18rem tall, for a long list of rows.
+ * Extra `data-*` attributes pass through to the element.
+ */
 export declare function ToolViewScroll({ children, ...rest }: {
     children: ReactNode;
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;
+/**
+ * A small outlined label, usually trailing a ToolViewRow, for a short state
+ * such as "Awaiting approval" or "Not created". Extra `data-*` attributes pass
+ * through to the element.
+ */
 export declare function ToolViewBadge({ children, ...rest }: {
     children: ReactNode;
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;
+/**
+ * One muted sentence, for something absent, degraded or not shown, such as the
+ * text from settledOutcomeNoteOf.
+ */
 export declare function ToolViewNote({ children, ...rest }: {
     children: ReactNode;
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;
+/**
+ * Pulsing skeleton lines that hold the place where a result will appear while
+ * the call runs, with no card or border; `lines` defaults to 3. Hidden from
+ * screen readers.
+ */
 export declare function ToolViewBones({ lines, ...rest }: {
     lines?: number;
 } & Record<`data-${string}`, string | number | undefined>): import("react").JSX.Element;

package/dist/components/tool-views/questions-view.js

@@ -27,12 +27,12 @@ function renderQuestions({ call }) {
 function questionSection(question, answer) {
     const section = el("div", "tf:min-w-0 tf:border-t tf:border-tf-border tf:p-4 tf:first:border-t-0");
     const title = el("dt", "");
-    title.append(el("span", "tf:wrap-anywhere tf:text-tf-label tf:font-medium tf:text-tf-foreground", question.heading));
+    title.append(el("span", "tf:wrap-anywhere tf:text-tf-label tf:font-medium tf:text-tf-card-foreground", question.heading));
     const prompt = el("dd", "tf:m-0 tf:mt-1.5 tf:wrap-anywhere tf:whitespace-pre-wrap tf:text-tf-label tf:leading-relaxed tf:text-tf-muted-foreground", question.prompt);
     prompt.dataset.tfElicitationReceiptQuestion = "";
     section.append(title, prompt);
     if (answer !== undefined) {
-        const value = el("dd", "tf:m-0 tf:mt-3 tf:rounded-md tf:bg-tf-muted tf:px-3 tf:py-2.5 tf:wrap-anywhere tf:whitespace-pre-wrap tf:text-tf-label tf:leading-relaxed tf:text-tf-foreground");
+        const value = el("dd", "tf:m-0 tf:mt-3 tf:rounded-md tf:bg-tf-muted tf:px-3 tf:py-2.5 tf:wrap-anywhere tf:whitespace-pre-wrap tf:text-tf-label tf:leading-relaxed tf:text-tf-card-foreground");
         value.dataset.tfElicitationReceiptAnswer = "";
         value.append(el("span", "tf:sr-only", "Answered: "), document.createTextNode(answer));
         section.append(value);