@kortix/ui 0.14.3 → 0.14.4

package/dist/session/tool/shared/infrastructure-preview.js

@@ -0,0 +1,245 @@
+'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 Loading from '../../../primitives/loading.js';
+import { framePolicy, serviceFrameContent } from '../../../files/viewer/preview-policy.js';
+import { openSessionQuickView } from '../../panel/open-session-quick-view.js';
+import { usePreviewFrameUrl } from '../../../internal/hooks/use-preview-frame-url.js';
+import { useSandboxProxy } from '../../../internal/hooks/use-sandbox-proxy.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { openSafeExternalUrl } from '../../../internal/lib/safe-url.js';
+import { cn } from '../../../lib/utils.js';
+import { isProxiableLocalhostUrl, parseLocalhostUrl } from '@kortix/sdk';
+import { enrichPreviewMetadata, getActiveSessionContext } from '../../../internal/lib/utils/session-context.js';
+import { getActivePanelSessionId, sessionPreviewTabId } from '../../../internal/stores/session-browser-store.js';
+import { openTabAndNavigate, useTabStore } from '../../../internal/stores/tab-store.js';
+import { useUiShallowNavigate } from '../../../providers/ui-provider.js';
+import { openPanelFallbackView, panelFallbackActive } from '../../../internal/stores/panel-fallback-store.js';
+import { prefersPreviewLink, safeHttpUrl } from '../../../_vendor/kortix-shared.js';
+import { PREVIEW_BUILDING_STATES, PREVIEW_STATE_MESSAGE, } from '../../../_vendor/kortix-shared.js';
+import { ArrowClockwiseIcon, ArrowSquareOutIcon, GlobeIcon as Globe } from '@phosphor-icons/react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { ToolSurfaceContext } from './surface.js';
+import { ToolActionBar } from './tool-action-bar.js';
+export const MD_FLUSH_CLASSES = '[&_.relative.group]:my-0 [&_pre]:my-0 [&_pre]:border-0 [&_pre]:bg-transparent [&_pre]:p-0 [&_pre]:rounded-none [&_pre]:text-xs [&_code]:text-xs';
+export const ToolNavigationContext = createContext(true);
+export function useToolNavigation() {
+    const enabled = useContext(ToolNavigationContext);
+    const shallowNavigate = useUiShallowNavigate();
+    const openTab = useCallback((tab) => {
+        if (!enabled)
+            return;
+        // A preview tab is a route of apps/web's tab shell. A host without a
+        // side panel shows the page in the thread's fallback overlay instead.
+        if (tab.type === 'preview' && panelFallbackActive()) {
+            const originalUrl = tab.metadata?.originalUrl;
+            openPanelFallbackView('browser', {
+                url: typeof originalUrl === 'string' ? originalUrl : undefined,
+                title: tab.title,
+            });
+            return;
+        }
+        openTabAndNavigate(tab, undefined, shallowNavigate);
+    }, [enabled, shallowNavigate]);
+    const openExternal = useCallback((targetUrl) => {
+        if (!enabled || !targetUrl)
+            return;
+        openSafeExternalUrl(targetUrl);
+    }, [enabled]);
+    return { enabled, openTab, openExternal };
+}
+export function useProxyUrl(localhostUrl) {
+    const { proxyUrl } = useSandboxProxy();
+    return useMemo(() => {
+        if (!localhostUrl)
+            return null;
+        if (!isProxiableLocalhostUrl(localhostUrl))
+            return null;
+        const parsed = parseLocalhostUrl(localhostUrl);
+        if (!parsed)
+            return null;
+        const resolvedProxyUrl = proxyUrl(localhostUrl);
+        if (!resolvedProxyUrl)
+            return null;
+        return {
+            proxyUrl: resolvedProxyUrl,
+            port: parsed.port,
+        };
+    }, [localhostUrl, proxyUrl]);
+}
+export function isLocalSandboxFilePath(value) {
+    if (!value)
+        return false;
+    if (/^(https?:|data:|blob:)/i.test(value))
+        return false;
+    return value.startsWith('/');
+}
+/** How long after a frame load a state message still counts for that load.
+ *  The state page posts while it parses, so its message lands around `load`. */
+const STATE_MESSAGE_GRACE_MS = 1000;
+export function useServicePreview(url, label, sessionId) {
+    const { enabled: navigationEnabled, openTab, openExternal } = useToolNavigation();
+    const proxy = useProxyUrl(url);
+    const externalUrl = proxy ? null : safeHttpUrl(url);
+    // The host's URL (`UiProvider resolvePreviewUrl`) or the SDK token URL.
+    const framed = usePreviewFrameUrl(proxy ? url : '', proxy?.proxyUrl || '');
+    const previewUrl = proxy ? framed.url : externalUrl;
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    const [refreshKey, setRefreshKey] = useState(0);
+    // The proxy serves a state page (HTTP 200) while the app starts, so `load`
+    // alone cannot tell "the app answered" from "the proxy is still waiting".
+    // The page reports its state; `frameRef` pins the message to THIS frame.
+    const frameRef = useRef(null);
+    const [appWaiting, setAppWaiting] = useState(false);
+    const lastStateAt = useRef(0);
+    useEffect(() => {
+        const onMessage = (event) => {
+            if (!frameRef.current || event.source !== frameRef.current.contentWindow)
+                return;
+            const data = event.data;
+            if (!data || data.type !== PREVIEW_STATE_MESSAGE)
+                return;
+            lastStateAt.current = Date.now();
+            // Only "still building" earns the busy glyph. `unreachable` is a page
+            // that says the app stopped answering; a busy glyph over it would
+            // contradict it.
+            // A page that gave up after its reloads (`stalled`) stopped waiting too.
+            setAppWaiting(PREVIEW_BUILDING_STATES.has(data.state) && data.stalled !== true);
+        };
+        window.addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, []);
+    const handleRefresh = useCallback(() => {
+        setIsLoading(true);
+        setHasError(false);
+        setRefreshKey((k) => k + 1);
+    }, []);
+    useEffect(() => {
+        if (!isLoading || !previewUrl)
+            return;
+        const t = setTimeout(() => {
+            setIsLoading(false);
+            setHasError(true);
+        }, 8000);
+        return () => clearTimeout(t);
+    }, [isLoading, previewUrl, refreshKey]);
+    const displayLabel = label || (proxy ? 'App preview' : url);
+    const navigateToPreviewTab = useCallback(() => {
+        if (!navigationEnabled || !proxy)
+            return;
+        const parsed = parseLocalhostUrl(url);
+        const sid = sessionId || getActivePanelSessionId() || getActiveSessionContext()?.sourceSessionId || null;
+        if (sid && parsed) {
+            useTabStore.getState().openTab({
+                id: sessionPreviewTabId(sid),
+                title: label || 'App preview',
+                type: 'preview',
+                href: typeof window !== 'undefined' ? window.location.pathname : `/p/${proxy.port}`,
+                metadata: enrichPreviewMetadata({
+                    url: proxy.proxyUrl,
+                    port: proxy.port,
+                    originalUrl: url,
+                    path: parsed.path,
+                }),
+            });
+            // Route through the shared, mode-aware entry point rather than writing
+            // `viewBySession` directly: that key is read only by Advanced mode, so
+            // in Easy — the only mode that ships — this opened the panel on the Easy
+            // home and dropped the page entirely. The target carries WHICH page, so
+            // the browser lands on this preview instead of the first running app.
+            openSessionQuickView('browser', 'preview', {
+                url: proxy.proxyUrl,
+                title: label || 'App preview',
+            });
+            return;
+        }
+        openTab({
+            id: `preview:${proxy.port}`,
+            title: label || 'App preview',
+            type: 'preview',
+            href: `/p/${proxy.port}`,
+            metadata: enrichPreviewMetadata({
+                url: proxy.proxyUrl,
+                port: proxy.port,
+                originalUrl: url,
+            }),
+        });
+    }, [navigationEnabled, openTab, proxy, url, label, sessionId]);
+    const openInBrowser = useCallback(() => {
+        openExternal(previewUrl ?? undefined);
+    }, [openExternal, previewUrl]);
+    const onLoad = useCallback(() => {
+        setIsLoading(false);
+        setHasError(false);
+        // A load with no state message is the app itself: it stopped waiting.
+        setTimeout(() => {
+            if (Date.now() - lastStateAt.current > STATE_MESSAGE_GRACE_MS)
+                setAppWaiting(false);
+        }, 300);
+    }, []);
+    const onError = useCallback(() => {
+        setIsLoading(false);
+        setHasError(true);
+    }, []);
+    return {
+        navigationEnabled,
+        proxy,
+        previewUrl,
+        /** A static file the agent wrote (`document`) or a server it runs (`app`). */
+        frameContent: serviceFrameContent(proxy?.port),
+        isLoading: isLoading && !framed.failed,
+        hasError: hasError || framed.failed,
+        /** Same condition as the viewport's "Loading preview…" overlay (no URL
+         *  yet, or the frame has not loaded), plus the proxy page while the app
+         *  is still building (`PREVIEW_BUILDING_STATES`). */
+        appStarting: !!(proxy || externalUrl) &&
+            !prefersPreviewLink(previewUrl) &&
+            (isLoading || !previewUrl || appWaiting),
+        /** Seeds the dot-matrix glyph, so one preview keeps one glyph. */
+        matrixSeed: label || url,
+        frameRef,
+        refreshKey,
+        handleRefresh,
+        displayLabel,
+        navigateToPreviewTab,
+        openInBrowser,
+        onLoad,
+        onError,
+    };
+}
+// Single home for the preview controls (refresh / open externally / open as tab)
+// so they never render twice around the same iframe.
+export function ServicePreviewActions({ preview, compact = false, }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const { navigationEnabled, proxy, previewUrl, isLoading, handleRefresh, navigateToPreviewTab, openInBrowser, } = preview;
+    const previewButton = (_jsx(Hint, { label: tHardcodedUi.raw('componentsSessionToolRenderers.line5032JsxTextOpenAsTab'), side: "top", children: _jsx(Button, { type: "button", onClick: navigateToPreviewTab, size: "xs", disabled: !navigationEnabled || !proxy, children: tHardcodedUi.raw('i18nComplete.text324b134f57c7') }) }));
+    return (_jsx(ToolActionBar, { compact: compact, loading: isLoading, refreshLabel: tHardcodedUi.raw('i18nComplete.text0e9161011702'), menuLabel: tHardcodedUi.raw('i18nComplete.textf8d46c2570e7'), onRefresh: handleRefresh, secondaryLabel: tHardcodedUi.raw('autoFeaturesSessionToolRenderersJsxTextOpenPrivatePreview0d54e929'), secondaryIcon: ArrowSquareOutIcon, secondaryIconClassName: "size-4.5", onSecondary: openInBrowser, secondaryDisabled: !navigationEnabled || !previewUrl, secondaryDisabledClassName: "cursor-not-allowed opacity-50", primary: previewButton }));
+}
+export function ServicePreviewUrlFallback({ preview }) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    const { previewUrl, displayLabel, handleRefresh, openInBrowser, isLoading, navigationEnabled } = preview;
+    // NEVER the previewUrl: on a preview origin it carries a one-shot `?token=`
+    // (the user's live Supabase JWT), and this renders as visible page text —
+    // screenshot- and screen-share-capturable. previewUrl stays in the click
+    // handler, where it is used and not shown.
+    const label = displayLabel;
+    return (_jsx("div", { className: "bg-background absolute inset-0 z-10 flex items-center justify-center p-6", children: _jsxs("div", { className: "flex max-w-2xl flex-col items-center gap-3 text-center", children: [_jsx(Hint, { label: tI18nHardcoded.raw('autoFeaturesSessionToolRenderersJsxTextOpenPrivatePreview0d54e929'), side: "top", children: _jsxs(Button, { type: "button", variant: "outline", onClick: openInBrowser, disabled: !navigationEnabled || !previewUrl, className: cn('inline-flex h-auto max-w-full items-center gap-2 px-4 py-3 font-mono text-sm font-medium shadow-2xs', navigationEnabled && previewUrl ? '' : 'cursor-not-allowed opacity-60'), children: [_jsx(ArrowSquareOutIcon, { className: "text-muted-foreground size-4 shrink-0" }), _jsx("span", { className: "break-all", children: label })] }) }), _jsx(Hint, { label: tI18nHardcoded.raw('i18nComplete.text0e9161011702'), side: "top", children: _jsxs(Button, { variant: "ghost", size: "xs", type: "button", onClick: handleRefresh, className: "text-muted-foreground gap-1.5", children: [isLoading ? (_jsx(Loading, { className: "size-3.5" })) : (_jsx(ArrowClockwiseIcon, { className: "size-3.5" })), tI18nHardcoded.raw('i18nComplete.textceba35272869')] }) })] }) }));
+}
+export function ServicePreviewViewport({ preview, slotHeight = false, }) {
+    const fill = useContext(ToolSurfaceContext) === 'panel';
+    const { previewUrl, frameContent, displayLabel, isLoading, hasError, refreshKey, onLoad, onError, frameRef, } = preview;
+    const linkOnlyPreview = prefersPreviewLink(previewUrl);
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    return (_jsxs("div", { className: cn('bg-secondary relative w-full overflow-hidden', fill ? 'h-full' : slotHeight ? 'h-[420px]' : 'aspect-video'), children: [(isLoading || !previewUrl) && !linkOnlyPreview && (_jsx("div", { className: "bg-background/60 absolute inset-0 z-10 flex items-center justify-center", children: _jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Loading, { variant: "spokes" }), _jsx("span", { className: "text-xs", children: tHardcodedUi.raw('componentsSessionToolRenderers.line380JsxTextLoadingPreview') })] }) })), (hasError || linkOnlyPreview) && _jsx(ServicePreviewUrlFallback, { preview: preview }), previewUrl && !linkOnlyPreview && (_jsx("iframe", { ref: frameRef, src: previewUrl, title: displayLabel, className: "bg-secondary absolute inset-0 h-full w-full border-0", 
+                // The agent chose what this frame shows; `framePolicy` decides its
+                // sandbox and origin (see `FrameContent`).
+                sandbox: framePolicy(frameContent, previewUrl).sandbox, onLoad: onLoad, onError: onError }, refreshKey))] }));
+}
+export function InlineServicePreview({ url, label }) {
+    const fill = useContext(ToolSurfaceContext) === 'panel';
+    const preview = useServicePreview(url, label);
+    const { displayLabel } = preview;
+    return (_jsxs("div", { className: cn('overflow-hidden', fill && 'flex h-full flex-col'), children: [_jsx("div", { className: "bg-muted/40 border-border/30 flex h-8 shrink-0 items-center gap-1.5 border-b px-2.5", children: _jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx(Globe, { className: "text-muted-foreground/50 h-3 w-3 shrink-0" }), _jsx("span", { className: "text-muted-foreground truncate font-mono text-xs", children: displayLabel })] }) }), fill ? (_jsx("div", { className: "min-h-0 flex-1", children: _jsx(ServicePreviewViewport, { preview: preview }) })) : (_jsx(ServicePreviewViewport, { preview: preview }))] }));
+}

package/dist/session/tool/shared/infrastructure-row-header.d.ts

@@ -0,0 +1,53 @@
+import { type ToolOutcome } from '@kortix/sdk';
+import { type TriggerTitle } from '../../../internal/session-types/index.js';
+export declare const TOOL_ROW_CLASS: string;
+/**
+ * The leading icon for a step that failed.
+ *
+ * It REPLACES the tool's own icon rather than sitting beside it. A globe next
+ * to a warning reads as "a web page, and separately, a problem"; the row has
+ * one 16px gutter, and the thing the reader needs from it is the verdict — the
+ * tool's identity is still spelled out in the title immediately to its right.
+ *
+ * One glyph, one muted tone: the triangle itself is the verdict, and it stays
+ * `neutral` so a failed step reads as information beside the row's title, not
+ * as an alarm. Which KIND of failure it was still travels on `data-tone` and
+ * the aria-label. Same triangle `ScrapeResultItem` already puts on a dead URL
+ * inside the card, so the summary row and the row it summarises say the same
+ * thing with the same mark.
+ */
+/**
+ * The verdict mark on a tool row.
+ *
+ * It carries an accessible name because for some rows it is the ONLY failure
+ * signal: a call that returned its error settles as `completed`, so the title
+ * still reads "Ran command" and the tint is all that says otherwise. Every other
+ * failure glyph in the turn is labelled (`activity-burst.tsx`,
+ * `activity-file-chips.tsx`); this one was the exception.
+ */
+export declare function ToolOutcomeIcon({ outcome }: {
+    outcome: Exclude<ToolOutcome, 'ok'>;
+}): import("react").JSX.Element;
+export declare function ToolHeaderRow({ icon, trigger, running, onSubtitleClick, outcome, action, }: {
+    icon?: React.ReactNode;
+    trigger: TriggerTitle | React.ReactNode;
+    running: boolean;
+    onSubtitleClick?: () => void;
+    outcome?: ToolOutcome;
+    action?: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Title + subtitle + args on ONE line, for the panel's disclosure row.
+ *
+ * The panel used to stack these — an `h3` with a second mono line under it —
+ * which is a page header, and a page header only works when there is one call
+ * on the page. A detail routinely holds several, so the unit here is a row: one
+ * line, closed, that says which call this is and nothing more. Everything the
+ * old header showed still shows, it just reads left-to-right instead of
+ * top-to-bottom.
+ */
+export declare function PanelRowTitle({ trigger, running, onSubtitleClick, }: {
+    trigger: TriggerTitle;
+    running: boolean;
+    onSubtitleClick?: () => void;
+}): import("react").JSX.Element;

package/dist/session/tool/shared/infrastructure-row-header.js

@@ -0,0 +1,133 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DiffStat, STATUS_TEXT } from '../../../primitives/status.js';
+import { TextShimmer } from '../../../primitives/text-shimmer.js';
+import { WarningIcon as AlertTriangle } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { cn } from '../../../lib/utils.js';
+import { useToolOpen } from './infrastructure-contexts.js';
+import { isTriggerTitle } from './infrastructure-parts.js';
+// Shared class for the compact single-line "row" layout used by every inline mode.
+//
+// The colour rule skips `[data-tone]` icons. It is a descendant selector on the
+// ROW — `(0,2,2)` — so it outranks any `text-*` class the icon carries itself
+// `(0,1,0)`, and it silently repainted every toned leading icon. Excluding
+// toned icons by attribute keeps the verdict icon's OWN class authoritative
+// without an `!important` arms race inside a shared class.
+export const TOOL_ROW_CLASS = cn('flex items-center gap-1.5 py-0.5', 'text-xs text-muted-foreground/70 transition-colors select-none max-w-full group', '[&>span:first-child>svg]:size-4 [&>span:first-child>svg:not([data-tone])]:text-muted-foreground');
+/**
+ * The leading icon for a step that failed.
+ *
+ * It REPLACES the tool's own icon rather than sitting beside it. A globe next
+ * to a warning reads as "a web page, and separately, a problem"; the row has
+ * one 16px gutter, and the thing the reader needs from it is the verdict — the
+ * tool's identity is still spelled out in the title immediately to its right.
+ *
+ * One glyph, one muted tone: the triangle itself is the verdict, and it stays
+ * `neutral` so a failed step reads as information beside the row's title, not
+ * as an alarm. Which KIND of failure it was still travels on `data-tone` and
+ * the aria-label. Same triangle `ScrapeResultItem` already puts on a dead URL
+ * inside the card, so the summary row and the row it summarises say the same
+ * thing with the same mark.
+ */
+/**
+ * The verdict mark on a tool row.
+ *
+ * It carries an accessible name because for some rows it is the ONLY failure
+ * signal: a call that returned its error settles as `completed`, so the title
+ * still reads "Ran command" and the tint is all that says otherwise. Every other
+ * failure glyph in the turn is labelled (`activity-burst.tsx`,
+ * `activity-file-chips.tsx`); this one was the exception.
+ */
+export function ToolOutcomeIcon({ outcome }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsx(AlertTriangle, { weight: "fill", "data-tone": outcome, "aria-label": outcome === 'failed'
+            ? tI18nComplete.raw('textf0103f528539')
+            : tI18nComplete.raw('text2c9f21686e34'), className: cn('size-4 shrink-0', STATUS_TEXT.neutral) }));
+}
+// Title + subtitle + args, rendered for the compact inline row layout.
+function InlineTriggerTitle({ trigger, running, onSubtitleClick, }) {
+    const args = trigger.args ?? [];
+    // Read HERE rather than in the tool: this component renders inside
+    // `BasicTool`'s `ToolOpenContext` provider, and the tool's own body does not.
+    // See `TriggerTitle.hideSubtitleWhenOpen` for when a caller sets the flag.
+    const open = useToolOpen();
+    const subtitle = open && trigger.hideSubtitleWhenOpen ? undefined : trigger.subtitle;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-foreground shrink-0 text-sm whitespace-nowrap", children: trigger.title }), (subtitle || args.length > 0 || trigger.stat) && (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: [subtitle &&
+                        (running ? (_jsx(TextShimmer, { className: "min-w-0 truncate text-sm", children: subtitle })) : (
+                        // Painted as a link, so it must behave like one for the keyboard
+                        // too. Kept as a <span role="button"> rather than a real <button>
+                        // because this content is cloned into the disclosure's own trigger
+                        // button — nesting one button in another is invalid HTML.
+                        _jsx("span", { className: cn('text-muted-foreground min-w-0 truncate text-sm', onSubtitleClick &&
+                                'hover:text-foreground cursor-pointer underline-offset-2 hover:underline'), role: onSubtitleClick ? 'button' : undefined, tabIndex: onSubtitleClick ? 0 : undefined, 
+                            // Last, so the rendered markup keeps `title="…">…</span>` — the
+                            // shape the memory-tool trigger tests pin.
+                            title: subtitle, onKeyDown: onSubtitleClick
+                                ? (e) => {
+                                    if (e.key !== 'Enter' && e.key !== ' ')
+                                        return;
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    onSubtitleClick();
+                                }
+                                : undefined, onClick: onSubtitleClick
+                                ? (e) => {
+                                    e.stopPropagation();
+                                    onSubtitleClick();
+                                }
+                                : undefined, children: subtitle }))), trigger.stat && (_jsx(DiffStat, { additions: trigger.stat.additions, deletions: trigger.stat.deletions, className: "shrink-0 text-xs" })), args.length > 0 && (_jsxs(_Fragment, { children: [subtitle && _jsx("span", { className: "text-muted-foreground/40 shrink-0", children: "\u00B7" }), _jsx("span", { className: "text-muted-foreground/40 min-w-0 truncate text-sm", title: args.join(' · '), children: args.join(' · ') })] }))] }))] }));
+}
+// The full inline header line: icon, trigger content (or streaming skeleton), right cluster.
+export function ToolHeaderRow({ icon, trigger, running, onSubtitleClick, outcome = 'ok', action, }) {
+    const triggerIsEmpty = isTriggerTitle(trigger) ? !trigger.title && !trigger.subtitle : false;
+    // A failed step leads with the verdict, not with the tool. Placed here rather
+    // than in each renderer because every one of them hardcodes its own icon and
+    // none of them look at the output.
+    const leading = outcome === 'ok' ? icon : _jsx(ToolOutcomeIcon, { outcome: outcome });
+    return (_jsxs(_Fragment, { children: [leading && _jsx("span", { className: "text-muted-foreground size-4 shrink-0", children: leading }), _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: isTriggerTitle(trigger) ? (_jsx(InlineTriggerTitle, { trigger: trigger, running: running, onSubtitleClick: onSubtitleClick })) : (trigger) }), action && _jsx("span", { className: "ml-auto flex shrink-0 items-center", children: action })] }));
+}
+/**
+ * The row title's shrink priority: it yields LAST, and only to a cap.
+ *
+ * Title and subtitle are flex siblings, and both used to be plain `min-w-0
+ * truncate` — no shrink priority at all, so flexbox took the overflow out of
+ * both in proportion to their content. A long subtitle therefore ate the
+ * title: the `testing` skill's row rendered as `t…` beside 28 characters of
+ * description, and `mcp__linear__create_issue` rendered as `C..`. The name is
+ * the one thing a closed row exists to say, so it cannot be the part that
+ * loses.
+ *
+ * `shrink-0` alone would let a sentence-length title push the subtitle off the
+ * card entirely, which is the same failure mirrored. The `max-w-[60%]` cap is
+ * the second half: a short title always renders whole, a long one truncates at
+ * 60% of the trigger and leaves the rest to the subtitle.
+ */
+const PANEL_TITLE_CLASS = 'min-w-0 max-w-[60%] shrink-0 truncate';
+/**
+ * Title + subtitle + args on ONE line, for the panel's disclosure row.
+ *
+ * The panel used to stack these — an `h3` with a second mono line under it —
+ * which is a page header, and a page header only works when there is one call
+ * on the page. A detail routinely holds several, so the unit here is a row: one
+ * line, closed, that says which call this is and nothing more. Everything the
+ * old header showed still shows, it just reads left-to-right instead of
+ * top-to-bottom.
+ */
+export function PanelRowTitle({ trigger, running, onSubtitleClick, }) {
+    const args = trigger.args ?? [];
+    // Same read, same reason as the inline row — one behaviour, two surfaces.
+    const open = useToolOpen();
+    const subtitle = open && trigger.hideSubtitleWhenOpen ? undefined : trigger.subtitle;
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [running ? (_jsx(TextShimmer, { className: cn(PANEL_TITLE_CLASS, 'text-sm font-medium'), children: trigger.title || 'Working' })) : (_jsx("span", { className: cn('text-foreground text-sm font-medium', PANEL_TITLE_CLASS), children: trigger.title })), subtitle && (_jsx("span", { className: cn('text-muted-foreground min-w-0 truncate font-mono text-xs', onSubtitleClick &&
+                    'hover:text-foreground cursor-pointer underline-offset-2 hover:underline'), title: subtitle, 
+                // `stopPropagation` is load-bearing now and was not before: the
+                // subtitle sits INSIDE the disclosure trigger, so without it every
+                // "open this file" click would also toggle the row it lives on.
+                onClick: onSubtitleClick
+                    ? (e) => {
+                        e.stopPropagation();
+                        onSubtitleClick();
+                    }
+                    : undefined, children: subtitle })), trigger.stat && (_jsx(DiffStat, { additions: trigger.stat.additions, deletions: trigger.stat.deletions, className: "shrink-0 text-xs" })), args.length > 0 && (_jsx("span", { className: "text-muted-foreground/60 min-w-0 truncate font-mono text-xs", title: args.join(' · '), children: args.join(' · ') }))] }));
+}

package/dist/session/tool/shared/infrastructure-rows.d.ts

@@ -0,0 +1,2 @@
+import { type BasicToolProps } from './types.js';
+export declare function BasicTool({ icon, trigger, children, defaultOpen, forceOpen, locked, onSubtitleClick, badge, onClick, className, durationMs: durationMsProp, triggerAction, }: BasicToolProps): import("react").JSX.Element;

package/dist/session/tool/shared/infrastructure-rows.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../../primitives/disclosure.js';
+import { SidebarGlyph as PanelRight } from '../../../icons/sidebar-toggle.js';
+import { CaretRightIcon } from '@phosphor-icons/react';
+import { cn } from '../../../lib/utils.js';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { ToolSurfaceContext } from './surface.js';
+import { BoundActivateContext, ToolDurationContext, ToolOpenContext, ToolOutcomeContext, ToolRunningContext } from './infrastructure-contexts.js';
+import { PanelRowTitle, TOOL_ROW_CLASS, ToolHeaderRow, ToolOutcomeIcon } from './infrastructure-row-header.js';
+import { isTriggerTitle } from './infrastructure-parts.js';
+/**
+ * Side-panel surface: one closed-by-default disclosure row per tool call.
+ *
+ * The panel is not a page for a single call. A Progress step or a Context group
+ * hands the detail N calls at once, and the old layout answered that with N
+ * sticky `px-4 pt-4 pb-3` headers and N padded bodies stacked down the pane —
+ * the same title treatment repeated, every payload open, nothing skimmable.
+ * A row inverts it: the detail opens as a list of one-line summaries, and the
+ * reader expands the one they came for.
+ *
+ * The row is the `bg-popover rounded-md border` surface the design system uses
+ * for every panel row, and its disclosure affordance is the same MARK the Easy
+ * cards use — a `CaretRightIcon` that points down once the thing is open. Only
+ * the mark is shared: `PanelCard` sits on `bg-pane` at a tighter radius and
+ * animates its chevron through `motion` with a press scale, while this row is a
+ * denser, plainer thing that rotates its chevron in CSS. Same vocabulary, not
+ * the same component. No rail, no connector, no per-row header: the gap between
+ * rows is the whole rhythm.
+ *
+ * Interaction is gated on having a body — a childless call has nothing to
+ * disclose, so it gets no chevron, no `role="button"`, and no cursor change
+ * rather than a control that does nothing. `locked` keeps the trigger (a locked
+ * row must still be openable) and only drops the pointer affordance; refusing
+ * the close is {@link BasicTool}'s `handleOpenChange`, shared with inline.
+ */
+function PanelToolRow({ icon, trigger, children, running, badge, outcome, onSubtitleClick, locked, open, onOpenChange, className, action, }) {
+    const hasBody = Boolean(children);
+    // Same substitution the inline header makes, from the same context — a failed
+    // call leads with the verdict on both surfaces or the two disagree about what
+    // happened. See {@link ToolOutcomeIcon}.
+    const leading = outcome === 'ok' ? icon : _jsx(ToolOutcomeIcon, { outcome: outcome });
+    const row = (_jsxs("div", { className: cn('flex min-h-11 w-full items-center gap-2.5 px-3 py-2.5 text-left', hasBody && 'transition-colors', hasBody && !locked && 'hover:bg-muted-foreground/[0.04] cursor-pointer'), children: [leading && (_jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", children: leading })), isTriggerTitle(trigger) ? (_jsx(PanelRowTitle, { trigger: trigger, running: running, onSubtitleClick: onSubtitleClick })) : (
+            // `truncate` here CLIPS rather than ellipsises — a node trigger's
+            // content is flex children (a label + chip row), and
+            // `text-overflow` only applies to inline text. Clipping is the intent:
+            // the row is one line, and an over-long node has to stop at the badge
+            // rather than push the chevron off the card.
+            _jsx("div", { className: "[&>span:first-child>svg]:text-muted-foreground text-foreground min-w-0 flex-1 truncate text-sm font-medium [&>span:first-child>svg]:size-4", children: trigger })), badge && (_jsx("span", { className: "text-muted-foreground/60 shrink-0 font-mono text-xs whitespace-nowrap tabular-nums", children: badge })), action && _jsx("span", { className: "flex shrink-0 items-center", children: action }), hasBody && (_jsx(CaretRightIcon, { "aria-hidden": true, 
+                // CSS, not `motion` — the rotation is a 150ms state change on one
+                // property, and every row on the pane would otherwise carry a
+                // motion component. `motion-reduce` snaps it instead.
+                className: cn('text-muted-foreground size-4 shrink-0 transition-transform motion-reduce:transition-none', open && 'rotate-90') }))] }));
+    return (_jsxs(Disclosure, { open: open, onOpenChange: onOpenChange, className: "bg-popover border-border overflow-hidden rounded-md border", children: [hasBody ? _jsx(DisclosureTrigger, { children: row }) : row, hasBody && (_jsx(DisclosureContent, { children: _jsx("div", { className: cn('border-border border-t px-3 py-3 text-sm', className), children: children }) }))] }));
+}
+// Inline row that acts as a plain button (fires `onClick`, no disclosure).
+function ClickableToolRow({ header, locked, onClick, }) {
+    return (_jsx("div", { "data-component": "tool-trigger", role: "button", tabIndex: 0, onClick: (e) => {
+            e.stopPropagation();
+            onClick();
+        }, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+            }
+        }, className: cn(TOOL_ROW_CLASS, !locked && 'cursor-pointer'), children: header }));
+}
+// Inline row that opens the tool in the side panel on click.
+function ActivatableToolRow({ header, activate, }) {
+    return (_jsxs("div", { "data-component": "tool-trigger", role: "button", tabIndex: 0, onClick: () => activate(), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                activate();
+            }
+        }, className: cn(TOOL_ROW_CLASS, 'cursor-pointer'), children: [header, _jsx(PanelRight, { className: "text-muted-foreground/30 size-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-80", mirrored: true })] }));
+}
+/**
+ * Inline row that expands/collapses its children in place (the default layout).
+ *
+ * A row with no children is NOT a disclosure. It used to be one anyway: the
+ * trigger was rendered unconditionally, so a childless row carried
+ * `role="button"`, `aria-expanded="false"` and `tabIndex={0}` and answered a
+ * click by toggling state that rendered nothing. The row said "press me to
+ * open" to a screen reader, to the keyboard and to the pointer, three times
+ * over, and then did nothing at all.
+ *
+ * It is most visible on a sub-agent row whose child session is not resident —
+ * `useOpenCodeMessages` only holds a child's transcript while the parent is
+ * streaming it, and `pruneDetachedSessions` evicts the older ones once a turn
+ * dispatches more than a couple of agents. So the LAST agent in a group of
+ * three opens and the first two are dead rows. But the defect belongs to every
+ * childless tool, so the fix belongs here.
+ *
+ * `PanelToolRow` has always gated its trigger this way. The two surfaces are
+ * one behaviour presented twice; this is the half that had drifted.
+ */
+function CollapsibleToolRow({ header, children, locked, open, onOpenChange, }) {
+    const hasBody = Boolean(children);
+    const row = (_jsx("div", { "data-component": "tool-trigger", className: cn(TOOL_ROW_CLASS, hasBody && !locked && 'cursor-pointer'), children: header }));
+    return (_jsxs(Disclosure, { open: open, onOpenChange: onOpenChange, children: [hasBody ? _jsx(DisclosureTrigger, { children: row }) : row, hasBody && (_jsx(DisclosureContent, { className: "text-xs", children: _jsx("div", { className: "py-1", children: children }) }))] }));
+}
+export function BasicTool({ icon, trigger, children, defaultOpen = false, forceOpen, locked, onSubtitleClick, badge, onClick, className, durationMs: durationMsProp, triggerAction, }) {
+    const running = useContext(ToolRunningContext);
+    const contextDuration = useContext(ToolDurationContext);
+    const durationMs = durationMsProp ?? contextDuration;
+    const outcome = useContext(ToolOutcomeContext);
+    const surface = useContext(ToolSurfaceContext);
+    const activate = useContext(BoundActivateContext);
+    // `forceOpen` seeds the state as well as latching it. The effect below alone
+    // could only open the row on the frame AFTER mount, so a call that arrives
+    // already waiting on a permission or a question rendered closed once and then
+    // snapped open — a flash of the wrong answer on the exact row whose prompt is
+    // the point. The effect stays for the case it is actually for: `forceOpen`
+    // flipping true on an already-mounted row.
+    const [open, setOpen] = useState(defaultOpen || !!forceOpen);
+    useEffect(() => {
+        if (forceOpen)
+            setOpen(true);
+    }, [forceOpen]);
+    const handleOpenChange = useCallback((value) => {
+        if (locked && !value)
+            return;
+        setOpen(value);
+    }, [locked]);
+    // Side-panel surface: a disclosure row, closed unless the caller seeded it
+    // open. It runs on the SAME state the inline branch does — `defaultOpen`
+    // seeds it, `forceOpen` latches it, `locked` refuses the close — because the
+    // panel is a second presentation of one behavior, not a second behavior. The
+    // branch used to ignore all three (plus `icon` and `outcome`) and render an
+    // always-expanded page header instead.
+    //
+    // `onClick` stays inline-only: a panel row's click is its disclosure, and the
+    // two tools that pass one (project-create / project-select) have no body, so
+    // they render as the plain, non-interactive rows they already were here.
+    if (surface === 'panel') {
+        return (_jsx(ToolOpenContext.Provider, { value: open, children: _jsx(PanelToolRow, { icon: icon, trigger: trigger, running: running, badge: badge, outcome: outcome, onSubtitleClick: onSubtitleClick, locked: locked, open: open, onOpenChange: handleOpenChange, className: className, action: triggerAction, children: children }) }));
+    }
+    const header = (_jsx(ToolHeaderRow, { icon: icon, trigger: trigger, running: running, onSubtitleClick: onSubtitleClick, outcome: outcome, action: triggerAction }));
+    // Explicit click handler: behave as a plain button.
+    if (onClick) {
+        return _jsx(ClickableToolRow, { header: header, locked: locked, onClick: onClick });
+    }
+    // A bound "activate" context opens this tool in the side panel instead of
+    // expanding inline. `defaultOpen` opts out the same way `forceOpen` does: a
+    // tool that asks to start expanded is saying its payload belongs inline —
+    // `show`'s whole purpose is presenting the carousel/content IN the chat, and
+    // this row was collapsing it to a one-line "Show · 4 items" instead.
+    if (activate && !locked && !forceOpen && !defaultOpen) {
+        return _jsx(ActivatableToolRow, { header: header, activate: activate });
+    }
+    // Default: expand/collapse children inline.
+    return (_jsx(ToolOpenContext.Provider, { value: open, children: _jsx(CollapsibleToolRow, { header: header, locked: locked, open: open, onOpenChange: handleOpenChange, children: children }) }));
+}

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

@@ -0,0 +1,9 @@
+export * from './infrastructure-preview.js';
+export * from './infrastructure-parts.js';
+export * from './infrastructure-output.js';
+export * from './infrastructure-contexts.js';
+export { BasicTool } from './infrastructure-rows.js';
+export * from './infrastructure-files.js';
+export { StructuredOutput } from './structured-output.js';
+export { cleanErrorMessage, formatJsonFailureOutput, isErrorOutput, looksLikeError, parseJsonFailure, partOutcome, type ToolOutcome, } from '@kortix/sdk';
+export { TOOL_INDENT, ToolSurfaceContext, useToolCardFrame, useToolCardPad, useToolIndent, type ToolSurface, } from './surface.js';

package/dist/session/tool/shared/infrastructure.js

@@ -0,0 +1,10 @@
+'use client';
+export * from './infrastructure-preview.js';
+export * from './infrastructure-parts.js';
+export * from './infrastructure-output.js';
+export * from './infrastructure-contexts.js';
+export { BasicTool } from './infrastructure-rows.js';
+export * from './infrastructure-files.js';
+export { StructuredOutput } from './structured-output.js';
+export { cleanErrorMessage, formatJsonFailureOutput, isErrorOutput, looksLikeError, parseJsonFailure, partOutcome, } from '@kortix/sdk';
+export { TOOL_INDENT, ToolSurfaceContext, useToolCardFrame, useToolCardPad, useToolIndent, } from './surface.js';