@teaflask/assistant 0.0.0 → 0.6.0

package/dist/components/suspension-surfaces.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { ApprovalCard } from "./approval-card.js";
+import { ApprovalsContext } from "./approval-context.js";
+import { ElicitationsContext } from "./elicitation-context.js";
+import { TfButton } from "./primitives/button.js";
+import { QuestionPanel } from "./question-panel.js";
+import { SurfaceBoundary } from "./surface-boundary.js";
+import { clampedCursorOf, decisionKeyOf, suspensionQueueOf, } from "../core/suspension-queue.js";
+export function SuspensionSurfaces({ rowIndexByToolCallId, }) {
+    const { cards } = useContext(ApprovalsContext);
+    const { cards: elicitationCards } = useContext(ElicitationsContext);
+    const queue = useMemo(() => suspensionQueueOf(cards, elicitationCards, rowIndexByToolCallId), [cards, elicitationCards, rowIndexByToolCallId]);
+    const queueKeys = useMemo(() => queue.map(decisionKeyOf), [queue]);
+    const { position, current, currentKey, currentWrapRef, previousButtonRef, nextButtonRef, pagePrevious, pageNext, } = useDecisionQueueHold(queue, queueKeys);
+    const { scrollWellRef, foldBelow, declareFold } = useScrollWellFold(currentKey);
+    const { captureConversationScope, noteFocusWithin, noteBlur } = useDecisionFocusReturn(queueKeys, currentKey, currentWrapRef);
+    if (current === null) {
+        return null;
+    }
+    return (_jsxs("section", { ref: captureConversationScope, "data-tf-shelf-item": "", "data-tf-suspension-surfaces": "", "aria-label": "Pending decisions", className: "tf:w-full", onFocus: noteFocusWithin, onBlur: noteBlur, children: [queue.length > 1 ? (_jsxs("div", { "data-tf-suspension-pager": "", className: "tf:flex tf:items-center tf:justify-between tf:gap-2 tf:pb-1 tf:text-tf-label tf:text-tf-muted-foreground", children: [_jsx("span", { children: `Decision ${String(position + 1)} of ${String(queue.length)}` }), _jsxs("span", { className: "tf:flex tf:gap-1", children: [_jsx(TfButton, { ref: previousButtonRef, variant: "ghost", disabled: position === 0, onClick: pagePrevious, children: "Previous" }), _jsx(TfButton, { ref: nextButtonRef, variant: "ghost", disabled: position === queue.length - 1, onClick: pageNext, children: "Next" })] })] })) : null, _jsx("div", { ref: scrollWellRef, "data-tf-decision-scroll-well": "", "data-tf-fold-below": foldBelow ? "" : undefined, className: "tf:overflow-y-auto tf:overscroll-contain", onScroll: declareFold, children: _jsx("div", { ref: currentWrapRef, "data-tf-current-decision": "", tabIndex: -1, className: "tf:outline-none", children: _jsx(SurfaceBoundary, { surface: "decision-card", children: current.kind === "approval" ? (_jsx(ApprovalCard, { card: current.card })) : (_jsx(QuestionPanel, { card: current.card })) }) }, currentKey) })] }));
+}
+function useDecisionQueueHold(queue, queueKeys) {
+    const [hold, setHold] = useState({ key: null, position: 0 });
+    const heldIndex = hold.key === null ? -1 : queueKeys.indexOf(hold.key);
+    const position = heldIndex >= 0 ? heldIndex : clampedCursorOf(hold.position, queue.length);
+    const current = queue.length === 0 ? null : queue[position];
+    const currentKey = current === null ? null : decisionKeyOf(current);
+    if (currentKey !== hold.key || position !== hold.position) {
+        setHold({ key: currentKey, position });
+    }
+    const currentWrapRef = useRef(null);
+    const previousButtonRef = useRef(null);
+    const nextButtonRef = useRef(null);
+    const pendingPagerFocusRef = useRef(null);
+    useEffect(() => {
+        if (pendingPagerFocusRef.current === "previous") {
+            previousButtonRef.current?.focus();
+        }
+        else if (pendingPagerFocusRef.current === "next") {
+            nextButtonRef.current?.focus();
+        }
+        pendingPagerFocusRef.current = null;
+    });
+    return {
+        position,
+        current,
+        currentKey,
+        currentWrapRef,
+        previousButtonRef,
+        nextButtonRef,
+        pagePrevious: () => {
+            const target = clampedCursorOf(position - 1, queue.length);
+            setHold({ key: queueKeys[target] ?? null, position: target });
+            if (target === 0) {
+                pendingPagerFocusRef.current = "next";
+            }
+        },
+        pageNext: () => {
+            const target = clampedCursorOf(position + 1, queue.length);
+            setHold({ key: queueKeys[target] ?? null, position: target });
+            if (target === queue.length - 1) {
+                pendingPagerFocusRef.current = "previous";
+            }
+        },
+    };
+}
+function useScrollWellFold(currentKey) {
+    const scrollWellRef = useRef(null);
+    const [foldBelow, setFoldBelow] = useState(false);
+    const declareFold = useCallback(() => {
+        const well = scrollWellRef.current;
+        if (well === null) {
+            return;
+        }
+        setFoldBelow(well.scrollHeight - well.scrollTop - well.clientHeight > 1);
+    }, []);
+    useEffect(() => {
+        const well = scrollWellRef.current;
+        if (well === null) {
+            return;
+        }
+        well.scrollTop = 0;
+        declareFold();
+        const content = well.firstElementChild;
+        if (!(content instanceof HTMLElement) ||
+            typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            declareFold();
+        });
+        observer.observe(content);
+        return () => {
+            observer.disconnect();
+        };
+    }, [currentKey, declareFold]);
+    return { scrollWellRef, foldBelow, declareFold };
+}
+function useDecisionFocusReturn(queueKeys, currentKey, currentWrapRef) {
+    const focusWithinRef = useRef(false);
+    const conversationScopeRef = useRef(null);
+    const previousKeyRef = useRef(null);
+    useEffect(() => {
+        const previousKey = previousKeyRef.current;
+        previousKeyRef.current = currentKey;
+        if (previousKey === null) {
+            return;
+        }
+        const currentDecisionLeft = !queueKeys.includes(previousKey);
+        if (!currentDecisionLeft || !focusWithinRef.current) {
+            return;
+        }
+        if (currentKey !== null) {
+            currentWrapRef.current?.focus();
+            return;
+        }
+        focusWithinRef.current = false;
+        const composerInput = conversationScopeRef.current?.querySelector("[data-tf-composer-wash] textarea");
+        composerInput?.focus();
+    }, [queueKeys, currentKey, currentWrapRef]);
+    return {
+        captureConversationScope: (node) => {
+            if (node !== null) {
+                conversationScopeRef.current =
+                    node.closest("[data-tf-conversation]") ??
+                        node.getRootNode();
+            }
+        },
+        noteFocusWithin: () => {
+            focusWithinRef.current = true;
+        },
+        noteBlur: (event) => {
+            if (event.relatedTarget !== null &&
+                !event.currentTarget.contains(event.relatedTarget)) {
+                focusWithinRef.current = false;
+            }
+        },
+    };
+}

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

@@ -0,0 +1,69 @@
+import { type ReactNode } from "react";
+import { type AssistantTheme, type AssistantThemeMode } from "../appearance/theme.js";
+import type { ActionsAdapter } from "../contract/actions-adapter.js";
+import type { ServedAttachmentPolicy, ServedModelChoice, ServedSuggestionsConfig } from "../contract/assistant-config.js";
+import type { VisitorTier } from "../contract/identity.js";
+import type { SubscriptionProvider, SubscriptionStatus } from "../contract/subscriptions.js";
+import type { AssistantTelemetryEvent } from "../contract/telemetry.js";
+import type { ConversationGate } from "../core/connect-gate.js";
+import type { ReadonlyCell } from "../core/observable-cell.js";
+import type { AssistantConversationStore } from "../core/conversation-store.js";
+import type { ExecuteActionIntent, HostNavigate } from "../core/execution-handlers.js";
+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";
+export interface TeaflaskAssistantIdentityProps {
+    userId: string;
+    getEndUserToken: () => string | null | Promise<string | null>;
+}
+export interface TeaflaskAssistantAnonymousProps {
+    userId?: undefined;
+    getEndUserToken?: undefined;
+}
+export type TeaflaskAssistantProviderProps = TeaflaskAssistantProviderBaseProps & (TeaflaskAssistantIdentityProps | TeaflaskAssistantAnonymousProps);
+export interface TeaflaskAssistantProviderBaseProps {
+    publishableKey: string;
+    baseUrl?: string;
+    actionsAdapter?: ActionsAdapter;
+    onNavigate?: (path: string) => void | Promise<void>;
+    onError?: (error: Error) => void;
+    onTelemetry?: (event: AssistantTelemetryEvent) => void;
+    theme?: AssistantTheme;
+    mode?: AssistantThemeMode;
+    companionMark?: ReactNode;
+    suggestions?: readonly AssistantSuggestionInput[];
+    toolViews?: ToolViewRegistry;
+    children?: ReactNode;
+}
+interface AssistantSessionValue {
+    session: TokenSession;
+    store: AssistantConversationStore;
+    publishableKey: string;
+    identityProvided: boolean;
+    navigate: HostNavigate | null;
+    executeActionIntent: ExecuteActionIntent | null;
+    tier: VisitorTier | null;
+    setupError: ServingApiError | null;
+    assistantConfig: ReadonlyCell<ServedSuggestionsConfig | null>;
+    attachmentPolicy: ReadonlyCell<ServedAttachmentPolicy | null>;
+    modelChoice: ReadonlyCell<ServedModelChoice | null>;
+    configAnswered: ReadonlyCell<boolean>;
+    ensureAssistantConfig: () => void;
+    refreshAssistantConfig: () => void;
+    conversationGate: ReadonlyCell<ConversationGate>;
+    subscriptions: ReadonlyCell<SubscriptionStatus[] | null>;
+    ensureSubscriptions: () => void;
+    refreshSubscriptions: () => void;
+    connectOpenRequested: ReadonlyCell<boolean>;
+    requestSubscriptionConnect: () => void;
+    acknowledgeSubscriptionConnect: () => void;
+    planNoticeDue: ReadonlyCell<SubscriptionProvider | null>;
+    notePlanSignedIn: (provider: SubscriptionProvider) => void;
+    acknowledgePlanNotice: () => void;
+    reportError: (error: Error) => void;
+}
+export declare function useAssistantSession(): AssistantSessionValue;
+export declare function useOptionalAssistantSession(): AssistantSessionValue | null;
+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-provider.js

@@ -0,0 +1,203 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, } from "react";
+import { themeToStyleVars, } from "../appearance/theme.js";
+import { assistantSessionRegistry, } from "../core/assistant-session-registry.js";
+import { hostFillDeclines } from "../core/host-fill.js";
+import { IDENTITY_PAIR_WARNING, identityPairIsHalfSet, namedIdentityOf, } from "../core/identity-pair.js";
+import { performActionIntent } from "../transport/actions-adapter.js";
+import { AssistantAppearanceContext, } from "./appearance-context.js";
+import { ToolViewRegistryContext } from "./tool-view-registry-context.js";
+import { ConversationSurfacesProvider } from "./conversation-surfaces-provider.js";
+import { useCell } from "./use-store-cell.js";
+const AssistantSessionContext = createContext(null);
+export function useAssistantSession() {
+    const value = useContext(AssistantSessionContext);
+    if (value === null) {
+        throw new Error("Teaflask assistant components must be rendered inside <TeaflaskAssistantProvider>.");
+    }
+    return value;
+}
+export function useOptionalAssistantSession() {
+    return useContext(AssistantSessionContext);
+}
+export function TeaflaskAssistantProvider({ publishableKey, baseUrl, userId, getEndUserToken, actionsAdapter, onNavigate, onError, onTelemetry, theme, mode, companionMark, suggestions, toolViews, children, }) {
+    const identity = useNamedIdentity({ userId, getEndUserToken });
+    const host = useHostCallbackRefs({
+        getEndUserToken: identity?.getEndUserToken,
+        actionsAdapter,
+        onNavigate,
+        onError,
+        onTelemetry,
+    });
+    const value = useSessionRegistration({
+        publishableKey,
+        baseUrl,
+        userId: identity?.userId,
+        host,
+    });
+    const appearance = useAppearanceValue({
+        theme,
+        mode,
+        companionMark,
+        suggestions,
+    });
+    return (_jsx(AssistantSessionContext.Provider, { value: value, children: _jsx(AssistantAppearanceContext.Provider, { value: appearance, children: _jsx(ToolViewRegistryContext.Provider, { value: toolViews ?? null, children: _jsx(ConversationSurfacesProvider, { store: value.store, children: children }) }) }) }));
+}
+let warnedHalfSetPair = false;
+function useNamedIdentity(input) {
+    const halfSet = identityPairIsHalfSet(input);
+    useEffect(() => {
+        if (halfSet && !warnedHalfSetPair) {
+            warnedHalfSetPair = true;
+            console.warn(`[teaflask-assistant] ${IDENTITY_PAIR_WARNING}`);
+        }
+    }, [halfSet]);
+    return namedIdentityOf(input);
+}
+function useHostCallbackRefs({ getEndUserToken, actionsAdapter, onNavigate, onError, onTelemetry, }) {
+    const getEndUserTokenRef = useRef(getEndUserToken);
+    const actionsAdapterRef = useRef(actionsAdapter);
+    const onNavigateRef = useRef(onNavigate);
+    const onErrorRef = useRef(onError);
+    const onTelemetryRef = useRef(onTelemetry);
+    useEffect(() => {
+        getEndUserTokenRef.current = getEndUserToken;
+        actionsAdapterRef.current = actionsAdapter;
+        onNavigateRef.current = onNavigate;
+        onErrorRef.current = onError;
+        onTelemetryRef.current = onTelemetry;
+    });
+    const identityProvided = getEndUserToken !== undefined;
+    const actionsProvided = actionsAdapter !== undefined;
+    const navigationProvided = onNavigate !== undefined;
+    const resolveEndUserToken = useCallback(() => getEndUserTokenRef.current?.() ?? null, []);
+    const hostNavigate = useCallback(async (path) => {
+        await onNavigateRef.current?.(path);
+    }, []);
+    const executeActionIntent = useCallback((intent) => performActionIntent(_wiredAdapterOf(actionsAdapterRef.current), intent), []);
+    const reportError = useCallback((error) => {
+        onErrorRef.current?.(error);
+    }, []);
+    const recordTelemetry = useCallback((event) => {
+        onTelemetryRef.current?.(event);
+    }, []);
+    const telemetryProvided = onTelemetry !== undefined;
+    const hostCapabilitiesRef = useRef({
+        navigate: null,
+        executeActionIntent: null,
+    });
+    useEffect(() => {
+        hostCapabilitiesRef.current = {
+            navigate: navigationProvided ? hostNavigate : null,
+            executeActionIntent: actionsProvided ? executeActionIntent : null,
+        };
+    });
+    const hostCapabilitiesOf = useCallback(() => hostCapabilitiesRef.current, []);
+    return {
+        identityProvided,
+        actionsProvided,
+        navigationProvided,
+        telemetryProvided,
+        resolveEndUserToken,
+        hostNavigate,
+        executeActionIntent,
+        reportError,
+        recordTelemetry,
+        hostCapabilitiesOf,
+    };
+}
+function useSessionRegistration({ publishableKey, baseUrl, userId, host, }) {
+    const { identityProvided, actionsProvided, navigationProvided, telemetryProvided, resolveEndUserToken, hostNavigate, executeActionIntent, reportError, recordTelemetry, hostCapabilitiesOf, } = host;
+    const entry = useMemo(() => assistantSessionRegistry.entryFor({ publishableKey, baseUrl, userId }), [publishableKey, baseUrl, userId]);
+    const session = entry.session;
+    const store = entry.store;
+    useEffect(() => {
+        const registrant = {
+            resolveEndUserToken: identityProvided ? resolveEndUserToken : null,
+            hostCapabilitiesOf,
+            reportError,
+            onTelemetry: telemetryProvided ? recordTelemetry : null,
+        };
+        return assistantSessionRegistry.retain(entry, registrant);
+    }, [
+        entry,
+        identityProvided,
+        resolveEndUserToken,
+        hostCapabilitiesOf,
+        reportError,
+        telemetryProvided,
+        recordTelemetry,
+    ]);
+    const tier = useCell(entry.tier);
+    const setupError = useCell(entry.setupError);
+    return useMemo(() => ({
+        session,
+        store,
+        publishableKey,
+        identityProvided,
+        navigate: navigationProvided ? hostNavigate : null,
+        executeActionIntent: actionsProvided ? executeActionIntent : null,
+        tier,
+        setupError,
+        assistantConfig: entry.assistantConfig,
+        attachmentPolicy: entry.attachmentPolicy,
+        modelChoice: entry.modelChoice,
+        configAnswered: entry.configAnswered,
+        ensureAssistantConfig: entry.ensureAssistantConfig,
+        refreshAssistantConfig: entry.refreshAssistantConfig,
+        conversationGate: entry.conversationGate,
+        subscriptions: entry.subscriptions,
+        ensureSubscriptions: entry.ensureSubscriptions,
+        refreshSubscriptions: entry.refreshSubscriptions,
+        connectOpenRequested: entry.connectOpenRequested,
+        requestSubscriptionConnect: entry.requestSubscriptionConnect,
+        acknowledgeSubscriptionConnect: entry.acknowledgeSubscriptionConnect,
+        planNoticeDue: entry.planNoticeDue,
+        notePlanSignedIn: entry.notePlanSignedIn,
+        acknowledgePlanNotice: entry.acknowledgePlanNotice,
+        reportError,
+    }), [
+        session,
+        store,
+        publishableKey,
+        identityProvided,
+        navigationProvided,
+        hostNavigate,
+        actionsProvided,
+        executeActionIntent,
+        tier,
+        setupError,
+        entry,
+        reportError,
+    ]);
+}
+function _companionMarkOf(companionMark) {
+    return hostFillDeclines(companionMark) ? null : companionMark;
+}
+function useAppearanceValue({ theme, mode, companionMark, suggestions, }) {
+    const themeJson = theme === undefined ? null : JSON.stringify(theme);
+    const suggestionsJson = suggestions === undefined ? null : JSON.stringify(suggestions);
+    return useMemo(() => {
+        const rootProps = {};
+        if (themeJson !== null) {
+            rootProps.style = themeToStyleVars(JSON.parse(themeJson));
+        }
+        if (mode !== undefined) {
+            rootProps["data-tf-theme"] = mode;
+        }
+        return {
+            rootProps,
+            companionMark: _companionMarkOf(companionMark),
+            suggestions: suggestionsJson === null
+                ? null
+                : JSON.parse(suggestionsJson),
+        };
+    }, [themeJson, mode, companionMark, suggestionsJson]);
+}
+function _wiredAdapterOf(adapter) {
+    if (adapter === undefined) {
+        throw new Error("The actions adapter was removed while an action was executing.");
+    }
+    return adapter;
+}

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

@@ -0,0 +1,11 @@
+import { type AssistantCompanionProps } from "./assistant-companion.js";
+import { type TeaflaskAssistantProviderProps } from "./teaflask-assistant-provider.js";
+export interface TeaflaskAssistantHandle {
+    openPalette: () => void;
+}
+export interface TeaflaskAssistantRootProps {
+    hotkey?: string | false;
+    corner?: AssistantCompanionProps["corner"];
+}
+export type TeaflaskAssistantProps = TeaflaskAssistantProviderProps & TeaflaskAssistantRootProps;
+export declare const TeaflaskAssistant: import("react").ForwardRefExoticComponent<TeaflaskAssistantProps & import("react").RefAttributes<TeaflaskAssistantHandle>>;

package/dist/components/teaflask-assistant.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState, } from "react";
+import { DEFAULT_ASSISTANT_HOTKEY, hotkeyMatches, parseHotkey, } from "../core/hotkey.js";
+import { AssistantCompanion, } from "./assistant-companion.js";
+import { AssistantPalette } from "./assistant-palette.js";
+import { TeaflaskAssistantProvider, } from "./teaflask-assistant-provider.js";
+export const TeaflaskAssistant = forwardRef(function TeaflaskAssistant({ hotkey = DEFAULT_ASSISTANT_HOTKEY, corner, children, ...providerProps }, ref) {
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    const openPalette = useCallback(() => {
+        setPaletteOpen(true);
+    }, []);
+    useImperativeHandle(ref, () => ({ openPalette }), [openPalette]);
+    const binding = useMemo(() => _bindingOf(hotkey), [hotkey]);
+    useEffect(() => {
+        if (binding === null) {
+            return;
+        }
+        const togglePaletteOnHotkey = (event) => {
+            if (!hotkeyMatches(binding, event)) {
+                return;
+            }
+            if (event.repeat) {
+                return;
+            }
+            if (event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            setPaletteOpen((open) => !open);
+        };
+        window.addEventListener("keydown", togglePaletteOnHotkey);
+        return () => {
+            window.removeEventListener("keydown", togglePaletteOnHotkey);
+        };
+    }, [binding]);
+    return (_jsxs(TeaflaskAssistantProvider, { ...providerProps, children: [children, _jsx(AssistantCompanion, { corner: corner }), _jsx(AssistantPalette, { open: paletteOpen, onOpenChange: setPaletteOpen })] }));
+});
+const warnedHotkeySpecs = new Set();
+function _bindingOf(hotkey) {
+    if (hotkey === false) {
+        return null;
+    }
+    const binding = parseHotkey(hotkey);
+    if (binding === null && !warnedHotkeySpecs.has(hotkey)) {
+        warnedHotkeySpecs.add(hotkey);
+        console.warn(`[teaflask-assistant] Unrecognized hotkey "${hotkey}" — expected ` +
+            `"mod+k"-style tokens (mod|ctrl|meta|alt|shift + one key). The ` +
+            `hotkey is disabled; the ref handle still opens the palette.`);
+    }
+    return binding;
+}

package/dist/components/thread-list.d.ts

@@ -0,0 +1,16 @@
+import type { ServingAssistantThread } from "../contract/threads.js";
+export interface ThreadGroup {
+    label: string;
+    threads: ServingAssistantThread[];
+}
+export declare function groupThreadsByRecency(threads: readonly ServingAssistantThread[], now: Date): ThreadGroup[];
+interface ThreadHistoryProps {
+    threads: ServingAssistantThread[];
+    activeThreadId: string | null;
+    onSelectThread: (thread: ServingAssistantThread) => void;
+    onNewConversation: () => void;
+    touch?: boolean;
+    safeAreaBottom?: boolean;
+}
+export declare function ThreadHistory({ threads, activeThreadId, onSelectThread, onNewConversation, touch, safeAreaBottom, }: ThreadHistoryProps): import("react").JSX.Element;
+export {};

package/dist/components/thread-list.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RECENT_WINDOW_DAYS, startOfLocalDayMs } from "../core/time-labels.js";
+import { ComposeIcon } from "./icons.js";
+import { TfButton } from "./primitives/button.js";
+import { cx } from "./primitives/cx.js";
+export function groupThreadsByRecency(threads, now) {
+    const startOfDay = (daysBack) => startOfLocalDayMs(now, daysBack);
+    const startOfToday = startOfDay(0);
+    const startOfYesterday = startOfDay(1);
+    const startOfRecentWindow = startOfDay(RECENT_WINDOW_DAYS);
+    const buckets = new Map();
+    const ordered = [...threads].sort((a, b) => {
+        const left = _rankOf(b);
+        const right = _rankOf(a);
+        if (left === right) {
+            return 0;
+        }
+        return left > right ? 1 : -1;
+    });
+    for (const thread of ordered) {
+        const at = Date.parse(thread.updated_at);
+        const label = Number.isNaN(at) || at >= startOfToday
+            ? "Today"
+            : at >= startOfYesterday
+                ? "Yesterday"
+                : at >= startOfRecentWindow
+                    ? "Previous 7 days"
+                    : "Older";
+        const bucket = buckets.get(label);
+        if (bucket === undefined) {
+            buckets.set(label, [thread]);
+        }
+        else {
+            bucket.push(thread);
+        }
+    }
+    return [...buckets].map(([label, bucketed]) => ({
+        label,
+        threads: bucketed,
+    }));
+}
+function _rankOf(thread) {
+    const at = Date.parse(thread.updated_at);
+    return Number.isNaN(at) ? Number.POSITIVE_INFINITY : at;
+}
+export function ThreadHistory({ threads, activeThreadId, onSelectThread, onNewConversation, touch = false, safeAreaBottom = true, }) {
+    const groups = groupThreadsByRecency(threads, new Date());
+    return (_jsxs("div", { className: "tf:flex tf:min-h-0 tf:flex-1 tf:flex-col", children: [_jsx("div", { className: "tf:shrink-0 tf:px-2 tf:pb-1", children: _jsxs(TfButton, { variant: touch ? "rowActionTouch" : "rowAction", onClick: onNewConversation, children: [_jsx(ComposeIcon, {}), "New conversation"] }) }), _jsx("div", { className: cx("tf:flex tf:min-h-0 tf:flex-1 tf:flex-col tf:overflow-y-auto tf:px-2", safeAreaBottom
+                    ? "tf:pb-[calc(0.5rem_+_env(safe-area-inset-bottom))]"
+                    : "tf:pb-2"), children: groups.length === 0 ? (_jsx(NoConversationsYet, {})) : (groups.map((group) => (_jsxs("section", { className: "tf:pt-3", children: [_jsx("h3", { className: "tf:px-2.5 tf:pb-1 tf:text-tf-label tf:font-normal tf:text-tf-muted-foreground", children: group.label }), _jsx("ul", { className: "tf:flex tf:flex-col tf:gap-px", children: group.threads.map((thread) => (_jsx("li", { children: _jsx(TfButton, { variant: touch ? "rowTouch" : "row", "aria-current": thread.id === activeThreadId ? "true" : undefined, onClick: () => {
+                                        onSelectThread(thread);
+                                    }, children: _jsx("span", { className: "tf:truncate", children: thread.title }) }) }, thread.id))) })] }, group.label)))) })] }));
+}
+function NoConversationsYet() {
+    return (_jsxs("div", { className: "tf:my-auto tf:flex tf:flex-col tf:items-center tf:gap-1 tf:px-4 tf:py-6 tf:text-center", children: [_jsx("p", { className: "tf:text-tf-label tf:font-medium", children: "No conversations yet" }), _jsx("p", { className: "tf:text-tf-label tf:text-tf-muted-foreground", children: "Your chats show up here." })] }));
+}

package/dist/components/tool-arguments-summary.d.ts

@@ -0,0 +1,2 @@
+import type { ToolViewProps } from "../core/tool-view.js";
+export declare function DefaultToolView(props: ToolViewProps): import("react").JSX.Element;

package/dist/components/tool-arguments-summary.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CAPTION_ROW_CLASS, CARD_CLASS, FACT_LABEL_CLASS, FACT_LIST_CLASS, FACT_ROW_CLASS, FACT_VALUE_CLASS, } from "./tool-views/parts-classes.js";
+const MAX_VISIBLE_ROWS = 8;
+const LONG_TEXT_CHARS = 120;
+const TEXT_PREVIEW_CHARS = 320;
+const ARRAY_PREVIEW_ITEMS = 4;
+const SECTION_CLASSES = `tf:flex tf:flex-col ${CARD_CLASS}`;
+export function DefaultToolView(props) {
+    return _jsx(ToolArgumentsSummary, { arguments: props.call.args });
+}
+function ToolArgumentsSummary({ arguments: toolArguments, }) {
+    const rows = _summaryRowsOf(toolArguments);
+    if (rows.length === 0) {
+        return null;
+    }
+    const visible = rows.slice(0, MAX_VISIBLE_ROWS);
+    const hidden = rows.length - visible.length;
+    return (_jsxs("section", { "data-tf-approval-request-summary": "", "data-tf-tool-view-card": "", "aria-label": "Request details", className: SECTION_CLASSES, children: [_jsx("div", { className: CAPTION_ROW_CLASS, children: "Request" }), _jsxs("dl", { className: FACT_LIST_CLASS, children: [visible.map((row) => (_jsx(SummaryValue, { row: row }, row.key))), hidden > 0 ? (_jsxs("div", { className: CAPTION_ROW_CLASS, children: [hidden, " more ", hidden === 1 ? "field" : "fields"] })) : null] })] }));
+}
+function SummaryValue({ row }) {
+    return (_jsxs("div", { className: `${FACT_ROW_CLASS}${row.depth > 0 ? " tf:ps-6" : ""}`, children: [_jsx("dt", { className: FACT_LABEL_CLASS, children: row.label }), _jsx("dd", { className: FACT_VALUE_CLASS, children: _jsx(SummaryValueBody, { value: row.value }) })] }));
+}
+function SummaryValueBody({ value }) {
+    if (typeof value === "string") {
+        if (value.length <= LONG_TEXT_CHARS) {
+            return (_jsx("span", { className: "tf:font-mono tf:wrap-anywhere tf:whitespace-pre-wrap", children: value === "" ? "Empty text" : value }));
+        }
+        const preview = value.slice(0, TEXT_PREVIEW_CHARS);
+        return (_jsxs("div", { children: [_jsxs("p", { "data-tf-approval-text-preview": "", className: "tf:m-0 tf:overflow-hidden tf:wrap-anywhere tf:whitespace-pre-wrap", children: [preview, value.length > preview.length ? "…" : ""] }), _jsxs("p", { className: "tf:mt-1 tf:text-xs tf:text-tf-muted-foreground tf:tabular-nums", children: [value.length.toLocaleString("en-US"), " characters"] })] }));
+    }
+    if (typeof value === "number" ||
+        typeof value === "boolean" ||
+        typeof value === "bigint") {
+        return (_jsx("span", { className: "tf:font-mono tf:wrap-anywhere", children: String(value) }));
+    }
+    if (value === null) {
+        return (_jsx("span", { className: "tf:font-mono tf:text-tf-muted-foreground", children: "null" }));
+    }
+    if (value === undefined) {
+        return _jsx("span", { className: "tf:text-tf-muted-foreground", children: "Not provided" });
+    }
+    if (Array.isArray(value)) {
+        const preview = value.slice(0, ARRAY_PREVIEW_ITEMS);
+        const primitives = preview.every(_isScalar);
+        return (_jsxs("div", { children: [_jsxs("span", { className: "tf:text-tf-muted-foreground tf:tabular-nums", children: [value.length, " ", value.length === 1 ? "item" : "items"] }), primitives && preview.length > 0 ? (_jsxs("p", { className: "tf:mt-0.5 tf:m-0 tf:font-mono tf:wrap-anywhere", children: [preview.map(_scalarTextOf).join(", "), value.length > preview.length ? ", …" : ""] })) : null] }));
+    }
+    if (_isRecord(value)) {
+        const count = Object.keys(value).length;
+        return (_jsxs("span", { className: "tf:text-tf-muted-foreground tf:tabular-nums", children: [count, " ", count === 1 ? "field" : "fields"] }));
+    }
+    return _jsx("span", { className: "tf:text-tf-muted-foreground", children: "Opaque value" });
+}
+function _summaryRowsOf(toolArguments) {
+    const rows = [];
+    for (const key of Object.keys(toolArguments).sort()) {
+        const value = toolArguments[key];
+        if (_isRecord(value) && Object.keys(value).length > 0) {
+            for (const childKey of Object.keys(value).sort()) {
+                rows.push({
+                    key: `${key}.${childKey}`,
+                    label: `${_labelOf(key)} · ${_labelOf(childKey)}`,
+                    value: value[childKey],
+                    depth: 1,
+                });
+            }
+            continue;
+        }
+        rows.push({ key, label: _labelOf(key), value, depth: 0 });
+    }
+    return rows;
+}
+function _labelOf(key) {
+    const words = key.replace(/[-_]+/g, " ").trim();
+    return words === "" ? "Value" : words[0].toUpperCase() + words.slice(1);
+}
+function _isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function _isScalar(value) {
+    return (value === null ||
+        typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean" ||
+        typeof value === "bigint");
+}
+function _scalarTextOf(value) {
+    return value === null ? "null" : String(value);
+}

package/dist/components/tool-call-rows.d.ts

@@ -0,0 +1,10 @@
+import type { ApprovalCardModel } from "../core/approval-inbox.js";
+import type { ToolCallRow } from "../core/transcript-rows.js";
+import type { ToolRowSlot } from "./message-list-slots.js";
+export declare function ToolCallRows({ row, cards, inCurrentTurn, decisionSurfacesInShelf, toolRow, }: {
+    row: ToolCallRow;
+    cards: readonly ApprovalCardModel[];
+    inCurrentTurn?: boolean;
+    decisionSurfacesInShelf?: boolean;
+    toolRow?: ToolRowSlot;
+}): import("react").JSX.Element;