@hcu-lab.me/mcp-device 1.0.0

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;

package/dist/ui/file-preview/src/file-type-handlers.js

@@ -0,0 +1,109 @@
+import { formatJsonIfPossible, inferLanguageFromPath, renderCodeViewer } from './components/code-viewer.js';
+import { escapeHtml } from './components/highlighting.js';
+import { renderHtmlPreview } from './components/html-renderer.js';
+import { renderDirectoryBody } from './directory-controller.js';
+import { stripReadStatusLine } from './document-workspace.js';
+import { isAllowedImageMimeType, normalizeImageMimeType } from './image-preview.js';
+import { isLikelyUrl } from './payload-utils.js';
+function renderRawFallback(source) {
+    return `<pre class="code-viewer"><code class="hljs language-text">${escapeHtml(source)}</code></pre>`;
+}
+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.content || payload.content.trim().length === 0) {
+        return {
+            notice: 'Preview is unavailable because image data is missing.',
+            html: '<div class="panel-content source-content"></div>',
+        };
+    }
+    const src = `data:${mimeType};base64,${payload.content}`;
+    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 buildPreviewCapabilities(payload, canCopy) {
+    return {
+        supportsPreview: true,
+        canCopy,
+        canOpenInFolder: !isLikelyUrl(payload.filePath),
+    };
+}
+const handlerRegistry = {
+    directory: {
+        getCapabilities: (payload) => buildPreviewCapabilities(payload, false),
+        renderBody: ({ payload }) => renderDirectoryBody(stripReadStatusLine(payload.content), payload.filePath),
+    },
+    html: {
+        getCapabilities: (payload) => buildPreviewCapabilities(payload, true),
+        renderBody: ({ payload, htmlMode }) => renderHtmlPreview(stripReadStatusLine(payload.content), htmlMode),
+    },
+    image: {
+        getCapabilities: (payload) => buildPreviewCapabilities(payload, false),
+        renderBody: ({ payload }) => renderImageBody(payload),
+    },
+    markdown: {
+        getCapabilities: (payload) => buildPreviewCapabilities(payload, false),
+        renderBody: ({ payload, markdownController }) => {
+            try {
+                return markdownController.buildBody(payload);
+            }
+            catch {
+                return {
+                    notice: 'Markdown renderer failed. Showing raw source instead.',
+                    html: `<div class="panel-content source-content">${renderRawFallback(stripReadStatusLine(payload.content))}</div>`,
+                };
+            }
+        },
+    },
+    text: {
+        getCapabilities: (payload) => buildPreviewCapabilities(payload, true),
+        renderBody: ({ payload, startLine }) => {
+            const cleanedContent = stripReadStatusLine(payload.content);
+            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>`,
+            };
+        },
+    },
+    unsupported: {
+        getCapabilities: (payload) => {
+            const hasRawContent = stripReadStatusLine(payload.content).trim().length > 0;
+            return {
+                supportsPreview: hasRawContent,
+                canCopy: hasRawContent,
+                canOpenInFolder: !isLikelyUrl(payload.filePath),
+            };
+        },
+        renderBody: ({ payload }) => {
+            const rawContent = stripReadStatusLine(payload.content);
+            if (rawContent.trim().length === 0) {
+                return {
+                    notice: 'Preview is not available for this file type.',
+                    html: '<div class="panel-content source-content"></div>',
+                };
+            }
+            return {
+                html: `<div class="panel-content source-content">${renderRawFallback(rawContent)}</div>`,
+            };
+        },
+    },
+};
+export function getFileTypeCapabilities(payload) {
+    return handlerRegistry[payload.fileType]?.getCapabilities(payload) ?? {
+        supportsPreview: false,
+        canCopy: false,
+        canOpenInFolder: !isLikelyUrl(payload.filePath),
+    };
+}
+export function renderPayloadBody(options) {
+    const handler = handlerRegistry[options.payload.fileType] ?? handlerRegistry.text;
+    return handler.renderBody(options);
+}

package/dist/ui/file-preview/src/host/external-actions.d.ts

@@ -0,0 +1,8 @@
+export declare function shellQuote(value: string): string;
+export declare function encodePowerShellCommand(script: string): string;
+export declare function buildOpenInFolderCommand(filePath: string, isLikelyUrl: (filePath: string) => boolean): string | undefined;
+export declare function buildOpenInEditorCommand(filePath: string, isLikelyUrl: (filePath: string) => boolean, editorAppCache: Map<string, {
+    appName: string;
+    appPath?: string;
+}>): string | undefined;
+export declare function renderMarkdownEditorAppIcon(): string;

package/dist/ui/file-preview/src/host/external-actions.js

@@ -0,0 +1,55 @@
+import { getParentDirectory } from '../path-utils.js';
+export function shellQuote(value) {
+    return `'${value.replace(/'/g, `'\\''`)}'`;
+}
+export function encodePowerShellCommand(script) {
+    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);
+}
+export function buildOpenInFolderCommand(filePath, isLikelyUrl) {
+    const trimmedPath = filePath.trim();
+    if (!trimmedPath || isLikelyUrl(trimmedPath)) {
+        return undefined;
+    }
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.includes('win')) {
+        const escapedForPowerShell = trimmedPath.replace(/'/g, "''");
+        const script = `Start-Process -FilePath explorer.exe -ArgumentList @('/select,','${escapedForPowerShell}')`;
+        return `powershell.exe -NoProfile -NonInteractive -EncodedCommand ${encodePowerShellCommand(script)}`;
+    }
+    if (userAgent.includes('mac')) {
+        return `open -R ${shellQuote(trimmedPath)}`;
+    }
+    return `xdg-open ${shellQuote(getParentDirectory(trimmedPath))}`;
+}
+export function buildOpenInEditorCommand(filePath, isLikelyUrl, editorAppCache) {
+    const trimmedPath = filePath.trim();
+    if (!trimmedPath || isLikelyUrl(trimmedPath)) {
+        return undefined;
+    }
+    const cachedApp = editorAppCache.get(trimmedPath);
+    if (cachedApp?.appPath && navigator.userAgent.toLowerCase().includes('mac')) {
+        return `open -a ${shellQuote(cachedApp.appPath)} ${shellQuote(trimmedPath)}`;
+    }
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.includes('win')) {
+        const escapedForPowerShell = trimmedPath.replace(/'/g, "''");
+        const script = `Start-Process -FilePath '${escapedForPowerShell}'`;
+        return `powershell.exe -NoProfile -NonInteractive -EncodedCommand ${encodePowerShellCommand(script)}`;
+    }
+    if (userAgent.includes('mac')) {
+        return `open ${shellQuote(trimmedPath)}`;
+    }
+    return `xdg-open ${shellQuote(trimmedPath)}`;
+}
+export function renderMarkdownEditorAppIcon() {
+    return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4Z"/></svg>';
+}

package/dist/ui/file-preview/src/host/selection-context.d.ts

@@ -0,0 +1,9 @@
+import type { RenderPayload } from '../model.js';
+export declare function attachSelectionContext(options: {
+    payload: RenderPayload;
+    isMarkdownEditing: boolean;
+    updateContext?: (text: string) => void;
+    trackUiEvent?: (event: string, params?: Record<string, unknown>) => void;
+    getFileExtensionForAnalytics: (filePath: string) => string;
+    previousAbortController: AbortController | null;
+}): AbortController | null;

package/dist/ui/file-preview/src/host/selection-context.js

@@ -0,0 +1,106 @@
+export function attachSelectionContext(options) {
+    if (options.isMarkdownEditing) {
+        if (options.previousAbortController) {
+            options.previousAbortController.abort();
+        }
+        return null;
+    }
+    const contentWrapper = document.querySelector('.panel-content-wrapper');
+    if (!contentWrapper) {
+        return options.previousAbortController;
+    }
+    const wrapper = contentWrapper;
+    options.previousAbortController?.abort();
+    const abortController = 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 = wrapper.getBoundingClientRect();
+        let left = rect.left + rect.width / 2 - wrapperRect.left;
+        let top = rect.top - wrapperRect.top + wrapper.scrollTop - 32;
+        const hintWidth = hintEl.offsetWidth || 200;
+        left = Math.max(8, Math.min(left - hintWidth / 2, wrapper.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';
+            wrapper.appendChild(hintEl);
+        }
+        hintEl.classList.add('visible');
+        positionHint(selection);
+    }
+    function hideHint() {
+        if (!hintEl)
+            return;
+        hintEl.classList.remove('visible');
+        hideTimer = setTimeout(() => {
+            hintEl?.remove();
+            hintEl = null;
+        }, 200);
+    }
+    function getLineInfo(selection) {
+        const anchorRow = selection.anchorNode?.parentElement?.closest('.code-line');
+        const focusRow = selection.focusNode?.parentElement?.closest('.code-line');
+        if (anchorRow && focusRow) {
+            const anchorLine = parseInt(anchorRow.dataset.line ?? '', 10);
+            const focusLine = parseInt(focusRow.dataset.line ?? '', 10);
+            if (!isNaN(anchorLine) && !isNaN(focusLine)) {
+                const low = Math.min(anchorLine, focusLine);
+                const high = Math.max(anchorLine, focusLine);
+                return low === high ? `line ${low}` : `lines ${low}–${high}`;
+            }
+        }
+        return '';
+    }
+    document.addEventListener('selectionchange', () => {
+        const selection = document.getSelection();
+        if (!selection || selection.isCollapsed) {
+            if (lastSelectedText) {
+                lastSelectedText = '';
+                options.updateContext?.('');
+                hideHint();
+            }
+            return;
+        }
+        const text = selection.toString().trim();
+        if (!text || text === lastSelectedText) {
+            return;
+        }
+        const anchorInContent = wrapper.contains(selection.anchorNode);
+        const focusInContent = wrapper.contains(selection.focusNode);
+        if (!anchorInContent && !focusInContent) {
+            if (lastSelectedText) {
+                lastSelectedText = '';
+                options.updateContext?.('');
+                hideHint();
+            }
+            return;
+        }
+        lastSelectedText = text;
+        const lineInfo = getLineInfo(selection);
+        const locationPart = lineInfo ? ` (${lineInfo})` : '';
+        const context = `User selected text from file ${options.payload.filePath}${locationPart}:\n\`\`\`\n${text}\n\`\`\``;
+        options.updateContext?.(context);
+        showHint(selection);
+        options.trackUiEvent?.('text_selected', {
+            file_type: options.payload.fileType,
+            file_extension: options.getFileExtensionForAnalytics(options.payload.filePath),
+            char_count: text.length,
+        });
+    }, { signal: abortController.signal });
+    return abortController;
+}

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

@@ -0,0 +1,3 @@
+export declare const ALLOWED_IMAGE_MIME_TYPES: Set<string>;
+export declare function normalizeImageMimeType(mimeType: string | undefined): string;
+export declare function isAllowedImageMimeType(mimeType: string | undefined): boolean;

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

@@ -0,0 +1,21 @@
+export const ALLOWED_IMAGE_MIME_TYPES = new Set([
+    'image/png',
+    'image/jpeg',
+    'image/gif',
+    'image/webp',
+    'image/bmp',
+    // Intentional product decision: allow SVG rendering in preview UI.
+    // This is currently unsanitized and should be revisited if threat model changes.
+    'image/svg',
+    'image/svg+xml'
+]);
+export function normalizeImageMimeType(mimeType) {
+    if (!mimeType) {
+        return '';
+    }
+    return mimeType.toLowerCase().split(';', 1)[0].trim();
+}
+export function isAllowedImageMimeType(mimeType) {
+    const normalizedMimeType = normalizeImageMimeType(mimeType);
+    return normalizedMimeType.length > 0 && ALLOWED_IMAGE_MIME_TYPES.has(normalizedMimeType);
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+/**
+ * Browser bootstrap entrypoint for File Preview UI. It starts the app lifecycle and keeps initialization logic separate from runtime feature code.
+ */
+import { bootstrapApp } from './app.js';
+bootstrapApp();

package/dist/ui/file-preview/src/markdown/conflict-dialog.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The "file changed on disk" conflict resolver.
+ *
+ * Shown when saveDocument detected that disk differs from what the editor
+ * thought it had. The editor has already re-synced its sourceContent to the
+ * fresh disk content with keepDraft: true — so the dialog's two actions map
+ * onto concrete state transitions:
+ *
+ *   "Use disk version"   — replace the draft with disk content
+ *                          (syncStateFromContent without keepDraft).
+ *                          Destroys unsaved edits.
+ *
+ *   "Save my changes"    — close the dialog and re-run saveDocument.
+ *                          computeEditBlocks will now diff against the fresh
+ *                          disk content, so non-overlapping edits merge in
+ *                          and overlapping edits win over disk for the
+ *                          lines the user actually touched.
+ *
+ * The dialog is modal (dimmed backdrop, keyboard-trapped, click-outside does
+ * not dismiss). Escape and the ✕ button both close it without taking either
+ * action — equivalent to "I'll deal with this later"; the save button stays
+ * dirty so the user can retry or keep editing.
+ */
+export interface OpenConflictDialogOptions {
+    fileName: string;
+    onUseDiskVersion: () => void;
+    onSaveMyChanges: () => void;
+    onCancel?: () => void;
+}
+export interface ConflictDialogController {
+    open: (options: OpenConflictDialogOptions) => void;
+    close: () => void;
+    isOpen: () => boolean;
+}
+export declare function renderConflictDialogMarkup(): string;
+interface CreateConflictDialogOptions {
+    container: ParentNode;
+}
+export declare function createConflictDialogController(options: CreateConflictDialogOptions): ConflictDialogController;
+export {};