@kortix/ui 0.14.6 → 0.14.8

package/dist/markdown/setup-links/app-credentials-form.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../primitives/button.js';
+import { Field, FieldGroup, FieldLabel } from '../../primitives/field.js';
+import { Input } from '../../primitives/input.js';
+import { InputGroup, InputGroupAddon, InputGroupInput } from '../../primitives/input-group.js';
+import Loading from '../../primitives/loading.js';
+import { useTranslations } from '../../i18n/index.js';
+import { getConnectorAppForm, HostBoundaryError, submitConnectorAppForm, } from '@kortix/sdk';
+import { ArrowUpRightIcon, CheckIcon, ClockCountdownIcon, LinkBreakIcon, WarningCircleIcon, } from '@phosphor-icons/react';
+import { useEffect, useState } from 'react';
+import { setupLinkApiBase } from './api-base.js';
+import { StatusNotice } from './secret-intake-form.js';
+// Machine values, not prose: Shopify serves every store at <handle>.myshopify.com.
+const SHOPIFY_HOST_SUFFIX = '.myshopify.com';
+const EXAMPLE_STORE_HANDLE = 'acme';
+const DEV_DASHBOARD_URL = 'https://dev.shopify.com/dashboard';
+/** Long enough to read the confirmation before the window closes itself. */
+const CLOSE_AFTER_MS = 1_500;
+function statusOf(cause) {
+    return cause instanceof HostBoundaryError ? cause.status : null;
+}
+function DashboardLink({ children }) {
+    return (_jsxs("a", { href: DEV_DASHBOARD_URL, target: "_blank", rel: "noopener noreferrer", className: "group text-kortix-base focus-visible:ring-ring inline-flex items-baseline gap-0.5 rounded-sm font-medium outline-none focus-visible:ring-2", children: [_jsx("span", { className: "decoration-kortix-base/40 group-hover:decoration-kortix-base underline underline-offset-2", children: children }), _jsx(ArrowUpRightIcon, { className: "size-3 shrink-0 self-center" })] }));
+}
+/**
+ * The form behind an own-app connect link (`/connect/app/[token]`): the app's
+ * client credentials and the store, for a Composio toolkit that runs on the
+ * customer's own app. Shopify is the one such app today.
+ *
+ * The page opens in the connect popup. The window that opened it polls the
+ * connection, so after a success this window only confirms and closes itself
+ * (or follows the native app's return link).
+ */
+export function AppCredentialsForm({ token }) {
+    const t = useTranslations('connectAppForm');
+    const base = setupLinkApiBase();
+    const [phase, setPhase] = useState('loading');
+    const [info, setInfo] = useState(null);
+    const [store, setStore] = useState('');
+    const [clientId, setClientId] = useState('');
+    const [clientSecret, setClientSecret] = useState('');
+    const [connectedAs, setConnectedAs] = useState(null);
+    const [message, setMessage] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        getConnectorAppForm(token, { backendUrl: base }).then((body) => {
+            if (cancelled)
+                return;
+            setInfo(body);
+            setConnectedAs(body.connected_as);
+            setPhase(body.connected ? 'done' : 'ready');
+        }, (cause) => {
+            if (cancelled)
+                return;
+            const status = statusOf(cause);
+            setMessage(cause instanceof Error ? cause.message : null);
+            setPhase(status === 410 ? 'expired' : status === 404 ? 'invalid' : status === 409 ? 'stale' : 'error');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [base, token]);
+    async function submit() {
+        if (!store.trim() || !clientId.trim() || !clientSecret.trim()) {
+            setMessage(t.raw('missingFields'));
+            return;
+        }
+        setPhase('submitting');
+        setMessage(null);
+        try {
+            const result = await submitConnectorAppForm(token, { store: store.trim(), clientId: clientId.trim(), clientSecret: clientSecret.trim() }, { backendUrl: base });
+            setConnectedAs(result.connected_as);
+            setPhase('done');
+            window.setTimeout(() => {
+                if (result.success_redirect_uri)
+                    window.location.assign(result.success_redirect_uri);
+                else
+                    window.close();
+            }, CLOSE_AFTER_MS);
+        }
+        catch (cause) {
+            const status = statusOf(cause);
+            setMessage(cause instanceof Error ? cause.message : t.raw('failed'));
+            if (status === 410)
+                setPhase('expired');
+            else if (status === 409)
+                setPhase('stale');
+            else
+                setPhase('ready');
+        }
+    }
+    const app = info?.name ?? 'Shopify';
+    switch (phase) {
+        case 'loading':
+            return (_jsxs("div", { role: "status", className: "text-muted-foreground flex items-center justify-center gap-2 py-8 text-sm", children: [_jsx(Loading, { className: "size-4 shrink-0" }), t.raw('loading')] }));
+        case 'expired':
+            return (_jsx(StatusNotice, { icon: ClockCountdownIcon, tone: "warning", title: t.raw('expiredTitle'), description: t.raw('startAgain') }));
+        case 'invalid':
+            return (_jsx(StatusNotice, { icon: LinkBreakIcon, tone: "destructive", title: t.raw('invalidTitle'), description: t.raw('startAgain') }));
+        case 'stale':
+            return (_jsx(StatusNotice, { icon: LinkBreakIcon, tone: "warning", title: t.raw('staleTitle'), description: message ?? t.raw('startAgain') }));
+        case 'error':
+            return _jsx(StatusNotice, { icon: WarningCircleIcon, tone: "destructive", title: message ?? t.raw('failed') });
+        case 'done':
+            return (_jsx(StatusNotice, { icon: CheckIcon, tone: "success", title: t('connectedTitle', { app }), description: connectedAs ? t('connectedDescription', { store: connectedAs }) : t.raw('closeWindow') }));
+    }
+    const submitting = phase === 'submitting';
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t.raw('stepsTitle') }), _jsxs("ol", { className: "text-muted-foreground list-decimal space-y-1 pl-4 text-xs text-pretty", children: [_jsx("li", { children: t.rich('step1', { link: (chunks) => _jsx(DashboardLink, { children: chunks }) }) }), _jsx("li", { children: t.raw('step2') }), _jsx("li", { children: t.raw('step3') }), _jsx("li", { children: t.raw('step4') })] }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t.raw('sameOrganization') })] }), _jsxs(FieldGroup, { className: "gap-5", children: [_jsxs(Field, { className: "space-y-2", children: [_jsx(FieldLabel, { htmlFor: "app-form-store", className: "text-foreground", children: t.raw('storeLabel') }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: "app-form-store", name: "store", autoComplete: "off", spellCheck: false, 
+                                        // 16px below `sm` so iOS Safari does not zoom the page on focus.
+                                        className: "font-mono max-sm:text-base", placeholder: EXAMPLE_STORE_HANDLE, value: store, disabled: submitting, onChange: (e) => setStore(e.target.value) }), _jsx(InputGroupAddon, { align: "inline-end", children: SHOPIFY_HOST_SUFFIX })] })] }), _jsxs(Field, { className: "space-y-2", children: [_jsx(FieldLabel, { htmlFor: "app-form-client-id", className: "text-foreground", children: t.raw('clientIdLabel') }), _jsx(Input, { id: "app-form-client-id", name: "client_id", autoComplete: "off", spellCheck: false, className: "font-mono max-sm:text-base", value: clientId, disabled: submitting, onChange: (e) => setClientId(e.target.value) })] }), _jsxs(Field, { className: "space-y-2", children: [_jsx(FieldLabel, { htmlFor: "app-form-client-secret", className: "text-foreground", children: t.raw('clientSecretLabel') }), _jsx(Input, { id: "app-form-client-secret", name: "client_secret", type: "password", autoComplete: "off", spellCheck: false, className: "font-mono max-sm:text-base", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: clientSecret, disabled: submitting, onChange: (e) => setClientSecret(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === 'Enter')
+                                        void submit();
+                                } })] })] }), _jsxs("div", { className: "space-y-3", children: [message ? (_jsx("p", { role: "alert", className: "text-destructive text-xs text-pretty", children: message })) : null, _jsxs(Button, { type: "button", className: "w-full", onClick: submit, disabled: submitting, children: [submitting ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, submitting ? t.raw('connecting') : t('submit', { app })] }), _jsx("p", { className: "text-muted-foreground text-center text-xs text-pretty", children: t.raw('secretNote') })] })] }));
+}

package/dist/markdown/setup-links/secret-intake-form.d.ts

@@ -1,3 +1,13 @@
+import type { OutcomeTone } from '../../internal/outcomes/outcome-types.js';
+import { type Icon } from '@phosphor-icons/react';
+import { type ReactElement } from 'react';
+/** Every phase that is not the form: tinted tile, title, one muted line. */
+export declare function StatusNotice({ icon: Glyph, tone, title, description, }: {
+    icon: Icon;
+    tone: OutcomeTone;
+    title: string;
+    description?: string;
+}): ReactElement;
 /**
  * Renders the fields an agent-minted secret link asks for, and submits the
  * values the human types. Shared by the public /secret-intake/[token] page and

package/dist/markdown/setup-links/secret-intake-form.js

@@ -14,7 +14,7 @@ import { Fragment, useEffect, useState } from 'react';
 import { classifySetupLinkError, describeLinkExpiry, describeWithheldSecrets, splitTextLinks, } from './util.js';
 import { setupLinkApiBase } from './api-base.js';
 /** Every phase that is not the form: tinted tile, title, one muted line. */
-function StatusNotice({ icon: Glyph, tone, title, description, }) {
+export function StatusNotice({ icon: Glyph, tone, title, description, }) {
     const tint = outcomeTint(tone);
     return (_jsxs("div", { role: "status", className: "flex flex-col items-center gap-3 py-8 text-center", children: [_jsx("span", { className: cn('flex size-9 items-center justify-center rounded-sm ring-1', tint.ring, tint.bg), children: _jsx(Glyph, { weight: "fill", className: cn('size-5', tint.fg) }) }), _jsxs("div", { className: "max-w-xs space-y-1", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: title }), description ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: description })) : null] })] }));
 }

package/dist/primitives/entity-avatar.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { Icon } from './kortix-icons.js';
 import { type Icon as IconType } from '@phosphor-icons/react';
 /**
@@ -79,6 +80,8 @@ export interface EntityAvatarProps {
     icon?: Icon | IconType;
     size?: EntityAvatarSize;
     className?: string;
+    /** Shows on hover, through `Hint`: who or what this avatar stands for. */
+    hint?: ReactNode;
 }
-export declare function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size, className, }: EntityAvatarProps): import("react").JSX.Element;
+export declare function EntityAvatar({ hint, label, glyph, emoji, icon: IconComponent, size, className, }: EntityAvatarProps): import("react").JSX.Element;
 export {};

package/dist/primitives/entity-avatar.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Hint } from './hint.js';
 import { emojiTint } from './emoji-tint.js';
 import { glyphFace } from './glyph-face.js';
 import { glyphForeground, glyphTint } from './glyph-tint.js';
@@ -48,12 +49,12 @@ function resolveGlyph(glyph) {
     const GlyphComponent = glyphFace(glyph.name);
     return GlyphComponent ? { GlyphComponent, color: glyph.color } : null;
 }
-export function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size = 'md', className, }) {
+export function EntityAvatar({ hint, label, glyph, emoji, icon: IconComponent, size = 'md', className, }) {
     const sizes = SIZE_MAP[size];
     const initial = (label?.trim()?.charAt(0) || '?').toUpperCase();
     const chalk = chalkColors(`${label?.trim()}` || initial);
     const resolvedGlyph = resolveGlyph(glyph);
-    return (_jsx("span", { "data-slot": "entity-avatar", 
+    const tile = (_jsx("span", { "data-slot": "entity-avatar", 
         // chalkColors() is an inline style, so it beats any class a caller
         // passes. A glyph or an emoji is already the colour — sitting either on
         // a saturated hash-derived pastel reads as noise, and in dark mode that
@@ -103,4 +104,5 @@ export function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size =
         // before the label that says the same thing. Same treatment as the
         // picker trigger in packages/ui/src/workspace/projects/modal/project-icon-field.tsx.
         _jsx("span", { "aria-hidden": true, className: "leading-none", children: emoji })) : IconComponent ? (_jsx(IconComponent, { className: sizes.icon })) : (initial) }));
+    return hint ? (_jsx(Hint, { side: "top", sideOffset: 6, alignOffset: 0, label: hint, children: tile })) : (tile);
 }

package/dist/primitives/settings-section-header.d.ts

@@ -7,7 +7,7 @@ import type { ReactNode } from 'react';
  */
 export declare function SettingsSectionHeader({ title, description, action, className, }: {
     title: string;
-    description?: string;
+    description?: ReactNode;
     action?: ReactNode;
     className?: string;
 }): import("react").JSX.Element;

package/dist/primitives/user-avatar.d.ts

@@ -42,6 +42,8 @@ export interface UserAvatarProps {
     className?: string;
     ring?: boolean;
     variant?: 'default' | 'primary';
+    /** Shows on hover, through `Hint`: usually the person's name or email. */
+    hint?: React.ReactNode;
 }
-export declare function UserAvatar({ email, name, avatarUrl, size, variant, className, ring, }: UserAvatarProps): React.JSX.Element;
+export declare function UserAvatar({ hint, email, name, avatarUrl, size, variant, className, ring, }: UserAvatarProps): React.JSX.Element;
 export {};

package/dist/primitives/user-avatar.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Hint } from './hint.js';
 import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
 import { cn } from '../lib/utils.js';
 import { AVATAR_INK, avatarFill } from '../_vendor/kortix-shared.js';
@@ -34,13 +35,14 @@ const SIZE_MAP = {
     lg: { box: 'size-10', text: 'text-sm', initials: 2 },
     xl: { box: 'size-14', text: 'text-base', initials: 2 },
 };
-export function UserAvatar({ email, name, avatarUrl, size = 'md', variant = 'default', className, ring = false, }) {
+export function UserAvatar({ hint, email, name, avatarUrl, size = 'md', variant = 'default', className, ring = false, }) {
     const sizes = SIZE_MAP[size] ?? SIZE_MAP.md;
     const initials = React.useMemo(() => initialsFromIdentity(name ?? undefined, email || '').slice(0, sizes.initials), [name, email, sizes.initials]);
     // Avatar v2: a solid fill keyed on the email, so a rename keeps the colour.
     const fill = avatarFill(email || name || '');
-    return (_jsxs(Avatar, { className: cn(sizes.box, 'shrink-0 overflow-hidden rounded-sm p-0 font-medium', ring && 'ring-background ring-2', 
+    const avatar = (_jsxs(Avatar, { className: cn(sizes.box, 'shrink-0 overflow-hidden rounded-sm p-0 font-medium', ring && 'ring-background ring-2', 
         // A photo keeps an edge on a light page: a 1px inset hairline over it.
         avatarUrl &&
             'after:ring-border after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:ring-1 after:ring-inset', variant === 'primary' && 'bg-primary text-primary-foreground', className), children: [avatarUrl ? _jsx(AvatarImage, { src: avatarUrl, alt: name || email }) : null, _jsx(AvatarFallback, { className: cn('rounded-sm font-medium', sizes.text), style: { backgroundColor: fill, color: AVATAR_INK }, children: initials || '?' })] }));
+    return hint ? (_jsx(Hint, { side: "top", sideOffset: 6, alignOffset: 0, label: hint, children: avatar })) : (avatar);
 }

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

@@ -145,7 +145,7 @@ export interface UiHostConfig {
     terminalEnabled: boolean;
     /**
      * The Terminal panel offers "Connect from your machine": the deployment's
-     * CLI installer (`<origin>/install`) and `kortix sessions connect`. A host
+     * CLI installer (`<origin>/install`) and `kortix sessions shell`. A host
      * that serves no installer and ships no Kortix CLI sets false, and the bar
      * is hidden. Default: true.
      */

package/dist/session/composer/agent-selector.d.ts

@@ -1,7 +1,7 @@
 import type { Agent } from '@kortix/sdk/react';
 /** The label `AgentSelector` shows for a selection (null = nothing picked). Other surfaces that name the agent reuse it. */
 export declare function agentDisplayLabel(agents: Agent[], selectedAgent: string | null): string;
-export declare function AgentSelector({ agents, selectedAgent, onSelect, disabled, triggerLabelClassName, unavailableHint, open: controlledOpen, onOpenChange, }: {
+export declare function AgentSelector({ agents, selectedAgent, onSelect, disabled, triggerLabelClassName, unavailableHint, open: controlledOpen, onOpenChange, appearance, }: {
     agents: Agent[];
     selectedAgent: string | null;
     onSelect: (agentName: string | null) => void;
@@ -17,4 +17,10 @@ export declare function AgentSelector({ agents, selectedAgent, onSelect, disable
     unavailableHint?: string | null;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * `chip` is the composer's borderless toolbar chip. `field` is a form field:
+     * the full-width `h-9` box every `SelectTrigger` in a form draws, so the
+     * picker reads as one more field instead of a chip inside a frame.
+     */
+    appearance?: 'chip' | 'field';
 }): import("react").JSX.Element;

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

@@ -7,8 +7,10 @@ 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 { TRIGGER_CARET_CLASS, triggerVariants } from '../../primitives/trigger-variants.js';
 import { capitalizeWords, isMetaAgentName, META_AGENT_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
-import { CaretDownIcon, CheckIcon, SparkleIcon } from '@phosphor-icons/react';
+import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react';
+import { AgentMark } from '../../internal/components/agent-mark.js';
 import { useEffect, useMemo, useState } from 'react';
 import { composerSelectableAgents } from './composer-agent-access.js';
 /**
@@ -36,7 +38,7 @@ export function agentDisplayLabel(agents, selectedAgent) {
         return 'Agent';
     return isMetaAgentName(name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(name);
 }
-export function AgentSelector({ agents, selectedAgent, onSelect, disabled = false, triggerLabelClassName, unavailableHint, open: controlledOpen, onOpenChange, }) {
+export function AgentSelector({ agents, selectedAgent, onSelect, disabled = false, triggerLabelClassName, unavailableHint, open: controlledOpen, onOpenChange, appearance = 'chip', }) {
     const tHardcodedUi = useTranslations('hardcodedUi');
     const t = useTranslations('threads');
     const [internalOpen, setInternalOpen] = useState(false);
@@ -84,7 +86,13 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
     // matching the resolver's own first-accessible pre-selection.
     const displayedName = resolveDisplayedAgentName(primaryAgents, selectedAgent);
     const displayName = displayedName ? label(displayedName) : agentDisplayLabel(offered, selectedAgent);
-    const metaSelected = isMetaAgentName(displayedName);
+    // The trigger leads with the agent's pixel mark, the same face it has on the
+    // Agents page and in every row below. Only for a real agent: a placeholder
+    // name such as a trigger's `default` would get a mark of its own, and that
+    // face would belong to no agent.
+    const triggerMark = displayedName && primaryAgents.some((agent) => agent.name === displayedName) ? (_jsx(AgentMark, { slug: displayedName })) : null;
+    const field = appearance === 'field';
+    const fieldTrigger = (caret, props) => (_jsxs("button", { type: "button", className: cn(triggerVariants(), 'h-9 w-full'), ...props, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [triggerMark, _jsx("span", { className: "truncate", children: displayName })] }), caret ? _jsx(CaretDownIcon, { className: cn(TRIGGER_CARET_CLASS, 'size-4') }) : null] }));
     /**
      * One agent: name, its type, its description, and a check when it is the
      * one in use.
@@ -111,10 +119,7 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
             className: cn('items-start gap-2 py-2', isSelected && 'bg-primary/[0.06]'), onSelect: () => {
                 onSelect(agent.name);
                 setOpen(false);
-            }, 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: 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 && (
+            }, children: [agent.description ? (_jsx(AgentMark, { slug: agent.name, size: 28, tile: 36 })) : (_jsx(AgentMark, { slug: agent.name, size: 14 })), _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 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));
@@ -135,7 +140,7 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
      * open — in exactly the state where its words matter.
      */
     if (primaryAgents.length === 0) {
-        const trigger = (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: true, "aria-label": unavailableHint ?? undefined, className: "text-muted-foreground rounded-lg hit-area-y-3", children: [_jsx("span", { className: cn('max-w-[100px] truncate', triggerLabelClassName), children: displayName }), _jsx(CaretDownIcon, { className: "size-3" })] }));
+        const trigger = field ? (fieldTrigger(false, { disabled: true, 'aria-label': unavailableHint ?? undefined })) : (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: true, "aria-label": unavailableHint ?? undefined, className: "text-muted-foreground rounded-lg hit-area-y-3", children: [_jsx("span", { className: cn('max-w-[100px] truncate', triggerLabelClassName), children: displayName }), _jsx(CaretDownIcon, { className: "size-3" })] }));
         if (!unavailableHint)
             return trigger;
         return (_jsx(Hint, { side: "top", label: unavailableHint, children: _jsx("span", { className: "inline-flex", children: trigger }) }));
@@ -148,7 +153,12 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
      * text every inert control on this rail wears, and the disabled attribute.
      */
     if (disabled) {
-        return (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: true, className: "text-muted-foreground rounded-lg hit-area-y-3", children: [metaSelected && _jsx(SparkleIcon, { className: "size-3.5 shrink-0", weight: "fill" }), _jsx("span", { className: cn('max-w-[100px] truncate', triggerLabelClassName), children: displayName })] }));
+        if (field)
+            return fieldTrigger(false, { disabled: true });
+        return (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: true, className: "text-muted-foreground rounded-lg hit-area-y-3", children: [triggerMark, _jsx("span", { className: cn('max-w-[100px] truncate', triggerLabelClassName), children: displayName })] }));
     }
-    return (_jsxs(CommandPopover, { open: open, onOpenChange: setOpen, children: [_jsx(CommandPopoverTrigger, { children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": t('selectAgent'), className: "text-foreground/70 rounded-lg hit-area-y-3", children: [metaSelected && _jsx(SparkleIcon, { className: "size-3.5 shrink-0", weight: "fill" }), _jsx("span", { className: cn('max-w-[100px] truncate', triggerLabelClassName), children: displayName }), _jsx(CaretDownIcon, { className: cn('size-3 transition-transform duration-200 ease-out', open && 'rotate-180') })] }) }), _jsxs(CommandPopoverContent, { side: "top", align: "start", sideOffset: 8, className: "w-[min(300px,calc(100vw-1.5rem))]", children: [_jsx("div", { className: showSearch ? undefined : 'sr-only', children: _jsx(CommandInput, { compact: true, placeholder: tHardcodedUi.raw('componentsSessionSessionChatInput.line231JsxAttrPlaceholderSearchAgents'), value: search, onValueChange: setSearch }) }), _jsxs(CommandList, { className: "max-h-[320px]", children: [filteredPrimary.length > 0 && (_jsxs(CommandGroup, { forceMount: true, children: [filteredMeta.map((agent) => renderAgentItem(agent, true)), filteredMeta.length > 0 && filteredProject.length > 0 && (_jsx(CommandSeparator, { className: "my-1" })), filteredProject.map((agent) => renderAgentItem(agent, false))] })), filteredPrimary.length === 0 && search.trim() && (_jsxs("div", { className: "text-muted-foreground/50 py-8 text-center text-xs", children: [tHardcodedUi.raw('componentsSessionSessionChatInput.line273JsxTextNoAgentsMatchLdquo'), search.trim(), tHardcodedUi.raw('componentsSessionSessionChatInput.line273JsxTextRdquo')] }))] })] })] }));
+    return (_jsxs(CommandPopover, { open: open, onOpenChange: setOpen, children: [_jsx(CommandPopoverTrigger, { children: field ? (fieldTrigger(true, { 'aria-label': t('selectAgent') })) : (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": t('selectAgent'), className: "text-foreground/70 rounded-lg hit-area-y-3", children: [triggerMark, _jsx("span", { className: cn('max-w-[100px] truncate', triggerLabelClassName), children: displayName }), _jsx(CaretDownIcon, { className: cn('size-3 transition-transform duration-200 ease-out', open && 'rotate-180') })] })) }), _jsxs(CommandPopoverContent, { side: "top", align: "start", sideOffset: 8, className: "w-[min(300px,calc(100vw-1.5rem))]", children: [_jsx("div", { className: showSearch ? undefined : 'sr-only', children: _jsx(CommandInput, { compact: true, placeholder: tHardcodedUi.raw('componentsSessionSessionChatInput.line231JsxAttrPlaceholderSearchAgents'), value: search, onValueChange: setSearch }) }), _jsxs(CommandList, { className: "max-h-[320px]", children: [filteredPrimary.length > 0 && (
+                            // `gap-px` between rows: a selected row and a hovered row next to it
+                            // otherwise draw one merged grey block.
+                            _jsxs(CommandGroup, { forceMount: true, className: "[&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col [&_[cmdk-group-items]]:gap-px", children: [filteredMeta.map((agent) => renderAgentItem(agent, true)), filteredMeta.length > 0 && filteredProject.length > 0 && (_jsx(CommandSeparator, { className: "my-1" })), filteredProject.map((agent) => renderAgentItem(agent, false))] })), filteredPrimary.length === 0 && search.trim() && (_jsxs("div", { className: "text-muted-foreground/50 py-8 text-center text-xs", children: [tHardcodedUi.raw('componentsSessionSessionChatInput.line273JsxTextNoAgentsMatchLdquo'), search.trim(), tHardcodedUi.raw('componentsSessionSessionChatInput.line273JsxTextRdquo')] }))] })] })] }));
 }

package/dist/session/composer/attachment-tile.d.ts

@@ -51,8 +51,6 @@ export declare function splitFilenameForTile(name: string): {
     head: string;
     tail: string;
 } | null;
-/** The one-string form, for places that cannot render two lines (tooltips, tests). */
-export declare function middleTruncateFilename(name: string, max?: number): string;
 /** A tile previews the head of the paste only: the clamp shows four lines, and the DOM need not hold 100 kB. */
 export declare const PASTE_PREVIEW_CHARS = 400;
 export interface AttachmentTileProps {

package/dist/session/composer/attachment-tile.js

@@ -58,14 +58,6 @@ export function splitFilenameForTile(name) {
         return null;
     return { head: name.slice(0, -NAME_TAIL_CHARS), tail: name.slice(-NAME_TAIL_CHARS) };
 }
-/** The one-string form, for places that cannot render two lines (tooltips, tests). */
-export function middleTruncateFilename(name, max = 22) {
-    if (name.length <= max)
-        return name;
-    const tail = Math.min(NAME_TAIL_CHARS, Math.floor((max - 1) / 2));
-    const head = max - 1 - tail;
-    return `${name.slice(0, head)}…${name.slice(-tail)}`;
-}
 /** A tile previews the head of the paste only: the clamp shows four lines, and the DOM need not hold 100 kB. */
 export const PASTE_PREVIEW_CHARS = 400;
 /**

package/dist/session/composer/clipboard-files.d.ts

@@ -2,7 +2,7 @@ export interface ClipboardItemLike {
     readonly kind: string;
     getAsFile(): File | null;
 }
-export interface ClipboardPayload {
+interface ClipboardPayload {
     readonly files: ArrayLike<File>;
     readonly items: ArrayLike<ClipboardItemLike>;
 }
@@ -14,3 +14,4 @@ export interface ClipboardPayload {
  * handle the text itself.
  */
 export declare function extractClipboardFiles(data: ClipboardPayload | null | undefined): File[];
+export {};

package/dist/session/composer/composer-draft-recovery.d.ts

@@ -1,5 +1,5 @@
 import type { JSONContent } from '@tiptap/core';
-import type { AttachedFile, TrackedMention } from './session-chat-input.js';
+import type { AttachedFile } from './session-chat-input.js';
 export declare function mergeFailedSubmissionText(current: string, submitted: string): string;
 /**
  * `mergeFailedSubmissionText`'s counterpart for the ProseMirror document
@@ -39,4 +39,3 @@ export declare function mergeFailedSubmissionText(current: string, submitted: st
  */
 export declare function mergeFailedSubmissionDocument(current: JSONContent, currentIsEmpty: boolean, submitted: JSONContent, submittedIsEmpty: boolean): JSONContent;
 export declare function mergeFailedSubmissionFiles(current: AttachedFile[], submitted: AttachedFile[]): AttachedFile[];
-export declare function mergeFailedSubmissionMentions(current: TrackedMention[], submitted: TrackedMention[]): TrackedMention[];

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

@@ -68,16 +68,3 @@ export function mergeFailedSubmissionFiles(current, submitted) {
         return true;
     });
 }
-function mentionKey(mention) {
-    return `${mention.kind}:${mention.value ?? ''}:${mention.label}`;
-}
-export function mergeFailedSubmissionMentions(current, submitted) {
-    const seen = new Set();
-    return [...submitted, ...current].filter((mention) => {
-        const key = mentionKey(mention);
-        if (seen.has(key))
-            return false;
-        seen.add(key);
-        return true;
-    });
-}

package/dist/session/composer/context-ring.d.ts

@@ -1,5 +1,5 @@
 import type { ContextReading } from './context-usage.js';
-export { getContextReading, getContextUsage } from './context-usage.js';
+export { getContextUsage } from './context-usage.js';
 export type { ContextReading, ContextUsage } from './context-usage.js';
 export declare function ContextRing({ percent, tone, className }: ContextReading & {
     className?: string;

package/dist/session/composer/context-ring.js

@@ -9,13 +9,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * the control it opens. Extracted here so neither surface re-derives the
  * ring's look on its own.
  *
- * `getContextReading` is the pure derivation (percent + tone) over the same
+ * `getContextUsage` is the pure derivation (percent + tone) over the same
  * exported helpers the hover card uses — pure so it has tests that can fail
  * (this repo's `bun test` has no DOM to assert the SVG itself).
  */
 import { ProgressRing } from '../../primitives/progress-ring.js';
 import { STATUS_TEXT } from '../../primitives/status.js';
-export { getContextReading, getContextUsage } from './context-usage.js';
+export { getContextUsage } from './context-usage.js';
 export function ContextRing({ percent, tone, className }) {
     return (_jsx(ProgressRing, { value: percent, className: className, progressClassName: STATUS_TEXT[tone] }));
 }

package/dist/session/composer/context-usage.d.ts

@@ -13,6 +13,11 @@ export interface ContextBreakdown {
  * compaction, whose usage is its summary reply's) with a positive token total.
  * `sessionLogThreadMetrics(...).context` picks the same message, but prices the
  * whole thread to do it.
+ *
+ * `reasoning` is a SUBSET of `output` (pi-ai `Usage`, and the same convention in
+ * OpenCode and the Kortix transcript): adding it again reads a session at 107%
+ * of a window the model has not filled, and hides the compaction that should
+ * have run. It stays in the breakdown for display, outside `total`.
  */
 export declare function getLastAssistantTokenBreakdown(messages: SessionLogMessage[] | undefined): ContextBreakdown;
 export declare function getLastAssistantTokenTotal(messages: SessionLogMessage[] | undefined): number;
@@ -22,7 +27,7 @@ export declare function contextTone(ratio: number): StatusTone;
 export declare function getContextLimit(models: FlatModel[] | undefined, selectedModel: {
     providerID: string;
     modelID: string;
-} | null | undefined): number;
+} | null | undefined): number | null;
 export declare function getSelectedModelName(models: FlatModel[] | undefined, selectedModel: {
     providerID: string;
     modelID: string;
@@ -34,7 +39,8 @@ export interface ContextReading {
 }
 export interface ContextUsage extends ContextReading {
     breakdown: ContextBreakdown;
-    limit: number;
+    /** The model's context window; null when no source knows it. */
+    limit: number | null;
     ratio: number;
     modelName: string | null;
 }
@@ -42,7 +48,3 @@ export declare function getContextUsage(messages: SessionLogMessage[] | undefine
     providerID: string;
     modelID: string;
 } | null): ContextUsage;
-export declare function getContextReading(messages: SessionLogMessage[] | undefined, models?: FlatModel[], selectedModel?: {
-    providerID: string;
-    modelID: string;
-} | null): ContextReading;

package/dist/session/composer/context-usage.js

@@ -10,6 +10,11 @@ const EMPTY_BREAKDOWN = {
  * compaction, whose usage is its summary reply's) with a positive token total.
  * `sessionLogThreadMetrics(...).context` picks the same message, but prices the
  * whole thread to do it.
+ *
+ * `reasoning` is a SUBSET of `output` (pi-ai `Usage`, and the same convention in
+ * OpenCode and the Kortix transcript): adding it again reads a session at 107%
+ * of a window the model has not filled, and hides the compaction that should
+ * have run. It stays in the breakdown for display, outside `total`.
  */
 export function getLastAssistantTokenBreakdown(messages) {
     if (!messages)
@@ -25,7 +30,7 @@ export function getLastAssistantTokenBreakdown(messages) {
         const output = t.output;
         const reasoning = t.reasoning ?? 0;
         const cache = t.cache_read + t.cache_write;
-        const total = input + output + reasoning + cache;
+        const total = input + output + cache;
         if (total > 0)
             return { input, output, reasoning, cache, total };
     }
@@ -49,7 +54,8 @@ export function getContextLimit(models, selectedModel) {
         if (model?.contextWindow && model.contextWindow > 0)
             return model.contextWindow;
     }
-    return 200000;
+    // Unknown: the meter shows what is used and no invented window.
+    return null;
 }
 export function getSelectedModelName(models, selectedModel) {
     if (!selectedModel || !models)
@@ -77,7 +83,7 @@ export function formatContextCount(tokens) {
 export function getContextUsage(messages, models, selectedModel) {
     const breakdown = getLastAssistantTokenBreakdown(messages);
     const limit = getContextLimit(models, selectedModel);
-    const ratio = breakdown.total > 0 ? Math.min(breakdown.total / limit, 1) : 0;
+    const ratio = limit && breakdown.total > 0 ? Math.min(breakdown.total / limit, 1) : 0;
     return {
         percent: Math.round(ratio * 100),
         tone: contextTone(ratio),
@@ -87,7 +93,3 @@ export function getContextUsage(messages, models, selectedModel) {
         modelName: getSelectedModelName(models, selectedModel),
     };
 }
-export function getContextReading(messages, models, selectedModel) {
-    const { percent, tone } = getContextUsage(messages, models, selectedModel);
-    return { percent, tone };
-}

package/dist/session/composer/inbox-row-claims.d.ts

@@ -30,7 +30,7 @@ import type { SessionPrompt } from '@kortix/sdk';
  * row that provably went out. Every refusal below is a case where the message
  * could belong to something else.
  */
-export interface FirstTurnClaim {
+interface FirstTurnClaim {
     /** The row that owns the message. */
     promptId: string;
     /** The transcript id it is on screen under (the re-minted one). */
@@ -61,4 +61,4 @@ export declare function claimFirstTurnRow(input: {
     /** `transcriptUserMessageIds` as built from ids alone. */
     claimedIds: ReadonlySet<string>;
 }): FirstTurnClaim | null;
-export declare function promptTextMatches(rowText: string, messageText: string): boolean;
+export {};

package/dist/session/composer/inbox-row-claims.js

@@ -49,7 +49,7 @@ const PROMPT_TEXT_PREVIEW_CHARS = 2000;
 function normalise(text) {
     return text.replace(/\s+/g, ' ').trim();
 }
-export function promptTextMatches(rowText, messageText) {
+function promptTextMatches(rowText, messageText) {
     const row = normalise(rowText);
     if (!row)
         return false;

package/dist/session/composer/queue-projection.d.ts

@@ -27,7 +27,7 @@ export declare function isFirstPromptRow(prompt: Pick<SessionPrompt, 'client_mes
  *   refuses removal.
  * - `failed`: delivery gave up; retry or remove.
  */
-export type QueueRowState = 'sending' | 'queued' | 'delivering' | 'failed';
+type QueueRowState = 'sending' | 'queued' | 'delivering' | 'failed';
 export interface QueueRow {
     /** The inbox `prompt_id`, or `draft:<clientMessageId>` before the POST. */
     id: string;
@@ -62,7 +62,7 @@ export interface QueueRow {
      *  `null` when the visible words are not one run, so no edit is offered. */
     editText: string | null;
 }
-export interface QueueProjection {
+interface QueueProjection {
     /** In delivery order: the server's rows first, then this tab's unsent drafts. */
     rows: QueueRow[];
     /** Rows the Stop hold is pausing — counted even when the row is on screen in
@@ -100,3 +100,4 @@ export declare function composerSendDelivery(placement: 'transcript' | 'composer
     placement: 'transcript' | 'composer';
     delivery?: SessionPromptDelivery;
 };
+export {};

package/dist/session/composer/queued-prompt-edit.d.ts

@@ -13,7 +13,7 @@ import type { QueueRow } from './queue-projection.js';
  * with its text parts only, so every file on the message was lost.
  */
 /** A queued message open in the composer. */
-export interface QueuedPromptEdit {
+interface QueuedPromptEdit {
     promptId: string;
     clientMessageId?: string;
     /** The row's whole text as the server holds it: file and mention markup included. */

package/dist/session/composer/reasoning-effort-selector.d.ts

@@ -5,7 +5,7 @@
  * own; duplicates (a runtime + catalog merge slip) collapse to one entry.
  */
 export declare function reasoningEffortChoices(variants: readonly string[] | undefined, canApply: boolean): string[];
-export interface ReasoningEffortSelectorProps {
+interface ReasoningEffortSelectorProps {
     /** The selected model's variant ids (`Object.keys(model.variants)`). */
     variants: readonly string[] | undefined;
     /** The session's current variant, or null = model default. */
@@ -34,3 +34,4 @@ export interface ReasoningEffortSelectorProps {
  * free, where the command palette would need them re-implemented.
  */
 export declare function ReasoningEffortSelector({ variants, selectedVariant, onVariantChange, open: openProp, onOpenChange, }: ReasoningEffortSelectorProps): import("react").JSX.Element | null;
+export {};