@teaflask/assistant 0.0.0 → 0.6.0

package/dist/components/activity-rail.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { activityTitleOf } from "../core/activity-title.js";
+import { liveFoldHeadlineOf, settledFoldHeadlineOf, } from "../core/run-folds.js";
+import { approvalAwaitsMember, elicitationAwaitsMember, } from "../core/suspension-queue.js";
+import { anchoredCardsFor } from "./approval-context.js";
+import { anchoredElicitationsFor, ElicitationsContext, } from "./elicitation-context.js";
+import { AssistantMarkdown } from "./markdown/assistant-markdown.js";
+import { MemoryUpdatedFooter } from "./memory-updated-footer.js";
+import { Disclosure, DisclosureChevron, useDisclosureVisualState, } from "./primitives/disclosure.js";
+import { ReasoningRow } from "./reasoning-row.js";
+import { ShimmerText } from "./streaming-states.js";
+import { SurfaceBoundary } from "./surface-boundary.js";
+import { ToolCallRows } from "./tool-call-rows.js";
+import { useMemberToggleOutrank } from "./use-member-toggle-outrank.js";
+import { _foldClaimsLiveness } from "./use-transcript-folds.js";
+export function ActivityRail({ fold, cards, turnLive, inCurrentTurn, identityToken, decisionSurfacesInShelf, toolRow, }) {
+    const { cards: elicitationCards } = useContext(ElicitationsContext);
+    const rows = fold.members;
+    const running = _foldClaimsLiveness(rows, turnLive);
+    const awaitingDecision = _groupAwaitsDecision(rows, cards, elicitationCards, decisionSurfacesInShelf);
+    const foldOpenByDefault = running || awaitingDecision;
+    const { groupRef, memberToggled, onGroupActivation } = useMemberToggleOutrank();
+    const steps = fold.steps.map((step) => (_jsx(ActivityRailStep, { step: step, cards: cards, inCurrentTurn: inCurrentTurn, identityToken: identityToken, decisionSurfacesInShelf: decisionSurfacesInShelf, toolRow: toolRow }, step.kind === "tool-call" ? step.row.key : step.view.key)));
+    return (_jsx("div", { "data-tf-activity-group": "", className: "tf:my-2", ref: groupRef, onClickCapture: onGroupActivation, children: _jsx(Disclosure, { variant: "bare", open: memberToggled ? undefined : foldOpenByDefault || undefined, summaryClassName: "tf:flex tf:w-fit tf:items-center tf:gap-1.5 tf:py-1.5 tf:text-tf-label tf:text-tf-muted-foreground tf:hover:text-tf-foreground", bodyClassName: "tf:pt-1", summary: _jsxs(_Fragment, { children: [_jsx(FoldHeadline, { fold: fold, running: running }), _jsx(DisclosureChevron, { revealOnInteraction: true })] }), children: _jsx("div", { "data-tf-activity-rail": "", children: _jsx("div", { children: steps }) }) }) }));
+}
+function ActivityRailStep({ step, cards, inCurrentTurn, identityToken, decisionSurfacesInShelf, toolRow, }) {
+    if (step.kind === "reasoning") {
+        return (_jsx("div", { "data-tf-activity-step": "", children: _jsx(ReasoningRow, { view: step.view }) }));
+    }
+    if (step.kind === "narration") {
+        return (_jsxs("div", { "data-tf-activity-step": "", "data-tf-activity-narration": "", "data-tf-agent-identity": identityToken, className: "tf:py-1", children: [_jsx(AssistantMarkdown, { children: step.view.text }), step.view.memoryUpdates !== undefined ? (_jsx(MemoryUpdatedFooter, { updates: step.view.memoryUpdates })) : null] }));
+    }
+    return (_jsx("div", { "data-tf-activity-step": "", children: _jsx(SurfaceBoundary, { surface: "tool-row", children: _jsx(ToolCallRows, { row: step.row, cards: cards, inCurrentTurn: inCurrentTurn, decisionSurfacesInShelf: decisionSurfacesInShelf, toolRow: toolRow }) }) }));
+}
+function FoldHeadline({ fold, running, }) {
+    const open = useDisclosureVisualState()?.open ?? false;
+    if (running) {
+        const rawLabel = open ? "Working…" : liveFoldHeadlineOf(fold.steps);
+        const label = open ? rawLabel : activityTitleOf(rawLabel);
+        return (_jsx("span", { className: "tf:min-w-0", title: open ? undefined : rawLabel, children: _jsx(ShimmerText, { className: "tf:max-w-full tf:grid-cols-1", children: _jsx("span", { className: "tf:block tf:truncate", children: label }) }) }));
+    }
+    return _jsx("span", { children: settledFoldHeadlineOf(fold.duration) });
+}
+function _groupAwaitsDecision(rows, approvalCards, elicitationCards, decisionSurfacesInShelf) {
+    return rows.some((row) => {
+        if (row.kind !== "tool-call") {
+            return false;
+        }
+        const approvals = decisionSurfacesInShelf
+            ? approvalCards.filter((card) => card.toolCallId === row.toolCallId)
+            : anchoredCardsFor(approvalCards, row.toolCallId);
+        const elicitations = decisionSurfacesInShelf
+            ? elicitationCards.filter((card) => card.toolCallId === row.toolCallId)
+            : anchoredElicitationsFor(elicitationCards, row.toolCallId);
+        return (approvals.some(approvalAwaitsMember) ||
+            elicitations.some(elicitationAwaitsMember));
+    });
+}

package/dist/components/activity-shelf.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare function ActivityShelf({ suspension, }: {
+    suspension?: ReactNode;
+}): import("react").JSX.Element;
+export declare function ComposerActivityOverlay({ activity, }: {
+    activity?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/activity-shelf.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ActivityShelf({ suspension, }) {
+    return (_jsx("div", { "data-tf-activity-shelf": "", "data-tf-composer-ground": "", className: "tf:bg-tf-background tf:empty:hidden", children: _jsx("div", { className: "tf:mx-auto tf:w-full tf:max-w-3xl tf:px-4 tf:empty:hidden", children: _jsx("div", { "data-tf-suspension-slot": "", className: "tf:flex tf:flex-col tf:gap-2 tf:pt-1 tf:empty:hidden", children: suspension }) }) }));
+}
+export function ComposerActivityOverlay({ activity, }) {
+    return (_jsx("div", { "data-tf-activity-slot": "", "data-tf-composer-activity-overlay": "", className: "tf:pointer-events-none tf:absolute tf:inset-x-0 tf:bottom-full tf:flex tf:flex-col tf:items-center tf:gap-1.5 tf:pb-4 tf:empty:hidden", children: activity }));
+}

package/dist/components/agent-identity-mark.d.ts

@@ -0,0 +1,7 @@
+export type AgentIdentityRegister = "primary" | "subagent";
+export declare function AgentIdentityMark({ register, variantIndex, size, className, }: {
+    register: AgentIdentityRegister;
+    variantIndex?: number;
+    size?: "sm" | "md" | "fill";
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/agent-identity-mark.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./primitives/cx.js";
+import { useId } from "react";
+const SUBAGENT_GRADIENTS = [
+    ["oklch(83.7% 0.128 66.29)", "oklch(64.6% 0.222 41.116)"],
+    ["oklch(90.5% 0.182 98.111)", "oklch(68.1% 0.162 75.834)"],
+    ["oklch(87.1% 0.15 154.449)", "oklch(62.7% 0.194 149.214)"],
+    ["oklch(82.8% 0.111 230.318)", "oklch(58.8% 0.158 241.966)"],
+    ["oklch(78.5% 0.115 274.713)", "oklch(51.1% 0.262 276.966)"],
+    ["oklch(81.1% 0.111 293.571)", "oklch(54.1% 0.281 293.009)"],
+    ["oklch(82.3% 0.12 346.018)", "oklch(59.2% 0.249 0.584)"],
+    ["oklch(80.8% 0.114 19.571)", "oklch(57.7% 0.245 27.325)"],
+];
+export function AgentIdentityMark({ register, variantIndex, size = "sm", className, }) {
+    const subagent = register === "subagent";
+    const gradientId = `tf-agent-${useId().replace(/:/g, "")}`;
+    const gradient = subagent && variantIndex !== undefined
+        ? SUBAGENT_GRADIENTS[(variantIndex - 1) % SUBAGENT_GRADIENTS.length]
+        : null;
+    return (_jsxs("span", { "data-tf-agent-mark": register, "data-tf-agent-variant": subagent ? variantIndex : undefined, className: cx("tf:flex tf:shrink-0 tf:items-center", size === "fill" ? "tf:size-full tf:justify-center" : "tf:w-fit", className), children: [_jsxs("svg", { viewBox: "0 0 172 172", "aria-hidden": "true", className: cx("tf:shrink-0", size === "fill"
+                    ? "tf:size-full"
+                    : size === "sm"
+                        ? "tf:size-3.5"
+                        : "tf:size-4"), children: [gradient !== null ? (_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { stopColor: gradient[0] }), _jsx("stop", { offset: "1", stopColor: gradient[1] })] }) })) : null, _jsx("rect", { x: "52", y: "0", width: "68", height: "36", rx: "14", fill: gradient !== null ? `url(#${gradientId})` : "currentColor" }), _jsx("rect", { x: "36", y: "52", width: "100", height: "120", rx: "31", fill: gradient !== null ? `url(#${gradientId})` : "currentColor" })] }), _jsx("span", { className: "tf:sr-only", children: subagent
+                    ? variantIndex !== undefined
+                        ? `Subagent ${String(variantIndex)}`
+                        : "Subagent"
+                    : "TeaFlask" })] }));
+}

package/dist/components/appearance-context.d.ts

@@ -0,0 +1,14 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { AssistantThemeMode } from "../appearance/theme.js";
+import type { AssistantSuggestionInput } from "./conversation-view.js";
+export interface AssistantRootProps {
+    style?: CSSProperties;
+    "data-tf-theme"?: AssistantThemeMode;
+}
+export interface AssistantAppearanceValue {
+    rootProps: AssistantRootProps;
+    companionMark: ReactNode | null;
+    suggestions: readonly AssistantSuggestionInput[] | null;
+}
+export declare const AssistantAppearanceContext: import("react").Context<AssistantAppearanceValue | null>;
+export declare function useAssistantAppearance(): AssistantAppearanceValue;

package/dist/components/appearance-context.js

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, useContext, } from "react";
+export const AssistantAppearanceContext = createContext(null);
+export function useAssistantAppearance() {
+    const value = useContext(AssistantAppearanceContext);
+    if (value === null) {
+        throw new Error("Teaflask assistant components must be rendered inside <TeaflaskAssistantProvider>.");
+    }
+    return value;
+}

package/dist/components/approval-card.d.ts

@@ -0,0 +1,7 @@
+import type { ApprovalCardModel } from "../core/approval-inbox.js";
+export declare const APPROVED_NOTE = "Approved";
+export declare const TRUSTED_NOTE = "Approved \u2014 the assistant won't ask about this again in this conversation.";
+export declare const DENIED_NOTE = "Not approved \u2014 the assistant has been told.";
+export declare function ApprovalCard({ card }: {
+    card: ApprovalCardModel;
+}): import("react").JSX.Element;

package/dist/components/approval-card.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useRef, useState } from "react";
+import { activityTitleOf } from "../core/activity-title.js";
+import { humanizedToolName } from "../core/tool-call-display.js";
+import { ApprovalsContext } from "./approval-context.js";
+import { TfButton } from "./primitives/button.js";
+import { TfTextarea } from "./primitives/textarea.js";
+import { Spinner } from "./streaming-states.js";
+export const APPROVED_NOTE = "Approved";
+export const TRUSTED_NOTE = "Approved — the assistant won't ask about this again in this conversation.";
+const COWORKER_TRUSTED_NOTE = "Approved — the coworker won't ask about this again in this task.";
+export const DENIED_NOTE = "Not approved — the assistant has been told.";
+const COWORKER_DENIED_NOTE = "Not approved — the coworker has been told.";
+const STALE_NOTE = "This request was already answered or expired.";
+const GATED_NOTE = "This action asks every time.";
+function approvalSettledNoteOf(status, asker) {
+    switch (status.kind) {
+        case "answered":
+            return status.approved
+                ? status.trusted
+                    ? asker.kind === "coworker"
+                        ? COWORKER_TRUSTED_NOTE
+                        : TRUSTED_NOTE
+                    : APPROVED_NOTE
+                : asker.kind === "coworker"
+                    ? COWORKER_DENIED_NOTE
+                    : DENIED_NOTE;
+        case "stale":
+            return STALE_NOTE;
+        case "actionable":
+        case "submitting":
+            return null;
+    }
+}
+export function ApprovalCard({ card }) {
+    const { submitDecision } = useContext(ApprovalsContext);
+    const [denying, setDenying] = useState(false);
+    const [feedback, setFeedback] = useState("");
+    const submittedForStatusRef = useRef(null);
+    const [submittedForStatus, setSubmittedForStatus] = useState(null);
+    const submitted = submittedForStatus === card.status;
+    const submitOnce = (decision) => {
+        if (card.status.kind !== "actionable" ||
+            submittedForStatusRef.current === card.status) {
+            return;
+        }
+        submittedForStatusRef.current = card.status;
+        setSubmittedForStatus(card.status);
+        void submitDecision(card, decision);
+    };
+    return (_jsxs("div", { "data-tf-approval-card": "", className: "tf:my-2 tf:rounded-2xl tf:border tf:border-tf-border tf:bg-tf-card tf:p-4", role: "group", "aria-label": "Approval request", children: [_jsx(CardHeader, { card: card }), _jsx("p", { "data-tf-approval-prompt": "", className: "tf:mt-3 tf:m-0 tf:text-tf-label tf:leading-relaxed tf:text-tf-muted-foreground", children: card.prompt.trim() === ""
+                    ? "This tool needs your approval before it can run."
+                    : card.prompt }), _jsx("div", { "data-tf-approval-footer": "", children: _jsx(CardFooter, { card: card, denying: denying, submitted: submitted, feedback: feedback, onFeedbackChange: setFeedback, onApprove: () => {
+                        submitOnce({ approved: true });
+                    }, onApproveAndTrust: () => {
+                        submitOnce({ approved: true, trust: true });
+                    }, onStartDenying: () => {
+                        setDenying(true);
+                    }, onStopDenying: () => {
+                        setDenying(false);
+                    }, onSendDenial: () => {
+                        const trimmed = feedback.trim();
+                        submitOnce({
+                            approved: false,
+                            ...(trimmed === "" ? {} : { feedback: trimmed }),
+                        });
+                    } }) })] }));
+}
+function CardHeader({ card }) {
+    return (_jsxs("div", { className: "tf:min-w-0", children: [_jsx("p", { "data-tf-approval-title": "", className: "tf:m-0 tf:text-tf-heading tf:font-semibold", children: "Approval required" }), _jsx("p", { className: "tf:mt-0.5 tf:m-0 tf:truncate tf:font-mono tf:text-xs tf:text-tf-muted-foreground", children: _toolDisplayNameOf(card.toolName) }), card.asker.kind === "coworker" ? (_jsxs("p", { "data-tf-approval-asker": "", className: "tf:mt-1 tf:m-0 tf:truncate tf:text-xs tf:text-tf-muted-foreground", children: ["Asked by a coworker \u2014 ", _coworkerLabelOf(card.asker.label)] })) : null] }));
+}
+function CardFooter({ card, denying, submitted, feedback, onFeedbackChange, onApprove, onApproveAndTrust, onStartDenying, onStopDenying, onSendDenial, }) {
+    switch (card.status.kind) {
+        case "submitting":
+            return (_jsx("p", { className: "tf:mt-3 tf:flex tf:items-center tf:gap-2 tf:text-tf-label tf:text-tf-muted-foreground", children: _jsx(Spinner, { label: "Sending\u2026" }) }));
+        case "answered":
+        case "stale":
+            return (_jsx("p", { className: "tf:mt-3 tf:text-tf-label tf:text-tf-muted-foreground", children: approvalSettledNoteOf(card.status, card.asker) }));
+        case "actionable":
+            return (_jsxs("div", { className: "tf:mt-3 tf:space-y-3", "aria-busy": submitted, children: [card.status.errorSentence !== null ? (_jsx("p", { role: "alert", className: "tf:m-0 tf:text-tf-label tf:text-tf-destructive", children: card.status.errorSentence })) : null, denying ? (_jsx(DenialForm, { asker: card.asker, feedback: feedback, submitted: submitted, onFeedbackChange: onFeedbackChange, onSend: onSendDenial, onBack: onStopDenying })) : (_jsx(DecisionButtons, { card: card, submitted: submitted, onApprove: onApprove, onApproveAndTrust: onApproveAndTrust, onStartDenying: onStartDenying }))] }));
+    }
+}
+function DenialForm({ asker, feedback, submitted, onFeedbackChange, onSend, onBack, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(TfTextarea, { rows: 2, value: feedback, placeholder: asker.kind === "coworker"
+                    ? "Tell the coworker why (optional)"
+                    : "Tell the assistant why (optional)", "aria-label": "Reason for denying", onChange: (event) => {
+                    onFeedbackChange(event.target.value);
+                } }), _jsxs("div", { className: "tf:flex tf:gap-2", children: [_jsx(TfButton, { disabled: submitted, onClick: onSend, children: "Send denial" }), _jsx(TfButton, { variant: "ghost", disabled: submitted, onClick: onBack, children: "Back" })] })] }));
+}
+function DecisionButtons({ card, submitted, onApprove, onApproveAndTrust, onStartDenying, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tf:flex tf:flex-wrap tf:gap-2", children: [_jsx(TfButton, { disabled: submitted, onClick: onApprove, children: "Approve" }), _cardOffersTrust(card) ? (_jsx(TfButton, { variant: "ghost", disabled: submitted, onClick: onApproveAndTrust, children: _trustLabelOf(card.asker) })) : null, _jsx(TfButton, { variant: "ghost", disabled: submitted, onClick: onStartDenying, children: "Deny" })] }), card.gated ? (_jsx("p", { className: "tf:m-0 tf:text-xs tf:text-tf-muted-foreground", children: GATED_NOTE })) : null] }));
+}
+function _cardOffersTrust(card) {
+    return !card.gated && card.trustAvailable;
+}
+function _trustLabelOf(asker) {
+    return asker.kind === "coworker"
+        ? "Approve for this task"
+        : "Approve for this conversation";
+}
+function _coworkerLabelOf(label) {
+    const title = activityTitleOf(label);
+    return title === "" ? "Delegated task" : title;
+}
+function _toolDisplayNameOf(toolName) {
+    if (toolName === null || toolName.trim() === "") {
+        return "Tool request";
+    }
+    const leaf = toolName.includes("__")
+        ? (toolName.split("__").at(-1) ?? toolName)
+        : toolName;
+    const humanized = humanizedToolName(leaf);
+    return humanized === ""
+        ? toolName
+        : humanized[0].toUpperCase() + humanized.slice(1);
+}

package/dist/components/approval-context.d.ts

@@ -0,0 +1,8 @@
+import type { ApprovalCardModel, ApprovalDecisionInput } from "../core/approval-inbox.js";
+export interface ApprovalSurface {
+    cards: readonly ApprovalCardModel[];
+    submitDecision: (card: ApprovalCardModel, decision: ApprovalDecisionInput) => Promise<void>;
+}
+export declare const ApprovalsContext: import("react").Context<ApprovalSurface>;
+export declare function useApprovals(): ApprovalSurface;
+export declare function anchoredCardsFor(cards: readonly ApprovalCardModel[], toolCallId: string): ApprovalCardModel[];

package/dist/components/approval-context.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext, useContext } from "react";
+const EMPTY_APPROVAL_SURFACE = {
+    cards: [],
+    submitDecision: (card) => {
+        const error = new Error(`submitDecision called outside an approval surface (interrupt ${card.interruptId}) — the decision was NOT sent.`);
+        console.error(error);
+        return Promise.reject(error);
+    },
+};
+export const ApprovalsContext = createContext(EMPTY_APPROVAL_SURFACE);
+export function useApprovals() {
+    return useContext(ApprovalsContext);
+}
+export function anchoredCardsFor(cards, toolCallId) {
+    return cards.filter((card) => card.anchored && card.toolCallId === toolCallId);
+}

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

@@ -0,0 +1,5 @@
+export interface AssistantCompanionProps {
+    corner?: "bottom-right" | "bottom-left";
+    "aria-label"?: string;
+}
+export declare function AssistantCompanion(props: AssistantCompanionProps): import("react").JSX.Element;

package/dist/components/assistant-companion.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { closeCompanionDrawer, companionDrawerOpen, openCompanionDrawer, } from "../core/companion-drawer-flag.js";
+import { companionChromeOf } from "../core/companion-presence.js";
+import { readPanelMode, subscribePanelMode, writePanelMode, } from "../persistence/panel-mode.js";
+import { useAssistantAppearance } from "./appearance-context.js";
+import { CompanionDrawer } from "./companion-drawer.js";
+import { CompanionMark } from "./companion-mark.js";
+import { TfButton } from "./primitives/button.js";
+import { useAssistantSession } from "./teaflask-assistant-provider.js";
+import { SurfaceBoundary } from "./surface-boundary.js";
+import { useAssistantSurfacePresence } from "./use-assistant-surface-presence.js";
+import { usePerchClearance } from "./use-perch-clearance.js";
+import { useCell } from "./use-store-cell.js";
+const DRAWER_EXIT_HOLD_MS = 400;
+export function AssistantCompanion(props) {
+    return (_jsx(SurfaceBoundary, { surface: "companion", degrade: "silent", children: _jsx(AssistantCompanionInner, { ...props }) }));
+}
+function AssistantCompanionInner({ corner = "bottom-right", "aria-label": ariaLabel = "Open assistant", }) {
+    const { publishableKey } = useAssistantSession();
+    const surfaces = useAssistantSurfacePresence();
+    const { rootProps } = useAssistantAppearance();
+    const drawer = useCompanionDrawer();
+    const panelMode = usePanelMode(publishableKey);
+    const sidebarFits = useViewportFitsSidebar();
+    const dock = sidebarFits && panelMode === "sidebar" ? "sidebar" : "floating";
+    const changeDock = useCallback((next) => {
+        writePanelMode(publishableKey, next);
+    }, [publishableKey]);
+    const chrome = companionChromeOf({ surfaces, expanded: drawer.expanded });
+    const dockRef = useRef(null);
+    const dockVisible = chrome === "companion";
+    const parkOnForcedHide = useDockPresence(dockRef, dockVisible);
+    usePerchClearance(dockRef, dockVisible);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: dockRef, popover: "manual", "data-tf-assistant": "", "data-tf-companion-dock": corner, onToggle: parkOnForcedHide, ...rootProps, children: chrome === "companion" ? (_jsx(MinimizedCompanion, { ariaLabel: ariaLabel, onOpen: drawer.open })) : null }), chrome === "drawer" || drawer.expanded || drawer.exiting ? (_jsx(CompanionDrawer, { open: chrome === "drawer", exiting: drawer.exiting, focusOnOpen: drawer.openedByGesture, onOpenChange: drawer.changeOpen, corner: corner, dock: dock, onDockChange: sidebarFits ? changeDock : null })) : null] }));
+}
+function useCompanionDrawer() {
+    const expanded = useCell(companionDrawerOpen);
+    const [drawerExiting, setDrawerExiting] = useState(false);
+    const [openedByGesture, setOpenedByGesture] = useState(false);
+    if (drawerExiting && expanded) {
+        setDrawerExiting(false);
+    }
+    const openDrawer = useCallback(() => {
+        setOpenedByGesture(true);
+        openCompanionDrawer();
+    }, []);
+    const changeDrawerOpen = useCallback((next) => {
+        setOpenedByGesture(next);
+        if (next) {
+            openCompanionDrawer();
+            return;
+        }
+        setDrawerExiting(true);
+        closeCompanionDrawer();
+    }, []);
+    useEffect(() => {
+        if (!drawerExiting) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            setDrawerExiting(false);
+        }, DRAWER_EXIT_HOLD_MS);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [drawerExiting]);
+    return {
+        expanded,
+        exiting: drawerExiting,
+        openedByGesture,
+        open: openDrawer,
+        changeOpen: changeDrawerOpen,
+    };
+}
+function MinimizedCompanion({ ariaLabel, onOpen, }) {
+    return (_jsx("div", { "data-tf-companion-perch": "", children: _jsx(TfButton, { variant: "bare", "data-tf-companion-body": "", "aria-label": ariaLabel, onClick: onOpen, children: _jsx(CompanionMark, {}) }) }));
+}
+function usePanelMode(publishableKey) {
+    return useSyncExternalStore(subscribePanelMode, () => readPanelMode(publishableKey), () => "floating");
+}
+const SIDEBAR_MIN_VIEWPORT_QUERY = "(min-width: 1024px)";
+function _subscribeSidebarViewport(onChange) {
+    const media = window.matchMedia(SIDEBAR_MIN_VIEWPORT_QUERY);
+    media.addEventListener("change", onChange);
+    return () => {
+        media.removeEventListener("change", onChange);
+    };
+}
+function useViewportFitsSidebar() {
+    return useSyncExternalStore(_subscribeSidebarViewport, () => window.matchMedia(SIDEBAR_MIN_VIEWPORT_QUERY).matches, () => false);
+}
+function useDockPresence(dockRef, visible) {
+    const parkedRef = useRef(false);
+    useEffect(() => {
+        const dock = dockRef.current;
+        if (dock === null || typeof dock.showPopover !== "function") {
+            return;
+        }
+        const doc = dock.ownerDocument;
+        const showing = dock.matches(":popover-open");
+        if (visible && !showing && !parkedRef.current) {
+            if (doc.querySelector("dialog:modal") !== null ||
+                doc.fullscreenElement !== null) {
+                parkedRef.current = true;
+                return;
+            }
+            dock.showPopover();
+        }
+        else if (!visible) {
+            if (showing) {
+                dock.hidePopover();
+            }
+            parkedRef.current = false;
+        }
+    }, [dockRef, visible]);
+    useEffect(() => {
+        const dock = dockRef.current;
+        if (!visible || dock === null || typeof dock.showPopover !== "function") {
+            return;
+        }
+        const doc = dock.ownerDocument;
+        const restoreWhenClear = () => {
+            if (!parkedRef.current ||
+                doc.querySelector("dialog:modal") !== null ||
+                doc.fullscreenElement !== null) {
+                return;
+            }
+            if (!dock.matches(":popover-open")) {
+                dock.showPopover();
+            }
+            parkedRef.current = false;
+        };
+        doc.addEventListener("close", restoreWhenClear, true);
+        doc.addEventListener("fullscreenchange", restoreWhenClear);
+        return () => {
+            doc.removeEventListener("close", restoreWhenClear, true);
+            doc.removeEventListener("fullscreenchange", restoreWhenClear);
+        };
+    }, [dockRef, visible]);
+    return useCallback((event) => {
+        if (event.newState === "closed" && visible) {
+            parkedRef.current = true;
+        }
+    }, [visible]);
+}

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import { type AssistantSuggestionInput } from "./conversation-view.js";
+export interface AssistantChrome {
+    title: string;
+    conversationTitle: string;
+    historyAvailable: boolean;
+    historyOpen: boolean;
+    historyMenuId: string;
+    historyTriggerId: string;
+    openHistory: () => void;
+    toggleHistory: () => void;
+    newConversation: () => void;
+}
+export interface AssistantPageProps {
+    frameless?: boolean;
+    suggestions?: readonly AssistantSuggestionInput[];
+    initialPrompt?: string;
+    welcomeTitle?: string;
+    welcomeMark?: ReactNode;
+    title?: string;
+    renderChrome?: (chrome: AssistantChrome) => ReactNode;
+}
+export declare function AssistantPage(props: AssistantPageProps): import("react").JSX.Element;

package/dist/components/assistant-page.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, } from "react";
+import { useAssistantAppearance, } from "./appearance-context.js";
+import { NO_GATE } from "../core/connect-gate.js";
+import { ObservableCell } from "../core/observable-cell.js";
+import { ConversationView, SetupErrorState, } from "./conversation-view.js";
+import { useOptionalAssistantSession } from "./teaflask-assistant-provider.js";
+import { useCell } from "./use-store-cell.js";
+import { CompanionHeaderTitle, CompanionHistoryMenu, } from "./companion-history-menu.js";
+import { SurfaceBoundary } from "./surface-boundary.js";
+import { ComposeIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+import { cx } from "./primitives/cx.js";
+import { useAssistantConversation, } from "./use-assistant-conversation.js";
+import { useRegisterAssistantSurface } from "./use-register-assistant-surface.js";
+const NO_GATE_CELL = new ObservableCell(NO_GATE);
+export function AssistantPage(props) {
+    return (_jsx(SurfaceBoundary, { surface: "page", children: _jsx(AssistantPageInner, { ...props }) }));
+}
+function AssistantPageInner({ frameless = false, suggestions, initialPrompt, title = "Assistant", welcomeTitle, welcomeMark, renderChrome, }) {
+    const core = useAssistantConversation();
+    useInitialPrompt(core, initialPrompt);
+    const { rootProps } = useAssistantAppearance();
+    useRegisterAssistantSurface("full-surface");
+    const { historyOpen, setHistoryOpen, historyMenuId, historyTriggerId, historyTriggerRef, openHistory, toggleHistory, startFresh, } = useHistoryDisclosure(core);
+    const conversationTitle = core.conversation?.thread.title || title;
+    if (core.setupError !== null) {
+        return (_jsx(SetupErrorSurface, { rootProps: rootProps, frameless: frameless, setupError: core.setupError }));
+    }
+    return (_jsxs("div", { "data-tf-assistant": "", ...rootProps, className: cx("tf:relative tf:flex tf:h-full tf:min-h-0 tf:w-full tf:overflow-hidden tf:bg-tf-background tf:text-tf-foreground", !frameless && "tf:rounded-tf tf:border"), children: [_jsxs("div", { className: "tf:flex tf:min-h-0 tf:min-w-0 tf:flex-1 tf:flex-col", children: [renderChrome === undefined ? (_jsx(PageHeaderStrip, { title: title, historyExpected: core.historyExpected, historyMenuId: historyMenuId, historyOpen: historyOpen, onHistoryOpenChange: setHistoryOpen, historyTriggerRef: historyTriggerRef, onNewConversation: startFresh })) : (_jsx("div", { "data-tf-host-view": "", className: "tf:contents", children: renderChrome({
+                            title,
+                            conversationTitle,
+                            historyAvailable: core.historyExpected,
+                            historyOpen,
+                            historyMenuId,
+                            historyTriggerId,
+                            openHistory,
+                            toggleHistory,
+                            newConversation: startFresh,
+                        }) })), _jsx(ConversationView, { core: core, surface: "page", suggestions: suggestions, welcomeTitle: welcomeTitle, welcomeMark: welcomeMark })] }), core.historyExpected && historyOpen ? (_jsx(SurfaceBoundary, { surface: "history-menu", children: _jsx(CompanionHistoryMenu, { id: historyMenuId, onClose: () => {
+                        setHistoryOpen(false);
+                    }, triggerRef: renderChrome === undefined ? historyTriggerRef : undefined, triggerId: renderChrome === undefined ? undefined : historyTriggerId, insetFromSurfaceTop: renderChrome !== undefined }) })) : null] }));
+}
+function useHistoryDisclosure(core) {
+    const [historyOpen, setHistoryOpen] = useState(false);
+    const historyMenuId = useId();
+    const historyTriggerId = `${historyMenuId}-trigger`;
+    const historyTriggerRef = useRef(null);
+    function openHistory() {
+        setHistoryOpen(true);
+    }
+    function toggleHistory() {
+        setHistoryOpen((open) => !open);
+    }
+    function startFresh() {
+        setHistoryOpen(false);
+        core.startNewConversation();
+    }
+    return {
+        historyOpen,
+        setHistoryOpen,
+        historyMenuId,
+        historyTriggerId,
+        historyTriggerRef,
+        openHistory,
+        toggleHistory,
+        startFresh,
+    };
+}
+function SetupErrorSurface({ rootProps, frameless, setupError, }) {
+    return (_jsx("div", { "data-tf-assistant": "", ...rootProps, className: cx("tf:flex tf:h-full tf:min-h-0 tf:w-full tf:items-center tf:justify-center tf:bg-tf-background tf:p-6", !frameless && "tf:rounded-tf tf:border"), children: _jsx(SetupErrorState, { message: setupError.message, code: setupError.code }) }));
+}
+function PageHeaderStrip({ title, historyExpected, historyMenuId, historyOpen, onHistoryOpenChange, historyTriggerRef, onNewConversation, }) {
+    return (_jsxs("div", { className: "tf:flex tf:h-14 tf:shrink-0 tf:items-center tf:gap-1 tf:border-b tf:pr-2 tf:pl-4", children: [historyExpected ? (_jsx(CompanionHeaderTitle, { menuId: historyMenuId, open: historyOpen, onOpenChange: onHistoryOpenChange, triggerRef: historyTriggerRef, fallbackTitle: title })) : (_jsx("h2", { className: "tf:min-w-0 tf:flex-1 tf:truncate tf:text-tf-heading tf:font-medium", children: title })), _jsx(TfButton, { variant: "icon", "aria-label": "New conversation", title: "New conversation", onClick: onNewConversation, children: _jsx(ComposeIcon, {}) })] }));
+}
+function useInitialPrompt(core, prompt) {
+    const session = useOptionalAssistantSession();
+    const gate = useCell(session?.conversationGate ?? NO_GATE_CELL);
+    const tier = session?.tier ?? null;
+    const sent = useRef(false);
+    const { sendMessage, pendingSend } = core.composerContract;
+    useEffect(() => {
+        if (sent.current || prompt === undefined || prompt.trim() === "") {
+            return;
+        }
+        if (core.setupError !== null ||
+            core.conversation !== null ||
+            core.threadOpening ||
+            gate.kind !== "none" ||
+            pendingSend ||
+            tier === null) {
+            return;
+        }
+        sent.current = true;
+        void sendMessage(prompt);
+    }, [
+        prompt,
+        core.setupError,
+        core.conversation,
+        core.threadOpening,
+        gate.kind,
+        pendingSend,
+        tier,
+        sendMessage,
+    ]);
+}

package/dist/components/assistant-palette-body.d.ts

@@ -0,0 +1,3 @@
+export default function AssistantPaletteBody({ onOpenChange, }: {
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

package/dist/components/assistant-palette-body.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { ConversationView, SetupErrorState } from "./conversation-view.js";
+import { CloseIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+import { useAssistantConversation } from "./use-assistant-conversation.js";
+export default function AssistantPaletteBody({ onOpenChange, }) {
+    const core = useAssistantConversation();
+    const resumeStoredThread = core.resumeStoredThread;
+    useEffect(() => {
+        resumeStoredThread();
+    }, [resumeStoredThread]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tf:flex tf:h-12 tf:shrink-0 tf:items-center tf:gap-1 tf:border-b tf:pr-2 tf:pl-4", children: [_jsx("h2", { className: "tf:flex-1 tf:text-tf-heading tf:font-medium", children: "Assistant" }), core.setupError === null ? (_jsx(TfButton, { variant: "ghost", onClick: (event) => {
+                            core.startNewConversation();
+                            const dialog = event.currentTarget.closest("dialog");
+                            requestAnimationFrame(() => {
+                                dialog
+                                    ?.querySelector("[data-tf-autofocus]")
+                                    ?.focus();
+                            });
+                        }, children: "New conversation" })) : null, _jsx(TfButton, { variant: "icon", "aria-label": "Close", onClick: () => {
+                            onOpenChange(false);
+                        }, children: _jsx(CloseIcon, {}) })] }), core.setupError !== null ? (_jsx("div", { className: "tf:flex tf:flex-1 tf:items-center tf:justify-center tf:p-6", children: _jsx(SetupErrorState, { message: core.setupError.message, code: core.setupError.code }) })) : (_jsx(ConversationView, { core: core, surface: "palette" }))] }));
+}

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

@@ -0,0 +1,5 @@
+export interface AssistantPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function AssistantPalette(props: AssistantPaletteProps): import("react").JSX.Element;