@kortix/ui 0.14.3 → 0.14.5

package/dist/session/composer/composer-underbar.d.ts

@@ -0,0 +1,54 @@
+import type { SessionLogMessage } from '@kortix/sdk';
+import type { Agent, FlatModel } from '@kortix/sdk/react';
+/**
+ * The row directly BELOW the composer card.
+ *
+ * What you BRING to the message — files, agent — sits left; what it COSTS —
+ * the context ring — sits hard right. Both moved out of `ComposerToolbar`
+ * (which stays inside the card) on purpose: the card holds the message and
+ * the controls that shape the reply (model, effort, send), and these
+ * three are neither. They are also the two ends of one sentence, which is why
+ * this is a single `justify-between` row and not two clusters.
+ *
+ * Extracted rather than inlined into `composer.tsx` for one concrete reason:
+ * `Composer` cannot mount without an `AuthProvider` (`useRuntimeSessions`), so
+ * the matrix-row-18 regression test — the ring must never be hidden at a
+ * breakpoint — would have had nothing to render. See `composer-underbar.test.tsx`.
+ */
+export interface ComposerUnderbarProps {
+    onAttachClick: () => void;
+    /** Already filtered to non-hidden, non-subagent agents (`primaryAgents` in
+     *  composer.tsx) — this component does no further filtering. */
+    agents: Agent[];
+    selectedAgent: string | null;
+    agentMenuOpen?: boolean;
+    onAgentMenuOpenChange?: (open: boolean) => void;
+    onAgentChange?: (agentName: string | null) => void;
+    /**
+     * The roster loaded and this user may run NOTHING here (deny-by-default
+     * project agents). The picker is rendered anyway — disabled, saying so —
+     * because hiding it is what made the empty case indistinguishable from a
+     * normal composer right up to the server's 403.
+     */
+    noAccessibleAgents?: boolean;
+    messages: SessionLogMessage[] | undefined;
+    models: FlatModel[];
+    selectedModel: {
+        providerID: string;
+        modelID: string;
+    } | null;
+    onContextClick?: () => void;
+    /**
+     * `'row'` (default) is the rail beneath the card: `justify-between`, so what
+     * you bring sits left and what it costs sits hard right.
+     *
+     * `'inline'` is the same controls folded onto the toolbar itself, ahead of
+     * the model selector. Project Home is a HERO composer floating mid-page, so
+     * a second rail hanging under it has no column to align to and reads as a
+     * detached strip; there the controls belong on the one bar. Nothing is
+     * duplicated for it — same component, different packing.
+     */
+    variant?: 'row' | 'inline';
+    toolbarSlot?: React.ReactNode;
+}
+export declare function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMenuOpen, onAgentMenuOpenChange, onAgentChange, noAccessibleAgents, messages, models, selectedModel, onContextClick, variant, toolbarSlot, }: ComposerUnderbarProps): import("react").JSX.Element;

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

@@ -0,0 +1,58 @@
+'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';
+import { AgentSelector } from './agent-selector.js';
+import { NO_AGENT_ACCESS_MESSAGE } from './composer-agent-access.js';
+import { TokenProgress } from './token-progress.js';
+/** `AgentSelector.onSelect` is required, but a picker with no host handler
+ *  never calls it. Module-level so the memoized selector isn't handed a fresh
+ *  inline arrow on every keystroke in the editor above it. */
+const NO_AGENT_SELECT = () => { };
+/** Stable identity so the empty roster doesn't remount the picker per render. */
+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
+      a prompt went out with no agent on screen: the roster came back empty for a
+      member with no grant, the control vanished,
+      the composer looked entirely normal, and the server ran its manifest
+      default. Nothing may send until the agent that will run is VISIBLE, so the
+      control that shows it cannot be conditional. An empty roster renders it
+      inert (see `AgentSelector`), never absent.
+    */
+    /*
+      The horizontal padding here is an OPTICAL value, tuned by eye, not a
+      derived one — leave it to whoever is looking at the screen. What it is
+      fighting, for context: this row is a sibling of the card, so it measures
+      from the card's BORDER, while the toolbar's controls measure from the
+      card's content box (`composer.tsx`'s inner column `px-2`, plus whatever the
+      toolbar row itself carries). The two rails therefore do not agree for free,
+      and this padding is what reconciles them. If the composer's inner padding
+      ever changes, this is the value that has to move with it.
+  
+      The one hard rule: no `hidden`/`sm:` display class on this row or anything
+      between it and the ring. That exact regression removed the only route to
+      the context modal on a phone, and `composer-underbar.test.tsx` asserts it.
+      Same reason the gutter above (`COMPOSER_SHELL_CLASS`) may be trimmed by a
+      breakpoint but never zeroed by one.
+    */
+    const inline = variant === 'inline';
+    return (
+    // `kortix-composer-underbar` is not decoration — `styles/components.css` hangs the
+    // coarse-pointer 40×40 minimum off it. Without the class this row's
+    // buttons stayed 32px on touch while the identical controls inside
+    // `.kortix-composer-toolbar` were 40px.
+    _jsxs("div", { className: inline
+            ? 'kortix-composer-underbar flex min-w-0 items-center gap-1'
+            : '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) || !contextMeterEnabled ? null : (_jsx(TokenProgress, { messages: messages, models: models, selectedModel: selectedModel, onContextClick: onContextClick })), toolbarSlot] })] }));
+}

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

@@ -0,0 +1,356 @@
+import type { Agent, Command, FlatModel, ProviderListResponse, UsePromptAttachmentsResult } from '@kortix/sdk/react';
+import { type SessionLogMessage } from '@kortix/sdk';
+import { type ComposerSendReset } from './composer-reset.js';
+import { type ModelDefaultControls } from '../models/model-selector.js';
+import type { DraftScope } from './draft/composer-draft.js';
+import { type AttachmentSubmission } from './attachment-submission.js';
+import { type QuoteRequest } from './composer-logic.js';
+import type { SlashFile } from './menus/slash-files.js';
+import type { AttachedFile, TrackedMention } from './types.js';
+export interface SessionChatInputProps {
+    onSend: (text: string, files?: AttachedFile[], mentions?: TrackedMention[], attachments?: AttachmentSubmission, placement?: 'transcript' | 'composer') => void | Promise<void>;
+    /**
+     * A host-owned upload controller. Pass one when this composer can remount
+     * while a send still holds its uploads (the boot shell's first send).
+     * Defaults to a controller owned by this composer.
+     */
+    promptAttachments?: UsePromptAttachmentsResult;
+    isBusy?: boolean;
+    /**
+     * The session is working, per the ONE projection (`useSessionWorking`).
+     *
+     * Distinct from `isBusy`, which is a 300 ms fade timer for the busy
+     * indicator: this is the server's own turn authority, and it is what decides
+     * whether a `/` command may be dispatched at all. Defaults to `isBusy` so a
+     * host that has not wired it still refuses a command mid-turn — the safe
+     * direction — rather than silently allowing one.
+     */
+    sessionWorking?: boolean;
+    /**
+     * The sandbox is up and this session is switched onto it (`useRuntimeReady`).
+     *
+     * Read by the `/` COMMAND path only. A prompt does not need it — it becomes a
+     * durable inbox row and the drain delivers it once the box answers, which is
+     * what the "Waking this session up…" notice promises. A command has no row:
+     * `runCommand` returns a resolved promise when the runtime is not switched,
+     * so dispatching one at a sleeping box cleared the draft and left an
+     * optimistic bubble waiting on a turn that never starts.
+     *
+     * Defaults to `true` so a host that shows a composer without a runtime
+     * concept (project home) is unaffected; `session-chat.tsx` passes the real
+     * value.
+     */
+    runtimeReady?: boolean;
+    onStop?: () => void;
+    stopDisabled?: boolean;
+    /** See `SendStopControl`. Default true. */
+    canStop?: boolean;
+    isSending?: boolean;
+    /**
+     * The session sits on a rewound path: sending commits it, restoring keeps
+     * the removed messages and file changes. Renders a compact Restore control
+     * beside send/stop — the moment of commitment — instead of a banner above
+     * the card.
+     */
+    rewind?: {
+        pending?: boolean;
+        disabled?: boolean;
+        onRestore: () => void;
+    };
+    agents?: Agent[];
+    selectedAgent?: string | null;
+    onAgentChange?: (agentName: string | null | undefined) => void;
+    /**
+     * The agent roster loaded and it is EMPTY for this user — project agents are
+     * deny-by-default for a member without an explicit grant.
+     *
+     * Set it and the composer refuses the submission instead of POSTing a prompt
+     * the server answers with a 403 (or, worse, silently runs under the manifest
+     * `default_agent` nobody picked). The picker beside the send button renders
+     * the same refusal in words. Hosts that have no agent concept at all leave it
+     * `false` — an absent roster is not a denied one. See
+     * `composer-agent-access.ts`.
+     */
+    noAccessibleAgents?: boolean;
+    commands?: Command[];
+    /**
+     * Whether the live command list has EVER resolved — the hook's `data`
+     * present, not the `[]` the composer defaults to while it loads. The one
+     * bit that separates "the chip's command is still being looked up" from
+     * "the list answered and the command is gone": only the first may refuse a
+     * send that would otherwise carry attachments out as a prompt.
+     */
+    commandsResolved?: boolean;
+    /**
+     * The session's own files, as `/` palette rows — the Outputs card's
+     * deliverables and the Context card's reads, built by
+     * `menus/slash-files.ts`'s `sessionSlashFiles`.
+     *
+     * A prop, not a `useOptionalSessionPanel()` call inside this component,
+     * even though the panel provider does sit above every session composer.
+     * Importing that provider here would pull the entire detail-panel tree
+     * (files explorer, audit panel, previews) into this module's graph — and
+     * this composer also renders on project home and in the marketing demo,
+     * neither of which has any use for it. The host that already lives beside
+     * the panel (`session-chat.tsx`) reads the context and hands the derived
+     * list down; every other host omits it.
+     */
+    slashFiles?: SlashFile[];
+    /**
+     * Opens a paste tile's full text — the side panel, from the host beside it
+     * (`session-chat.tsx`), for the reason `slashFiles` is a prop. Omitted, the
+     * tile is inert.
+     */
+    onOpenPastedContent?: (id: string, text: string) => void;
+    /**
+     * `split` is where the chip sat in `args` — display only. Without it every
+     * consumer rebuilds the sent message as `/name` + args, so a command typed
+     * mid-sentence (`explain /webapp to me`) came back reordered to the front.
+     */
+    onCommand?: (command: Command, args?: string, split?: {
+        before: string;
+        after: string;
+    }) => void;
+    /**
+     * Hold a command the session cannot run yet (a turn is running, or the box
+     * is waking) and run it when it can — `held-commands.ts`. A host without it
+     * refuses the command instead and keeps the draft.
+     */
+    onHoldCommand?: (command: Command, args?: string, split?: {
+        before: string;
+        after: string;
+    }) => void;
+    models?: FlatModel[];
+    selectedModel?: {
+        providerID: string;
+        modelID: string;
+    } | null;
+    onModelChange?: (model: {
+        providerID: string;
+        modelID: string;
+    } | null) => void;
+    modelDefaultControls?: ModelDefaultControls;
+    variants?: string[];
+    selectedVariant?: string | null;
+    onVariantChange?: (variant: string | null | undefined) => void;
+    messages?: SessionLogMessage[];
+    sessionId?: string;
+    projectId?: string;
+    /**
+     * Persist the unsent draft under this scope and restore it on the next
+     * mount — see `composer/draft/`. Project scope for the home hero composer
+     * (no session yet), session scope for every in-thread one.
+     *
+     * Omitted → the composer persists nothing, which is what the two
+     * marketing-demo composers rely on.
+     */
+    draftScope?: DraftScope | null;
+    draftActive?: boolean;
+    disabled?: boolean;
+    /**
+     * A line shown in a bar directly ABOVE the composer card. Used for "this
+     * session is still waking" — a state that used to disable the input and show
+     * a spinner with no explanation, which was indistinguishable from broken.
+     */
+    notice?: string | null;
+    /**
+     * Renders a "Retry" action inline in the notice bar when set. Wired to
+     * `requestRuntimeReconnect()` for a confirmed-unreachable runtime, or a
+     * runtime that has been booting/connecting past a sane ceiling with no
+     * ready flip either — see `SessionComposerReadiness.retryable`. Omitted (no
+     * button) for the ordinary, still-within-budget booting/waking notice,
+     * where the background poller is expected to resolve things on its own
+     * shortly.
+     */
+    onNoticeRetry?: () => void;
+    /** What send does to this composer — see `ComposerSendReset`. */
+    clearOnSend?: ComposerSendReset;
+    modelRequired?: boolean;
+    modelsLoading?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    /**
+     * A functional hint that replaces the rotating placeholder while it is set —
+     * the session passes "Press ↑ to edit queued messages" while entries are
+     * queued. Lock copy (a pending question or approval) still wins.
+     */
+    hint?: string;
+    /**
+     * Up with the caret on the editor's first visual row. Returns whether it
+     * acted; `false` keeps Up as an ordinary caret move.
+     */
+    onArrowUpAtStart?: () => boolean;
+    prefill?: {
+        text: string;
+        id: number;
+        files?: AttachedFile[];
+        mode?: 'replace' | 'merge';
+        /**
+         * Submit the prefill once it has landed, exactly as if the person pressed
+         * Enter. For one-click starters (the first chat's "Update memory"): the
+         * send still carries the composer's agent and model and still hits every
+         * refusal (no agent, no model, blocked images) a typed message would.
+         */
+        submit?: boolean;
+    } | null;
+    /**
+     * Called with `prefill.id` the moment that prefill has actually landed in the
+     * editor — the CONSUME half of the handoff.
+     *
+     * A prefill can only be applied once the lazy editor exists, which is one or
+     * more commits after the composer mounts. A holder that clears its draft in
+     * its own mount effect therefore clears it BEFORE this composer could read
+     * it, and the text is lost — with the effect running child-before-parent
+     * making it look correct in the case where the editor happens to be ready.
+     * So the holder waits to be told, rather than assuming.
+     */
+    onPrefillApplied?: (prefillId: number) => void;
+    /**
+     * A fresh (never-before-seen) value asks the composer to open its attach
+     * (file-picker) flow — the empty Context card's "Add context" button.
+     * Id-keyed exactly like `prefill.id`: a repeat request bumps to a new id
+     * so the effect below fires again even if the composer never unmounted.
+     */
+    attachRequestId?: number | null;
+    providers?: ProviderListResponse;
+    onContextClick?: () => void;
+    /**
+     * Open the host's Compact-session modal. Also gates the `/` palette's
+     * "Compact session" row — absent handler, absent row, so the palette never
+     * offers an action that would do nothing (see the `set-scope` note in
+     * `menus/slash-actions.ts`). Same contract for `onContextClick` and the
+     * "Show context" row.
+     */
+    onCompactClick?: () => void;
+    /** Its own full-width card above the composer stack — the queued messages. */
+    aboveSlot?: React.ReactNode;
+    inputSlot?: React.ReactNode;
+    toolbarSlot?: React.ReactNode;
+    /**
+     * Where the under-row's controls live — attach, the agent picker and the
+     * context ring.
+     *
+     * `'below'` (default) keeps them as their own row beneath the card, which is
+     * the session page: the card holds the message, the row beneath holds what
+     * you bring to it and what it costs.
+     *
+     * `'inline'` folds them into the toolbar instead, ahead of the model
+     * selector. Project Home is a HERO composer floating in the middle of an
+     * empty page — a second rail hanging under it has no column to align to and
+     * reads as a detached strip, so there the controls belong on the one bar.
+     */
+    underbarPlacement?: 'below' | 'inline';
+    /**
+     * Where the `/` menu docks relative to the card. `'above'` (default) keeps
+     * it in flow above the composer — on the session page the card sits at the
+     * viewport bottom, so above is the only side with room, and pushing the
+     * card down is invisible there.
+     *
+     * `'below'` absolutely positions the dock under the card instead. Project
+     * Home is a HERO composer in the middle of the page: docking above would
+     * shove the centered heading up on every keystroke that filters the list,
+     * while below has the whole empty lower half of the page to paint over.
+     * Absolute — not in flow — so opening the menu never reflows the hero or
+     * the starter chips beneath it.
+     */
+    slashMenuPlacement?: 'above' | 'below';
+    cardClassName?: string;
+    /**
+     * Reply quotes to add — transcript selections the user clicked "Reply" on,
+     * oldest first. Id-keyed like `prefill`: each id appends ONE quote to the
+     * list drawn above the input (`QuoteList`), in array order. Accepted at any
+     * time, question lock and disabled editor included: the list never touches
+     * the editor document. A quote already in the list is not added twice, and
+     * the same id is never applied twice. The next normal send carries every
+     * quote as a leading `<reply_context>` line (`withReplyQuotes`).
+     */
+    quoteRequests?: readonly QuoteRequest[];
+    /**
+     * Called with the ids just applied — the consume half of the handoff, same
+     * contract as `onPrefillApplied`. A holder removes those ids on this
+     * (`acknowledgeQuoteRequests`) so a later remount of the composer cannot
+     * apply them again.
+     */
+    onQuoteRequestsApplied?: (requestIds: number[]) => void;
+    lockForQuestion?: boolean;
+    lockForApproval?: boolean;
+    onCustomAnswer?: (text: string) => void;
+    questionButtonLabel?: string | null;
+    /** A question or a pending approval is docked above the card: the strip
+     *  goes full width and the card squares its top corners, so both read as
+     *  one surface. */
+    questionActive?: boolean;
+    /**
+     * A labeled submit button replaces the icon send/stop control, busy or
+     * not. Set while the composer edits a queued message: its send saves the
+     * edit, so Stop is the wrong control there.
+     */
+    submitLabel?: string | null;
+    questionCanAct?: boolean;
+    onQuestionAction?: () => void;
+    escCount?: number;
+    parentClassName?: string;
+}
+/**
+ * The composer's outer shell — max width, centering, and the horizontal gutter
+ * everything in the composer (notice bar, card, under-row, model connection
+ * bar) is measured from.
+ *
+ * The BASE gutter is `px-4` and it carries no breakpoint, deliberately. This
+ * was `px-2 sm:px-0`, and `sm:` is a VIEWPORT query answering a CONTAINER
+ * question. This element's width is set by the session layout — sidebar,
+ * action-panel column, and the browser/terminal/files detail panel — never by
+ * the window:
+ *
+ *  - Action panel or a detail tab open on a 1512px screen: the viewport is
+ *    still ≥640px, so `sm:px-0` zeroed the gutter while the chat column was
+ *    only ~600px wide. The column is narrower than `max-w-210`, so `mx-auto`
+ *    has no slack to donate and the card sat flush against the panel divider.
+ *  - Everything closed: the column grows past `max-w-210`, `mx-auto` produces
+ *    slack on both sides, and the gutter appears to "work" again.
+ *
+ * Same class, opposite result, decided by a query that cannot see the panel —
+ * which is exactly the "sometimes there's padding, sometimes there isn't" bug.
+ * A constant gutter is correct in all of them: when the column is wide the
+ * 16px is invisible inside the centering slack, and when it is narrow it is
+ * the only thing keeping the card off the edge.
+ *
+ * 16px is not arbitrary — it is the transcript's own gutter (`session-chat.tsx`:
+ * `mx-auto w-full max-w-3xl min-w-0 px-4 pt-6`). Whenever the column is
+ * narrower than either max-width — every panel-open case — the card's edges
+ * land on exactly the same rails as the messages above it.
+ *
+ * The gutter is equal on both sides. It used to carry `md:pr-1`, a right-side
+ * trim against the collapsed action-panel chevron rail, which then took ~37px
+ * of the row's width. That rail now takes no width (`COLLAPSED_RAIL_OFFSET` in
+ * `session-action-panel-column.tsx`), so the trim only shifted the card 5.5px
+ * right of center. A breakpoint may never ZERO this gutter — zero is what let
+ * the card touch the panel divider, and `composer-underbar.test.tsx` guards
+ * exactly that line.
+ *
+ * Do not add breakpoints. If this needs to respond to width,
+ * it has to be a container query on the chat column, not a media query — the
+ * media query cannot see the panel, which is the whole reason it broke before.
+ */
+export declare const COMPOSER_SHELL_CLASS = "relative z-10 mx-auto w-full max-w-210 shrink-0 px-4";
+/**
+ * The inset strip above the card that hosts `inputSlot` — the queued messages,
+ * the approval notice, the permission notice, and `QuestionPrompt`.
+ *
+ * `items-center` is load-bearing and it BITES: a flex column sizes each child
+ * to its content unless the child says otherwise, so anything mounted here that
+ * omits `w-full` renders as a narrow box floating in the middle of the strip,
+ * with a width that tracks whatever text happens to be inside it. Exported so
+ * the invariant is pinned by a test (composer-input-slot.test.tsx) rather than
+ * rediscovered by the next notice that gets added.
+ */
+export declare const COMPOSER_INPUT_SLOT_CLASS = "bg-sidebar border-border flex w-full flex-col items-center gap-2 rounded-t-xl border border-b-0 p-1 empty:hidden";
+/** Stable empty defaults so a fresh `[]` per render never breaks memoization. */
+export declare const EMPTY_AGENTS: Agent[];
+export declare const EMPTY_COMMANDS: Command[];
+export declare const EMPTY_MODELS: FlatModel[];
+export declare const EMPTY_VARIANTS: string[];
+export declare const EMPTY_SLASH_FILES: SlashFile[];
+declare function ComposerImpl(props: SessionChatInputProps): import("react").JSX.Element;
+export declare const Composer: import("react").MemoExoticComponent<typeof ComposerImpl>;
+export {};