@keyou007/agent-bot 0.1.17-alpha.2 → 0.1.18-alpha.0

package/dist/local-files/LocalFileViewerServer.js

@@ -2,12 +2,180 @@ import { createHmac, randomBytes, timingSafeEqual } from "node:crypto";
 import fs from "node:fs";
 import http from "node:http";
 import path from "node:path";
+import hljs from "highlight.js/lib/common";
+import dos from "highlight.js/lib/languages/dos";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import powershell from "highlight.js/lib/languages/powershell";
+import MarkdownIt from "markdown-it";
 import { selectPreferredNetworkAddress, } from "./NetworkAddressSelector.js";
 const SECRET_FILE = "secret";
 const PORT_FILE = "port";
+const SHORT_TOKEN_BYTES = 12;
+const SHORT_TOKEN_LENGTH = 16;
 const MAX_TEXT_PREVIEW_BYTES = 2 * 1024 * 1024;
 const MAX_CONTENT_SAMPLE_BYTES = 64 * 1024;
+const MAX_SYNTAX_HIGHLIGHT_BYTES = 512 * 1024;
 const DIRECTORY_PAGE_SIZE = 100;
+const MARKDOWN_EXTENSIONS = new Set([".markdown", ".md", ".mdown", ".mkd", ".mkdn"]);
+hljs.registerLanguage("dos", dos);
+hljs.registerLanguage("dockerfile", dockerfile);
+hljs.registerLanguage("powershell", powershell);
+const MARKDOWN_RENDERER = new MarkdownIt({
+    breaks: false,
+    html: false,
+    linkify: true,
+    typographer: false,
+    highlight(value, language) {
+        const highlighted = language && hljs.getLanguage(language)
+            ? hljs.highlight(value, { language, ignoreIllegals: true }).value
+            : escapeHtml(value);
+        const languageAttribute = language && hljs.getLanguage(language)
+            ? ` class="language-${escapeAttribute(language)}"`
+            : "";
+        return `<pre class="markdown-code-block hljs"><code${languageAttribute}>${highlighted}</code></pre>`;
+    },
+});
+const HIGHLIGHT_LANGUAGE_BY_EXTENSION = {
+    ".bash": "bash", ".bat": "dos", ".c": "c", ".cc": "cpp", ".cmd": "dos", ".cpp": "cpp",
+    ".cs": "csharp", ".css": "css", ".cxx": "cpp", ".diff": "diff", ".go": "go", ".h": "cpp",
+    ".hpp": "cpp", ".htm": "xml", ".html": "xml", ".ini": "ini", ".ipynb": "json", ".java": "java",
+    ".js": "javascript", ".json": "json", ".jsonl": "json", ".jsx": "javascript", ".kt": "kotlin",
+    ".kts": "kotlin", ".less": "less", ".lua": "lua", ".markdown": "markdown", ".md": "markdown",
+    ".mjs": "javascript", ".patch": "diff", ".php": "php", ".pl": "perl", ".ps1": "powershell",
+    ".py": "python", ".r": "r", ".rb": "ruby", ".rs": "rust", ".scss": "scss", ".sh": "bash",
+    ".sql": "sql", ".swift": "swift", ".toml": "ini", ".ts": "typescript", ".tsx": "typescript",
+    ".vue": "xml", ".xml": "xml", ".yaml": "yaml", ".yml": "yaml", ".zsh": "bash",
+};
+const HIGHLIGHT_LANGUAGE_BY_FILENAME = {
+    ".env": "ini",
+    ".gitignore": "ini",
+    "dockerfile": "dockerfile",
+    "makefile": "makefile",
+};
+const VIEWER_CLIENT_SCRIPT = `(() => {
+  const eventsUrl = document.body.dataset.eventsUrl;
+  const content = document.getElementById("viewer-content");
+  const metadata = document.getElementById("viewer-metadata");
+  const header = document.getElementById("viewer-header");
+  const title = document.getElementById("viewer-title");
+  const viewSwitch = document.getElementById("viewer-view-switch");
+  const viewButtons = Array.from(document.querySelectorAll("[data-view-mode-button]"));
+  if (!content || !metadata || !header || !title) return;
+  const filePath = title.dataset.filePath || title.textContent || "";
+
+  const syncViewMode = () => {
+    const mode = document.body.dataset.viewMode === "code" ? "code" : "rendered";
+    for (const button of viewButtons) {
+      const active = button.dataset.viewModeButton === mode;
+      button.classList.toggle("is-active", active);
+      button.setAttribute("aria-selected", String(active));
+    }
+    for (const panel of content.querySelectorAll("[data-view-panel]")) {
+      panel.setAttribute("aria-hidden", String(panel.dataset.viewPanel !== mode));
+    }
+  };
+  const setViewMode = (mode) => {
+    document.body.dataset.viewMode = mode === "code" ? "code" : "rendered";
+    syncViewMode();
+    if (mode === "code") requestAnimationFrame(positionHashTarget);
+  };
+  for (const button of viewButtons) {
+    button.addEventListener("click", () => setViewMode(button.dataset.viewModeButton));
+  }
+
+  title.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const selection = window.getSelection();
+    if (!selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(title);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  });
+
+  const updateHeaderOffset = () => {
+    const offset = Math.ceil(header.getBoundingClientRect().height) + 8;
+    document.documentElement.style.setProperty("--viewer-header-offset", offset + "px");
+  };
+  const highlightHashTarget = () => {
+    document.querySelector(".line.is-target-line")?.classList.remove("is-target-line");
+    let id;
+    try {
+      id = decodeURIComponent(window.location.hash.slice(1));
+    } catch {
+      title.textContent = filePath;
+      return null;
+    }
+    const lineNumber = /^L(\\d+)$/.exec(id)?.[1];
+    title.textContent = lineNumber ? filePath + ":" + lineNumber : filePath;
+    if (!lineNumber) return null;
+    const target = document.getElementById(id);
+    target?.classList.add("is-target-line");
+    return target;
+  };
+  const positionHashTarget = () => {
+    highlightHashTarget()?.scrollIntoView({ block: "start" });
+  };
+  if (/^#L\\d+$/u.test(window.location.hash)) document.body.dataset.viewMode = "code";
+  syncViewMode();
+  updateHeaderOffset();
+  if (typeof ResizeObserver === "function") {
+    new ResizeObserver(updateHeaderOffset).observe(header);
+  }
+  window.addEventListener("hashchange", () => requestAnimationFrame(positionHashTarget));
+  requestAnimationFrame(positionHashTarget);
+  if (!eventsUrl || typeof EventSource !== "function") return;
+
+  const restoreScroll = (top, left, atBottom, codeScrollLeft) => {
+    requestAnimationFrame(() => {
+      const maxTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+      window.scrollTo(left, atBottom ? maxTop : Math.min(top, maxTop));
+      const code = content.querySelector(".code");
+      if (code) code.scrollLeft = codeScrollLeft;
+    });
+  };
+  const replaceContent = (nextContent, nextMetadata) => {
+    const top = window.scrollY;
+    const left = window.scrollX;
+    const maxTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+    const atBottom = maxTop - top <= 24;
+    const codeScrollLeft = content.querySelector(".code")?.scrollLeft ?? 0;
+    content.innerHTML = nextContent;
+    metadata.innerHTML = nextMetadata;
+    syncViewMode();
+    highlightHashTarget();
+    restoreScroll(top, left, atBottom, codeScrollLeft);
+  };
+
+  const source = new EventSource(eventsUrl);
+  source.addEventListener("update", (event) => {
+    try {
+      const update = JSON.parse(event.data);
+      if (typeof update.content === "string" && typeof update.metadata === "string") {
+        if (viewSwitch) viewSwitch.hidden = update.viewMode !== "markdown";
+        replaceContent(update.content, update.metadata);
+      }
+    } catch {
+      // A later valid event will repair the view.
+    }
+  });
+  source.addEventListener("unavailable", (event) => {
+    let message = "文件暂时无法读取，服务会继续等待它恢复。";
+    try {
+      const update = JSON.parse(event.data);
+      if (typeof update.message === "string") message = update.message;
+    } catch {
+      // Keep the fallback message.
+    }
+    const notice = document.createElement("div");
+    notice.className = "notice";
+    notice.textContent = message;
+    replaceContent(notice.outerHTML, metadata.innerHTML);
+  });
+  window.addEventListener("pagehide", () => source.close(), { once: true });
+})();
+`;
 export class LocalFileViewerServer {
     options;
     server;
@@ -105,8 +273,7 @@ export class LocalFileViewerServer {
         catch {
             return undefined;
         }
-        const token = Buffer.from(absolutePath, "utf8").toString("base64url");
-        const url = this.createSignedUrl("view", token);
+        const url = this.createPreviewUrl(absolutePath);
         const line = parseLineReference(reference);
         if (line !== undefined)
             url.hash = `L${line}`;
@@ -120,14 +287,27 @@ export class LocalFileViewerServer {
         }
         const requestUrl = new URL(request.url ?? "/", "http://127.0.0.1");
         const route = routeWithinBasePath(requestUrl.pathname, this.basePath);
-        const match = /^\/(view|raw)\/([A-Za-z0-9_-]+)$/u.exec(route);
-        if (!match?.[1] || !match[2]) {
+        if (!route.startsWith("/")) {
+            this.sendHtml(response, 404, errorPage("文件链接无效", "请从 Agent Bot 的回答中重新打开文件链接。"), request.method === "HEAD");
+            return;
+        }
+        if (route === "/assets/viewer.js") {
+            this.sendJavascript(response, request.method === "HEAD");
+            return;
+        }
+        const previewMatch = new RegExp(`^/preview/([A-Za-z0-9_-]{${SHORT_TOKEN_LENGTH}})$`, "u").exec(route);
+        const legacyMatch = /^\/(view|raw)\/([A-Za-z0-9_-]+)$/u.exec(route);
+        const previewPath = previewMatch?.[1]
+            ? this.verifyPreviewToken(previewMatch[1], requestUrl.searchParams.get("path") ?? "")
+            : undefined;
+        const legacyPath = legacyMatch?.[2]
+            ? this.verifyLegacyToken(legacyMatch[2], requestUrl.searchParams.get("sig") ?? "")
+            : undefined;
+        const filePath = previewPath ?? legacyPath;
+        if (!previewMatch && !legacyMatch) {
             this.sendHtml(response, 404, errorPage("文件链接无效", "请从 Agent Bot 的回答中重新打开文件链接。"), request.method === "HEAD");
             return;
         }
-        const token = match[2];
-        const signature = requestUrl.searchParams.get("sig") ?? "";
-        const filePath = this.verifyToken(token, signature);
         if (!filePath) {
             this.sendHtml(response, 403, errorPage("文件链接无效", "签名校验失败，Agent Bot 已拒绝该请求。"), request.method === "HEAD");
             return;
@@ -142,7 +322,16 @@ export class LocalFileViewerServer {
             this.sendHtml(response, 404, errorPage("文件不存在", "文件可能已被移动、重命名或删除。"), request.method === "HEAD");
             return;
         }
-        if (match[1] === "raw") {
+        if (requestUrl.searchParams.get("events") === "1") {
+            if (!stat.isFile()) {
+                this.sendHtml(response, 400, errorPage("无法监听目录", "实时更新目前只适用于文件。"), request.method === "HEAD");
+                return;
+            }
+            this.serveFileEvents(request, response, filePath);
+            return;
+        }
+        const raw = legacyMatch?.[1] === "raw" || requestUrl.searchParams.get("raw") === "1";
+        if (raw) {
             if (stat.isDirectory()) {
                 this.sendHtml(response, 400, errorPage("无法打开目录", "目录只能通过文件列表页面浏览。"), request.method === "HEAD");
                 return;
@@ -151,11 +340,11 @@ export class LocalFileViewerServer {
             return;
         }
         const html = stat.isDirectory()
-            ? this.renderDirectoryViewer(filePath, stat, token, parseDirectoryPage(requestUrl.searchParams.get("page")))
-            : this.renderViewer(filePath, stat, token, signature);
+            ? this.renderDirectoryViewer(filePath, stat, parseDirectoryPage(requestUrl.searchParams.get("page")))
+            : this.renderViewer(filePath, stat);
         this.sendHtml(response, 200, html, request.method === "HEAD");
     }
-    verifyToken(token, signature) {
+    verifyLegacyToken(token, signature) {
         if (!this.secret || !/^[a-f0-9]{64}$/u.test(signature))
             return undefined;
         const expected = this.sign(token);
@@ -174,10 +363,21 @@ export class LocalFileViewerServer {
             return undefined;
         return normalizeAbsolutePath(decoded);
     }
+    verifyPreviewToken(token, rawPath) {
+        const filePath = normalizeAbsolutePath(rawPath);
+        if (!filePath || !this.secret)
+            return undefined;
+        const expected = this.createShortToken(filePath);
+        const actualBuffer = Buffer.from(token, "utf8");
+        const expectedBuffer = Buffer.from(expected, "utf8");
+        return actualBuffer.length === expectedBuffer.length && timingSafeEqual(actualBuffer, expectedBuffer)
+            ? filePath
+            : undefined;
+    }
     sign(token) {
         return createHmac("sha256", this.secret).update(token).digest("hex");
     }
-    createSignedUrl(route, token) {
+    createLegacySignedUrl(route, token) {
         const url = new URL(this.address.publicBaseUrl);
         url.pathname = `${this.basePath}/${route}/${token}`.replace(/\/{2,}/gu, "/");
         url.search = "";
@@ -185,19 +385,63 @@ export class LocalFileViewerServer {
         url.searchParams.set("sig", this.sign(token));
         return url;
     }
-    renderViewer(filePath, stat, token, signature) {
+    createPreviewUrl(filePath) {
+        const url = new URL(this.address.publicBaseUrl);
+        url.pathname = `${this.basePath}/preview/${this.createShortToken(filePath)}`
+            .replace(/\/{2,}/gu, "/");
+        url.search = `?path=${encodeReadableQueryPath(filePath)}`;
+        url.hash = "";
+        return url;
+    }
+    createShortToken(filePath) {
+        return createHmac("sha256", this.secret)
+            .update(filePath)
+            .digest()
+            .subarray(0, SHORT_TOKEN_BYTES)
+            .toString("base64url");
+    }
+    renderViewer(filePath, stat) {
+        const fileName = path.basename(filePath);
+        const rawUrl = new URL(this.createFileUrl(filePath));
+        rawUrl.hash = "";
+        appendUrlQueryParameter(rawUrl, "raw", "1");
+        const downloadUrl = new URL(rawUrl);
+        appendUrlQueryParameter(downloadUrl, "download", "1");
+        const eventsUrl = new URL(this.createFileUrl(filePath));
+        eventsUrl.hash = "";
+        appendUrlQueryParameter(eventsUrl, "events", "1");
+        const snapshot = this.renderFileSnapshot(filePath, stat);
+        return renderViewerPage({
+            title: fileName,
+            filePath,
+            metadata: snapshot.metadata,
+            actions: [
+                { href: rawUrl.toString(), label: "打开原始文件" },
+                { href: downloadUrl.toString(), label: "下载" },
+            ],
+            content: snapshot.content,
+            viewMode: snapshot.viewMode,
+            liveUpdates: {
+                eventsUrl: eventsUrl.toString(),
+                scriptPath: `${this.basePath}/assets/viewer.js`.replace(/\/{2,}/gu, "/"),
+            },
+        });
+    }
+    renderFileSnapshot(filePath, stat) {
         const fileName = path.basename(filePath);
         const extension = path.extname(filePath).toLowerCase();
         const classification = classifyFileContent(filePath, stat.size);
         const contentType = binaryContentTypeFor(extension);
-        const rawUrl = this.createSignedUrl("raw", token);
-        rawUrl.searchParams.set("sig", signature);
-        const downloadUrl = new URL(rawUrl);
-        downloadUrl.searchParams.set("download", "1");
+        const rawUrl = new URL(this.createFileUrl(filePath));
+        rawUrl.hash = "";
+        appendUrlQueryParameter(rawUrl, "raw", "1");
         let content;
         if (classification.kind === "text") {
             const preview = readTextPreview(filePath, stat.size, classification.encoding);
-            content = `${preview.truncated ? '<div class="notice">文件较大，仅显示开头 2 MiB。可使用下方按钮查看或下载完整文件。</div>' : ""}${renderText(preview.text)}`;
+            const previewContent = isMarkdownFile(filePath)
+                ? renderMarkdownDocument(preview.text, filePath)
+                : renderText(preview.text, filePath);
+            content = `${preview.truncated ? '<div class="notice">文件较大，仅显示开头 2 MiB。可使用下方按钮查看或下载完整文件。</div>' : ""}${previewContent}`;
         }
         else if (contentType.startsWith("image/")) {
             content = `<div class="media"><img src="${escapeAttribute(rawUrl.toString())}" alt="${escapeAttribute(fileName)}"></div>`;
@@ -214,18 +458,83 @@ export class LocalFileViewerServer {
         else {
             content = '<div class="unsupported">该文件是二进制格式，无法直接预览。可以打开原始文件或下载到本地。</div>';
         }
-        return renderViewerPage({
-            title: fileName,
-            filePath,
-            metadata: [formatFileSize(stat.size), stat.mtime.toLocaleString()],
-            actions: [
-                { href: rawUrl.toString(), label: "打开原始文件" },
-                { href: downloadUrl.toString(), label: "下载" },
-            ],
+        return {
             content,
-        });
+            metadata: [formatFileSize(stat.size), stat.mtime.toLocaleString()],
+            ...(classification.kind === "text" && isMarkdownFile(filePath)
+                ? { viewMode: "markdown" }
+                : {}),
+        };
+    }
+    serveFileEvents(request, response, filePath) {
+        setSecurityHeaders(response);
+        response.statusCode = 200;
+        response.setHeader("Cache-Control", "no-cache, no-store");
+        response.setHeader("Connection", "keep-alive");
+        response.setHeader("Content-Type", "text/event-stream; charset=utf-8");
+        response.setHeader("X-Accel-Buffering", "no");
+        if (request.method === "HEAD") {
+            response.end();
+            return;
+        }
+        response.flushHeaders();
+        response.write("retry: 2000\n\n");
+        let closed = false;
+        let pendingUpdate;
+        const sendSnapshot = () => {
+            if (closed || response.destroyed)
+                return;
+            try {
+                const stat = fs.statSync(filePath);
+                if (!stat.isFile())
+                    throw new Error("Path is no longer a file");
+                const snapshot = this.renderFileSnapshot(filePath, stat);
+                writeServerSentEvent(response, "update", JSON.stringify({
+                    content: snapshot.content,
+                    metadata: renderMetadata(snapshot.metadata),
+                    viewMode: snapshot.viewMode ?? null,
+                }));
+            }
+            catch {
+                writeServerSentEvent(response, "unavailable", JSON.stringify({
+                    message: "文件可能已被移动、重命名或删除。",
+                }));
+            }
+        };
+        const scheduleSnapshot = () => {
+            if (pendingUpdate)
+                clearTimeout(pendingUpdate);
+            pendingUpdate = setTimeout(sendSnapshot, 100);
+            pendingUpdate.unref();
+        };
+        const watcher = (current, previous) => {
+            if (current.mtimeMs === previous.mtimeMs
+                && current.ctimeMs === previous.ctimeMs
+                && current.size === previous.size
+                && current.nlink === previous.nlink)
+                return;
+            scheduleSnapshot();
+        };
+        fs.watchFile(filePath, { interval: 1_000, persistent: false }, watcher);
+        sendSnapshot();
+        const keepAlive = setInterval(() => {
+            if (!closed && !response.destroyed)
+                response.write(": keep-alive\n\n");
+        }, 15_000);
+        keepAlive.unref();
+        const cleanup = () => {
+            if (closed)
+                return;
+            closed = true;
+            if (pendingUpdate)
+                clearTimeout(pendingUpdate);
+            clearInterval(keepAlive);
+            fs.unwatchFile(filePath, watcher);
+        };
+        request.once("aborted", cleanup);
+        response.once("close", cleanup);
     }
-    renderDirectoryViewer(directory, stat, token, requestedPage) {
+    renderDirectoryViewer(directory, stat, requestedPage) {
         const entries = fs.readdirSync(directory, { withFileTypes: true })
             .flatMap((entry) => {
             const entryPath = path.join(directory, entry.name);
@@ -254,8 +563,8 @@ export class LocalFileViewerServer {
             : '<div class="empty-directory">这个目录是空的。</div>';
         const pagination = totalPages > 1
             ? renderDirectoryPagination(page, totalPages, (targetPage) => {
-                const url = this.createSignedUrl("view", token);
-                url.searchParams.set("page", String(targetPage));
+                const url = new URL(this.createFileUrl(directory));
+                appendUrlQueryParameter(url, "page", String(targetPage));
                 return url.toString();
             })
             : "";
@@ -312,12 +621,33 @@ export class LocalFileViewerServer {
         response.setHeader("Content-Length", body.length);
         response.end(headOnly ? undefined : body);
     }
+    sendJavascript(response, headOnly) {
+        const body = Buffer.from(VIEWER_CLIENT_SCRIPT, "utf8");
+        setSecurityHeaders(response);
+        response.statusCode = 200;
+        response.setHeader("Cache-Control", "no-store");
+        response.setHeader("Content-Type", "text/javascript; charset=utf-8");
+        response.setHeader("Content-Length", body.length);
+        response.end(headOnly ? undefined : body);
+    }
 }
 function renderViewerPage(input) {
-    const metadata = input.metadata.map((item) => `<span>${escapeHtml(item)}</span>`).join("");
+    const metadata = renderMetadata(input.metadata);
     const actions = input.actions.length > 0
         ? `<nav class="actions">${input.actions.map((action) => `<a href="${escapeAttribute(action.href)}">${escapeHtml(action.label)}</a>`).join("")}</nav>`
         : "";
+    const viewSwitch = input.viewMode === "markdown"
+        ? '<div class="view-switch" id="viewer-view-switch" role="tablist" aria-label="预览模式"><button class="is-active" type="button" role="tab" aria-selected="true" data-view-mode-button="rendered">预览</button><button type="button" role="tab" aria-selected="false" data-view-mode-button="code">代码</button></div>'
+        : "";
+    const toolbar = viewSwitch || actions
+        ? `<div class="toolbar">${viewSwitch}${actions}</div>`
+        : "";
+    const liveAttributes = input.liveUpdates
+        ? ` data-events-url="${escapeAttribute(input.liveUpdates.eventsUrl)}"`
+        : "";
+    const liveScript = input.liveUpdates
+        ? `<script src="${escapeAttribute(input.liveUpdates.scriptPath)}" defer></script>`
+        : "";
     return `<!doctype html>
 <html lang="zh-CN">
 <head>
@@ -325,26 +655,63 @@ function renderViewerPage(input) {
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${escapeHtml(input.title)} · Agent Bot</title>
   <style>
-    :root { color-scheme: light dark; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
+    :root { --viewer-header-offset: 56px; --viewer-code-font: "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", "Sarasa Mono SC", "Noto Sans Mono CJK SC", "Microsoft YaHei Mono", NSimSun, monospace; color-scheme: light dark; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
     * { box-sizing: border-box; }
     body { margin: 0; background: #f5f7fa; color: #1f2329; }
-    header { position: sticky; top: 0; z-index: 2; padding: 14px 22px; background: rgba(255,255,255,.96); border-bottom: 1px solid #dfe3e8; }
-    h1 { margin: 0; font-size: 18px; font-weight: 650; overflow-wrap: anywhere; }
-    .path { margin-top: 5px; color: #646a73; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
-    .meta { display: flex; gap: 12px; align-items: center; margin-top: 10px; color: #646a73; font-size: 12px; }
-    .actions { margin-left: auto; display: flex; gap: 8px; }
-    .actions a { color: #1456f0; text-decoration: none; padding: 5px 9px; border: 1px solid #c9d0db; border-radius: 5px; background: #fff; }
-    main { padding: 18px 22px 30px; }
-    .notice, .unsupported { margin-bottom: 12px; padding: 12px 14px; border: 1px solid #f3cf8f; background: #fff7e6; border-radius: 6px; }
-    .code { margin: 0; padding: 12px 0; overflow: auto; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; color: #1f2329; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
-    .line { display: block; min-height: 1.55em; padding-right: 16px; }
-    .line:target { background: #fff1b8; }
+    header { position: sticky; top: 0; z-index: 2; padding: 7px 12px; background: rgba(255,255,255,.96); border-bottom: 1px solid #dfe3e8; }
+    h1 { margin: 0; cursor: text; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
+    .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-height: 26px; margin-top: 3px; color: #646a73; font-size: 11px; }
+    .metadata-values { display: contents; }
+    .toolbar { margin-left: auto; display: flex; gap: 8px; align-items: center; }
+    .actions { display: flex; gap: 8px; }
+    .actions a { color: #1456f0; text-decoration: none; padding: 3px 7px; border: 1px solid #c9d0db; border-radius: 4px; background: #fff; }
+    .view-switch { display: inline-flex; padding: 2px; border: 1px solid #c9d0db; border-radius: 5px; background: #f2f3f5; }
+    .view-switch[hidden] { display: none; }
+    .view-switch button { min-width: 46px; padding: 2px 8px; border: 0; border-radius: 3px; background: transparent; color: #646a73; cursor: pointer; font: inherit; }
+    .view-switch button.is-active { background: #fff; color: #1456f0; box-shadow: 0 1px 3px rgba(31,35,41,.16); }
+    main { padding: 0; }
+    .notice, .unsupported { margin: 8px; padding: 10px 12px; border: 1px solid #f3cf8f; background: #fff7e6; border-radius: 5px; }
+    .code { margin: 0; padding: 6px 0; overflow: auto; border: 0; border-radius: 0; background: #fff; color: #1f2329; font-size: 13px; line-height: 1.5; tab-size: 2; }
+    .code, .code code, .code .line, .code .line * { font-family: var(--viewer-code-font) !important; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
+    .line { display: block; min-height: 1.55em; padding-right: 16px; scroll-margin-top: var(--viewer-header-offset); }
+    .line:target, .line.is-target-line { background: #fff1b8; box-shadow: inset 4px 0 #e6a700; }
     .line-number { display: inline-block; width: 4.5em; margin-right: 12px; padding-right: 12px; text-align: right; color: #8f959e; border-right: 1px solid #eceff3; text-decoration: none; user-select: none; }
+    .hljs-comment, .hljs-quote { color: #6a737d; font-style: italic; }
+    .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-link { color: #a626a4; }
+    .hljs-string, .hljs-regexp, .hljs-title, .hljs-name, .hljs-type, .hljs-attribute, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable { color: #087f5b; }
+    .hljs-number, .hljs-meta, .hljs-built_in, .hljs-builtin-name, .hljs-params { color: #986801; }
+    .hljs-title.function_, .hljs-title.class_ { color: #005cc5; }
+    .hljs-deletion { color: #b31d28; background: #ffeef0; }
+    .hljs-addition { background: #e6ffed; }
+    .hljs-emphasis { font-style: italic; }
+    .hljs-strong { font-weight: 700; }
+    body[data-view-mode="rendered"] [data-view-panel="code"], body[data-view-mode="code"] [data-view-panel="rendered"] { display: none; }
+    .markdown-body { max-width: 980px; margin: 0 auto; padding: 20px 28px 48px; background: #fff; font-size: 15px; line-height: 1.72; overflow-wrap: anywhere; }
+    .markdown-body > :first-child { margin-top: 0; }
+    .markdown-body > :last-child { margin-bottom: 0; }
+    .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 1.45em 0 .6em; line-height: 1.28; }
+    .markdown-body h1 { padding-bottom: .35em; border-bottom: 1px solid #dfe3e8; font-size: 2em; }
+    .markdown-body h2 { padding-bottom: .3em; border-bottom: 1px solid #eceff3; font-size: 1.5em; }
+    .markdown-body h3 { font-size: 1.25em; }
+    .markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body table, .markdown-body pre { margin: 0 0 1em; }
+    .markdown-body ul, .markdown-body ol { padding-left: 1.8em; }
+    .markdown-body li + li { margin-top: .28em; }
+    .markdown-body blockquote { margin-left: 0; padding: .15em 1em; border-left: 4px solid #c9d0db; color: #646a73; }
+    .markdown-body a { color: #1456f0; text-decoration: none; }
+    .markdown-body a:hover { text-decoration: underline; }
+    .markdown-body code { padding: .14em .35em; border-radius: 4px; background: #f2f3f5; font-family: var(--viewer-code-font); font-size: .9em; }
+    .markdown-body .markdown-code-block { margin: 0 0 1em; padding: 14px 16px; overflow: auto; border-radius: 6px; background: #f6f8fa; line-height: 1.55; }
+    .markdown-body .markdown-code-block code { padding: 0; background: transparent; font-size: 13px; }
+    .markdown-body table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
+    .markdown-body th, .markdown-body td { padding: 7px 12px; border: 1px solid #dfe3e8; text-align: left; }
+    .markdown-body th { background: #f5f7fa; }
+    .markdown-body img { max-width: 100%; height: auto; }
+    .markdown-body hr { height: 1px; margin: 1.5em 0; border: 0; background: #dfe3e8; }
     .media { display: grid; place-items: center; min-height: 220px; }
-    .media img, .media video { max-width: 100%; max-height: calc(100vh - 180px); }
+    .media img, .media video { max-width: 100%; max-height: calc(100vh - 70px); }
     .media audio { width: min(720px, 100%); }
-    .document { width: 100%; height: calc(100vh - 150px); border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; }
-    .directory-list { overflow: hidden; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; }
+    .document { width: 100%; height: calc(100vh - 70px); border: 0; border-radius: 0; background: #fff; }
+    .directory-list { overflow: hidden; border: 0; border-radius: 0; background: #fff; }
     .directory-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; min-height: 44px; padding: 8px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid #eceff3; }
     .directory-entry:last-child { border-bottom: 0; }
     .directory-entry:hover { background: #f0f4ff; }
@@ -360,28 +727,50 @@ function renderViewerPage(input) {
     @media (prefers-color-scheme: dark) {
       body { background: #17181a; color: #e5e6eb; }
       header { background: rgba(32,33,36,.96); border-color: #3a3b3d; }
-      .path, .meta, .pagination { color: #a6a9ad; }
+      .meta, .pagination { color: #a6a9ad; }
       .actions a, .pagination a { color: #8ab4ff; }
       .actions a { border-color: #55585c; background: #292a2d; }
+      .view-switch { border-color: #55585c; background: #292a2d; }
+      .view-switch button { color: #a6a9ad; }
+      .view-switch button.is-active { background: #3a3b3d; color: #8ab4ff; box-shadow: none; }
       .code, .directory-list { background: #202124; color: #e8eaed; border-color: #3a3b3d; }
+      .markdown-body { background: #202124; color: #e8eaed; }
+      .markdown-body h1, .markdown-body h2 { border-color: #3a3b3d; }
+      .markdown-body blockquote { color: #a6a9ad; border-color: #55585c; }
+      .markdown-body a { color: #8ab4ff; }
+      .markdown-body code { background: #303134; }
+      .markdown-body .markdown-code-block { background: #282a2d; }
+      .markdown-body th, .markdown-body td { border-color: #55585c; }
+      .markdown-body th { background: #292a2d; }
+      .markdown-body hr { background: #3a3b3d; }
       .directory-entry { border-color: #3a3b3d; }
       .directory-entry:hover { background: #292f3d; }
       .line-number { color: #8b9098; border-color: #3a3b3d; }
-      .line:target { background: #594c20; }
+      .line:target, .line.is-target-line { background: #594c20; box-shadow: inset 4px 0 #d29922; }
+      .hljs-comment, .hljs-quote { color: #8b949e; }
+      .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-link { color: #ff7b72; }
+      .hljs-string, .hljs-regexp, .hljs-title, .hljs-name, .hljs-type, .hljs-attribute, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable { color: #a5d6ff; }
+      .hljs-number, .hljs-meta, .hljs-built_in, .hljs-builtin-name, .hljs-params { color: #d2a8ff; }
+      .hljs-title.function_, .hljs-title.class_ { color: #d2a8ff; }
+      .hljs-deletion { color: #ffdcd7; background: #67060c; }
+      .hljs-addition { color: #aff5b4; background: #033a16; }
       .notice, .unsupported { color: #f5d58a; background: #3b321c; border-color: #705b28; }
     }
   </style>
 </head>
-<body>
-  <header>
-    <h1>${escapeHtml(input.title)}</h1>
-    <div class="path">${escapeHtml(input.filePath)}</div>
-    <div class="meta">${metadata}${actions}</div>
+<body${input.viewMode === "markdown" ? ' data-view-mode="rendered"' : ""}${liveAttributes}>
+  <header id="viewer-header">
+    <h1 id="viewer-title" data-file-path="${escapeAttribute(input.filePath)}">${escapeHtml(input.filePath)}</h1>
+    <div class="meta"><span class="metadata-values" id="viewer-metadata">${metadata}</span>${toolbar}</div>
   </header>
-  <main>${input.content}</main>
+  <main id="viewer-content">${input.content}</main>
+  ${liveScript}
 </body>
 </html>`;
 }
+function renderMetadata(metadata) {
+    return metadata.map((item) => `<span>${escapeHtml(item)}</span>`).join("");
+}
 function directoryViewerEntryKind(filePath, stat) {
     if (stat.isDirectory())
         return "directory";
@@ -460,6 +849,15 @@ function normalizeAbsolutePath(filePath) {
         return undefined;
     return path.resolve(normalized);
 }
+function encodeReadableQueryPath(filePath) {
+    return encodeURIComponent(filePath.replaceAll("\\", "/"))
+        .replaceAll("%3A", ":")
+        .replaceAll("%2F", "/");
+}
+function appendUrlQueryParameter(url, name, value) {
+    const parameter = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+    url.search = url.search ? `${url.search}&${parameter}` : `?${parameter}`;
+}
 function normalizePublicBaseUrl(value) {
     const url = new URL(value);
     if (url.protocol !== "http:" && url.protocol !== "https:") {
@@ -586,13 +984,67 @@ function hasTextLikeCharacters(value) {
     }
     return controls <= 2 || controls / Math.max(1, characters) <= 0.02;
 }
-function renderText(value) {
-    const lines = value.split(/\r?\n/u);
-    return `<pre class="code"><code>${lines.map((line, index) => {
+function renderText(value, filePath) {
+    const normalized = value.replace(/\r\n?/gu, "\n");
+    const language = syntaxLanguageFor(filePath);
+    const lines = language && Buffer.byteLength(normalized, "utf8") <= MAX_SYNTAX_HIGHLIGHT_BYTES
+        ? highlightLines(normalized, language)
+        : normalized.split("\n").map(escapeHtml);
+    const languageClass = language ? ` class="language-${escapeAttribute(language)}"` : "";
+    return `<pre class="code hljs"><code${languageClass}>${lines.map((line, index) => {
         const lineNumber = index + 1;
-        return `<span class="line" id="L${lineNumber}"><a class="line-number" href="#L${lineNumber}">${lineNumber}</a>${escapeHtml(line)}</span>`;
+        return `<span class="line" id="L${lineNumber}"><a class="line-number" href="#L${lineNumber}">${lineNumber}</a>${line}</span>`;
     }).join("")}</code></pre>`;
 }
+function renderMarkdownDocument(value, filePath) {
+    return `<article class="markdown-body" data-view-panel="rendered">${MARKDOWN_RENDERER.render(value)}</article><section data-view-panel="code">${renderText(value, filePath)}</section>`;
+}
+function isMarkdownFile(filePath) {
+    return MARKDOWN_EXTENSIONS.has(path.extname(filePath).toLowerCase());
+}
+function syntaxLanguageFor(filePath) {
+    const fileName = path.basename(filePath).toLowerCase();
+    return HIGHLIGHT_LANGUAGE_BY_FILENAME[fileName]
+        ?? HIGHLIGHT_LANGUAGE_BY_EXTENSION[path.extname(fileName)];
+}
+function highlightLines(value, language) {
+    try {
+        return splitHighlightedLines(hljs.highlight(value, { language, ignoreIllegals: true }).value);
+    }
+    catch {
+        return value.split("\n").map(escapeHtml);
+    }
+}
+function splitHighlightedLines(value) {
+    const lines = [];
+    const openTags = [];
+    const tokenPattern = /<span class="[^"]+">|<\/span>|\n/gu;
+    let current = "";
+    let offset = 0;
+    for (const match of value.matchAll(tokenPattern)) {
+        const token = match[0];
+        const index = match.index ?? offset;
+        current += value.slice(offset, index);
+        offset = index + token.length;
+        if (token === "\n") {
+            current += "</span>".repeat(openTags.length);
+            lines.push(current);
+            current = openTags.join("");
+        }
+        else if (token === "</span>") {
+            current += token;
+            openTags.pop();
+        }
+        else {
+            current += token;
+            openTags.push(token);
+        }
+    }
+    current += value.slice(offset);
+    current += "</span>".repeat(openTags.length);
+    lines.push(current);
+    return lines;
+}
 function contentTypeFor(extension) {
     const known = {
         ".aac": "audio/aac", ".avi": "video/x-msvideo", ".bmp": "image/bmp", ".css": "text/css; charset=utf-8",
@@ -663,8 +1115,16 @@ function formatFileSize(size) {
         return `${(size / 1024 / 1024).toFixed(1)} MiB`;
     return `${(size / 1024 / 1024 / 1024).toFixed(1)} GiB`;
 }
+function writeServerSentEvent(response, event, data) {
+    if (response.destroyed || response.writableEnded)
+        return;
+    response.write(`event: ${event}\n`);
+    for (const line of data.split(/\r?\n/u))
+        response.write(`data: ${line}\n`);
+    response.write("\n");
+}
 function setSecurityHeaders(response) {
-    response.setHeader("Content-Security-Policy", "default-src 'none'; img-src 'self' data:; media-src 'self'; object-src 'self'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'; frame-ancestors 'self'");
+    response.setHeader("Content-Security-Policy", "default-src 'none'; img-src 'self' data:; media-src 'self'; object-src 'self'; script-src 'self'; connect-src 'self'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'; frame-ancestors 'self'");
     response.setHeader("Cross-Origin-Resource-Policy", "same-origin");
     response.setHeader("Referrer-Policy", "no-referrer");
     response.setHeader("X-Content-Type-Options", "nosniff");