@wonderwhy-er/desktop-commander 0.2.37 → 0.2.38

package/dist/ui/file-preview/shared/preview-file-types.js

@@ -31,7 +31,9 @@ export const TEXT_PREVIEW_EXTENSIONS = new Set([
     '.java',
     '.go',
     '.rs',
-    '.sql'
+    '.sql',
+    '.srt',
+    '.vtt'
 ]);
 const TEXT_PREVIEW_BASENAMES = new Set([
     '.env',

package/dist/ui/file-preview/src/app.d.ts

@@ -1,4 +1,8 @@
 import type { FilePreviewStructuredContent } from '../../../types.js';
 import type { HtmlPreviewMode } from './types.js';
-export declare function renderApp(container: HTMLElement, payload?: FilePreviewStructuredContent, htmlMode?: HtmlPreviewMode, expandedState?: boolean): void;
+type RenderPayload = FilePreviewStructuredContent & {
+    content: string;
+};
+export declare function renderApp(container: HTMLElement, payload?: RenderPayload, htmlMode?: HtmlPreviewMode, expandedState?: boolean): void;
 export declare function bootstrapApp(): void;
+export {};

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

@@ -6,12 +6,14 @@ 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 { createWindowRpcClient, isTrustedParentMessageSource } from '../../shared/rpc-client.js';
-import { createToolShellController } from '../../shared/tool-shell.js';
-import { createUiHostLifecycle } from '../../shared/host-lifecycle.js';
-import { createUiThemeAdapter } from '../../shared/theme-adaptation.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;
@@ -27,52 +29,33 @@ function getFileExtensionForAnalytics(filePath) {
     }
     return fileName.slice(dotIndex + 1).toLowerCase();
 }
-function isObject(value) {
-    return typeof value === 'object' && value !== null;
-}
 function isPreviewStructuredContent(value) {
-    if (!isObject(value)) {
+    if (!isObjectRecord(value)) {
         return false;
     }
     return (typeof value.fileName === 'string' &&
         typeof value.filePath === 'string' &&
-        typeof value.fileType === 'string' &&
-        typeof value.content === 'string');
+        typeof value.fileType === 'string');
 }
-function readStructuredContentFromWindow() {
-    const candidates = [
-        window.__DC_FILE_PREVIEW__,
-        window.__MCP_TOOL_RESULT__,
-        window.toolResult,
-        window.structuredContent
-    ];
-    for (const candidate of candidates) {
-        if (!isObject(candidate)) {
-            continue;
-        }
-        if (isPreviewStructuredContent(candidate.structuredContent)) {
-            return candidate.structuredContent;
-        }
-        if (isPreviewStructuredContent(candidate)) {
-            return candidate;
-        }
-    }
-    return undefined;
+function buildRenderPayload(meta, text) {
+    return { ...meta, content: text };
 }
-function extractStructuredContent(value) {
-    if (!isObject(value)) {
+function extractRenderPayload(value) {
+    if (!isObjectRecord(value)) {
         return undefined;
     }
-    if (isPreviewStructuredContent(value.structuredContent)) {
-        return value.structuredContent;
-    }
-    if (isPreviewStructuredContent(value)) {
-        return 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 (!isObject(value)) {
+    if (!isObjectRecord(value)) {
         return undefined;
     }
     const content = value.content;
@@ -80,7 +63,7 @@ function extractToolText(value) {
         return undefined;
     }
     for (const item of content) {
-        if (!isObject(item)) {
+        if (!isObjectRecord(item)) {
             continue;
         }
         if (item.type === 'text' && typeof item.text === 'string' && item.text.trim().length > 0) {
@@ -89,31 +72,6 @@ function extractToolText(value) {
     }
     return undefined;
 }
-function extractToolTextFromEvent(value) {
-    if (!isObject(value)) {
-        return undefined;
-    }
-    const direct = extractToolText(value);
-    if (direct) {
-        return direct;
-    }
-    if (isObject(value.result)) {
-        const nested = extractToolText(value.result);
-        if (nested) {
-            return nested;
-        }
-    }
-    if (isObject(value.params)) {
-        const paramsText = extractToolText(value.params);
-        if (paramsText) {
-            return paramsText;
-        }
-        if (isObject(value.params.result)) {
-            return extractToolText(value.params.result);
-        }
-    }
-    return undefined;
-}
 function isLikelyUrl(filePath) {
     return /^https?:\/\//i.test(filePath);
 }
@@ -517,9 +475,7 @@ function attachTextSelectionHandler(payload) {
 function renderStatusState(container, message) {
     container.innerHTML = `
       <main class="shell">
-        <div class="compact-row compact-row--status">
-          <span class="compact-label">${escapeHtml(message)}</span>
-        </div>
+        ${renderCompactRow({ label: message, variant: 'status', interactive: false })}
       </main>
     `;
     document.body.classList.add('dc-ready');
@@ -527,9 +483,7 @@ function renderStatusState(container, message) {
 function renderLoadingState(container) {
     container.innerHTML = `
       <main class="shell">
-        <div class="compact-row compact-row--loading">
-          <span class="compact-label">Preparing preview…</span>
-        </div>
+        ${renderCompactRow({ label: 'Preparing preview…', variant: 'loading', interactive: false })}
       </main>
     `;
     document.body.classList.add('dc-ready');
@@ -547,6 +501,11 @@ export function renderApp(container, payload, htmlMode = 'rendered', expandedSta
     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>` : '';
@@ -578,12 +537,8 @@ export function renderApp(container, payload, htmlMode = 'rendered', expandedSta
         ? `<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'}">
-        <div class="compact-row compact-row--ready" id="compact-toggle" role="button" tabindex="0" aria-expanded="${isExpanded}">
-          <svg class="compact-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 6l6 6-6 6z"/></svg>
-          <span class="compact-label">${compactLabel}</span>
-          <span class="compact-filename">${escapeHtml(payload.fileName)}</span>
-        </div>
+      <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>
@@ -611,26 +566,13 @@ export function renderApp(container, payload, htmlMode = 'rendered', expandedSta
     attachOpenInFolderHandler(payload);
     attachLoadAllHandler(container, payload, htmlMode);
     attachTextSelectionHandler(payload);
-    // Compact row click toggles expand/collapse
     const compactRow = document.getElementById('compact-toggle');
-    const handleCompactClick = () => {
-        shellController?.toggle();
-    };
-    const handleCompactKeydown = (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            shellController?.toggle();
-        }
-    };
-    compactRow?.addEventListener('click', handleCompactClick);
-    compactRow?.addEventListener('keydown', handleCompactKeydown);
-    shellController = createToolShellController({
+    shellController = createCompactRowShellController({
         shell: document.getElementById('tool-shell'),
-        toggleButton: null, // No separate toggle button; compact row handles it
+        compactRow,
         initialExpanded: isExpanded,
         onToggle: (expanded) => {
             isExpanded = expanded;
-            compactRow?.setAttribute('aria-expanded', String(expanded));
             trackUiEvent?.(expanded ? 'expand' : 'collapse', {
                 file_type: payload.fileType,
                 file_extension: fileExtension
@@ -659,52 +601,24 @@ export function bootstrapApp() {
         return;
     }
     renderLoadingState(container);
-    const rpcClient = createWindowRpcClient({
-        targetWindow: window.parent,
-        timeoutMs: 15000,
-        isTrustedSource: (source) => isTrustedParentMessageSource(source, window.parent)
-    });
-    const hostLifecycle = createUiHostLifecycle(rpcClient, {
-        appName: 'Desktop Commander File Preview',
-        appVersion: '1.0.0'
-    });
-    const themeAdapter = createUiThemeAdapter();
-    rpcCallTool = (name, args) => (rpcClient.request('tools/call', {
-        name,
-        arguments: args
-    }));
-    rpcUpdateContext = (text) => {
-        const params = text
-            ? { content: [{ type: 'text', text }] }
-            : { content: [] };
-        rpcClient.request('ui/update-model-context', params).catch(() => {
-            // Host may not support ui/update-model-context yet
-        });
+    // 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,
     };
-    trackUiEvent = (event, params = {}) => {
-        void rpcCallTool?.('track_ui_event', {
-            event,
-            component: 'file_preview',
-            params: {
-                tool_name: 'read_file',
-                ...params
-            }
-        }).catch(() => {
-            // Analytics failures should not impact UX.
-        });
+    const syncChromeState = () => {
+        isExpanded = chrome.expanded;
+        hideSummaryRow = chrome.hideSummaryRow;
     };
-    onRender = () => {
-        hostLifecycle.notifyRender();
-    };
-    // ChatGPT widget state persistence (other hosts use standard ui/notifications/tool-result)
-    const widgetState = createWidgetStateStorage(isPreviewStructuredContent);
-    onRender?.();
-    themeAdapter.applyFromData(window.__MCP_HOST_CONTEXT__);
+    // 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); // Persist for refresh recovery (cross-host)
+            widgetState.write(payload);
         }
-        renderApp(container, payload, 'rendered', false);
+        renderApp(container, payload, 'rendered', isExpanded);
     };
     let initialStateResolved = false;
     const resolveInitialState = (payload, message) => {
@@ -719,82 +633,82 @@ export function bootstrapApp() {
         renderStatusState(container, message ?? 'No preview available for this response.');
         onRender?.();
     };
-    // Try to restore from widget state first (ChatGPT only - survives refresh)
-    const cachedPayload = widgetState.read();
-    if (cachedPayload) {
-        window.setTimeout(() => {
-            resolveInitialState(cachedPayload);
-        }, 50);
-    }
-    // Then check window globals
-    const initialPayload = readStructuredContentFromWindow();
-    if (initialPayload) {
-        window.setTimeout(() => {
-            resolveInitialState(initialPayload);
-        }, 140);
-    }
-    // Timeout fallback: if no data arrives after retry, show helpful message
-    window.setTimeout(() => {
+    // 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) {
-            resolveInitialState(undefined, 'Preview unavailable after page refresh (known issue, fix in progress). Switch threads or re-run the tool.');
-        }
-    }, 8000);
-    window.addEventListener('message', (event) => {
-        try {
-            if (rpcClient.handleMessageEvent(event)) {
-                return;
-            }
-            if (!isTrustedParentMessageSource(event.source, window.parent)) {
-                return;
-            }
-            if (!isObject(event.data)) {
-                return;
-            }
-            themeAdapter.applyFromData(event.data);
-            if (event.data.method === 'ui/notifications/tool-result') {
-                const params = event.data.params;
-                const candidate = isObject(params) && isObject(params.result) ? params.result : params;
-                const payload = extractStructuredContent(candidate);
-                const message = extractToolTextFromEvent(event.data) ?? extractToolText(candidate);
-                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?.();
-                }
+            if (payload) {
+                renderLoadingState(container);
+                onRender?.();
+                window.setTimeout(() => resolveInitialState(payload), 120);
                 return;
             }
-            const payload = extractStructuredContent(event.data);
-            if (payload) {
-                if (!initialStateResolved) {
-                    resolveInitialState(payload);
-                    return;
-                }
-                renderAndSync(payload);
+            if (message) {
+                resolveInitialState(undefined, message);
             }
+            return;
         }
-        catch {
-            renderStatusState(container, 'Preview failed to render.');
+        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?.();
     });
-    hostLifecycle.observeResize();
     window.addEventListener('beforeunload', () => {
         shellController?.dispose();
-        rpcClient.dispose();
     }, { once: true });
-    hostLifecycle.initialize();
 }

package/dist/ui/file-preview/src/components/html-renderer.d.ts

@@ -1,9 +1,5 @@
 import type { HtmlPreviewMode } from '../types.js';
-interface HtmlRenderOptions {
-    allowUnsafeScripts?: boolean;
-}
-export declare function renderHtmlPreview(content: string, mode: HtmlPreviewMode, options?: HtmlRenderOptions): {
+export declare function renderHtmlPreview(content: string, mode: HtmlPreviewMode): {
     html: string;
     notice?: string;
 };
-export {};

package/dist/ui/file-preview/src/components/html-renderer.js

@@ -1,24 +1,13 @@
 /**
- * HTML preview renderer with guardrails for display modes. It controls when to show rendered HTML versus source text and ensures fallback behavior is predictable.
+ * HTML preview renderer with display mode control. It handles rendered HTML versus
+ * source text display and ensures fallback behavior is predictable.
+ *
+ * The rendered preview runs inside a nested sandboxed iframe, which is itself inside
+ * the MCP app's sandboxed iframe chain. Scripts and external resources (CDNs) are
+ * allowed since the sandbox isolation prevents any escape.
  */
 import { renderCodeViewer } from './code-viewer.js';
 import { escapeHtml } from './highlighting.js';
-function sanitizeHtml(rawHtml) {
-    const blockedTagPattern = /<\/?(script|iframe|object|embed|link|meta|base|form)[^>]*>/gi;
-    let safe = rawHtml.replace(blockedTagPattern, '');
-    safe = safe.replace(/\son[a-z]+\s*=\s*(".*?"|'.*?'|[^\s>]+)/gi, '');
-    safe = safe.replace(/\s(href|src)\s*=\s*(".*?"|'.*?'|[^\s>]+)/gi, (match, attr, value) => {
-        const strippedValue = String(value).replace(/^['"]|['"]$/g, '').trim().toLowerCase();
-        if (strippedValue.startsWith('javascript:')) {
-            return ` ${attr}="#"`;
-        }
-        if (strippedValue.startsWith('data:text/html')) {
-            return ` ${attr}="#"`;
-        }
-        return match;
-    });
-    return safe;
-}
 function resolveThemeFrameStyles() {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
         return {
@@ -33,17 +22,12 @@ function resolveThemeFrameStyles() {
     const fontFamily = rootStyles.getPropertyValue('--font-sans').trim() || 'system-ui, sans-serif';
     return { background, text, fontFamily };
 }
-function renderSandboxedHtmlFrame(content, allowUnsafeScripts) {
-    const htmlContent = allowUnsafeScripts ? content : sanitizeHtml(content);
-    const csp = allowUnsafeScripts
-        ? ''
-        : `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https: http: data:; style-src 'unsafe-inline';">`;
-    const sandbox = allowUnsafeScripts ? 'allow-scripts allow-forms allow-popups' : '';
+function renderSandboxedHtmlFrame(content) {
     const palette = resolveThemeFrameStyles();
-    const frameDocument = `<!doctype html><html><head><meta charset="utf-8" />${csp}<style>html,body{margin:0;padding:0;background:${palette.background};color:${palette.text};}body{font-family:${palette.fontFamily};padding:16px;line-height:1.5;}img{max-width:100%;height:auto;}</style></head><body>${htmlContent}</body></html>`;
-    return `<iframe class="html-rendered-frame" title="Rendered HTML preview" sandbox="${sandbox}" referrerpolicy="no-referrer" srcdoc="${escapeHtml(frameDocument)}"></iframe>`;
+    const frameDocument = `<!doctype html><html><head><meta charset="utf-8" /><style>html,body{margin:0;padding:0;background:${palette.background};color:${palette.text};}body{font-family:${palette.fontFamily};padding:16px;line-height:1.5;}img{max-width:100%;height:auto;}</style></head><body>${content}</body></html>`;
+    return `<iframe class="html-rendered-frame" title="Rendered HTML preview" sandbox="allow-scripts allow-forms allow-popups" referrerpolicy="no-referrer" srcdoc="${escapeHtml(frameDocument)}"></iframe>`;
 }
-export function renderHtmlPreview(content, mode, options = {}) {
+export function renderHtmlPreview(content, mode) {
     if (mode === 'source') {
         return {
             html: `<div class="panel-content source-content">${renderCodeViewer(content, 'html')}</div>`
@@ -51,7 +35,7 @@ export function renderHtmlPreview(content, mode, options = {}) {
     }
     try {
         return {
-            html: `<div class="panel-content html-content">${renderSandboxedHtmlFrame(content, options.allowUnsafeScripts === true)}</div>`
+            html: `<div class="panel-content html-content">${renderSandboxedHtmlFrame(content)}</div>`
         };
     }
     catch {