@kortix/ui 0.14.3 → 0.14.5

package/dist/files/renderers/show-content-renderer.js

@@ -0,0 +1,707 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+/**
+ * ShowContentRenderer — THE single source-of-truth for rendering
+ * show tool content inline in the session chat and side panel.
+ *
+ * Architecture:
+ *  Binary files (image, video, audio, docx, pptx)
+ *    → loaded via useBinaryBlob (/file/raw endpoint, direct binary fetch)
+ *    → rendered with shared leaf renderers (ImageRenderer, PdfRenderer, etc.)
+ *
+ *  Text data files (csv)
+ *    → loaded via useFileContent (SDK text read)
+ *    → rendered with CsvRenderer
+ *
+ *  Self-loading (xlsx)
+ *    → XlsxRenderer handles its own data loading
+ *
+ *  Generic file (json, yaml, ts, py, etc.)
+ *    → delegated to FileContentRenderer (handles text/code rendering)
+ *
+ *  Content-based (text, code, markdown, html, error)
+ *    → rendered inline, no SDK calls needed
+ *
+ *  URL / localhost
+ *    → hero link card or proxied iframe
+ */
+import { TextWithPaths } from '../../internal/components/clickable-path.js';
+import { CodeHighlight } from '../../markdown/code/index.js';
+import { MarkdownFrontmatterCard, parseFrontmatter, } from '../../markdown/markdown-frontmatter.js';
+import { UnifiedMarkdown } from '../../markdown/unified-markdown.js';
+import { Button } from '../../primitives/button.js';
+import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
+import Loading from '../../primitives/loading.js';
+import { TextShimmer } from '../../primitives/text-shimmer.js';
+import { framePolicy } from '../viewer/preview-policy.js';
+import { useBinaryBlob } from '../runtime/hooks/use-binary-blob.js';
+import { sessionDriveMountPath } from '../../internal/files/session-drive-files.js';
+import { useFileContent } from '../runtime/hooks/use-file-content.js';
+import { useHeicBlob } from '../../internal/hooks/use-heic-url.js';
+import { useLocalizedUiCatalog } from '../../i18n/ui-catalog/use-localized-ui-catalog.js';
+import { safeHttpUrl } from '../../_vendor/kortix-shared.js';
+import { cn } from '../../lib/utils.js';
+import { isHeicFile } from '../../internal/lib/utils/heic-convert.js';
+import { safeScrollTo } from '../../internal/lib/utils/safe-scroll-to.js';
+import { isAppRouteUrl, parseLocalhostUrl } from '@kortix/sdk';
+import { buildStaticFileLocalUrl, isSessionAttachmentRef } from '@kortix/sdk';
+import { WarningIcon as AlertTriangle, CaretLeftIcon as ChevronLeft, CaretRightIcon as ChevronRight, ArrowSquareOutIcon as ExternalLink, FileIcon, FileTextIcon as FileText, FileXIcon as FileWarning, GlobeIcon as Globe, MusicNotesIcon as Music, } from '@phosphor-icons/react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ImageRenderer } from './image-renderer.js';
+import { MermaidDiagram } from './mermaid/mermaid-diagram.js';
+import { ViewerFrame } from './shared/viewer-frame.js';
+import { resolveShowType, shouldRenderFromSandboxFile } from './show-type-utils.js';
+import { VideoRenderer } from './video-renderer.js';
+// ── Lazy-load heavy renderers ──────────────────────────────────────────────
+const PdfRenderer = lazy(() => import('./pdf/pdf-renderer.js').then((m) => ({ default: m.PdfRenderer })));
+const CsvRenderer = lazy(() => import('./csv/csv-renderer.js').then((m) => ({ default: m.CsvRenderer })));
+const XlsxRenderer = lazy(() => import('./xlsx/xlsx-renderer.js').then((m) => ({ default: m.XlsxRenderer })));
+const DocxRenderer = lazy(() => import('./docx/docx-renderer.js').then((m) => ({ default: m.DocxRenderer })));
+const PptxRenderer = lazy(() => import('./pptx-renderer.js').then((m) => ({ default: m.PptxRenderer })));
+// The whole file viewer (CodeMirror, diffs, HTML preview). Show rows render in
+// every transcript — the marketing home demo included — and most never reach
+// the generic-file branch below.
+const FileContentRenderer = lazy(() => import('../runtime/components/file-content-renderer.js').then((m) => ({
+    default: m.FileContentRenderer,
+})));
+// ── Extension regexes + type resolution (pure, unit-tested sibling module) ──
+export { getShowFileCategory, resolveShowType } from './show-type-utils.js';
+// ── Helpers ────────────────────────────────────────────────────────────────
+export function showFavicon(url) {
+    try {
+        return `https://www.google.com/s2/favicons?domain=${new URL(url).hostname}&sz=128`;
+    }
+    catch {
+        return null;
+    }
+}
+export function showDomain(url) {
+    try {
+        return new URL(url).hostname.replace('www.', '');
+    }
+    catch {
+        return url;
+    }
+}
+export function showAspectRatioToCSS(ar) {
+    if (!ar || ar === 'auto')
+        return undefined;
+    const [w, h] = ar.split(':').map(Number);
+    if (w && h)
+        return `${w}/${h}`;
+    return undefined;
+}
+function isLocalSandboxFilePath(value) {
+    if (!value)
+        return false;
+    if (/^(https?:|data:|blob:)/i.test(value))
+        return false;
+    // `drives/me/a.gif` is the session's drive mount written relative; the file
+    // client reads it through the drive API.
+    return value.startsWith('/') || sessionDriveMountPath(value) !== null;
+}
+/** Types loaded via useBinaryBlob (/file/raw, direct binary fetch) */
+const BLOB_TYPES = new Set(['image', 'video', 'audio', 'docx', 'pptx']);
+/**
+ * Where a show's binary viewer reads its bytes from, or null for no blob read.
+ *
+ * A `kortix-attachment://` copy recorded by saved history wins over the
+ * sandbox path: it is exactly what the agent showed, and it needs no box. PDF
+ * joins only when such a copy exists, because its sandbox read is a base64
+ * text read while a stored copy is bytes.
+ *
+ * NEVER HTML. An `html` or `html-file` show renders through the sandbox's
+ * static server on its own isolated preview origin. A blob made from a stored
+ * copy would be same-origin with the app, so agent-authored script would run
+ * with the user's session. Keeping HTML out of this function is what keeps it
+ * out of the app origin.
+ *
+ * For every type it DOES serve, a stored copy adds no exposure: those viewers
+ * already turn the sandbox's bytes into a same-origin blob, and the copy is
+ * byte-identical to what that read would return.
+ */
+export function showBlobSource(input) {
+    const stored = isSessionAttachmentRef(input.attachment) ? input.attachment : null;
+    const binary = BLOB_TYPES.has(input.effectiveType) || (input.effectiveType === 'pdf' && stored !== null);
+    if (!binary)
+        return null;
+    return stored ?? input.sandboxPath;
+}
+function RendererFallback({ className }) {
+    return (_jsx("div", { className: cn('flex items-center justify-center', className || 'h-[420px]'), children: _jsx(Loading, { className: "text-muted-foreground/40 h-4 w-4" }) }));
+}
+function LoadError({ message }) {
+    return (_jsxs("div", { className: "flex h-[300px] flex-col items-center justify-center gap-2 p-8 text-center", children: [_jsx(FileWarning, { className: "text-muted-foreground/30 h-6 w-6" }), _jsx("p", { className: "text-muted-foreground/60 max-w-sm text-xs", children: message })] }));
+}
+function FileCard({ title, fileName, path }) {
+    return (_jsxs("div", { className: "flex items-center gap-4 px-5 py-5", children: [_jsx("div", { className: "bg-muted/20 flex size-12 items-center justify-center rounded-xl", children: _jsx(FileText, { className: "text-muted-foreground/40 size-6" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-foreground truncate text-sm font-medium", children: title || fileName }), _jsx("div", { className: "text-muted-foreground/50 mt-0.5 truncate font-mono text-xs", children: path })] })] }));
+}
+// ── Component ──────────────────────────────────────────────────────────────
+export function ShowContentRenderer({ type, title = '', description = '', path = '', url = '', content = '', language = '', aspectRatio = '', attachment, LocalhostPreview, fill = false, onStatusChange, toolbarActions, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const arCSS = showAspectRatioToCSS(aspectRatio);
+    // ── Height presets — fill the panel vs. the compact inline card ──
+    // `mediaH`   → visual media (image/video/pdf/sheets/docs/generic file)
+    // `textWrap` → scrollable text/code/markdown surfaces
+    const mediaH = fill ? 'h-full' : 'h-[420px]';
+    const textWrap = fill ? 'px-5 py-5 h-full overflow-auto' : 'px-5 py-5 max-h-96 overflow-auto';
+    // In fill mode the show card owns its own internal scroll, so we drop the
+    // `data-scrollable` hook the panel uses to uncap inline content (otherwise the
+    // panel body would scroll the whole card instead of the content within it).
+    const scrollableAttr = fill ? undefined : true;
+    // ── Resolve effective type ──
+    // `type: 'file'` auto-detects from extension; a textish declaration
+    // (text/markdown/code) is upgraded when the path points at a rich file type
+    // (csv/xlsx/docx/pdf/…), since agents often mislabel binary/data files as
+    // markdown or text. See `resolveShowType`.
+    const effectiveType = useMemo(() => resolveShowType(type, path), [type, path]);
+    // ── Category flags ──
+    const isImage = effectiveType === 'image';
+    const isVideo = effectiveType === 'video';
+    const isAudio = effectiveType === 'audio';
+    const isPdf = effectiveType === 'pdf';
+    const isCsv = effectiveType === 'csv';
+    const isXlsx = effectiveType === 'xlsx';
+    const isDocx = effectiveType === 'docx';
+    const isPptx = effectiveType === 'pptx';
+    const isCode = effectiveType === 'code';
+    const isMarkdown = effectiveType === 'markdown';
+    const isText = effectiveType === 'text';
+    const isHtml = effectiveType === 'html';
+    const isHtmlFile = effectiveType === 'html-file';
+    const isMermaid = effectiveType === 'mermaid';
+    const hasLocalhostUrl = !!parseLocalhostUrl(url) && !isAppRouteUrl(url);
+    const safeExternalUrl = safeHttpUrl(url);
+    // ── Sandbox file path normalization ──
+    // The show tool backend resolves paths to absolute (e.g. /workspace/foo.png).
+    // The /file/raw endpoint on kortix-master accepts absolute paths and validates
+    // them against ALLOWED_ROOTS (/workspace, /opt, /tmp, /home).
+    // Keep the path absolute — do NOT strip /workspace/ prefix.
+    const isLocalPath = path ? isLocalSandboxFilePath(path) : false;
+    const sandboxPath = useMemo(() => {
+        if (!path || !isLocalPath)
+            return null;
+        return path;
+    }, [path, isLocalPath]);
+    const fileName = useMemo(() => path.split('/').pop() || '', [path]);
+    /**
+     * ── One header, never two ──────────────────────────────────────────────
+     *
+     * PDF, DOCX, XLSX and CSV each draw a real toolbar (thumbnails, zoom, search,
+     * a file menu). Inline in the chat column that toolbar is noise: nobody zooms
+     * or searches a 420px card, and stacking our actions above it produced eight
+     * controls and two header rows for one small file.
+     *
+     * So the surface decides which single header exists:
+     *   inline  → the viewer goes `compact` (its toolbar hidden) and `ViewerFrame`
+     *             is the one header, carrying name + refresh/full screen/Preview
+     *   panel   → the viewer's own toolbar is the one header, and our actions ride
+     *             in its native `toolbarActions` slot beside zoom and search
+     *
+     * Renderers with no toolbar of their own (PPTX, and the plain-text/code
+     * viewer whose header is suppressed) use `ViewerFrame` on both surfaces —
+     * it is their only header, so it can never double up.
+     */
+    const framed = (node) => fill ? (node) : (_jsx(ViewerFrame, { actions: toolbarActions, children: node }));
+    /** For renderers that never draw a header themselves. */
+    const alwaysFramed = (node) => (_jsx(ViewerFrame, { actions: toolbarActions, children: node }));
+    /** Props every toolbar-owning renderer takes: hide its chrome inline, hand it
+     *  the actions in the panel. Exactly one of the two is ever in play. */
+    const viewerChrome = { compact: !fill, toolbarActions: fill ? toolbarActions : undefined };
+    // ═════════════════════════════════════════════════════════════════════════
+    // Data loading hooks — called unconditionally (React rules), gated by path
+    // ═════════════════════════════════════════════════════════════════════════
+    // Binary blob: ONE hook for image, video, audio, pdf, docx, pptx
+    // Uses /file/raw endpoint (direct binary fetch via authenticatedFetch),
+    // NOT the SDK text-read endpoint. More reliable for binary content.
+    // The stored copy wins when saved history recorded one: it is exactly what
+    // the agent showed, and it needs no box. PDF joins the blob path only then —
+    // its sandbox read is a base64 text read, but a stored copy is bytes.
+    const storedCopy = isSessionAttachmentRef(attachment) ? attachment : null;
+    const blobFilePath = showBlobSource({ effectiveType, attachment, sandboxPath });
+    const { blobUrl, blob: rawBlob, isLoading: blobLoading, error: blobError, } = useBinaryBlob(blobFilePath);
+    // HEIC conversion — converts the raw blob to renderable JPEG
+    const isHeic = isImage && isHeicFile(fileName);
+    const { url: heicImageUrl, isConverting: heicConverting } = useHeicBlob(isHeic ? rawBlob : null, fileName);
+    // PDF: base64 content via SDK, decoded by PdfRenderer into a Blob URL.
+    const pdfLoadPath = isPdf && sandboxPath && !storedCopy ? sandboxPath : null;
+    const { data: pdfData, isLoading: pdfLoading, error: pdfError, } = useFileContent(pdfLoadPath, { enabled: !!pdfLoadPath });
+    // CSV/TSV: text content via SDK
+    const csvLoadPath = isCsv && !content && sandboxPath ? sandboxPath : null;
+    const { data: csvData, isLoading: csvLoading } = useFileContent(csvLoadPath, {
+        enabled: !!csvLoadPath,
+    });
+    // HTML blob URL (inline content, no SDK call).
+    //
+    // Minted INSIDE the effect, never in render. `URL.createObjectURL` pins its
+    // Blob until revoked, so the revoke has to pair with the create — and the
+    // pairing only holds if the create is what the cleanup can undo. A
+    // `useMemo` cannot be: React StrictMode (on by default; next.config.ts does
+    // not disable it) runs mount → cleanup → mount in a single commit with NO
+    // re-render in between, so the cleanup revoked the URL the memo had already
+    // handed to the iframe, and the second setup had nothing to replace it
+    // with. The preview then rendered from a dead blob — blank in dev, and racy
+    // enough (it depends on whether the iframe finished loading before paint) to
+    // read as flaky rather than broken.
+    //
+    // Creating it here makes each URL the private property of one effect run:
+    // the cleanup revokes exactly the URL its own setup made, and the state
+    // update that follows re-renders the iframe onto the live one.
+    const [htmlBlobUrl, setHtmlBlobUrl] = useState(null);
+    useEffect(() => {
+        // No reset needed on the way out of the HTML branch: the previous run's
+        // cleanup below already nulled whatever it had minted.
+        if (!isHtml || !content)
+            return;
+        const objectUrl = URL.createObjectURL(new Blob([content], { type: 'text/html' }));
+        setHtmlBlobUrl(objectUrl);
+        return () => {
+            URL.revokeObjectURL(objectUrl);
+            // Never leave a revoked URL as the rendered `src`. On a content change
+            // the next setup overwrites this immediately, so the null is only ever
+            // observed when this effect is tearing down for good.
+            setHtmlBlobUrl((current) => (current === objectUrl ? null : current));
+        };
+    }, [isHtml, content]);
+    // Error fallback for FileContentRenderer (used for generic 'file' type)
+    const fileErrorFallback = useCallback((_error, fp) => {
+        const name = fp.split('/').pop() || fp;
+        return (_jsxs("div", { className: "flex h-full items-center gap-4 px-5 py-5", children: [_jsx("div", { className: "bg-muted/20 flex size-12 items-center justify-center rounded-xl", children: _jsx(FileText, { className: "text-muted-foreground/40 size-6" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-foreground truncate text-sm font-medium", children: title || name }), _jsx("div", { className: "text-muted-foreground/50 mt-0.5 truncate font-mono text-xs", children: path })] })] }));
+    }, [title, path]);
+    // ═════════════════════════════════════════════════════════════════════════
+    // Load-status reporting — lets the parent (ShowTool) hide a dead reference
+    // (renamed/deleted file → 404) instead of rendering a broken card.
+    // `null` = a child renderer owns the reporting (the generic-file branch
+    // forwards `onStatusChange` straight to FileContentRenderer below). The branch
+    // selection here mirrors the render cascade further down.
+    // ═════════════════════════════════════════════════════════════════════════
+    const ownStatus = useMemo(() => {
+        // Generic file → FileContentRenderer reports via its own onStatusChange.
+        if (effectiveType === 'file' && path && sandboxPath)
+            return null;
+        // A Mermaid file with no inline source renders through the same branch.
+        if (isMermaid && !content && path && sandboxPath)
+            return null;
+        // Binary/media types backed by useBinaryBlob — and a PDF whose stored copy
+        // is read the same way.
+        if ((isImage || isVideo || isAudio || isDocx || isPptx || (isPdf && storedCopy)) && path) {
+            if (blobError)
+                return 'error';
+            if (blobLoading || (isImage && heicConverting))
+                return 'loading';
+            return 'ready';
+        }
+        // PDF backed by useFileContent (base64).
+        if (isPdf && path) {
+            if (pdfError)
+                return 'error';
+            if (pdfLoading)
+                return 'loading';
+            return 'ready';
+        }
+        // CSV backed by useFileContent (text).
+        if (isCsv && path)
+            return csvLoading ? 'loading' : 'ready';
+        // Everything else (url link, xlsx self-loading, code/markdown/text/html/
+        // error, localhost/html iframe, fallback) renders without a fetch we track.
+        return 'ready';
+    }, [
+        effectiveType,
+        path,
+        sandboxPath,
+        isMermaid,
+        content,
+        isImage,
+        isVideo,
+        isAudio,
+        isDocx,
+        isPptx,
+        isPdf,
+        isCsv,
+        storedCopy,
+        blobError,
+        blobLoading,
+        heicConverting,
+        pdfError,
+        pdfLoading,
+        csvLoading,
+    ]);
+    useEffect(() => {
+        if (ownStatus !== null)
+            onStatusChange?.(ownStatus);
+    }, [ownStatus, onStatusChange]);
+    // ═════════════════════════════════════════════════════════════════════════
+    // Localhost URL → proxied iframe (caller provides the component)
+    // ═════════════════════════════════════════════════════════════════════════
+    if (hasLocalhostUrl && LocalhostPreview) {
+        return _jsx(LocalhostPreview, { url: url, label: title || description || undefined });
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // HTML file path → render via static file server (port 3211) as proxied iframe
+    // Handles: type='file' with .html/.htm extension, OR type='html' with path only
+    // ═════════════════════════════════════════════════════════════════════════
+    if ((isHtmlFile || (isHtml && !content)) && sandboxPath && LocalhostPreview) {
+        const staticUrl = buildStaticFileLocalUrl(sandboxPath);
+        return _jsx(LocalhostPreview, { url: staticUrl, label: title || fileName || undefined });
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // URL / Link — hero link card with favicon
+    // ═════════════════════════════════════════════════════════════════════════
+    if (effectiveType === 'url' && url) {
+        if (!safeExternalUrl) {
+            return (_jsx("div", { className: "px-5 py-4", children: _jsxs("div", { className: "text-muted-foreground flex items-center gap-2 truncate font-mono text-xs", children: [_jsx(Globe, { className: "size-3.5 shrink-0" }), url] }) }));
+        }
+        const favicon = showFavicon(safeExternalUrl);
+        const domain = showDomain(safeExternalUrl);
+        return (_jsx("div", { className: cn('px-5 py-5', fill && 'flex h-full items-center'), children: _jsxs("a", { href: safeExternalUrl, target: "_blank", rel: "noopener noreferrer", className: "group border-border/30 bg-muted/5 hover:bg-muted/20 flex w-full items-center gap-4 rounded-2xl border p-4 transition-colors", children: [_jsx("div", { className: "bg-muted/30 flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg", children: favicon ? (
+                        /* eslint-disable-next-line @next/next/no-img-element */
+                        _jsx("img", { src: favicon, alt: "", className: "size-6 rounded", onError: (e) => {
+                                e.target.style.display = 'none';
+                            } })) : (_jsx(Globe, { className: "text-muted-foreground/50 size-5" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-foreground group-hover:text-primary truncate text-sm font-medium transition-colors", children: title || domain }), _jsx("div", { className: "text-muted-foreground/60 mt-0.5 truncate font-mono text-xs", children: domain }), description && (_jsx("div", { className: "text-muted-foreground mt-1 line-clamp-2 text-xs", children: description }))] }), _jsx(ExternalLink, { className: "text-muted-foreground/30 group-hover:text-muted-foreground/60 size-4 shrink-0 transition-colors" })] }) }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Image — loaded via useBinaryBlob → blobUrl → ImageRenderer
+    // HEIC images go through an extra conversion step (blob → JPEG → blobUrl)
+    //
+    // Uses `framed()` to supply the toolbar actions header (refresh, full screen,
+    // open in panel) — same as CSV, PPTX and the plain-text/code viewer. Without
+    // it an image had no way to open in the side panel.
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isImage && path) {
+        if (blobLoading || heicConverting)
+            return _jsx(RendererFallback, { className: mediaH });
+        if (blobError)
+            return _jsx(LoadError, { message: blobError });
+        // HEIC: use the converted JPEG URL
+        const imageUrl = isHeic ? heicImageUrl : blobUrl;
+        if (imageUrl) {
+            return framed(_jsx("div", { className: mediaH, children: _jsx(ImageRenderer, { url: imageUrl, fileName: fileName }) }));
+        }
+        return _jsx(FileCard, { title: title, fileName: fileName, path: path });
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Video — loaded via useBinaryBlob → blobUrl → VideoRenderer
+    //
+    // Uses `framed()` to supply the toolbar actions header (refresh, full screen,
+    // open in panel) — same as image and the no-toolbar renderers.
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isVideo && path) {
+        if (blobLoading)
+            return _jsx(RendererFallback, { className: mediaH });
+        if (blobError)
+            return _jsx(LoadError, { message: blobError });
+        if (blobUrl) {
+            return framed(_jsx("div", { className: mediaH, children: _jsx(VideoRenderer, { url: blobUrl }) }));
+        }
+        return null;
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Audio — loaded via useBinaryBlob → blobUrl → <audio>
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isAudio && path) {
+        if (blobLoading)
+            return _jsx(RendererFallback, { className: mediaH });
+        if (blobError)
+            return _jsx(LoadError, { message: blobError });
+        if (blobUrl) {
+            return (_jsxs("div", { className: cn('flex flex-col items-center justify-center gap-5', fill ? 'h-full' : 'py-10'), children: [_jsx("div", { className: "bg-muted/50 flex h-14 w-14 items-center justify-center rounded-2xl", children: _jsx(Music, { className: "text-muted-foreground/40 size-6" }) }), (title || fileName) && (_jsx("p", { className: "text-muted-foreground/60 text-xs", children: title || fileName })), _jsx("audio", { controls: true, src: blobUrl, className: "w-full max-w-sm", preload: "metadata" })] }));
+        }
+        return null;
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // PDF — loaded via useFileContent base64 → atob → Blob URL → native PDF viewer
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isPdf && path && storedCopy) {
+        if (blobLoading)
+            return _jsx(RendererFallback, { className: mediaH });
+        if (blobError)
+            return _jsx(LoadError, { message: blobError });
+        if (blobUrl) {
+            return (_jsx(Suspense, { fallback: _jsx(RendererFallback, { className: mediaH }), children: _jsx("div", { className: mediaH, children: framed(_jsx(PdfRenderer, { url: blobUrl, fileName: fileName, className: "h-full", ...viewerChrome })) }) }));
+        }
+    }
+    if (isPdf && path) {
+        if (pdfLoading)
+            return _jsx(RendererFallback, { className: mediaH });
+        if (pdfError)
+            return (_jsx(LoadError, { message: pdfError instanceof Error ? pdfError.message : String(pdfError) }));
+        if (pdfData?.content) {
+            return (_jsx(Suspense, { fallback: _jsx(RendererFallback, { className: mediaH }), children: _jsx("div", { className: mediaH, children: framed(_jsx(PdfRenderer, { fileContent: pdfData.content, fileName: fileName, className: "h-full", ...viewerChrome })) }) }));
+        }
+        return (_jsx(FileCard, { title: title || tI18nComplete.raw('text0cbeb39b2ff0'), fileName: fileName, path: path }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // CSV / TSV — loaded via useFileContent → text → CsvRenderer
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isCsv && (path || content)) {
+        // Prefer inline content when the show tool already provided it — no refetch
+        // needed, and it also covers content-only shows (no sandbox path).
+        const inlineOrLoadedCsv = content || csvData?.content;
+        if (!content && csvLoading)
+            return _jsx(RendererFallback, { className: mediaH });
+        if (inlineOrLoadedCsv) {
+            return (_jsx(Suspense, { fallback: _jsx(RendererFallback, { className: mediaH }), children: _jsx("div", { className: cn(mediaH, 'overflow-hidden'), children: framed(_jsx(CsvRenderer, { content: inlineOrLoadedCsv, fileName: fileName, className: "h-full", ...viewerChrome })) }) }));
+        }
+        return _jsx(FileCard, { title: title, fileName: fileName, path: path });
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // XLSX — XlsxRenderer (self-loading via filePath prop)
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isXlsx && path && sandboxPath) {
+        return (_jsx(Suspense, { fallback: _jsx(RendererFallback, { className: mediaH }), children: _jsx("div", { className: cn(mediaH, 'overflow-hidden'), children: framed(_jsx(XlsxRenderer, { filePath: sandboxPath, fileName: fileName, className: "h-full", ...viewerChrome })) }) }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // DOCX — loaded via useBinaryBlob → rawBlob → DocxRenderer
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isDocx && path) {
+        if (blobLoading)
+            return _jsx(RendererFallback, { className: mediaH });
+        if (blobError)
+            return _jsx(LoadError, { message: blobError });
+        if (rawBlob) {
+            return (_jsx(Suspense, { fallback: _jsx(RendererFallback, { className: mediaH }), children: _jsx("div", { className: cn(mediaH, 'overflow-hidden'), children: framed(_jsx(DocxRenderer, { blob: rawBlob, fileName: fileName, className: "h-full", ...viewerChrome })) }) }));
+        }
+        return (_jsx(FileCard, { title: title || tI18nComplete.raw('text1931491100e0'), fileName: fileName, path: path }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // PPTX — loaded via useBinaryBlob → rawBlob → PptxRenderer
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isPptx && path) {
+        if (blobLoading)
+            return _jsx(RendererFallback, { className: mediaH });
+        if (blobError)
+            return _jsx(LoadError, { message: blobError });
+        if (rawBlob) {
+            return (_jsx(Suspense, { fallback: _jsx(RendererFallback, { className: mediaH }), children: _jsx("div", { className: cn(mediaH, 'overflow-hidden'), children: alwaysFramed(_jsx(PptxRenderer, { blob: rawBlob, binaryUrl: blobUrl, filePath: sandboxPath || '', fileName: fileName, className: "h-full" })) }) }));
+        }
+        return (_jsx(FileCard, { title: title || tI18nComplete.raw('text935176c7f960'), fileName: fileName, path: path }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Mermaid — inline source renders here. A path with no inline content falls
+    // through to FileContentRenderer below, which renders `.mmd` the same way.
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isMermaid && content) {
+        return (_jsx("div", { className: mediaH, children: alwaysFramed(_jsx(MermaidDiagram, { source: content, fileName: fileName || 'diagram.mmd' })) }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Generic file (json, yaml, ts, py, etc.) → FileContentRenderer
+    // FileContentRenderer handles text/code detection, syntax highlighting,
+    // and binary fallbacks. Works great for text files via SDK text-read.
+    // ═════════════════════════════════════════════════════════════════════════
+    // Deliberately NOT gated on `effectiveType === 'file'` — see
+    // `shouldRenderFromSandboxFile`. Every rich viewer above has already had its
+    // turn, so from here a path with no inline content means the bytes on disk
+    // are the only thing there is to show, whatever the agent labelled it.
+    if (shouldRenderFromSandboxFile(sandboxPath, content)) {
+        return (_jsx("div", { className: mediaH, children: alwaysFramed(_jsx(Suspense, { fallback: _jsx(RendererFallback, { className: "h-full" }), children: _jsx(FileContentRenderer, { filePath: sandboxPath, showHeader: false, 
+                    // A show is a presentation of the file, not a place to edit it —
+                    // same read-only CodeMirror the file explorer's preview modal and
+                    // the public share view mount. Without this the card mounted a
+                    // live editor whose edits went nowhere.
+                    readOnly: true, className: "h-full", errorFallback: fileErrorFallback, onStatusChange: onStatusChange }) })) }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Code — syntax highlighted
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isCode && content) {
+        return (_jsx("div", { className: textWrap, children: _jsx(CodeHighlight, { code: content, language: language || 'text' }) }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Markdown — rendered
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isMarkdown && content) {
+        // Same split the file viewer does. Handed the raw file, markdown reads a
+        // leading `---` block as prose — thematic break, then a setext underline
+        // that turns the whole metadata into one giant heading. Only the explicit
+        // markdown branch does this: a `---` in a plain TEXT file is a rule the
+        // author meant, and `parseFrontmatter` would be wrong to eat it.
+        const { frontmatter, body } = parseFrontmatter(content);
+        return (_jsxs("div", { "data-scrollable": scrollableAttr, className: textWrap, children: [frontmatter && _jsx(MarkdownFrontmatterCard, { data: frontmatter }), _jsx(UnifiedMarkdown, { content: body, trust: "agent" })] }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Text — render as markdown (supports formatting, links, lists etc.)
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isText && content) {
+        return (_jsx("div", { "data-scrollable": scrollableAttr, className: textWrap, children: _jsx(UnifiedMarkdown, { content: content, trust: "agent" }) }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // HTML — sandboxed iframe
+    // ═════════════════════════════════════════════════════════════════════════
+    if (isHtml && content) {
+        // The blob URL lands one commit after mount (see the effect above), so this
+        // branch owns BOTH states. Rendering the frame's box either way keeps the
+        // layout still and, more importantly, keeps the fall-through cascade below
+        // out of reach — otherwise the first paint of every HTML preview would be
+        // the markdown fallback rendering the page's own source.
+        const frameStyle = fill
+            ? { height: '100%' }
+            : { height: arCSS ? undefined : '540px', aspectRatio: arCSS || undefined };
+        return (_jsx("div", { "data-component": "html-preview", className: cn('overflow-hidden', fill && 'h-full'), style: htmlBlobUrl ? undefined : frameStyle, children: htmlBlobUrl && (_jsx("iframe", { src: htmlBlobUrl, title: title || tI18nComplete.raw('textfbe19644d843'), className: "w-full border-0 bg-white", style: frameStyle, sandbox: framePolicy('document', htmlBlobUrl).sandbox })) }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Error
+    // ═════════════════════════════════════════════════════════════════════════
+    if (effectiveType === 'error' && content) {
+        return (_jsx("div", { className: cn('px-5 py-4', fill && 'flex h-full items-center'), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0 text-red-500" }), _jsx("p", { className: "text-foreground text-sm whitespace-pre-wrap", children: _jsx(TextWithPaths, { text: content }) })] }) }));
+    }
+    // ═════════════════════════════════════════════════════════════════════════
+    // Fallback — unknown type
+    // ═════════════════════════════════════════════════════════════════════════
+    return (_jsxs("div", { className: cn('px-5 py-4', fill && 'h-full overflow-auto'), children: [content && (_jsx("div", { "data-scrollable": scrollableAttr, className: fill ? undefined : 'max-h-96 overflow-auto', children: _jsx(UnifiedMarkdown, { content: content, trust: "agent" }) })), path && !content && (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 truncate font-mono text-xs", children: [_jsx(FileIcon, { className: "size-3.5 shrink-0" }), path] })), safeExternalUrl && !content && (_jsxs("a", { href: safeExternalUrl, target: "_blank", rel: "noopener noreferrer", className: "text-primary flex items-center gap-1.5 truncate font-mono text-xs hover:underline", children: [_jsx(ExternalLink, { className: "size-3.5" }), safeExternalUrl] })), url && !safeExternalUrl && !content && (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 truncate font-mono text-xs", children: [_jsx(Globe, { className: "size-3.5 shrink-0" }), url] }))] }));
+}
+const SHOW_TYPE_LABELS = {
+    file: 'File',
+    image: 'Image',
+    url: 'URL',
+    text: 'Text',
+    error: 'Error',
+    video: 'Video',
+    audio: 'Audio',
+    code: 'Code',
+    markdown: 'Markdown',
+    pdf: 'PDF',
+    html: 'HTML',
+    csv: 'CSV',
+    xlsx: 'Sheet',
+    docx: 'Doc',
+    pptx: 'Slides',
+};
+// Document formats show just their uppercase extension (PDF, PPTX, DOCX, XLSX…)
+// instead of a filename pill. Everything else (code/text/html/css/tsx…) shows its basename.
+const SHOW_DOC_EXT_RE = /\.(pdf|docx?|pptx?|xlsx?)$/i;
+const SHOW_DOC_TYPE_RE = /^(pdf|docx?|pptx?|xlsx?)$/i;
+/** Document extension for a carousel item (pdf/doc/ppt/xls families), or null. */
+function getShowDocExt(item) {
+    const match = item.path?.match(SHOW_DOC_EXT_RE);
+    if (match)
+        return match[1].toLowerCase();
+    const type = item.type ?? '';
+    if (SHOW_DOC_TYPE_RE.test(type))
+        return type.toLowerCase();
+    return null;
+}
+function truncateLabel(value, max = 18) {
+    if (value.length <= max)
+        return value;
+    return `${value.slice(0, max - 1)}…`;
+}
+/** Short pill label for a carousel segment — port, doc extension, filename, domain, or type. */
+export function getShowCarouselItemLabel(item, typeLabels = SHOW_TYPE_LABELS, fallbackLabel = 'Item') {
+    const localhost = item.url ? parseLocalhostUrl(item.url) : null;
+    if (localhost && !isAppRouteUrl(item.url))
+        return `:${localhost.port}`;
+    const docExt = getShowDocExt(item);
+    if (docExt)
+        return docExt.toUpperCase();
+    if (item.title?.trim())
+        return truncateLabel(item.title.trim());
+    if (item.url) {
+        const external = safeHttpUrl(item.url);
+        if (external)
+            return truncateLabel(showDomain(external));
+    }
+    if (item.path) {
+        const base = item.path.split('/').filter(Boolean).pop();
+        if (base)
+            return truncateLabel(base);
+    }
+    return typeLabels[item.type] ?? truncateLabel(item.type || fallbackLabel);
+}
+function getShowCarouselItemAriaLabel(item, index, total, itemLabel, positionLabel) {
+    const parts = [positionLabel];
+    if (item.title)
+        parts.push(item.title);
+    else
+        parts.push(itemLabel);
+    if (item.type)
+        parts.push(item.type);
+    return parts.join(' · ');
+}
+export function ShowCarousel({ items, LocalhostPreview, onIndexChange, fill = false, toolbarActions, activeIndex, hideNav = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const typeLabels = useLocalizedUiCatalog(SHOW_TYPE_LABELS);
+    const [ownIndex, setCurrentIndex] = useState(0);
+    const requestedIndex = activeIndex ?? ownIndex;
+    const count = items.length;
+    // A grouped carousel can lose an item (a call that settled empty), so the
+    // stored index is clamped instead of trusted.
+    const currentIndex = Math.max(0, Math.min(requestedIndex, count - 1));
+    const segmentRefs = useRef([]);
+    const stripRef = useRef(null);
+    const fallbackLabel = tI18nComplete.raw('text652bcc3a4784');
+    const labels = useMemo(() => items.map((item) => getShowCarouselItemLabel(item, typeLabels, fallbackLabel)), [fallbackLabel, items, typeLabels]);
+    const goTo = useCallback((idx) => {
+        const clamped = Math.max(0, Math.min(idx, count - 1));
+        setCurrentIndex(clamped);
+        onIndexChange?.(clamped);
+    }, [count, onIndexChange]);
+    const prev = useCallback(() => goTo(currentIndex - 1), [goTo, currentIndex]);
+    const next = useCallback(() => goTo(currentIndex + 1), [goTo, currentIndex]);
+    // Center the active pill by scrolling the pill strip ONLY — never
+    // `scrollIntoView`. That walks every scrollable ancestor, and `overflow:
+    // hidden` boxes are still programmatically scrollable, so the centering the
+    // clamped strip could not absorb for the last pills landed as a permanent
+    // sideways `scrollLeft` on the chat column's overflow-hidden wrappers,
+    // shifting the whole page.
+    useEffect(() => {
+        const pill = segmentRefs.current[currentIndex];
+        const strip = stripRef.current;
+        if (!pill || !strip)
+            return;
+        const pillRect = pill.getBoundingClientRect();
+        const stripRect = strip.getBoundingClientRect();
+        const delta = pillRect.left + pillRect.width / 2 - (stripRect.left + stripRect.width / 2);
+        safeScrollTo(strip, {
+            left: Math.max(0, Math.min(strip.scrollLeft + delta, strip.scrollWidth - strip.clientWidth)),
+            behavior: 'smooth',
+        });
+    }, [currentIndex]);
+    const handleArrowKey = useCallback((e) => {
+        if (e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        const el = document.activeElement;
+        if (el &&
+            (el.tagName === 'INPUT' ||
+                el.tagName === 'TEXTAREA' ||
+                el.isContentEditable ||
+                el.closest('.cm-editor') ||
+                el.closest('.ProseMirror'))) {
+            return;
+        }
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            prev();
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            next();
+        }
+    }, [prev, next]);
+    // The panel shows one carousel, so ←/→ page it from anywhere. Inline, a
+    // thread can hold several carousels: a window listener paged all of them at
+    // once. There the keys act only while focus is inside this card (see the
+    // root's `onKeyDown`).
+    useEffect(() => {
+        if (!fill)
+            return;
+        window.addEventListener('keydown', handleArrowKey);
+        return () => window.removeEventListener('keydown', handleArrowKey);
+    }, [fill, handleArrowKey]);
+    const currentItem = items[currentIndex];
+    if (!currentItem)
+        return null;
+    return (_jsxs("div", { className: cn('outline-none', fill && 'flex h-full flex-col'), 
+        // -1: a click on the content focuses the card, so ←/→ page it next,
+        // without adding a Tab stop. Tab still reaches the chevrons inside.
+        tabIndex: fill || count < 2 ? undefined : -1, onKeyDown: fill || count < 2 ? undefined : (e) => handleArrowKey(e), children: [_jsx("div", { className: cn(fill ? 'min-h-0 flex-1 overflow-hidden' : 'min-h-[420px]'), children: currentItem.status === 'pending' ? (_jsxs("div", { className: cn('flex items-center justify-center gap-3', fill ? 'h-full' : 'min-h-[420px]'), children: [_jsx(Loading, { className: "text-muted-foreground size-4" }), _jsx(TextShimmer, { duration: 1, spread: 2, className: "text-sm", children: tHardcodedUi.raw('componentsSessionToolRenderers.line4935JsxTextPreparingOutput') })] })) : (_jsx(ShowContentRenderer, { type: currentItem.type, title: currentItem.title, description: currentItem.description, path: currentItem.path, url: currentItem.url, content: currentItem.content, language: currentItem.language, aspectRatio: currentItem.aspect_ratio, attachment: currentItem.attachment, LocalhostPreview: LocalhostPreview, toolbarActions: toolbarActions, fill: fill })) }), count > 1 && !hideNav && (_jsxs("div", { className: "border-border flex shrink-0 items-center gap-2 border-t px-2 py-1.5 pr-3.5", children: [_jsxs("div", { className: "flex shrink-0 items-center", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: prev, className: "hit-area-2 hit-area-r-0 transition-transform active:scale-[0.96]", disabled: currentIndex === 0, "aria-label": tI18nComplete.raw('text81b35f1b4332'), children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: next, className: "hit-area-2 hit-area-l-0 transition-transform active:scale-[0.96]", disabled: currentIndex >= count - 1, "aria-label": tI18nComplete.raw('text1e47d4f7a1a3'), children: _jsx(ChevronRight, { className: "size-4" }) })] }), _jsx(FadedScrollArea, { ref: stripRef, orientation: "horizontal", fadeColor: "from-secondary", className: "min-w-0 flex-1 overscroll-x-contain", children: _jsx("div", { className: "flex w-max min-w-0 items-center gap-1", children: items.map((item, i) => {
+                                const label = labels[i] ?? 'Item';
+                                const isPortLabel = label.startsWith(':');
+                                return (_jsx("button", { ref: (el) => {
+                                        segmentRefs.current[i] = el;
+                                    }, type: "button", onClick: () => goTo(i), "aria-label": getShowCarouselItemAriaLabel(item, i, count, labels[i], tI18nComplete('text7ce01e1f5095', { current: i + 1, total: count })), "aria-current": i === currentIndex ? 'true' : undefined, className: cn('shrink-0 rounded-md px-2 py-1 text-xs font-medium', 'transition-[background-color,color,transform] active:scale-[0.96]', i === currentIndex
+                                        ? 'bg-foreground/10 text-foreground'
+                                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'), children: _jsx("span", { className: cn(isPortLabel && 'tabular-nums'), children: label }) }, i));
+                            }) }) }), _jsxs("span", { className: "text-muted-foreground shrink-0 pl-1 text-xs tabular-nums", children: [currentIndex + 1, _jsx("span", { className: "text-muted-foreground/40", children: "/" }), count] })] }))] }));
+}