@kortix/ui 0.0.0-stage → 0.14.4

package/dist/session/tool/shared/show-helpers.js

@@ -0,0 +1,359 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../primitives/button.js';
+import Hint from '../../../primitives/hint.js';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../../primitives/hover-card.js';
+import Loading from '../../../primitives/loading.js';
+import { getShowCarouselItemLabel, ShowCarousel, ShowContentRenderer, showDomain, } from '../../../files/renderers/show-content-renderer.js';
+import { getFileCategory } from '../../../files/viewer/preview-policy.js';
+import { binaryBlobKeys } from '../../../files/runtime/hooks/use-binary-blob.js';
+import { fileContentKeys } from '../../../files/runtime/hooks/use-file-content.js';
+import { ServicePreviewViewport, useProxyUrl, useServicePreview, useToolNavigation, } from './infrastructure.js';
+import { ToolActionBar } from './tool-action-bar.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { cn } from '../../../lib/utils.js';
+import { isAppRouteUrl, parseLocalhostUrl } from '@kortix/sdk';
+import { enrichPreviewMetadata } from '../../../internal/lib/utils/session-context.js';
+import { useFilePreviewStore } from '../../../internal/stores/file-preview-store.js';
+import { useKortixComputerStore } from '../../../internal/stores/kortix-computer-store.js';
+import { safeHttpUrl } from '../../../_vendor/kortix-shared.js';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef, useState } from 'react';
+import { CopyButton } from '../../../markdown/copy-button.js';
+import { STATUS_BORDER } from '../../../primitives/status.js';
+import { buildStaticFileLocalUrl } from '@kortix/sdk';
+import { WarningIcon as AlertTriangle, AppWindowIcon, CodeSimpleIcon as Code2, ArrowSquareOutIcon as ExternalLink, FileCodeIcon as FileCode, FileCsvIcon as FileCsv, FileDocIcon as FileDoc, FileHtmlIcon as FileHtml, FileIcon, FileMdIcon as FileMd, FilePdfIcon as FilePdf, FilePptIcon as FilePpt, FileSvgIcon as FileSvg, FileTextIcon as FileText, FileXlsIcon as FileXls, FileZipIcon as FileZip, FolderSimpleIcon, GlobeIcon as Globe, ImageIcon, ArrowsOutSimpleIcon as Maximize2, MusicNotesIcon as Music, TextTIcon as Type, VideoIcon as Video, } from '@phosphor-icons/react';
+import { useCallback } from 'react';
+export { ShowCarousel, ShowContentRenderer, showDomain };
+/** A `show` item that points at an HTML file the static file server can serve. */
+export function isShowHtmlFile(type, path) {
+    return !!path && getFileCategory(path) === 'html' && (type === 'file' || type === 'html');
+}
+export const SHOW_BORDER_STYLES = {
+    default: STATUS_BORDER.neutral,
+    success: STATUS_BORDER.success,
+    warning: STATUS_BORDER.warning,
+    info: STATUS_BORDER.info,
+    danger: STATUS_BORDER.destructive,
+};
+export function showTypeIcon(type, className = 'size-4') {
+    switch (type) {
+        case 'image':
+            return _jsx(ImageIcon, { className: cn(className, 'shrink-0') });
+        case 'video':
+            return _jsx(Video, { className: cn(className, 'shrink-0') });
+        case 'audio':
+            return _jsx(Music, { className: cn(className, 'shrink-0') });
+        case 'code':
+            return _jsx(Code2, { className: cn(className, 'shrink-0') });
+        case 'markdown':
+            return _jsx(Type, { className: cn(className, 'shrink-0') });
+        case 'html':
+            return _jsx(Globe, { className: cn(className, 'shrink-0') });
+        case 'pdf':
+            return _jsx(FileText, { className: cn(className, 'shrink-0') });
+        case 'url':
+            return _jsx(Globe, { className: cn(className, 'shrink-0') });
+        case 'error':
+            return _jsx(AlertTriangle, { className: cn(className, 'shrink-0') });
+        case 'file':
+            return _jsx(FileIcon, { className: cn(className, 'shrink-0') });
+        case 'text':
+            return _jsx(Type, { className: cn(className, 'shrink-0') });
+        default:
+            return _jsx(ExternalLink, { className: cn(className, 'shrink-0') });
+    }
+}
+// Format-specific icons, matched against the file extension first (most
+// specific) and the `type` field second. `showTypeIcon` stays the base
+// fallback — its switch only knows the coarse renderer types, so `csv`,
+// `pptx`, `docx`, `xlsx` used to fall through to the ExternalLink default.
+const SHOW_EXT_ICONS = [
+    [/\.pdf$/i, FilePdf],
+    [/\.(pptx?|key|odp)$/i, FilePpt],
+    [/\.(docx?|rtf|odt)$/i, FileDoc],
+    [/\.(xlsx?|ods)$/i, FileXls],
+    [/\.(csv|tsv)$/i, FileCsv],
+    [/\.(html?|xhtml)$/i, FileHtml],
+    [/\.(mdx?|markdown)$/i, FileMd],
+    [/\.svg$/i, FileSvg],
+    [/\.(zip|tar|gz|tgz|rar|7z)$/i, FileZip],
+    [/\.(png|jpe?g|gif|webp|avif|heic|bmp|ico)$/i, ImageIcon],
+    [/\.(mp4|mov|webm|mkv|avi)$/i, Video],
+    [/\.(mp3|wav|m4a|aac|ogg|flac)$/i, Music],
+    [
+        /\.(m?[jt]sx?|py|rb|go|rs|java|cc?|cpp|hpp?|cs|php|sh|bash|zsh|json|ya?ml|toml|sql|s?css|less|vue|swift|kt)$/i,
+        FileCode,
+    ],
+];
+const SHOW_TYPE_FILE_ICONS = {
+    pdf: FilePdf,
+    ppt: FilePpt,
+    pptx: FilePpt,
+    doc: FileDoc,
+    docx: FileDoc,
+    xls: FileXls,
+    xlsx: FileXls,
+    csv: FileCsv,
+    audio: Music,
+    code: FileCode,
+    markdown: FileMd,
+};
+export function showFileTypeIcon(type, path, className = 'size-4', 
+/** A running localhost port reads as an app window, not a web globe. */
+url) {
+    if (url && parseLocalhostUrl(url) && !isAppRouteUrl(url)) {
+        return _jsx(AppWindowIcon, { className: cn(className, 'shrink-0') });
+    }
+    if (path) {
+        for (const [re, ExtIcon] of SHOW_EXT_ICONS) {
+            if (re.test(path))
+                return _jsx(ExtIcon, { className: cn(className, 'shrink-0') });
+        }
+    }
+    const TypeIcon = SHOW_TYPE_FILE_ICONS[type];
+    if (TypeIcon)
+        return _jsx(TypeIcon, { className: cn(className, 'shrink-0') });
+    return showTypeIcon(type, className);
+}
+export function useShowOpenInTab(props) {
+    const { type, url, path, title } = props;
+    const { enabled, openTab, openExternal } = useToolNavigation();
+    const proxy = useProxyUrl(url);
+    const hasLocalhostUrl = !!parseLocalhostUrl(url) && !isAppRouteUrl(url);
+    const safeExternalUrl = safeHttpUrl(url);
+    const isHtmlFilePath = isShowHtmlFile(type, path);
+    const htmlStaticUrl = isHtmlFilePath ? buildStaticFileLocalUrl(path) : '';
+    const htmlStaticProxy = useProxyUrl(htmlStaticUrl);
+    return useCallback(() => {
+        if (isHtmlFilePath && htmlStaticProxy) {
+            const fileName = path.split('/').pop() || path;
+            openTab({
+                id: `preview:${htmlStaticProxy.port}`,
+                title: title || fileName,
+                type: 'preview',
+                href: `/p/${htmlStaticProxy.port}`,
+                metadata: enrichPreviewMetadata({
+                    url: htmlStaticProxy.proxyUrl,
+                    port: htmlStaticProxy.port,
+                    originalUrl: htmlStaticUrl,
+                }),
+            });
+            return;
+        }
+        if (hasLocalhostUrl && proxy) {
+            openTab({
+                id: `preview:${proxy.port}`,
+                title: title || `localhost:${proxy.port}`,
+                type: 'preview',
+                href: `/p/${proxy.port}`,
+                metadata: enrichPreviewMetadata({
+                    url: proxy.proxyUrl,
+                    port: proxy.port,
+                    originalUrl: url,
+                }),
+            });
+            return;
+        }
+        if (safeExternalUrl) {
+            openExternal(safeExternalUrl);
+            return;
+        }
+        if (path && enabled) {
+            useFilePreviewStore.getState().openPreview(path);
+        }
+    }, [
+        enabled,
+        hasLocalhostUrl,
+        htmlStaticProxy,
+        htmlStaticUrl,
+        isHtmlFilePath,
+        openExternal,
+        openTab,
+        path,
+        proxy,
+        safeExternalUrl,
+        title,
+        url,
+    ]);
+}
+export function buildHtmlStaticUrl(filePath) {
+    return buildStaticFileLocalUrl(filePath);
+}
+export { ServicePreviewViewport, useServicePreview };
+/**
+ * Toolbar for a `show` backed by a FILE, and the sibling of
+ * `ServicePreviewActions` (which serves a `show` backed by a URL).
+ *
+ * The header row in `show-tool.tsx` used to render only for website previews,
+ * so a PDF, deck, doc or YAML got a bare card: nothing to refresh with, no way
+ * to open it larger, no route into the panel. The content was there and the
+ * actions were not — which is the half that makes an artifact usable.
+ *
+ * Same shape as its sibling on purpose: ghost `icon-sm` controls, then one
+ * `secondary xs` button carrying the primary action, so the two kinds of show
+ * header read as one component with two payloads rather than two designs.
+ */
+export function ShowFileActions({ path, 
+/** True on the panel surface, where the detail layer already frames this
+ *  file — "open it in the panel" is not an action you can still take, so it
+ *  is omitted rather than shown inert (the same W4 rule the panel toolbars
+ *  follow). Refresh and full screen still apply. */
+inPanel = false, 
+/** Fold Refresh and Full screen into one ⋯ menu, leaving Preview as the
+ *  card's only visible action (the inline carousel header needs the room). */
+compact = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const queryClient = useQueryClient();
+    const [refreshing, setRefreshing] = useState(false);
+    /**
+     * A `show` reads its bytes through one of two caches depending on the file:
+     * text goes through `fileContentKeys`, binaries through `binaryBlobKeys`.
+     * The card doesn't know which one backs it, so refresh invalidates both —
+     * the miss is a no-op, and guessing wrong would silently do nothing.
+     */
+    const handleRefresh = useCallback(() => {
+        setRefreshing(true);
+        void Promise.all([
+            queryClient.invalidateQueries({ queryKey: fileContentKeys.all }),
+            queryClient.invalidateQueries({ queryKey: binaryBlobKeys.all }),
+        ]).finally(() => setRefreshing(false));
+    }, [queryClient]);
+    /**
+     * `openPreview` already branches on where it is: inside a session it hands
+     * the file to the panel's detail layer, elsewhere it opens the app-level
+     * modal. Calling it directly keeps this button on the one path every other
+     * file-open in the app uses.
+     */
+    const openInPanel = useCallback(() => {
+        useFilePreviewStore.getState().openPreview(path);
+    }, [path]);
+    const openFullScreen = useCallback(() => {
+        useFilePreviewStore.getState().openPreview(path);
+        // Expand AFTER requesting the open: the detail's own `openDetail` resets
+        // the panel split, and `isExpanded` outranks the split, so setting it here
+        // survives that reset regardless of which lands first.
+        useKortixComputerStore.getState().setIsExpanded(true);
+    }, [path]);
+    const previewButton = !inPanel && (_jsx(Hint, { label: tI18nComplete.raw('textbb59775ca8ea'), side: "top", children: _jsx(Button, { type: "button", onClick: openInPanel, size: "xs", className: "active:scale-[0.96]", children: tI18nComplete.raw('text324b134f57c7') }) }));
+    return (_jsx(ToolActionBar, { compact: compact, loading: refreshing, refreshLabel: tI18nComplete.raw('text0e9161011702'), menuLabel: tI18nComplete.raw('textf8d46c2570e7'), onRefresh: handleRefresh, secondaryLabel: tI18nComplete.raw('text674fe2acd0d5'), secondaryIcon: Maximize2, onSecondary: openFullScreen, refreshButtonClassName: "active:scale-[0.96]", secondaryButtonClassName: "active:scale-[0.96]", secondaryIconClassName: "size-4", primary: previewButton }));
+}
+/**
+ * Resolves a `show` target to what its hover card prints, or null when there
+ * is nothing to name (inline content with no path or URL). `copy` is the
+ * value the location row's copy button writes.
+ *
+ * - A running port: the site's title (else `localhost:<port>`), then the
+ *   address it serves on. Copy gives the full `http://localhost:<port>/…`.
+ * - A file: its file name, then its full path.
+ * - A web link: its title (else its domain), then the full URL.
+ */
+export function showHoverDetails(target) {
+    const title = target.title?.trim();
+    const local = target.url && !isAppRouteUrl(target.url) ? parseLocalhostUrl(target.url) : null;
+    if (local) {
+        const address = `localhost:${local.port}${local.path === '/' ? '' : local.path}`;
+        return {
+            name: title || `localhost:${local.port}`,
+            detail: address,
+            copy: local.originalUrl,
+            Icon: AppWindowIcon,
+        };
+    }
+    if (target.path) {
+        return {
+            name: target.path.split('/').pop() || target.path,
+            detail: target.path,
+            copy: target.path,
+            Icon: FolderSimpleIcon,
+        };
+    }
+    const external = target.url ? safeHttpUrl(target.url) : null;
+    if (external) {
+        return {
+            name: title || showDomain(external),
+            detail: external,
+            copy: external,
+            Icon: Globe,
+        };
+    }
+    return null;
+}
+/**
+ * The target a `show` card renders, named on hover: a name line, then the
+ * place it lives (folder path, port address, or URL) with a copy button. The card header already carries the
+ * type icon, so the name line has none. Wraps the single-item header and
+ * every carousel tab.
+ */
+export function ShowHoverCard({ target, children, }) {
+    const [open, setOpen] = useState(false);
+    // A press means "I am clicking", not "tell me about this file". Radix also
+    // opens on focus, which a click gives the tab, so without this the card pops
+    // up right after every tab switch. Cleared when the pointer leaves.
+    const pressed = useRef(false);
+    const details = showHoverDetails(target);
+    if (!details)
+        return children;
+    const { name, detail, copy, Icon } = details;
+    return (_jsxs(HoverCard, { open: open, onOpenChange: (next) => setOpen(next && !pressed.current), 
+        // Long enough that skimming across a row of tabs to click one never
+        // opens a card; only a deliberate rest on one does.
+        openDelay: 700, closeDelay: 100, children: [_jsx(HoverCardTrigger, { asChild: true, onPointerDown: () => {
+                    pressed.current = true;
+                    setOpen(false);
+                }, onPointerLeave: () => {
+                    pressed.current = false;
+                }, children: children }), _jsxs(HoverCardContent, { side: "bottom", align: "start", sideOffset: 6, animated: false, className: "flex w-max max-w-md flex-col gap-1 px-3 py-2 text-sm", children: [_jsx("span", { className: "text-foreground truncate", children: name }), _jsxs("div", { className: "text-muted-foreground flex min-w-0 items-center gap-2", children: [_jsx(Icon, { className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: detail }), _jsx(CopyButton, { code: copy, size: "sm", hintSide: "top", className: "text-muted-foreground -mr-1.5 ml-auto shrink-0" })] })] })] }));
+}
+/**
+ * The inline carousel's header: one tab per item, so every output is named up
+ * front and one click away. ←/→ move between tabs (WAI-ARIA tablist pattern);
+ * the strip scrolls sideways when the names overflow the header.
+ */
+export function ShowCarouselTabs({ items, activeIndex, onSelect, label, tabIcon, }) {
+    const tabRefs = useRef([]);
+    const stripRef = useRef(null);
+    // Scroll the strip only — never `scrollIntoView`, which also scrolls the
+    // chat column's overflow-hidden ancestors (see ShowCarousel).
+    useEffect(() => {
+        const tab = tabRefs.current[activeIndex];
+        const strip = stripRef.current;
+        if (!tab || !strip)
+            return;
+        const left = tab.offsetLeft - strip.offsetLeft;
+        const right = left + tab.offsetWidth;
+        if (left < strip.scrollLeft)
+            strip.scrollLeft = left;
+        else if (right > strip.scrollLeft + strip.clientWidth) {
+            strip.scrollLeft = right - strip.clientWidth;
+        }
+    }, [activeIndex]);
+    const move = (e) => {
+        let next = activeIndex;
+        if (e.key === 'ArrowLeft')
+            next = Math.max(0, activeIndex - 1);
+        else if (e.key === 'ArrowRight')
+            next = Math.min(items.length - 1, activeIndex + 1);
+        else if (e.key === 'Home')
+            next = 0;
+        else if (e.key === 'End')
+            next = items.length - 1;
+        else
+            return;
+        e.preventDefault();
+        onSelect(next);
+        tabRefs.current[next]?.focus();
+    };
+    return (_jsx("div", { ref: stripRef, role: "tablist", "aria-label": label || undefined, onKeyDown: move, className: "flex min-w-0 flex-1 [scrollbar-width:none] items-center gap-0.5 overflow-x-auto", children: items.map((item, i) => {
+            const active = i === activeIndex;
+            const label = getShowCarouselItemLabel(item);
+            return (_jsx(ShowHoverCard, { target: item, children: _jsxs("button", { ref: (el) => {
+                        tabRefs.current[i] = el;
+                    }, type: "button", role: "tab", "aria-selected": active, tabIndex: active ? 0 : -1, 
+                    // A tab with a hover card is named by it; a native title would stack on it.
+                    title: showHoverDetails(item) ? undefined : item.title || label, onClick: () => onSelect(i), className: cn('flex h-7 shrink-0 items-center gap-1.5 rounded-sm px-2 text-xs font-medium', 'transition-[background-color,color,transform] active:scale-[0.96]', '[&>svg]:size-3.5', active
+                        ? 'bg-foreground/10 text-foreground'
+                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'), children: [item.status === 'pending' ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : ((tabIcon?.(item) ??
+                            showFileTypeIcon(item.type, item.path || undefined, 'size-3.5', item.url))), _jsx("span", { className: cn(label.startsWith(':') && 'tabular-nums'), children: label })] }) }, i));
+        }) }));
+}

package/dist/session/tool/shared/structured-output.d.ts

@@ -0,0 +1,4 @@
+import type { OutputSection } from '../../../internal/lib/utils/structured-output.js';
+export declare function StructuredOutput({ sections }: {
+    sections: OutputSection[];
+}): import("react").JSX.Element;

package/dist/session/tool/shared/structured-output.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { STATUS_BG, STATUS_BORDER, STATUS_TEXT } from '../../../primitives/status.js';
+import { cn } from '../../../lib/utils.js';
+import { ProhibitIcon as Ban, CheckCircleIcon as CheckCircle, CaretRightIcon as ChevronRight, WarningIcon, } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useState } from 'react';
+function sectionContent(section) {
+    switch (section.type) {
+        case 'error':
+            return `${section.errorType ?? ''}:${section.summary}`;
+        case 'traceback':
+            return section.lines.join('\n');
+        default:
+            return section.text;
+    }
+}
+export function StructuredOutput({ sections }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const [showTrace, setShowTrace] = useState(false);
+    const seen = new Map();
+    const keyed = sections.map((section) => {
+        const base = `${section.type}:${sectionContent(section).slice(0, 80)}`;
+        const n = seen.get(base) ?? 0;
+        seen.set(base, n + 1);
+        return { section, key: n ? `${base}#${n}` : base };
+    });
+    return (_jsx("div", { className: "space-y-1.5 p-2.5", children: keyed.map(({ section, key }) => {
+            switch (section.type) {
+                case 'warning':
+                    return (_jsxs("div", { className: cn('flex items-start gap-2 rounded-md border px-2.5 py-1.5', STATUS_BORDER.warning, STATUS_BG.warning), children: [_jsx(WarningIcon, { className: cn('mt-0.5 size-4 shrink-0', STATUS_TEXT.warning) }), _jsx("p", { className: cn('font-mono text-xs leading-relaxed wrap-break-word', STATUS_TEXT.warning), children: section.text })] }, key));
+                case 'error':
+                    return (_jsxs("div", { className: "bg-muted/40 border-border/60 flex items-start gap-2 rounded-md border px-2.5 py-1.5", children: [_jsx(Ban, { className: "text-muted-foreground/70 mt-0.5 size-3 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [section.errorType && (_jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wider uppercase", children: section.errorType })), _jsx("p", { className: "text-muted-foreground font-mono text-xs leading-relaxed wrap-break-word", children: section.summary })] })] }, key));
+                case 'traceback':
+                    return (_jsxs("div", { children: [_jsxs("button", { onClick: () => setShowTrace((v) => !v), className: "text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/30 flex w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-left transition-colors", children: [_jsx(ChevronRight, { className: cn('size-3 shrink-0 transition-transform', showTrace && 'rotate-90') }), _jsx("span", { className: "text-xs font-medium", children: tHardcodedUi.raw('componentsSessionToolRenderers.line1597JsxTextStackTrace') }), _jsxs("span", { className: "text-muted-foreground/40 ml-1 font-mono text-xs", children: [section.lines.length, " ", tHardcodedUi.raw('i18nComplete.text5ea44c3961f1')] })] }), showTrace && (_jsx("div", { className: "mt-1 overflow-hidden", children: _jsx("pre", { className: "text-muted-foreground/60 max-h-64 overflow-auto p-2.5 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap", children: section.lines.map((line, li) => {
+                                        if (/^\s+File "/.test(line)) {
+                                            return (_jsxs("span", { className: "text-muted-foreground/80", children: [line, '\n'] }, li));
+                                        }
+                                        return (_jsxs("span", { children: [line, '\n'] }, li));
+                                    }) }) }))] }, key));
+                case 'install':
+                    return (_jsxs("div", { className: cn('flex items-center gap-2 rounded-md border px-2.5 py-1.5', STATUS_BORDER.success, STATUS_BG.success), children: [_jsx(CheckCircle, { className: cn('size-3 shrink-0', STATUS_TEXT.success) }), _jsx("span", { className: cn('font-mono text-xs', STATUS_TEXT.success), children: section.text })] }, key));
+                case 'info':
+                    return (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 px-2.5 py-1 font-mono text-xs", children: [_jsx("span", { className: "bg-muted-foreground/30 size-1 shrink-0 rounded-full" }), _jsx("span", { className: "wrap-break-word", children: section.text })] }, key));
+                case 'plain':
+                    return (_jsx("pre", { className: "text-foreground/70 px-2.5 py-1 font-mono text-xs leading-relaxed wrap-break-word whitespace-pre-wrap", children: section.text }, key));
+                default:
+                    return null;
+            }
+        }) }));
+}

package/dist/session/tool/shared/sub-agent.d.ts

@@ -0,0 +1,57 @@
+import { type SessionLogThread, type ToolCallBlock } from '@kortix/sdk';
+/**
+ * A sub-agent's thread: `useSessionLogThread` of the session on screen (the route's project
+ * and session; none on a debug page), by the child's runtime session id. On v2 the API's
+ * session log holds it; on v1 it is the `fromV1` view of the child's rows. Holds the child's
+ * rows while the row is mounted, as a session view does: the store frees a session once its
+ * last consumer is gone, and a preview has no re-hydrate path of its own.
+ */
+export declare function useSubAgentThread(childSessionId: string | undefined): SessionLogThread | null;
+/**
+ * A sub-agent's steps, listed under the row that dispatched it.
+ *
+ * The list takes the tool indent, and that is the whole point of this wrapper.
+ * Every other payload in the chat — a code card, a diff, a search result —
+ * already clears the leading-icon gutter through {@link useToolIndent}; this
+ * list was the one that did not, and it rendered flush at the margin. Two
+ * things broke, both visible the moment a sub-agent ran:
+ *
+ *  - `ChainOfThoughtStep` runs its hairline down the CENTRE of that gutter
+ *    (`left-2`, i.e. 8px). Child rows starting at 0 put their own 16px glyphs
+ *    across 0–16px, so the rail struck straight through every one of them.
+ *  - A child row sat at the exact x of the parent `Agent · …` row, at the same
+ *    type scale, so the sub-agent's work read as SIBLINGS of the agent in the
+ *    turn's chain rather than as work belonging to it. The hierarchy the row
+ *    exists to express was not drawn at all.
+ *
+ * Indenting to the parent's TEXT column fixes both at once: the rail gets the
+ * empty lane it was designed for, and the rows line up under the words that
+ * name the agent, which is what says they are its.
+ *
+ * The indent is read BEFORE the provider below flips the surface to `inline`.
+ * The offset a nested list needs belongs to the row it hangs under, and that
+ * row's surface is the outer one — on the panel there is no icon gutter and no
+ * rail, so `useToolIndent` correctly returns nothing there.
+ *
+ * The list draws NO rail of its own, and that is deliberate. A rail's lane is
+ * the icon column of the row it hangs from — that is what `left-2` means in
+ * `ChainOfThoughtStep`: the centre of a 16px glyph. A hairline down the left of
+ * THIS container would sit in the content lane instead, anchored to nothing,
+ * and with a single sub-agent it drew a second bar 20px inside a chain rail
+ * that already said the same thing.
+ *
+ * The line that binds these steps to their agent is therefore drawn by the
+ * chain, in the agent row's own icon lane. With one agent that is the burst's
+ * own `ChainOfThoughtStep`. With several — `groupSteps` folds them into one
+ * "Worked with N helper agents" row — it is the per-member `ChainOfThoughtStep`
+ * that `ActivityGroupStep` wraps each agent in. Same component, same mark, one
+ * bar per level of nesting that actually exists.
+ */
+export declare function SubAgentActivity({ childSessionId, calls, }: {
+    childSessionId?: string;
+    calls: readonly ToolCallBlock[];
+}): import("react").JSX.Element | null;
+export declare function SubAgentStatusBanner({ childSessionId, childThread, }: {
+    childSessionId?: string;
+    childThread: SessionLogThread | null;
+}): import("react").JSX.Element | null;

package/dist/session/tool/shared/sub-agent.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SessionRetryDisplay, TurnErrorDisplay } from '../../status/session-error-banner.js';
+import { ToolSurfaceContext, useToolIndent } from './surface.js';
+import { ToolPartRenderer } from '../tool-part-renderer.js';
+import { cn } from '../../../lib/utils.js';
+import { getRetryInfo, getRetryMessage } from '../../../internal/session-types/index.js';
+import { classifySessionLogMessage } from '@kortix/sdk';
+import { canQueryRuntimeSession, useSessionLogThread, useSessionStateStore } from '@kortix/sdk/react';
+import { useSessionIds } from '../../../providers/session-ids.js';
+import { useEffect, useMemo, useState } from 'react';
+const NO_SESSION = { projectId: '', sessionId: '', runtimeSessionId: null };
+/**
+ * A sub-agent's thread: `useSessionLogThread` of the session on screen (the route's project
+ * and session; none on a debug page), by the child's runtime session id. On v2 the API's
+ * session log holds it; on v1 it is the `fromV1` view of the child's rows. Holds the child's
+ * rows while the row is mounted, as a session view does: the store frees a session once its
+ * last consumer is gone, and a preview has no re-hydrate path of its own.
+ */
+export function useSubAgentThread(childSessionId) {
+    const ids = useSessionIds();
+    useEffect(() => {
+        if (!canQueryRuntimeSession(childSessionId))
+            return;
+        return useSessionStateStore.getState().retainSession(childSessionId);
+    }, [childSessionId]);
+    const source = useMemo(() => (childSessionId ? { projectId: ids.projectId ?? '', sessionId: ids.sessionId ?? '', runtimeSessionId: null } : NO_SESSION), [childSessionId, ids.projectId, ids.sessionId]);
+    return useSessionLogThread(source, childSessionId ?? null);
+}
+/**
+ * A sub-agent's steps, listed under the row that dispatched it.
+ *
+ * The list takes the tool indent, and that is the whole point of this wrapper.
+ * Every other payload in the chat — a code card, a diff, a search result —
+ * already clears the leading-icon gutter through {@link useToolIndent}; this
+ * list was the one that did not, and it rendered flush at the margin. Two
+ * things broke, both visible the moment a sub-agent ran:
+ *
+ *  - `ChainOfThoughtStep` runs its hairline down the CENTRE of that gutter
+ *    (`left-2`, i.e. 8px). Child rows starting at 0 put their own 16px glyphs
+ *    across 0–16px, so the rail struck straight through every one of them.
+ *  - A child row sat at the exact x of the parent `Agent · …` row, at the same
+ *    type scale, so the sub-agent's work read as SIBLINGS of the agent in the
+ *    turn's chain rather than as work belonging to it. The hierarchy the row
+ *    exists to express was not drawn at all.
+ *
+ * Indenting to the parent's TEXT column fixes both at once: the rail gets the
+ * empty lane it was designed for, and the rows line up under the words that
+ * name the agent, which is what says they are its.
+ *
+ * The indent is read BEFORE the provider below flips the surface to `inline`.
+ * The offset a nested list needs belongs to the row it hangs under, and that
+ * row's surface is the outer one — on the panel there is no icon gutter and no
+ * rail, so `useToolIndent` correctly returns nothing there.
+ *
+ * The list draws NO rail of its own, and that is deliberate. A rail's lane is
+ * the icon column of the row it hangs from — that is what `left-2` means in
+ * `ChainOfThoughtStep`: the centre of a 16px glyph. A hairline down the left of
+ * THIS container would sit in the content lane instead, anchored to nothing,
+ * and with a single sub-agent it drew a second bar 20px inside a chain rail
+ * that already said the same thing.
+ *
+ * The line that binds these steps to their agent is therefore drawn by the
+ * chain, in the agent row's own icon lane. With one agent that is the burst's
+ * own `ChainOfThoughtStep`. With several — `groupSteps` folds them into one
+ * "Worked with N helper agents" row — it is the per-member `ChainOfThoughtStep`
+ * that `ActivityGroupStep` wraps each agent in. Same component, same mark, one
+ * bar per level of nesting that actually exists.
+ */
+export function SubAgentActivity({ childSessionId, calls, }) {
+    const indent = useToolIndent();
+    if (calls.length === 0)
+        return null;
+    return (_jsx(ToolSurfaceContext.Provider, { value: "inline", children: _jsx("div", { className: cn('space-y-1', indent), children: calls.map((call) => (_jsx(ToolPartRenderer, { call: call, sessionId: childSessionId, disableNavigation: true }, call.call_id))) }) }));
+}
+export function SubAgentStatusBanner({ childSessionId, childThread, }) {
+    const childStatus = useSessionStateStore((s) => childSessionId ? s.sessionStatus[childSessionId] : undefined);
+    const retryInfo = useMemo(() => getRetryInfo(childStatus), [childStatus]);
+    const retryMessage = useMemo(() => getRetryMessage(childStatus), [childStatus]);
+    // The newest reply's error, as the transcript words a turn error.
+    const childError = useMemo(() => {
+        const failed = childThread?.messages.findLast((m) => m.role === 'assistant' && m.error);
+        return failed ? classifySessionLogMessage(failed).error?.message : undefined;
+    }, [childThread]);
+    const [secondsLeft, setSecondsLeft] = useState(0);
+    useEffect(() => {
+        if (!retryInfo) {
+            setSecondsLeft(0);
+            return;
+        }
+        const tick = () => setSecondsLeft(Math.max(0, Math.round((retryInfo.next - Date.now()) / 1000)));
+        tick();
+        const id = setInterval(tick, 1000);
+        return () => clearInterval(id);
+    }, [retryInfo]);
+    if (retryInfo && retryMessage) {
+        return (_jsx(SessionRetryDisplay, { message: retryMessage, attempt: retryInfo.attempt, secondsLeft: secondsLeft, details: retryInfo.details, className: "mt-2" }));
+    }
+    if (childError) {
+        return _jsx(TurnErrorDisplay, { errorText: childError, className: "mt-2" });
+    }
+    return null;
+}

package/dist/session/tool/shared/surface.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Which surface a tool view is being rendered on.
+ *
+ * Lives in its own module rather than in `infrastructure.tsx` to keep the
+ * import graph acyclic. The shared cards need to know the surface (an inline
+ * row indents to its label column; a panel row supplies its own padding), and
+ * `infrastructure.tsx` in turn renders those cards — so if the context stayed
+ * there, card → infrastructure → card would be a cycle. It survives today only
+ * because every use sits inside a component body and therefore runs after all
+ * modules have initialized, which is a property no one should have to know.
+ */
+export type ToolSurface = 'inline' | 'panel';
+export declare const ToolSurfaceContext: import("react").Context<ToolSurface>;
+/**
+ * The left offset a card under a tool row needs to line up with the row's TEXT,
+ * not its icon.
+ *
+ * {@link ToolHeaderRow} renders a `size-4` icon and `TOOL_ROW_CLASS` sets
+ * `gap-1.5`, so the text column starts 22px in. (`bash` used to hardcode `ml-7`
+ * against a `gap-3` that this row class does not have, which put its block 6px
+ * past the text above it.)
+ *
+ * 22px is the DEFAULT, not the law, because the gap it derives from can be
+ * overridden by the surface. A tool row inside a chain of thought is forced to
+ * `gap-3` so its label lines up with the thought and file rows above it
+ * (`turn/activity-step.tsx`), which moves the text column to 28px and left the
+ * card 6px short — the same 6px error the note above records, mirrored. A
+ * hardcoded value cannot follow a gap it cannot see, so the surface sets
+ * `--tool-indent` alongside the gap it overrides and the two can no longer
+ * drift apart. Every other surface leaves the variable unset and gets 22px.
+ *
+ * It lives beside the surface context, not in `infrastructure.tsx`, for exactly
+ * the reason written above the context: `result-card.tsx` needs the indent and
+ * `infrastructure.tsx` renders `result-card.tsx`, so importing it from there
+ * would close the cycle this module exists to avoid.
+ */
+export declare const TOOL_INDENT = "ml-[var(--tool-indent,1.375rem)]";
+/**
+ * The indent, or nothing, depending on which surface the tool is drawn on.
+ *
+ * An inline row leads with a `size-4` icon and a `gap-1.5`, so its text column
+ * starts 22px in and a card below it has to match. A panel row's body has no
+ * icon gutter and supplies its own `px-3 py-3`, so the same indent only pushes
+ * the card 22px off the trigger it sits under.
+ *
+ * Every bordered card reads the indent from HERE. Two of them used to hardcode
+ * `ml-7` (28px) against this 22px, so the same expanded row could show a card
+ * at two different left edges depending on which branch drew it.
+ */
+export declare function useToolIndent(): string;
+/**
+ * The frame a payload card draws — or nothing, on the panel, where the row
+ * card IS the frame.
+ *
+ * An opened panel row used to draw three frames around one payload: the row
+ * card's `bg-popover rounded-md border`, the disclosure body's `border-t px-3
+ * py-3`, and then the payload's own `bg-popover rounded-md border`. Three
+ * edges and two insets to say one thing. Inline the payload needs its own
+ * frame — it hangs under a trigger row on the page background with nothing
+ * else to bound it — but on the panel it is the only thing inside a card that
+ * already bounds it, so the frame is redundant and the second inset is the
+ * "inset twice for no added meaning" the gate filed.
+ *
+ * A tint is NOT a frame: {@link ToolResultCard} keeps its destructive border
+ * and wash on both surfaces, because that edge carries the failure and the row
+ * card cannot.
+ */
+export declare function useToolCardFrame(): string;
+/**
+ * The card's own content inset — or nothing, on the panel.
+ *
+ * The other half of {@link useToolCardFrame}: dropping the frame alone would
+ * leave the payload inset twice (the body's `px-3 py-3` plus the card's own
+ * `p-3`, 24px of gutter around a 420px pane). The row body's inset is the one
+ * that survives, so the panel reads as one frame with one 12px gutter.
+ *
+ * Callers keep their `pr-11` copy-button reserve AFTER this class so the
+ * right-hand reserve survives the merge on both surfaces.
+ */
+export declare function useToolCardPad(): string;