@kortix/ui 0.14.7 → 0.14.9

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

@@ -1,7 +1,19 @@
 import type { Agent } from '@kortix/sdk/react';
+/**
+ * A place's own agents, listed first in the picker under `label` (a
+ * channel's `#name`); every other agent follows under `restLabel`. Set by a
+ * channel's composer (`space-view.tsx`). No provider: one plain list.
+ */
+export declare const FeaturedAgentsContext: import("react").Context<{
+    label: string;
+    restLabel: string;
+    names: readonly string[];
+} | null>;
 /** 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, compact, appearance, }: {
+    /** The trigger shows the agent's tile alone, no caret; the name is its tooltip. */
+    compact?: boolean;
     agents: Agent[];
     selectedAgent: string | null;
     onSelect: (agentName: string | null) => void;
@@ -17,4 +29,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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
 import { CommandGroup, CommandInput, CommandItem, CommandList, CommandPopover, CommandPopoverContent, CommandPopoverTrigger, CommandSeparator, } from '../../primitives/command.js';
@@ -7,10 +7,18 @@ 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 { useEffect, useMemo, useState } from 'react';
+import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react';
+import { AgentMark } from '../../internal/components/agent-mark.js';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { composerSelectableAgents } from './composer-agent-access.js';
+/**
+ * A place's own agents, listed first in the picker under `label` (a
+ * channel's `#name`); every other agent follows under `restLabel`. Set by a
+ * channel's composer (`space-view.tsx`). No provider: one plain list.
+ */
+export const FeaturedAgentsContext = createContext(null);
 /**
  * Agents on screen before the popover grows a search field.
  *
@@ -36,7 +44,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, compact = false, appearance = 'chip', }) {
     const tHardcodedUi = useTranslations('hardcodedUi');
     const t = useTranslations('threads');
     const [internalOpen, setInternalOpen] = useState(false);
@@ -71,6 +79,12 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
     }, [primaryAgents, search, agentLabels]);
     const filteredMeta = useMemo(() => filteredPrimary.filter((a) => isMetaAgentName(a.name)), [filteredPrimary]);
     const filteredProject = useMemo(() => filteredPrimary.filter((a) => !isMetaAgentName(a.name)), [filteredPrimary]);
+    // The place's agents, in its order, then every other agent.
+    const featured = useContext(FeaturedAgentsContext);
+    const filteredFeatured = useMemo(() => (featured?.names ?? []).flatMap((name) => {
+        const agent = filteredPrimary.find((a) => a.name === name);
+        return agent ? [agent] : [];
+    }), [featured, filteredPrimary]);
     // Keyed off the FULL list, never the filtered one: deriving it from
     // `filteredPrimary` would make the field that is doing the filtering vanish
     // the moment a query narrowed the list past the threshold, taking the
@@ -84,7 +98,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 +131,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 +152,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 +165,20 @@ 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')] }))] })] })] }));
+    const trigger = (_jsx(CommandPopoverTrigger, { children: field ? (fieldTrigger(true, { 'aria-label': t('selectAgent') })) : (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": compact ? `${t('selectAgent')}: ${displayName}` : t('selectAgent'), className: cn('text-muted-foreground rounded-lg hit-area-y-3', compact && 'px-1.5'), children: compact ? (
+            // The mark alone: the name is the tooltip and the menu's checked row.
+            // A placeholder name has no mark, so it shows as text.
+            triggerMark ?? _jsx("span", { className: cn('max-w-[100px] truncate', triggerLabelClassName), children: displayName })) : (_jsxs(_Fragment, { children: [triggerMark, _jsx("span", { className: cn('max-w-[100px] truncate', triggerLabelClassName), children: displayName }), _jsx(CaretDownIcon, { className: cn('size-3 transition-transform duration-moderate ease-out', open && 'rotate-180') })] })) })) }));
+    return (_jsxs(CommandPopover, { open: open, onOpenChange: setOpen, children: [compact ? (_jsx(Hint, { side: "top", label: displayName, children: trigger })) : (trigger), _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: [filteredFeatured.length > 0 && featured ? (
+                            // Two groups, so each earns its heading: the place's agents, then the rest.
+                            _jsxs(_Fragment, { children: [_jsx(CommandGroup, { forceMount: true, heading: featured.label, className: "[&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col [&_[cmdk-group-items]]:gap-px", children: filteredFeatured.map((agent) => renderAgentItem(agent, isMetaAgentName(agent.name))) }), filteredPrimary.length > filteredFeatured.length && (_jsx(CommandGroup, { forceMount: true, heading: featured.restLabel, className: "[&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col [&_[cmdk-group-items]]:gap-px", children: filteredPrimary
+                                            .filter((agent) => !filteredFeatured.includes(agent))
+                                            .map((agent) => renderAgentItem(agent, isMetaAgentName(agent.name))) }))] })) : 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 py-8 text-center text-xs", children: [tHardcodedUi.raw('componentsSessionSessionChatInput.line273JsxTextNoAgentsMatchLdquo'), search.trim(), tHardcodedUi.raw('componentsSessionSessionChatInput.line273JsxTextRdquo')] }))] })] })] }));
 }

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

@@ -1,3 +1,4 @@
+import type { ProjectSpace } from '@kortix/sdk';
 import type { Agent } from '@kortix/sdk/react';
 /**
  * Which agent the composer will actually run, given the roster the server is
@@ -64,6 +65,20 @@ export interface ComposerAgentResolution {
  * empty picker, and must not read as "we have an agent to run".
  */
 export declare function composerSelectableAgents(agents: Agent[] | undefined): Agent[];
+/**
+ * The agents anyone who posts in this channel may run, granted or not (the
+ * server's `channelAgentNames`): the channel's agents,
+ * else the project default. None in a DM or with no space: its own rules apply.
+ */
+export declare function channelRunnableAgents(space: Pick<ProjectSpace, 'agents' | 'kind'> | null | undefined, projectDefault: string | null | undefined): string[];
+/**
+ * The roster plus a channel's agents: whoever may
+ * post in a channel runs its agents there without an agent grant, and the
+ * server applies the same rule (`agent-access.ts`, `channelRunnableAgents`).
+ * A name missing from the roster gets a plain primary entry. `undefined`
+ * (still loading) stays `undefined`.
+ */
+export declare function withChannelAgents(agents: Agent[] | undefined, channelAgents: readonly string[] | undefined): Agent[] | undefined;
 export declare function resolveComposerAgent(input: {
     /** The accessible roster. `undefined` means the query is still in flight. */
     agents: Agent[] | undefined;

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

@@ -48,6 +48,33 @@ export function composerSelectableAgents(agents) {
         return [];
     return agents.filter(isSelectableAgent);
 }
+/**
+ * The agents anyone who posts in this channel may run, granted or not (the
+ * server's `channelAgentNames`): the channel's agents,
+ * else the project default. None in a DM or with no space: its own rules apply.
+ */
+export function channelRunnableAgents(space, projectDefault) {
+    if (space?.kind !== 'channel')
+        return [];
+    const agents = space.agents ?? [];
+    return agents.length > 0 ? [...agents] : projectDefault ? [projectDefault] : [];
+}
+/**
+ * The roster plus a channel's agents: whoever may
+ * post in a channel runs its agents there without an agent grant, and the
+ * server applies the same rule (`agent-access.ts`, `channelRunnableAgents`).
+ * A name missing from the roster gets a plain primary entry. `undefined`
+ * (still loading) stays `undefined`.
+ */
+export function withChannelAgents(agents, channelAgents) {
+    if (!agents || !channelAgents?.length)
+        return agents;
+    const known = new Set(agents.map((a) => a.name));
+    const missing = channelAgents.filter((name) => !known.has(name));
+    if (missing.length === 0)
+        return agents;
+    return [...agents, ...missing.map((name) => ({ name, mode: 'primary' }))];
+}
 export function resolveComposerAgent(input) {
     const bound = input.boundAgent?.trim() || null;
     // A pending roster is not an empty one. Refusing the send here would disable

package/dist/session/composer/composer-chat-input.d.ts

@@ -24,7 +24,7 @@ export interface ComposerOptions {
  * The current selections are handed to `onSend` / `onCommand` as `options`, so
  * callers never need their own `useRuntimeLocal`.
  */
-export declare function ComposerChatInput({ onSend, onCommand, sessionId, projectId, isBusy, sessionWorking, runtimeReady, stopDisabled, isSending, disabled, autoFocus, placeholder, prefill, onPrefillApplied, aboveSlot, inputSlot, toolbarSlot, underbarPlacement, slashMenuPlacement, cardClassName, parentClassName, boundAgentName, projectSession, clearOnSend, onAgentSelectionChange, sandboxSlot, draftScope, draftActive, promptAttachments, submitLabel, onArrowUpAtStart, }: {
+export declare function ComposerChatInput({ onSend, onCommand, sessionId, projectId, isBusy, sessionWorking, runtimeReady, stopDisabled, isSending, disabled, autoFocus, placeholder, hint, prefill, onPrefillApplied, aboveSlot, inputSlot, toolbarSlot, underbarPlacement, slashMenuPlacement, cardClassName, parentClassName, boundAgentName, defaultAgentName, channelAgentNames, projectSession, clearOnSend, onAgentSelectionChange, sandboxSlot, draftScope, draftActive, promptAttachments, submitLabel, onArrowUpAtStart, }: {
     onSend: (text: string, files: AttachedFile[] | undefined, options: ComposerOptions, attachments?: AttachmentSubmission) => void | Promise<void>;
     onCommand?: (command: Command, args: string | undefined, options: ComposerOptions) => void;
     sessionId?: string;
@@ -49,13 +49,15 @@ export declare function ComposerChatInput({ onSend, onCommand, sessionId, projec
     clearOnSend?: ComposerSendReset;
     autoFocus?: boolean;
     placeholder?: string;
+    /** Static copy that replaces the rotating placeholder. See `SessionChatInputProps.hint`. */
+    hint?: string;
     prefill?: {
         text: string;
         id: number;
         files?: AttachedFile[];
         mode?: 'replace' | 'merge';
         options?: SessionPromptOverrides | null;
-        submit?: boolean;
+        submit?: boolean | 'when-ready';
     } | null;
     onPrefillApplied?: SessionChatInputProps['onPrefillApplied'];
     aboveSlot?: ReactNode;
@@ -69,6 +71,10 @@ export declare function ComposerChatInput({ onSend, onCommand, sessionId, projec
     parentClassName?: string;
     /** Immutable project-session agent. When set, sends are locked to this agent. */
     boundAgentName?: string | null;
+    /** The agent a new thread starts on here (a channel's default). Unset: the project's default. */
+    defaultAgentName?: string | null;
+    /** A channel's agents: anyone who posts here runs them, granted or not. */
+    channelAgentNames?: readonly string[];
     /** The project session row. Its model pin is the model this composer opens on. */
     projectSession?: {
         metadata?: Record<string, unknown> | null;

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

@@ -5,7 +5,7 @@ import { SessionOverridesComposer } from '../overrides/session-overrides-compose
 import { SessionChatInput, } from './session-chat-input.js';
 import { useProjectConfig, useRuntimeAgents, useRuntimeCommands, useRuntimeConfig, useRuntimeProviders, useSessionModelSelection } from '@kortix/sdk/react';
 import { appendMentionRefs } from '../../internal/lib/project-preamble.js';
-import { resolveComposerAgent } from './composer-agent-access.js';
+import { resolveComposerAgent, withChannelAgents } from './composer-agent-access.js';
 /**
  * The canonical "compose a first message" input: {@link SessionChatInput}
  * pre-wired with the OpenCode model / agent / variant / command selectors (the
@@ -15,18 +15,20 @@ import { resolveComposerAgent } from './composer-agent-access.js';
  * The current selections are handed to `onSend` / `onCommand` as `options`, so
  * callers never need their own `useRuntimeLocal`.
  */
-export function ComposerChatInput({ onSend, onCommand, sessionId, projectId, isBusy, sessionWorking, runtimeReady, stopDisabled, isSending, disabled, autoFocus, placeholder, prefill, onPrefillApplied, aboveSlot, inputSlot, toolbarSlot, underbarPlacement, slashMenuPlacement, cardClassName, parentClassName, boundAgentName, projectSession, clearOnSend, onAgentSelectionChange, sandboxSlot, draftScope, draftActive, promptAttachments, submitLabel, onArrowUpAtStart, }) {
-    const { data: agents } = useRuntimeAgents({ projectId });
+export function ComposerChatInput({ onSend, onCommand, sessionId, projectId, isBusy, sessionWorking, runtimeReady, stopDisabled, isSending, disabled, autoFocus, placeholder, hint, prefill, onPrefillApplied, aboveSlot, inputSlot, toolbarSlot, underbarPlacement, slashMenuPlacement, cardClassName, parentClassName, boundAgentName, defaultAgentName, channelAgentNames, projectSession, clearOnSend, onAgentSelectionChange, sandboxSlot, draftScope, draftActive, promptAttachments, submitLabel, onArrowUpAtStart, }) {
+    const { data: rosterAgents } = useRuntimeAgents({ projectId });
+    const agents = useMemo(() => withChannelAgents(rosterAgents, channelAgentNames), [rosterAgents, channelAgentNames]);
     const { data: providers, isLoading: providersLoading } = useRuntimeProviders();
     const { data: config } = useRuntimeConfig();
     const projectConfig = useProjectConfig(projectId);
+    const startAgent = defaultAgentName || (projectConfig?.default_agent ?? projectConfig?.open_code_default_agent);
     const local = useSessionModelSelection({
         agents,
         providers,
         config,
         sessionId,
         boundAgentName,
-        defaultAgentName: projectConfig?.default_agent ?? projectConfig?.open_code_default_agent,
+        defaultAgentName: startAgent,
         projectSession,
     });
     const setAgent = local.agent.set;
@@ -70,7 +72,7 @@ export function ComposerChatInput({ onSend, onCommand, sessionId, projectId, isB
     const agentResolution = resolveComposerAgent({
         agents,
         boundAgent: boundAgentName,
-        defaultAgent: projectConfig?.default_agent ?? projectConfig?.open_code_default_agent,
+        defaultAgent: startAgent,
         selectedAgent: local.agent.current?.name ?? null,
     });
     const selectedAgentName = agentResolution.selected;
@@ -141,5 +143,5 @@ export function ComposerChatInput({ onSend, onCommand, sessionId, projectId, isB
     , { 
         // A first message has no session send to write the `@` mention blocks
         // (`session-chat.tsx` `handleSend`), so they go into the text here.
-        onSend: (text, files, mentions, attachments, placement) => onSend(appendMentionRefs(text, mentions), files, { ...options(), placement }, attachments), promptAttachments: promptAttachments, onCommand: onCommand ? (cmd, args) => onCommand(cmd, args, options()) : undefined, clearOnSend: clearOnSend, isBusy: isBusy, sessionWorking: sessionWorking, runtimeReady: runtimeReady, stopDisabled: stopDisabled, isSending: isSending, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, prefill: deliveredPrefill, onPrefillApplied: onPrefillApplied, aboveSlot: aboveSlot, inputSlot: inputSlot, toolbarSlot: combinedToolbarSlot, underbarPlacement: underbarPlacement, slashMenuPlacement: slashMenuPlacement, cardClassName: cardClassName, parentClassName: parentClassName, sessionId: sessionId, projectId: projectId, providers: providers, agents: local.agent.list, selectedAgent: selectedAgentName, noAccessibleAgents: noAccessibleAgents, onAgentChange: (name) => local.agent.set(name ?? undefined), models: local.model.list, selectedModel: local.model.currentKey ?? null, onModelChange: (m) => local.model.set(m ?? undefined, { recent: true }), modelRequired: true, modelsLoading: providersLoading, variants: local.model.variant.list, selectedVariant: local.model.variant.current ?? null, onVariantChange: (v) => local.model.variant.set(v ?? undefined), commands: commands || [], commandsResolved: commands !== undefined, draftScope: draftScope, draftActive: draftActive, submitLabel: submitLabel, onArrowUpAtStart: onArrowUpAtStart }));
+        onSend: (text, files, mentions, attachments, placement) => onSend(appendMentionRefs(text, mentions), files, { ...options(), placement }, attachments), promptAttachments: promptAttachments, onCommand: onCommand ? (cmd, args) => onCommand(cmd, args, options()) : undefined, clearOnSend: clearOnSend, isBusy: isBusy, sessionWorking: sessionWorking, runtimeReady: runtimeReady, stopDisabled: stopDisabled, isSending: isSending, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, hint: hint, prefill: deliveredPrefill, onPrefillApplied: onPrefillApplied, aboveSlot: aboveSlot, inputSlot: inputSlot, toolbarSlot: combinedToolbarSlot, underbarPlacement: underbarPlacement, slashMenuPlacement: slashMenuPlacement, cardClassName: cardClassName, parentClassName: parentClassName, sessionId: sessionId, projectId: projectId, providers: providers, agents: local.agent.list, selectedAgent: selectedAgentName, noAccessibleAgents: noAccessibleAgents, onAgentChange: (name) => local.agent.set(name ?? undefined), models: local.model.list, selectedModel: local.model.currentKey ?? null, onModelChange: (m) => local.model.set(m ?? undefined, { recent: true }), modelRequired: true, modelsLoading: providersLoading, variants: local.model.variant.list, selectedVariant: local.model.variant.current ?? null, onVariantChange: (v) => local.model.variant.set(v ?? undefined), commands: commands || [], commandsResolved: commands !== undefined, draftScope: draftScope, draftActive: draftActive, submitLabel: submitLabel, onArrowUpAtStart: onArrowUpAtStart }));
 }

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

@@ -245,6 +245,22 @@ export interface ShouldSubmitPrefillInput {
  * submit would send the same message again, so each prefill id submits once.
  */
 export declare function shouldSubmitPrefill({ prefillId, prefillSubmit, submittedPrefillId, }: ShouldSubmitPrefillInput): boolean;
+export interface ShouldSubmitWhenReadyInput {
+    prefillId: number | undefined;
+    /** The id whose text is in the editor now, or null. */
+    landedPrefillId: number | null;
+    submittedPrefillId: number | null;
+    /** Send is refused right now: no model, no agent, a create in flight. */
+    submitDisabled: boolean;
+    /** The model catalog or entitlements are still loading. */
+    loading: boolean;
+}
+/**
+ * Whether a `submit: 'when-ready'` prefill sends now: its text has landed, a
+ * send is possible, and this id has not been sent before. The onboarding chat
+ * holds "Onboard me" this way until a model is connected.
+ */
+export declare function shouldSubmitWhenReady({ prefillId, landedPrefillId, submittedPrefillId, submitDisabled, loading, }: ShouldSubmitWhenReadyInput): boolean;
 /** One "Reply" on a transcript selection, waiting to join the quote list. */
 export interface QuoteRequest {
     id: number;

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

@@ -228,6 +228,18 @@ export function shouldApplyPrefill({ prefillId, prefillText, prefillFiles, prefi
 export function shouldSubmitPrefill({ prefillId, prefillSubmit, submittedPrefillId, }) {
     return prefillSubmit && prefillId !== undefined && prefillId !== submittedPrefillId;
 }
+/**
+ * Whether a `submit: 'when-ready'` prefill sends now: its text has landed, a
+ * send is possible, and this id has not been sent before. The onboarding chat
+ * holds "Onboard me" this way until a model is connected.
+ */
+export function shouldSubmitWhenReady({ prefillId, landedPrefillId, submittedPrefillId, submitDisabled, loading, }) {
+    return (prefillId !== undefined &&
+        landedPrefillId === prefillId &&
+        submittedPrefillId !== prefillId &&
+        !submitDisabled &&
+        !loading);
+}
 /**
  * The `quoteRequests` to append right now, in order.
  *

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

@@ -49,6 +49,8 @@ export interface ComposerUnderbarProps {
      * duplicated for it — same component, different packing.
      */
     variant?: 'row' | 'inline';
+    /** See `SessionChatInputProps.agentPickerCompact`. */
+    agentPickerCompact?: boolean;
     toolbarSlot?: React.ReactNode;
 }
-export declare function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMenuOpen, onAgentMenuOpenChange, onAgentChange, noAccessibleAgents, messages, models, selectedModel, onContextClick, variant, toolbarSlot, }: ComposerUnderbarProps): import("react").JSX.Element;
+export declare function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMenuOpen, onAgentMenuOpenChange, onAgentChange, noAccessibleAgents, messages, models, selectedModel, onContextClick, variant, agentPickerCompact, toolbarSlot, }: ComposerUnderbarProps): import("react").JSX.Element;

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

@@ -14,7 +14,7 @@ import { TokenProgress } from './token-progress.js';
 const NO_AGENT_SELECT = () => { };
 /** Stable identity so the empty roster doesn't remount the picker per render. */
 const EMPTY_AGENTS = [];
-export function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMenuOpen, onAgentMenuOpenChange, onAgentChange, noAccessibleAgents = false, messages, models, selectedModel, onContextClick, variant = 'row', toolbarSlot, }) {
+export function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMenuOpen, onAgentMenuOpenChange, onAgentChange, noAccessibleAgents = false, messages, models, selectedModel, onContextClick, variant = 'row', agentPickerCompact = false, toolbarSlot, }) {
     const t = useTranslations('threads');
     const { contextMeterEnabled } = useUiHostConfig();
     /*
@@ -50,9 +50,10 @@ export function ComposerUnderbar({ onAttachClick, agents, selectedAgent, agentMe
     // buttons stayed 32px on touch while the identical controls inside
     // `.kortix-composer-toolbar` were 40px.
     _jsxs("div", { className: inline
-            ? 'kortix-composer-underbar flex min-w-0 items-center gap-1'
+            ? // `shrink-0`: the model name truncates first (`ModelSelector`), never the agent.
+                'kortix-composer-underbar flex shrink-0 items-center gap-1'
             : 'kortix-composer-underbar flex items-center justify-between gap-2 px-px pt-1.5 pb-2', children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(Hint, { side: "top", label: t('attachFiles'), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-base", onClick: onAttachClick, "aria-label": t('attachFiles'), 
                             // `hit-area-3` — the ≈29px ghost chip clears the 44px mobile tap
                             // floor only with the shared pseudo-element extension.
-                            className: "text-muted-foreground hit-area-3 rounded-lg", children: _jsx(Paperclip, { className: "size-4 shrink-0" }) }) }), _jsx(AgentSelector, { agents: noAccessibleAgents ? EMPTY_AGENTS : agents, selectedAgent: selectedAgent, open: agentMenuOpen, onOpenChange: onAgentMenuOpenChange, onSelect: onAgentChange ?? NO_AGENT_SELECT, triggerLabelClassName: "max-w-[7rem]", unavailableHint: noAccessibleAgents ? NO_AGENT_ACCESS_MESSAGE : undefined })] }), _jsxs("div", { className: "flex items-center gap-1", children: [(inline && !messages) || !contextMeterEnabled ? null : (_jsx(TokenProgress, { messages: messages, models: models, selectedModel: selectedModel, onContextClick: onContextClick })), toolbarSlot] })] }));
+                            className: "text-muted-foreground hit-area-3 rounded-lg", children: _jsx(Paperclip, { className: "size-4 shrink-0" }) }) }), _jsx(AgentSelector, { compact: agentPickerCompact, agents: noAccessibleAgents ? EMPTY_AGENTS : agents, selectedAgent: selectedAgent, open: agentMenuOpen, onOpenChange: onAgentMenuOpenChange, onSelect: onAgentChange ?? NO_AGENT_SELECT, triggerLabelClassName: "max-w-[7rem]", unavailableHint: noAccessibleAgents ? NO_AGENT_ACCESS_MESSAGE : undefined })] }), _jsxs("div", { className: "flex items-center gap-1", children: [(inline && !messages) || !contextMeterEnabled ? null : (_jsx(TokenProgress, { messages: messages, models: models, selectedModel: selectedModel, onContextClick: onContextClick })), toolbarSlot] })] }));
 }

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

@@ -153,6 +153,11 @@ export interface SessionChatInputProps {
      * a spinner with no explanation, which was indistinguishable from broken.
      */
     notice?: string | null;
+    /**
+     * The notice reports a sleeping computer: a moon, not a spinner. Default:
+     * `notice` is `SESSION_NOTICE.idle`. A host that rewords the notice says it.
+     */
+    noticeAsleep?: boolean;
     /**
      * Renders a "Retry" action inline in the notice bar when set. Wired to
      * `requestRuntimeReconnect()` for a confirmed-unreachable runtime, or a
@@ -190,8 +195,11 @@ export interface SessionChatInputProps {
          * Enter. For one-click starters (the first chat's "Update memory"): the
          * send still carries the composer's agent and model and still hits every
          * refusal (no agent, no model, blocked images) a typed message would.
+         *
+         * `'when-ready'` holds the text until a send is possible, then submits once:
+         * the onboarding chat's "Onboard me" waits for a model to be connected.
          */
-        submit?: boolean;
+        submit?: boolean | 'when-ready';
     } | null;
     /**
      * Called with `prefill.id` the moment that prefill has actually landed in the
@@ -240,6 +248,12 @@ export interface SessionChatInputProps {
      * reads as a detached strip, so there the controls belong on the one bar.
      */
     underbarPlacement?: 'below' | 'inline';
+    /**
+     * The agent picker shows the agent's tile alone, its name in the tooltip
+     * and the menu. A narrow inline toolbar (a channel's thread panel) gives
+     * the model name the width instead.
+     */
+    agentPickerCompact?: boolean;
     /**
      * Where the `/` menu docks relative to the card. `'above'` (default) keeps
      * it in flow above the composer — on the session page the card sits at the

package/dist/session/composer/composer.js

@@ -25,7 +25,7 @@ import { ComposerCard } from './ComposerCard.js';
 import { handleBillingError } from '../../internal/lib/error-handler.js';
 import { attachedFileUploadId, attachmentsBlockSend, captureAttachmentSubmission, dispatchLatched, planAttachmentReplacement, refusedFilesToast, runComposerSend, heldTraySizes, splitComposerFiles, stageComposerFiles, takeNewBillingRefusals, } from './attachment-submission.js';
 import { draftWillRunCommand, planCommandAttachments, planUnresolvedCommandChip, readCommandChipLabel, } from './command-attachments.js';
-import { appendComposerQuote, classifyPaste, isUndoKey, popPasteUndo, extractReplyQuotes, nextPastedTextFileName, planDraftSubmission, planFailedSendRecovery, planPrefillMerge, planQuoteRequests, removeComposerQuote, resolveEditorPlaceholder, restoreComposerQuotes, shouldApplyPrefill, shouldSubmitPrefill, textToDocument, } from './composer-logic.js';
+import { appendComposerQuote, classifyPaste, isUndoKey, popPasteUndo, extractReplyQuotes, nextPastedTextFileName, planDraftSubmission, planFailedSendRecovery, planPrefillMerge, planQuoteRequests, removeComposerQuote, resolveEditorPlaceholder, restoreComposerQuotes, shouldApplyPrefill, shouldSubmitPrefill, shouldSubmitWhenReady, textToDocument, } from './composer-logic.js';
 import { getContextUsage } from './context-ring.js';
 import { useComposerFocus } from './hooks/use-composer-focus.js';
 import { useMenuRevalidation } from './hooks/use-file-search.js';
@@ -722,6 +722,8 @@ function ComposerImpl(props) {
     // through this ref, bound in an effect right after that declaration.
     const handleSubmitRef = useRef(() => undefined);
     const submittedPrefillIdRef = useRef(null);
+    // The prefill id that landed in the editor: `'when-ready'` submits only after it.
+    const [landedPrefillId, setLandedPrefillId] = useState(null);
     const onPrefillAppliedRef = useRef(onPrefillApplied);
     useEffect(() => {
         onPrefillAppliedRef.current = onPrefillApplied;
@@ -806,6 +808,7 @@ function ComposerImpl(props) {
         // re-run the effect whenever the caller re-created it, and a `merge` prefill
         // applied twice appends its text twice.
         onPrefillAppliedRef.current?.(prefillId);
+        setLandedPrefillId(prefillId);
         // Last, so the prefill is fully applied and reported before the submit
         // takes the draft out of the editor.
         if (shouldSubmitPrefill({
@@ -1361,6 +1364,21 @@ function ComposerImpl(props) {
     useEffect(() => {
         handleSubmitRef.current = () => void handleSubmit();
     }, [handleSubmit]);
+    const submitWhenReady = prefill?.submit === 'when-ready';
+    useEffect(() => {
+        if (!submitWhenReady ||
+            !shouldSubmitWhenReady({
+                prefillId,
+                landedPrefillId,
+                submittedPrefillId: submittedPrefillIdRef.current,
+                submitDisabled,
+                loading: modelsLoading || entitlementsPending,
+            })) {
+            return;
+        }
+        submittedPrefillIdRef.current = prefillId;
+        handleSubmitRef.current();
+    }, [submitWhenReady, prefillId, landedPrefillId, submitDisabled, modelsLoading, entitlementsPending]);
     // A question lock owns the editor: Up there is a caret move, never a take-back.
     const handleArrowUpAtStart = useCallback(() => (lockForQuestion ? false : (onArrowUpAtStart?.() ?? false)), [lockForQuestion, onArrowUpAtStart]);
     const editorPlaceholder = resolveEditorPlaceholder({

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/draft/composer-draft.d.ts

@@ -15,12 +15,16 @@ export type StoredUpload = PromptAttachment & {
  * What a persisted composer draft is keyed by.
  *
  * Project scope is the home hero composer — one draft per project, because
- * that composer has no session yet. Session scope is every in-thread composer.
- * Both ids are UUIDs, so the two families can never collide.
+ * that composer has no session yet. Space scope is a channel or DM composer.
+ * Session scope is every in-thread composer. Every id is a UUID, and each
+ * family has its own prefix, so they can never collide.
  */
 export type DraftScope = {
     kind: 'project';
     projectId: string;
+} | {
+    kind: 'space';
+    spaceId: string;
 } | {
     kind: 'session';
     sessionId: string;

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

@@ -9,7 +9,11 @@ export const DRAFT_ENVELOPE_VERSION = 1;
 export const MAX_DRAFT_BYTES = 131072;
 /** The `<kind>:<id>` half of the storage key. The family prefix is the store's. */
 export function draftScopeKey(scope) {
-    return scope.kind === 'project' ? `project:${scope.projectId}` : `session:${scope.sessionId}`;
+    if (scope.kind === 'project')
+        return `project:${scope.projectId}`;
+    if (scope.kind === 'space')
+        return `space:${scope.spaceId}`;
+    return `session:${scope.sessionId}`;
 }
 const isRemote = (file) => file.kind === 'remote';
 /**

package/dist/session/composer/reasoning-effort-selector.js

@@ -117,5 +117,5 @@ export function ReasoningEffortSelector({ variants, selectedVariant, onVariantCh
     // reads as Auto rather than an unlabeled value; the next explicit choice
     // replaces it.
     const current = selectedVariant && choices.includes(selectedVariant) ? selectedVariant : null;
-    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": t('thinkingEffort'), className: "text-foreground/70 gap-1.5 rounded-lg hit-area-y-3", children: [_jsx(EffortIcon, { value: current, className: "size-4 shrink-0" }), _jsx("span", { className: "max-w-[7rem] truncate", children: current ? label(current) : t('auto') }), _jsx(CaretDownIcon, { className: cn('size-3 opacity-50 transition-transform duration-200 ease-out', open && 'rotate-180') })] }) }), _jsx(DropdownMenuContent, { side: "top", align: "start", className: "min-w-[10rem]", children: _jsxs(DropdownMenuRadioGroup, { value: current ?? AUTO, onValueChange: onValueChange, children: [_jsxs(DropdownMenuRadioItem, { value: AUTO, children: [_jsx(EffortIcon, { value: null, className: "size-4 shrink-0" }), t('auto')] }), choices.map((value) => (_jsxs(DropdownMenuRadioItem, { value: value, children: [_jsx(EffortIcon, { value: value, className: "size-4 shrink-0" }), label(value)] }, value)))] }) })] }));
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": t('thinkingEffort'), className: "text-muted-foreground gap-1.5 rounded-lg hit-area-y-3", children: [_jsx(EffortIcon, { value: current, className: "size-4 shrink-0" }), _jsx("span", { className: "max-w-[7rem] truncate", children: current ? label(current) : t('auto') }), _jsx(CaretDownIcon, { className: cn('size-3 opacity-50 transition-transform duration-200 ease-out', open && 'rotate-180') })] }) }), _jsx(DropdownMenuContent, { side: "top", align: "start", className: "min-w-[10rem]", children: _jsxs(DropdownMenuRadioGroup, { value: current ?? AUTO, onValueChange: onValueChange, children: [_jsxs(DropdownMenuRadioItem, { value: AUTO, children: [_jsx(EffortIcon, { value: null, className: "size-4 shrink-0" }), t('auto')] }), choices.map((value) => (_jsxs(DropdownMenuRadioItem, { value: value, children: [_jsx(EffortIcon, { value: value, className: "size-4 shrink-0" }), label(value)] }, value)))] }) })] }));
 }

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;