@wonderwhy-er/desktop-commander 0.2.38 → 0.2.40

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

@@ -1,21 +1,59 @@
 /**
  * Markdown rendering pipeline for preview mode. It configures markdown-it and highlighting so markdown content is rendered consistently with code block support.
  */
-// markdown-it is intentionally typed locally here to avoid maintaining global ambient module declarations.
-// @ts-expect-error markdown-it does not provide local TypeScript typings in this setup.
-import MarkdownIt from 'markdown-it';
 import { highlightSource } from './highlighting.js';
-const MarkdownItCtor = MarkdownIt;
-const markdown = new MarkdownItCtor({
-    html: false,
-    linkify: true,
-    typographer: false,
+import { createMarkdownIt, prepareMarkdownSource, readHeadingProjection } from '../markdown/parser.js';
+import { createSlugTracker } from '../markdown/slugify.js';
+const markdown = createMarkdownIt({
     highlight(code, language) {
         const normalizedLanguage = (language || 'text').toLowerCase();
         const highlighted = highlightSource(code, normalizedLanguage);
         return `<pre class="code-viewer"><code class="hljs language-${normalizedLanguage}">${highlighted}</code></pre>`;
     }
 });
+const renderHeadingOpen = markdown.renderer.rules.heading_open;
+markdown.renderer.rules.heading_open = (...args) => {
+    const tokens = args[0];
+    const index = args[1];
+    const options = args[2];
+    const environment = args[3] ?? {};
+    const self = args[4];
+    const nextSlug = typeof environment.nextSlug === 'function'
+        ? environment.nextSlug
+        : createSlugTracker();
+    environment.nextSlug = nextSlug;
+    const heading = readHeadingProjection(tokens, index, nextSlug);
+    const token = tokens[index];
+    if (heading) {
+        token.attrSet?.('id', heading.id);
+        token.attrSet?.('data-heading-id', heading.id);
+    }
+    if (typeof renderHeadingOpen === 'function') {
+        return renderHeadingOpen(...args);
+    }
+    return self.renderToken(tokens, index, options);
+};
+const renderLinkOpen = markdown.renderer.rules.link_open;
+markdown.renderer.rules.link_open = (...args) => {
+    const tokens = args[0];
+    const index = args[1];
+    const options = args[2];
+    const self = args[4];
+    const token = tokens[index];
+    token.attrSet?.('data-markdown-link', 'true');
+    const title = token.attrGet?.('title');
+    if (title?.startsWith('mcp-wiki:')) {
+        const rawWikiLink = decodeURIComponent(title.slice('mcp-wiki:'.length));
+        token.attrSet?.('data-wiki-link', rawWikiLink);
+        if (Array.isArray(token.attrs)) {
+            token.attrs = token.attrs.filter(([name]) => name !== 'title');
+        }
+    }
+    if (typeof renderLinkOpen === 'function') {
+        return renderLinkOpen(...args);
+    }
+    return self.renderToken(tokens, index, options);
+};
 export function renderMarkdown(content) {
-    return markdown.render(content);
+    return markdown.render(prepareMarkdownSource(content), { nextSlug: createSlugTracker() });
 }

package/dist/ui/file-preview/src/directory-controller.d.ts

@@ -0,0 +1,8 @@
+import type { RenderBodyResult, RenderPayload } from './model.js';
+export declare function renderDirectoryBody(content: string, rootPath: string): RenderBodyResult;
+export declare function attachDirectoryHandlers(options: {
+    container: HTMLElement;
+    callTool?: (name: string, args: Record<string, unknown>) => Promise<unknown | undefined>;
+    buildOpenInFolderCommand: (filePath: string) => string | undefined;
+    onOpenPayload: (payload: RenderPayload) => void;
+}): void;

package/dist/ui/file-preview/src/directory-controller.js

@@ -0,0 +1,233 @@
+import { escapeHtml } from './components/highlighting.js';
+import { buildRenderPayload, extractToolText } from './payload-utils.js';
+function parseDirectoryEntries(content) {
+    const lines = content.split('\n');
+    const hintLines = [];
+    const entryLines = [];
+    for (const line of lines) {
+        if (/^\[(DIR|FILE|DENIED|WARNING)\]/.test(line.trim())) {
+            entryLines.push(line.trim());
+        }
+        else if (entryLines.length === 0) {
+            hintLines.push(line);
+        }
+    }
+    const flat = [];
+    for (const line of entryLines) {
+        if (line.startsWith('[WARNING]')) {
+            const warnBody = line.replace(/^\[WARNING\]\s*/, '');
+            const colonIdx = warnBody.indexOf(':');
+            const dirName = colonIdx >= 0 ? warnBody.slice(0, colonIdx).trim() : '';
+            const msg = colonIdx >= 0 ? warnBody.slice(colonIdx + 1).trim() : warnBody;
+            const parts = dirName.replace(/\\/g, '/').split('/').filter(Boolean);
+            flat.push({
+                name: dirName,
+                fullPath: dirName,
+                isDir: false,
+                isDenied: false,
+                isWarning: true,
+                warningText: msg,
+                depth: parts.length,
+            });
+            continue;
+        }
+        const isDir = line.startsWith('[DIR]');
+        const isDenied = line.startsWith('[DENIED]');
+        const name = line.replace(/^\[(DIR|FILE|DENIED)\]\s*/, '');
+        const parts = name.replace(/\\/g, '/').split('/');
+        flat.push({
+            name,
+            fullPath: name,
+            isDir,
+            isDenied,
+            isWarning: false,
+            warningText: '',
+            depth: parts.length - 1,
+        });
+    }
+    const root = [];
+    const stack = [root];
+    for (const item of flat) {
+        const baseName = item.fullPath.replace(/\\/g, '/').split('/').pop() ?? item.fullPath;
+        const entry = {
+            name: baseName,
+            isDir: item.isDir,
+            isDenied: item.isDenied,
+            isWarning: item.isWarning,
+            warningText: item.warningText,
+            children: [],
+            relativePath: item.fullPath,
+        };
+        while (stack.length > item.depth + 1) {
+            stack.pop();
+        }
+        const parent = stack[stack.length - 1];
+        parent.push(entry);
+        if (item.isDir) {
+            stack.push(entry.children);
+        }
+    }
+    return { hint: hintLines.join('\n').trim(), entries: root };
+}
+let dirEntryIdCounter = 0;
+function renderDirTree(entries, rootPath) {
+    if (entries.length === 0) {
+        return '<div class="dir-tree"><span class="dir-empty">Empty directory</span></div>';
+    }
+    function renderEntries(items) {
+        return items.map((item) => {
+            const id = `de-${dirEntryIdCounter++}`;
+            const fullPath = `${rootPath}/${item.relativePath.replace(/\\/g, '/')}`;
+            const escapedPath = escapeHtml(fullPath);
+            if (item.isWarning) {
+                return `<div class="dir-entry"><button class="dir-row dir-row-warning dir-load-more" data-loadpath="${escapedPath}"><span class="dir-warning-icon">⚠️</span> <span class="dir-warning-text">${escapeHtml(item.warningText)} — click to load all</span></button></div>`;
+            }
+            if (item.isDenied) {
+                return `<div class="dir-entry"><span class="dir-icon">🚫</span> <span class="dir-name-denied">${escapeHtml(item.name)}</span></div>`;
+            }
+            if (item.isDir) {
+                const hasChildren = item.children.length > 0;
+                const chevron = `<span class="dir-chevron${hasChildren ? ' expanded' : ''}">${hasChildren ? '▼' : '▶'}</span>`;
+                const openButton = `<button class="dir-open-btn" data-openpath="${escapedPath}" title="Open in Finder">📂</button>`;
+                const childrenHtml = hasChildren ? `<div class="dir-children" id="${id}-ch">${renderEntries(item.children)}</div>` : '';
+                return `<div class="dir-entry-group" id="${id}"><div class="dir-row dir-row-folder" data-path="${escapedPath}" data-eid="${id}" data-loaded="${hasChildren}">${chevron} <span class="dir-icon">📁</span> <span class="dir-name">${escapeHtml(item.name)}</span>${openButton}</div>${childrenHtml}</div>`;
+            }
+            return `<div class="dir-entry"><div class="dir-row dir-row-file" data-path="${escapedPath}"><span class="file-icon">📄</span> <span class="file-name">${escapeHtml(item.name)}</span></div></div>`;
+        }).join('');
+    }
+    return `<div class="dir-tree">${renderEntries(entries)}</div>`;
+}
+export function renderDirectoryBody(content, rootPath) {
+    dirEntryIdCounter = 0;
+    const { hint, entries } = parseDirectoryEntries(content);
+    return {
+        notice: hint || undefined,
+        html: `<div class="panel-content directory-content">${renderDirTree(entries, rootPath)}</div>`,
+    };
+}
+export function attachDirectoryHandlers(options) {
+    const tree = options.container.querySelector('.dir-tree');
+    if (!tree) {
+        return;
+    }
+    tree.addEventListener('click', async (event) => {
+        const openBtn = event.target.closest('.dir-open-btn');
+        if (openBtn) {
+            event.stopPropagation();
+            const openPath = openBtn.dataset.openpath;
+            if (!openPath) {
+                return;
+            }
+            const command = options.buildOpenInFolderCommand(openPath);
+            if (command) {
+                try {
+                    await options.callTool?.('start_process', { command, timeout_ms: 12000 });
+                }
+                catch {
+                    // Keep UI stable if opening folder fails.
+                }
+            }
+            return;
+        }
+        const loadMoreBtn = event.target.closest('.dir-load-more');
+        if (loadMoreBtn) {
+            event.stopPropagation();
+            const loadPath = loadMoreBtn.dataset.loadpath;
+            if (!loadPath) {
+                return;
+            }
+            loadMoreBtn.querySelector('.dir-warning-text').textContent = 'Loading…';
+            loadMoreBtn.disabled = true;
+            try {
+                const result = await options.callTool?.('list_directory', { path: loadPath, depth: 1 });
+                const text = extractToolText(result) ?? '';
+                if (text) {
+                    const parsed = parseDirectoryEntries(text);
+                    const html = renderDirTree(parsed.entries, loadPath);
+                    const parentChildren = loadMoreBtn.closest('.dir-children');
+                    if (parentChildren) {
+                        const temp = document.createElement('div');
+                        temp.innerHTML = html;
+                        const inner = temp.querySelector('.dir-tree');
+                        parentChildren.innerHTML = inner ? inner.innerHTML : '';
+                    }
+                }
+            }
+            catch {
+                loadMoreBtn.querySelector('.dir-warning-text').textContent = 'Failed to load';
+                loadMoreBtn.disabled = false;
+            }
+            return;
+        }
+        const target = event.target.closest('.dir-row');
+        if (!target) {
+            return;
+        }
+        const fullPath = target.dataset.path;
+        if (!fullPath) {
+            return;
+        }
+        if (target.classList.contains('dir-row-folder')) {
+            const entryId = target.dataset.eid;
+            if (!entryId) {
+                return;
+            }
+            const childrenEl = document.getElementById(`${entryId}-ch`);
+            const chevron = target.querySelector('.dir-chevron');
+            if (childrenEl) {
+                const hidden = childrenEl.classList.toggle('dir-collapsed');
+                chevron?.classList.toggle('expanded', !hidden);
+                if (chevron)
+                    chevron.textContent = hidden ? '▶' : '▼';
+                return;
+            }
+            if (target.dataset.loaded === 'true') {
+                return;
+            }
+            if (chevron)
+                chevron.textContent = '⏳';
+            try {
+                const result = await options.callTool?.('list_directory', { path: fullPath, depth: 2 });
+                const text = extractToolText(result) ?? '';
+                if (text) {
+                    target.dataset.loaded = 'true';
+                    const parsed = parseDirectoryEntries(text);
+                    const html = renderDirTree(parsed.entries, fullPath);
+                    const wrapper = document.createElement('div');
+                    wrapper.className = 'dir-children';
+                    wrapper.id = `${entryId}-ch`;
+                    const temp = document.createElement('div');
+                    temp.innerHTML = html;
+                    const inner = temp.querySelector('.dir-tree');
+                    wrapper.innerHTML = inner ? inner.innerHTML : '<span class="dir-empty">Empty</span>';
+                    target.parentElement?.appendChild(wrapper);
+                    chevron?.classList.add('expanded');
+                    if (chevron)
+                        chevron.textContent = '▼';
+                }
+            }
+            catch {
+                if (chevron)
+                    chevron.textContent = '⚠';
+            }
+            return;
+        }
+        if (target.classList.contains('dir-row-file')) {
+            target.classList.add('dir-loading');
+            try {
+                const result = await options.callTool?.('read_file', { path: fullPath });
+                if (!result || typeof result !== 'object' || result === null) {
+                    return;
+                }
+                const structuredContent = result.structuredContent;
+                if (structuredContent && typeof structuredContent === 'object') {
+                    const text = extractToolText(result) ?? '';
+                    options.onOpenPayload(buildRenderPayload(structuredContent, text));
+                }
+            }
+            catch {
+                target.classList.remove('dir-loading');
+            }
+        }
+    });
+}

package/dist/ui/file-preview/src/document-layout.d.ts

@@ -0,0 +1,20 @@
+import type { FileTypeCapabilities, MarkdownWorkspaceState, RenderBodyResult, RenderPayload } from './model.js';
+export declare function buildDocumentLayout(options: {
+    payload: RenderPayload;
+    body: RenderBodyResult;
+    capabilities: FileTypeCapabilities;
+    fileExtension: string;
+    htmlMode: 'rendered' | 'source';
+    currentDisplayMode: string | null;
+    isExpanded: boolean;
+    hideSummaryRow: boolean;
+    markdownWorkspace?: MarkdownWorkspaceState;
+    canGoFullscreen: boolean;
+    isMarkdownUndoAvailable: boolean;
+    defaultMarkdownEditorName?: string;
+    markdownEditorAppIcon: string;
+    hasDirectoryBackButton: boolean;
+}): {
+    html: string;
+    effectiveExpanded: boolean;
+};

package/dist/ui/file-preview/src/document-layout.js

@@ -0,0 +1,109 @@
+import { renderCompactRow } from '../../shared/compact-row.js';
+import { escapeHtml } from '../../shared/escape-html.js';
+import { parseReadRange, stripReadStatusLine } from './document-workspace.js';
+import { renderMarkdownCopyButton, renderMarkdownModeToggle } from './markdown/editor.js';
+import { buildBreadcrumb, countContentLines } from './payload-utils.js';
+function renderCopyIcon() {
+    return '<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>';
+}
+function renderFolderIcon() {
+    return '<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>';
+}
+function renderUndoIcon() {
+    return '<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="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 1 1 0 10h-1"/></svg>';
+}
+function renderExpandIcon() {
+    return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
+}
+function renderMarkdownSaveStatus(workspace) {
+    if (workspace.fileDeleted) {
+        return '<span class="panel-save-status panel-save-status--saved">File deleted</span>';
+    }
+    if (workspace.saveIndicator !== 'saved') {
+        return '';
+    }
+    const variant = workspace.saving ? 'saving' : 'saved';
+    return `<span class="panel-save-status panel-save-status--${variant}">Saved</span>`;
+}
+export function buildDocumentLayout(options) {
+    const range = parseReadRange(options.payload.content);
+    const notice = options.body.notice ? `<div class="notice">${options.body.notice}</div>` : '';
+    const breadcrumb = buildBreadcrumb(options.payload.filePath);
+    const lineCount = range ? range.toLine - range.fromLine + 1 : countContentLines(options.payload.content);
+    const fileTypeLabel = options.payload.fileType === 'markdown' ? 'MARKDOWN'
+        : options.payload.fileType === 'html' ? 'HTML'
+            : options.payload.fileType === 'image' ? 'IMAGE'
+                : options.payload.fileType === 'directory' ? 'DIRECTORY'
+                    : options.fileExtension !== 'none' ? options.fileExtension.toUpperCase()
+                        : 'TEXT';
+    const compactLabel = range?.isPartial
+        ? `View lines ${range.fromLine}–${range.toLine}`
+        : options.payload.fileType === 'directory' ? 'View directory'
+            : 'View file';
+    let footerLabel = range?.isPartial
+        ? `${fileTypeLabel} • LINES ${range.fromLine}–${range.toLine} OF ${range.totalLines}`
+        : `${fileTypeLabel} • ${lineCount} LINE${lineCount !== 1 ? 'S' : ''}`;
+    if (options.markdownWorkspace) {
+        const source = stripReadStatusLine(options.markdownWorkspace.draftContent);
+        const markdownWordCount = source.trim().split(/\s+/).filter(Boolean).length;
+        const markdownLineCount = countContentLines(source);
+        footerLabel = `${fileTypeLabel} • EDIT MODE • ${markdownLineCount} LINES • ${markdownWordCount} WORDS`;
+    }
+    const isFullscreen = options.currentDisplayMode === 'fullscreen';
+    const htmlToggle = options.payload.fileType === 'html'
+        ? `<button class="panel-action" id="toggle-html-mode">${options.htmlMode === 'rendered' ? 'Source' : 'Rendered'}</button>`
+        : '';
+    const backButton = options.hasDirectoryBackButton && options.payload.fileType !== 'directory'
+        ? '<button class="panel-action dir-back-btn" id="dir-back" title="Back to directory">← Back</button>'
+        : '';
+    const isMarkdown = options.payload.fileType === 'markdown';
+    const isMarkdownEdit = isMarkdown && !!options.markdownWorkspace;
+    const revertDisabled = isMarkdownEdit && (options.markdownWorkspace.fileDeleted || options.markdownWorkspace.loadingDocument || !options.isMarkdownUndoAvailable);
+    const fileDeleted = isMarkdownEdit && options.markdownWorkspace.fileDeleted;
+    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>`
+        : '';
+    const effectiveExpanded = options.isExpanded || isFullscreen;
+    const canOpenInFolder = options.capabilities.canOpenInFolder;
+    const canCopy = options.capabilities.canCopy;
+    return {
+        effectiveExpanded,
+        html: `
+          <main id="tool-shell" class="shell tool-shell ${effectiveExpanded ? 'expanded' : 'collapsed'}${options.hideSummaryRow ? ' host-framed' : ''}${isFullscreen ? ' fullscreen' : ''}">
+            ${isFullscreen ? '' : renderCompactRow({ id: 'compact-toggle', label: compactLabel, filename: options.payload.fileName, variant: 'ready', expandable: true, expanded: options.isExpanded, interactive: true })}
+            <section class="panel">
+              <div class="panel-topbar">
+                ${backButton}
+                ${options.hideSummaryRow ? '' : `<span class="panel-breadcrumb" title="${escapeHtml(options.payload.filePath)}">${breadcrumb}</span>`}
+                <span class="panel-topbar-actions">
+                    ${isMarkdownEdit ? renderMarkdownSaveStatus(options.markdownWorkspace) : ''}
+                    ${htmlToggle}
+                    ${isMarkdownEdit && isFullscreen ? renderMarkdownModeToggle(options.markdownWorkspace.editorView) : ''}
+                    ${isMarkdown && !isFullscreen && options.canGoFullscreen ? `<button class="panel-action" id="expand-fullscreen" title="Expand" aria-label="Expand">${renderExpandIcon()}</button>` : ''}
+                    ${isMarkdownEdit ? `<button class="panel-action" id="revert-markdown" ${isFullscreen ? '' : 'title="Undo" aria-label="Undo" '}${revertDisabled ? 'disabled' : ''}>${renderUndoIcon()}${isFullscreen ? ' Undo' : ''}</button>` : ''}
+                    ${isMarkdownEdit && isFullscreen ? renderMarkdownCopyButton() : ''}
+                    ${isMarkdown && !isFullscreen ? `<button class="panel-action" id="copy-active-markdown" title="Copy" aria-label="Copy">${renderCopyIcon()}</button>` : ''}
+                    ${canCopy && options.capabilities.supportsPreview && !isMarkdown ? `<button class="panel-action" id="copy-source" title="Copy source" aria-label="Copy source">${renderCopyIcon()}</button>` : ''}
+                    ${canOpenInFolder && isMarkdownEdit && isFullscreen ? `<button class="panel-action" id="open-in-editor" ${fileDeleted ? 'disabled' : ''}>${options.markdownEditorAppIcon} Open in ${escapeHtml(options.defaultMarkdownEditorName ?? 'editor')}</button>` : ''}
+                    ${canOpenInFolder && !(isMarkdownEdit && isFullscreen) ? `<button class="panel-action" id="open-in-folder" title="Open in folder" aria-label="Open in folder" ${isMarkdownEdit && fileDeleted ? 'disabled' : ''}>${renderFolderIcon()}</button>` : ''}
+                </span>
+              </div>
+              ${notice}
+              <div class="panel-content-wrapper">
+                ${loadBeforeBanner}
+                ${options.body.html}
+                ${loadAfterBanner}
+              </div>
+              <div class="panel-footer">
+                <span>${footerLabel}</span>
+              </div>
+            </section>
+          </main>
+        `,
+    };
+}

package/dist/ui/file-preview/src/document-outline.d.ts

@@ -0,0 +1,17 @@
+export interface DocumentOutlineItem {
+    id: string;
+    text: string;
+    level: number;
+    line?: number;
+}
+export interface DocumentOutlineHandle {
+    dispose: () => void;
+    refresh: (outline: DocumentOutlineItem[], activeHeadingId?: string | null) => void;
+}
+export declare function renderDocumentOutline(outline: DocumentOutlineItem[], activeHeadingId?: string | null): string;
+export declare function attachDocumentOutline(options: {
+    shell: HTMLElement;
+    outline: DocumentOutlineItem[];
+    scrollContainer: HTMLElement;
+    onSelect: (headingId: string) => void;
+}): DocumentOutlineHandle | null;

package/dist/ui/file-preview/src/document-outline.js

@@ -0,0 +1,97 @@
+import { escapeHtml } from '../../shared/escape-html.js';
+function setActiveItem(nav, activeId) {
+    const buttons = Array.from(nav.querySelectorAll('[data-toc-id]'));
+    buttons.forEach((button) => {
+        const isActive = button.dataset.tocId === activeId;
+        button.classList.toggle('is-active', isActive);
+        button.setAttribute('aria-current', isActive ? 'location' : 'false');
+    });
+}
+function renderDocumentOutlineItems(outline, activeHeadingId) {
+    return outline.map((item) => {
+        const activeClass = item.id === activeHeadingId ? ' is-active' : '';
+        return `<button class="document-outline-link markdown-toc-link${activeClass}" type="button" data-toc-id="${escapeHtml(item.id)}" data-level="${item.level}" aria-current="${item.id === activeHeadingId ? 'location' : 'false'}">${escapeHtml(item.text)}</button>`;
+    }).join('');
+}
+function renderCollapseIcon() {
+    return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>';
+}
+function renderExpandIcon() {
+    return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+}
+export function renderDocumentOutline(outline, activeHeadingId) {
+    if (outline.length === 0) {
+        return '';
+    }
+    return `
+      <aside class="document-outline-shell markdown-toc-shell" aria-label="Table of contents">
+        <div class="document-outline-header markdown-toc-header">
+          <span class="document-outline-title markdown-toc-title">Contents</span>
+          <button class="document-outline-toggle" id="toc-toggle" type="button" title="Collapse sidebar" aria-label="Collapse sidebar">${renderCollapseIcon()}</button>
+        </div>
+        <nav class="document-outline-nav markdown-toc-nav">${renderDocumentOutlineItems(outline, activeHeadingId)}</nav>
+      </aside>
+    `;
+}
+export function attachDocumentOutline(options) {
+    const nav = options.shell.querySelector('.document-outline-nav');
+    if (!nav) {
+        return null;
+    }
+    let currentOutline = options.outline;
+    const handleClick = (event) => {
+        const target = event.target;
+        const button = target?.closest('[data-toc-id]');
+        const headingId = button?.dataset.tocId;
+        if (!headingId) {
+            return;
+        }
+        options.onSelect(headingId);
+        setActiveItem(nav, headingId);
+    };
+    const updateActiveHeading = () => {
+        const headings = currentOutline
+            .map((item) => {
+            const element = document.getElementById(item.id);
+            return element ? { item, element } : null;
+        })
+            .filter((entry) => entry !== null);
+        if (headings.length === 0) {
+            return;
+        }
+        const scrollTop = options.scrollContainer.scrollTop;
+        const nextActive = headings.reduce((activeId, current) => {
+            if (current.element.offsetTop - scrollTop <= 96) {
+                return current.item.id;
+            }
+            return activeId;
+        }, headings[0].item.id);
+        setActiveItem(nav, nextActive);
+    };
+    const toggleButton = options.shell.querySelector('#toc-toggle');
+    const handleToggle = () => {
+        const isCollapsed = options.shell.classList.toggle('markdown-toc-collapsed');
+        if (toggleButton) {
+            toggleButton.innerHTML = isCollapsed ? renderExpandIcon() : renderCollapseIcon();
+            toggleButton.title = isCollapsed ? 'Expand sidebar' : 'Collapse sidebar';
+            toggleButton.setAttribute('aria-label', isCollapsed ? 'Expand sidebar' : 'Collapse sidebar');
+        }
+    };
+    toggleButton?.addEventListener('click', handleToggle);
+    nav.addEventListener('click', handleClick);
+    options.scrollContainer.addEventListener('scroll', updateActiveHeading, { passive: true });
+    updateActiveHeading();
+    return {
+        dispose: () => {
+            nav.removeEventListener('click', handleClick);
+            options.scrollContainer.removeEventListener('scroll', updateActiveHeading);
+            toggleButton?.removeEventListener('click', handleToggle);
+        },
+        refresh: (outline, activeHeadingId) => {
+            currentOutline = outline;
+            nav.innerHTML = renderDocumentOutlineItems(currentOutline, activeHeadingId);
+            setActiveItem(nav, activeHeadingId ?? null);
+            updateActiveHeading();
+        },
+    };
+}

package/dist/ui/file-preview/src/document-workspace.d.ts

@@ -0,0 +1,19 @@
+export interface ReadRange {
+    fromLine: number;
+    toLine: number;
+    totalLines: number;
+    isPartial: boolean;
+    /** 0-based offset for read_file calls. "from start" → 0, "from line N" → N. */
+    readOffset: number;
+}
+export declare function stripReadStatusLine(content: string): string;
+export declare function parseReadRange(content: string): ReadRange | undefined;
+export declare function getDocumentFullscreenAvailability(options: {
+    availableDisplayModes?: string[];
+}): {
+    canFullscreen: true;
+} | {
+    canFullscreen: false;
+    reason: string;
+};
+export declare function shouldAutoLoadDocumentOnEnterFullscreen(content: string): boolean;

package/dist/ui/file-preview/src/document-workspace.js

@@ -0,0 +1,33 @@
+export function stripReadStatusLine(content) {
+    return content.replace(/^\[Reading [^\]]+\]\r?\n(?:\r?\n)?/, '');
+}
+export function parseReadRange(content) {
+    const match = content.match(/^\[Reading (\d+) lines from (?:line )?(\d+|start) \(total: (\d+) lines/);
+    if (!match) {
+        return undefined;
+    }
+    const count = Number.parseInt(match[1], 10);
+    const isFromStart = match[2] === 'start';
+    const readOffset = isFromStart ? 0 : Number.parseInt(match[2], 10);
+    const fromLine = isFromStart ? 1 : readOffset;
+    const totalLines = Number.parseInt(match[3], 10);
+    return {
+        fromLine,
+        toLine: fromLine + count - 1,
+        totalLines,
+        isPartial: count < totalLines,
+        readOffset,
+    };
+}
+export function getDocumentFullscreenAvailability(options) {
+    if (!options.availableDisplayModes?.includes('fullscreen')) {
+        return {
+            canFullscreen: false,
+            reason: 'Fullscreen editing is unavailable in this host.',
+        };
+    }
+    return { canFullscreen: true };
+}
+export function shouldAutoLoadDocumentOnEnterFullscreen(content) {
+    return parseReadRange(content)?.isPartial === true;
+}

package/dist/ui/file-preview/src/file-type-handlers.d.ts

@@ -0,0 +1,10 @@
+import type { FileTypeCapabilities, RenderBodyResult, RenderPayload } from './model.js';
+import type { MarkdownController } from './markdown/controller.js';
+import type { HtmlPreviewMode } from './types.js';
+export declare function getFileTypeCapabilities(payload: RenderPayload): FileTypeCapabilities;
+export declare function renderPayloadBody(options: {
+    payload: RenderPayload;
+    htmlMode: HtmlPreviewMode;
+    startLine: number;
+    markdownController: MarkdownController;
+}): RenderBodyResult;