entasis 0.10.2 → 0.12.0

package/dist/components/AIThread/aiThread.mcp.js

@@ -22,7 +22,7 @@ Virtualized AI transcript with stable message keys, initial end anchoring, pinne
 />
 \`\`\`
 
-\`liveText\` is announced through a polite, atomic, screen-reader-only region. It is not appended to the visual transcript and does not suppress the empty state.
+\`liveText\` is announced through a polite, atomic, screen-reader-only region and does not suppress the empty state. While \`streaming\` is true and the last item is a user turn, a pending assistant row shows \`liveText\` (or "Thinking…") with the \`shimmer\` utility; the live region announces the same text. The segment that ends a streaming reply shows a pulsing caret.
 
 ## Message input
 
@@ -31,9 +31,13 @@ Virtualized AI transcript with stable message keys, initial end anchoring, pinne
 - \`{ type: 'text', text }\`
 - \`{ type: 'marker', content, variant? }\`
 - \`{ type: 'tool', tool: AIToolCall }\`
-- AI SDK \`dynamic-tool\` and \`tool-*\` parts with \`toolCallId\`, \`state\`, \`input\`, \`output\`, \`structuredContent\`, \`result\`, \`error\`, and \`_meta\`
+- AI SDK \`dynamic-tool\` and \`tool-*\` parts with \`toolCallId\`, \`state\`, \`input\`, \`output\`, \`structuredContent\`, \`result\`, \`error\`, \`approval\`, and \`_meta\`. States map through \`getAIToolStatusFromState\`: \`approval-requested\`, \`approval-responded\` and \`output-denied\` become AITool's awaiting, approved and denied statuses, so a call waiting on the user never spins.
+- AI SDK \`{ type: 'reasoning', text, state? }\` - rendered with AIReasoning, streaming while \`state\` is \`'streaming'\` (or, without a state, while it is the last part of a streaming reply).
+- AI SDK \`source-url\` / \`source-document\` parts - one "Sources" row of chips per message; only http(s) URLs become links.
+- AI SDK \`file\` parts - shown as file previews with the message's text segment (or a segment of their own). Only https, blob and image data URLs are used as previews.
+- \`step-start\` and \`data-*\` parts carry no visible content and are skipped. An assistant message with nothing visible yet (only such parts, empty text, or the empty placeholder a client adds before the first token) is not rendered, so the pending row stays until real content arrives.
 
-When text parts are present, top-level message content is not rendered again. Consecutive ordinary tools are grouped through \`AITool\`.
+When text parts are present, top-level message content is not rendered again. Consecutive ordinary tools are grouped through \`AITool\`. An ask-user-question tool that is answered (by the conversation, by the AI SDK output state, or locally through this thread) renders as a compact question → answer summary (\`AIAskUserQuestionSummary\`); a dismissed one settles as a cancelled call.
 
 ## Core props
 
@@ -41,18 +45,20 @@ When text parts are present, top-level message content is not rendered again. Co
 - **getMessageKey**: (message, index) => string | number | bigint | undefined - Stable virtualization key. Prefer persistent identifiers.
 - **liveText**: string - Screen-reader announcement. Falls back to AIConversation.
 - **streaming**: boolean - Sets the busy state. Falls back to AIConversation.
-- **density**: 'compact' | 'normal' | 'comfortable' - Transcript row and edge spacing. Default 'normal'.
-- **messageSize**: 'small' | 'normal' | 'large' - Size forwarded to default AIMessage rows. Default 'normal'.
-- **messageVariant**: 'bubble' | 'minimal' - Presentation forwarded to default AIMessage rows. Default 'bubble'.
+- **density**: 'compact' | 'normal' | 'comfortable' - Transcript row and edge spacing, and the spacing inside messages (table cells, code blocks, space between paragraphs and lists). Default 'normal'.
+- **messageSize**: 'small' | 'normal' | 'large' - Type scale of the whole transcript. Message text, tables, lists and quotes read at it; code blocks at 0.9× of it; tool calls and reasoning one step below it (never under text-xs); sources, markers and answered-question summaries follow it too. Default 'normal'.
+- **messageVariant**: 'minimal' | 'bubble' - Presentation forwarded to default AIMessage rows. Default 'minimal' (flat full-width assistant prose).
+- **messageColor**: Colors - User-bubble colour forwarded to default AIMessage rows. Neutral (the theme default) is a quiet grey bubble; any other role paints a solid bubble.
+- **contentWidth**: string | number - Maximum width of the centred reading column (a CSS length, or pixels). Sets \`--ai-thread-content-width\`; without it rows follow an ancestor's \`--ai-chat-content-width\` (AIChat sets 48rem) and otherwise span the thread.
 - **followOutput**: boolean - Follow appended rows only while pinned. Default true.
 - **bottomThreshold**: number - End-pinned tolerance in pixels. Default 80.
 - **estimateSize**: number - Estimated row height. Defaults to 80, 96, or 120 from density.
 - **overscan**: number - Extra virtual rows. Default 4.
 - **padding**: number - Shared start/end virtual padding. Defaults to 8, 16, or 24 from density.
-- **paddingStart**, **paddingEnd**: number - Per-edge virtual padding overrides.
-- **scrollBehavior**: 'auto' | 'smooth' | 'instant' - Append, TOC, and scroll-button behavior. Default 'smooth'.
-- **showScrollButton**: boolean - Show the latest-message action away from the end. Default true.
-- **scrollButtonPosition**: 'left' | 'center' | 'right' - Default 'right'.
+- **paddingStart**, **paddingEnd**: number - Per-edge virtual padding overrides. Message actions sit inside their row, so the end padding reserves no extra room for them.
+- **scrollBehavior**: 'auto' | 'smooth' | 'instant' - TOC and scroll-to-latest behavior. Default 'smooth'. Following output (an appended row, streamed text, a docked question resizing the thread) is always instant, so new content is in place on its first painted frame.
+- **showScrollButton**: boolean - Show the round scroll-to-latest button as soon as the view leaves the end (by wheel, trackpad, keys or scrollbar). Default true.
+- **scrollButtonPosition**: 'left' | 'center' | 'right' - Default 'center', just above whatever sits below the thread.
 - **ref**: HTMLDivElement - Bindable thread root, not the internal scroll viewport.
 - **class**: string - Thread-root classes.
 - **role**: HTML role - Thread-root role. Default 'log'.
@@ -60,25 +66,33 @@ When text parts are present, top-level message content is not rendered again. Co
 - **onscroll**: (event) => void - Raw native viewport-scroll callback.
 - Native div attributes and Svelte attachments are forwarded to the thread root.
 
-## Empty state and suggestions
+## Empty state, suggestions and errors
 
-- **empty**: Slot - Replaces the empty state.
-- **suggestions**: readonly string[] - Default empty-state suggestions. Falls back to AIConversation.
-- **onSelect**: (suggestion) => void - Pick event for an empty-state suggestion; takes precedence over the provider's default \`setInput\` behavior.
+- **empty**: Slot - Replaces the empty state, a vertically centred greeting ("How can I help you today?") with wrapping suggestion chips.
+- **suggestions**: readonly string[] - Empty-state chips, then follow-ups below the transcript after a finished assistant turn (not while streaming, during a question or under an error). Follow-ups are one row that scrolls sideways with an edge fade instead of wrapping. Falls back to AIConversation.
+- **showFollowUps**: boolean - Show the follow-ups. Default true.
+- **onSelect**: (suggestion) => void - Pick event for a suggestion or follow-up; takes precedence over the provider's default \`setInput\` behavior.
+- **error**: unknown - Shown as a danger row at the end of the transcript, where the reply failed. Falls back to AIConversation. An empty transcript shows the error instead of the greeting.
+- **showError**: boolean - Show that row. Default true.
+- **onErrorRetry**: () => void - The row's Retry button. Defaults to the conversation's \`retry\` targeting the last message; without either, there is no Retry button.
 
 ## Message composition
 
 - **message**: Slot<{ message, index, actionsVisibility }> - Replaces a complete message row. The
   resolved action visibility keeps custom renderers aligned with the thread's latest-message rule.
-- **messageSize**, **messageVariant** - Configure only the default AIMessage renderer; a custom message slot owns its presentation.
+- **messageVariant** configures only the default AIMessage renderer, and a custom message slot owns its presentation. **messageSize** also sizes the built-in reasoning, tool, source, marker and summary rows.
 - **messageActions**: AIMessageActionSnippet | false - Replaces or disables default actions.
-- **messageActionsVisibility**: 'hover' | 'always' | 'none' (default: 'always')
+- **messageActionsVisibility**: 'latest' | 'hover' | 'always' | 'none' (default: 'latest'). \`latest\` keeps the final assistant turn's bar visible and reveals the rest on hover or focus; hovering any row of a turn (its reasoning, tools or text) reveals that turn's bar, and hover-revealed bars always show on touch screens. Hidden bars keep their height, so no row draws under them. A system notice or marker after the last reply does not make it lose its \`latest\` bar or hide the follow-ups.
 - **messageCopyable**, **messageEditable**, **messageRetryable**: boolean
 - **onMessageCopy**, **onMessageEdit**, **onMessageRetry**: AIMessage action handlers.
 
-Assistant text that continues through tool rows into another assistant segment does not render
-an action region. Actions belong to the terminal assistant segment for that user turn; completed
-historical turns retain hover actions.
+A turn is one unit. A user message has its own bar; an assistant turn — reasoning, tools, and text
+up to the next user message or marker — has a single bar at its end. When the turn ends with its
+only text segment the bar sits under that text; otherwise it gets a row of its own whose copy takes
+the whole turn's text and whose retry targets the turn's last assistant message. The bar of a
+reply that is still streaming appears when it ends. The message slot's \`actionsVisibility\` is
+\`none\` for segments that do not end their unit. Rows of one turn are spaced by one gap; a larger
+fixed gap separates turns, and the action bar sits right under the row it closes.
 
 ## Tool and marker composition
 
@@ -98,7 +112,7 @@ Pending ask-user-question tools are auto-detected. Inside AIConversation, AIThre
 
 ## Minimap
 
-- **showToc**: boolean - Show the user-turn minimap when at least two user turns overflow the viewport.
+- **showToc**: boolean - Show the user-turn minimap when at least two user turns overflow the viewport. Below a 480px-wide viewport the minimap and its gutter step aside.
 - **tocSide**: 'left' | 'right' - Default 'left'.
 - **tocMaxPins**: number - Maximum compacted pins.
 - **tocTheme**: AIThreadTocThemeProps - Theme overrides forwarded to the default standalone primitive.

package/dist/components/AIThread/aiThread.props.d.ts

@@ -1,6 +1,6 @@
 import type { Slot } from '../Slot/slot.js';
 import type { WithAttachments } from '../../types/props.js';
-import type { Density } from '../../types/theme.js';
+import type { Colors, Density } from '../../types/theme.js';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { AIMarkerVariant } from '../AIMarker/aiMarker.props.js';
 import type { AIAskAnswers, AIAskQuestion, AIAskUserQuestionAnswer } from '../AIAskUserQuestion/aiAskUserQuestion.props.js';
@@ -30,8 +30,24 @@ export type AIThreadToolPart = {
     result?: unknown;
     error?: unknown;
     errorText?: string;
+    /** AI SDK approval record; `approved: false` renders the call as denied. */
+    approval?: AIThreadToolApproval;
     _meta?: Record<string, unknown>;
 };
+export type AIThreadToolApproval = {
+    id?: string;
+    approved?: boolean;
+    reason?: string;
+};
+/**
+ * A cited source from an AI SDK `source-url` or `source-document` part. `url` is set only for
+ * http(s) links.
+ */
+export type AIThreadSource = {
+    id: string;
+    title: string;
+    url?: string;
+};
 export type AIThreadPart = {
     type?: string;
     text?: string;
@@ -47,6 +63,15 @@ export type AIThreadPart = {
     result?: unknown;
     error?: unknown;
     errorText?: string;
+    approval?: AIThreadToolApproval;
+    /** `source-url` and `file` parts. */
+    url?: string;
+    /** `source-url` and `source-document` parts. */
+    title?: string;
+    sourceId?: string;
+    /** `file` and `source-document` parts. */
+    mediaType?: string;
+    filename?: string;
     _meta?: Record<string, unknown>;
     [key: string]: unknown;
 };
@@ -86,6 +111,8 @@ export type AIThreadAskUserQuestion<TMessage extends AIThreadItem = AIThreadItem
     nextLabel?: string;
     previousLabel?: string;
     discardLabel?: string;
+    /** Free-text "Other…" on choice questions; unset keeps AIAskUserQuestion's default (on). */
+    showOther?: boolean;
 };
 export type AIThreadAskUserQuestionStateChange<TMessage extends AIThreadItem = AIThreadItem> = {
     request: AIThreadAskUserQuestion<TMessage>;
@@ -103,6 +130,11 @@ export type AIThreadMessageRenderPayload<TMessage extends AIThreadItem = AIThrea
     /** Visibility resolved by the thread for this message's action region. */
     actionsVisibility: AIMessageActionVisibility;
 };
+/**
+ * When default message actions show. `latest` keeps the final assistant turn's bar visible and
+ * reveals the others on hover or focus; touch screens, which cannot hover, always show them.
+ */
+export type AIThreadMessageActionsVisibility = AIMessageActionVisibility | 'latest';
 export type AIThreadScrollBehavior = 'auto' | 'smooth' | 'instant';
 export type AIThreadScrollButtonPosition = 'left' | 'center' | 'right';
 export type AIThreadDensity = Density;
@@ -166,8 +198,19 @@ export type AIThreadProps<TMessage extends AIThreadItem = AIThreadItem> = WithAt
     density?: AIThreadDensity;
     /** Size forwarded to default AIMessage rows. @default 'normal' */
     messageSize?: AIMessageSize;
-    /** Presentation forwarded to default AIMessage rows. @default 'bubble' */
+    /** Presentation forwarded to default AIMessage rows. @default 'minimal' */
     messageVariant?: AIMessageVariant;
+    /**
+     * User-bubble colour forwarded to default AIMessage rows. Neutral is a quiet grey bubble;
+     * any other role paints a solid bubble. Defaults to the theme's default colour.
+     */
+    messageColor?: Colors;
+    /**
+     * Maximum width of the centred reading column, as a CSS length (`48rem`) or pixels. Sets
+     * `--ai-thread-content-width`; when omitted, rows follow `--ai-chat-content-width` from an
+     * ancestor (AIChat sets it) and otherwise span the thread.
+     */
+    contentWidth?: string | number;
     /** Follows appended output while the viewport remains pinned to the bottom. */
     followOutput?: boolean;
     /** Distance from the bottom, in pixels, considered pinned. */
@@ -182,11 +225,14 @@ export type AIThreadProps<TMessage extends AIThreadItem = AIThreadItem> = WithAt
     paddingStart?: number;
     /** Virtualizer padding after the final item. Overrides `padding`. */
     paddingEnd?: number;
-    /** Scroll behavior used by transcript navigation. */
+    /**
+     * Scroll behavior of navigation the reader asks for: the TOC and the scroll-to-latest button.
+     * Following output is always instant, so new rows are in place on their first frame.
+     */
     scrollBehavior?: AIThreadScrollBehavior;
     /** Displays the floating scroll-to-latest action. */
     showScrollButton?: boolean;
-    /** Horizontal alignment of the scroll-to-latest action. */
+    /** Horizontal alignment of the scroll-to-latest action. @default 'center' */
     scrollButtonPosition?: AIThreadScrollButtonPosition;
     /** Displays the user-turn minimap when multiple turns overflow the viewport. */
     showToc?: boolean;
@@ -194,6 +240,8 @@ export type AIThreadProps<TMessage extends AIThreadItem = AIThreadItem> = WithAt
     tocSide?: AIThreadTocSide;
     /** Maximum visible minimap pins before compaction. */
     tocMaxPins?: number;
+    /** Shows the minimap's rail and on-screen range bar beside its pins. @default false */
+    tocShowRange?: boolean;
     /** Theme overrides forwarded to the default AIThreadToc. */
     tocTheme?: AIThreadTocThemeProps;
     /** Direct ask-user-question request. `null` explicitly suppresses auto-detection. */
@@ -202,10 +250,24 @@ export type AIThreadProps<TMessage extends AIThreadItem = AIThreadItem> = WithAt
     renderAskUserQuestion?: boolean;
     /** Disables the active ask-user-question flow. */
     askUserQuestionDisabled?: boolean;
-    /** Suggestions used as the default empty state. */
+    /**
+     * Prompt suggestions: chips under the empty-state greeting, then follow-ups below the
+     * transcript after a finished assistant turn. Falls back to the nearest conversation.
+     */
     suggestions?: readonly string[];
-    /** Handles selection from the default empty-state suggestions. */
+    /** Shows `suggestions` as follow-ups after the last assistant turn. @default true */
+    showFollowUps?: boolean;
+    /** Handles selection from the empty-state suggestions and the follow-ups. */
     onSelect?: (suggestion: string) => void;
+    /** Error shown as a row at the end of the transcript. Falls back to the nearest conversation. */
+    error?: unknown;
+    /** Shows `error` in the transcript. @default true */
+    showError?: boolean;
+    /**
+     * Retries after an error. Defaults to the conversation's `retry`, targeting the last
+     * message; without either, the error row has no Retry button.
+     */
+    onErrorRetry?: () => void | Promise<void>;
     /** Content rendered above the virtual transcript. */
     header?: Slot;
     /** Content rendered below the virtual transcript. */
@@ -218,8 +280,11 @@ export type AIThreadProps<TMessage extends AIThreadItem = AIThreadItem> = WithAt
     message?: Slot<AIThreadMessageRenderPayload<TMessage>>;
     /** Custom action renderer shared by default message rows. */
     messageActions?: AIMessageActionSnippet<TMessage> | false;
-    /** Controls default message action visibility. @default 'always' */
-    messageActionsVisibility?: AIMessageActionVisibility;
+    /**
+     * When default message actions show. `latest` keeps the final assistant turn's bar visible
+     * and reveals the rest on hover or focus (always on touch screens). @default 'latest'
+     */
+    messageActionsVisibility?: AIThreadMessageActionsVisibility;
     /** Enables or disables copy actions. */
     messageCopyable?: boolean;
     /** Enables or disables edit actions. */

package/dist/components/AIThread/aiThread.theme.d.ts

@@ -16,7 +16,33 @@ export declare const aiThreadTheme: {
             normal: string;
             comfortable: string;
         };
+        boundary: {
+            part: null;
+            unit: null;
+            afterBar: null;
+            bar: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    message: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    greeting: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    emptySuggestions: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    followUps: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    followUpList: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    pending: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    errorBody: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    sources: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    sourcesLabel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    source: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    actions: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     scrollButton: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         position: {
             left: string;
@@ -52,7 +78,33 @@ export declare const setAIThreadTheme: (theme: InferComponentTheme<{
             normal: string;
             comfortable: string;
         };
+        boundary: {
+            part: null;
+            unit: null;
+            afterBar: null;
+            bar: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    message: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    greeting: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    emptySuggestions: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    followUps: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    followUpList: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    pending: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    errorBody: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    sources: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    sourcesLabel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    source: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    actions: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     scrollButton: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         position: {
             left: string;
@@ -86,7 +138,33 @@ export declare const useAIThreadTheme: import("../../utils/cva/theme.js").UseCom
             normal: string;
             comfortable: string;
         };
+        boundary: {
+            part: null;
+            unit: null;
+            afterBar: null;
+            bar: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    message: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    greeting: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    emptySuggestions: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    followUps: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    followUpList: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    pending: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    errorBody: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    sources: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    sourcesLabel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    source: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    actions: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     scrollButton: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         position: {
             left: string;

package/dist/components/AIThread/aiThread.theme.js

@@ -3,7 +3,19 @@ const defaultRoot = cva({ base: 'relative flex min-h-0 min-w-0 flex-1 flex-col'
 const defaultHeader = cva({ base: 'shrink-0' });
 const defaultBody = cva({ base: 'relative flex min-h-0 min-w-0 flex-1' });
 const defaultViewport = cva({
-    base: 'min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-focus/50',
+    // `isolate`: rows raise themselves on hover (to keep their action bar on top), and that must not
+    // lift them above what floats over the transcript (the follow-up suggestions, the scroll button).
+    base: [
+        'isolate min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-focus/50',
+        // The native scrollbar, drawn like ScrollArea's: a thin rounded `neutral-muted` thumb with no
+        // track, shown while the pointer is over the transcript. The virtualized list stays on the
+        // native scroller (a ScrollArea's content observer fights its row measurement). WebKit/Blink
+        // read the `::-webkit-scrollbar` parts; Firefox, which has none, gets the standard properties
+        // (set only there: in Chromium they would switch the parts off).
+        '[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent',
+        '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-neutral-muted',
+        'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:transparent_transparent] supports-[not_selector(::-webkit-scrollbar)]:hover:[scrollbar-color:var(--color-neutral-muted)_transparent]'
+    ].join(' '),
     variants: {
         tocSide: {
             left: 'pl-layout-lg',
@@ -12,27 +24,100 @@ const defaultViewport = cva({
     }
 });
 const defaultList = cva({ base: 'relative w-full' });
+// One vertical rhythm: rows of a turn (reasoning, tools, text, sources) are one fixed gap apart, the
+// first row of the next turn (or marker) adds a larger fixed gap, and a turn's own action-bar row
+// sits right under the row it closes. A turn that ends with an action bar is already set apart by
+// the bar's reserved height, so the next turn adds only the in-turn gap after it (`afterBar`).
+// Rows carry no outer margins of their own.
 const defaultItem = cva({
-    base: 'absolute top-0 left-0 z-0 w-full has-[[data-actions-visibility=always]]:z-10 hover:!z-20 focus-within:!z-20',
+    base: 'absolute top-0 left-0 z-0 w-full hover:!z-20 focus-within:!z-20',
     variants: {
         density: {
-            compact: 'px-lg py-micro',
-            normal: 'px-xl py-md',
-            comfortable: 'px-layout-sm py-lg'
+            compact: 'px-lg pb-micro',
+            normal: 'px-xl pb-md',
+            comfortable: 'px-layout-sm pb-lg'
+        },
+        boundary: {
+            part: null,
+            unit: null,
+            afterBar: null,
+            bar: 'pt-0'
+        }
+    },
+    compoundVariants: [
+        { boundary: 'part', density: 'compact', class: 'pt-micro' },
+        { boundary: 'part', density: 'normal', class: 'pt-md' },
+        { boundary: 'part', density: 'comfortable', class: 'pt-lg' },
+        { boundary: 'afterBar', density: 'compact', class: 'pt-micro' },
+        { boundary: 'afterBar', density: 'normal', class: 'pt-md' },
+        { boundary: 'afterBar', density: 'comfortable', class: 'pt-lg' },
+        { boundary: 'unit', density: 'compact', class: 'pt-md' },
+        { boundary: 'unit', density: 'normal', class: 'pt-layout-md' },
+        { boundary: 'unit', density: 'comfortable', class: 'pt-layout-lg' }
+    ],
+    defaultVariants: { density: 'normal', boundary: 'part' }
+});
+// AIMessage rendered by the thread: the row supplies the vertical rhythm, so the message adds none.
+const defaultMessage = cva({ base: 'py-0' });
+// The centred reading column. `--ai-thread-content-width` (the `contentWidth` prop) wins over an
+// ancestor's `--ai-chat-content-width`; with neither, rows span the thread.
+const defaultContent = cva({
+    base: 'mx-auto w-full min-w-0 max-w-[var(--ai-thread-content-width,var(--ai-chat-content-width,none))]'
+});
+const defaultEmpty = cva({
+    base: 'mx-auto flex min-h-full w-full max-w-[var(--ai-thread-content-width,var(--ai-chat-content-width,none))] flex-col items-center justify-center gap-xl px-xl py-layout-sm text-center'
+});
+const defaultGreeting = cva({ base: 'text-lg font-semibold text-balance text-neutral' });
+const defaultEmptySuggestions = cva({
+    base: 'flex max-w-full min-w-0 flex-wrap justify-center gap-sm'
+});
+// Follow-ups share the rows' inline inset at the thread's density.
+// Floats over the bottom of the transcript, with no band of its own: the text scrolls behind the
+// chips, and the list's end padding (the row's height) keeps the last row clear of them at the end.
+// Only the chips' column takes the pointer; the transcript beside it stays selectable.
+const defaultFollowUps = cva({
+    base: 'pointer-events-none absolute inset-x-0 bottom-0 z-10 pb-sm',
+    variants: {
+        density: {
+            compact: 'px-lg',
+            normal: 'px-xl',
+            comfortable: 'px-layout-sm'
         }
     },
     defaultVariants: { density: 'normal' }
 });
+// The content column holding the follow-up row. The row pads itself vertically for focus rings,
+// so the negative block margin keeps the band as tall as before.
+const defaultFollowUpList = cva({
+    base: 'pointer-events-auto mx-auto -my-xs w-full min-w-0 max-w-[var(--ai-thread-content-width,var(--ai-chat-content-width,none))]'
+});
+// The pending assistant row's label: rendered inside an assistant AIMessage, so it takes the
+// message's type size and column, with the shared `shimmer` utility on top.
+const defaultPending = cva({ base: 'shimmer text-neutral/70' });
+const defaultError = cva({ base: 'w-full min-w-0' });
+const defaultErrorBody = cva({ base: 'flex flex-col items-start gap-sm' });
+const defaultSources = cva({
+    base: 'group/ai-thread-sources-size flex min-w-0 flex-wrap items-center gap-xs text-sm data-[size=small]:text-xs data-[size=large]:text-base'
+});
+const defaultSourcesLabel = cva({
+    base: 'text-xs group-data-[size=large]/ai-thread-sources-size:text-sm font-medium text-neutral/70'
+});
+const defaultSource = cva({
+    base: 'inline-flex h-6 max-w-60 min-w-0 items-center truncate rounded-full border border-neutral-muted px-md text-xs group-data-[size=large]/ai-thread-sources-size:text-sm text-neutral/70 [&[href]]:state-layer [&[href]]:hover:text-neutral'
+});
+// A turn's action-bar row. AIMessageActions sizes the row to its buttons.
+const defaultActions = cva({ base: '' });
 const defaultScrollButton = cva({
-    base: 'absolute bottom-4 z-10',
+    // Above the follow-up suggestions when they show (`--ai-thread-follow-ups-height`).
+    base: 'absolute bottom-[calc(var(--space-md)+var(--ai-thread-follow-ups-height,0px))] z-10 rounded-full bg-surface-raised lift-2',
     variants: {
         position: {
-            left: 'left-4',
+            left: 'left-md',
             center: 'left-1/2 -translate-x-1/2',
-            right: 'right-4'
+            right: 'right-md'
         }
     },
-    defaultVariants: { position: 'right' }
+    defaultVariants: { position: 'center' }
 });
 const defaultAskQuestion = cva({
     base: 'shrink-0 border-t border-neutral-muted p-lg'
@@ -55,6 +140,20 @@ export const aiThreadTheme = {
     viewport: defaultViewport,
     list: defaultList,
     item: defaultItem,
+    message: defaultMessage,
+    content: defaultContent,
+    empty: defaultEmpty,
+    greeting: defaultGreeting,
+    emptySuggestions: defaultEmptySuggestions,
+    followUps: defaultFollowUps,
+    followUpList: defaultFollowUpList,
+    pending: defaultPending,
+    error: defaultError,
+    errorBody: defaultErrorBody,
+    sources: defaultSources,
+    sourcesLabel: defaultSourcesLabel,
+    source: defaultSource,
+    actions: defaultActions,
     scrollButton: defaultScrollButton,
     askQuestion: defaultAskQuestion,
     tocOverlay: defaultTocOverlay,

package/dist/components/AIThread/index.d.ts

@@ -1,7 +1,7 @@
 export { default as AIThread } from './AIThread.svelte';
 export { default as AIThreadToc } from '../AIThreadToc/AIThreadToc.svelte';
 export type { AIThreadTocProps } from '../AIThreadToc/aiThreadToc.props.js';
-export type { AIFileSource, AIThreadAskUserQuestion, AIThreadAskUserQuestionState, AIThreadAskUserQuestionStateChange, AIThreadDensity, AIThreadItem, AIThreadMessageRenderPayload, AIThreadMessageKey, AIThreadPart, AIThreadProps, AIThreadRenderPayload, AIThreadRole, AIThreadScrollBehavior, AIThreadScrollButtonPosition, AIThreadTocEntry, AIThreadTocPin, AIThreadTocPinPayload, AIThreadTocPreviewAlign, AIThreadTocPreviewSide, AIThreadTocRange, AIThreadTocSide, AIThreadTocState, AIThreadToolPart } from './aiThread.props.js';
+export type { AIFileSource, AIThreadAskUserQuestion, AIThreadAskUserQuestionState, AIThreadAskUserQuestionStateChange, AIThreadDensity, AIThreadItem, AIThreadMessageActionsVisibility, AIThreadMessageRenderPayload, AIThreadMessageKey, AIThreadPart, AIThreadProps, AIThreadRenderPayload, AIThreadRole, AIThreadScrollBehavior, AIThreadScrollButtonPosition, AIThreadSource, AIThreadTocEntry, AIThreadTocPin, AIThreadTocPinPayload, AIThreadTocPreviewAlign, AIThreadTocPreviewSide, AIThreadTocRange, AIThreadTocSide, AIThreadTocState, AIThreadToolApproval, AIThreadToolPart } from './aiThread.props.js';
 export type { AIMessageSize, AIMessageVariant } from '../AIMessage/aiMessage.props.js';
 export { aiThreadTocTheme, setAIThreadTocTheme, useAIThreadTocTheme, type AIThreadTocTheme, type AIThreadTocThemeProps } from '../AIThreadToc/aiThreadToc.theme.js';
 export type { AIMarkerVariant } from '../AIMarker/aiMarker.props.js';

package/dist/components/AIThread/threadAskUserQuestion.d.ts

@@ -1,2 +1,5 @@
-import type { AIThreadAskUserQuestion, AIThreadAskUserQuestionState, AIThreadItem } from './aiThread.props.js';
+import type { AIToolCall } from '../AITool/aiTool.props.js';
+import type { AIThreadAskUserQuestion, AIThreadAskUserQuestionState, AIThreadItem, AIThreadMessageKey } from './aiThread.props.js';
 export declare function findActiveAskUserQuestion<TMessage extends AIThreadItem>(messages: readonly TMessage[], getMessageKey: (message: TMessage, index: number) => string, stateOverrides: Record<string, AIThreadAskUserQuestionState | undefined>): AIThreadAskUserQuestion<TMessage> | null;
+export declare function toAskUserQuestionRequest<TMessage extends AIThreadItem>(message: TMessage, messageIndex: number, messageKey: AIThreadMessageKey, tool: AIToolCall, toolIndex: number, stateOverrides: Record<string, AIThreadAskUserQuestionState | undefined>): AIThreadAskUserQuestion<TMessage> | undefined;
+export declare function isAskUserQuestionTool(tool: AIToolCall): boolean;

package/dist/components/AIThread/threadAskUserQuestion.js

@@ -1,4 +1,4 @@
-import { collectAIThreadMessageTools } from './threadRenderItems.js';
+import { collectAIThreadMessageTools } from './threadTools.js';
 export function findActiveAskUserQuestion(messages, getMessageKey, stateOverrides) {
     for (let messageIndex = messages.length - 1; messageIndex >= 0; messageIndex -= 1) {
         const message = messages[messageIndex];
@@ -15,7 +15,7 @@ export function findActiveAskUserQuestion(messages, getMessageKey, stateOverride
     }
     return null;
 }
-function toAskUserQuestionRequest(message, messageIndex, messageKey, tool, toolIndex, stateOverrides) {
+export function toAskUserQuestionRequest(message, messageIndex, messageKey, tool, toolIndex, stateOverrides) {
     const input = recordValue(tool.input);
     const output = recordValue(tool.output);
     const questions = questionList(output?.questions ?? input?.questions);
@@ -39,10 +39,11 @@ function toAskUserQuestionRequest(message, messageIndex, messageKey, tool, toolI
         submittingLabel: stringValue(output?.submittingLabel ?? input?.submittingLabel),
         nextLabel: stringValue(output?.nextLabel ?? input?.nextLabel),
         previousLabel: stringValue(output?.previousLabel ?? input?.previousLabel),
-        discardLabel: stringValue(output?.discardLabel ?? input?.discardLabel)
+        discardLabel: stringValue(output?.discardLabel ?? input?.discardLabel),
+        showOther: booleanValue(output?.showOther ?? input?.showOther)
     };
 }
-function isAskUserQuestionTool(tool) {
+export function isAskUserQuestionTool(tool) {
     const name = normalizedName(tool.name ?? tool.title);
     return ['askuserquestion', 'askquestion', 'requestuserquestion', 'requestuserinput'].includes(name);
 }
@@ -89,6 +90,9 @@ function isQuestion(value) {
     }
     return question.type === undefined || question.type === 'text' || question.type === 'file';
 }
+function booleanValue(value) {
+    return typeof value === 'boolean' ? value : undefined;
+}
 function stringValue(value) {
     return typeof value === 'string' && value.length > 0 ? value : undefined;
 }