@kortix/ui 0.0.0-stage → 0.14.3

package/dist/chat/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @kortix/ui/chat — the Kortix chat for `@kortix/sdk` sessions.
+ *
+ *   const session = useSession(projectId, sessionId);
+ *   return <SessionThread session={session} />;
+ *
+ * Every piece is exported, so a host can compose its own layout from
+ * MessageList, MessageView, Composer and the prompts.
+ */
+export { AgentPicker } from './agent-picker.js';
+export { Composer, type ComposerCommand, parseCommand, slashQuery } from './composer.js';
+export { Markdown } from './markdown.js';
+export { DefaultEmptyState, MessageList } from './message-list.js';
+export { type MessageRenderers, MessageView, type RenderTool } from './message-view.js';
+export { filterModels, ModelPicker } from './model-picker.js';
+export { type ChatErrorHandler, type PermissionDecision, PermissionPrompt } from './permission-prompt.js';
+export { QuestionPrompt } from './question-prompt.js';
+export { sendFailureTitle } from './send-failure.js';
+export { SessionPickers, SessionThread, type SessionThreadProps } from './session-thread.js';
+export { closeUnterminatedCodeFence, holdBackFenceOpener, holdBackTableHeader, streamingMarkdown, } from './streaming-markdown.js';
+export { ToolCall } from './tool-call.js';
+export { userMessageParts } from './user-message-parts.js';

package/dist/chat/index.js

@@ -0,0 +1,22 @@
+/**
+ * @kortix/ui/chat — the Kortix chat for `@kortix/sdk` sessions.
+ *
+ *   const session = useSession(projectId, sessionId);
+ *   return <SessionThread session={session} />;
+ *
+ * Every piece is exported, so a host can compose its own layout from
+ * MessageList, MessageView, Composer and the prompts.
+ */
+export { AgentPicker } from './agent-picker.js';
+export { Composer, parseCommand, slashQuery } from './composer.js';
+export { Markdown } from './markdown.js';
+export { DefaultEmptyState, MessageList } from './message-list.js';
+export { MessageView } from './message-view.js';
+export { filterModels, ModelPicker } from './model-picker.js';
+export { PermissionPrompt } from './permission-prompt.js';
+export { QuestionPrompt } from './question-prompt.js';
+export { sendFailureTitle } from './send-failure.js';
+export { SessionPickers, SessionThread } from './session-thread.js';
+export { closeUnterminatedCodeFence, holdBackFenceOpener, holdBackTableHeader, streamingMarkdown, } from './streaming-markdown.js';
+export { ToolCall } from './tool-call.js';
+export { userMessageParts } from './user-message-parts.js';

package/dist/chat/markdown.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Assistant markdown (GitHub-flavored), styled by the Kortix tokens.
+ * `streaming` holds back a half-written table header or fence opener and
+ * closes an open code fence, so a turn in progress never flashes raw syntax.
+ */
+export declare const Markdown: import("react").NamedExoticComponent<{
+    children: string;
+    className?: string;
+    streaming?: boolean;
+}>;

package/dist/chat/markdown.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from '../lib/utils.js';
+import { streamingMarkdown } from './streaming-markdown.js';
+const COMPONENTS = {
+    p: ({ children }) => _jsx("p", { className: "my-2 first:mt-0 last:mb-0", children: children }),
+    h1: ({ children }) => _jsx("h1", { className: "mt-4 mb-2 text-base font-semibold first:mt-0", children: children }),
+    h2: ({ children }) => _jsx("h2", { className: "mt-4 mb-2 text-sm font-semibold first:mt-0", children: children }),
+    h3: ({ children }) => _jsx("h3", { className: "mt-3 mb-1.5 text-sm font-semibold first:mt-0", children: children }),
+    ul: ({ children }) => (_jsx("ul", { className: "marker:text-muted-foreground my-2 ml-4 list-disc space-y-1", children: children })),
+    ol: ({ children }) => (_jsx("ol", { className: "marker:text-muted-foreground my-2 ml-4 list-decimal space-y-1", children: children })),
+    li: ({ children }) => _jsx("li", { className: "pl-1", children: children }),
+    a: ({ children, href }) => (_jsx("a", { href: href, target: "_blank", rel: "noreferrer noopener", className: "text-foreground underline underline-offset-2 hover:no-underline", children: children })),
+    strong: ({ children }) => _jsx("strong", { className: "font-semibold", children: children }),
+    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-border text-muted-foreground my-2 border-l-2 pl-3", children: children })),
+    hr: () => _jsx("hr", { className: "border-border my-3" }),
+    code: ({ className, children }) => String(className ?? '').includes('language-') ? (_jsx("code", { className: "font-mono text-xs", children: children })) : (_jsx("code", { className: "bg-muted rounded-sm px-1.5 py-0.5 font-mono text-xs", children: children })),
+    pre: ({ children }) => (_jsx("pre", { className: "border-border bg-muted scrollbar-thin my-2 overflow-x-auto rounded-md border p-3 font-mono text-xs leading-relaxed", children: children })),
+    table: ({ children }) => (_jsx("div", { className: "my-2 overflow-x-auto", children: _jsx("table", { className: "w-full border-collapse text-xs", children: children }) })),
+    th: ({ children }) => _jsx("th", { className: "border-border border px-2 py-1 text-left font-medium", children: children }),
+    td: ({ children }) => _jsx("td", { className: "border-border border px-2 py-1", children: children }),
+};
+/**
+ * Assistant markdown (GitHub-flavored), styled by the Kortix tokens.
+ * `streaming` holds back a half-written table header or fence opener and
+ * closes an open code fence, so a turn in progress never flashes raw syntax.
+ */
+export const Markdown = memo(function Markdown({ children, className, streaming = false, }) {
+    const text = useMemo(() => (streaming ? streamingMarkdown(children) : children), [children, streaming]);
+    if (!text)
+        return null;
+    return (_jsx("div", { "data-slot": "markdown", className: cn('text-foreground text-sm leading-relaxed', className), children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, children: text }) }));
+});

package/dist/chat/message-list.d.ts

@@ -0,0 +1,25 @@
+import { type SessionLogThread } from '@kortix/sdk';
+import { type UseSessionResult } from '@kortix/sdk/react';
+import { type ReactNode } from 'react';
+import { type MessageRenderers, type RenderTool } from './message-view.js';
+import { type ChatErrorHandler } from './permission-prompt.js';
+/** How the transcript treats each message of an auto-recovery chain, from the SDK turn model. */
+export interface AutoRecovery {
+    /** User messages that are the harness's own continuation prompt: no bubble. */
+    hidden: ReadonlySet<string>;
+    /** Assistant messages whose failure the harness continued: no error row. */
+    quiet: ReadonlySet<string>;
+    /** The last assistant message of a chain that ended in failure → retries before it. */
+    retries: ReadonlyMap<string, number>;
+}
+export declare function autoRecoveryOf(thread: SessionLogThread | null | undefined): AutoRecovery;
+export declare function DefaultEmptyState(): import("react").JSX.Element;
+export declare function MessageList({ session: c, emptyState, renderTool, renderers, onError, className, }: {
+    session: UseSessionResult;
+    /** Shown when the thread has no messages. Defaults to a one-line hint. */
+    emptyState?: ReactNode;
+    renderTool?: RenderTool;
+    renderers?: MessageRenderers;
+    onError?: ChatErrorHandler;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/chat/message-list.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The scrolling transcript of one session: the session log's root thread
+ * (`useSessionLogThread`), the optimistic bubble while a send is in flight,
+ * open permission and question prompts, and the busy marker. It follows new
+ * content while the reader is at the bottom and stays put once they scroll up.
+ *
+ * Automatic provider-error recovery (KRTX-2597) renders as apps/web renders it:
+ * the harness's own `[auto-recovery]` prompt (a synthetic-only user message,
+ * `turn.internal`) shows no bubble, a failure the harness continued shows no
+ * error row, and the chain's last error row says how many retries ran.
+ */
+import { SparkleIcon } from '@phosphor-icons/react';
+import { sessionLogTurns } from '@kortix/sdk';
+import { useSessionLogThread } from '@kortix/sdk/react';
+import { useEffect, useMemo, useRef } from 'react';
+import { Bubble, BubbleContent } from '../components/ui/bubble.js';
+import Loading from '../components/ui/loading.js';
+import { Marker, MarkerContent, MarkerIcon } from '../components/ui/marker.js';
+import { Message } from '../components/ui/message.js';
+import { TextShimmer } from '../components/ui/text-shimmer.js';
+import { cn } from '../lib/utils.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+import { MessageView } from './message-view.js';
+import { PermissionPrompt } from './permission-prompt.js';
+import { QuestionPrompt } from './question-prompt.js';
+/** One array for a thread with no messages, so the scroll effect does not run on every render. */
+const NO_MESSAGES = [];
+/** Distance from the bottom, in px, that still counts as "at the bottom". */
+const STICK_PX = 80;
+const NO_RECOVERY = { hidden: new Set(), quiet: new Set(), retries: new Map() };
+export function autoRecoveryOf(thread) {
+    if (!thread?.messages.length)
+        return NO_RECOVERY;
+    const hidden = new Set();
+    const quiet = new Set();
+    const retries = new Map();
+    for (const turn of sessionLogTurns(thread)) {
+        if (turn.internal)
+            hidden.add(turn.user.message_id);
+        if (!turn.autoRetry)
+            continue;
+        if (turn.autoRetry.continued)
+            for (const a of turn.assistant)
+                quiet.add(a.message_id);
+        const last = turn.assistant.at(-1);
+        if (!turn.autoRetry.continued && turn.autoRetry.retries > 0 && last)
+            retries.set(last.message_id, turn.autoRetry.retries);
+    }
+    return hidden.size || quiet.size || retries.size ? { hidden, quiet, retries } : NO_RECOVERY;
+}
+export function DefaultEmptyState() {
+    const t = useUiStrings().chat;
+    return (_jsxs("div", { className: "grid place-items-center py-16 text-center", children: [_jsx(SparkleIcon, { className: "text-muted-foreground size-6" }), _jsx("p", { className: "text-muted-foreground mt-3 text-sm", children: t.emptyState })] }));
+}
+export function MessageList({ session: c, emptyState, renderTool, renderers, onError, className, }) {
+    const scrollRef = useRef(null);
+    const stickRef = useRef(true);
+    const t = useUiStrings().chat;
+    const thread = useSessionLogThread(c);
+    const messages = thread?.messages ?? NO_MESSAGES;
+    const recovery = useMemo(() => autoRecoveryOf(thread), [thread]);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (el && stickRef.current)
+            el.scrollTo({ top: el.scrollHeight });
+    }, [messages, c.isBusy, c.hasPending, c.pending]);
+    return (_jsx("div", { ref: scrollRef, "data-slot": "message-list", onScroll: (e) => {
+            const el = e.currentTarget;
+            stickRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_PX;
+        }, className: cn('scrollbar-thin min-h-0 flex-1 overflow-y-auto', className), children: _jsxs("div", { className: "mx-auto max-w-3xl space-y-4 px-5 py-6", children: [c.isLoading && (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2.5 py-10 text-sm", children: [_jsx(Loading, { className: "text-muted-foreground size-4" }), " ", t.loadingConversation] })), !c.isLoading && messages.length === 0 && !c.hasPending && !c.pending && (emptyState ?? _jsx(DefaultEmptyState, {})), messages.map((m) => recovery.hidden.has(m.message_id) ? null : (_jsx(MessageView, { message: m, renderTool: renderTool, renderers: renderers, hideError: recovery.quiet.has(m.message_id), autoRetries: recovery.retries.get(m.message_id) }, m.message_id))), c.pending && (_jsx(Message, { align: "end", "data-message-role": "pending", children: _jsx(Bubble, { align: "end", className: "opacity-70", children: _jsx(BubbleContent, { children: c.pending }) }) })), c.permissions.map((p) => (_jsx(PermissionPrompt, { request: p, onAnswer: c.answerPermission, onError: onError }, p.id))), c.questions.map((q) => (_jsx(QuestionPrompt, { request: q, onAnswer: c.answerQuestion, onCancel: c.cancel, onError: onError }, q.id))), c.isBusy && !c.hasPending && (_jsxs(Marker, { "data-slot": "busy-marker", className: "py-1", children: [_jsx(MarkerIcon, { children: _jsx(Loading, { variant: "ring", className: "text-muted-foreground" }) }), _jsx(MarkerContent, { children: _jsx(TextShimmer, { className: "text-sm", children: c.pending ? t.sending : t.agentWorking }) })] }))] }) }));
+}

package/dist/chat/message-view.d.ts

@@ -0,0 +1,17 @@
+import { type SessionLogMessage, type ToolView } from '@kortix/sdk';
+import { type PartRenderers } from '@kortix/sdk/react';
+import { type ReactNode } from 'react';
+/** Replaces the default card for one tool call. Return `undefined` to keep the default. */
+export type RenderTool = (tool: ToolView) => ReactNode | undefined;
+export type MessageRenderers = Partial<PartRenderers<ReactNode>>;
+export declare function MessageView({ message, renderers, renderTool, hideError, autoRetries, }: {
+    message: SessionLogMessage;
+    /** Overrides the default renderer of any part kind. */
+    renderers?: MessageRenderers;
+    /** Overrides the tool card only; `undefined` keeps the default `ToolCall`. */
+    renderTool?: RenderTool;
+    /** Drops the error row: the harness continued this failure automatically. */
+    hideError?: boolean;
+    /** Automatic retries that ran before this failure; adds a note under the error row. */
+    autoRetries?: number;
+}): import("react").JSX.Element | null;

package/dist/chat/message-view.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One message of the session log (`kortix.session/2`). The user turn is an
+ * end-aligned `Bubble`; the assistant turn (and a compaction) renders full
+ * width as ordered content blocks.
+ *
+ * `classifySessionLogMessage` (`@kortix/sdk`) types every block as a
+ * `ClassifiedPart`, and `renderParts` (`@kortix/sdk/react`) requires a
+ * renderer for every kind at compile time: a new part type fails the build
+ * here instead of vanishing from the transcript. A host overrides any kind
+ * through `renderers`, or only the tool card through `renderTool`.
+ */
+import { ArrowsClockwiseIcon, BrainIcon, CaretRightIcon, GitDiffIcon, PaperclipIcon, RobotIcon, ScissorsIcon, WarningCircleIcon, } from '@phosphor-icons/react';
+import { classifySessionLogMessage } from '@kortix/sdk';
+import { renderParts } from '@kortix/sdk/react';
+import { Fragment } from 'react';
+import { Bubble, BubbleContent } from '../components/ui/bubble.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible.js';
+import { Marker, MarkerContent, MarkerIcon } from '../components/ui/marker.js';
+import { Message } from '../components/ui/message.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+import { Markdown } from './markdown.js';
+import { ToolCall } from './tool-call.js';
+import { userMessageParts } from './user-message-parts.js';
+function Reasoning({ text }) {
+    const t = useUiStrings().chat;
+    return (_jsxs(Collapsible, { children: [_jsxs(CollapsibleTrigger, { className: "group text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-xs transition-colors motion-reduce:transition-none", children: [_jsx(BrainIcon, { className: "size-3.5" }), _jsx("span", { children: t.thoughtProcess }), _jsx(CaretRightIcon, { className: "size-3 transition-transform group-data-[state=open]:rotate-90 motion-reduce:transition-none" })] }), _jsx(CollapsibleContent, { children: _jsx("p", { className: "border-border text-muted-foreground mt-1.5 border-l-2 pl-3 text-xs leading-relaxed whitespace-pre-wrap", children: text }) })] }));
+}
+function Note({ icon, children, tone = 'foreground' }) {
+    return (_jsxs(Marker, { className: tone === 'muted' ? 'w-fit' : 'text-foreground w-fit', children: [_jsx(MarkerIcon, { children: icon }), _jsx(MarkerContent, { children: children })] }));
+}
+/** One renderer per `ClassifiedPart['kind']`; the type requires every key. */
+function defaultRenderers(t, streaming, renderTool) {
+    return {
+        text: (part) => (part.text.trim() ? _jsx(Markdown, { streaming: streaming, children: part.text }) : null),
+        reasoning: (part) => (part.text.trim() ? _jsx(Reasoning, { text: part.text }) : null),
+        tool: (part) => renderTool?.(part.tool) ?? _jsx(ToolCall, { tool: part.tool }),
+        file: (part) => _jsx(Note, { icon: _jsx(PaperclipIcon, {}), children: part.filename ?? part.url }),
+        // A sub-agent delegation; it stands alone, with no tool-state machine.
+        subtask: (part) => (_jsx(Note, { icon: _jsx(RobotIcon, {}), children: part.description ? `${part.description} (${part.agent})` : t.delegatedTo(part.agent) })),
+        // A diff-stat line. The full diff belongs in a changes panel, not the transcript.
+        patch: (part) => (_jsx(Note, { icon: _jsx(GitDiffIcon, {}), children: t.filesChanged(part.fileCount) })),
+        // An internal git checkpoint for revert: never user-facing.
+        snapshot: () => null,
+        // An inline `@agent` token: its text is already in the sibling text part.
+        agent: () => null,
+        // A model-call retry after a transient failure, so a stalled turn does not read as broken.
+        retry: (part) => (_jsx(Note, { tone: "muted", icon: _jsx(ArrowsClockwiseIcon, {}), children: t.retrying(part.attempt, part.message) })),
+        compaction: (part) => (_jsx(Note, { tone: "muted", icon: _jsx(ScissorsIcon, {}), children: part.auto ? t.contextCompactedAuto : t.contextCompacted })),
+        // Step bookkeeping (cost and tokens) has no chat-visible content.
+        step: () => null,
+        // A part type this build does not know yet (client older than server).
+        unknown: () => null,
+    };
+}
+/**
+ * A failed assistant turn: the runtime attaches a typed `error` and often
+ * zero parts. Without this the turn renders as silence.
+ */
+function TurnError({ error, autoRetries }) {
+    const t = useUiStrings().chat;
+    return (_jsxs("div", { children: [_jsxs(Marker, { className: "text-foreground w-fit", role: "alert", children: [_jsx(MarkerIcon, { children: _jsx(WarningCircleIcon, { weight: "fill", className: "text-destructive" }) }), _jsx(MarkerContent, { className: "whitespace-normal", children: error.message || error.name })] }), autoRetries ? (_jsx("p", { className: "text-muted-foreground mt-1 text-xs", "data-auto-retry-note": true, children: t.autoRetried(autoRetries) })) : null] }));
+}
+export function MessageView({ message, renderers, renderTool, hideError, autoRetries, }) {
+    const t = useUiStrings().chat;
+    // A streaming message holds back half-written markdown syntax.
+    const streaming = message.status === 'streaming';
+    const all = { ...defaultRenderers(t, streaming, renderTool), ...renderers };
+    const { parts, error, isEmpty } = classifySessionLogMessage(message);
+    const keyOf = (part, i) => (part.kind === 'unknown' ? i : part.id);
+    if (message.role === 'user' && message.kind !== 'compaction') {
+        const user = userMessageParts(parts);
+        if (!user.text && !user.parts.length)
+            return null;
+        return (_jsx(Message, { align: "end", "data-message-role": "user", children: _jsxs(Bubble, { align: "end", children: [user.text ? _jsx(BubbleContent, { children: user.text }) : null, renderParts(user.parts, all).map((node, i) => (_jsx(Fragment, { children: node }, keyOf(user.parts[i], i))))] }) }));
+    }
+    if (isEmpty)
+        return null;
+    const shownError = hideError ? null : error;
+    const nodes = renderParts(parts, all);
+    // A continued failure with no content of its own leaves nothing to show.
+    if (!shownError && nodes.every((node) => node == null))
+        return null;
+    return (_jsxs("div", { "data-message-role": "assistant", className: "space-y-2.5 text-sm leading-relaxed", children: [nodes.map((node, i) => (_jsx(Fragment, { children: node }, keyOf(parts[i], i)))), shownError ? _jsx(TurnError, { error: shownError, autoRetries: autoRetries }) : null] }));
+}

package/dist/chat/model-picker.d.ts

@@ -0,0 +1,10 @@
+import type { FlatModel, ModelKey } from '@kortix/sdk/react';
+/** Case-insensitive match on model and provider name; at most 60 rows. */
+export declare function filterModels(models: readonly FlatModel[], query: string): FlatModel[];
+export declare function ModelPicker({ models, value, onChange, providerLabel, }: {
+    models: readonly FlatModel[];
+    value: ModelKey | null;
+    onChange: (value: ModelKey | null) => void;
+    /** The provider line of a model row. Default: the server's `providerName`. */
+    providerLabel?: (model: FlatModel) => string;
+}): import("react").JSX.Element | null;

package/dist/chat/model-picker.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Model picker: a controlled, searchable list over `session.models`.
+ * `value` / `onChange` are a plain `{ providerID, modelID }` key, so the same
+ * picker drives a new-session form and the per-message pick. In the search
+ * field, ArrowUp / ArrowDown move the highlight and Enter picks it, as in the
+ * composer's command menu. `providerLabel` relabels a provider (a white-label
+ * host shows its own name for the `kortix` provider).
+ */
+import { CaretUpDownIcon, CheckIcon, CpuIcon } from '@phosphor-icons/react';
+import { useEffect, useId, useMemo, useState } from 'react';
+import { Input } from '../components/ui/input.js';
+import { MENU_INDICATOR, MENU_INDICATOR_ICON, menuRow } from '../components/ui/menu-recipe.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../components/ui/popover.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+const TRIGGER = 'text-muted-foreground hover:text-foreground h-7 max-w-44 min-w-0 gap-1 px-2 text-xs';
+/** Case-insensitive match on model and provider name; at most 60 rows. */
+export function filterModels(models, query) {
+    const q = query.trim().toLowerCase();
+    const base = q ? models.filter((m) => `${m.modelName} ${m.providerName}`.toLowerCase().includes(q)) : models;
+    return base.slice(0, 60);
+}
+export function ModelPicker({ models, value, onChange, providerLabel, }) {
+    const t = useUiStrings().chat;
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [highlight, setHighlight] = useState(0);
+    const listId = useId();
+    const filtered = useMemo(() => filterModels(models, query), [models, query]);
+    // Keep the keyboard highlight in view in a long list.
+    useEffect(() => {
+        if (open)
+            document.getElementById(`${listId}-${highlight}`)?.scrollIntoView?.({ block: 'nearest' });
+    }, [open, highlight, listId]);
+    if (models.length === 0)
+        return null;
+    const current = value && models.find((m) => m.providerID === value.providerID && m.modelID === value.modelID);
+    const pick = (m) => {
+        onChange({ providerID: m.providerID, modelID: m.modelID });
+        setOpen(false);
+        setQuery('');
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (!next)
+                setQuery('');
+            setHighlight(0);
+        }, children: [_jsxs(PopoverTrigger, { variant: "transparent", className: TRIGGER, "aria-label": t.model, children: [_jsx(CpuIcon, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: current?.modelName ?? t.defaultModel }), _jsx(CaretUpDownIcon, { className: "size-3 shrink-0" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-0", children: [_jsx("div", { className: "border-border border-b p-2", children: _jsx(Input, { autoFocus: true, size: "xs", value: query, onChange: (e) => {
+                                setQuery(e.target.value);
+                                setHighlight(0);
+                            }, onKeyDown: (e) => {
+                                if (e.nativeEvent.isComposing || filtered.length === 0)
+                                    return;
+                                if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                                    e.preventDefault();
+                                    const step = e.key === 'ArrowDown' ? 1 : -1;
+                                    setHighlight((h) => Math.min(Math.max(h + step, 0), filtered.length - 1));
+                                }
+                                else if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    pick(filtered[highlight] ?? filtered[0]);
+                                }
+                            }, placeholder: t.searchModels, "aria-label": t.searchModels, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-activedescendant": filtered[highlight] ? `${listId}-${highlight}` : undefined }) }), _jsxs("div", { id: listId, role: "listbox", "aria-label": t.models, className: "scrollbar-thin max-h-72 overflow-y-auto p-1", children: [filtered.map((m, i) => {
+                                const selected = value?.providerID === m.providerID && value?.modelID === m.modelID;
+                                return (_jsxs("button", { id: `${listId}-${i}`, type: "button", role: "option", "aria-selected": selected, "data-highlighted": i === highlight ? '' : undefined, onMouseEnter: () => setHighlight(i), onClick: () => pick(m), className: menuRow('sm', 'default', 'text-left'), children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: m.modelName }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: providerLabel?.(m) ?? m.providerName })] }), _jsx("span", { className: MENU_INDICATOR, children: selected && _jsx(CheckIcon, { className: MENU_INDICATOR_ICON }) })] }, `${m.providerID}/${m.modelID}`));
+                            }), filtered.length === 0 && (_jsx("div", { className: "text-muted-foreground px-2 py-3 text-center text-xs", children: t.noModelsMatch }))] })] })] }));
+}

package/dist/chat/permission-prompt.d.ts

@@ -0,0 +1,10 @@
+import type { PermissionRequest } from '@kortix/sdk';
+export type PermissionDecision = 'once' | 'always' | 'reject';
+/** Reports a failed reply. Without it the prompt shows the message inline. */
+export type ChatErrorHandler = (message: string, error: unknown) => void;
+export declare function errorMessage(error: unknown, fallback: string): string;
+export declare function PermissionPrompt({ request, onAnswer, onError, }: {
+    request: PermissionRequest;
+    onAnswer: (requestId: string, decision: PermissionDecision) => Promise<void>;
+    onError?: ChatErrorHandler;
+}): import("react").JSX.Element;

package/dist/chat/permission-prompt.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A pending PERMISSION request ("run this command?") and its decision.
+ * `onAnswer` is `session.answerPermission`: it drops the request only once the
+ * server accepted the decision, and throws a typed `KortixSendError`
+ * otherwise, so a failed reply stays visible for a retry.
+ */
+import { ShieldWarningIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { Button } from '../components/ui/button.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+export function errorMessage(error, fallback) {
+    const message = error?.message;
+    return typeof message === 'string' && message ? message : fallback;
+}
+export function PermissionPrompt({ request, onAnswer, onError, }) {
+    const t = useUiStrings().chat;
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const label = String(request.permission ?? t.thisAction).replace(/[._-]/g, ' ');
+    async function reply(decision) {
+        if (sending)
+            return;
+        setSending(true);
+        setError(null);
+        try {
+            await onAnswer(request.id, decision);
+        }
+        catch (err) {
+            const message = errorMessage(err, t.decisionFailed);
+            if (onError)
+                onError(message, err);
+            else
+                setError(message);
+            setSending(false);
+        }
+    }
+    return (_jsxs("div", { "data-slot": "permission-prompt", className: "bg-kortix-orange/15 overflow-hidden rounded-md", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [_jsx(ShieldWarningIcon, { weight: "fill", className: "text-kortix-orange size-4 shrink-0" }), _jsxs("span", { className: "text-foreground flex-1 text-sm", children: [t.allowPrefix, " ", _jsx("span", { className: "font-medium", children: label }), t.allowSuffix] })] }), error && (_jsx("p", { role: "alert", className: "text-foreground px-3 pb-2 text-xs", children: error })), _jsxs("div", { className: "flex items-center justify-end gap-2 px-3 pb-2.5", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: sending, onClick: () => reply('reject'), children: t.deny }), _jsx(Button, { size: "sm", variant: "outline", disabled: sending, onClick: () => reply('always'), children: t.always }), _jsx(Button, { size: "sm", disabled: sending, onClick: () => reply('once'), children: t.allowOnce })] })] }));
+}

package/dist/chat/question-prompt.d.ts

@@ -0,0 +1,8 @@
+import type { QuestionRequest } from '@kortix/sdk';
+import { type ChatErrorHandler } from './permission-prompt.js';
+export declare function QuestionPrompt({ request, onAnswer, onCancel, onError, }: {
+    request: QuestionRequest;
+    onAnswer: (requestId: string, answers: string[][]) => Promise<void>;
+    onCancel: () => void;
+    onError?: ChatErrorHandler;
+}): import("react").JSX.Element;

package/dist/chat/question-prompt.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A pending agent QUESTION (one or several) and its answer. Without it a
+ * session that asks a clarifying question blocks forever. `onAnswer` is
+ * `session.answerQuestion`: it drops the question only once the server
+ * accepted the reply, so a failed submit stays visible for a retry.
+ * `onCancel` stops the run instead of answering.
+ */
+import { ChatCircleDotsIcon, XIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { Button } from '../components/ui/button.js';
+import { Input } from '../components/ui/input.js';
+import { cn } from '../lib/utils.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+import { errorMessage } from './permission-prompt.js';
+export function QuestionPrompt({ request, onAnswer, onCancel, onError, }) {
+    const t = useUiStrings().chat;
+    const questions = request.questions;
+    const [selected, setSelected] = useState(() => questions.map(() => []));
+    const [custom, setCustom] = useState(() => questions.map(() => ''));
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const answerFor = (i) => selected[i].length ? selected[i] : custom[i].trim() ? [custom[i].trim()] : [];
+    const allAnswered = questions.every((_, i) => answerFor(i).length > 0);
+    // One single-choice question with no free text: a click on an option sends it.
+    const autoSingle = questions.length === 1 && !questions[0]?.multiple && !questions[0]?.custom;
+    function pick(qi, label, multiple) {
+        setSelected((prev) => {
+            const next = prev.map((a) => [...a]);
+            const has = next[qi].includes(label);
+            next[qi] = multiple ? (has ? next[qi].filter((l) => l !== label) : [...next[qi], label]) : [label];
+            return next;
+        });
+    }
+    async function submit(answers) {
+        if (sending)
+            return;
+        setSending(true);
+        setError(null);
+        try {
+            await onAnswer(request.id, answers);
+        }
+        catch (err) {
+            const message = errorMessage(err, t.answerFailed);
+            if (onError)
+                onError(message, err);
+            else
+                setError(message);
+            setSending(false);
+        }
+    }
+    return (_jsxs("div", { "data-slot": "question-prompt", className: "border-border bg-card overflow-hidden rounded-md border", children: [_jsxs("div", { className: "border-border flex items-center gap-2 border-b px-3 py-2", children: [_jsx(ChatCircleDotsIcon, { className: "text-muted-foreground size-4" }), _jsx("span", { className: "text-foreground flex-1 text-xs font-medium", children: questions.length > 1 ? t.questionsTitle(questions.length) : t.questionTitle }), _jsx(Button, { type: "button", onClick: onCancel, variant: "ghost", size: "icon-xs", className: "text-muted-foreground", "aria-label": t.stopAndCancel, children: _jsx(XIcon, { className: "size-3.5" }) })] }), _jsxs("div", { className: "space-y-4 p-3", children: [questions.map((q, qi) => {
+                        const multiple = !!q.multiple;
+                        return (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-foreground text-sm", children: q.question }), _jsxs("div", { className: "space-y-1.5", role: multiple ? 'group' : 'radiogroup', children: [q.options.map((opt, oi) => {
+                                            const picked = selected[qi].includes(opt.label);
+                                            return (_jsxs(Button, { type: "button", variant: "outline", role: multiple ? 'checkbox' : 'radio', "aria-checked": picked, disabled: sending, onClick: () => (autoSingle ? submit([[opt.label]]) : pick(qi, opt.label, multiple)), className: cn('h-auto w-full items-start justify-start gap-2.5 px-3 py-2 text-left whitespace-normal', picked && 'border-foreground bg-muted'), children: [_jsx("span", { className: cn('mt-0.5 grid size-4 shrink-0 place-items-center border', multiple ? 'rounded-sm' : 'rounded-full', picked ? 'border-foreground bg-foreground text-background' : 'border-border'), children: picked && _jsx("span", { className: "size-1.5 rounded-full bg-current" }) }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "text-foreground block text-sm", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground block text-xs", children: opt.description }))] })] }, oi));
+                                        }), q.custom && (_jsx(Input, { value: custom[qi], disabled: sending, placeholder: t.customAnswerPlaceholder, "aria-label": t.customAnswerLabel, onChange: (e) => setCustom((prev) => prev.map((v, i) => (i === qi ? e.target.value : v))) }))] })] }, qi));
+                    }), error && (_jsx("p", { role: "alert", className: "text-foreground text-xs", children: error })), !autoSingle && (_jsx(Button, { size: "sm", disabled: !allAnswered || sending, onClick: () => submit(questions.map((_, i) => answerFor(i))), className: "w-full", children: sending ? t.sending : t.submitAnswer }))] })] }));
+}

package/dist/chat/send-failure.d.ts

@@ -0,0 +1,9 @@
+import type { KortixSendError } from '@kortix/sdk/react';
+import { type ChatStrings } from '../providers/ui-provider.js';
+/**
+ * A one-line title for a failed send. `useSession` surfaces a typed
+ * `sendError` whose `message` the SDK already formats for display; the title
+ * names the kind of problem, because each kind needs a different reaction.
+ * `t` is the chat copy (`useUiStrings().chat`); default: English.
+ */
+export declare function sendFailureTitle(error: KortixSendError, t?: ChatStrings): string;

package/dist/chat/send-failure.js

@@ -0,0 +1,21 @@
+import { defaultChatStrings } from '../providers/ui-provider.js';
+/**
+ * A one-line title for a failed send. `useSession` surfaces a typed
+ * `sendError` whose `message` the SDK already formats for display; the title
+ * names the kind of problem, because each kind needs a different reaction.
+ * `t` is the chat copy (`useUiStrings().chat`); default: English.
+ */
+export function sendFailureTitle(error, t = defaultChatStrings) {
+    switch (error.kind) {
+        case 'billing':
+            // The end user cannot retry this; the operator has to act.
+            return t.sendFailedBilling;
+        case 'runtime-not-ready':
+            // Transient and self-healing: a retry is the right move.
+            return t.sendFailedRuntimeNotReady;
+        case 'runtime-error':
+            return error.gateway?.provider ? t.sendFailedModel(error.gateway.provider) : t.sendFailedRuntimeError;
+        default:
+            return t.sendFailed;
+    }
+}

package/dist/chat/session-thread.d.ts

@@ -0,0 +1,28 @@
+import type { FlatModel, UseSessionResult } from '@kortix/sdk/react';
+import type { ReactNode } from 'react';
+import type { MessageRenderers, RenderTool } from './message-view.js';
+import type { ChatErrorHandler } from './permission-prompt.js';
+export type SessionThreadProps = {
+    session: UseSessionResult;
+    /** Replaces the composer's control row (default: model and agent pickers). */
+    composerToolbar?: ReactNode;
+    /** Rendered under the composer card, e.g. the session's scope. */
+    composerFooter?: ReactNode;
+    /** Shown when the thread has no messages. */
+    emptyState?: ReactNode;
+    /** Replaces the card of one tool call; return `undefined` to keep the default. */
+    renderTool?: RenderTool;
+    /** Overrides the renderer of any message part kind. */
+    renderers?: MessageRenderers;
+    /** Reports a failed permission reply, question reply or slash command (for a toast). Without it the error shows inline. */
+    onError?: ChatErrorHandler;
+    /** The provider line of a model row in the default model picker (a white-label relabels `kortix`). */
+    providerLabel?: (model: FlatModel) => string;
+    className?: string;
+};
+/** The default control row: the session's model and agent pickers. */
+export declare function SessionPickers({ session: c, providerLabel, }: {
+    session: UseSessionResult;
+    providerLabel?: (model: FlatModel) => string;
+}): import("react").JSX.Element;
+export declare function SessionThread({ session: c, composerToolbar, composerFooter, emptyState, renderTool, renderers, onError, providerLabel, className, }: SessionThreadProps): import("react").JSX.Element;

package/dist/chat/session-thread.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The whole chat for one session, from one `useSession` result:
+ *
+ *   <SessionThread session={useSession(projectId, sessionId)} />
+ *
+ * It renders the transcript (`MessageList`), the runtime state, the typed
+ * send error, and the composer with slash commands and the model and agent
+ * pickers. Everything reads off `session`: no second chat hook, no transport.
+ * Slots replace one region each; the parent sets the height (the thread fills it).
+ */
+import { ArrowsClockwiseIcon, WarningCircleIcon, WarningIcon } from '@phosphor-icons/react';
+import { Button } from '../components/ui/button.js';
+import { InfoBanner } from '../components/ui/info-banner.js';
+import { cn } from '../lib/utils.js';
+import { useUiStrings } from '../providers/ui-provider.js';
+import { AgentPicker } from './agent-picker.js';
+import { Composer } from './composer.js';
+import { MessageList } from './message-list.js';
+import { ModelPicker } from './model-picker.js';
+import { sendFailureTitle } from './send-failure.js';
+/** The default control row: the session's model and agent pickers. */
+export function SessionPickers({ session: c, providerLabel, }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-0.5", children: [_jsx(ModelPicker, { models: c.models, value: c.picks.model, onChange: c.picks.setModel, providerLabel: providerLabel }), _jsx(AgentPicker, { agents: c.agents, value: c.picks.agent, onChange: c.picks.setAgent, defaultName: c.defaultAgent })] }));
+}
+function RuntimeState({ session: c }) {
+    const t = useUiStrings().chat;
+    // "Down" = it was connected and is now unreachable: a drop, not the first boot.
+    if (c.switched && c.runtimePhase === 'unreachable') {
+        return (_jsx(InfoBanner, { tone: "warning", icon: WarningIcon, title: t.runtimeStopped, className: "mb-2", action: _jsxs(Button, { size: "xs", variant: "secondary", onClick: () => c.retry(), children: [_jsx(ArrowsClockwiseIcon, { className: "size-3.5" }), t.reconnect] }) }));
+    }
+    if (c.runtimePhase !== 'ready') {
+        return _jsx("p", { className: "text-muted-foreground mb-2 text-center text-xs", children: t.connectingRuntime });
+    }
+    return null;
+}
+export function SessionThread({ session: c, composerToolbar, composerFooter, emptyState, renderTool, renderers, onError, providerLabel, className, }) {
+    const strings = useUiStrings();
+    const t = strings.chat;
+    const runtimeReady = c.runtimePhase === 'ready';
+    // Advertise "/" only when it opens something: with no commands a "/" is sent as text.
+    const placeholder = runtimeReady
+        ? `${t.placeholder}${c.commands.length > 0 ? t.placeholderCommandsHint : ''}`
+        : t.placeholderWaiting;
+    return (_jsxs("div", { "data-slot": "session-thread", className: cn('flex h-full min-h-0 flex-col', className), children: [_jsx(MessageList, { session: c, emptyState: emptyState, renderTool: renderTool, renderers: renderers, onError: onError }), _jsx("div", { className: "shrink-0 px-5 pb-5", children: _jsxs("div", { className: "mx-auto max-w-3xl", children: [_jsx(RuntimeState, { session: c }), c.sendError ? (_jsx(InfoBanner, { tone: "destructive", icon: WarningCircleIcon, title: sendFailureTitle(c.sendError, t), className: "mb-2", role: "alert", children: c.sendError.message })) : null, _jsx(Composer, { onSend: c.send, onStop: c.cancel, busy: c.isBusy, canStop: c.canStop, disabled: !runtimeReady, placeholder: placeholder, commands: c.commands, onCommand: c.runCommand, onError: onError, toolbar: composerToolbar ?? _jsx(SessionPickers, { session: c, providerLabel: providerLabel }), footer: composerFooter })] }) })] }));
+}