@kortix/ui 0.0.0-stage → 0.14.4

package/dist/session/tool/tools/session-message-tool.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BasicTool, partInput, partOutput, partStatus, } from '../shared/infrastructure.js';
+import { OutputBlock, ToolSection } from '../shared/output-block.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { ChatCircleIcon as MessageCircle } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+export function SessionMessageTool({ call, forceOpen }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const input = partInput(call);
+    const output = partOutput(call);
+    const status = partStatus(call);
+    const sessionId = input.session_id || '';
+    const message = input.message || '';
+    const sid = sessionId.length > 16 ? `…${sessionId.slice(-12)}` : sessionId;
+    const isOk = status === 'completed';
+    return (_jsx(BasicTool, { icon: _jsx(MessageCircle, { className: "size-3.5 shrink-0" }), trigger: {
+            title: tI18nComplete.raw('text0762fc8b575e'),
+            subtitle: sid,
+            args: isOk ? ['sent'] : status === 'error' ? ['failed'] : [],
+        }, defaultOpen: false, forceOpen: forceOpen, children: message && (_jsx("div", { className: "px-3 py-2", children: _jsx(ToolSection, { label: tI18nComplete.raw('text2f77668a9dfb'), children: _jsx(OutputBlock, { text: message.slice(0, 500) }) }) })) }));
+}
+ToolRegistry.register('session-message', SessionMessageTool);

package/dist/session/tool/tools/session-read-tool.d.ts

@@ -0,0 +1,2 @@
+import type { ToolProps } from '../shared/types.js';
+export declare function SessionReadTool({ call, defaultOpen, forceOpen, locked }: ToolProps): import("react").JSX.Element;

package/dist/session/tool/tools/session-read-tool.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { STATUS_TEXT } from '../../../primitives/status.js';
+import { BasicTool, isErrorOutput, partInput, partOutput, partStatus, ToolOutputFallback, } from '../shared/infrastructure.js';
+import { OutputBlock } from '../shared/output-block.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { cn } from '../../../lib/utils.js';
+import { CheckIcon as Check, WarningCircleIcon as CircleAlert, ClockIcon as Clock, EyeglassesIcon as Glasses, } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useMemo } from 'react';
+export function SessionReadTool({ call, defaultOpen, forceOpen, locked }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const input = partInput(call);
+    const output = partOutput(call);
+    const status = partStatus(call);
+    const sessionId = input.session_id || '';
+    const mode = input.mode || 'summary';
+    const pattern = input.pattern || '';
+    const sid = sessionId.length > 16 ? `…${sessionId.slice(-12)}` : sessionId;
+    const modeLabel = mode === 'tools'
+        ? 'tools'
+        : mode === 'full'
+            ? 'full'
+            : mode === 'search'
+                ? 'search'
+                : 'summary';
+    const parsed = useMemo(() => {
+        if (!output)
+            return null;
+        const statusM = output.match(/\*\*Status:\*\*\s*(\w+)/);
+        const agentM = output.match(/\*\*Agent:\*\*\s*(\w+)/);
+        const msgsM = output.match(/\*\*Messages:\*\*\s*(\d+)/);
+        const toolsM = output.match(/\*\*Tool calls:\*\*\s*(\d+)/);
+        const toolListM = output.match(/\*\*Tools:\*\*\s*(.+)/);
+        return {
+            status: statusM?.[1] || null,
+            agent: agentM?.[1] || null,
+            messages: msgsM?.[1] || null,
+            toolCalls: toolsM?.[1] || null,
+            toolList: toolListM?.[1]?.split(', ').map((t) => t.trim()) || [],
+        };
+    }, [output]);
+    const toolEntries = useMemo(() => {
+        if (mode !== 'tools' || !output)
+            return [];
+        // `at` is the match's character offset in `output` — a stable per-entry
+        // identity for React keys (two entries can share tool + summary text).
+        const entries = [];
+        const re = /^\[(\w+)\]\s+\*\*(\w+)\*\*:\s*(.+)/gm;
+        let m;
+        while ((m = re.exec(output)) !== null) {
+            entries.push({ at: m.index, status: m[1], tool: m[2], summary: m[3].slice(0, 120) });
+        }
+        return entries;
+    }, [mode, output]);
+    // `isErrorOutput` trims a copy of the whole output and runs `JSON.parse` over
+    // it; the summary branch below asks for it on every render.
+    const outputIsError = useMemo(() => isErrorOutput(output), [output]);
+    // A fresh array handed to `BasicTool` every render — the one prop shape that
+    // defeats a memo boundary without changing anything a reader can see.
+    const statusArgs = useMemo(() => {
+        const args = [];
+        if (parsed?.status)
+            args.push(parsed.status);
+        if (parsed?.messages)
+            args.push(`${parsed.messages} msgs`);
+        if (parsed?.toolCalls && parsed.toolCalls !== '0')
+            args.push(`${parsed.toolCalls} tools`);
+        if (mode === 'search' && pattern)
+            args.push(`/${pattern}/`);
+        return args;
+    }, [parsed?.status, parsed?.messages, parsed?.toolCalls, mode, pattern]);
+    return (_jsx(BasicTool, { icon: _jsx(Glasses, { className: "size-3.5 shrink-0" }), trigger: {
+            title: tI18nComplete('textc616e8ff6ba3', { value0: modeLabel }),
+            subtitle: sid,
+            args: statusArgs,
+        }, defaultOpen: defaultOpen, forceOpen: forceOpen, locked: locked, children: mode === 'tools' && toolEntries.length > 0 ? (_jsx("div", { "data-scrollable": true, className: "max-h-96 overflow-auto", children: toolEntries.map((entry) => (_jsxs("div", { className: "border-border/10 flex items-start gap-0 border-b last:border-b-0", children: [_jsx("span", { className: "w-6 shrink-0 py-1 text-center font-mono text-xs select-none", children: entry.status === 'completed' ? (_jsx(Check, { className: cn('inline size-2.5', STATUS_TEXT.success) })) : entry.status === 'pending' ? (_jsx(Clock, { className: "text-muted-foreground/50 inline size-2.5" })) : (_jsx(CircleAlert, { className: cn('inline size-2.5', STATUS_TEXT.destructive) })) }), _jsx("span", { className: "text-foreground/80 w-24 shrink-0 truncate py-1 font-mono text-xs font-medium", children: entry.tool }), _jsx("span", { className: "text-muted-foreground/60 truncate py-1 pr-2 font-mono text-xs", children: entry.summary })] }, entry.at))) })) : outputIsError ? (_jsx(ToolOutputFallback, { output: output, toolName: "session_read" })) : output ? (_jsx(OutputBlock, { text: output, markdown: true })) : null }));
+}
+ToolRegistry.register('session-read', SessionReadTool);

package/dist/session/tool/tools/session-search-tool.d.ts

@@ -0,0 +1,2 @@
+import type { ToolProps } from '../shared/types.js';
+export declare function SessionSearchTool({ call, defaultOpen, forceOpen, locked }: ToolProps): import("react").JSX.Element;

package/dist/session/tool/tools/session-search-tool.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BasicTool, ToolEmptyState, ToolOutputFallback, isErrorOutput, partInput, partOutput, partStatus, } from '../shared/infrastructure.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { parseSessionSearchHits } from '../../../_vendor/kortix-shared.js';
+import { MagnifyingGlassIcon as Search } from '@phosphor-icons/react';
+import { useMemo } from 'react';
+export function SessionSearchTool({ call, defaultOpen, forceOpen, locked }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const input = partInput(call);
+    const output = partOutput(call);
+    const status = partStatus(call);
+    const query = input.query || '';
+    const hits = useMemo(() => parseSessionSearchHits(output), [output]);
+    // `isErrorOutput` trims the whole output and runs `JSON.parse` over it. It is
+    // read from the body (not from a branch), so it re-scanned the payload on
+    // every render, open or collapsed.
+    const outputIsError = useMemo(() => isErrorOutput(output), [output]);
+    const noResults = status === 'completed' && hits.length === 0 && !outputIsError;
+    return (_jsx(BasicTool, { icon: _jsx(Search, { className: "size-3.5 shrink-0" }), trigger: {
+            title: tI18nComplete.raw('text25054dad693a'),
+            subtitle: query ? `"${query}"` : '',
+            args: hits.length > 0
+                ? [`${hits.length} results`]
+                : noResults
+                    ? [tI18nComplete.raw('text0ed6af34915f')]
+                    : [],
+        }, defaultOpen: defaultOpen, forceOpen: forceOpen, locked: locked, children: hits.length > 0 ? (_jsx("div", { "data-scrollable": true, className: "divide-border/20 max-h-96 divide-y overflow-auto", children: hits.map((h) => (_jsxs("div", { className: "hover:bg-muted/20 px-3 py-2 transition-colors", children: [_jsxs("div", { className: "mb-0.5 flex items-center gap-2", children: [_jsx("span", { className: "text-foreground flex-1 truncate text-xs font-medium", children: h.title || '(untitled)' }), _jsx("span", { className: "text-muted-foreground/40 bg-muted/40 shrink-0 rounded px-1 font-mono text-xs", children: h.score })] }), h.snippet && (_jsx("p", { className: "text-muted-foreground/60 line-clamp-1 text-xs", children: h.snippet })), _jsxs("div", { className: "text-muted-foreground/40 mt-0.5 flex items-center gap-2 text-xs", children: [_jsx("span", { className: "font-mono", children: h.id.slice(-12) }), _jsx("span", { children: h.updated })] })] }, h.id))) })) : noResults ? (_jsx(ToolEmptyState, { message: tI18nComplete('text1fc03af173f4', { value0: query }) })) : output ? (_jsx(ToolOutputFallback, { output: output, toolName: "session_search" })) : null }));
+}
+ToolRegistry.register('session-search', SessionSearchTool);

package/dist/session/tool/tools/session-spawn-tool.d.ts

@@ -0,0 +1,2 @@
+import type { ToolProps } from '../shared/types.js';
+export declare function SessionSpawnTool({ call, forceOpen }: ToolProps): import("react").JSX.Element;

package/dist/session/tool/tools/session-spawn-tool.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../primitives/button.js';
+import { SubSessionModal } from '../../thread/sub-session-modal.js';
+import { partInput, partStatus } from '../shared/infrastructure.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { SubAgentActivity, SubAgentStatusBanner, useSubAgentThread, } from '../shared/sub-agent.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { cn } from '../../../lib/utils.js';
+import { getChildSessionId, getToolInfo } from '../../../internal/session-types/index.js';
+import { capitalizeWords } from '../../../_vendor/kortix-shared.js';
+import { CpuIcon as Cpu, ArrowSquareOutIcon as ExternalLink } from '@phosphor-icons/react';
+import { useSessionIds } from '../../../providers/session-ids.js';
+import { useUiLink } from '../../../providers/ui-provider.js';
+import { useMemo, useState } from 'react';
+import { projectChildSessionHref } from './session-spawn-urls.js';
+import { subAgentCalls } from '@kortix/sdk';
+export function SessionSpawnTool({ call, forceOpen }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const input = partInput(call);
+    const status = partStatus(call);
+    const { projectId, sessionId } = useSessionIds();
+    const Link = useUiLink();
+    const agentName = capitalizeWords(input.agent || 'kortix');
+    const description = input.description || '';
+    const projectName = input.project || '';
+    const fullPrompt = input.prompt || '';
+    const childSessionId = useMemo(() => getChildSessionId(call), [call]);
+    const childThread = useSubAgentThread(childSessionId);
+    const childCalls = useMemo(() => subAgentCalls(childThread), [childThread]);
+    const [modalOpen, setModalOpen] = useState(false);
+    const isRunning = status === 'running' || status === 'pending';
+    const isCompleted = status === 'completed';
+    const childHref = useMemo(() => projectChildSessionHref({ projectId, sessionId }, childSessionId), [projectId, sessionId, childSessionId]);
+    const lastActivity = useMemo(() => {
+        if (childCalls.length === 0)
+            return null;
+        const last = childCalls[childCalls.length - 1];
+        const info = getToolInfo(last.name, partInput(last));
+        return info.title + (info.subtitle ? ` · ${info.subtitle}` : '');
+    }, [childCalls]);
+    // The fallback splits the ENTIRE spawn prompt into lines just to read the
+    // first one. A spawn prompt is routinely kilobytes, and this sits in the
+    // component body, so it ran on every render of a worker row.
+    const label = useMemo(() => description || projectName || fullPrompt.split('\n')[0]?.slice(0, 80) || '', [description, projectName, fullPrompt]);
+    const subtitle = isRunning ? (lastActivity ?? label) : label || undefined;
+    const hasPreview = Boolean(childSessionId);
+    const openPreview = () => {
+        if (hasPreview)
+            setModalOpen(true);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-component": "tool-trigger", className: cn('group text-muted-foreground/70 flex max-w-full items-center gap-1.5 py-0.5 text-xs transition-colors select-none', '[&>span:first-child>svg]:text-muted-foreground/50 [&>span:first-child>svg]:size-3.5'), children: [_jsx("span", { className: "shrink-0", children: _jsx(Cpu, {}) }), _jsxs("button", { type: "button", disabled: !hasPreview, onClick: openPreview, className: cn('flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden text-left', hasPreview ? 'cursor-pointer' : 'cursor-default'), children: [_jsxs("span", { className: "shrink-0 whitespace-nowrap", children: [tI18nComplete.raw('text2ee7054bf895'), " ", agentName] }), subtitle && (_jsx("span", { className: "text-muted-foreground min-w-0 truncate font-mono text-xs", children: subtitle })), isRunning && (_jsx("span", { className: "ml-auto size-2 shrink-0 animate-pulse rounded-full bg-current opacity-50" })), isCompleted && childCalls.length > 0 && (_jsxs("span", { className: "text-muted-foreground/60 ml-auto shrink-0 font-mono text-xs whitespace-nowrap", children: [childCalls.length, " ", tI18nComplete.raw('textb7595e2a8639')] }))] }), childHref && (_jsx(Button, { asChild: true, variant: "ghost", size: "xs", className: "h-6 shrink-0 gap-1 px-1.5 text-xs", children: _jsxs(Link, { href: childHref, prefetch: true, children: [tI18nComplete.raw('textb205bb47f81a'), _jsx(ExternalLink, { className: "size-3" })] }) }))] }), forceOpen && childCalls.length > 0 && (_jsx(SubAgentActivity, { childSessionId: childSessionId, calls: childCalls })), _jsx(SubAgentStatusBanner, { childSessionId: childSessionId, childThread: childThread }), childSessionId && (_jsx(SubSessionModal, { open: modalOpen, onOpenChange: setModalOpen, sessionId: childSessionId, title: tI18nComplete('textc65feb0006ea', {
+                    value0: agentName,
+                    value1: label ? tI18nComplete('textb581fd88ea24', { value0: label }) : '',
+                }) }))] }));
+}
+ToolRegistry.register('session-spawn', SessionSpawnTool);
+ToolRegistry.register('session-start-background', SessionSpawnTool);

package/dist/session/tool/tools/session-spawn-urls.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The query parameter that opens a child runtime session inside a project
+ * session route. Links written before W4 name it `oc`; readers still accept it.
+ */
+export declare const RUNTIME_SESSION_PARAM = "rs";
+/** The child runtime session a URL asks for, under its neutral or its pre-W4 name. */
+export declare function readRuntimeSessionParam(params: Pick<URLSearchParams, 'get'>): string | null;
+/** Remove the child runtime session from `params`, under both names. */
+export declare function deleteRuntimeSessionParam(params: URLSearchParams): void;
+/** `href` (a project session route) opened on the child runtime session `childSessionId`. */
+export declare function childSessionHref(href: string, childSessionId: string): string;
+/** The open session's URL with a child runtime session selected; null outside a session. */
+export declare function projectChildSessionHref(ids: {
+    projectId?: string;
+    sessionId?: string;
+}, childSessionId: string | undefined): string | null;

package/dist/session/tool/tools/session-spawn-urls.js

@@ -0,0 +1,26 @@
+import { uiRoutes } from '../../../lib/routes.js';
+/**
+ * The query parameter that opens a child runtime session inside a project
+ * session route. Links written before W4 name it `oc`; readers still accept it.
+ */
+export const RUNTIME_SESSION_PARAM = 'rs';
+const PRE_W4_RUNTIME_SESSION_PARAM = 'oc';
+/** The child runtime session a URL asks for, under its neutral or its pre-W4 name. */
+export function readRuntimeSessionParam(params) {
+    return params.get(RUNTIME_SESSION_PARAM) ?? params.get(PRE_W4_RUNTIME_SESSION_PARAM);
+}
+/** Remove the child runtime session from `params`, under both names. */
+export function deleteRuntimeSessionParam(params) {
+    params.delete(RUNTIME_SESSION_PARAM);
+    params.delete(PRE_W4_RUNTIME_SESSION_PARAM);
+}
+/** `href` (a project session route) opened on the child runtime session `childSessionId`. */
+export function childSessionHref(href, childSessionId) {
+    return `${href}${href.includes('?') ? '&' : '?'}${RUNTIME_SESSION_PARAM}=${encodeURIComponent(childSessionId)}`;
+}
+/** The open session's URL with a child runtime session selected; null outside a session. */
+export function projectChildSessionHref(ids, childSessionId) {
+    if (!ids.projectId || !ids.sessionId || !childSessionId)
+        return null;
+    return childSessionHref(uiRoutes().session(ids.projectId, ids.sessionId), childSessionId);
+}

package/dist/session/tool/tools/session-stats-tool.d.ts

@@ -0,0 +1,2 @@
+import type { ToolProps } from '../shared/types.js';
+export declare function SessionStatsTool({ call, defaultOpen, forceOpen }: ToolProps): import("react").JSX.Element;

package/dist/session/tool/tools/session-stats-tool.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BasicTool, isErrorOutput, partOutput, ToolOutputFallback, } from '../shared/infrastructure.js';
+import { OutputBlock } from '../shared/output-block.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { StackIcon as Layers } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useMemo } from 'react';
+export function SessionStatsTool({ call, defaultOpen, forceOpen }) {
+    const t = useTranslations('hardcodedUi.i18nComplete');
+    const output = partOutput(call);
+    // `isErrorOutput` trims a copy of the whole output and runs `JSON.parse` over
+    // it — asked once per render, whether the row is open or collapsed.
+    const outputIsError = useMemo(() => isErrorOutput(output), [output]);
+    return (_jsx(BasicTool, { icon: _jsx(Layers, { className: "size-3.5 shrink-0" }), trigger: { title: t.raw('textfe4aca69783d'), subtitle: '', args: [] }, defaultOpen: defaultOpen, forceOpen: forceOpen, children: outputIsError ? (_jsx(ToolOutputFallback, { output: output, toolName: "session_stats" })) : output ? (_jsx(OutputBlock, { text: output, markdown: true })) : null }));
+}
+ToolRegistry.register('session-stats', SessionStatsTool);

package/dist/session/tool/tools/show-tool.d.ts

@@ -0,0 +1,13 @@
+import type { ToolProps } from '../shared/types.js';
+export declare function ShowTool({ call, sessionId }: ToolProps): import("react").JSX.Element | null;
+/**
+ * The row a `show` keeps when its artifact did not load. A website preview
+ * names its target in the card header already, and the header owns refresh,
+ * so the row states the outcome and the next step. A plain link keeps
+ * "Open link": it is the only way to the target.
+ */
+export declare function ShowUnavailableNote({ isWebsitePreview, href, fill, }: {
+    isWebsitePreview: boolean;
+    href: string | null;
+    fill?: boolean;
+}): import("react").JSX.Element;

package/dist/session/tool/tools/show-tool.js

@@ -0,0 +1,197 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../primitives/button.js';
+import Hint from '../../../primitives/hint.js';
+import Loading from '../../../primitives/loading.js';
+import { SessionDotMatrix } from '../../../primitives/dot-matrix/session-dot-matrix.js';
+import { TextShimmer } from '../../../primitives/text-shimmer.js';
+import { isShowContentUnavailable, isShowPayloadEmpty, } from '@kortix/sdk';
+import { BoundActivateContext, InlineServicePreview, partInput, ServicePreviewActions, ToolRunningContext, ToolSurfaceContext, useToolNavigation, } from '../shared/infrastructure.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { buildHtmlStaticUrl, isShowHtmlFile, ServicePreviewViewport, ShowCarousel, ShowCarouselTabs, ShowContentRenderer, showDomain, ShowFileActions, showFileTypeIcon, ShowHoverCard, showHoverDetails, useServicePreview, } from '../shared/show-helpers.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { cn } from '../../../lib/utils.js';
+import { isAppRouteUrl, parseLocalhostUrl } from '@kortix/sdk';
+import { prefersPreviewLink, safeHttpUrl } from '../../../_vendor/kortix-shared.js';
+import { GlobeIcon as Globe } from '@phosphor-icons/react';
+import { createContext, useContext, useMemo, useState } from 'react';
+// The header owns a single preview state for the active item; the carousel gets it
+// through context so its viewport and the header controls drive the same iframe.
+const ActiveServicePreviewContext = createContext(null);
+// ShowCarousel only renders the active item, so the context preview (derived from
+// the same active item) is always the right one when this is asked to render.
+function CarouselServicePreview({ url, label }) {
+    const preview = useContext(ActiveServicePreviewContext);
+    if (preview)
+        return _jsx(ServicePreviewViewport, { preview: preview, slotHeight: true });
+    return _jsx(InlineServicePreview, { url: url, label: label });
+}
+export function ShowTool({ call, sessionId }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const input = partInput(call);
+    const running = useContext(ToolRunningContext);
+    const fill = useContext(ToolSurfaceContext) === 'panel';
+    const activate = useContext(BoundActivateContext);
+    const { enabled: navigationEnabled } = useToolNavigation();
+    const title = input.title || '';
+    const description = input.description || '';
+    const type = input.type || '';
+    const path = input.path || '';
+    const url = input.url || '';
+    const content = input.content || '';
+    const aspectRatio = input.aspect_ratio || '';
+    const language = input.language || '';
+    // Present only on a card served from saved history: the server's copy of
+    // `path`, so the card renders while the sandbox is off.
+    const attachment = input.attachment || '';
+    const items = useMemo(() => {
+        const raw = input.items;
+        if (!raw)
+            return null;
+        try {
+            const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
+            if (Array.isArray(parsed) && parsed.length > 0)
+                return parsed;
+        }
+        catch { }
+        return null;
+    }, [input.items]);
+    const isCarousel = !!items && items.length > 0;
+    const [carouselIndex, setCarouselIndex] = useState(0);
+    // Clamped: a grouped carousel can lose an item (a call that settled empty).
+    const activeIndex = isCarousel ? Math.max(0, Math.min(carouselIndex, items.length - 1)) : 0;
+    const currentItem = isCarousel ? items[activeIndex] || items[0] : null;
+    // Inline, a multi-item card names its items as header tabs (no footer strip)
+    // and folds the secondary actions into ⋯, so the header fits the tabs.
+    const inlineTabs = isCarousel && !fill && items.length > 1;
+    const [contentStatus, setContentStatus] = useState('loading');
+    const activeType = isCarousel ? currentItem?.type || '' : type;
+    const activeUrl = isCarousel ? currentItem?.url || '' : url;
+    const activePath = isCarousel ? currentItem?.path || '' : path;
+    const activeTitle = isCarousel ? currentItem?.title || '' : title;
+    // Resolving the preview target parses `activeUrl` as a URL twice
+    // (`parseLocalhostUrl`, then `isAppRouteUrl`) and scans `activePath` with the
+    // extension regex. None of it depends on render state, so uncached it ran on
+    // every frame of every `show` row still mounted in the transcript.
+    const resolvedPreviewUrl = useMemo(() => {
+        const hasLocalhostUrl = !!parseLocalhostUrl(activeUrl) && !isAppRouteUrl(activeUrl);
+        if (hasLocalhostUrl)
+            return activeUrl;
+        return isShowHtmlFile(activeType, activePath) ? buildHtmlStaticUrl(activePath) : '';
+    }, [activeUrl, activePath, activeType]);
+    const isWebsitePreview = !!resolvedPreviewUrl;
+    /**
+     * A file-backed show gets its actions INSIDE the renderer's own header —
+     * `ShowContentRenderer` routes them to each viewer's native toolbar slot, or
+     * supplies the row itself for the viewers that ship none. There is never a
+     * second header stacked above the viewer.
+     *
+     * On the inline (chat) surface the card header owns the toolbar, so these
+     * stay out of the renderer there and only land in the header row.
+     */
+    const fileActions = !isWebsitePreview && activePath ? (_jsx(ShowFileActions, { path: activePath, inPanel: fill, compact: inlineTabs })) : undefined;
+    const contentActions = !isCarousel && !isWebsitePreview && !activePath && content && activate && navigationEnabled ? (_jsx(Hint, { label: tHardcodedUi.raw('i18nComplete.textbb59775ca8ea'), side: "top", children: _jsx(Button, { type: "button", onClick: activate, size: "xs", className: "active:scale-[0.96]", children: tHardcodedUi.raw('i18nComplete.text324b134f57c7') }) })) : undefined;
+    const preview = useServicePreview(resolvedPreviewUrl, activeTitle || title || description || undefined, sessionId);
+    // Precomputed up front (pure derivations over state already resolved above)
+    // so both the loading body and the main body can feed the same safe title
+    // into the inline header — mirrors the `showLabel`-style precedence
+    // (title > description/domain fallback > generic label), never the raw
+    // path/URL. `showDomain` echoes its input verbatim when URL parsing fails,
+    // so the type==='url' fallback is gated through `safeHttpUrl` first (the
+    // same pattern show-content-renderer.tsx uses): a relative or non-http(s)
+    // value never reaches the always-visible subtitle — it degrades to 'Link'.
+    const safeSubtitleUrl = useMemo(() => (type === 'url' ? safeHttpUrl(url) : null), [type, url]);
+    const subtitleDomain = useMemo(() => (safeSubtitleUrl ? showDomain(safeSubtitleUrl) : ''), [safeSubtitleUrl]);
+    // A carousel's header names the ACTIVE item, so paging updates it. The
+    // call's own title is the fallback, then the item count.
+    const activeItemLabel = currentItem
+        ? currentItem.title || currentItem.path?.split('/').pop()
+        : '';
+    const displayTitle = isCarousel
+        ? activeItemLabel || title || `${items.length} items`
+        : title || (type === 'error' ? 'Error' : type === 'url' ? subtitleDomain || 'Link' : 'Output');
+    const hoverTarget = {
+        path: activePath,
+        url: activeUrl,
+        title: activeTitle,
+    };
+    // While the app behind a website preview builds, binds or reconnects, the
+    // header shows the preview's own dot-matrix glyph in place of the desktop
+    // icon. The title or URL seeds it, so each preview keeps one glyph.
+    const startingIcon = isWebsitePreview && preview.appStarting ? (_jsx(SessionDotMatrix, { sessionId: preview.matrixSeed, size: 14, className: "shrink-0" })) : null;
+    // While the card's preview loads, every port tab shows its own glyph,
+    // seeded by that tab's title or URL.
+    const portTabIcon = (item) => parseLocalhostUrl(item.url || '') ? (_jsx(SessionDotMatrix, { sessionId: item.title || item.url, size: 14, className: "shrink-0" })) : null;
+    const headerIcon = isCarousel ? currentItem?.type || 'image' : isWebsitePreview ? 'url' : type;
+    // Inline card header owns the toolbar. Panel keeps the actions inside the
+    // renderer / website header as before.
+    const inlineToolbar = isWebsitePreview ? (_jsx(ServicePreviewActions, { preview: preview, compact: inlineTabs })) : (fileActions || contentActions);
+    // `prefersPreviewLink` parses the candidate URL; it is an argument to the
+    // availability gate below, so it was re-parsed on every render.
+    const previewIsLinkOnly = useMemo(() => prefersPreviewLink(preview.previewUrl), [preview.previewUrl]);
+    // Nothing was handed over: no items, no path, no url, no content — only
+    // metadata about an artifact that never arrived. Every branch of
+    // `ShowContentRenderer` is guarded on one of those fields, so the cascade
+    // falls through to a fallback with all four sub-conditions false and the card
+    // renders as a header over an empty box. Draw nothing instead.
+    //
+    // The chat transcript drops the part one level higher (`isEmptyShowPart`, so
+    // no blank row or rail is left behind); this is the same verdict applied at
+    // the renderer, which is what the Action Panel and /debug/tools reach.
+    //
+    // `running` is the guard, not the status: a call still streaming its
+    // arguments has an empty input because the input has not arrived yet, and its
+    // header carries the spinner that says so.
+    const hasNothingToShow = useMemo(() => isShowPayloadEmpty({ items, path, url, content }), [items, path, url, content]);
+    if (!running && hasNothingToShow)
+        return null;
+    const unavailable = isShowContentUnavailable({
+        running,
+        isCarousel,
+        contentStatus,
+        isWebsitePreview,
+        previewHasError: preview.hasError,
+        previewIsLinkOnly,
+    });
+    // A file-backed show learns it recovered only from `ShowContentRenderer`'s
+    // `onStatusChange`. Unmounting the renderer on 'error' left nothing to report
+    // 'ready' again, so Refresh refetched the file and the note stayed until a
+    // hard reload (KRTX-2941). The renderer stays mounted, hidden, under the note.
+    const fileUnavailable = unavailable && !isWebsitePreview;
+    let body;
+    if (running && !type && !items) {
+        // Only the panel surface still needs the bespoke loading card. Inline, the
+        // card header carries the running spinner.
+        body = fill ? (_jsx("div", { className: "bg-card flex h-full items-center justify-center overflow-hidden", children: _jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx(Loading, { className: "text-muted-foreground size-4" }), _jsx(TextShimmer, { duration: 1, spread: 2, className: "text-sm", children: tHardcodedUi.raw('componentsSessionToolRenderers.line4935JsxTextPreparingOutput') })] }) })) : null;
+    }
+    else if (unavailable && isWebsitePreview) {
+        // The artifact didn't load (renamed/deleted file, dead preview). Never
+        // vanish — an invisible `show` reads as "the tool never ran". A quiet
+        // one-line note keeps the action in the transcript without resurrecting
+        // the big "File not found" card this gate was built to avoid (#3966).
+        body = _jsx(ShowUnavailableNote, { isWebsitePreview: true, href: null, fill: fill });
+    }
+    else {
+        body = (_jsxs("div", { className: cn('overflow-hidden', fill ? 'flex h-full flex-col' : 'min-h-0 flex-1'), children: [isWebsitePreview && fill && (_jsxs("div", { className: "border-border flex shrink-0 items-center justify-between gap-3 border-b px-4 py-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(Globe, { className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: "text-foreground truncate text-xs font-medium", children: preview.displayLabel })] }), _jsx(ServicePreviewActions, { preview: preview })] })), _jsx("div", { className: cn(fill && 'flex min-h-0 flex-1 flex-col'), children: isCarousel ? (_jsx(ActiveServicePreviewContext.Provider, { value: isWebsitePreview ? preview : null, children: _jsx(ShowCarousel, { items: items, LocalhostPreview: CarouselServicePreview, onIndexChange: setCarouselIndex, activeIndex: activeIndex, hideNav: inlineTabs, fill: fill, toolbarActions: fill ? fileActions : undefined }) })) : isWebsitePreview ? (_jsx(ServicePreviewViewport, { preview: preview })) : (_jsxs(_Fragment, { children: [fileUnavailable && (_jsx(ShowUnavailableNote, { isWebsitePreview: false, href: safeHttpUrl(activeUrl), fill: fill })), _jsx("div", { className: cn(fill && 'min-h-0 flex-1 overflow-hidden', fileUnavailable && 'hidden'), children: _jsx(ShowContentRenderer, { type: type, title: title, description: description, path: path, url: url, content: content, language: language, aspectRatio: aspectRatio, attachment: attachment, LocalhostPreview: InlineServicePreview, fill: fill, onStatusChange: setContentStatus, toolbarActions: fill ? fileActions : undefined }) }), description && !title && !fileUnavailable && (_jsx("div", { className: "border-border/15 shrink-0 border-t px-5 py-3", children: _jsx("p", { className: "text-muted-foreground text-xs", children: description }) }))] })) })] }));
+    }
+    // Panel surface: `fillsPanel` (tool-part-renderer.tsx) special-cases show/
+    // show-user because the preview IS the payload — keep it exactly as before,
+    // filling the pane with no shell wrapper.
+    if (fill)
+        return body;
+    // Inline (chat) surface: plain card — header row + always-visible payload.
+    return (_jsxs("div", { "data-component": "tool-trigger", className: "bg-secondary flex w-full flex-col overflow-hidden rounded-lg border-[0.5px]", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5", children: [inlineTabs ? (_jsx(ShowCarouselTabs, { items: items, activeIndex: activeIndex, onSelect: setCarouselIndex, label: title, tabIcon: startingIcon ? portTabIcon : undefined })) : (_jsx(ShowHoverCard, { target: hoverTarget, children: _jsxs("div", { className: "text-foreground flex min-w-0 cursor-pointer items-center gap-2 px-1 text-xs [&>svg]:size-4", children: [(running && !type && !items) || currentItem?.status === 'pending' ? (_jsx(Loading, { className: "text-muted-foreground size-4 shrink-0" })) : ((startingIcon ??
+                                    showFileTypeIcon(headerIcon, activePath || undefined, undefined, activeUrl))), _jsx("span", { className: "min-w-0 truncate", title: showHoverDetails(hoverTarget) ? undefined : displayTitle, children: displayTitle })] }) })), inlineToolbar ? (_jsx("div", { className: "flex shrink-0 items-center gap-1", children: inlineToolbar })) : null] }), _jsx("div", { className: "min-h-0 overflow-hidden", children: body })] }));
+}
+/**
+ * The row a `show` keeps when its artifact did not load. A website preview
+ * names its target in the card header already, and the header owns refresh,
+ * so the row states the outcome and the next step. A plain link keeps
+ * "Open link": it is the only way to the target.
+ */
+export function ShowUnavailableNote({ isWebsitePreview, href, fill = false, }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    return (_jsxs("div", { className: cn('flex flex-col items-start gap-0.5 px-3 py-3 text-xs', fill && 'h-full justify-center px-6'), children: [_jsx("span", { className: "text-foreground font-medium", children: tHardcodedUi.raw('i18nComplete.textb99fa6c06150') }), isWebsitePreview ? (_jsx("span", { className: "text-muted-foreground", children: tHardcodedUi.raw('i18nComplete.showPreviewUnavailableHint') })) : null, href && (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-foreground decoration-border mt-1 underline underline-offset-2 transition-colors hover:decoration-current", children: tHardcodedUi.raw('i18nComplete.textaab63f85c7f1') }))] }));
+}
+ToolRegistry.register('show', ShowTool);
+ToolRegistry.register('show-user', ShowTool);

package/dist/session/tool/tools/skill-tool.d.ts

@@ -0,0 +1,10 @@
+import type { ToolProps } from '../shared/types.js';
+/**
+ * A skill call is the same disclosure as Read / Edit: verb, target, flush card.
+ *
+ * Title is the tool ("Skill"). Subtitle is the skill name, and clicking it
+ * opens `SKILL.md` in the session preview — the same affordance a filename
+ * has on a read row. The document itself sits in {@link ToolMarkdownCard};
+ * listed files sit in {@link ToolResultCard}, matching a directory read.
+ */
+export declare function SkillTool({ call, defaultOpen, forceOpen, locked }: ToolProps): import("react").JSX.Element;

package/dist/session/tool/tools/skill-tool.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BasicTool, parseJsonFailure, partInput, partOutput, partStatus, ToolMarkdownCard, ToolOutputFallback, } from '../shared/infrastructure.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { ToolResultCard } from '../shared/result-card.js';
+import { extractSkillContent, extractSkillFiles, skillDocumentPath, skillInputDir, } from '@kortix/sdk';
+import { useFilePreviewStore } from '../../../internal/stores/file-preview-store.js';
+import { skillDocumentBody } from '../../../_vendor/kortix-shared.js';
+import { FileDashedIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useCallback, useMemo } from 'react';
+/**
+ * A skill call is the same disclosure as Read / Edit: verb, target, flush card.
+ *
+ * Title is the tool ("Skill"). Subtitle is the skill name, and clicking it
+ * opens `SKILL.md` in the session preview — the same affordance a filename
+ * has on a read row. The document itself sits in {@link ToolMarkdownCard};
+ * listed files sit in {@link ToolResultCard}, matching a directory read.
+ */
+export function SkillTool({ call, defaultOpen, forceOpen, locked }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const input = partInput(call);
+    const status = partStatus(call);
+    const output = partOutput(call);
+    const rawName = typeof input.name === 'string' ? input.name.trim() : '';
+    // `skillDocumentPath` refuses the 'skill' placeholder as a directory name, so
+    // the fallback is safe to pass through.
+    const skillName = rawName || 'skill';
+    const skillDir = skillInputDir(input);
+    const skillContent = useMemo(() => extractSkillContent(output), [output]);
+    const skillFiles = useMemo(() => extractSkillFiles(output), [output]);
+    const documentContent = useMemo(() => skillDocumentBody(skillContent), [skillContent]);
+    const openPreview = useFilePreviewStore((s) => s.openPreview);
+    const docPath = useMemo(() => skillDocumentPath(output, skillDir, skillName), [output, skillDir, skillName]);
+    const openSkillDoc = useCallback(() => {
+        if (docPath)
+            openPreview(docPath);
+    }, [openPreview, docPath]);
+    const isCompleted = status === 'completed';
+    const failure = useMemo(() => (isCompleted ? parseJsonFailure(output) : null), [isCompleted, output]);
+    const hasBody = isCompleted && (documentContent || skillFiles.length > 0);
+    return (_jsx(BasicTool, { icon: _jsx(FileDashedIcon, { className: "size-3.5 shrink-0" }), trigger: {
+            title: tI18nComplete.raw('text6df1bb18a59a'),
+            subtitle: rawName || undefined,
+        }, onSubtitleClick: docPath ? openSkillDoc : undefined, defaultOpen: defaultOpen, forceOpen: forceOpen, locked: locked, className: "overflow-hidden p-0", children: failure ? (_jsx(ToolOutputFallback, { output: output, toolName: "skill" })) : hasBody ? (_jsxs(_Fragment, { children: [documentContent ? _jsx(ToolMarkdownCard, { code: documentContent }) : null, skillFiles.length > 0 ? (_jsx(ToolResultCard, { bodyClassName: "space-y-0.5 px-2 py-1.5", children: skillFiles.map((file) => (_jsxs("div", { className: "text-muted-foreground/80 flex items-center gap-1.5 font-mono text-xs", children: [_jsx(FileDashedIcon, { className: "text-muted-foreground/40 size-3 shrink-0" }), _jsx("span", { className: "truncate", children: file })] }, file))) })) : null] })) : null }));
+}
+ToolRegistry.register('skill', SkillTool);

package/dist/session/tool/tools/task-delete-tool.d.ts

@@ -0,0 +1,2 @@
+import type { ToolProps } from '../shared/types.js';
+export declare function TaskDeleteTool({ call, defaultOpen, forceOpen }: ToolProps): import("react").JSX.Element;

package/dist/session/tool/tools/task-delete-tool.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BasicTool, isErrorOutput, partOutput, partStatus, ToolOutputFallback, } from '../shared/infrastructure.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { TrashIcon as Trash2 } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useMemo } from 'react';
+export function TaskDeleteTool({ call, defaultOpen, forceOpen }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const output = partOutput(call);
+    const status = partStatus(call);
+    // `isErrorOutput` trims a copy of the whole output and runs `JSON.parse` over
+    // it; this sits in the body, so it ran on every render of the row.
+    const outputIsError = useMemo(() => isErrorOutput(output), [output]);
+    const isError = status === 'completed' && outputIsError;
+    return (_jsx(BasicTool, { icon: _jsx(Trash2, { className: "size-3.5 shrink-0" }), trigger: {
+            title: tHardcodedUi.raw('i18nComplete.text3baf55478483'),
+            subtitle: isError ? 'failed' : undefined,
+        }, defaultOpen: defaultOpen, forceOpen: forceOpen, children: isError ? (_jsx(ToolOutputFallback, { output: output, toolName: "task_delete" })) : (_jsx("div", { className: "text-muted-foreground px-3 py-2 text-xs leading-relaxed", children: tHardcodedUi.raw('componentsSessionToolRenderers.line6903JsxTextTaskRemoved') })) }));
+}
+ToolRegistry.register('task-delete', TaskDeleteTool);

package/dist/session/tool/tools/task-done-tool.d.ts

@@ -0,0 +1,2 @@
+import type { ToolProps } from '../shared/types.js';
+export declare function TaskDoneTool({ call, defaultOpen, forceOpen }: ToolProps): import("react").JSX.Element;

package/dist/session/tool/tools/task-done-tool.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BasicTool, partInput } from '../shared/infrastructure.js';
+import { ToolRegistry } from '../shared/registry.js';
+import { CheckIcon as Check } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+export function TaskDoneTool({ call, defaultOpen, forceOpen }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const input = partInput(call);
+    const result = input.result || '';
+    return (_jsx(BasicTool, { icon: 
+        // `size-4`, not `size-5`: this is the only leading icon in the whole
+        // registry that is a tinted chip rather than a bare glyph, and both
+        // surfaces size their leading slot at 16px — the inline row's wrapper
+        // span and the panel row's icon box. A 20px chip overflowed both
+        // (the `[&>svg]:size-4` normalizer only reaches an svg, never a span).
+        _jsx("span", { className: "bg-kortix-green/15 flex size-4 shrink-0 items-center justify-center rounded-sm", children: _jsx(Check, { className: "text-kortix-green size-3 shrink-0" }) }), trigger: { title: tI18nComplete.raw('text6d291878fb81') }, defaultOpen: defaultOpen, forceOpen: forceOpen, children: result && (_jsx("div", { className: "text-muted-foreground px-3 py-2 text-xs leading-relaxed text-pretty", children: result })) }));
+}
+ToolRegistry.register('task-done', TaskDoneTool);

package/dist/session/tool/tools/task-list-tool.d.ts

@@ -0,0 +1,2 @@
+import type { ToolProps } from '../shared/types.js';
+export declare function TaskListTool({ call, forceOpen }: ToolProps): import("react").JSX.Element;