@teaflask/assistant 0.7.1 → 0.9.0

package/README.md

@@ -63,7 +63,7 @@ import { TeaflaskAssistant } from "@teaflask/assistant";
 
 ## What your agent can do
 
-- **Take actions.** It calls your API on the user's behalf, with the user's own session. You set every action to Allow, Ask or Deny.
+- **Take actions.** It calls your API on the user's behalf, with the user's own session. You set every action to Allow, Ask or Deny. On a [GraphQL](https://docs.teaflask.com/adapters#graphql) API, it runs them through your app's own client.
 - **Follow your workflows.** Write a procedure once, like how refunds work or when to escalate, and the agent follows it.
 - **Guide users around your app.** It takes people to the right page and highlights what to click.
 - **Fill in forms.** It fills the fields; the user reviews and submits.

package/dist/components/assistant-transcript.js

@@ -6,7 +6,6 @@ import { connectionErrorRecorder, messagesSnapshotRecorder, } from "../core/mess
 import { EMPTY_TOOL_CALL_DISPLAY_ANCHORS, toolCallDisplayRecorder, withToolCallDisplayAnchored, } from "../core/tool-call-display-anchors.js";
 import { EMPTY_TOOL_CANCEL_ANCHORS, toolCancelRecorder, withToolCancelAnchored, } from "../core/tool-cancel-anchors.js";
 import { EMPTY_TOOL_ERROR_ANCHORS, toolErrorRecorder, withToolErrorAnchored, } from "../core/tool-error-anchors.js";
-import { EMPTY_TOOL_OFFLOAD_ANCHORS, toolOffloadRecorder, withToolOffloadAnchored, } from "../core/tool-offload-anchors.js";
 import { EMPTY_TOOL_DENIAL_LEDGER, toolDenialRecorder, withToolDenialMarkerFolded, } from "../core/tool-denial-anchors.js";
 import { EMPTY_TOOL_REFUSAL_ANCHORS, toolRefusalRecorder, withToolRefusalAnchored, } from "../core/tool-refusal-anchors.js";
 import { transcriptBlocksOf, } from "../core/transcript-rows.js";
@@ -33,7 +32,6 @@ function useAgentRecording(agent, onStreamError) {
     const [displayAnchors, setDisplayAnchors] = useState(EMPTY_TOOL_CALL_DISPLAY_ANCHORS);
     const [errorAnchors, setErrorAnchors] = useState(EMPTY_TOOL_ERROR_ANCHORS);
     const [cancelAnchors, setCancelAnchors] = useState(EMPTY_TOOL_CANCEL_ANCHORS);
-    const [offloadAnchors, setOffloadAnchors] = useState(EMPTY_TOOL_OFFLOAD_ANCHORS);
     const [refusalAnchors, setRefusalAnchors] = useState(EMPTY_TOOL_REFUSAL_ANCHORS);
     const [denialLedger, setDenialLedger] = useState(EMPTY_TOOL_DENIAL_LEDGER);
     const streamErrorRef = useLatestRef(onStreamError);
@@ -46,7 +44,6 @@ function useAgentRecording(agent, onStreamError) {
             agent.subscribe(toolCallDisplayRecorder(anchorInto(setDisplayAnchors, withToolCallDisplayAnchored))),
             agent.subscribe(toolErrorRecorder(anchorInto(setErrorAnchors, withToolErrorAnchored))),
             agent.subscribe(toolCancelRecorder(anchorInto(setCancelAnchors, withToolCancelAnchored))),
-            agent.subscribe(toolOffloadRecorder(anchorInto(setOffloadAnchors, withToolOffloadAnchored))),
             agent.subscribe(toolRefusalRecorder(anchorInto(setRefusalAnchors, withToolRefusalAnchored))),
             agent.subscribe(toolDenialRecorder(anchorInto(setDenialLedger, withToolDenialMarkerFolded))),
         ];
@@ -64,13 +61,12 @@ function useAgentRecording(agent, onStreamError) {
         displayAnchors,
         errorAnchors,
         cancelAnchors,
-        offloadAnchors,
         refusalAnchors,
         denialLedger,
     };
 }
 function AgentModeTranscript({ agent, onStreamError, markers, markerBoundaries, resumeAnchoredIds = NO_IDS, deliveryAnchoredIds = NO_IDS, turnAttachments, frameClaimsLiveness, scrollClassName, messageView, toolRow, input, welcomeScreen, threadList, }) {
-    const { snapshot, displayAnchors, errorAnchors, cancelAnchors, offloadAnchors, refusalAnchors, denialLedger, } = useAgentRecording(agent, onStreamError);
+    const { snapshot, displayAnchors, errorAnchors, cancelAnchors, refusalAnchors, denialLedger, } = useAgentRecording(agent, onStreamError);
     const delivered = snapshot ?? EMPTY_SNAPSHOT;
     const anchors = useMemo(() => ({
         resumeAnchors: new Map([...resumeAnchoredIds].map((id) => [id, null])),
@@ -81,7 +77,6 @@ function AgentModeTranscript({ agent, onStreamError, markers, markerBoundaries,
         toolDenialAnchors: denialLedger.denied,
         toolCallDisplayAnchors: displayAnchors,
         turnFailedAnchors: NO_MAP,
-        toolOffloadAnchors: offloadAnchors,
         toolSchemaAnchors: NO_MAP,
         blockTimingAnchors: NO_MAP,
         turnUsageAnchors: NO_MAP,
@@ -92,7 +87,6 @@ function AgentModeTranscript({ agent, onStreamError, markers, markerBoundaries,
         deliveryAnchoredIds,
         errorAnchors,
         cancelAnchors,
-        offloadAnchors,
         refusalAnchors,
         denialLedger.denied,
         displayAnchors,

package/dist/components/attachment-chips.js

@@ -3,24 +3,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { humanFileSize } from "./human-file-size.js";
 import { FileIcon } from "./icons.js";
+import { openMintedUrlInNewWindow } from "./open-minted-url.js";
+import { TfButton } from "./primitives/button.js";
 import { useOptionalAssistantSession } from "./teaflask-assistant-provider.js";
 export function AttachmentChips({ attachments, }) {
     if (attachments.length === 0) {
         return null;
     }
-    return (_jsx("div", { className: "tf:flex tf:flex-wrap tf:justify-end tf:gap-2", children: attachments.map((attachment) => attachment.kind === "image" ? (_jsx(AttachmentImage, { attachment: attachment }, attachment.id)) : (_jsx(FileChip, { attachment: attachment }, attachment.id))) }));
+    return (_jsx("div", { className: "tf:flex tf:flex-wrap tf:items-end tf:justify-end tf:gap-2", children: attachments.map((attachment) => attachment.kind === "image" ? (_jsx(AttachmentImage, { attachment: attachment }, attachment.id)) : (_jsx(FileChip, { attachment: attachment }, attachment.id))) }));
 }
 function AttachmentImage({ attachment }) {
     const url = useAttachmentUrl(attachment.id);
     if (url === null) {
         return _jsx(FileChip, { attachment: attachment });
     }
-    return (_jsx("img", { src: url, alt: attachment.filename, loading: "lazy", className: "tf:max-h-48 tf:max-w-full tf:rounded-lg tf:ring-1 tf:ring-tf-border tf:ring-inset" }));
+    return (_jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", "aria-label": `Open ${attachment.filename}`, className: "tf:block tf:max-w-full tf:rounded-lg tf:focus-visible:outline-2 " +
+            "tf:focus-visible:outline-offset-2 tf:focus-visible:outline-tf-ring", children: _jsx("img", { src: url, alt: attachment.filename, loading: "lazy", className: "tf:block tf:max-h-48 tf:max-w-full tf:rounded-lg tf:ring-1 tf:ring-tf-border tf:ring-inset" }) }));
 }
 function FileChip({ attachment }) {
-    return (_jsxs("span", { className: "tf:inline-flex tf:max-w-full tf:items-center tf:gap-1.5 tf:rounded-lg " +
-            "tf:bg-tf-background tf:px-2.5 tf:py-1.5 tf:text-xs tf:text-tf-foreground " +
-            "tf:ring-1 tf:ring-tf-border tf:ring-inset", title: attachment.filename, children: [_jsx("span", { className: "tf:text-tf-muted-foreground", children: _jsx(FileIcon, {}) }), _jsx("span", { className: "tf:min-w-0 tf:truncate", children: attachment.filename }), _jsx("span", { className: "tf:shrink-0 tf:text-tf-muted-foreground", children: humanFileSize(attachment.byte_size) })] }));
+    const store = useOptionalAssistantSession()?.store ?? null;
+    return (_jsxs(TfButton, { variant: "fileTile", "aria-label": `Open ${attachment.filename}`, title: attachment.filename, onClick: () => {
+            if (store !== null) {
+                openMintedUrlInNewWindow(() => store.mintAttachmentDownloadUrl(attachment.id));
+            }
+        }, children: [_jsx("span", { className: "tf:text-tf-muted-foreground", children: _jsx(FileIcon, {}) }), _jsx("span", { className: "tf:min-w-0 tf:truncate", children: attachment.filename }), _jsx("span", { className: "tf:shrink-0 tf:text-tf-muted-foreground", children: humanFileSize(attachment.byte_size) })] }));
 }
 const URL_REFRESH_FLOOR_MS = 30_000;
 function useAttachmentUrl(attachmentId) {

package/dist/components/composer.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState, } from "react";
-import { ASSISTANT_MESSAGE_MAX_CHARS, } from "../contract/threads.js";
 import { attachmentAcceptOf, ComposerAttachmentChip, } from "./composer-attachment-chip.js";
 import { ComposerBanner } from "./composer-banner.js";
 import { useConversation } from "./conversation-context.js";
@@ -13,7 +12,7 @@ import { ModelPickerShelf } from "./model-picker-chip.js";
 import { useOptionalAssistantSession } from "./teaflask-assistant-provider.js";
 import { NO_GATE } from "../core/connect-gate.js";
 import { attachmentRoomOf } from "../core/composer-attachments.js";
-import { attachmentDraftFailed, capSlotsSpentBy, CHARACTER_COUNT_VISIBLE_FROM, composerKeyHandlersOf, } from "../core/composer-policy.js";
+import { attachmentDraftFailed, capSlotsSpentBy, composerKeyHandlersOf, } from "../core/composer-policy.js";
 import { ObservableCell } from "../core/observable-cell.js";
 import { useCell } from "./use-store-cell.js";
 const NO_POLICY = new ObservableCell(null);
@@ -172,16 +171,16 @@ function ComposerSlabAndShelf({ draft, setDraft, attachments, policy, gate, busy
                     "tf:transition-[border-color,box-shadow] " +
                     "tf:focus-within:border-tf-foreground/25", children: [attachments.length > 0 ? (_jsx("div", { className: "tf:flex tf:flex-wrap tf:gap-1.5 tf:px-1 tf:pt-1 tf:pb-2", children: attachments.map((item) => (_jsx(ComposerAttachmentChip, { item: item, onRemove: () => {
                                 attach.removeAttachment(item.localId);
-                            } }, item.localId))) })) : null, _jsx(TfTextarea, { ref: textareaRef, rows: 2, variant: "bare", "data-tf-autofocus": "", value: draft, maxLength: ASSISTANT_MESSAGE_MAX_CHARS, placeholder: "Ask anything", "aria-label": "Message", onChange: (event) => {
+                            } }, item.localId))) })) : null, _jsx(TfTextarea, { ref: textareaRef, rows: 2, variant: "bare", "data-tf-autofocus": "", value: draft, placeholder: "Ask anything", "aria-label": "Message", onChange: (event) => {
                             setDraft(event.target.value);
-                        }, onKeyDown: composerKeys, onFocus: onTextareaFocus, onBlur: onTextareaBlur }), _jsx(ComposerControlsRow, { draft: draft, attachments: attachments, policy: policy, busy: busy, pendingSend: pendingSend, stopping: stopping, stopTurn: stopTurn, stopOnEscape: stopOnEscape, send: send, attach: attach, textareaRef: textareaRef })] }), gate.kind === "none" ? _jsx(ModelPickerShelf, {}) : null] }));
+                        }, onKeyDown: composerKeys, onFocus: onTextareaFocus, onBlur: onTextareaBlur }), _jsx(ComposerControlsRow, { attachments: attachments, policy: policy, busy: busy, pendingSend: pendingSend, stopping: stopping, stopTurn: stopTurn, stopOnEscape: stopOnEscape, send: send, attach: attach, textareaRef: textareaRef })] }), gate.kind === "none" ? _jsx(ModelPickerShelf, {}) : null] }));
 }
-function ComposerControlsRow({ draft, attachments, policy, busy, pendingSend, stopping, stopTurn, stopOnEscape, send, attach, textareaRef, }) {
+function ComposerControlsRow({ attachments, policy, busy, pendingSend, stopping, stopTurn, stopOnEscape, send, attach, textareaRef, }) {
     const fileInputRef = useRef(null);
     return (_jsxs("div", { className: "tf:flex tf:items-center tf:gap-2 tf:pt-1", children: [policy !== null ? (_jsxs(_Fragment, { children: [_jsx(TfFileInput, { ref: fileInputRef, multiple: true, accept: attachmentAcceptOf(policy), onPickFiles: attach.addFiles }), _jsx(TfButton, { variant: "icon", onClick: () => {
                             fileInputRef.current?.click();
                         }, disabled: capSlotsSpentBy(attachments) >= attach.attachmentRoom ||
-                            send.sending, "aria-label": "Attach a file", children: _jsx(PlusIcon, {}) })] })) : null, _jsxs("div", { className: "tf:ml-auto tf:flex tf:shrink-0 tf:items-center tf:gap-2", children: [stopping ? (_jsx("span", { role: "status", className: "tf:text-xs tf:text-tf-muted-foreground", children: "Stopping\u2026" })) : null, draft.length >= CHARACTER_COUNT_VISIBLE_FROM ? (_jsxs("span", { className: "tf:text-xs tf:text-tf-muted-foreground", children: [draft.length, "/", ASSISTANT_MESSAGE_MAX_CHARS] })) : null, busy && !pendingSend ? (_jsx(TfButton, { variant: "stop", onClick: () => {
+                            send.sending, "aria-label": "Attach a file", children: _jsx(PlusIcon, {}) })] })) : null, _jsxs("div", { className: "tf:ml-auto tf:flex tf:shrink-0 tf:items-center tf:gap-2", children: [stopping ? (_jsx("span", { role: "status", className: "tf:text-xs tf:text-tf-muted-foreground", children: "Stopping\u2026" })) : null, busy && !pendingSend ? (_jsx(TfButton, { variant: "stop", onClick: () => {
                             void stopTurn();
                             textareaRef.current?.focus();
                         }, onKeyDown: stopOnEscape, "aria-disabled": stopping, "aria-label": "Stop generating", children: _jsx(StopIcon, {}) })) : (_jsx(TfButton, { variant: "send", onClick: () => {

package/dist/components/message-list.js

@@ -11,6 +11,7 @@ import { TfButton } from "./primitives/button.js";
 import { ScrollFollowGuards } from "./scroll-follow-guards.js";
 import { HostSlotBoundary } from "./slot-boundary.js";
 import { ShimmerText, TypingIndicator } from "./streaming-states.js";
+import { ReleaseFollowProvider } from "./transcript-follow.js";
 import { useMessageListDerivations, } from "./use-transcript-folds.js";
 export function MessageList({ cards, typing = false, live = false, turnOpen, identityToken = PRIMARY_AGENT_IDENTITY_TOKEN, decisionSurfacesInShelf = false, markers: Markers, markerBoundaries, turnStartIds, frameClaimsLiveness = false, emptyFallback, scrollClassName, messageView, toolRow, placementHolds = true, ...source }) {
     const { foldedBlocks, displayRows, currentTurnStart, blockStarts, unrowedAnsweredAsks, liveIndex, hostEmptySurfaceShown, livenessClaimant, } = useMessageListDerivations(source, {
@@ -24,7 +25,7 @@ export function MessageList({ cards, typing = false, live = false, turnOpen, ide
         emptyFallback,
     });
     const rowAt = (row, flatIndex) => (_jsx(Row, { row: row, cards: cards, turnLive: live && flatIndex === liveIndex, inCurrentTurn: placementHolds && flatIndex >= currentTurnStart, identityToken: identityToken, decisionSurfacesInShelf: decisionSurfacesInShelf, messageView: messageView, toolRow: toolRow }, row.key));
-    return (_jsxs(StickToBottom, { "data-tf-message-list": "", className: "tf:relative tf:min-h-0 tf:flex-1", resize: "instant", initial: "instant", role: "log", children: [_jsxs(StickToBottom.Content, { scrollClassName: scrollClassName, className: "tf:mx-auto tf:flex tf:w-full tf:max-w-3xl tf:flex-col tf:px-4 tf:py-4", children: [hostEmptySurfaceShown ? emptyFallback : null, foldedBlocks !== null ? (_jsx(MarkedBlocks, { blocks: foldedBlocks, blockStarts: blockStarts, markers: Markers, rowAt: rowAt })) : (displayRows.map((row, index) => rowAt(row, index))), _jsx(TranscriptTail, { unrowedAnsweredAsks: unrowedAnsweredAsks, livenessClaimant: livenessClaimant })] }), _jsx(ScrollFollowGuards, {}), _jsx(ScrollToBottom, { live: live })] }));
+    return (_jsxs(StickToBottom, { "data-tf-message-list": "", className: "tf:relative tf:min-h-0 tf:flex-1", resize: "instant", initial: "instant", role: "log", children: [_jsx(ReleaseFollowProvider, { children: _jsxs(StickToBottom.Content, { scrollClassName: scrollClassName, className: "tf:mx-auto tf:flex tf:w-full tf:max-w-3xl tf:flex-col tf:px-4 tf:py-4", children: [hostEmptySurfaceShown ? emptyFallback : null, foldedBlocks !== null ? (_jsx(MarkedBlocks, { blocks: foldedBlocks, blockStarts: blockStarts, markers: Markers, rowAt: rowAt })) : (displayRows.map((row, index) => rowAt(row, index))), _jsx(TranscriptTail, { unrowedAnsweredAsks: unrowedAnsweredAsks, livenessClaimant: livenessClaimant })] }) }), _jsx(ScrollFollowGuards, {}), _jsx(ScrollToBottom, { live: live })] }));
 }
 function MarkedBlocks({ blocks, blockStarts, markers: Markers, rowAt, }) {
     return blocks.map((block, blockIndex) => (_jsxs(Fragment, { children: [Markers !== undefined ? (_jsx(HostSlotBoundary, { slot: "markers", fallback: null, children: _jsx(Markers, { message: { id: block.messageId }, position: "before" }) })) : null, block.rows.map((row, index) => rowAt(row, blockStarts[blockIndex] + index)), Markers !== undefined ? (_jsx(HostSlotBoundary, { slot: "markers", fallback: null, children: _jsx(Markers, { message: { id: block.messageId }, position: "after" }) })) : null] }, block.messageId)));

package/dist/components/open-minted-url.js

@@ -0,0 +1,12 @@
+export function openMintedUrlInNewWindow(mint) {
+    const opened = window.open("", "_blank");
+    if (opened === null) {
+        return;
+    }
+    opened.opener = null;
+    mint().then((minted) => {
+        opened.location = minted.url;
+    }, () => {
+        opened.close();
+    });
+}

package/dist/components/primitives/button.js

@@ -65,6 +65,9 @@ const VARIANT_CLASSES = {
         "tf:bg-tf-transparent tf:px-3 tf:py-2.5 tf:text-left tf:text-tf-label tf:text-tf-foreground " +
         "tf:wrap-anywhere tf:hover:bg-tf-accent tf:hover:text-tf-accent-foreground " +
         "tf:disabled:opacity-50 tf:aria-checked:bg-tf-emphasis tf:aria-checked:text-tf-foreground",
+    fileTile: "tf:max-w-full tf:cursor-pointer tf:rounded-lg tf:border-0 tf:bg-tf-background tf:px-2.5 tf:py-1.5 " +
+        "tf:text-xs tf:text-tf-foreground tf:ring-1 tf:ring-tf-border tf:ring-inset " +
+        "tf:hover:bg-tf-accent tf:hover:text-tf-accent-foreground",
 };
 export const TfButton = forwardRef(function TfButton({ variant = "primary", className, type, ...props }, ref) {
     return (_jsx("button", { ref: ref, type: type ?? "button", ...(variant === "secondary" ? { "data-tf-secondary": "" } : {}), className: cx("tf:appearance-none", "tf:inline-flex tf:items-center tf:gap-1.5 tf:transition-colors", "tf:focus-visible:outline-2 tf:focus-visible:outline-offset-2 tf:focus-visible:outline-tf-ring", "tf:disabled:cursor-not-allowed", VARIANT_CLASSES[variant], className), ...props }));

package/dist/components/tool-call-rows.js

@@ -60,11 +60,6 @@ function _mandatoryStateWordOf(state, awaitingInput) {
     return null;
 }
 function _toolViewOf(row) {
-    const offloaded = row.offloaded &&
-        row.errorText === undefined &&
-        row.state !== "denied" &&
-        row.state !== "cancelled" &&
-        row.state !== "refused";
     return {
         toolName: row.toolName,
         state: row.state,
@@ -74,11 +69,9 @@ function _toolViewOf(row) {
         output: row.errorText !== undefined ||
             row.state === "denied" ||
             row.state === "cancelled" ||
-            row.state === "refused" ||
-            offloaded
+            row.state === "refused"
             ? undefined
             : row.result,
-        offloaded: offloaded || undefined,
         errorText: row.errorText,
         ...(row.refusalText !== undefined ? { refusalText: row.refusalText } : {}),
         display: row.display,

package/dist/components/tool-row.js

@@ -11,7 +11,6 @@ import { humanFailureSentenceOf } from "./tool-views/view-dom.js";
 function heldOpenOf(view, toolView, decision) {
     const hostViewBearing = toolView.views.some((candidate) => candidate.rung <= 2);
     return (isCleanState(view.state) &&
-        view.offloaded !== true &&
         (hostViewBearing || decision) &&
         toolView.call.truncated !== true);
 }
@@ -30,5 +29,5 @@ export function ToolRow({ view, awaitingInput = false, decisionBearing, inCurren
     return (_jsxs(Disclosure, { variant: "bare", open: heldRowOpen || undefined, ...(view.toolCallId !== undefined && view.toolCallId !== ""
             ? { rootDataAttributes: { "data-tf-tool-call-id": view.toolCallId } }
             : {}), className: "tf:w-full", summaryClassName: "tf:flex tf:w-fit tf:items-center tf:gap-3 tf:py-1.5 tf:text-tf-label tf:text-tf-muted-foreground tf:hover:text-tf-foreground", bodyClassName: "tf:flex tf:flex-col tf:gap-2 tf:pt-1 tf:pb-2 tf:ps-7", summary: _jsxs(_Fragment, { children: [toolView.icons.length === 0 ? (_jsx(OperationMark, { icon: presentation.icon, status: presentation.status })) : (_jsx(ToolViewIconSlot, { icons: toolView.icons, call: toolView.call, icon: presentation.icon })), presentation.status === "input-available" ? (_jsx(ShimmerText, { className: "tf:leading-none", children: presentation.headline })) : (_jsx("span", { className: "tf:leading-none", children: presentation.headline })), presentation.status === "output-error" ? (_jsx(StatePill, { destructive: true, children: "Failed" })) : presentation.status === "denied" ? (_jsx(StatePill, { children: "Not approved" })) : presentation.status === "cancelled" ||
-                    presentation.status === "superseded" ? (_jsx(StatePill, { children: "Interrupted" })) : presentation.status === "refused" ? (_jsx(StatePill, { children: "Declined" })) : awaitingInput ? (_jsx(StatePill, { children: "Needs input" })) : null, _jsx(DisclosureChevron, { revealOnInteraction: true })] }), children: [_jsx("div", { "data-tf-semantic-view": "", className: "tf:mt-1", children: _jsx(ToolViewSlot, { views: toolView.views, call: toolView.call }) }), view.offloaded === true && (_jsx("p", { className: "tf:text-xs tf:text-tf-muted-foreground", children: "This result was too long to show in full, so the assistant worked from a shortened preview." })), view.refusalText !== undefined && (_jsx("p", { "data-tf-refusal-reason": "", className: "tf:text-xs tf:text-tf-muted-foreground", children: view.refusalText })), view.errorText !== undefined && (_jsx("p", { "data-tf-error-reason": "", className: "tf:text-xs tf:text-tf-muted-foreground", children: humanFailureSentenceOf(view.errorText) }))] }));
+                    presentation.status === "superseded" ? (_jsx(StatePill, { children: "Interrupted" })) : presentation.status === "refused" ? (_jsx(StatePill, { children: "Declined" })) : awaitingInput ? (_jsx(StatePill, { children: "Needs input" })) : null, _jsx(DisclosureChevron, { revealOnInteraction: true })] }), children: [_jsx("div", { "data-tf-semantic-view": "", className: "tf:mt-1", children: _jsx(ToolViewSlot, { views: toolView.views, call: toolView.call }) }), view.refusalText !== undefined && (_jsx("p", { "data-tf-refusal-reason": "", className: "tf:text-xs tf:text-tf-muted-foreground", children: view.refusalText })), view.errorText !== undefined && (_jsx("p", { "data-tf-error-reason": "", className: "tf:text-xs tf:text-tf-muted-foreground", children: humanFailureSentenceOf(view.errorText) }))] }));
 }

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

@@ -142,7 +142,6 @@ function _sameDelivery(previous, next) {
         before.status === after.status &&
         before.awaitingDecision === after.awaitingDecision &&
         before.resultText === after.resultText &&
-        before.offloaded === after.offloaded &&
         before.errorText === after.errorText &&
         before.refusalText === after.refusalText &&
         before.argsSchema === after.argsSchema &&

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

@@ -0,0 +1,43 @@
+import { prettyPrintParameters } from "../pretty-print.js";
+import { CARD_BLOCK_CLASS } from "./parts-classes.js";
+import { el, factRows, recordOf, scrollRegion } from "./view-dom.js";
+const VALUE_PANE_CLASS = "tf:m-0 tf:whitespace-pre-wrap tf:font-mono tf:text-xs tf:text-tf-card-foreground";
+export function valueRows(value) {
+    const record = recordOf(value);
+    if (record !== null) {
+        return scrollRegion([
+            factRows(Object.entries(record).map(([key, entry]) => [key, _valueOf(entry)])),
+        ]);
+    }
+    return valueBlock(value);
+}
+export function valueBlock(value) {
+    const wrapper = el("div", CARD_BLOCK_CLASS);
+    wrapper.dataset.tfActionValueBlock = "";
+    wrapper.append(el("pre", VALUE_PANE_CLASS, prettyPrintParameters(value)));
+    return scrollRegion([wrapper]);
+}
+function _valueOf(value) {
+    if (typeof value === "string") {
+        return value === "" ? "—" : value;
+    }
+    if (typeof value === "number" ||
+        typeof value === "boolean" ||
+        typeof value === "bigint") {
+        return String(value);
+    }
+    if (value === null || value === undefined) {
+        return "—";
+    }
+    return el("pre", VALUE_PANE_CLASS, prettyPrintParameters(value));
+}
+export function statusBadgeOf(status) {
+    const badge = el("span", status >= 400
+        ? "tf:font-medium tf:text-tf-destructive"
+        : "tf:text-tf-muted-foreground", `HTTP ${String(status)}`);
+    badge.dataset.tfActionStatus = String(status);
+    return badge;
+}
+export function isEmptyBody(body) {
+    return body === undefined || body === null || body === "";
+}

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

@@ -1,12 +1,10 @@
-import { prettyPrintParameters } from "../pretty-print.js";
-import { CARD_BLOCK_CLASS } from "./parts-classes.js";
-import { actionEnvelopeOf, actionFailureOf, captionRow, card, el, factRows, note, recordOf, scrollRegion, settledOutcomeNotesOf, settledWithResult, statelessToolView, } from "./view-dom.js";
+import { isEmptyBody, statusBadgeOf, valueRows } from "./action-values.js";
+import { actionEnvelopeOf, actionFailureOf, captionRow, card, el, factRows, note, recordOf, settledOutcomeNotesOf, settledWithResult, statelessToolView, } from "./view-dom.js";
 const REQUEST_SECTIONS = [
     ["path_params", "Path parameters"],
     ["query", "Query"],
     ["body", "Body"],
 ];
-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");
@@ -21,7 +19,7 @@ function _renderAction({ call }) {
         if (record !== null && Object.keys(record).length === 0) {
             continue;
         }
-        sections.push(captionRow(label), _valueRows(value));
+        sections.push(captionRow(label), valueRows(value));
     }
     if (sections.length > 0) {
         root.append(card(sections));
@@ -52,32 +50,6 @@ function _appendFieldProblems(root, call) {
     }
     root.append(card(parts));
 }
-function _valueRows(value) {
-    const record = recordOf(value);
-    if (record !== null) {
-        return scrollRegion([
-            factRows(Object.entries(record).map(([key, entry]) => [key, _valueOf(entry)])),
-        ]);
-    }
-    const wrapper = el("div", CARD_BLOCK_CLASS);
-    wrapper.dataset.tfActionValueBlock = "";
-    wrapper.append(el("pre", VALUE_PANE_CLASS, prettyPrintParameters(value)));
-    return scrollRegion([wrapper]);
-}
-function _valueOf(value) {
-    if (typeof value === "string") {
-        return value === "" ? "—" : value;
-    }
-    if (typeof value === "number" ||
-        typeof value === "boolean" ||
-        typeof value === "bigint") {
-        return String(value);
-    }
-    if (value === null || value === undefined) {
-        return "—";
-    }
-    return el("pre", VALUE_PANE_CLASS, prettyPrintParameters(value));
-}
 function _appendResponse(root, call) {
     if (call.resultText === undefined) {
         return;
@@ -88,24 +60,16 @@ function _appendResponse(root, call) {
         return;
     }
     const rows = [];
-    let status;
-    if (envelope.status !== null) {
-        status = el("span", envelope.status >= 400
-            ? "tf:font-medium tf:text-tf-destructive"
-            : "tf:text-tf-muted-foreground", `HTTP ${String(envelope.status)}`);
-        status.dataset.tfActionStatus = String(envelope.status);
-    }
+    const status = envelope.status === null ? undefined : statusBadgeOf(envelope.status);
     rows.push(captionRow(envelope.truncated ? "Response (truncated)" : "Response", status));
     if (envelope.truncated) {
         rows.push(captionRow("The response body was truncated by the client to fit the size cap."));
     }
-    if (envelope.body === undefined ||
-        envelope.body === null ||
-        envelope.body === "") {
+    if (isEmptyBody(envelope.body)) {
         rows.push(captionRow("Empty response body."));
     }
     else {
-        rows.push(_valueRows(envelope.body));
+        rows.push(valueRows(envelope.body));
     }
     root.append(card(rows));
 }

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

@@ -0,0 +1,95 @@
+import { prettyPrintParameters } from "../pretty-print.js";
+import { isEmptyBody, statusBadgeOf, valueBlock, valueRows, } from "./action-values.js";
+import { actionEnvelopeOf, captionRow, card, el, factRows, note, recordOf, settledOutcomeNotesOf, scrollRegion, settledWithResult, statelessToolView, } from "./view-dom.js";
+export const graphqlActionToolView = statelessToolView(_renderGraphQLAction);
+function _renderGraphQLAction({ call }) {
+    const root = el("div", "tf:flex tf:flex-col tf:gap-2");
+    root.dataset.tfGraphqlActionView = "";
+    const variables = recordOf(call.args.variables);
+    if (variables !== null && Object.keys(variables).length > 0) {
+        root.append(card([captionRow("Variables"), _valuesOf(variables)]));
+    }
+    root.append(...settledOutcomeNotesOf(call));
+    if (settledWithResult(call)) {
+        _appendResponse(root, call);
+    }
+    return root;
+}
+function _appendResponse(root, call) {
+    const envelope = actionEnvelopeOf(call.resultText);
+    if (envelope === null) {
+        root.append(note("The response couldn't be read as an action result and isn't rendered."));
+        return;
+    }
+    const response = recordOf(envelope.body);
+    const errors = Array.isArray(response?.errors) ? response.errors : [];
+    const graphqlShaped = _readsAsGraphQLResponse(response, errors);
+    const rows = [
+        captionRow(envelope.truncated ? "Response (truncated)" : "Response", _statusOf(envelope.status)),
+    ];
+    if (envelope.truncated) {
+        rows.push(captionRow(_cutSentenceOf(graphqlShaped, errors, response)));
+    }
+    if (response === null || !graphqlShaped) {
+        rows.push(isEmptyBody(envelope.body)
+            ? captionRow("Empty response body.")
+            : valueRows(envelope.body));
+        root.append(card(rows));
+        return;
+    }
+    if (errors.length > 0) {
+        rows.push(_errorsCaption(errors.length), _errorRows(errors));
+    }
+    const hasData = response.data !== null && response.data !== undefined;
+    rows.push(hasData ? captionRow("Data") : captionRow("Data", "none"));
+    if (hasData) {
+        rows.push(_valuesOf(_withoutCutMarker(response.data)));
+    }
+    root.append(card(rows));
+}
+function _readsAsGraphQLResponse(response, errors) {
+    return response !== null && (errors.length > 0 || "data" in response);
+}
+function _statusOf(status) {
+    return status === null || status === 200 ? undefined : statusBadgeOf(status);
+}
+function _cutSentenceOf(graphqlShaped, errors, response) {
+    if (!graphqlShaped || errors.length === 0) {
+        return "Too large to show in full: the response is shortened.";
+    }
+    return typeof response?.data === "string"
+        ? "Too large to show in full: the data is shortened and any other response fields dropped; the errors are complete."
+        : "Too large to show in full: other response fields are dropped; the data and errors are complete.";
+}
+function _errorsCaption(count) {
+    const row = captionRow("");
+    row.replaceChildren(el("span", "tf:font-medium tf:text-tf-destructive", `${String(count)} ${count === 1 ? "error" : "errors"}`));
+    return row;
+}
+function _errorRows(errors) {
+    const rows = factRows(errors.map((error) => {
+        const record = recordOf(error);
+        const path = Array.isArray(record?.path)
+            ? record.path.map(String).join(".")
+            : "";
+        const message = typeof record?.message === "string" && record.message !== ""
+            ? record.message
+            : prettyPrintParameters(error);
+        return [
+            path === "" ? "—" : path.replaceAll(".", ".\u200b"),
+            message,
+        ];
+    }));
+    rows.dataset.tfGraphqlErrors = String(errors.length);
+    return scrollRegion([rows]);
+}
+function _valuesOf(value) {
+    const record = recordOf(value);
+    const flat = record !== null &&
+        Object.values(record).every((entry) => entry === null || typeof entry !== "object");
+    return flat ? valueRows(value) : valueBlock(value);
+}
+const CUT_MARKER = /… \[truncated: [^\]]*\]$/;
+function _withoutCutMarker(data) {
+    return typeof data === "string" ? data.replace(CUT_MARKER, "…") : data;
+}

package/dist/components/tool-views/view-dom.d.ts

@@ -58,8 +58,7 @@ export declare function stringOf(value: unknown): string | null;
 export declare function statelessToolView(render: (props: ToolViewProps) => HTMLElement): ToolViewAdapter;
 /**
  * True when the call finished successfully and its own result is available
- * (status "output-available" and not offloaded). Check it before drawing a
- * result.
+ * (status "output-available"). Check it before drawing a result.
  */
 export declare function settledWithResult(call: ToolViewCall): boolean;
 /**
@@ -69,8 +68,8 @@ export declare function settledWithResult(call: ToolViewCall): boolean;
 export declare function settledOutcomeNotesOf(call: ToolViewCall): HTMLElement[];
 /**
  * A short sentence for a call that ended without a usable result (failed,
- * declined, not approved, didn't run, interrupted, or result replaced by a
- * preview). Null while the call is running or when it finished normally.
+ * declined, not approved, didn't run or interrupted). Null while the call is
+ * running or when it finished normally.
  */
 export declare function settledOutcomeNoteOf(call: ToolViewCall): string | null;
 /** An action's recorded HTTP response, as read by actionEnvelopeOf. */

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

@@ -140,7 +140,7 @@ export function statelessToolView(render) {
     };
 }
 export function settledWithResult(call) {
-    return call.status === "output-available" && call.offloaded !== true;
+    return call.status === "output-available";
 }
 export function settledOutcomeNotesOf(call) {
     const sentence = settledOutcomeNoteOf(call);
@@ -163,9 +163,6 @@ export function settledOutcomeNoteOf(call) {
         case "output-available":
             break;
     }
-    if (call.offloaded === true) {
-        return "The result was replaced by a shortened preview and isn't rendered here.";
-    }
     return null;
 }
 export function actionEnvelopeOf(resultText) {

package/dist/components/transcript-follow.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { useStickToBottomContext } from "use-stick-to-bottom";
+const ReleaseFollowContext = createContext(() => undefined);
+export function ReleaseFollowProvider({ children }) {
+    const { stopScroll } = useStickToBottomContext();
+    return (_jsx(ReleaseFollowContext.Provider, { value: stopScroll, children: children }));
+}
+export function useReleaseTranscriptFollow() {
+    return useContext(ReleaseFollowContext);
+}

package/dist/components/use-child-replay-stream.js

@@ -6,6 +6,7 @@ import { messagesRecorder, streamErrorRecorder, } from "../core/messages-cell.js
 import { TailSlotPool } from "../core/tail-slot-pool.js";
 import { toolCancelRecorder, withToolCancelAnchored, } from "../core/tool-cancel-anchors.js";
 import { toolErrorRecorder, withToolErrorAnchored, } from "../core/tool-error-anchors.js";
+import { EMPTY_WITHDRAWN_REPLIES, withdrawnReplyRecorder, withoutWithdrawnReplies, withRepliesWithdrawn, } from "../core/withdrawn-anchors.js";
 import { ServingReplayStreamAgent } from "../transport/replay-stream-agent.js";
 import { streamUrlForChild } from "../transport/serving-api.js";
 import { resumeMarkerRecorder } from "../transport/stream-resume.js";
@@ -14,7 +15,6 @@ const THREADLESS_ANCHORS = {
     subagentDeliveryAnchors: new Map(),
     toolCallDisplayAnchors: new Map(),
     toolSchemaAnchors: new Map(),
-    toolOffloadAnchors: new Set(),
     toolRefusalAnchors: new Map(),
     toolDecisionAnchors: new Set(),
     toolDenialAnchors: new Set(),
@@ -38,6 +38,7 @@ export function useChildReplayStream({ session, threadId, childSessionId, refres
     const [toolCancels, setToolCancels] = useState(() => new Set());
     const [resumeAnchors, setResumeAnchors] = useState(() => new Map());
     const [blockTimings, setBlockTimings] = useState(() => new Map());
+    const [withdrawnReplies, setWithdrawnReplies] = useState(EMPTY_WITHDRAWN_REPLIES);
     const { tailed, slotDenied } = useChildTailLease(streamEnd);
     useEffect(() => {
         if (!tailed) {
@@ -56,6 +57,7 @@ export function useChildReplayStream({ session, threadId, childSessionId, refres
                 setToolCancels,
                 setResumeAnchors,
                 setBlockTimings,
+                setWithdrawnReplies,
             },
         });
     }, [session, threadId, childSessionId, tailed, attempt, refreshLedger]);
@@ -66,8 +68,9 @@ export function useChildReplayStream({ session, threadId, childSessionId, refres
         toolCancelAnchors: toolCancels,
         blockTimingAnchors: blockTimings,
     }), [resumeAnchors, toolErrors, toolCancels, blockTimings]);
+    const visibleMessages = useMemo(() => withoutWithdrawnReplies(messages, withdrawnReplies), [messages, withdrawnReplies]);
     return {
-        messages,
+        messages: visibleMessages,
         streamEnd,
         tailed,
         slotDenied,
@@ -176,11 +179,15 @@ function subscribeAnchorTaps(agent, record) {
                 : previous;
         });
     }));
+    const withdrawnTap = agent.subscribe(withdrawnReplyRecorder((marker) => {
+        record.setWithdrawnReplies((previous) => withRepliesWithdrawn(previous, marker));
+    }));
     return () => {
         messagesTap.unsubscribe();
         errorAnchorTap.unsubscribe();
         cancelAnchorTap.unsubscribe();
         resumeAnchorTap.unsubscribe();
         timingAnchorTap.unsubscribe();
+        withdrawnTap.unsubscribe();
     };
 }

package/dist/components/use-transcript.d.ts

@@ -38,7 +38,7 @@ export interface TranscriptSurface {
      */
     decisionsPending: boolean;
     /**
-     * The raw message list behind the rows (user messages, assistant text,
+     * The message list behind the rows (user messages, assistant text,
      * reasoning, tool calls and tool results). Use it with markerAnchors,
      * running and turnMeta to call transcriptRowsOf yourself.
      */
@@ -65,7 +65,8 @@ export interface TranscriptSurface {
  * as rows plus run state. Call it inside TeaflaskAssistantProvider (it throws
  * otherwise); keep it mounted while the transcript is on screen, because that
  * is what makes the assistant connect and load an existing conversation's
- * history.
+ * history. A reply part the assistant withdrew is left out of messages and
+ * rows; the re-sent answer follows.
  */
 export declare function useTranscript(options?: {
     surface?: string;