@kortix/ui 0.14.7 → 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/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/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;

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 };
     }

package/dist/session/composer/token-progress.js

@@ -40,15 +40,15 @@ const HEADLINE_TIP_KEY = {
 };
 /**
  * Breakdown rows, in a fixed order chosen by size rather than by the order the
- * API happens to emit them: input dominates, cache is next, output and
- * reasoning are the tail. A fixed order matters more than a sorted one here —
- * rows must not reshuffle under the cursor as tokens stream in.
+ * API happens to emit them: input dominates, cache is next, output is the tail.
+ * A fixed order matters more than a sorted one here — rows must not reshuffle
+ * under the cursor as tokens stream in. `reasoning` is not a row: it is a subset
+ * of `output`, so counting it here would read context the model never sends.
  */
 const BREAKDOWN_ROWS = [
     { key: 'input', labelKey: 'labelInput' },
     { key: 'cache', labelKey: 'labelCached' },
     { key: 'output', labelKey: 'labelOutput' },
-    { key: 'reasoning', labelKey: 'labelReasoning' },
 ];
 /**
  * Exported for the `/` palette: the "Show context" row's detail pane renders

package/dist/session/header/export-transcript-modal.d.ts

@@ -9,8 +9,9 @@ interface TranscriptSessionHeader {
 }
 /**
  * The transcript's header: the runtime's session while the computer runs, else
- * the session row the page shows (asleep, stopped, failed). Null: nothing to
- * name the export after yet.
+ * the session row the page shows (asleep, stopped, failed). The start is the row's
+ * (`sessionStartedAt`): a pi box stamps its runtime session at boot. Null: nothing
+ * to name the export after yet.
  */
 export declare function transcriptSessionHeader(runtime: {
     id: string;

package/dist/session/header/export-transcript-modal.js

@@ -14,14 +14,17 @@ import { loadSessionExportMessages, useProjectSession, useRuntimeSession, useSes
 import { CheckIcon as Check, CopyIcon as Copy, } from '@phosphor-icons/react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Download } from '../../internal/icons/download.js';
+import { sessionStartedAt } from '../thread/session-context-metrics.js';
 /**
  * The transcript's header: the runtime's session while the computer runs, else
- * the session row the page shows (asleep, stopped, failed). Null: nothing to
- * name the export after yet.
+ * the session row the page shows (asleep, stopped, failed). The start is the row's
+ * (`sessionStartedAt`): a pi box stamps its runtime session at boot. Null: nothing
+ * to name the export after yet.
  */
 export function transcriptSessionHeader(runtime, row, sessionId) {
     if (runtime) {
-        return { id: runtime.id, title: runtime.title || runtime.slug || 'Untitled', time: runtime.time };
+        const created = sessionStartedAt(runtime, row) ?? runtime.time.created;
+        return { id: runtime.id, title: runtime.title || runtime.slug || 'Untitled', time: { ...runtime.time, created } };
     }
     if (!row)
         return null;

package/dist/session/models/model-selector.d.ts

@@ -56,6 +56,8 @@ export interface ModelSelectorProps {
     triggerLabelClassName?: string;
     /** `secondary` for a page-level control; the composer keeps `ghost`. */
     triggerVariant?: 'ghost' | 'secondary';
+    /** `field`: the full-width `h-9` form-field box, the same as `AgentSelector`'s. */
+    appearance?: 'chip' | 'field';
     projectId?: string;
     /**
      * Offer the member's own ChatGPT subscription (pooled provider secrets) at
@@ -83,4 +85,4 @@ export interface ModelSelectorProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export declare function ModelSelector({ models, selectedModel, onSelect, defaultControls, unsetLabel, disabled, modelsLoading, triggerLabelClassName, triggerVariant, offerProviderAccounts, open: openProp, onOpenChange, }: ModelSelectorProps): import("react").JSX.Element;
+export declare function ModelSelector({ models, selectedModel, onSelect, defaultControls, unsetLabel, disabled, modelsLoading, triggerLabelClassName, triggerVariant, appearance, offerProviderAccounts, open: openProp, onOpenChange, }: ModelSelectorProps): import("react").JSX.Element;

package/dist/session/models/model-selector.js

@@ -5,6 +5,7 @@ import { CommandGroup, CommandInput, CommandItem, CommandList, CommandPopover, C
 import Loading from '../../primitives/loading.js';
 import { MODEL_SELECTOR_PROVIDER_IDS, ProviderLogo } from '../../internal/lib/provider-branding.js';
 import { cn } from '../../lib/utils.js';
+import { TRIGGER_CARET_CLASS, triggerVariants } from '../../primitives/trigger-variants.js';
 import { useProviderModalStore } from '../../internal/stores/provider-modal-store.js';
 import { useFeatureFlag, useModelAccess, useModelStore, } from '@kortix/sdk/react';
 import { CheckIcon as Check, CaretDownIcon as ChevronDown, CaretRightIcon as CaretRight, CreditCardIcon as CreditCard, KeyIcon as KeyRound, PlusIcon as Plus, SlidersHorizontalIcon as SlidersHorizontal, StarIcon as Star, } from '@phosphor-icons/react';
@@ -136,7 +137,7 @@ function ModelRow({ model, groupProviderID, groupProviderName, isSelected, isAcc
 function GroupHeading({ children }) {
     return _jsx("span", { className: "text-muted-foreground font-medium tracking-wide", children: children });
 }
-export function ModelSelector({ models, selectedModel, onSelect, defaultControls, unsetLabel, disabled = false, modelsLoading = false, triggerLabelClassName, triggerVariant = 'ghost', offerProviderAccounts = false, open: openProp, onOpenChange, }) {
+export function ModelSelector({ models, selectedModel, onSelect, defaultControls, unsetLabel, disabled = false, modelsLoading = false, triggerLabelClassName, triggerVariant = 'ghost', appearance = 'chip', offerProviderAccounts = false, open: openProp, onOpenChange, }) {
     const tModel = useTranslations('modelSelector');
     const t = useTranslations('threads');
     // Controlled when `open` is supplied, uncontrolled otherwise — Radix's own
@@ -303,7 +304,7 @@ export function ModelSelector({ models, selectedModel, onSelect, defaultControls
         setOpen(false);
         openUpgrade();
     }, [openUpgrade, setOpen]);
-    return (_jsxs(_Fragment, { children: [connectionModal, projectId && chatGptPossible && ProviderAccountsModal && (_jsx(ProviderAccountsModal, { projectId: projectId, providerId: "codex", open: chatGptOpen, onOpenChange: setChatGptOpen })), _jsxs(CommandPopover, { open: disabled ? false : open, onOpenChange: (next) => !disabled && setOpen(next), children: [_jsx(CommandPopoverTrigger, { children: _jsxs(Button, { type: "button", variant: triggerVariant, size: "sm", className: cn('rounded-lg hit-area-y-3', triggerVariant === 'ghost' && 'text-muted-foreground'), children: [_jsx("span", { className: cn('max-w-30 truncate', triggerLabelClassName), children: displayName }), _jsx(ChevronDown, { className: cn('duration-moderate size-3 transition-transform ease-out', open && 'rotate-180') })] }) }), _jsx(CommandPopoverContent, { side: "top", align: "start", sideOffset: 8, className: "w-[min(300px,calc(100vw-1.5rem))]", children: _jsxs(_Fragment, { children: [_jsx(CommandInput, { compact: true, placeholder: tModel('search'), value: search, onValueChange: setSearch, rightElement: canManageModels && canConnectProvider ? (_jsxs("div", { className: "-mr-0.5 flex shrink-0 items-center gap-0.5", children: [_jsx(Hint, { label: tModel('connectProvider'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('addProvider'), onClick: () => handleOpenProviderModal('providers'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(Hint, { label: tModel('manageModels'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('manageModels'), onClick: () => handleOpenProviderModal('models'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(SlidersHorizontal, { className: "size-4" }) }) })] })) : undefined }), grouped.length > 1 && _jsx(CommandSeparator, { className: "bg-border/60" }), _jsx(CommandList, { className: "max-h-[380px]", children: modelsLoading || entitlementsPending ? (_jsx("div", { className: "flex min-h-32 items-center justify-center", role: "status", "aria-label": tModel('loading'), children: _jsx(Loading, { className: "text-muted-foreground size-4 shrink-0" }) })) : grouped.length > 0 ? (_jsxs(_Fragment, { children: [pinnedDefault && (_jsxs(_Fragment, { children: [_jsx(CommandGroup, { heading: _jsx(GroupHeading, { children: tModel('yourDefault') }), forceMount: true, children: _jsx(ModelRow, { model: pinnedDefault.model, groupProviderID: pinnedDefault.providerID, groupProviderName: pinnedDefault.providerName, isSelected: availableSelectedModel?.providerID === pinnedDefault.model.providerID &&
+    return (_jsxs(_Fragment, { children: [connectionModal, projectId && chatGptPossible && ProviderAccountsModal && (_jsx(ProviderAccountsModal, { projectId: projectId, providerId: "codex", open: chatGptOpen, onOpenChange: setChatGptOpen })), _jsxs(CommandPopover, { open: disabled ? false : open, onOpenChange: (next) => !disabled && setOpen(next), children: [_jsx(CommandPopoverTrigger, { children: appearance === 'field' ? (_jsxs("button", { type: "button", disabled: disabled, className: cn(triggerVariants(), 'h-9 w-full'), children: [_jsx("span", { className: "truncate", children: displayName }), disabled ? null : _jsx(ChevronDown, { className: cn(TRIGGER_CARET_CLASS, 'size-4') })] })) : (_jsxs(Button, { type: "button", variant: triggerVariant, size: "sm", className: cn('rounded-lg hit-area-y-3', triggerVariant === 'ghost' && 'text-muted-foreground'), children: [_jsx("span", { className: cn('max-w-30 truncate', triggerLabelClassName), children: displayName }), _jsx(ChevronDown, { className: cn('duration-moderate size-3 transition-transform ease-out', open && 'rotate-180') })] })) }), _jsx(CommandPopoverContent, { side: "top", align: "start", sideOffset: 8, className: "w-[min(300px,calc(100vw-1.5rem))]", children: _jsxs(_Fragment, { children: [_jsx(CommandInput, { compact: true, placeholder: tModel('search'), value: search, onValueChange: setSearch, rightElement: canManageModels && canConnectProvider ? (_jsxs("div", { className: "-mr-0.5 flex shrink-0 items-center gap-0.5", children: [_jsx(Hint, { label: tModel('connectProvider'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('addProvider'), onClick: () => handleOpenProviderModal('providers'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(Hint, { label: tModel('manageModels'), side: "top", className: "z-50", children: _jsx("button", { type: "button", "aria-label": tModel('manageModels'), onClick: () => handleOpenProviderModal('models'), className: "text-muted-foreground hover:text-foreground hover:bg-muted flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(SlidersHorizontal, { className: "size-4" }) }) })] })) : undefined }), grouped.length > 1 && _jsx(CommandSeparator, { className: "bg-border/60" }), _jsx(CommandList, { className: "max-h-[380px]", children: modelsLoading || entitlementsPending ? (_jsx("div", { className: "flex min-h-32 items-center justify-center", role: "status", "aria-label": tModel('loading'), children: _jsx(Loading, { className: "text-muted-foreground size-4 shrink-0" }) })) : grouped.length > 0 ? (_jsxs(_Fragment, { children: [pinnedDefault && (_jsxs(_Fragment, { children: [_jsx(CommandGroup, { heading: _jsx(GroupHeading, { children: tModel('yourDefault') }), forceMount: true, children: _jsx(ModelRow, { model: pinnedDefault.model, groupProviderID: pinnedDefault.providerID, groupProviderName: pinnedDefault.providerName, isSelected: availableSelectedModel?.providerID === pinnedDefault.model.providerID &&
                                                                 availableSelectedModel?.modelID === pinnedDefault.model.modelID, isAccountDefault: true, defaultControls: rowDefaultControls, onSelect: handleSelect, connectLabel: tPooled('connect'), scope: "pinned" }) }), _jsx(CommandSeparator, {})] })), sections.map((section, sectionIndex) => {
                                                 const selectedInSection = section.models.find((m) => availableSelectedModel?.providerID === m.providerID &&
                                                     availableSelectedModel?.modelID === m.modelID);

package/dist/session/panel/easy/plan-card.d.ts

@@ -10,11 +10,13 @@ import { type TodoItem } from '../../tool/shared/todo-helpers.js';
  * single row.
  *
  * Pure, so both branches are testable without mounting anything.
+ * @deprecated Renders an OpenCode-only tool or todo list in an OpenCode session (pi has none). OpenCode is sunset (2026-10-23): no new code; delete with OpenCode.
  */
 export declare function planPanelRows(todos: ReadonlyArray<TodoItem>): Array<{
     todo: TodoItem;
     key: string;
 }>;
+/** @deprecated Renders an OpenCode-only tool or todo list in an OpenCode session (pi has none). OpenCode is sunset (2026-10-23): no new code; delete with OpenCode. */
 export declare function PlanPanelCard({ sessionId }: {
     sessionId: string;
 }): import("react").JSX.Element | null;

package/dist/session/panel/easy/plan-card.js

@@ -64,6 +64,7 @@ function PlanProgress({ done, total, running }) {
  * single row.
  *
  * Pure, so both branches are testable without mounting anything.
+ * @deprecated Renders an OpenCode-only tool or todo list in an OpenCode session (pi has none). OpenCode is sunset (2026-10-23): no new code; delete with OpenCode.
  */
 export function planPanelRows(todos) {
     // Keyed first, filtered second — see `planListTodos`: keying first is what
@@ -72,6 +73,7 @@ export function planPanelRows(todos) {
     const listed = planListTodos(keyed);
     return listed.length > 0 ? listed : keyed;
 }
+/** @deprecated Renders an OpenCode-only tool or todo list in an OpenCode session (pi has none). OpenCode is sunset (2026-10-23): no new code; delete with OpenCode. */
 export function PlanPanelCard({ sessionId }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const { data } = useRuntimeSessionTodo(sessionId);

package/dist/session/thread/plan-surface.d.ts

@@ -5,5 +5,6 @@
  * `isActionPanelOpen` / `isSidePanelOpen` / `panelMode`: those made the plan
  * hop surfaces on every panel toggle, and they also re-rendered the whole
  * transcript each time one of them changed.
+ * @deprecated Renders an OpenCode-only tool or todo list in an OpenCode session (pi has none). OpenCode is sunset (2026-10-23): no new code; delete with OpenCode.
  */
 export declare function usePlanInChat(): boolean;

package/dist/session/thread/plan-surface.js

@@ -23,6 +23,7 @@ import { planBelongsToChat } from '../turn/plan-anchor.js';
  * `isActionPanelOpen` / `isSidePanelOpen` / `panelMode`: those made the plan
  * hop surfaces on every panel toggle, and they also re-rendered the whole
  * transcript each time one of them changed.
+ * @deprecated Renders an OpenCode-only tool or todo list in an OpenCode session (pi has none). OpenCode is sunset (2026-10-23): no new code; delete with OpenCode.
  */
 export function usePlanInChat() {
     return planBelongsToChat({ isMobile: useIsMobile() });

package/dist/session/thread/session-chat.js

@@ -3435,7 +3435,7 @@ export function SessionChat({ sessionId, projectSessionId, sessionState, project
                     : welcomeWallpaper, !hideHeader && (_jsx(SessionSiteHeader, { sessionId: sessionId, sessionTitle: session?.title || 'Untitled', leadingAction: headerLeadingAction, parent: parentCrumb })), _jsx(SessionContextModal, { open: contextModalOpen, onOpenChange: setContextModalOpen, 
                     // A chat with no `useSession` source: the raw explorer lists the
                     // rows `useSessionSync` read for it.
-                    detachedRows: sessionState ? undefined : hookMessages, source: sessionState ?? DETACHED_SESSION_MESSAGES, session: session, providers: providers, allSessions: allSessions, servedModel: sessionServedModel, billedCost: sessionBilledCost(modelUsage) }), _jsx(CompactModal, { sessionId: sessionId, open: compactModalOpen, onOpenChange: setCompactModalOpen }), _jsx(ChangeRequestDetailDialog, { crId: openCrId, onClose: () => setOpenCrId(null), onOpenChangeRequest: setOpenCrId }), _jsxs(SessionBodyRow, { actionPanel: !hideHeader && !readOnly, children: [isNotFound ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-3 px-6 text-center", children: [_jsx("div", { className: "text-muted-foreground text-sm", children: tHardcodedUi.raw('componentsSessionSessionChat.line5821JsxTextThisSessionIsNotAccessibleRightNow') }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsx(Link, { href: "/", prefetch: true, onClick: () => {
+                    detachedRows: sessionState ? undefined : hookMessages, source: sessionState ?? DETACHED_SESSION_MESSAGES, session: session, sessionRow: projectSessionRow, providers: providers, allSessions: allSessions, servedModel: sessionServedModel, billedCost: sessionBilledCost(modelUsage) }), _jsx(CompactModal, { sessionId: sessionId, open: compactModalOpen, onOpenChange: setCompactModalOpen }), _jsx(ChangeRequestDetailDialog, { crId: openCrId, onClose: () => setOpenCrId(null), onOpenChangeRequest: setOpenCrId }), _jsxs(SessionBodyRow, { actionPanel: !hideHeader && !readOnly, children: [isNotFound ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-3 px-6 text-center", children: [_jsx("div", { className: "text-muted-foreground text-sm", children: tHardcodedUi.raw('componentsSessionSessionChat.line5821JsxTextThisSessionIsNotAccessibleRightNow') }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsx(Link, { href: "/", prefetch: true, onClick: () => {
                                             try {
                                                 if (sessionId)
                                                     useTabStore.getState().closeTab?.(sessionId);
@@ -3546,7 +3546,7 @@ export function SessionChat({ sessionId, projectSessionId, sessionState, project
                                                                                         pendingTurnIds.has(turn.id) &&
                                                                                         pendingTurnIds.has(turns[turnIndex - 1].id)
                                                                                         ? 'mt-3'
-                                                                                        : 'mt-12', turn: turn, author: turnAuthor, showAuthor: showAuthorName(turnAuthor, groupChat, viewerId), stoppedBy: stoppedByName(messageAuthors, turn.id, viewerId), servedModel: servedModelOfTurn(modelUsage, turn.id, turns[turnIndex - 1]?.id), turnOutcome: turnOutcome, isLast: turn.id === lastUserMessageId, ownsPlan: turn.id === planAnchorId, sessionId: sessionId, sessionStatus: sessionStatus, permissions: pendingPermissions, questions: pendingQuestions, agentNames: agentNames, isFirstTurn: turnIndex === 0, 
+                                                                                        : 'mt-12', turn: turn, author: turnAuthor, showAuthor: showAuthorName(turnAuthor, groupChat, viewerId), stoppedBy: stoppedByName(messageAuthors, turn.id, viewerId), servedModel: servedModelOfTurn(modelUsage, turn.id, turns[turnIndex - 1]?.id), turnOutcome: turnOutcome, isLast: turn.id === lastUserMessageId, ownsPlan: turn.id === planAnchorId, sessionId: sessionId, projectId: projectId, projectSessionId: projectSessionId, sessionStatus: sessionStatus, permissions: pendingPermissions, questions: pendingQuestions, agentNames: agentNames, isFirstTurn: turnIndex === 0, 
                                                                         // Handed over only once the stand-in has stepped
                                                                         // aside — while it is up it draws these itself.
                                                                         pendingText: turnIndex === 0 ? firstTurnHandover?.text : undefined, pendingAttachments: sentAttachmentsForTurn({

package/dist/session/thread/session-context-metrics.d.ts

@@ -21,4 +21,19 @@ interface Metrics {
 }
 /** Pure token math for the modal — exported for characterization tests. */
 export declare function getSessionContextMetrics(thread: SessionLogThread | null, providers: ProviderListResponse | undefined, pricingLookup: ModelPricingLookup): Metrics;
+/**
+ * When the session started. The session row's creation, when the runtime is the row's root (or
+ * not up): a pi box stamps its runtime session at boot, so a woken session's runtime time is after
+ * its last reply. A sub-agent's runtime (not the row's root) keeps its own time.
+ */
+export declare function sessionStartedAt(runtime: {
+    id: string;
+    time: {
+        created: number;
+    };
+} | undefined, row: {
+    created_at: string;
+    runtime_session_id?: string | null;
+    opencode_session_id?: string | null;
+} | null | undefined): number | undefined;
 export {};

package/dist/session/thread/session-context-metrics.js

@@ -16,7 +16,7 @@ export function getSessionContextMetrics(thread, providers, pricingLookup) {
         ? model.provider
         : undefined;
     const limit = model?.limit?.context;
-    const total = u.input + u.output + (u.reasoning ?? 0) + u.cache_read + u.cache_write;
+    const total = u.input + u.output + u.cache_read + u.cache_write; // reasoning is a subset of output
     // The gateway registers every model under the single synthetic `kortix`
     // opencode provider, so `provider.name` is always "Kortix" — even for a
     // BYOK Anthropic/Bedrock/OpenAI model. The gateway separately serves the
@@ -42,3 +42,12 @@ export function getSessionContextMetrics(thread, providers, pricingLookup) {
         },
     };
 }
+/**
+ * When the session started. The session row's creation, when the runtime is the row's root (or
+ * not up): a pi box stamps its runtime session at boot, so a woken session's runtime time is after
+ * its last reply. A sub-agent's runtime (not the row's root) keeps its own time.
+ */
+export function sessionStartedAt(runtime, row) {
+    const own = row && (!runtime || (row.runtime_session_id ?? row.opencode_session_id) === runtime.id);
+    return own ? Date.parse(row.created_at) : runtime?.time.created;
+}