@kortix/ui 0.14.4 → 0.14.5

package/dist/internal/stores/session-hover-store.js

@@ -12,6 +12,10 @@ import { create } from 'zustand';
  * the active row is what is left, and it is also the cheaper shape: exactly one
  * card is mounted at any time, by construction rather than by timing luck.
  *
+ * The store also holds the active row's element and the one card's content
+ * slot (`SessionBriefCardHost`): rows render their brief into that slot, and
+ * the host glides to the row instead of a new card appearing at it.
+ *
  * The delays live here rather than on the primitive for a performance reason.
  * If `openDelay` were a prop derived from `warm`, every row in the sidebar would
  * re-render each time the group warmed or cooled. Nothing selects `warm`, so it
@@ -21,18 +25,22 @@ import { create } from 'zustand';
 /** The first card costs a delay, so a pointer crossing the list on its way
  *  somewhere else does not flash open every row it passes over. */
 export const HOVER_OPEN_DELAY_MS = 200;
+/** While a card is open, a move to another row waits this long, and a newer
+ *  row restarts the wait: a pointer sweeping down the list moves the card once,
+ *  to where it stops, instead of re-rendering it for every row it crosses. */
+export const HOVER_MOVE_DEBOUNCE_MS = 50;
 /** Long enough for the pointer to cross the `sideOffset` gap into the card. */
 export const HOVER_CLOSE_DELAY_MS = 100;
 /** How long the group stays warm after its last card closes. */
 export const HOVER_WARM_GRACE_MS = 300;
 /**
- * Once one card is open the group is warm and the next row is instant, so the
- * card reads as moving to the row under the pointer instead of closing and
- * reopening. This is the rule the design system already states for tooltips:
- * delay before the first, none for the rest while the group is active.
+ * Once one card is open the group is warm and the next row costs only the move
+ * debounce, so the card reads as moving to the row under the pointer instead of
+ * closing and reopening. This is the rule the design system already states for
+ * tooltips: delay before the first, (almost) none for the rest.
  */
 export function hoverOpenDelayMs(warm) {
-    return warm ? 0 : HOVER_OPEN_DELAY_MS;
+    return warm ? HOVER_MOVE_DEBOUNCE_MS : HOVER_OPEN_DELAY_MS;
 }
 /**
  * Compare-and-clear, the same guard `session-switch-store` uses: a close
@@ -44,6 +52,8 @@ export function clearIfActive(current, sessionId) {
 let openTimer = null;
 let closeTimer = null;
 let warmTimer = null;
+/** The row a pending open will show; its close must also close the card still showing. */
+let pendingId = null;
 function cancel(timer) {
     if (timer)
         clearTimeout(timer);
@@ -51,8 +61,12 @@ function cancel(timer) {
 }
 export const useSessionHoverStore = create((set, get) => ({
     activeSessionId: null,
+    anchor: null,
+    via: 'pointer',
+    slot: null,
     warm: false,
-    openSession: (sessionId) => {
+    setSlot: (slot) => set({ slot }),
+    openSession: (sessionId, anchor, via = 'pointer') => {
         closeTimer = cancel(closeTimer);
         warmTimer = cancel(warmTimer);
         // A pending open belongs to whichever row the pointer has just left.
@@ -61,21 +75,24 @@ export const useSessionHoverStore = create((set, get) => ({
         // or crossing the gap back from the card would flicker it.
         if (get().activeSessionId === sessionId)
             return;
-        if (hoverOpenDelayMs(get().warm) === 0) {
-            set({ activeSessionId: sessionId, warm: true });
-            return;
-        }
+        const show = { activeSessionId: sessionId, anchor: anchor ?? null, via, warm: true };
+        pendingId = sessionId;
         openTimer = setTimeout(() => {
             openTimer = null;
-            set({ activeSessionId: sessionId, warm: true });
-        }, HOVER_OPEN_DELAY_MS);
+            pendingId = null;
+            set(show);
+        }, hoverOpenDelayMs(get().warm));
     },
     closeSession: (sessionId) => {
         openTimer = cancel(openTimer);
         closeTimer = cancel(closeTimer);
+        // Leaving a row whose move had not landed yet: the card still shows the
+        // previous row, and that card is the one to close.
+        const target = pendingId === sessionId ? get().activeSessionId : sessionId;
+        pendingId = null;
         closeTimer = setTimeout(() => {
             closeTimer = null;
-            set((state) => ({ activeSessionId: clearIfActive(state.activeSessionId, sessionId) }));
+            set((state) => ({ activeSessionId: target ? clearIfActive(state.activeSessionId, target) : state.activeSessionId }));
             warmTimer = setTimeout(() => {
                 warmTimer = null;
                 set({ warm: false });
@@ -83,6 +100,7 @@ export const useSessionHoverStore = create((set, get) => ({
         }, HOVER_CLOSE_DELAY_MS);
     },
     dismiss: () => {
+        pendingId = null;
         openTimer = cancel(openTimer);
         closeTimer = cancel(closeTimer);
         warmTimer = cancel(warmTimer);

package/dist/internal/stores/session-panel-memory-store.js

@@ -40,6 +40,8 @@ export function rememberedPanelOf({ terminalOpen, detailKey, }) {
         return { kind: 'view', view: 'files', target: { changes: true } };
     if (detailKey === 'audit')
         return { kind: 'view', view: 'audit' };
+    if (detailKey === 'reminders')
+        return { kind: 'view', view: 'reminders' };
     if (detailKey === 'app:landing')
         return { kind: 'view', view: 'browser' };
     if (detailKey?.startsWith('app:'))

package/dist/primitives/count-badge.d.ts

@@ -19,8 +19,10 @@ declare const TONE: {
     readonly conflict: "bg-kortix-orange/15";
 };
 export type CountBadgeTone = keyof typeof TONE;
-export declare function CountBadge({ count, tone, className, ...props }: {
+export declare function CountBadge({ count, tone, icon, className, ...props }: {
     count: number;
     tone?: CountBadgeTone;
+    /** A glyph that names what is counted, drawn before the number. */
+    icon?: React.ReactNode;
 } & Omit<React.ComponentProps<'span'>, 'children'>): import("react").JSX.Element;
 export {};

package/dist/primitives/count-badge.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from './badge.js';
 import { cn } from '../lib/utils.js';
 /**
@@ -21,6 +21,6 @@ const TONE = {
     reminder: 'bg-kortix-purple/15',
     conflict: 'bg-kortix-orange/15',
 };
-export function CountBadge({ count, tone = 'neutral', className, ...props }) {
-    return (_jsx(Badge, { variant: "transparent", size: "tabular", className: cn(TONE[tone], 'shrink-0 text-current', className), ...props, children: count > 99 ? '99+' : count }));
+export function CountBadge({ count, tone = 'neutral', icon, className, ...props }) {
+    return (_jsxs(Badge, { variant: "transparent", size: "tabular", className: cn(TONE[tone], 'shrink-0 text-current', icon && 'gap-1', className), ...props, children: [icon, count > 99 ? '99+' : count] }));
 }

package/dist/primitives/glyph-paths-source.js

@@ -27,7 +27,7 @@ export function renderGlyphPathsModule() {
     const paths = glyphPathsInDefaultWeight();
     const lines = Object.entries(paths).map(([name, d]) => `  ${JSON.stringify(name)}: ${JSON.stringify(d)},`);
     return [
-        '// GENERATED by apps/web/scripts/generate-glyph-paths.tsx. Do not edit.',
+        '// GENERATED by packages/ui/scripts/generate-glyph-paths.tsx. Do not edit.',
         '// The path of every catalogue glyph in DEFAULT_ICON_WEIGHT; see glyph-face.tsx.',
         '',
         `export const GLYPH_PATHS_WEIGHT = ${JSON.stringify(DEFAULT_ICON_WEIGHT)};`,

package/dist/primitives/glyph-paths.generated.js

@@ -1,4 +1,4 @@
-// GENERATED by apps/web/scripts/generate-glyph-paths.tsx. Do not edit.
+// GENERATED by packages/ui/scripts/generate-glyph-paths.tsx. Do not edit.
 // The path of every catalogue glyph in DEFAULT_ICON_WEIGHT; see glyph-face.tsx.
 export const GLYPH_PATHS_WEIGHT = "bold";
 export const GLYPH_PATHS = {

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,11 @@ 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(() => (offeredAgents ? agents.filter((a) => offeredAgents.includes(a.name)) : agents), [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 +60,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 +78,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 +109,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-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/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

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

@@ -96,7 +96,7 @@ export function buildSlashSections({ commands, actions = SLASH_ACTIONS, files =
     const filteredActions = filterSlashActions(actions, query);
     const filteredFiles = filterSlashFiles(files, query);
     const fileCap = q ? FILE_LIMIT : FILE_PREVIEW_LIMIT;
-    // Render order: Actions, Outputs, Context, Skills, Commands, MCP.
+    // Render order: Actions, the host's groups, Outputs, Context, Skills, Commands, MCP.
     //
     // Actions moved from last to first. They are the fixed, always-present rows
     // (switch model, attach a file, …) — the same six every time, in the same
@@ -112,11 +112,12 @@ export function buildSlashSections({ commands, actions = SLASH_ACTIONS, files =
     // in would desync the highlight from the keyboard.
     let index = 0;
     const sections = [];
-    if (filteredActions.length) {
+    const builtIn = filteredActions.filter((a) => !a.group);
+    if (builtIn.length) {
         sections.push({
             heading: actionsHeading,
             hideHeading: true,
-            rows: filteredActions.map((action) => ({
+            rows: builtIn.map((action) => ({
                 index: index++,
                 type: 'action',
                 name: action.label,
@@ -127,6 +128,21 @@ export function buildSlashSections({ commands, actions = SLASH_ACTIONS, files =
             })),
         });
     }
+    // The host's rows (`UiHostConfig.useSlashActions`), under their own headings, in the order given.
+    const hostGroups = [...new Set(filteredActions.filter((a) => a.group).map((a) => a.group))];
+    for (const heading of hostGroups) {
+        sections.push({
+            heading,
+            rows: filteredActions.filter((a) => a.group === heading).map((action) => ({
+                index: index++,
+                type: 'action',
+                name: action.label,
+                description: action.description,
+                hint: action.hint,
+                action,
+            })),
+        });
+    }
     // Outputs, then Context, then the command buckets.
     //
     // Above the commands because this is the one part of the palette that is