@wonderwhy-er/desktop-commander 0.2.38 → 0.2.40

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

@@ -1,476 +1,163 @@
 /**
- * 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.
+ * Composition root for the File Preview app. It wires host services, file-type handlers, and specialized controllers together without owning feature logic inline.
  */
-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 { App } from '@modelcontextprotocol/ext-apps';
 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 { connectWithSharedHostContext } from '../../shared/host-context.js';
 import { createUiEventTracker } from '../../shared/ui-event-tracker.js';
-import { App } from '@modelcontextprotocol/ext-apps';
+import { attachDirectoryHandlers } from './directory-controller.js';
+import { buildDocumentLayout } from './document-layout.js';
+import { getDocumentFullscreenAvailability, parseReadRange, stripReadStatusLine } from './document-workspace.js';
+import { getFileTypeCapabilities, renderPayloadBody } from './file-type-handlers.js';
+import { buildOpenInEditorCommand, buildOpenInFolderCommand, detectDefaultMarkdownEditor, renderMarkdownEditorAppIcon } from './host/external-actions.js';
+import { attachSelectionContext } from './host/selection-context.js';
+import { createMarkdownController } from './markdown/controller.js';
+import { createConflictDialogController, renderConflictDialogMarkup, } from './markdown/conflict-dialog.js';
+import { attachPanelActions } from './panel-actions.js';
+import { extractRenderPayload, extractToolText, getFileExtensionForAnalytics, isLikelyUrl, isPreviewStructuredContent } from './payload-utils.js';
 let isExpanded = false;
 let hideSummaryRow = false;
 let previewShownFired = false;
 let onRender;
 let trackUiEvent;
+let conflictDialogController;
 let rpcCallTool;
 let rpcUpdateContext;
+let openExternalLink;
+let requestDisplayMode;
 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);
+let currentPayload;
+let currentHtmlMode = 'rendered';
+let currentHostContext;
+let rerenderCurrent;
+let syncPayload;
+let persistPayload;
+let localPayloadOverride;
+let hostPayload;
+let inlinePayloadBeforeFullscreen;
+let directoryBackPayload;
+let selectionAbortController = null;
+const markdownEditorAppCache = new Map();
+const markdownEditorAppPending = new Set();
+async function callToolIfReady(name, args) {
+    return rpcCallTool ? rpcCallTool(name, args) : undefined;
 }
-function buildOpenInFolderCommand(filePath) {
-    const trimmedPath = filePath.trim();
-    if (!trimmedPath || isLikelyUrl(trimmedPath)) {
-        return undefined;
+function getAvailableDisplayModes() {
+    const rawModes = currentHostContext?.availableDisplayModes;
+    if (!Array.isArray(rawModes)) {
+        return [];
     }
-    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))}`;
+    return rawModes.filter((mode) => typeof mode === 'string');
 }
-function renderRawFallback(source) {
-    return `<pre class="code-viewer"><code class="hljs language-text">${escapeHtml(source)}</code></pre>`;
+function getCurrentDisplayMode() {
+    return typeof currentHostContext?.displayMode === 'string'
+        ? currentHostContext.displayMode
+        : null;
 }
-function stripReadStatusLine(content) {
-    // Remove the synthetic read status header shown by read_file pagination.
-    return content.replace(/^\[Reading [^\]]+\]\r?\n?/, '');
+function storePayloadOverride(payload) {
+    localPayloadOverride = payload;
+    currentPayload = payload;
+    persistPayload?.(payload);
 }
-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>'
-        };
+function getEffectiveIncomingPayload(payload) {
+    if (!localPayloadOverride) {
+        return payload;
     }
-    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 (localPayloadOverride.filePath !== payload.filePath) {
+        localPayloadOverride = undefined;
+        return 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>`
-        };
+    const incomingContent = stripReadStatusLine(payload.content);
+    const overriddenContent = stripReadStatusLine(localPayloadOverride.content);
+    if (incomingContent === overriddenContent) {
+        return payload;
     }
+    return localPayloadOverride;
 }
-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);
+function updateSaveStatusDOM(label, statusClass) {
+    const existing = document.querySelector('.panel-save-status');
+    if (label) {
+        if (existing) {
+            existing.textContent = label;
+            existing.className = `panel-save-status panel-save-status--${statusClass}`;
         }
-    };
-    const copyTextData = async (text) => {
-        try {
-            if (navigator.clipboard?.writeText) {
-                await navigator.clipboard.writeText(text);
-                return true;
+        else {
+            const actions = document.querySelector('.panel-topbar-actions');
+            if (actions) {
+                const span = document.createElement('span');
+                span.className = `panel-save-status panel-save-status--${statusClass}`;
+                span.textContent = label;
+                actions.prepend(span);
             }
-            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;
+    else if (existing) {
+        existing.remove();
     }
-    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);
+const markdownController = createMarkdownController({
+    callTool: callToolIfReady,
+    openExternalLink: async (url) => (openExternalLink ? openExternalLink(url) : undefined),
+    requestDisplayMode: async (mode) => (requestDisplayMode ? requestDisplayMode(mode) : undefined),
+    getAvailableDisplayModes,
+    getCurrentDisplayMode,
+    getCurrentPayload: () => currentPayload,
+    setExpanded: (expanded) => {
+        isExpanded = expanded;
+    },
+    syncPayload: (payload) => syncPayload?.(payload),
+    storePayloadOverride,
+    rerender: () => {
+        rerenderCurrent?.();
+    },
+    updateSaveStatus: updateSaveStatusDOM,
+    trackUiEvent: (event, params) => trackUiEvent?.(event, params),
+    showConflictDialog: (options) => {
+        if (conflictDialogController) {
+            conflictDialogController.open(options);
+            return;
         }
-    };
-    beforeBtn?.addEventListener('click', () => void loadLines(beforeBtn, 'before'));
-    afterBtn?.addEventListener('click', () => void loadLines(afterBtn, 'after'));
-}
+        // Dialog not yet initialized (would only happen if the save failure
+        // somehow fires before bootstrapApp). Fall back to the cancel callback
+        // so the editor still shows its inline note instead of silently no-op'ing.
+        console.warn('[file-preview] conflictDialogController not ready; firing onCancel fallback');
+        options.onCancel?.();
+    },
+});
 /**
- * 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.
+ * Check if a payload needs its file content to be read.
+ * Tool results from edit_block/write_file include structuredContent but
+ * their text is a success message, not file content. Detect this by
+ * checking for the absence of the read status line that read_file always includes.
+ * URL payloads are fetched remotely by read_file(isUrl:true); we can't
+ * re-fetch them from here (no isUrl flag on the refresh path), so skip.
  */
-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 needsContentRead(payload) {
+    if (payload.fileType === 'directory' || payload.fileType === 'image' || payload.fileType === 'unsupported') {
+        return false;
     }
-    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 '';
+    if (/^https?:\/\//i.test(payload.filePath)) {
+        return false;
     }
-    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 !parseReadRange(payload.content);
+}
+async function readAndResolvePayload(payload, onReady) {
+    try {
+        const freshPayload = await markdownController.readPayload(payload.filePath);
+        if (freshPayload) {
+            onReady(freshPayload);
+            if (freshPayload.fileType === 'markdown') {
+                void markdownController.refreshFromDisk(freshPayload);
             }
             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 });
+    }
+    catch {
+        // Fall through to original payload.
+    }
+    onReady(payload);
 }
 function renderStatusState(container, message) {
     container.innerHTML = `
@@ -490,108 +177,149 @@ function renderLoadingState(container) {
 }
 export function renderApp(container, payload, htmlMode = 'rendered', expandedState = false) {
     isExpanded = expandedState;
+    currentHtmlMode = htmlMode;
     shellController?.dispose();
     shellController = undefined;
+    if (!payload || payload.fileType !== 'markdown') {
+        markdownController.clear();
+    }
+    else {
+        markdownController.disposeHandles();
+    }
     if (!payload) {
+        selectionAbortController?.abort();
+        selectionAbortController = null;
+        currentPayload = undefined;
         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) {
+    currentPayload = payload;
+    const capabilities = getFileTypeCapabilities(payload);
+    if (!capabilities.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>
-    `;
+    const body = renderPayloadBody({
+        payload,
+        htmlMode,
+        startLine: range?.fromLine ?? 1,
+        markdownController,
+    });
+    const markdownWorkspace = payload.fileType === 'markdown' ? markdownController.getState(payload) : undefined;
+    const fileExtension = getFileExtensionForAnalytics(payload.filePath);
+    const isFullscreen = getCurrentDisplayMode() === 'fullscreen';
+    const canGoFullscreen = !isFullscreen && getDocumentFullscreenAvailability({
+        availableDisplayModes: getAvailableDisplayModes(),
+    }).canFullscreen;
+    const defaultMarkdownEditor = payload.fileType === 'markdown'
+        ? markdownEditorAppCache.get(payload.filePath)
+        : undefined;
+    if (payload.fileType === 'markdown' && !defaultMarkdownEditor) {
+        void detectDefaultMarkdownEditor({
+            filePath: payload.filePath,
+            editorAppCache: markdownEditorAppCache,
+            editorAppPending: markdownEditorAppPending,
+            callTool: callToolIfReady,
+            extractToolText,
+            onDetected: () => {
+                rerenderCurrent?.();
+            },
+        });
+    }
+    const layout = buildDocumentLayout({
+        payload,
+        body,
+        capabilities,
+        fileExtension,
+        htmlMode,
+        currentDisplayMode: getCurrentDisplayMode(),
+        isExpanded,
+        hideSummaryRow,
+        markdownWorkspace,
+        canGoFullscreen,
+        isMarkdownUndoAvailable: markdownWorkspace ? markdownController.isUndoAvailable(markdownWorkspace) : false,
+        defaultMarkdownEditorName: defaultMarkdownEditor?.appName,
+        markdownEditorAppIcon: renderMarkdownEditorAppIcon(),
+        hasDirectoryBackButton: Boolean(directoryBackPayload),
+    });
+    container.innerHTML = layout.html;
     document.body.classList.add('dc-ready');
-    attachCopyHandler(payload);
-    attachHtmlToggleHandler(container, payload, htmlMode);
-    attachOpenInFolderHandler(payload);
-    attachLoadAllHandler(container, payload, htmlMode);
-    attachTextSelectionHandler(payload);
+    attachPanelActions({
+        container,
+        payload,
+        htmlMode,
+        getIsExpanded: () => isExpanded,
+        callTool: callToolIfReady,
+        trackUiEvent,
+        getFileExtensionForAnalytics,
+        buildOpenInFolderCommand: (filePath) => buildOpenInFolderCommand(filePath, isLikelyUrl),
+        buildOpenInEditorCommand: (filePath) => buildOpenInEditorCommand(filePath, isLikelyUrl, markdownEditorAppCache),
+        render: (nextPayload, nextHtmlMode = 'rendered', nextExpanded = isExpanded) => {
+            renderApp(container, nextPayload, nextHtmlMode, nextExpanded);
+        },
+        updateSaveStatus: updateSaveStatusDOM,
+        markdownController,
+    });
+    if (payload.fileType === 'markdown') {
+        markdownController.attachHandlers(payload);
+    }
+    selectionAbortController = attachSelectionContext({
+        payload,
+        isMarkdownEditing: payload.fileType === 'markdown' && !!markdownWorkspace,
+        updateContext: rpcUpdateContext,
+        trackUiEvent,
+        getFileExtensionForAnalytics,
+        previousAbortController: selectionAbortController,
+    });
+    if (payload.fileType === 'directory') {
+        attachDirectoryHandlers({
+            container,
+            callTool: callToolIfReady,
+            buildOpenInFolderCommand: (filePath) => buildOpenInFolderCommand(filePath, isLikelyUrl),
+            onOpenPayload: (nextPayload) => {
+                directoryBackPayload = payload;
+                renderApp(container, nextPayload, 'rendered', true);
+            },
+        });
+    }
+    const backBtn = document.getElementById('dir-back');
+    if (backBtn && directoryBackPayload) {
+        const savedPayload = directoryBackPayload;
+        backBtn.addEventListener('click', () => {
+            directoryBackPayload = undefined;
+            renderApp(container, savedPayload, 'rendered', true);
+        });
+    }
+    if (payload.fileType === 'directory') {
+        directoryBackPayload = undefined;
+    }
     const compactRow = document.getElementById('compact-toggle');
     shellController = createCompactRowShellController({
         shell: document.getElementById('tool-shell'),
         compactRow,
-        initialExpanded: isExpanded,
+        initialExpanded: layout.effectiveExpanded,
         onToggle: (expanded) => {
             isExpanded = expanded;
             trackUiEvent?.(expanded ? 'expand' : 'collapse', {
                 file_type: payload.fileType,
-                file_extension: fileExtension
+                file_extension: fileExtension,
             });
         },
         onScrollAfterExpand: () => {
             trackUiEvent?.('scroll_after_expand', {
                 file_type: payload.fileType,
-                file_extension: fileExtension
+                file_extension: fileExtension,
             });
         },
-        onRender
+        onRender,
     });
     onRender?.();
     if (!previewShownFired) {
         previewShownFired = true;
         trackUiEvent?.('preview_shown', {
             file_type: payload.fileType,
-            file_extension: fileExtension
+            file_extension: fileExtension,
         });
     }
 }
@@ -601,8 +329,18 @@ export function bootstrapApp() {
         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.
+    // Mount the conflict dialog once at body level. It's position: fixed and
+    // must live outside the app container so that re-renders of the document
+    // body never wipe it while it's open.
+    if (!document.getElementById('md-conflict-modal')) {
+        const dialogHost = document.createElement('div');
+        dialogHost.innerHTML = renderConflictDialogMarkup();
+        const dialogRoot = dialogHost.firstElementChild;
+        if (dialogRoot) {
+            document.body.appendChild(dialogRoot);
+        }
+    }
+    conflictDialogController = createConflictDialogController({ container: document });
     const app = new App({ name: 'Desktop Commander File Preview', version: '1.0.0' }, { updateModelContext: { text: {} } }, { autoResize: true });
     const chrome = {
         expanded: isExpanded,
@@ -612,14 +350,33 @@ export function bootstrapApp() {
         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 widgetState = createWidgetStateStorage((value) => isPreviewStructuredContent(value) && typeof value.content === 'string');
     const renderAndSync = (payload) => {
         if (payload) {
             widgetState.write(payload);
         }
         renderApp(container, payload, 'rendered', isExpanded);
     };
+    const syncFromPersistedWidgetState = () => {
+        const persistedPayload = widgetState.read();
+        if (!persistedPayload) {
+            return;
+        }
+        if (currentPayload
+            && currentPayload.filePath === persistedPayload.filePath
+            && stripReadStatusLine(currentPayload.content) === stripReadStatusLine(persistedPayload.content)) {
+            return;
+        }
+        renderAndSync(persistedPayload);
+    };
+    syncPayload = renderAndSync;
+    persistPayload = (payload) => {
+        widgetState.write(payload);
+    };
+    rerenderCurrent = () => {
+        renderApp(container, currentPayload, currentHtmlMode, isExpanded);
+    };
+    let pendingCachedPayload;
     let initialStateResolved = false;
     const resolveInitialState = (payload, message) => {
         if (initialStateResolved) {
@@ -627,47 +384,66 @@ export function bootstrapApp() {
         }
         initialStateResolved = true;
         if (payload) {
+            hostPayload = payload;
             renderAndSync(payload);
+            if (payload.fileType === 'markdown' && getCurrentDisplayMode() === 'fullscreen') {
+                void markdownController.requestEditMode(payload);
+            }
+            if (payload.fileType === 'markdown') {
+                void markdownController.refreshFromDisk(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
+            // Host may not support updateModelContext.
         });
     };
+    openExternalLink = async (url) => {
+        const result = await app.openLink({ url });
+        return result.isError !== true;
+    };
+    requestDisplayMode = async (mode) => {
+        const result = await app.requestDisplayMode({ mode });
+        return typeof result.mode === 'string' ? result.mode : null;
+    };
     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
+    app.ontoolinput = (params) => {
+        const requestedPath = typeof params.arguments?.path === 'string' ? params.arguments.path : undefined;
+        if (!initialStateResolved
+            && pendingCachedPayload
+            && requestedPath
+            && pendingCachedPayload.filePath === requestedPath) {
+            const cached = pendingCachedPayload;
+            pendingCachedPayload = undefined;
+            resolveInitialState(cached);
+            return;
+        }
         renderLoadingState(container);
         onRender?.();
     };
     app.ontoolresult = (result) => {
+        pendingCachedPayload = undefined;
         const payload = extractRenderPayload(result);
         const message = extractToolText(result);
         if (!initialStateResolved) {
             if (payload) {
-                renderLoadingState(container);
-                onRender?.();
-                window.setTimeout(() => resolveInitialState(payload), 120);
+                if (needsContentRead(payload)) {
+                    void readAndResolvePayload(payload, (p) => resolveInitialState(getEffectiveIncomingPayload(p)));
+                    return;
+                }
+                resolveInitialState(getEffectiveIncomingPayload(payload));
                 return;
             }
             if (message) {
@@ -676,7 +452,13 @@ export function bootstrapApp() {
             return;
         }
         if (payload) {
-            renderAndSync(payload);
+            if (needsContentRead(payload)) {
+                renderLoadingState(container);
+                void readAndResolvePayload(payload, (p) => renderAndSync(getEffectiveIncomingPayload(p)));
+            }
+            else {
+                renderAndSync(getEffectiveIncomingPayload(payload));
+            }
         }
         else if (message) {
             renderStatusState(container, message);
@@ -686,18 +468,86 @@ export function bootstrapApp() {
     app.ontoolcancelled = (params) => {
         resolveInitialState(undefined, params.reason ?? 'Tool was cancelled.');
     };
-    // Connect to the host (defaults to window.parent via PostMessageTransport)
+    const handleVisibilitySync = () => {
+        if (document.visibilityState === 'visible') {
+            syncFromPersistedWidgetState();
+        }
+    };
+    const handleFocusSync = () => {
+        // Only sync cross-tab state if the page was hidden (tab switch).
+        // Simple focus changes within the same page should not trigger a re-render
+        // as it destroys the active editor.
+        if (document.visibilityState !== 'visible') {
+            syncFromPersistedWidgetState();
+        }
+    };
+    const teardown = () => {
+        shellController?.dispose();
+        shellController = undefined;
+        markdownController.disposeHandles();
+        selectionAbortController?.abort();
+        selectionAbortController = null;
+        document.removeEventListener('visibilitychange', handleVisibilitySync);
+        window.removeEventListener('focus', handleFocusSync);
+    };
+    document.addEventListener('visibilitychange', handleVisibilitySync);
+    window.addEventListener('focus', handleFocusSync);
+    app.onteardown = async () => {
+        teardown();
+        return {};
+    };
     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);
+        onContextApplied: () => {
+            const previousDisplayMode = getCurrentDisplayMode();
+            syncChromeState();
+            currentHostContext = app.getHostContext();
+            const nextDisplayMode = getCurrentDisplayMode();
+            const displayModeChanged = previousDisplayMode !== nextDisplayMode;
+            // Clicking a display-mode button blurs the editor first, and the
+            // editor's onBlur handler already persists dirty drafts, so there
+            // is nothing additional to save here.
+            if (previousDisplayMode === 'fullscreen'
+                && nextDisplayMode === 'inline'
+                && currentPayload?.fileType === 'markdown') {
+                isExpanded = true;
+                chrome.expanded = true;
+                const restorePayload = inlinePayloadBeforeFullscreen ?? hostPayload;
+                const restoreWasPartial = restorePayload ? parseReadRange(restorePayload.content)?.isPartial === true : false;
+                if (restoreWasPartial && restorePayload) {
+                    localPayloadOverride = restorePayload;
+                    currentPayload = restorePayload;
+                    widgetState.write(restorePayload);
+                    void markdownController.handleInlineExitFromFullscreen(restorePayload).then((freshPayload) => {
+                        if (freshPayload) {
+                            currentPayload = freshPayload;
+                            localPayloadOverride = freshPayload;
+                            widgetState.write(freshPayload);
+                            rerenderCurrent?.();
+                        }
+                    });
+                }
+                else {
+                    void markdownController.handleInlineExitFromFullscreen();
+                }
+                inlinePayloadBeforeFullscreen = undefined;
+            }
+            if (previousDisplayMode !== 'fullscreen'
+                && nextDisplayMode === 'fullscreen'
+                && currentPayload?.fileType === 'markdown') {
+                inlinePayloadBeforeFullscreen = currentPayload;
+                if (parseReadRange(currentPayload.content)?.isPartial) {
+                    void markdownController.requestEditMode(currentPayload);
+                }
+            }
+            if (initialStateResolved && displayModeChanged) {
+                rerenderCurrent?.();
             }
-            // Fallback: if no tool data arrives, show a helpful status message
+        },
+        onConnected: () => {
+            currentHostContext = app.getHostContext();
+            pendingCachedPayload = widgetState.read() ?? undefined;
             window.setTimeout(() => {
                 if (!initialStateResolved) {
                     resolveInitialState(undefined, 'Preview unavailable after page refresh. Switch threads or re-run the tool.');
@@ -709,6 +559,6 @@ export function bootstrapApp() {
         onRender?.();
     });
     window.addEventListener('beforeunload', () => {
-        shellController?.dispose();
+        teardown();
     }, { once: true });
 }