@kortix/ui 0.14.8 → 0.14.9

package/dist/primitives/mermaid-renderer.js

@@ -11,7 +11,7 @@ import { cn } from '../lib/utils.js';
 import { CheckIcon as Check, ArrowsOutSimpleIcon as Maximize2, ArrowCounterClockwiseIcon as RotateCcw, XIcon as X, MagnifyingGlassPlusIcon as ZoomIn, MagnifyingGlassMinusIcon as ZoomOut, } from '@phosphor-icons/react';
 import { Copy } from '../icons/copy.js';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-export const MermaidRenderer = React.memo(({ chart, className, enableFullscreen = true, isStreaming = false }) => {
+export const MermaidRenderer = React.memo(({ chart, className, enableFullscreen = true, isStreaming = false, actions }) => {
     const containerRef = useRef(null);
     const [error, setError] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -234,26 +234,32 @@ export const MermaidRenderer = React.memo(({ chart, className, enableFullscreen
             display: block !important;
             margin: 0 auto !important;
           }
-          .mermaid-container .node {
-            fill: hsl(var(--card)) !important;
-            stroke: hsl(var(--foreground)) !important;
+          .mermaid-container .node :is(rect, polygon, circle, ellipse, path) {
+            fill: var(--card) !important;
+            stroke: var(--border) !important;
           }
-          .mermaid-container .cluster {
-            fill: hsl(var(--muted)) !important;
-            stroke: hsl(var(--foreground)) !important;
+          .mermaid-container .cluster rect {
+            fill: var(--muted) !important;
+            stroke: var(--border) !important;
           }
-          .mermaid-container text {
-            fill: hsl(var(--foreground)) !important;
-            font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif !important;
+          .mermaid-container :is(text, .nodeLabel, .edgeLabel, .label) {
+            fill: var(--foreground) !important;
+            color: var(--foreground) !important;
+            font-family: var(--font-sans) !important;
           }
-          .mermaid-container .edgePath {
-            stroke: hsl(var(--foreground)) !important;
+          .mermaid-container :is(.edgePath path, .flowchart-link) {
+            stroke: var(--muted-foreground) !important;
           }
-          .mermaid-container .marker {
-            fill: hsl(var(--foreground)) !important;
+          .mermaid-container :is(.marker, .arrowheadPath, .arrowMarkerPath) {
+            fill: var(--muted-foreground) !important;
+            stroke: var(--muted-foreground) !important;
+          }
+          .mermaid-container .edgeLabel :is(rect, p) {
+            background-color: var(--background) !important;
+            fill: var(--background) !important;
           }
         `,
-                } }), _jsxs("div", { className: cn('mermaid-container group bg-background relative my-4 w-full overflow-auto rounded-lg border', className), style: { minHeight: '200px' }, children: [_jsx("div", { className: "absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: _jsxs(ButtonGroup, { children: [enableFullscreen && (_jsx(Hint, { label: "Fullscreen", side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleFullscreenOpen, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Open diagram fullscreen", children: _jsx(Maximize2, { className: "size-3.5" }) }) })), _jsx(Hint, { label: copied ? 'Copied' : 'Copy source', side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleCopySource, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Copy diagram source", children: copied ? (_jsx(Check, { className: "text-kortix-green size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }) })] }) }), _jsx("div", { ref: containerRef, dangerouslySetInnerHTML: { __html: renderedContent } })] }), _jsx(Modal, { open: isFullscreenOpen, onOpenChange: setIsFullscreenOpen, children: _jsxs(ModalContent, { variant: "base", showCloseButton: false, className: "flex h-[90vh] flex-col space-y-0 overflow-hidden lg:h-[90vh] lg:max-w-7xl", closeButtonChildren: _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: "Zoom in", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomIn, "aria-label": "Zoom in", children: _jsx(ZoomIn, { className: "size-4" }) }) }), _jsx(Hint, { label: "Zoom out", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomOut, "aria-label": "Zoom out", children: _jsx(ZoomOut, { className: "size-4" }) }) }), _jsx(Hint, { label: "Rotate", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleRotate, "aria-label": "Rotate diagram", children: _jsx(RotateCcw, { className: "size-4" }) }) }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Close", children: _jsx(X, { className: "size-4" }) }) })] }), children: [_jsx(ModalTitle, { className: "sr-only", children: "Diagram" }), _jsx(ModalBody, { className: "relative min-h-0 flex-1 space-y-0 p-0", children: _jsx("div", { ref: canvasRef, className: "bg-muted/10 absolute inset-0 touch-none overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { cursor: isDragging ? 'grabbing' : 'grab' }, children: renderedContent ? (_jsx("div", { className: "mermaid-container absolute inset-0 flex items-center justify-center", style: {
+                } }), _jsxs("div", { className: cn('mermaid-container group bg-background relative my-4 w-full overflow-auto rounded-lg border', className), children: [_jsx("div", { className: "absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: _jsxs(ButtonGroup, { children: [actions, enableFullscreen && (_jsx(Hint, { label: "Fullscreen", side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleFullscreenOpen, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Open diagram fullscreen", children: _jsx(Maximize2, { className: "size-3.5" }) }) })), _jsx(Hint, { label: copied ? 'Copied' : 'Copy source', side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleCopySource, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Copy diagram source", children: copied ? (_jsx(Check, { className: "text-kortix-green size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }) })] }) }), _jsx("div", { ref: containerRef, dangerouslySetInnerHTML: { __html: renderedContent } })] }), _jsx(Modal, { open: isFullscreenOpen, onOpenChange: setIsFullscreenOpen, children: _jsxs(ModalContent, { variant: "base", showCloseButton: false, className: "flex h-[90vh] flex-col space-y-0 overflow-hidden lg:h-[90vh] lg:max-w-7xl", closeButtonChildren: _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: "Zoom in", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomIn, "aria-label": "Zoom in", children: _jsx(ZoomIn, { className: "size-4" }) }) }), _jsx(Hint, { label: "Zoom out", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomOut, "aria-label": "Zoom out", children: _jsx(ZoomOut, { className: "size-4" }) }) }), _jsx(Hint, { label: "Rotate", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleRotate, "aria-label": "Rotate diagram", children: _jsx(RotateCcw, { className: "size-4" }) }) }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Close", children: _jsx(X, { className: "size-4" }) }) })] }), children: [_jsx(ModalTitle, { className: "sr-only", children: "Diagram" }), _jsx(ModalBody, { className: "relative min-h-0 flex-1 space-y-0 p-0", children: _jsx("div", { ref: canvasRef, className: "bg-muted/10 absolute inset-0 touch-none overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { cursor: isDragging ? 'grabbing' : 'grab' }, children: renderedContent ? (_jsx("div", { className: "mermaid-container absolute inset-0 flex items-center justify-center", style: {
                                         transform: `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoom}) rotate(${rotation}deg)`,
                                         transformOrigin: 'center center',
                                         transition: isDragging ? 'none' : 'transform 0.15s ease-out',

package/dist/primitives/resizable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import { cn } from '../lib/utils.js';
+import { RESIZE_SEAM_CLASS } from './resize-seam.js';
 function ResizablePanelGroup({ className, ...props }) {
     return (_jsx(ResizablePrimitive.PanelGroup, { "data-slot": "resizable-panel-group", className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
 }
@@ -11,6 +12,10 @@ const ResizablePanel = React.forwardRef((props, ref) => {
 });
 ResizablePanel.displayName = 'ResizablePanel';
 function ResizableHandle({ withHandle, className, ...props }) {
-    return (_jsx(ResizablePrimitive.PanelResizeHandle, { "data-slot": "resizable-handle", className: cn('focus-visible:ring-ring relative flex cursor-col-resize items-center justify-center focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize [&[data-panel-group-direction=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "group z-10 flex cursor-col-resize items-center justify-center", children: _jsx("span", { className: "bg-muted-foreground/40 group-hover:bg-muted-foreground/70 h-[15px] w-[3px] rounded-full transition-colors" }) })) }));
+    return (_jsx(ResizablePrimitive.PanelResizeHandle, { "data-slot": "resizable-handle", className: cn('relative flex cursor-col-resize items-center justify-center focus-visible:outline-hidden data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize [&[data-panel-group-direction=vertical]>div]:rotate-90', 
+        // The sidebar rail's seam on hover, keyboard focus and drag: one look
+        // for every drag-to-resize edge. Horizontal groups only; a vertical
+        // handle keeps its plain row cursor.
+        RESIZE_SEAM_CLASS, 'data-[panel-group-direction=vertical]:before:hidden', 'data-[resize-handle-state=hover]:before:opacity-100 data-[resize-handle-state=drag]:before:opacity-100 focus-visible:before:opacity-100', className), ...props, children: withHandle && (_jsx("div", { className: "group z-10 flex cursor-col-resize items-center justify-center", children: _jsx("span", { className: "bg-muted-foreground/40 group-hover:bg-muted-foreground/70 h-[15px] w-[3px] rounded-full transition-colors" }) })) }));
 }
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/primitives/resize-seam.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The resize seam: a 2px `kortix-base` line on a drag edge, tapered at both
+ * ends and faded top and bottom, so it reads as a seam, not a border. Drawn by
+ * `before:`, so a caller keeps `after:` for its hit strip. Hidden at rest; the
+ * caller reveals it (`before:opacity-100`) on hover, focus and drag. Opacity
+ * only: a width or position transition would animate layout on hover.
+ *
+ * The sidebar rail (`sidebar-panel.tsx`) and every `ResizableHandle` draw it,
+ * so every drag-to-resize edge in the app looks the same.
+ */
+export declare const RESIZE_SEAM_CLASS: string;

package/dist/primitives/resize-seam.js

@@ -0,0 +1,12 @@
+import { cn } from '../lib/utils.js';
+/**
+ * The resize seam: a 2px `kortix-base` line on a drag edge, tapered at both
+ * ends and faded top and bottom, so it reads as a seam, not a border. Drawn by
+ * `before:`, so a caller keeps `after:` for its hit strip. Hidden at rest; the
+ * caller reveals it (`before:opacity-100`) on hover, focus and drag. Opacity
+ * only: a width or position transition would animate layout on hover.
+ *
+ * The sidebar rail (`sidebar-panel.tsx`) and every `ResizableHandle` draw it,
+ * so every drag-to-resize edge in the app looks the same.
+ */
+export const RESIZE_SEAM_CLASS = cn('before:pointer-events-none before:absolute before:inset-y-0 before:left-1/2 before:z-10 before:w-[2px] before:-translate-x-1/2 before:opacity-0', 'before:bg-kortix-base before:transition-opacity before:duration-fast before:ease-out', 'before:[clip-path:polygon(calc(50%-0.0625rem)_0%,calc(50%+0.0625rem)_0%,calc(50%+0.125rem)_50%,calc(50%+0.0625rem)_100%,calc(50%-0.0625rem)_100%,calc(50%-0.125rem)_50%)]', 'before:[mask-image:linear-gradient(to_bottom,transparent,black_15%,black_85%,transparent)]', 'motion-reduce:before:transition-none');

package/dist/primitives/sidebar-panel.js

@@ -6,6 +6,7 @@ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from
 import { SIDEBAR_RESIZE_STEP_COARSE_PX, SIDEBAR_RESIZE_STEP_PX, SIDEBAR_UNDOCK_MS, SIDEBAR_WIDTH_MOBILE, useSidebar, } from './sidebar-context.js';
 import { SIDEBAR_MAX_WIDTH_PX, SIDEBAR_MIN_WIDTH_PX, SIDEBAR_WIDTH_PX, clampSidebarWidth, } from './sidebar-width.js';
 import { cn } from '../lib/utils.js';
+import { RESIZE_SEAM_CLASS } from './resize-seam.js';
 import { SidebarGlyph as PanelLeftIcon } from '../icons/sidebar-toggle.js';
 function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }) {
     const { isMobile, state, openMobile, setOpenMobile, peek, peekEnter, peekLeave, instantToggle } = useSidebar();
@@ -251,13 +252,9 @@ function SidebarRail({ className, ...props }) {
                 setWidth(SIDEBAR_WIDTH_PX);
             }
         }, className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-col-resize touch-none outline-none select-none group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', 
-        // The hairline is a pseudo-element so the 16px hit area stays 16px
-        // (well over the 8px a pointer needs) while the visible line stays 2px.
-        // Opacity only — a width/position transition here would animate layout
-        // on hover, on an element that sits over the content pane.
-        'after:pointer-events-none after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] after:-translate-x-1/2 after:opacity-0', 'after:bg-kortix-base after:transition-opacity after:duration-fast after:ease-out', 'hover:after:opacity-100 focus-visible:after:opacity-100 data-[resizing]:after:opacity-100', 
-        // Tapered top and bottom so the line reads as a seam, not a border.
-        'after:[clip-path:polygon(calc(50%-0.0625rem)_0%,calc(50%+0.0625rem)_0%,calc(50%+0.125rem)_50%,calc(50%+0.0625rem)_100%,calc(50%-0.0625rem)_100%,calc(50%-0.125rem)_50%)]', 'after:[mask-image:linear-gradient(to_bottom,transparent,black_15%,black_85%,transparent)]', 'motion-reduce:after:transition-none', className), ...props }));
+        // The seam is a pseudo-element so the 16px hit area stays 16px (well
+        // over the 8px a pointer needs) while the visible line stays 2px.
+        RESIZE_SEAM_CLASS, 'hover:before:opacity-100 focus-visible:before:opacity-100 data-[resizing]:before:opacity-100', className), ...props }));
 }
 function SidebarInset({ className, ...props }) {
     return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-background relative flex w-full flex-1 flex-col overflow-hidden', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));

package/dist/primitives/tabs.d.ts

@@ -26,6 +26,19 @@ type TabsUnderlineSize = 'xs' | 'sm' | 'md' | 'lg';
  * never segmented.
  */
 type TabsListType = 'default' | 'underline' | 'segmented';
+/**
+ * Segmented track + chip. Radii are concentric: the track is `rounded-md` (8px)
+ * with 2px of padding, so the chip is `rounded-sm` (6px). The chip lifts with a
+ * hairline ring plus `shadow-xs` — raised, not bordered, so it reads as the
+ * selected thing in both themes.
+ *
+ * The padding is `p-[2px]`, not `p-0.5`: `--spacing` is 0.23rem, so `p-0.5` is
+ * 1.84px. The chip's 1px ring leaves 0.84px of track showing, and a fraction of
+ * a pixel rounds differently on each side — 1px of track on one end and none on
+ * the other at 1x. A whole 2px leaves exactly 1px on every side.
+ */
+declare const tabsSegmentedTrackClasses = "bg-muted rounded-md p-[2px]";
+declare const tabsSegmentedChipClasses = "bg-popover ring-border rounded-sm shadow-xs ring-1";
 declare function Tabs({ className, value, defaultValue, onValueChange, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 interface TabsListProps extends React.ComponentProps<typeof TabsPrimitive.List> {
     type?: TabsListType;
@@ -69,5 +82,5 @@ declare function TabsTriggerCompact({ className, variant, value, ...props }: Rea
 declare function FilterBar({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /** Standalone filter pill — works WITHOUT a <Tabs> root. Pair with FilterBar. */
 declare function FilterBarItem({ className, ...props }: React.ComponentProps<'button'>): React.JSX.Element;
-export { FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };
+export { tabsSegmentedChipClasses, tabsSegmentedTrackClasses, FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };
 export type { TabsListType, TabsSize, TabsTriggerSize, TabsTriggerVariant, TabsUnderlineSize };

package/dist/primitives/tabs.js

@@ -204,4 +204,4 @@ function FilterBar({ className, ...props }) {
 function FilterBarItem({ className, ...props }) {
     return (_jsx("button", { "data-slot": "filter-bar-item", role: "tab", type: "button", className: cn('inline-flex h-[calc(100%-4px)] flex-1 cursor-pointer items-center justify-center gap-1.5 border border-transparent px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors duration-normal', 'text-muted-foreground/60 hover:text-foreground/80', 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-foreground/6 data-[state=active]:shadow-sm data-[state=active]:ring-1', 'disabled:pointer-events-none disabled:opacity-50', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className), ...props }));
 }
-export { FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };
+export { tabsSegmentedChipClasses, tabsSegmentedTrackClasses, FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };

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

@@ -304,6 +304,15 @@ export interface UiHostComponents {
         /** False or missing: read only. */
         canWrite?: boolean;
     }>;
+    /**
+     * The full artifact viewer (doc editor, history, share, PDF export) for a
+     * session panel. Without it, the panel shows the artifact's page read-only.
+     */
+    ArtifactViewer?: React.ComponentType<{
+        projectId: string;
+        artifactId: string;
+        onClose: () => void;
+    }>;
     /** The decorative background of an empty session. Without it, the plain surface. */
     Wallpaper?: React.ComponentType;
     /**

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

@@ -20,4 +20,4 @@ export interface ComposerAboveCardDerived {
     handleRemoveQuote: (id: string) => void;
 }
 export type ComposerAboveCardProps = SessionChatInputProps & ComposerAboveCardDerived;
-export declare function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemoveQuote, aboveSlot, inputSlot, notice, onNoticeRetry, onModelChange, slashMenuPlacement, questionActive, }: ComposerAboveCardProps): import("react").JSX.Element;
+export declare function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemoveQuote, aboveSlot, inputSlot, notice, noticeAsleep, onNoticeRetry, onModelChange, slashMenuPlacement, questionActive, }: ComposerAboveCardProps): import("react").JSX.Element;

package/dist/session/composer/ComposerAboveCard.js

@@ -14,7 +14,7 @@ import { QuoteList } from './quote-list.js';
  * keeps only the side ring, so no ring line crosses a seam.
  */
 const DOCKED_MIDDLE_LAYER_CLASS = 'ring-muted/15 rounded-t-none ring-3 [clip-path:inset(0_-8px_0_-8px)]';
-export function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemoveQuote, aboveSlot, inputSlot, notice = null, onNoticeRetry, onModelChange, slashMenuPlacement = 'above', questionActive = false, }) {
+export function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemoveQuote, aboveSlot, inputSlot, notice = null, noticeAsleep, onNoticeRetry, onModelChange, slashMenuPlacement = 'above', questionActive = false, }) {
     const showQueueStrip = Boolean(inputSlot);
     return (_jsxs(_Fragment, { children: [slashMenuPlacement === 'above' && _jsx("div", { id: dockId }), _jsx("div", { className: "mb-2 w-full empty:hidden", children: _jsx(QuoteList, { quotes: quotes, labels: quoteListLabels, onRemove: handleRemoveQuote }, quotes.length === 0 ? 'empty' : 'quotes') }), aboveSlot && _jsx("div", { className: "mb-2 w-full empty:hidden", children: aboveSlot }), (notice || showQueueStrip) && (_jsxs("div", { "data-composer-stack": true, className: "relative isolate flex w-full flex-col items-center justify-center [&>[data-composer-strip]:not(:empty)~*]:rounded-t-none", children: [showQueueStrip && (
                     // A pending question also carries a ring around the whole
@@ -24,5 +24,5 @@ export function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemov
                         // Rounded when topmost; square under a visible strip (the
                         // wrapper's sibling rule). Under a docked question it also
                         // carries the side ring.
-                        className: cn('bg-sidebar border-border flex w-full items-center gap-2 rounded-t-xl border border-b-0 px-3 py-1.5', questionActive && DOCKED_MIDDLE_LAYER_CLASS), children: [notice === SESSION_NOTICE.idle ? (_jsx(MoonIcon, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": "true" })) : (_jsx(Loading, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "text-muted-foreground min-w-0 flex-1 truncate text-xs", children: notice }), onNoticeRetry && (_jsx(Button, { type: "button", variant: "ghost", size: "xs", className: "text-muted-foreground hover:text-foreground h-auto shrink-0 px-1.5 py-0.5 text-xs", onClick: onNoticeRetry, children: 'Retry' }))] }))] }))] }));
+                        className: cn('bg-sidebar border-border flex w-full items-center gap-2 rounded-t-xl border border-b-0 px-3 py-1.5', questionActive && DOCKED_MIDDLE_LAYER_CLASS), children: [(noticeAsleep ?? notice === SESSION_NOTICE.idle) ? (_jsx(MoonIcon, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": "true" })) : (_jsx(Loading, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "text-muted-foreground min-w-0 flex-1 truncate text-xs", children: notice }), onNoticeRetry && (_jsx(Button, { type: "button", variant: "ghost", size: "xs", className: "text-muted-foreground hover:text-foreground h-auto shrink-0 px-1.5 py-0.5 text-xs", onClick: onNoticeRetry, children: 'Retry' }))] }))] }))] }));
 }

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

@@ -71,4 +71,4 @@ export interface ComposerCardDerived {
     noModelsConnected: boolean;
 }
 export type ComposerCardProps = SessionChatInputProps & ComposerCardDerived;
-export declare function ComposerCard({ tHardcodedUi, isDragOver, handleDragEnter, handleDragOver, handleDragLeave, handleDropFiles, attachedFiles, promptAttachmentItems, removeAttachedFile, retryAttachedFile, pastes, removePaste, onOpenPastedContent, commandAttachmentPlan, editorDisabled, editorRef, setEditorRef, editorPlaceholder, animatePlaceholder, handleSubmit, handleArrowUpAtStart, setIsEmpty, handleDocChange, allSessions, slashActions, handleSelectAction, dockId, setMenuOpen, fileInputRef, handleFileSelect, sessionId, handleAttachClick, primaryAgents, availableSelectedModel, agentMenuOpen, setAgentMenuOpen, modelMenuOpen, setModelMenuOpen, reasoningMenuOpen, setReasoningMenuOpen, isEmpty, canSubmit, submitDisabled, attachmentFailed, modelRejectingImages, imagesUnsupportedReason, modelUnavailable, agentUnavailable, noModelsConnected, agents, commands, slashFiles, models, notice, disabled, lockForQuestion, lockForApproval, questionButtonLabel, questionActive, submitLabel, questionCanAct, escCount, isBusy, isSending, onStop, stopDisabled, canStop, modelsLoading, modelRequired, onModelChange, modelDefaultControls, providers, variants, selectedVariant, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent, onAgentChange, noAccessibleAgents, onContextClick, messages, underbarPlacement, slashMenuPlacement, cardClassName, onArrowUpAtStart, }: ComposerCardProps): import("react").JSX.Element;
+export declare function ComposerCard({ tHardcodedUi, isDragOver, handleDragEnter, handleDragOver, handleDragLeave, handleDropFiles, attachedFiles, promptAttachmentItems, removeAttachedFile, retryAttachedFile, pastes, removePaste, onOpenPastedContent, commandAttachmentPlan, editorDisabled, editorRef, setEditorRef, editorPlaceholder, animatePlaceholder, handleSubmit, handleArrowUpAtStart, setIsEmpty, handleDocChange, allSessions, slashActions, handleSelectAction, dockId, setMenuOpen, fileInputRef, handleFileSelect, sessionId, handleAttachClick, primaryAgents, availableSelectedModel, agentMenuOpen, setAgentMenuOpen, modelMenuOpen, setModelMenuOpen, reasoningMenuOpen, setReasoningMenuOpen, isEmpty, canSubmit, submitDisabled, attachmentFailed, modelRejectingImages, imagesUnsupportedReason, modelUnavailable, agentUnavailable, noModelsConnected, agents, commands, slashFiles, models, notice, disabled, lockForQuestion, lockForApproval, questionButtonLabel, questionActive, submitLabel, questionCanAct, escCount, isBusy, isSending, onStop, stopDisabled, canStop, modelsLoading, modelRequired, onModelChange, modelDefaultControls, providers, variants, selectedVariant, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent, onAgentChange, noAccessibleAgents, onContextClick, messages, underbarPlacement, agentPickerCompact, slashMenuPlacement, cardClassName, onArrowUpAtStart, }: ComposerCardProps): import("react").JSX.Element;

package/dist/session/composer/ComposerCard.js

@@ -21,7 +21,7 @@ export function ComposerCard({ tHardcodedUi, isDragOver, handleDragEnter, handle
 // Raw props the moved JSX reads; `{...props}` carries the rest. These
 // defaults mirror `ComposerImpl`'s, because the spread passes the raw
 // values, not the component's defaulted locals.
-agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES, models = EMPTY_MODELS, notice = null, disabled = false, lockForQuestion = false, lockForApproval = false, questionButtonLabel = null, questionActive = false, submitLabel = null, questionCanAct = true, escCount = 0, isBusy = false, isSending = false, onStop, stopDisabled = false, canStop = true, modelsLoading = false, modelRequired = false, onModelChange, modelDefaultControls, providers, variants = EMPTY_VARIANTS, selectedVariant = null, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent = null, onAgentChange, noAccessibleAgents = false, onContextClick, messages, underbarPlacement = 'below', slashMenuPlacement = 'above', cardClassName, onArrowUpAtStart, }) {
+agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES, models = EMPTY_MODELS, notice = null, disabled = false, lockForQuestion = false, lockForApproval = false, questionButtonLabel = null, questionActive = false, submitLabel = null, questionCanAct = true, escCount = 0, isBusy = false, isSending = false, onStop, stopDisabled = false, canStop = true, modelsLoading = false, modelRequired = false, onModelChange, modelDefaultControls, providers, variants = EMPTY_VARIANTS, selectedVariant = null, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent = null, onAgentChange, noAccessibleAgents = false, onContextClick, messages, underbarPlacement = 'below', agentPickerCompact = false, slashMenuPlacement = 'above', cardClassName, onArrowUpAtStart, }) {
     const cardRef = useRef(null);
     const { attachAccept } = useUiHostConfig();
     const inlineUnderbar = underbarPlacement === 'inline';
@@ -33,7 +33,7 @@ agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES
                 'bg-background border-border relative isolate z-10 w-full rounded-xl border', 'pt-3', 
                 // The drag border swaps colour AND gains a ring. Without this it
                 // snapped: a hard flash the moment a file crossed the card.
-                'duration-normal ease-default transition-[border-color]', 'motion-reduce:transition-none', cardClassName, isDragOver && 'border-kortix-blue/80 ring-primary/40 border ring', 
+                'duration-normal ease-default transition-[border-color]', 'motion-reduce:transition-none', cardClassName, isDragOver && 'border-ring ring-ring/15 border ring', 
                 // A layer above (`ComposerAboveCard`) owns the top corners: a notice,
                 // or a visible strip (known only to CSS, through `data-composer-stack`).
                 (notice || questionActive) &&
@@ -51,7 +51,7 @@ agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES
                                             // the div and immediately fights the caret we are placing.
                                             e.preventDefault();
                                             editorRef.current?.focus();
-                                        }, children: [_jsx(AnimatedComposerPlaceholder, { placeholder: editorPlaceholder, active: animatePlaceholder }), _jsx(Suspense, { fallback: _jsx(ComposerEditorFallback, {}), children: _jsx(ComposerEditorLazy, { ref: setEditorRef, placeholder: animatePlaceholder ? '' : editorPlaceholder, disabled: editorDisabled, onSubmit: handleSubmit, onArrowUpAtStart: onArrowUpAtStart ? handleArrowUpAtStart : undefined, onEmptyChange: setIsEmpty, onDocChange: handleDocChange, agents: agents, sessions: allSessions ?? [], currentSessionId: sessionId, commands: commands, actions: slashActions, files: slashFiles, onSelectAction: handleSelectAction, slashDockSelector: `#${dockId}`, onMenuOpenChange: setMenuOpen }) })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: attachAccept ?? DEFAULT_ATTACH_ACCEPT, multiple: true, className: "hidden", onChange: handleFileSelect }), _jsx(ComposerToolbar, { leading: inlineUnderbar ? (_jsx(ComposerUnderbar, { variant: "inline", onAttachClick: handleAttachClick, agents: primaryAgents, selectedAgent: selectedAgent, onAgentChange: onAgentChange, agentMenuOpen: agentMenuOpen, onAgentMenuOpenChange: setAgentMenuOpen, noAccessibleAgents: noAccessibleAgents, messages: messages, models: models, selectedModel: availableSelectedModel, onContextClick: onContextClick })) : null, modelsLoading: modelsLoading, models: models, selectedModel: availableSelectedModel, onModelChange: onModelChange, modelDefaultControls: modelDefaultControls, providers: providers, modelRequired: modelRequired, modelMenuOpen: modelMenuOpen, onModelMenuOpenChange: setModelMenuOpen, reasoningMenuOpen: reasoningMenuOpen, onReasoningMenuOpenChange: setReasoningMenuOpen, variants: variants, selectedVariant: selectedVariant, onVariantChange: onVariantChange, projectId: projectId, 
+                                        }, children: [_jsx(AnimatedComposerPlaceholder, { placeholder: editorPlaceholder, active: animatePlaceholder }), _jsx(Suspense, { fallback: _jsx(ComposerEditorFallback, {}), children: _jsx(ComposerEditorLazy, { ref: setEditorRef, placeholder: animatePlaceholder ? '' : editorPlaceholder, disabled: editorDisabled, onSubmit: handleSubmit, onArrowUpAtStart: onArrowUpAtStart ? handleArrowUpAtStart : undefined, onEmptyChange: setIsEmpty, onDocChange: handleDocChange, agents: agents, sessions: allSessions ?? [], currentSessionId: sessionId, commands: commands, actions: slashActions, files: slashFiles, onSelectAction: handleSelectAction, slashDockSelector: `#${dockId}`, onMenuOpenChange: setMenuOpen }) })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: attachAccept ?? DEFAULT_ATTACH_ACCEPT, multiple: true, className: "hidden", onChange: handleFileSelect }), _jsx(ComposerToolbar, { leading: inlineUnderbar ? (_jsx(ComposerUnderbar, { variant: "inline", agentPickerCompact: agentPickerCompact, onAttachClick: handleAttachClick, agents: primaryAgents, selectedAgent: selectedAgent, onAgentChange: onAgentChange, agentMenuOpen: agentMenuOpen, onAgentMenuOpenChange: setAgentMenuOpen, noAccessibleAgents: noAccessibleAgents, messages: messages, models: models, selectedModel: availableSelectedModel, onContextClick: onContextClick })) : null, modelsLoading: modelsLoading, models: models, selectedModel: availableSelectedModel, onModelChange: onModelChange, modelDefaultControls: modelDefaultControls, providers: providers, modelRequired: modelRequired, modelMenuOpen: modelMenuOpen, onModelMenuOpenChange: setModelMenuOpen, reasoningMenuOpen: reasoningMenuOpen, onReasoningMenuOpenChange: setReasoningMenuOpen, variants: variants, selectedVariant: selectedVariant, onVariantChange: onVariantChange, projectId: projectId, 
                                         // Inline placement has no under-row, so the slot (the session
                                         // overrides gear, meta indicator) rides the toolbar itself. With
                                         // the 'below' placement the ComposerUnderbar further down renders

package/dist/session/composer/agent-selector.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, appearance, }: {
+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;

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';
@@ -11,8 +11,14 @@ import { TRIGGER_CARET_CLASS, triggerVariants } from '../../primitives/trigger-v
 import { capitalizeWords, isMetaAgentName, META_AGENT_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
 import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react';
 import { AgentMark } from '../../internal/components/agent-mark.js';
-import { useEffect, useMemo, useState } from 'react';
+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.
  *
@@ -38,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, appearance = 'chip', }) {
+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);
@@ -73,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
@@ -157,8 +169,16 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
             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: 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 && (
+    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/50 py-8 text-center text-xs", children: [tHardcodedUi.raw('componentsSessionSessionChatInput.line273JsxTextNoAgentsMatchLdquo'), search.trim(), tHardcodedUi.raw('componentsSessionSessionChatInput.line273JsxTextRdquo')] }))] })] })] }));
+                            _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;