@hcu-lab.me/mcp-device 1.0.0

package/dist/ui/file-preview/src/components/code-viewer.js

@@ -0,0 +1,73 @@
+/**
+ * Code/text viewer renderer responsible for escaping, optional formatting, and syntax-highlight output wrappers. It provides a safe default for non-rich preview content.
+ */
+import { highlightSource } from './highlighting.js';
+const EXTENSION_LANGUAGE_MAP = {
+    js: 'javascript',
+    cjs: 'javascript',
+    mjs: 'javascript',
+    ts: 'typescript',
+    jsx: 'javascript',
+    tsx: 'typescript',
+    json: 'json',
+    yaml: 'yaml',
+    yml: 'yaml',
+    toml: 'toml',
+    ini: 'ini',
+    xml: 'xml',
+    html: 'html',
+    htm: 'html',
+    css: 'css',
+    scss: 'css',
+    less: 'css',
+    sh: 'bash',
+    bash: 'bash',
+    zsh: 'bash',
+    py: 'python',
+    rb: 'ruby',
+    java: 'java',
+    go: 'go',
+    rs: 'rust',
+    sql: 'sql',
+    md: 'markdown',
+    markdown: 'markdown'
+};
+function getFileExtension(filePath) {
+    const match = filePath.toLowerCase().match(/\.([a-z0-9]+)$/);
+    return match ? match[1] : '';
+}
+export function inferLanguageFromPath(filePath) {
+    const extension = getFileExtension(filePath);
+    return EXTENSION_LANGUAGE_MAP[extension] ?? 'text';
+}
+export function formatJsonIfPossible(content, filePath) {
+    if (inferLanguageFromPath(filePath) !== 'json') {
+        return { content };
+    }
+    try {
+        return {
+            content: `${JSON.stringify(JSON.parse(content), null, 2)}\n`
+        };
+    }
+    catch {
+        return {
+            content,
+            notice: 'Invalid JSON. Showing raw source.'
+        };
+    }
+}
+export function renderCodeViewer(code, language = 'text', startLine = 1) {
+    const normalizedLanguage = language || 'text';
+    const highlighted = highlightSource(code, normalizedLanguage);
+    // Wrap each line with line number gutter
+    const lines = highlighted.split('\n');
+    // Remove trailing empty line from trailing newline
+    if (lines.length > 0 && lines[lines.length - 1] === '') {
+        lines.pop();
+    }
+    const lineHtml = lines.map((line, i) => {
+        const lineNum = startLine + i;
+        return `<tr class="code-line" data-line="${lineNum}"><td class="line-num" data-line="${lineNum}">${lineNum}</td><td class="line-content">${line || ' '}</td></tr>`;
+    }).join('\n');
+    return `<pre class="code-viewer"><table class="code-table"><tbody>${lineHtml}</tbody></table></pre>`;
+}

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

@@ -0,0 +1,2 @@
+export declare function escapeHtml(input: string): string;
+export declare function highlightSource(code: string, language: string): string;

package/dist/ui/file-preview/src/components/highlighting.js

@@ -0,0 +1,54 @@
+/**
+ * Syntax highlighting integration layer around highlight.js. It registers supported languages and provides safe helpers for highlighted or plain escaped output.
+ */
+import { escapeHtml as sharedEscapeHtml } from '../../../shared/escape-html.js';
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import go from 'highlight.js/lib/languages/go';
+import java from 'highlight.js/lib/languages/java';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import ruby from 'highlight.js/lib/languages/ruby';
+import rust from 'highlight.js/lib/languages/rust';
+import sql from 'highlight.js/lib/languages/sql';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('ruby', ruby);
+hljs.registerLanguage('rust', rust);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('html', xml);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('toml', yaml);
+hljs.registerLanguage('ini', yaml);
+export function escapeHtml(input) {
+    return sharedEscapeHtml(input);
+}
+export function highlightSource(code, language) {
+    const normalizedLanguage = (language || '').toLowerCase();
+    if (!normalizedLanguage || normalizedLanguage === 'text') {
+        return escapeHtml(code);
+    }
+    try {
+        if (hljs.getLanguage(normalizedLanguage)) {
+            return hljs.highlight(code, { language: normalizedLanguage, ignoreIllegals: true }).value;
+        }
+        return hljs.highlightAuto(code).value;
+    }
+    catch {
+        return escapeHtml(code);
+    }
+}

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

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

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

@@ -0,0 +1,47 @@
+/**
+ * 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 resolveThemeFrameStyles() {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return {
+            background: 'Canvas',
+            text: 'CanvasText',
+            fontFamily: 'system-ui, sans-serif',
+        };
+    }
+    const rootStyles = window.getComputedStyle(document.documentElement);
+    const background = rootStyles.getPropertyValue('--panel').trim() || 'Canvas';
+    const text = rootStyles.getPropertyValue('--text').trim() || 'CanvasText';
+    const fontFamily = rootStyles.getPropertyValue('--font-sans').trim() || 'system-ui, sans-serif';
+    return { background, text, fontFamily };
+}
+function renderSandboxedHtmlFrame(content) {
+    const palette = resolveThemeFrameStyles();
+    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) {
+    if (mode === 'source') {
+        return {
+            html: `<div class="panel-content source-content">${renderCodeViewer(content, 'html')}</div>`
+        };
+    }
+    try {
+        return {
+            html: `<div class="panel-content html-content">${renderSandboxedHtmlFrame(content)}</div>`
+        };
+    }
+    catch {
+        return {
+            html: `<div class="panel-content source-content">${renderCodeViewer(content, 'html')}</div>`,
+            notice: 'HTML renderer failed. Showing source instead.'
+        };
+    }
+}

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

@@ -0,0 +1 @@
+export declare function renderMarkdown(content: string): string;

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

@@ -0,0 +1,59 @@
+/**
+ * Markdown rendering pipeline for preview mode. It configures markdown-it and highlighting so markdown content is rendered consistently with code block support.
+ */
+import { highlightSource } from './highlighting.js';
+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(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,240 @@
+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|NOT_FOUND|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,
+                isNotFound: false,
+                isWarning: true,
+                warningText: msg,
+                depth: parts.length,
+            });
+            continue;
+        }
+        const isDir = line.startsWith('[DIR]');
+        const isDenied = line.startsWith('[DENIED]');
+        const isNotFound = line.startsWith('[NOT_FOUND]');
+        const name = line.replace(/^\[(DIR|FILE|DENIED|NOT_FOUND)\]\s*/, '');
+        const parts = name.replace(/\\/g, '/').split('/');
+        flat.push({
+            name,
+            fullPath: name,
+            isDir,
+            isDenied,
+            isNotFound,
+            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,
+            isNotFound: item.isNotFound,
+            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.isNotFound) {
+                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, origin: 'ui' });
+                }
+                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, origin: 'ui' });
+                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, origin: 'ui' });
+                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, origin: 'ui' });
+                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;