@kortix/ui 0.14.4 → 0.14.6

package/dist/primitives/map.js

@@ -163,7 +163,8 @@ function MapMarker({ longitude, latitude, label, children, ...markerOptions }) {
             marker.setLngLat([longitude, latitude]);
         }
     }, [marker, longitude, latitude]);
-    return _jsx(MarkerContext.Provider, { value: { marker, map }, children: children });
+    const markerContextValue = useMemo(() => ({ marker, map }), [marker, map]);
+    return _jsx(MarkerContext.Provider, { value: markerContextValue, children: children });
 }
 function MarkerContent({ children, className }) {
     const { marker } = useMarkerContext();

package/dist/primitives/preview-image.js

@@ -22,10 +22,12 @@ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 const PreviewImageContent = React.forwardRef(({ className, fileContent, fileName, ...props }, ref) => {
     const [zoomLevel, setZoomLevel] = React.useState(DEFAULT_ZOOM);
     const [transformOrigin, setTransformOrigin] = React.useState(DEFAULT_ORIGIN);
-    React.useEffect(() => {
+    const [zoomedContent, setZoomedContent] = React.useState(fileContent);
+    if (fileContent !== zoomedContent) {
+        setZoomedContent(fileContent);
         setZoomLevel(DEFAULT_ZOOM);
         setTransformOrigin(DEFAULT_ORIGIN);
-    }, [fileContent]);
+    }
     const getTransformOrigin = (event) => {
         const rect = event.currentTarget.getBoundingClientRect();
         if (!rect.width || !rect.height) {

package/dist/primitives/textarea.js

@@ -59,7 +59,7 @@ export const useAutosizeTextArea = ({ textAreaRef, triggerAutoSize, maxHeight =
                 clearTimeout(resizeTimeoutRef.current);
             }
         };
-    }, [textAreaRef.current, triggerAutoSize, minHeight, maxHeight, currentHeight, init]);
+    }, [textAreaRef, triggerAutoSize, minHeight, maxHeight, currentHeight, init]);
 };
 export const Textarea = React.forwardRef(({ maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 52, className, onChange, value, variant: _variant, ...props }, ref) => {
     const textAreaRef = React.useRef(null);

package/dist/primitives/typed-title.js

@@ -19,25 +19,23 @@ import { shouldTypeOnChange, TYPE_SPEED_MS } from './typed-title-logic.js';
 import { TypingAnimation } from './typing-animation.js';
 import { cn } from '../lib/utils.js';
 import { useReducedMotion } from 'motion/react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 export { TYPE_SPEED_MS };
 export function useTypeOnChange(text) {
-    // The last value this row DISPLAYED, in a ref rather than state: it must not
-    // itself cause a render, and it has to update in the same pass that decides
-    // to animate, or a second change arriving mid-type compares against a stale
-    // value and is missed.
-    const previousRef = useRef(null);
+    // The last value this row DISPLAYED. It updates in the same render pass that
+    // decides to animate, or a second change arriving mid-type compares against
+    // a stale value and is missed.
+    const [previous, setPrevious] = useState(null);
     const [isTyping, setIsTyping] = useState(false);
     const [runId, setRunId] = useState(0);
     const reduceMotion = !!useReducedMotion();
-    useEffect(() => {
-        const previous = previousRef.current;
-        previousRef.current = text;
-        if (!shouldTypeOnChange({ previous, next: text, reduceMotion }))
-            return;
-        setIsTyping(true);
-        setRunId((id) => id + 1);
-    }, [text, reduceMotion]);
+    if (previous !== text) {
+        setPrevious(text);
+        if (shouldTypeOnChange({ previous, next: text, reduceMotion })) {
+            setIsTyping(true);
+            setRunId((id) => id + 1);
+        }
+    }
     const stop = useCallback(() => setIsTyping(false), []);
     return { isTyping, runId, stop };
 }

package/dist/primitives/typing-animation.js

@@ -34,12 +34,14 @@ export function TypingAnimation({ children, words, className, duration = 100, ty
     const deletingSpeed = deleteSpeed ?? typingSpeed / 2;
     const shouldStart = startOnView ? isInView : true;
     const animationSourceKey = useMemo(() => (words ? words.join('\u0000') : (children ?? '')), [words, children]);
-    useEffect(() => {
+    const [seenSourceKey, setSeenSourceKey] = useState(animationSourceKey);
+    if (animationSourceKey !== seenSourceKey) {
+        setSeenSourceKey(animationSourceKey);
         setDisplayedText('');
         setCurrentWordIndex(0);
         setCurrentCharIndex(0);
         setPhase('typing');
-    }, [animationSourceKey]);
+    }
     useEffect(() => {
         let timeout = null;
         if (shouldStart && wordsToAnimate.length > 0) {

package/dist/providers/ui-provider.d.ts

@@ -177,6 +177,63 @@ export interface UiHostConfig {
      * still enforces each route. Default: true.
      */
     accountApiEnabled: boolean;
+    /**
+     * The composer shows the model picker and the reasoning-effort picker. A
+     * host that runs one model for its users sets false: the session runs its
+     * resolved default model. Default: true.
+     */
+    modelPickerEnabled: boolean;
+    /** The composer shows the context-usage ring (and its route to the context modal). Default: true. */
+    contextMeterEnabled: boolean;
+    /**
+     * The composer shows the session-overrides gear (sandbox, secrets,
+     * connectors, provider keys, folders). A host whose users never see the
+     * infrastructure behind a session sets false. Default: true.
+     */
+    sessionOverridesEnabled: boolean;
+    /**
+     * The agents the composer's agent picker offers, by name. Unset: every
+     * selectable agent. A host that installs its own agents beside the
+     * project's defaults lists its own here.
+     */
+    offeredAgents?: readonly string[];
+    /** Display names by agent name, for the agent picker. Unset or missing: the title-cased name. */
+    agentLabels?: Readonly<Record<string, string>>;
+    /**
+     * A host that keeps files in its own store takes the composer's files here:
+     * the attach button, a drop and a pasted file. The composer then uploads
+     * none of them to the session's attachment store and shows no tray for
+     * them. Unset: they upload as prompt attachments.
+     */
+    takeFiles?: (files: File[]) => void;
+    /** The attach picker's `accept` list. Unset: images, PDF, text and code files. */
+    attachAccept?: string;
+    /**
+     * The composer's `/` menu lists the session runtime's skills and commands,
+     * and the Compact session action. A host that hides the harness from its
+     * users sets false. Default: true.
+     */
+    runtimeSlashEnabled: boolean;
+    /**
+     * Rows the host adds to the composer's `/` menu, under their own headings.
+     * A hook, so it may read the host's own data. Unset: none.
+     */
+    useSlashActions?: () => readonly UiSlashAction[];
+}
+/**
+ * A row the host adds to the composer's `/` menu. Selecting it deletes the
+ * `/` text and calls `onSelect`. When `onSelect` returns `{ insertText }`,
+ * the composer inserts that text at the caret.
+ */
+export interface UiSlashAction {
+    id: string;
+    label: string;
+    description: string;
+    /** The heading the row sits under, for example "Workflows". */
+    group: string;
+    onSelect: () => void | {
+        insertText: string;
+    };
 }
 /** What the session browser frames: a port and path inside the session's sandbox, or a URL. */
 export interface UiPreviewRequest {

package/dist/providers/ui-provider.js

@@ -59,6 +59,10 @@ export const defaultUiHostConfig = {
     commandPaletteShortcut: false,
     settingsShortcut: false,
     accountApiEnabled: true,
+    modelPickerEnabled: true,
+    contextMeterEnabled: true,
+    sessionOverridesEnabled: true,
+    runtimeSlashEnabled: true,
 };
 const useNoViewer = () => undefined;
 /** A viewer hook built from an id hook: `{ id }`, stable per id. */

package/dist/session/composer/ComposerCard.d.ts

@@ -16,6 +16,8 @@ import type { AttachedFile } from './types.js';
  * phase 1).
  */
 export interface ComposerCardDerived {
+    /** The commands the `/` menu lists: the `commands` prop, or none when the host hides the runtime's (`runtimeSlashEnabled`). */
+    commands: NonNullable<SessionChatInputProps['commands']>;
     tHardcodedUi: ReturnType<typeof useTranslations>;
     isDragOver: boolean;
     /** Unset inside a `ComposerDropZone`: the zone owns every file drag. */

package/dist/session/composer/ComposerCard.js

@@ -10,6 +10,9 @@ import { EMPTY_AGENTS, EMPTY_COMMANDS, EMPTY_MODELS, EMPTY_SLASH_FILES, EMPTY_VA
 import { shouldFocusEditorFromPadding } from './composer-logic.js';
 import { ComposerToolbar } from './composer-toolbar.js';
 import { ComposerUnderbar } from './composer-underbar.js';
+import { useUiHostConfig } from '../../providers/ui-provider.js';
+/** What the attach picker offers when the host names no list. */
+const DEFAULT_ATTACH_ACCEPT = 'image/*,.pdf,.txt,.md,.json,.csv,.xml,.yaml,.yml,.toml,.js,.ts,.jsx,.tsx,.py,.rb,.go,.rs,.java,.c,.cpp,.h,.css,.html,.vue,.svelte,.log,.sql,.zip,.tar,.gz,.rar';
 const ComposerEditorLazy = lazy(() => import('./editor/composer-editor.js').then((mod) => ({ default: mod.ComposerEditor })));
 function ComposerEditorFallback() {
     return _jsx("div", { className: "min-h-[1.5em]", "aria-hidden": true });
@@ -20,6 +23,7 @@ export function ComposerCard({ tHardcodedUi, isDragOver, handleDragEnter, handle
 // values, not the component's defaulted locals.
 agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES, models = EMPTY_MODELS, notice = null, disabled = false, lockForQuestion = false, lockForApproval = false, questionButtonLabel = null, questionActive = false, submitLabel = null, questionCanAct = true, escCount = 0, isBusy = false, isSending = false, onStop, stopDisabled = false, canStop = true, modelsLoading = false, modelRequired = false, onModelChange, modelDefaultControls, providers, variants = EMPTY_VARIANTS, selectedVariant = null, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent = null, onAgentChange, noAccessibleAgents = false, onContextClick, messages, underbarPlacement = 'below', slashMenuPlacement = 'above', cardClassName, onArrowUpAtStart, }) {
     const cardRef = useRef(null);
+    const { attachAccept } = useUiHostConfig();
     const inlineUnderbar = underbarPlacement === 'inline';
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: cardRef, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDropFiles, className: cn(
                 // One shadow, from the ladder. `shadow-card` is defined nowhere in
@@ -47,7 +51,7 @@ agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES
                                             // the div and immediately fights the caret we are placing.
                                             e.preventDefault();
                                             editorRef.current?.focus();
-                                        }, children: [_jsx(AnimatedComposerPlaceholder, { placeholder: editorPlaceholder, active: animatePlaceholder }), _jsx(Suspense, { fallback: _jsx(ComposerEditorFallback, {}), children: _jsx(ComposerEditorLazy, { ref: setEditorRef, placeholder: animatePlaceholder ? '' : editorPlaceholder, disabled: editorDisabled, onSubmit: handleSubmit, onArrowUpAtStart: onArrowUpAtStart ? handleArrowUpAtStart : undefined, onEmptyChange: setIsEmpty, onDocChange: handleDocChange, agents: agents, sessions: allSessions ?? [], currentSessionId: sessionId, commands: commands, actions: slashActions, files: slashFiles, onSelectAction: handleSelectAction, slashDockSelector: `#${dockId}`, onMenuOpenChange: setMenuOpen }) })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*,.pdf,.txt,.md,.json,.csv,.xml,.yaml,.yml,.toml,.js,.ts,.jsx,.tsx,.py,.rb,.go,.rs,.java,.c,.cpp,.h,.css,.html,.vue,.svelte,.log,.sql,.zip,.tar,.gz,.rar", multiple: true, className: "hidden", onChange: handleFileSelect }), _jsx(ComposerToolbar, { leading: inlineUnderbar ? (_jsx(ComposerUnderbar, { variant: "inline", onAttachClick: handleAttachClick, agents: primaryAgents, selectedAgent: selectedAgent, onAgentChange: onAgentChange, agentMenuOpen: agentMenuOpen, onAgentMenuOpenChange: setAgentMenuOpen, noAccessibleAgents: noAccessibleAgents, messages: messages, models: models, selectedModel: availableSelectedModel, onContextClick: onContextClick })) : null, modelsLoading: modelsLoading, models: models, selectedModel: availableSelectedModel, onModelChange: onModelChange, modelDefaultControls: modelDefaultControls, providers: providers, modelRequired: modelRequired, modelMenuOpen: modelMenuOpen, onModelMenuOpenChange: setModelMenuOpen, reasoningMenuOpen: reasoningMenuOpen, onReasoningMenuOpenChange: setReasoningMenuOpen, variants: variants, selectedVariant: selectedVariant, onVariantChange: onVariantChange, projectId: projectId, 
+                                        }, children: [_jsx(AnimatedComposerPlaceholder, { placeholder: editorPlaceholder, active: animatePlaceholder }), _jsx(Suspense, { fallback: _jsx(ComposerEditorFallback, {}), children: _jsx(ComposerEditorLazy, { ref: setEditorRef, placeholder: animatePlaceholder ? '' : editorPlaceholder, disabled: editorDisabled, onSubmit: handleSubmit, onArrowUpAtStart: onArrowUpAtStart ? handleArrowUpAtStart : undefined, onEmptyChange: setIsEmpty, onDocChange: handleDocChange, agents: agents, sessions: allSessions ?? [], currentSessionId: sessionId, commands: commands, actions: slashActions, files: slashFiles, onSelectAction: handleSelectAction, slashDockSelector: `#${dockId}`, onMenuOpenChange: setMenuOpen }) })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: attachAccept ?? DEFAULT_ATTACH_ACCEPT, multiple: true, className: "hidden", onChange: handleFileSelect }), _jsx(ComposerToolbar, { leading: inlineUnderbar ? (_jsx(ComposerUnderbar, { variant: "inline", onAttachClick: handleAttachClick, agents: primaryAgents, selectedAgent: selectedAgent, onAgentChange: onAgentChange, agentMenuOpen: agentMenuOpen, onAgentMenuOpenChange: setAgentMenuOpen, noAccessibleAgents: noAccessibleAgents, messages: messages, models: models, selectedModel: availableSelectedModel, onContextClick: onContextClick })) : null, modelsLoading: modelsLoading, models: models, selectedModel: availableSelectedModel, onModelChange: onModelChange, modelDefaultControls: modelDefaultControls, providers: providers, modelRequired: modelRequired, modelMenuOpen: modelMenuOpen, onModelMenuOpenChange: setModelMenuOpen, reasoningMenuOpen: reasoningMenuOpen, onReasoningMenuOpenChange: setReasoningMenuOpen, variants: variants, selectedVariant: selectedVariant, onVariantChange: onVariantChange, projectId: projectId, 
                                         // Inline placement has no under-row, so the slot (the session
                                         // overrides gear, meta indicator) rides the toolbar itself. With
                                         // the 'below' placement the ComposerUnderbar further down renders

package/dist/session/composer/agent-selector.js

@@ -5,6 +5,7 @@ import { Button } from '../../primitives/button.js';
 import { CommandGroup, CommandInput, CommandItem, CommandList, CommandPopover, CommandPopoverContent, CommandPopoverTrigger, CommandSeparator, } from '../../primitives/command.js';
 import Hint from '../../primitives/hint.js';
 import { useTranslations } from '../../i18n/index.js';
+import { useUiHostConfig } from '../../providers/ui-provider.js';
 import { cn } from '../../lib/utils.js';
 import { capitalizeWords, isMetaAgentName, META_AGENT_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
 import { CaretDownIcon, CheckIcon, SparkleIcon } from '@phosphor-icons/react';
@@ -42,7 +43,16 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
     const open = controlledOpen ?? internalOpen;
     const setOpen = onOpenChange ?? setInternalOpen;
     const [search, setSearch] = useState('');
-    const primaryAgents = useMemo(() => composerSelectableAgents(agents), [agents]);
+    const { offeredAgents, agentLabels } = useUiHostConfig();
+    // A host that lists its agents (`offeredAgents`) offers only those; it names them with `agentLabels`.
+    const offered = useMemo(() => {
+        if (!offeredAgents)
+            return agents;
+        const offeredNames = new Set(offeredAgents);
+        return agents.filter((a) => offeredNames.has(a.name));
+    }, [agents, offeredAgents]);
+    const primaryAgents = useMemo(() => composerSelectableAgents(offered), [offered]);
+    const label = (name) => agentLabels?.[name] ?? (isMetaAgentName(name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(name));
     // A `flash` state, a `prevAgentRef` feeding it, two effects and a 400ms
     // timer used to live here. Nothing ever READ `flash` — it was written on
     // every agent change and rendered nowhere, so the whole apparatus bought a
@@ -55,8 +65,10 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
         const q = search.toLowerCase().trim();
         if (!q)
             return primaryAgents;
-        return primaryAgents.filter((a) => a.name.toLowerCase().includes(q) || (a.description || '').toLowerCase().includes(q));
-    }, [primaryAgents, search]);
+        return primaryAgents.filter((a) => a.name.toLowerCase().includes(q) ||
+            (agentLabels?.[a.name] ?? '').toLowerCase().includes(q) ||
+            (a.description || '').toLowerCase().includes(q));
+    }, [primaryAgents, search, agentLabels]);
     const filteredMeta = useMemo(() => filteredPrimary.filter((a) => isMetaAgentName(a.name)), [filteredPrimary]);
     const filteredProject = useMemo(() => filteredPrimary.filter((a) => !isMetaAgentName(a.name)), [filteredPrimary]);
     // Keyed off the FULL list, never the filtered one: deriving it from
@@ -71,7 +83,7 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
     // fallback stays only for a truly unresolved selection (no name at all),
     // matching the resolver's own first-accessible pre-selection.
     const displayedName = resolveDisplayedAgentName(primaryAgents, selectedAgent);
-    const displayName = agentDisplayLabel(agents, selectedAgent);
+    const displayName = displayedName ? label(displayedName) : agentDisplayLabel(offered, selectedAgent);
     const metaSelected = isMetaAgentName(displayedName);
     /**
      * One agent: name, its type, its description, and a check when it is the
@@ -102,7 +114,7 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
             }, children: [meta && (
                 // Meta is the platform agent that runs the others, so its row leads
                 // with its own mark instead of reading as one more peer in the list.
-                _jsx("span", { className: "bg-muted flex size-8 shrink-0 items-center justify-center rounded-md", children: _jsx(SparkleIcon, { weight: "fill", className: "text-foreground size-4" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: isMetaAgentName(agent.name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(agent.name) }), meta && (_jsx(Badge, { variant: "outline", size: "xs", className: "shrink-0 font-normal", children: tHardcodedUi.raw('i18nComplete.textc78ffe195710') }))] }), agent.description && (_jsx("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: agent.description }))] }), isSelected && (
+                _jsx("span", { className: "bg-muted flex size-8 shrink-0 items-center justify-center rounded-md", children: _jsx(SparkleIcon, { weight: "fill", className: "text-foreground size-4" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: label(agent.name) }), meta && (_jsx(Badge, { variant: "outline", size: "xs", className: "shrink-0 font-normal", children: tHardcodedUi.raw('i18nComplete.textc78ffe195710') }))] }), agent.description && (_jsx("p", { className: "text-muted-foreground mt-0.5 truncate text-xs", children: agent.description }))] }), isSelected && (
                 // `mt-0.5` optically centres the 16px check against the first line
                 // rather than the top edge of the text box.
                 _jsx(CheckIcon, { className: "text-foreground mt-0.5 size-4 shrink-0" }))] }, agent.name));

package/dist/session/composer/composer-chat-input.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SessionOverridesComposer } from '../overrides/session-overrides-composer.js';
 import { SessionChatInput, } from './session-chat-input.js';
 import { useProjectConfig, useRuntimeAgents, useRuntimeCommands, useRuntimeConfig, useRuntimeProviders, useSessionModelSelection } from '@kortix/sdk/react';
@@ -103,10 +103,11 @@ export function ComposerChatInput({ onSend, onCommand, sessionId, projectId, isB
     useEffect(() => {
         onAgentSelectionChange?.(selectedAgentName);
     }, [onAgentSelectionChange, selectedAgentName]);
-    const [newSessionScope, setNewSessionScope] = useState(null);
+    // Read only by `options()` at send time, so a ref: a commit needs no render.
+    const newSessionScopeRef = useRef(null);
     const [newProviderSecretPools, setNewProviderSecretPools] = useState({});
     const handleCommittedScope = useCallback((commit) => {
-        setNewSessionScope(commit ? { agentName: selectedAgentName, commit } : null);
+        newSessionScopeRef.current = commit ? { agentName: selectedAgentName, commit } : null;
     }, [selectedAgentName]);
     // The axes a session can override that have no control of their own —
     // secrets, connectors, sandbox. Agent, model and effort are NOT passed: this
@@ -126,6 +127,7 @@ export function ComposerChatInput({ onSend, onCommand, sessionId, projectId, isB
             o.model = local.model.currentKey;
         if (local.model.variant.current)
             o.variant = local.model.variant.current;
+        const newSessionScope = newSessionScopeRef.current;
         if (!sessionId && newSessionScope && newSessionScope.agentName === selectedAgentName) {
             o.scope = newSessionScope.commit;
         }

package/dist/session/composer/composer-logic.js

@@ -51,11 +51,7 @@ export function extractReplyQuotes(text) {
     const { quotes } = parseReplyContexts(text);
     if (quotes.length === 0)
         return { quotes: [], text };
-    const unique = [];
-    for (const quote of quotes) {
-        if (quote && !unique.includes(quote))
-            unique.push(quote);
-    }
+    const unique = [...new Set(quotes.filter(Boolean))];
     return { quotes: unique, text: stripReplyContexts(text) };
 }
 /**
@@ -96,12 +92,16 @@ export function mergeComposerQuotes(restored, current) {
  * returns `current` itself.
  */
 export function restoreComposerQuotes(current, texts, makeId) {
+    const currentByText = new Map();
+    for (const quote of current)
+        if (!currentByText.has(quote.text))
+            currentByText.set(quote.text, quote);
     const restored = [];
     for (const raw of texts) {
         const text = raw.trim();
         if (!text || restored.some((quote) => quote.text === text))
             continue;
-        restored.push(current.find((quote) => quote.text === text) ?? { id: makeId(), text });
+        restored.push(currentByText.get(text) ?? { id: makeId(), text });
     }
     if (restored.length === 0)
         return current;
@@ -249,7 +249,8 @@ export function planQuoteRequests({ requests, appliedIds, }) {
  * itself when nothing matches, so a no-op ack does not re-render.
  */
 export function acknowledgeQuoteRequests(requests, ids) {
-    const remaining = requests.filter((request) => !ids.includes(request.id));
+    const acked = new Set(ids);
+    const remaining = requests.filter((request) => !acked.has(request.id));
     return remaining.length === requests.length ? requests : remaining;
 }
 /**

package/dist/session/composer/composer-toolbar.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from '../../i18n/index.js';
+import { useUiHostConfig } from '../../providers/ui-provider.js';
 import { ArrowCounterClockwiseIcon } from '@phosphor-icons/react';
 import { Button } from '../../primitives/button.js';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../primitives/hover-card.js';
@@ -10,8 +11,9 @@ import { ReasoningEffortSelector } from './reasoning-effort-selector.js';
 import { SendStopControl } from './send-stop-control.js';
 export function ComposerToolbar({ models, modelsLoading, selectedModel, onModelChange, modelDefaultControls, providers, modelRequired, modelMenuOpen, onModelMenuOpenChange, reasoningMenuOpen, onReasoningMenuOpenChange, variants, selectedVariant, onVariantChange, projectId, toolbarSlot, rewind, leading, isSending, isBusy, onStop, stopDisabled, canStop, escCount, lockForQuestion, questionButtonLabel, submitLabel, questionCanAct, hasText, canSubmit, submitDisabled, disabled, modelUnavailable, agentUnavailable = false, attachmentFailed = false, attachmentUnsupported = null, onSubmit, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    const showModel = (models.length > 0 || modelRequired) && !!onModelChange;
-    return (_jsxs("div", { className: "kortix-composer-toolbar flex items-center justify-between gap-1 overflow-visible", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1 overflow-visible", children: [leading, showModel && (_jsx(ModelSelector, { models: models, modelsLoading: modelsLoading, selectedModel: selectedModel, onSelect: onModelChange, providers: providers, defaultControls: modelDefaultControls, triggerLabelClassName: "max-w-[7rem]", projectId: projectId, offerProviderAccounts: true, open: modelMenuOpen, onOpenChange: onModelMenuOpenChange })), _jsx(ReasoningEffortSelector, { variants: variants, selectedVariant: selectedVariant, onVariantChange: onVariantChange, open: reasoningMenuOpen, onOpenChange: onReasoningMenuOpenChange })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [rewind && (_jsxs(HoverCard, { openDelay: 0, closeDelay: 0, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: rewind.pending || rewind.disabled, onClick: rewind.onRestore, className: "text-muted-foreground hover:text-foreground gap-1.5", children: [rewind.pending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(ArrowCounterClockwiseIcon, { className: "size-3.5 shrink-0" })), tI18nComplete.raw('texta76e13b98392')] }) }) }), _jsx(HoverCardContent, { className: "px-3 py-2 text-sm text-balance", children: rewind.disabled && !rewind.pending
+    const { modelPickerEnabled } = useUiHostConfig();
+    const showModel = modelPickerEnabled && (models.length > 0 || modelRequired) && !!onModelChange;
+    return (_jsxs("div", { className: "kortix-composer-toolbar flex items-center justify-between gap-1 overflow-visible", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1 overflow-visible", children: [leading, showModel && (_jsx(ModelSelector, { models: models, modelsLoading: modelsLoading, selectedModel: selectedModel, onSelect: onModelChange, providers: providers, defaultControls: modelDefaultControls, triggerLabelClassName: "max-w-[7rem]", projectId: projectId, offerProviderAccounts: true, open: modelMenuOpen, onOpenChange: onModelMenuOpenChange })), modelPickerEnabled && _jsx(ReasoningEffortSelector, { variants: variants, selectedVariant: selectedVariant, onVariantChange: onVariantChange, open: reasoningMenuOpen, onOpenChange: onReasoningMenuOpenChange })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [rewind && (_jsxs(HoverCard, { openDelay: 0, closeDelay: 0, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: rewind.pending || rewind.disabled, onClick: rewind.onRestore, className: "text-muted-foreground hover:text-foreground gap-1.5", children: [rewind.pending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(ArrowCounterClockwiseIcon, { className: "size-3.5 shrink-0" })), tI18nComplete.raw('texta76e13b98392')] }) }) }), _jsx(HoverCardContent, { className: "px-3 py-2 text-sm text-balance", children: rewind.disabled && !rewind.pending
                                     ? tI18nComplete.raw('text98433e61649a')
                                     : tI18nComplete.raw('text4c25090df9ea') })] })), toolbarSlot, _jsx(SendStopControl, { isSending: isSending, isBusy: isBusy, onStop: onStop, stopDisabled: stopDisabled, canStop: canStop, escCount: escCount, lockForQuestion: lockForQuestion, questionButtonLabel: questionButtonLabel, submitLabel: submitLabel, questionCanAct: questionCanAct, hasText: hasText, canSubmit: canSubmit, submitDisabled: submitDisabled, disabled: disabled, modelUnavailable: modelUnavailable, agentUnavailable: agentUnavailable, attachmentFailed: attachmentFailed, attachmentUnsupported: attachmentUnsupported, onSubmit: onSubmit })] })] }));
 }

package/dist/session/composer/composer-underbar.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from '../../i18n/index.js';
+import { useUiHostConfig } from '../../providers/ui-provider.js';
 import { PaperclipIcon as Paperclip } from '@phosphor-icons/react';
 import { Button } from '../../primitives/button.js';
 import Hint from '../../primitives/hint.js';
@@ -15,6 +16,7 @@ const NO_AGENT_SELECT = () => { };
 const EMPTY_AGENTS = [];
 export function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMenuOpen, onAgentMenuOpenChange, onAgentChange, noAccessibleAgents = false, messages, models, selectedModel, onContextClick, variant = 'row', toolbarSlot, }) {
     const t = useTranslations('threads');
+    const { contextMeterEnabled } = useUiHostConfig();
     /*
       The agent picker is UNCONDITIONAL. It used to earn its slot
       (`agents.length > 0 && onAgentChange`), and that condition is exactly how
@@ -52,5 +54,5 @@ export function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMe
             : 'kortix-composer-underbar flex items-center justify-between gap-2 px-px pt-1.5 pb-2', children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(Hint, { side: "top", label: t('attachFiles'), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-base", onClick: onAttachClick, "aria-label": t('attachFiles'), 
                             // `hit-area-3` — the ≈29px ghost chip clears the 44px mobile tap
                             // floor only with the shared pseudo-element extension.
-                            className: "text-muted-foreground hit-area-3 rounded-lg", children: _jsx(Paperclip, { className: "size-4 shrink-0" }) }) }), _jsx(AgentSelector, { agents: noAccessibleAgents ? EMPTY_AGENTS : agents, selectedAgent: selectedAgent, open: agentMenuOpen, onOpenChange: onAgentMenuOpenChange, onSelect: onAgentChange ?? NO_AGENT_SELECT, triggerLabelClassName: "max-w-[7rem]", unavailableHint: noAccessibleAgents ? NO_AGENT_ACCESS_MESSAGE : undefined })] }), _jsxs("div", { className: "flex items-center gap-1", children: [inline && !messages ? null : (_jsx(TokenProgress, { messages: messages, models: models, selectedModel: selectedModel, onContextClick: onContextClick })), toolbarSlot] })] }));
+                            className: "text-muted-foreground hit-area-3 rounded-lg", children: _jsx(Paperclip, { className: "size-4 shrink-0" }) }) }), _jsx(AgentSelector, { agents: noAccessibleAgents ? EMPTY_AGENTS : agents, selectedAgent: selectedAgent, open: agentMenuOpen, onOpenChange: onAgentMenuOpenChange, onSelect: onAgentChange ?? NO_AGENT_SELECT, triggerLabelClassName: "max-w-[7rem]", unavailableHint: noAccessibleAgents ? NO_AGENT_ACCESS_MESSAGE : undefined })] }), _jsxs("div", { className: "flex items-center gap-1", children: [(inline && !messages) || !contextMeterEnabled ? null : (_jsx(TokenProgress, { messages: messages, models: models, selectedModel: selectedModel, onContextClick: onContextClick })), toolbarSlot] })] }));
 }

package/dist/session/composer/composer.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { errorToast } from '../../primitives/toast.js';
+import { useUiHostConfig } from '../../providers/ui-provider.js';
 import { useTranslations } from '../../i18n/index.js';
 import { cn } from '../../lib/utils.js';
 import { isImageFile } from '../../internal/lib/utils/file-utils.js';
@@ -28,7 +29,7 @@ import { appendComposerQuote, classifyPaste, isUndoKey, popPasteUndo, extractRep
 import { getContextUsage } from './context-ring.js';
 import { useComposerFocus } from './hooks/use-composer-focus.js';
 import { useMenuRevalidation } from './hooks/use-file-search.js';
-import { controlToOpenFor, localizedSlashActions } from './menus/slash-actions.js';
+import { controlToOpenFor, hostSlashActions, localizedSlashActions, slashActionShown } from './menus/slash-actions.js';
 import { createSubmitLatch } from './submit-latch.js';
 /**
  * The composer's outer shell — max width, centering, and the horizontal gutter
@@ -95,6 +96,8 @@ const NO_QUOTE_REQUESTS = [];
 const NO_SUBSCRIPTION = () => { };
 const NO_COMMAND_CHIP = () => null;
 const EMPTY_DOCUMENT = textToDocument('');
+const NO_SLASH_ACTIONS = [];
+const useNoSlashActions = () => NO_SLASH_ACTIONS;
 function setDocumentWithoutStealingFocus(handle, doc) {
     if (!handle)
         return;
@@ -107,7 +110,7 @@ function setDocumentWithoutStealingFocus(handle, doc) {
     }
 }
 function ComposerImpl(props) {
-    const { onSend, promptAttachments: hostPromptAttachments, isBusy = false, sessionWorking, runtimeReady = true, onStop, stopDisabled = false, canStop = true, isSending = false, rewind, agents = EMPTY_AGENTS, selectedAgent = null, onAgentChange, noAccessibleAgents = false, commands = EMPTY_COMMANDS, 
+    const { onSend, promptAttachments: hostPromptAttachments, isBusy = false, sessionWorking, runtimeReady = true, onStop, stopDisabled = false, canStop = true, isSending = false, rewind, agents = EMPTY_AGENTS, selectedAgent = null, onAgentChange, noAccessibleAgents = false, commands: runtimeCommands = EMPTY_COMMANDS, 
     /** Whether the live command list has EVER resolved — see `planUnresolvedCommandChip`. */
     commandsResolved = false, slashFiles = EMPTY_SLASH_FILES, onCommand, onHoldCommand, models = EMPTY_MODELS, selectedModel = null, onModelChange, modelDefaultControls, variants = EMPTY_VARIANTS, selectedVariant = null, onVariantChange, messages, sessionId, projectId, draftScope = null, draftActive = true, disabled = false, notice = null, onNoticeRetry, clearOnSend = true, modelRequired = false, modelsLoading = false, autoFocus, placeholder = 'Ask anything…', hint, onArrowUpAtStart, prefill = null, onPrefillApplied, attachRequestId = null, providers, onContextClick, onCompactClick, inputSlot, toolbarSlot, underbarPlacement = 'below', slashMenuPlacement = 'above', cardClassName, quoteRequests = NO_QUOTE_REQUESTS, onQuoteRequestsApplied, lockForQuestion = false, lockForApproval = false, onCustomAnswer, questionButtonLabel = null, questionCanAct = true, onQuestionAction, escCount = 0, parentClassName, } = props;
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
@@ -190,6 +193,11 @@ function ComposerImpl(props) {
     const [menuOpen, setMenuOpen] = useState(false);
     useMenuRevalidation(menuOpen, projectId);
     const fileInputRef = useRef(null);
+    const { takeFiles, modelPickerEnabled, contextMeterEnabled, runtimeSlashEnabled, useSlashActions } = useUiHostConfig();
+    // The host's own `/` rows. The config is fixed for the app's life, so the hook is the same one every render.
+    const hostSlashRows = (useSlashActions ?? useNoSlashActions)();
+    // A host that hides the harness lists none of its commands, and a typed "/init" stays text.
+    const commands = runtimeSlashEnabled ? runtimeCommands : EMPTY_COMMANDS;
     const dragDepthRef = useRef(0);
     const savedDocBeforeQuestionRef = useRef(null);
     // A host that owns the controller leaves this composer's own one idle: hooks
@@ -312,6 +320,11 @@ function ComposerImpl(props) {
     const primaryAgents = useMemo(() => agents.filter((a) => !a.hidden && a.mode !== 'subagent'), [agents]);
     const editorDisabled = disabled || lockForApproval;
     const appendAttachedFiles = useCallback((files) => {
+        // The host keeps files in its own store: they go there, not to the session.
+        if (takeFiles) {
+            takeFiles(Array.from(files));
+            return;
+        }
         // One empty or oversized file must not refuse the whole drop: the SDK
         // checks a batch at once, so the files that fit are split off first and
         // each refused one is named (KRTX-2557).
@@ -339,7 +352,7 @@ function ComposerImpl(props) {
         catch (error) {
             errorToast(error instanceof Error ? error.message : tComposerAttachments('couldNotAttach'));
         }
-    }, [addPromptAttachments, tComposerAttachments]);
+    }, [addPromptAttachments, tComposerAttachments, takeFiles]);
     useEffect(() => () => {
         for (const file of attachedFilesRef.current) {
             if (file.kind === 'local')
@@ -917,7 +930,11 @@ function ComposerImpl(props) {
         // Rows whose handler this host did not provide are dropped, not shown
         // dead — the `set-scope` lesson in `slash-actions.ts`: a row that
         // highlights, offers "Use", and does nothing is worse than no row.
+        // A row whose control the host hides is dropped too (`slashActionShown`).
+        const host = { modelPickerEnabled, contextMeterEnabled, runtimeSlashEnabled };
         const available = localizedSlashActions(tI18nComplete).filter((action) => {
+            if (!slashActionShown(action.id, host))
+                return false;
             if (action.id === 'switch-agent')
                 return canSwitchAgent;
             if (action.id === 'compact-session')
@@ -936,9 +953,19 @@ function ComposerImpl(props) {
                 return { ...action, value: `${contextUsage.percent}%`, context: contextUsage };
             }
             return action;
-        });
-    }, [selectedAgent, canSwitchAgent, onCompactClick, onContextClick, contextUsage, tI18nComplete]);
+        }).concat(hostSlashActions(hostSlashRows));
+    }, [
+        selectedAgent, canSwitchAgent, onCompactClick, onContextClick, contextUsage, tI18nComplete,
+        modelPickerEnabled, contextMeterEnabled, runtimeSlashEnabled, hostSlashRows,
+    ]);
     const handleSelectAction = useCallback((action) => {
+        // A host row runs the host's handler; it may hand back text for the composer.
+        if (action.onSelect) {
+            const out = action.onSelect();
+            if (out?.insertText)
+                editorRef.current?.insertAtCursor(out.insertText);
+            return;
+        }
         // Which control a row opens lives in `controlToOpenFor`
         // (menus/slash-actions.ts) so it can be tested; this file cannot be.
         const control = controlToOpenFor(action.id);
@@ -1362,6 +1389,8 @@ function ComposerImpl(props) {
     const showQueueStrip = Boolean(inputSlot);
     const cardProps = {
         tHardcodedUi,
+        // The filtered list (`runtimeSlashEnabled`), over the host's `commands` prop in `props`.
+        commands,
         isDragOver,
         // Inside a `ComposerDropZone` the zone owns every file drag.
         handleDragEnter: inDropZone ? undefined : handleDragEnter,

package/dist/session/composer/draft/composer-draft.js

@@ -76,14 +76,14 @@ export function deserializeDraft(raw, currentUserId) {
     if (!Array.isArray(candidate.files))
         return null;
     const legacy = liftLegacyQuoteNodes(candidate.doc);
-    const quotes = [];
+    const quotes = new Set();
     const stored = Array.isArray(candidate.quotes) ? candidate.quotes : [];
     for (const quote of [...stored, ...legacy.quotes]) {
         if (typeof quote !== 'string')
             continue;
         const text = quote.trim();
-        if (text && !quotes.includes(text))
-            quotes.push(text);
+        if (text)
+            quotes.add(text);
     }
     // Only `{ id, text }` with both set crosses back; anything else in storage is dropped.
     const storedPastes = Array.isArray(candidate.pastes) ? candidate.pastes : [];
@@ -101,7 +101,7 @@ export function deserializeDraft(raw, currentUserId) {
         u: candidate.u,
         doc: legacy.doc,
         files: candidate.files.filter(isRemote),
-        quotes,
+        quotes: [...quotes],
         pastes,
         uploads,
     };

package/dist/session/composer/menus/slash-actions.d.ts

@@ -1,8 +1,10 @@
 import type { UiTranslator } from '../../../i18n/index.js';
 import type { ContextUsage } from '../context-ring.js';
+import type { UiSlashAction } from '../../../providers/ui-provider.js';
 export type SlashActionId = 'switch-model' | 'switch-agent' | 'set-reasoning-effort' | 'attach-file' | 'compact-session' | 'show-context';
 export interface SlashAction {
-    id: SlashActionId;
+    /** A built-in action, or `host:<id>` for a row the host added (`UiHostConfig.useSlashActions`). */
+    id: SlashActionId | `host:${string}`;
     label: string;
     /** Also searched, so "thinking" finds reasoning effort. */
     description: string;
@@ -29,7 +31,25 @@ export interface SlashAction {
      * row falls back to a static muted ring and a plain text description.
      */
     context?: ContextUsage;
+    /** A host row's heading (`UiSlashAction.group`). Built-in actions have none. */
+    group?: string;
+    /** A host row's handler (`UiSlashAction.onSelect`). */
+    onSelect?: UiSlashAction['onSelect'];
 }
+/** The host's `/` rows as slash actions. */
+export declare function hostSlashActions(rows: readonly UiSlashAction[]): SlashAction[];
+/**
+ * Which built-in rows a host shows. A row whose control the host hides is
+ * dropped, not shown dead: the model picker (`modelPickerEnabled`) owns Switch
+ * model and Set reasoning effort, the context meter (`contextMeterEnabled`)
+ * owns Show context, and the runtime's commands (`runtimeSlashEnabled`) own
+ * Compact session.
+ */
+export declare function slashActionShown(id: SlashAction['id'], host: {
+    modelPickerEnabled: boolean;
+    contextMeterEnabled: boolean;
+    runtimeSlashEnabled: boolean;
+}): boolean;
 /**
  * Composer operations, executed locally. These never reach the agent — they
  * open the control they name. Distinct from the Commands section, which runs
@@ -54,5 +74,5 @@ export type SlashActionControl = 'model' | 'reasoning' | 'agent';
  * `bun test` has no DOM, so a mapping left inline there could not be asserted
  * at all.
  */
-export declare function controlToOpenFor(id: SlashActionId): SlashActionControl | null;
+export declare function controlToOpenFor(id: SlashAction['id']): SlashActionControl | null;
 export declare function filterSlashActions(actions: SlashAction[], query: string): SlashAction[];

package/dist/session/composer/menus/slash-actions.js

@@ -1,5 +1,25 @@
 import { localizeUiCatalog } from '../../../i18n/ui-catalog/localize-ui-catalog.js';
 import { REMAINING_UI_TRANSLATION_KEYS } from '../../../i18n/ui-catalog/remaining-ui-translation-keys.generated.js';
+/** The host's `/` rows as slash actions. */
+export function hostSlashActions(rows) {
+    return rows.map((r) => ({ id: `host:${r.id}`, label: r.label, description: r.description, group: r.group, onSelect: r.onSelect }));
+}
+/**
+ * Which built-in rows a host shows. A row whose control the host hides is
+ * dropped, not shown dead: the model picker (`modelPickerEnabled`) owns Switch
+ * model and Set reasoning effort, the context meter (`contextMeterEnabled`)
+ * owns Show context, and the runtime's commands (`runtimeSlashEnabled`) own
+ * Compact session.
+ */
+export function slashActionShown(id, host) {
+    if (id === 'switch-model' || id === 'set-reasoning-effort')
+        return host.modelPickerEnabled;
+    if (id === 'show-context')
+        return host.contextMeterEnabled;
+    if (id === 'compact-session')
+        return host.runtimeSlashEnabled;
+    return true;
+}
 /**
  * Composer operations, executed locally. These never reach the agent — they
  * open the control they name. Distinct from the Commands section, which runs