@wonderwhy-er/desktop-commander 0.2.38 → 0.2.39

package/dist/ui/file-preview/src/app.js

@@ -1,714 +0,0 @@
-/**
- * Top-level controller for the File Preview app. It routes structured content into the appropriate renderer, handles host events, and coordinates user-facing state changes.
- */
-import { formatJsonIfPossible, inferLanguageFromPath, renderCodeViewer } from './components/code-viewer.js';
-import { renderHtmlPreview } from './components/html-renderer.js';
-import { renderMarkdown } from './components/markdown-renderer.js';
-import { escapeHtml } from './components/highlighting.js';
-import { isAllowedImageMimeType, normalizeImageMimeType } from './image-preview.js';
-import { createCompactRowShellController } from '../../shared/tool-shell.js';
-import { createWidgetStateStorage } from '../../shared/widget-state.js';
-import { renderCompactRow } from '../../shared/compact-row.js';
-import { connectWithSharedHostContext, isObjectRecord } from '../../shared/host-context.js';
-import { createUiEventTracker } from '../../shared/ui-event-tracker.js';
-import { App } from '@modelcontextprotocol/ext-apps';
-let isExpanded = false;
-let hideSummaryRow = false;
-let previewShownFired = false;
-let onRender;
-let trackUiEvent;
-let rpcCallTool;
-let rpcUpdateContext;
-let shellController;
-function getFileExtensionForAnalytics(filePath) {
-    const normalizedPath = filePath.trim().replace(/\\/g, '/');
-    const fileName = normalizedPath.split('/').pop() ?? normalizedPath;
-    const dotIndex = fileName.lastIndexOf('.');
-    if (dotIndex <= 0 || dotIndex === fileName.length - 1) {
-        return 'none';
-    }
-    return fileName.slice(dotIndex + 1).toLowerCase();
-}
-function isPreviewStructuredContent(value) {
-    if (!isObjectRecord(value)) {
-        return false;
-    }
-    return (typeof value.fileName === 'string' &&
-        typeof value.filePath === 'string' &&
-        typeof value.fileType === 'string');
-}
-function buildRenderPayload(meta, text) {
-    return { ...meta, content: text };
-}
-function extractRenderPayload(value) {
-    if (!isObjectRecord(value)) {
-        return undefined;
-    }
-    const meta = isPreviewStructuredContent(value.structuredContent)
-        ? value.structuredContent
-        : isPreviewStructuredContent(value)
-            ? value
-            : null;
-    if (!meta)
-        return undefined;
-    const text = extractToolText(value) ?? extractToolText(value.structuredContent) ?? '';
-    return buildRenderPayload(meta, text);
-}
-function extractToolText(value) {
-    if (!isObjectRecord(value)) {
-        return undefined;
-    }
-    const content = value.content;
-    if (!Array.isArray(content)) {
-        return undefined;
-    }
-    for (const item of content) {
-        if (!isObjectRecord(item)) {
-            continue;
-        }
-        if (item.type === 'text' && typeof item.text === 'string' && item.text.trim().length > 0) {
-            return item.text;
-        }
-    }
-    return undefined;
-}
-function isLikelyUrl(filePath) {
-    return /^https?:\/\//i.test(filePath);
-}
-function buildBreadcrumb(filePath) {
-    const normalized = filePath.replace(/\\/g, '/');
-    const parts = normalized.split('/').filter(Boolean);
-    // Show last 3-4 meaningful segments as breadcrumb
-    const tail = parts.slice(-4);
-    return tail.map(p => escapeHtml(p)).join(' <span class="breadcrumb-sep">›</span> ');
-}
-function getParentDirectory(filePath) {
-    const normalized = filePath.replace(/\\/g, '/');
-    const lastSlash = normalized.lastIndexOf('/');
-    if (lastSlash <= 0) {
-        return filePath;
-    }
-    return normalized.slice(0, lastSlash);
-}
-function shellQuote(value) {
-    return `'${value.replace(/'/g, `'\\''`)}'`;
-}
-function encodePowerShellCommand(script) {
-    // PowerShell -EncodedCommand expects UTF-16LE bytes.
-    const utf16leBytes = [];
-    for (let index = 0; index < script.length; index += 1) {
-        const codeUnit = script.charCodeAt(index);
-        utf16leBytes.push(codeUnit & 0xff, codeUnit >> 8);
-    }
-    let binary = '';
-    for (const byte of utf16leBytes) {
-        binary += String.fromCharCode(byte);
-    }
-    return btoa(binary);
-}
-function buildOpenInFolderCommand(filePath) {
-    const trimmedPath = filePath.trim();
-    if (!trimmedPath || isLikelyUrl(trimmedPath)) {
-        return undefined;
-    }
-    const userAgent = navigator.userAgent.toLowerCase();
-    if (userAgent.includes('win')) {
-        const escapedForPowerShell = trimmedPath.replace(/'/g, "''");
-        const script = `Start-Process -FilePath explorer.exe -ArgumentList @('/select,','${escapedForPowerShell}')`;
-        return `powershell.exe -NoProfile -NonInteractive -EncodedCommand ${encodePowerShellCommand(script)}`;
-    }
-    if (userAgent.includes('mac')) {
-        return `open -R ${shellQuote(trimmedPath)}`;
-    }
-    return `xdg-open ${shellQuote(getParentDirectory(trimmedPath))}`;
-}
-function renderRawFallback(source) {
-    return `<pre class="code-viewer"><code class="hljs language-text">${escapeHtml(source)}</code></pre>`;
-}
-function stripReadStatusLine(content) {
-    // Remove the synthetic read status header shown by read_file pagination.
-    return content.replace(/^\[Reading [^\]]+\]\r?\n?/, '');
-}
-function renderImageBody(payload) {
-    const mimeType = normalizeImageMimeType(payload.mimeType);
-    if (!isAllowedImageMimeType(mimeType)) {
-        return {
-            notice: 'Preview is unavailable for this image format.',
-            html: '<div class="panel-content source-content"></div>'
-        };
-    }
-    if (!payload.imageData || payload.imageData.trim().length === 0) {
-        return {
-            notice: 'Preview is unavailable because image data is missing.',
-            html: '<div class="panel-content source-content"></div>'
-        };
-    }
-    const src = `data:${mimeType};base64,${payload.imageData}`;
-    return {
-        html: `<div class="panel-content image-content"><div class="image-preview"><img src="${escapeHtml(src)}" alt="${escapeHtml(payload.fileName)}" loading="eager" decoding="async"></div></div>`
-    };
-}
-function countContentLines(content) {
-    const cleaned = stripReadStatusLine(content);
-    if (cleaned === '')
-        return 0;
-    const lines = cleaned.split('\n');
-    return lines[lines.length - 1] === '' ? lines.length - 1 : lines.length;
-}
-function parseReadRange(content) {
-    // Parse "[Reading N lines from line M (total: T lines, R remaining)]"
-    // or    "[Reading N lines from start (total: T lines, R remaining)]"
-    const match = content.match(/^\[Reading (\d+) lines from (?:line )?(\d+|start) \(total: (\d+) lines/);
-    if (!match)
-        return undefined;
-    const count = parseInt(match[1], 10);
-    const from = match[2] === 'start' ? 1 : parseInt(match[2], 10);
-    const total = parseInt(match[3], 10);
-    return {
-        fromLine: from,
-        toLine: from + count - 1,
-        totalLines: total,
-        isPartial: count < total
-    };
-}
-function renderBody(payload, htmlMode, startLine = 1) {
-    const cleanedContent = stripReadStatusLine(payload.content);
-    if (payload.fileType === 'image') {
-        return renderImageBody(payload);
-    }
-    if (payload.fileType === 'unsupported') {
-        return {
-            notice: 'Preview is not available for this file type.',
-            html: '<div class="panel-content source-content"></div>'
-        };
-    }
-    if (payload.fileType === 'html') {
-        return renderHtmlPreview(cleanedContent, htmlMode);
-    }
-    if (payload.fileType !== 'markdown') {
-        const detectedLanguage = inferLanguageFromPath(payload.filePath);
-        const formatted = formatJsonIfPossible(cleanedContent, payload.filePath);
-        return {
-            notice: formatted.notice,
-            html: `<div class="panel-content source-content">${renderCodeViewer(formatted.content, detectedLanguage, startLine)}</div>`
-        };
-    }
-    try {
-        return {
-            html: `<div class="panel-content markdown-content"><article class="markdown markdown-doc">${renderMarkdown(cleanedContent)}</article></div>`
-        };
-    }
-    catch {
-        return {
-            notice: 'Markdown renderer failed. Showing raw source instead.',
-            html: `<div class="panel-content source-content">${renderRawFallback(cleanedContent)}</div>`
-        };
-    }
-}
-function attachCopyHandler(payload) {
-    const copyButton = document.getElementById('copy-source');
-    if (!copyButton) {
-        return;
-    }
-    const fallbackCopy = (text) => {
-        const textArea = document.createElement('textarea');
-        textArea.value = text;
-        textArea.setAttribute('readonly', '');
-        textArea.style.position = 'fixed';
-        textArea.style.top = '-9999px';
-        document.body.appendChild(textArea);
-        textArea.select();
-        const success = document.execCommand('copy');
-        document.body.removeChild(textArea);
-        return success;
-    };
-    const setButtonState = (label, revertMs) => {
-        copyButton.setAttribute('title', label);
-        copyButton.setAttribute('aria-label', label);
-        copyButton.textContent = label;
-        if (revertMs) {
-            setTimeout(() => {
-                copyButton.textContent = 'Copy';
-                copyButton.setAttribute('title', 'Copy source');
-                copyButton.setAttribute('aria-label', 'Copy source');
-            }, revertMs);
-        }
-    };
-    const copyTextData = async (text) => {
-        try {
-            if (navigator.clipboard?.writeText) {
-                await navigator.clipboard.writeText(text);
-                return true;
-            }
-            return fallbackCopy(text);
-        }
-        catch {
-            return fallbackCopy(text);
-        }
-    };
-    copyButton.addEventListener('click', async () => {
-        trackUiEvent?.('copy_clicked', {
-            file_type: payload.fileType,
-            file_extension: getFileExtensionForAnalytics(payload.filePath)
-        });
-        const cleanedContent = stripReadStatusLine(payload.content);
-        const copied = await copyTextData(cleanedContent);
-        setButtonState(copied ? 'Copied!' : 'Copy failed', 1500);
-    });
-}
-function attachHtmlToggleHandler(container, payload, htmlMode) {
-    const toggleButton = document.getElementById('toggle-html-mode');
-    if (!toggleButton || payload.fileType !== 'html') {
-        return;
-    }
-    toggleButton.addEventListener('click', () => {
-        const nextMode = htmlMode === 'rendered' ? 'source' : 'rendered';
-        trackUiEvent?.('html_view_toggled', {
-            file_type: payload.fileType,
-            file_extension: getFileExtensionForAnalytics(payload.filePath)
-        });
-        renderApp(container, payload, nextMode, isExpanded);
-    });
-}
-function attachOpenInFolderHandler(payload) {
-    const openButton = document.getElementById('open-in-folder');
-    if (!openButton) {
-        return;
-    }
-    const command = buildOpenInFolderCommand(payload.filePath);
-    if (!command) {
-        openButton.disabled = true;
-        return;
-    }
-    openButton.addEventListener('click', async () => {
-        trackUiEvent?.('open_in_folder', {
-            file_type: payload.fileType,
-            file_extension: getFileExtensionForAnalytics(payload.filePath)
-        });
-        try {
-            await rpcCallTool?.('start_process', {
-                command,
-                timeout_ms: 12000
-            });
-        }
-        catch {
-            // Keep UI stable if opening folder fails.
-        }
-    });
-}
-function attachLoadAllHandler(container, payload, htmlMode) {
-    const beforeBtn = document.getElementById('load-before');
-    const afterBtn = document.getElementById('load-after');
-    if (!beforeBtn && !afterBtn) {
-        return;
-    }
-    const range = parseReadRange(payload.content);
-    if (!range?.isPartial)
-        return;
-    const currentContent = stripReadStatusLine(payload.content);
-    const loadLines = async (btn, direction) => {
-        const originalText = btn.textContent;
-        btn.textContent = 'Loading…';
-        btn.disabled = true;
-        trackUiEvent?.(direction === 'before' ? 'load_lines_before' : 'load_lines_after', {
-            file_type: payload.fileType,
-            file_extension: getFileExtensionForAnalytics(payload.filePath)
-        });
-        try {
-            // Load only the missing portion
-            const readArgs = direction === 'before'
-                ? { path: payload.filePath, offset: 0, length: range.fromLine - 1 }
-                : { path: payload.filePath, offset: range.toLine };
-            const result = await rpcCallTool?.('read_file', readArgs);
-            const resultObj = result;
-            const newText = resultObj?.content?.[0]?.text;
-            if (newText && typeof newText === 'string') {
-                const cleanNew = stripReadStatusLine(newText);
-                // Merge: prepend or append the new lines
-                const merged = direction === 'before'
-                    ? cleanNew + (cleanNew.endsWith('\n') ? '' : '\n') + currentContent
-                    : currentContent + (currentContent.endsWith('\n') ? '' : '\n') + cleanNew;
-                // Build updated status line reflecting the new range
-                const newFrom = direction === 'before' ? 1 : range.fromLine;
-                const newTo = direction === 'after' ? range.totalLines : range.toLine;
-                const lineCount = newTo - newFrom + 1;
-                const remaining = range.totalLines - newTo;
-                const isStillPartial = newFrom > 1 || newTo < range.totalLines;
-                const statusLine = isStillPartial
-                    ? `[Reading ${lineCount} lines from ${newFrom === 1 ? 'start' : `line ${newFrom}`} (total: ${range.totalLines} lines, ${remaining} remaining)]\n`
-                    : '';
-                const mergedPayload = {
-                    ...payload,
-                    content: statusLine + merged
-                };
-                renderApp(container, mergedPayload, htmlMode, isExpanded);
-            }
-            else {
-                btn.textContent = 'Failed to load';
-                setTimeout(() => { btn.textContent = originalText; btn.disabled = false; }, 2000);
-            }
-        }
-        catch {
-            btn.textContent = 'Failed to load';
-            setTimeout(() => { btn.textContent = originalText; btn.disabled = false; }, 2000);
-        }
-    };
-    beforeBtn?.addEventListener('click', () => void loadLines(beforeBtn, 'before'));
-    afterBtn?.addEventListener('click', () => void loadLines(afterBtn, 'after'));
-}
-/**
- * Tracks native text selection and pushes it to the host via ui/update-model-context.
- *
- * How it works:
- * 1. User drags to select text anywhere in the preview (markdown, code, HTML).
- * 2. The selectionchange event fires; we extract the selected string.
- * 3. We call rpcUpdateContext() which sends a ui/update-model-context JSON-RPC
- *    request to the host with the selected text + file path (+ line numbers for code).
- * 4. The host stores this as widget context.
- * 5. The LLM can access it by calling read_widget_context(tool_name="desktop-commander:read_file").
- *
- * Note: as of Feb 2025, Claude does NOT auto-inject ui/update-model-context into
- * the LLM's context window. The LLM must actively call read_widget_context to see
- * the selection. A floating tooltip near the selection tells the user this is working.
- */
-let selectionAbortController = null;
-function attachTextSelectionHandler(payload) {
-    const contentWrapper = document.querySelector('.panel-content-wrapper');
-    if (!contentWrapper)
-        return;
-    // Abort any previous selectionchange listener to avoid leaking listeners/closures
-    if (selectionAbortController) {
-        selectionAbortController.abort();
-        selectionAbortController = null;
-    }
-    selectionAbortController = new AbortController();
-    let hintEl = null;
-    let lastSelectedText = '';
-    let hideTimer = null;
-    function positionHint(selection) {
-        if (!hintEl)
-            return;
-        const range = selection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-        const wrapperRect = contentWrapper.getBoundingClientRect();
-        // Position above the selection, centered horizontally
-        let left = rect.left + rect.width / 2 - wrapperRect.left;
-        let top = rect.top - wrapperRect.top + contentWrapper.scrollTop - 32;
-        // Clamp within wrapper bounds
-        const hintWidth = hintEl.offsetWidth || 200;
-        left = Math.max(8, Math.min(left - hintWidth / 2, contentWrapper.clientWidth - hintWidth - 8));
-        top = Math.max(4, top);
-        hintEl.style.left = `${left}px`;
-        hintEl.style.top = `${top}px`;
-    }
-    function showHint(selection) {
-        if (hideTimer) {
-            clearTimeout(hideTimer);
-            hideTimer = null;
-        }
-        if (!hintEl) {
-            hintEl = document.createElement('div');
-            hintEl.className = 'selection-hint';
-            hintEl.textContent = 'AI can see your selection';
-            contentWrapper.appendChild(hintEl);
-        }
-        hintEl.classList.add('visible');
-        positionHint(selection);
-    }
-    function hideHint() {
-        if (!hintEl)
-            return;
-        hintEl.classList.remove('visible');
-        hideTimer = setTimeout(() => { hintEl?.remove(); hintEl = null; }, 200);
-    }
-    function getLineInfo(selection) {
-        const anchorRow = selection.anchorNode?.parentElement?.closest('.code-line');
-        const focusRow = selection.focusNode?.parentElement?.closest('.code-line');
-        if (anchorRow && focusRow) {
-            const a = parseInt(anchorRow.dataset.line ?? '', 10);
-            const f = parseInt(focusRow.dataset.line ?? '', 10);
-            if (!isNaN(a) && !isNaN(f)) {
-                const low = Math.min(a, f);
-                const high = Math.max(a, f);
-                return low === high ? `line ${low}` : `lines ${low}–${high}`;
-            }
-        }
-        return '';
-    }
-    document.addEventListener('selectionchange', () => {
-        const selection = document.getSelection();
-        if (!selection || selection.isCollapsed) {
-            if (lastSelectedText) {
-                lastSelectedText = '';
-                rpcUpdateContext?.('');
-                hideHint();
-            }
-            return;
-        }
-        const text = selection.toString().trim();
-        if (!text || text === lastSelectedText)
-            return;
-        // Only act on selections within our content area
-        const anchorInContent = contentWrapper.contains(selection.anchorNode);
-        const focusInContent = contentWrapper.contains(selection.focusNode);
-        if (!anchorInContent && !focusInContent) {
-            if (lastSelectedText) {
-                lastSelectedText = '';
-                rpcUpdateContext?.('');
-                hideHint();
-            }
-            return;
-        }
-        lastSelectedText = text;
-        const lineInfo = getLineInfo(selection);
-        const locationPart = lineInfo ? ` (${lineInfo})` : '';
-        const context = `User selected text from file ${payload.filePath}${locationPart}:\n\`\`\`\n${text}\n\`\`\``;
-        rpcUpdateContext?.(context);
-        showHint(selection);
-        trackUiEvent?.('text_selected', {
-            file_type: payload.fileType,
-            file_extension: getFileExtensionForAnalytics(payload.filePath),
-            char_count: text.length
-        });
-    }, { signal: selectionAbortController.signal });
-}
-function renderStatusState(container, message) {
-    container.innerHTML = `
-      <main class="shell">
-        ${renderCompactRow({ label: message, variant: 'status', interactive: false })}
-      </main>
-    `;
-    document.body.classList.add('dc-ready');
-}
-function renderLoadingState(container) {
-    container.innerHTML = `
-      <main class="shell">
-        ${renderCompactRow({ label: 'Preparing preview…', variant: 'loading', interactive: false })}
-      </main>
-    `;
-    document.body.classList.add('dc-ready');
-}
-export function renderApp(container, payload, htmlMode = 'rendered', expandedState = false) {
-    isExpanded = expandedState;
-    shellController?.dispose();
-    shellController = undefined;
-    if (!payload) {
-        renderStatusState(container, 'No preview available for this response.');
-        onRender?.();
-        return;
-    }
-    const canCopy = payload.fileType !== 'unsupported' && payload.fileType !== 'image';
-    const canOpenInFolder = !isLikelyUrl(payload.filePath);
-    const fileExtension = getFileExtensionForAnalytics(payload.filePath);
-    const supportsPreview = payload.fileType !== 'unsupported';
-    // In DC app (hideSummaryRow), no reason to auto-expand when there's nothing to preview —
-    // the host header already shows the file name and path.
-    if (!supportsPreview && hideSummaryRow) {
-        isExpanded = false;
-    }
-    const range = parseReadRange(payload.content);
-    const body = renderBody(payload, htmlMode, range?.fromLine ?? 1);
-    const notice = body.notice ? `<div class="notice">${body.notice}</div>` : '';
-    const breadcrumb = buildBreadcrumb(payload.filePath);
-    const lineCount = range ? range.toLine - range.fromLine + 1 : countContentLines(payload.content);
-    const fileTypeLabel = payload.fileType === 'markdown' ? 'MARKDOWN'
-        : payload.fileType === 'html' ? 'HTML'
-            : payload.fileType === 'image' ? 'IMAGE'
-                : fileExtension !== 'none' ? fileExtension.toUpperCase()
-                    : 'TEXT';
-    const compactLabel = range?.isPartial
-        ? `View lines ${range.fromLine}–${range.toLine}`
-        : 'View file';
-    const footerLabel = range?.isPartial
-        ? `${escapeHtml(fileTypeLabel)} • LINES ${range.fromLine}–${range.toLine} OF ${range.totalLines}`
-        : `${escapeHtml(fileTypeLabel)} • ${lineCount} LINE${lineCount !== 1 ? 'S' : ''}`;
-    const htmlToggle = payload.fileType === 'html'
-        ? `<button class="panel-action" id="toggle-html-mode">${htmlMode === 'rendered' ? 'Source' : 'Rendered'}</button>`
-        : '';
-    const copyIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
-    const folderIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`;
-    // Content-area banners for missing lines
-    const hasMissingBefore = range?.isPartial && range.fromLine > 1;
-    const hasMissingAfter = range?.isPartial && range.toLine < range.totalLines && (range.totalLines - range.toLine) > 1;
-    const loadBeforeBanner = hasMissingBefore
-        ? `<button class="load-lines-banner" id="load-before">↑ Load lines 1–${range.fromLine - 1}</button>`
-        : '';
-    const loadAfterBanner = hasMissingAfter
-        ? `<button class="load-lines-banner" id="load-after">↓ Load lines ${range.toLine + 1}–${range.totalLines}</button>`
-        : '';
-    container.innerHTML = `
-      <main id="tool-shell" class="shell tool-shell ${isExpanded ? 'expanded' : 'collapsed'}${hideSummaryRow ? ' host-framed' : ''}">
-        ${renderCompactRow({ id: 'compact-toggle', label: compactLabel, filename: payload.fileName, variant: 'ready', expandable: true, expanded: isExpanded, interactive: true })}
-        <section class="panel">
-          <div class="panel-topbar">
-            <span class="panel-breadcrumb" title="${escapeHtml(payload.filePath)}">${breadcrumb}</span>
-            <span class="panel-topbar-actions">
-              ${htmlToggle}
-              ${canOpenInFolder ? `<button class="panel-action" id="open-in-folder">${folderIcon} Open in folder</button>` : ''}
-              ${canCopy && supportsPreview ? `<button class="panel-action" id="copy-source" title="Copy source" aria-label="Copy source">${copyIcon} Copy</button>` : ''}
-            </span>
-          </div>
-          ${notice}
-          <div class="panel-content-wrapper">
-            ${loadBeforeBanner}
-            ${body.html}
-            ${loadAfterBanner}
-          </div>
-          <div class="panel-footer">
-            <span>${footerLabel}</span>
-          </div>
-        </section>
-      </main>
-    `;
-    document.body.classList.add('dc-ready');
-    attachCopyHandler(payload);
-    attachHtmlToggleHandler(container, payload, htmlMode);
-    attachOpenInFolderHandler(payload);
-    attachLoadAllHandler(container, payload, htmlMode);
-    attachTextSelectionHandler(payload);
-    const compactRow = document.getElementById('compact-toggle');
-    shellController = createCompactRowShellController({
-        shell: document.getElementById('tool-shell'),
-        compactRow,
-        initialExpanded: isExpanded,
-        onToggle: (expanded) => {
-            isExpanded = expanded;
-            trackUiEvent?.(expanded ? 'expand' : 'collapse', {
-                file_type: payload.fileType,
-                file_extension: fileExtension
-            });
-        },
-        onScrollAfterExpand: () => {
-            trackUiEvent?.('scroll_after_expand', {
-                file_type: payload.fileType,
-                file_extension: fileExtension
-            });
-        },
-        onRender
-    });
-    onRender?.();
-    if (!previewShownFired) {
-        previewShownFired = true;
-        trackUiEvent?.('preview_shown', {
-            file_type: payload.fileType,
-            file_extension: fileExtension
-        });
-    }
-}
-export function bootstrapApp() {
-    const container = document.getElementById('app');
-    if (!container) {
-        return;
-    }
-    renderLoadingState(container);
-    // Use the official App class – it connects to the host via PostMessageTransport
-    // (window.parent by default) and speaks standard MCP JSON-RPC 2.0 over postMessage.
-    const app = new App({ name: 'Desktop Commander File Preview', version: '1.0.0' }, { updateModelContext: { text: {} } }, { autoResize: true });
-    const chrome = {
-        expanded: isExpanded,
-        hideSummaryRow,
-    };
-    const syncChromeState = () => {
-        isExpanded = chrome.expanded;
-        hideSummaryRow = chrome.hideSummaryRow;
-    };
-    // Widget state for cross-host persistence (survives page refresh)
-    const widgetState = createWidgetStateStorage((v) => isPreviewStructuredContent(v) && typeof v.content === 'string');
-    const renderAndSync = (payload) => {
-        if (payload) {
-            widgetState.write(payload);
-        }
-        renderApp(container, payload, 'rendered', isExpanded);
-    };
-    let initialStateResolved = false;
-    const resolveInitialState = (payload, message) => {
-        if (initialStateResolved) {
-            return;
-        }
-        initialStateResolved = true;
-        if (payload) {
-            renderAndSync(payload);
-            return;
-        }
-        renderStatusState(container, message ?? 'No preview available for this response.');
-        onRender?.();
-    };
-    // autoResize handles size reporting; onRender can be a no-op
-    onRender = () => { };
-    // Wire rpcCallTool through the App's callServerTool proxy
-    rpcCallTool = (name, args) => (app.callServerTool({ name, arguments: args }));
-    // Wire rpcUpdateContext through the App's updateModelContext
-    rpcUpdateContext = (text) => {
-        const params = text
-            ? { content: [{ type: 'text', text }] }
-            : { content: [] };
-        app.updateModelContext(params).catch(() => {
-            // Host may not support updateModelContext
-        });
-    };
-    trackUiEvent = createUiEventTracker((name, args) => app.callServerTool({ name, arguments: args }), {
-        component: 'file_preview',
-        baseParams: { tool_name: 'read_file' },
-    });
-    // Register ALL handlers BEFORE connect
-    app.onteardown = async () => {
-        shellController?.dispose();
-        return {};
-    };
-    app.ontoolinput = (_params) => {
-        // Tool is executing – show loading state
-        renderLoadingState(container);
-        onRender?.();
-    };
-    app.ontoolresult = (result) => {
-        const payload = extractRenderPayload(result);
-        const message = extractToolText(result);
-        if (!initialStateResolved) {
-            if (payload) {
-                renderLoadingState(container);
-                onRender?.();
-                window.setTimeout(() => resolveInitialState(payload), 120);
-                return;
-            }
-            if (message) {
-                resolveInitialState(undefined, message);
-            }
-            return;
-        }
-        if (payload) {
-            renderAndSync(payload);
-        }
-        else if (message) {
-            renderStatusState(container, message);
-            onRender?.();
-        }
-    };
-    app.ontoolcancelled = (params) => {
-        resolveInitialState(undefined, params.reason ?? 'Tool was cancelled.');
-    };
-    // Connect to the host (defaults to window.parent via PostMessageTransport)
-    void connectWithSharedHostContext({
-        app,
-        chrome,
-        onContextApplied: syncChromeState,
-        onConnected: () => {
-            // Try to restore from persisted widget state (survives refresh on some hosts)
-            const cachedPayload = widgetState.read();
-            if (cachedPayload) {
-                window.setTimeout(() => resolveInitialState(cachedPayload), 50);
-            }
-            // Fallback: if no tool data arrives, show a helpful status message
-            window.setTimeout(() => {
-                if (!initialStateResolved) {
-                    resolveInitialState(undefined, 'Preview unavailable after page refresh. Switch threads or re-run the tool.');
-                }
-            }, 8000);
-        },
-    }).catch(() => {
-        renderStatusState(container, 'Failed to connect to host.');
-        onRender?.();
-    });
-    window.addEventListener('beforeunload', () => {
-        shellController?.dispose();
-    }, { once: true });
-}