@peaske7/readit 0.1.8 → 0.2.1

package/src/{server/index.ts → server.ts}

@@ -3,7 +3,7 @@ import * as fs from "node:fs/promises";
 import * as os from "node:os";
 import * as path from "node:path";
 import { basename, dirname, join } from "node:path";
-import { findAnchorWithFallback } from "../lib/anchor.js";
+import { findAnchorWithFallback } from "./lib/anchor.js";
 import {
   computeHash,
   createComment,
@@ -12,20 +12,20 @@ import {
   parseCommentFile,
   serializeComments,
   truncateSelection,
-} from "../lib/comment-storage.js";
-import { getFileType } from "../lib/utils.js";
+} from "./lib/comment-storage.js";
+import { findTextPosition } from "./lib/highlight/resolver.js";
+import { extractTextFromHtml } from "./lib/html-text.js";
+import { getShiki, renderMarkdown } from "./lib/markdown-renderer.js";
+import { disposeMermaidWorker } from "./lib/mermaid-renderer.js";
+import { isMarkdownFile } from "./lib/utils.js";
 import {
   AnchorConfidences,
   type Comment,
   type DocumentSettings,
-  type DocumentType,
-  type EditorScheme,
-  EditorSchemes,
   FontFamilies,
   type FontFamily,
-} from "../types/index.js";
-
-// ─── Helpers ─────────────────────────────────────────────────────────
+} from "./schema.js";
+import { renderTemplate } from "./template.js";
 
 function isErrnoException(err: unknown): err is NodeJS.ErrnoException {
   return err instanceof Error && "code" in err;
@@ -33,7 +33,6 @@ function isErrnoException(err: unknown): err is NodeJS.ErrnoException {
 
 export interface FileEntry {
   content?: string;
-  type: DocumentType;
   filePath: string;
 }
 
@@ -62,6 +61,21 @@ function invalidateResolvedComments(filePath: string): void {
   resolvedCommentsCache.delete(filePath);
 }
 
+const commentWriteLocks = new Map<string, Promise<unknown>>();
+
+function withCommentLock<T>(
+  filePath: string,
+  fn: () => Promise<T>,
+): Promise<T> {
+  const prev = commentWriteLocks.get(filePath) ?? Promise.resolve();
+  const next = prev.catch(() => {}).then(fn);
+  commentWriteLocks.set(
+    filePath,
+    next.catch(() => {}),
+  );
+  return next;
+}
+
 async function canonicalPath(filePath: string): Promise<string> {
   return fs.realpath(path.resolve(filePath));
 }
@@ -69,6 +83,7 @@ async function canonicalPath(filePath: string): Promise<string> {
 async function readCommentsFromFile(
   filePath: string,
   sourceContent: string,
+  renderedHtml?: string,
 ): Promise<Comment[]> {
   const commentPath = getCommentPath(filePath);
   const sourceHash = computeHash(sourceContent);
@@ -86,27 +101,46 @@ async function readCommentsFromFile(
 
     const content = await fs.readFile(commentPath, "utf-8");
     const file = parseCommentFile(content);
+
+    const domText = renderedHtml ? extractTextFromHtml(renderedHtml) : null;
+
     const resolvedComments = file.comments.map((comment) => {
       const textForMatching = comment.anchorPrefix || comment.selectedText;
+
       const anchor = findAnchorWithFallback({
         source: sourceContent,
         selectedText: textForMatching,
         lineHint: comment.lineHint || "L1",
       });
 
-      if (anchor) {
+      if (!anchor) {
         return {
           ...comment,
-          startOffset: anchor.start,
-          endOffset: anchor.end,
-          lineHint: `L${anchor.line}`,
-          anchorConfidence: anchor.confidence,
+          anchorConfidence: AnchorConfidences.UNRESOLVED,
         };
       }
 
+      let startOffset = anchor.start;
+      let endOffset = anchor.end;
+
+      if (domText) {
+        const domPos = findTextPosition(
+          domText,
+          comment.selectedText,
+          anchor.start,
+        );
+        if (domPos) {
+          startOffset = domPos.start;
+          endOffset = domPos.end;
+        }
+      }
+
       return {
         ...comment,
-        anchorConfidence: AnchorConfidences.UNRESOLVED,
+        startOffset,
+        endOffset,
+        lineHint: `L${anchor.line}`,
+        anchorConfidence: anchor.confidence,
       };
     });
 
@@ -194,12 +228,6 @@ function isValidFontFamily(value: unknown): value is FontFamily {
   return value === FontFamilies.SERIF || value === FontFamilies.SANS_SERIF;
 }
 
-function isValidEditorScheme(value: unknown): value is EditorScheme {
-  return Object.values(EditorSchemes).includes(value as EditorScheme);
-}
-
-// ─── PID file helpers ───────────────────────────────────────────────
-
 export const SERVER_INFO_PATH = path.join(
   os.homedir(),
   ".readit",
@@ -225,8 +253,6 @@ export async function removeServerInfo(): Promise<void> {
   }
 }
 
-// ─── Response helpers ───────────────────────────────────────────────
-
 function json(data: unknown, status = 200): Response {
   return Response.json(data, { status });
 }
@@ -235,19 +261,22 @@ function errorResponse(message: string, status: number): Response {
   return Response.json({ error: message }, { status });
 }
 
-// ─── Route context ──────────────────────────────────────────────────
-
 interface RouteContext {
   filePath: string;
   getCurrentContent: () => Promise<string>;
 }
 
-// ─── Route handlers ─────────────────────────────────────────────────
-
-async function getComments(ctx: RouteContext): Promise<Response> {
+async function getComments(
+  ctx: RouteContext,
+  renderedHtml?: string,
+): Promise<Response> {
   try {
     const currentContent = await ctx.getCurrentContent();
-    const comments = await readCommentsFromFile(ctx.filePath, currentContent);
+    const comments = await readCommentsFromFile(
+      ctx.filePath,
+      currentContent,
+      renderedHtml,
+    );
     return json({ comments });
   } catch (err) {
     console.error("Failed to read comments:", err);
@@ -282,18 +311,20 @@ async function addComment(ctx: RouteContext, req: Request): Promise<Response> {
       currentContent,
     );
 
-    const existingComments = await readCommentsFromFile(
-      ctx.filePath,
-      currentContent,
-    );
-    const allComments = [...existingComments, newComment];
-
-    await writeCommentsToFile(ctx.filePath, currentContent, allComments);
+    await withCommentLock(ctx.filePath, async () => {
+      const existingComments = await readCommentsFromFile(
+        ctx.filePath,
+        currentContent,
+      );
+      const allComments = [...existingComments, newComment];
+      await writeCommentsToFile(ctx.filePath, currentContent, allComments);
+    });
 
     return json({ comment: newComment }, 201);
   } catch (err) {
     console.error("Failed to add comment:", err);
-    return errorResponse("Failed to add comment", 500);
+    const detail = err instanceof Error ? err.message : String(err);
+    return errorResponse(`Failed to add comment: ${detail}`, 500);
   }
 }
 
@@ -310,23 +341,22 @@ async function updateComment(
     }
 
     const currentContent = await ctx.getCurrentContent();
-    const existingComments = await readCommentsFromFile(
-      ctx.filePath,
-      currentContent,
-    );
-    const commentIndex = existingComments.findIndex((c) => c.id === id);
-
-    if (commentIndex === -1) {
-      return errorResponse("Comment not found", 404);
-    }
-
-    const updatedComments = existingComments.map((c, i) =>
-      i === commentIndex ? { ...c, comment: commentText.trim() } : c,
-    );
-
-    await writeCommentsToFile(ctx.filePath, currentContent, updatedComments);
+    const result = await withCommentLock(ctx.filePath, async () => {
+      const existingComments = await readCommentsFromFile(
+        ctx.filePath,
+        currentContent,
+      );
+      const commentIndex = existingComments.findIndex((c) => c.id === id);
+      if (commentIndex === -1) return null;
+      const updatedComments = existingComments.map((c, i) =>
+        i === commentIndex ? { ...c, comment: commentText.trim() } : c,
+      );
+      await writeCommentsToFile(ctx.filePath, currentContent, updatedComments);
+      return updatedComments[commentIndex];
+    });
 
-    return json({ comment: updatedComments[commentIndex] });
+    if (!result) return errorResponse("Comment not found", 404);
+    return json({ comment: result });
   } catch (err) {
     console.error("Failed to update comment:", err);
     return errorResponse("Failed to update comment", 500);
@@ -336,22 +366,26 @@ async function updateComment(
 async function deleteComment(ctx: RouteContext, id: string): Promise<Response> {
   try {
     const currentContent = await ctx.getCurrentContent();
-    const existingComments = await readCommentsFromFile(
-      ctx.filePath,
-      currentContent,
-    );
-    const filteredComments = existingComments.filter((c) => c.id !== id);
-
-    if (filteredComments.length === existingComments.length) {
-      return errorResponse("Comment not found", 404);
-    }
-
-    if (filteredComments.length === 0) {
-      await deleteCommentFile(ctx.filePath);
-    } else {
-      await writeCommentsToFile(ctx.filePath, currentContent, filteredComments);
-    }
+    const found = await withCommentLock(ctx.filePath, async () => {
+      const existingComments = await readCommentsFromFile(
+        ctx.filePath,
+        currentContent,
+      );
+      const filteredComments = existingComments.filter((c) => c.id !== id);
+      if (filteredComments.length === existingComments.length) return false;
+      if (filteredComments.length === 0) {
+        await deleteCommentFile(ctx.filePath);
+      } else {
+        await writeCommentsToFile(
+          ctx.filePath,
+          currentContent,
+          filteredComments,
+        );
+      }
+      return true;
+    });
 
+    if (!found) return errorResponse("Comment not found", 404);
     return json({ success: true });
   } catch (err) {
     console.error("Failed to delete comment:", err);
@@ -361,7 +395,7 @@ async function deleteComment(ctx: RouteContext, id: string): Promise<Response> {
 
 async function clearComments(ctx: RouteContext): Promise<Response> {
   try {
-    await deleteCommentFile(ctx.filePath);
+    await withCommentLock(ctx.filePath, () => deleteCommentFile(ctx.filePath));
     return json({ success: true });
   } catch (err) {
     console.error("Failed to clear comments:", err);
@@ -396,37 +430,35 @@ async function reanchorComment(
     }
 
     const currentContent = await ctx.getCurrentContent();
-    const existingComments = await readCommentsFromFile(
-      ctx.filePath,
-      currentContent,
-    );
-    const commentIndex = existingComments.findIndex((c) => c.id === id);
-
-    if (commentIndex === -1) {
-      return errorResponse("Comment not found", 404);
-    }
-
-    const lineHint = getLineHint(currentContent, startOffset, endOffset);
-    const truncatedText = truncateSelection(selectedText);
-
-    const updatedComment: Comment = {
-      ...existingComments[commentIndex],
-      selectedText: truncatedText,
-      startOffset,
-      endOffset,
-      lineHint,
-      anchorConfidence: AnchorConfidences.EXACT,
-      anchorPrefix:
-        selectedText.length > 1000 ? selectedText.slice(0, 200) : undefined,
-    };
-
-    const updatedComments = existingComments.map((c, i) =>
-      i === commentIndex ? updatedComment : c,
-    );
-
-    await writeCommentsToFile(ctx.filePath, currentContent, updatedComments);
+    const result = await withCommentLock(ctx.filePath, async () => {
+      const existingComments = await readCommentsFromFile(
+        ctx.filePath,
+        currentContent,
+      );
+      const commentIndex = existingComments.findIndex((c) => c.id === id);
+      if (commentIndex === -1) return null;
+
+      const lineHint = getLineHint(currentContent, startOffset, endOffset);
+      const truncatedText = truncateSelection(selectedText);
+      const updatedComment: Comment = {
+        ...existingComments[commentIndex],
+        selectedText: truncatedText,
+        startOffset,
+        endOffset,
+        lineHint,
+        anchorConfidence: AnchorConfidences.EXACT,
+        anchorPrefix:
+          selectedText.length > 1000 ? selectedText.slice(0, 200) : undefined,
+      };
+      const updatedComments = existingComments.map((c, i) =>
+        i === commentIndex ? updatedComment : c,
+      );
+      await writeCommentsToFile(ctx.filePath, currentContent, updatedComments);
+      return updatedComment;
+    });
 
-    return json({ comment: updatedComment });
+    if (!result) return errorResponse("Comment not found", 404);
+    return json({ comment: result });
   } catch (err) {
     console.error("Failed to re-anchor comment:", err);
     return errorResponse("Failed to re-anchor comment", 500);
@@ -446,22 +478,16 @@ async function getSettingsRoute(): Promise<Response> {
 async function updateSettingsRoute(req: Request): Promise<Response> {
   try {
     const body = await req.json();
-    const { fontFamily, editorScheme, keybindings } = body;
+    const { fontFamily } = body;
 
     if (fontFamily !== undefined && !isValidFontFamily(fontFamily)) {
       return errorResponse("Invalid font family", 400);
     }
 
-    if (editorScheme !== undefined && !isValidEditorScheme(editorScheme)) {
-      return errorResponse("Invalid editor scheme", 400);
-    }
-
     const current = await readSettings();
     const settings: DocumentSettings = {
       ...current,
       ...(fontFamily !== undefined && { fontFamily }),
-      ...(editorScheme !== undefined && { editorScheme }),
-      ...(keybindings !== undefined && { keybindings }),
     };
 
     await writeSettings(settings);
@@ -472,8 +498,6 @@ async function updateSettingsRoute(req: Request): Promise<Response> {
   }
 }
 
-// ─── SSE helpers ────────────────────────────────────────────────────
-
 function createDocumentStream(
   sseClients: Set<ReadableStreamDefaultController>,
 ): Response {
@@ -545,8 +569,6 @@ function createHeartbeat(
   });
 }
 
-// ─── Static file serving ────────────────────────────────────────────
-
 async function serveStaticFile(
   distPath: string,
   pathname: string,
@@ -555,10 +577,13 @@ async function serveStaticFile(
   const file = Bun.file(filePath);
 
   if (await file.exists()) {
-    return new Response(file);
+    const isHashed = pathname.startsWith("/assets/");
+    const headers: Record<string, string> = isHashed
+      ? { "Cache-Control": "public, max-age=31536000, immutable" }
+      : {};
+    return new Response(file, { headers });
   }
 
-  // SPA fallback: serve index.html for non-API routes
   const indexFile = Bun.file(join(distPath, "index.html"));
   if (await indexFile.exists()) {
     return new Response(indexFile);
@@ -567,43 +592,97 @@ async function serveStaticFile(
   return new Response("Not Found", { status: 404 });
 }
 
-// ─── Extract route param ────────────────────────────────────────────
+const VITE_DEV_PORT = 24678;
+const VITE_DEV_ORIGIN = `http://127.0.0.1:${VITE_DEV_PORT}`;
+
+async function proxyToVite(
+  req: Request,
+  pathname: string,
+  search: string,
+): Promise<Response> {
+  const target = `${VITE_DEV_ORIGIN}${pathname}${search}`;
+  try {
+    return await fetch(
+      new Request(target, {
+        method: req.method,
+        headers: req.headers,
+        body: req.body,
+        redirect: "manual",
+      }),
+    );
+  } catch {
+    return new Response("Vite dev server not available", { status: 502 });
+  }
+}
+
+async function isViteReady(): Promise<boolean> {
+  try {
+    const res = await fetch(`${VITE_DEV_ORIGIN}/`);
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+async function spawnViteDev(): Promise<() => void> {
+  if (await isViteReady()) {
+    return () => {};
+  }
+
+  const child = Bun.spawn(
+    ["bunx", "vite", "--port", String(VITE_DEV_PORT), "--strictPort"],
+    { stdout: "ignore", stderr: "inherit" },
+  );
+
+  const maxWaitMs = 10_000;
+  const start = Date.now();
+  while (Date.now() - start < maxWaitMs) {
+    if (await isViteReady()) break;
+    await new Promise((r) => setTimeout(r, 200));
+  }
+
+  return () => {
+    child.kill();
+  };
+}
 
 function extractCommentId(pathname: string): string | undefined {
   const match = pathname.match(/^\/api\/comments\/([^/]+)/);
   return match?.[1];
 }
 
-// ─── Multi-file state ───────────────────────────────────────────────
-
 interface FileState {
   content: string | null;
+  renderedHtml: string | null;
+  headings: import("./lib/headings").Heading[] | null;
   isLoaded: boolean;
-  type: DocumentType;
   debounceTimer: ReturnType<typeof setTimeout> | null;
 }
 
-// ─── Server creation ────────────────────────────────────────────────
-
 interface ServerWithWatchers {
   server: ReturnType<typeof Bun.serve>;
   watchers: FSWatcher[];
 }
 
 function createServer(options: ServerOptions): ServerWithWatchers {
-  // Map of absolute path → mutable file state
   const fileMap = new Map<string, FileState>();
-  // Ordered list of file paths (insertion order for tab display)
   const fileOrder: string[] = [];
 
   for (const entry of options.files) {
     fileMap.set(entry.filePath, {
       content: entry.content ?? null,
+      renderedHtml: null,
+      headings: null,
       isLoaded: entry.content !== undefined,
-      type: entry.type,
       debounceTimer: null,
     });
     fileOrder.push(entry.filePath);
+
+    if (options.clean) {
+      const commentPath = getCommentPath(entry.filePath);
+      fs.unlink(commentPath).catch(() => {});
+      invalidateResolvedComments(entry.filePath);
+    }
   }
 
   const defaultPath = fileOrder[0];
@@ -663,7 +742,23 @@ function createServer(options: ServerOptions): ServerWithWatchers {
     return content;
   }
 
-  // Resolve the target file from ?path= query param, falling back to first file
+  async function ensureRenderedHtml(
+    filePath: string,
+  ): Promise<{ html: string; headings: import("./lib/headings").Heading[] }> {
+    const state = fileMap.get(filePath);
+    if (!state) throw new Error(`File not found: ${filePath}`);
+
+    if (state.renderedHtml !== null && state.headings !== null) {
+      return { html: state.renderedHtml, headings: state.headings };
+    }
+
+    const content = await ensureFileContent(filePath);
+    const result = await renderMarkdown(content);
+    state.renderedHtml = result.html;
+    state.headings = result.headings;
+    return result;
+  }
+
   function resolveContext(url: URL): RouteContext | null {
     const requestedPath = url.searchParams.get("path") ?? defaultPath;
     const state = fileMap.get(requestedPath);
@@ -685,10 +780,131 @@ function createServer(options: ServerOptions): ServerWithWatchers {
   const isDev = process.env.NODE_ENV === "development";
   const distPath = import.meta.dir;
 
+  let manifestCache: Record<string, { file: string; css?: string[] }> | null =
+    null;
+
+  async function getManifest(): Promise<typeof manifestCache> {
+    if (manifestCache) return manifestCache;
+    try {
+      const manifestPath = join(distPath, ".vite", "manifest.json");
+      const content = await fs.readFile(manifestPath, "utf-8");
+      manifestCache = JSON.parse(content);
+      return manifestCache;
+    } catch {
+      return null;
+    }
+  }
+
+  let pageCache: string | null = null;
+  let pageCacheGz: Uint8Array<ArrayBuffer> | null = null;
+
+  function invalidatePageCache(): void {
+    pageCache = null;
+    pageCacheGz = null;
+  }
+
+  async function serveAppPage(req: Request): Promise<Response> {
+    const acceptGzip =
+      req.headers.get("accept-encoding")?.includes("gzip") ?? false;
+
+    try {
+      if (pageCache) {
+        if (acceptGzip && pageCacheGz) {
+          return new Response(pageCacheGz, {
+            headers: {
+              "Content-Type": "text/html; charset=utf-8",
+              "Content-Encoding": "gzip",
+            },
+          });
+        }
+        return new Response(pageCache, {
+          headers: { "Content-Type": "text/html; charset=utf-8" },
+        });
+      }
+
+      const { html, headings } = await ensureRenderedHtml(defaultPath);
+      const content = await ensureFileContent(defaultPath);
+      const comments = await readCommentsFromFile(defaultPath, content, html);
+      const settings = await readSettings();
+
+      const files = fileOrder.map((fp) => ({
+        path: fp,
+        fileName: basename(fp),
+      }));
+
+      const inlineData = {
+        files,
+        activeFile: defaultPath,
+        settings,
+        documents: {
+          [defaultPath]: {
+            headings,
+            comments,
+          },
+        },
+        clean: options.clean || false,
+        workingDirectory: process.cwd(),
+      };
+
+      let cssPath = "";
+      let jsPath: string;
+
+      if (isDev) {
+        jsPath = `http://127.0.0.1:${VITE_DEV_PORT}/src/main.ts`;
+      } else {
+        const manifest = await getManifest();
+        const entry = manifest?.["index.html"];
+        jsPath = entry ? `/${entry.file}` : "/assets/index.js";
+        if (entry?.css?.[0]) {
+          cssPath = `/${entry.css[0]}`;
+        }
+      }
+
+      const body = renderTemplate({
+        title: basename(defaultPath),
+        cssPath,
+        jsPath,
+        documentHtml: html,
+        inlineData,
+        isDev,
+        fontFamily: settings.fontFamily,
+      });
+
+      if (!isDev) {
+        pageCache = body;
+        pageCacheGz = Bun.gzipSync(
+          new TextEncoder().encode(body),
+        ) as Uint8Array<ArrayBuffer>;
+      }
+
+      if (acceptGzip) {
+        const gz = pageCacheGz ?? Bun.gzipSync(new TextEncoder().encode(body));
+        return new Response(gz, {
+          headers: {
+            "Content-Type": "text/html; charset=utf-8",
+            "Content-Encoding": "gzip",
+          },
+        });
+      }
+
+      return new Response(body, {
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    } catch (err) {
+      console.error("Failed to serve app page:", err);
+      return new Response("Internal Server Error", { status: 500 });
+    }
+  }
+
   function watchFile(targetPath: string): FSWatcher | null {
     try {
       const watcher = watch(targetPath, async (eventType) => {
-        if (eventType !== "change") return;
+        // Handle both "change" and "rename" events.
+        // Many editors (Vim, Neovim, Emacs) save files by writing to a temp
+        // file and then renaming it over the original. This triggers a
+        // "rename" event rather than "change". After a rename the original
+        // watcher may become invalid, so we re-establish it.
+        if (eventType !== "change" && eventType !== "rename") return;
 
         const state = fileMap.get(targetPath);
         if (!state) return;
@@ -699,16 +915,67 @@ function createServer(options: ServerOptions): ServerWithWatchers {
             const newContent = await fs.readFile(targetPath, "utf-8");
             if (!state.isLoaded || newContent !== state.content) {
               state.content = newContent;
+              state.renderedHtml = null;
+              state.headings = null;
               state.isLoaded = true;
               invalidateResolvedComments(targetPath);
+              invalidatePageCache();
               console.log(`File changed: ${basename(targetPath)}`);
               sendEvent({ type: "document-updated", path: targetPath });
             }
           } catch (err) {
-            console.error(`Failed to read updated file ${targetPath}:`, err);
+            // File may have been temporarily removed during a rename-save.
+            // If it reappears, re-establish the watcher.
+            if (isErrnoException(err) && err.code === "ENOENT") {
+              await rewatch(targetPath);
+            } else {
+              console.error(`Failed to read updated file ${targetPath}:`, err);
+            }
           }
         }, 100);
       });
+
+      // Re-establish file watch after a rename-style save
+      async function rewatch(filePath: string) {
+        const maxRetries = 10;
+        const retryInterval = 200;
+        for (let i = 0; i < maxRetries; i++) {
+          await new Promise((r) => setTimeout(r, retryInterval));
+          try {
+            await fs.access(filePath);
+            // File exists again — close old watcher, create new one
+            try {
+              watcher.close();
+            } catch {}
+            const idx = watchers.indexOf(watcher);
+            const newWatcher = watchFile(filePath);
+            if (newWatcher) {
+              if (idx >= 0) watchers[idx] = newWatcher;
+              else watchers.push(newWatcher);
+            }
+            // Read the new content and emit update
+            const state = fileMap.get(filePath);
+            if (state) {
+              const newContent = await fs.readFile(filePath, "utf-8");
+              if (!state.isLoaded || newContent !== state.content) {
+                state.content = newContent;
+                state.renderedHtml = null;
+                state.headings = null;
+                state.isLoaded = true;
+                invalidateResolvedComments(filePath);
+                invalidatePageCache();
+                console.log(`File changed: ${basename(filePath)}`);
+                sendEvent({ type: "document-updated", path: filePath });
+              }
+            }
+            return;
+          } catch {
+            // File not yet recreated, keep retrying
+          }
+        }
+        console.warn(`File did not reappear after rename: ${filePath}`);
+      }
+
       return watcher;
     } catch (err) {
       console.warn(`File watching not available for ${targetPath}:`, err);
@@ -716,28 +983,23 @@ function createServer(options: ServerOptions): ServerWithWatchers {
     }
   }
 
+  const watchers: FSWatcher[] = [];
+
   const server = Bun.serve({
     port: options.port,
     hostname: options.host,
-    idleTimeout: 255, // max value (seconds) — SSE streams stay open long
+    idleTimeout: 255,
 
-    async fetch(req) {
+    async fetch(req: Request) {
       const url = new URL(req.url);
       const { pathname } = url;
       const method = req.method;
 
-      // ── API routes ──────────────────────────────────────────
-
-      // Document list (multi-file)
       if (pathname === "/api/documents" && method === "GET") {
-        const files = fileOrder.map((fp) => {
-          const state = fileMap.get(fp)!;
-          return {
-            path: fp,
-            fileName: basename(fp),
-            type: state.type,
-          };
-        });
+        const files = fileOrder.map((fp) => ({
+          path: fp,
+          fileName: basename(fp),
+        }));
         return json({
           files,
           clean: options.clean || false,
@@ -745,7 +1007,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         });
       }
 
-      // Register a document for this session without forcing focus
       if (pathname === "/api/documents" && method === "POST") {
         try {
           const { path: requestedPath } = await req.json();
@@ -763,11 +1024,9 @@ function createServer(options: ServerOptions): ServerWithWatchers {
             }
             throw err;
           }
-          const fileType = getFileType(filePath);
-
-          if (!fileType) {
+          if (!isMarkdownFile(filePath)) {
             return errorResponse(
-              `Unsupported file type: ${filePath} (expected .md, .markdown, .html, or .htm)`,
+              `Unsupported file type: ${filePath} (expected .md or .markdown)`,
               400,
             );
           }
@@ -778,15 +1037,14 @@ function createServer(options: ServerOptions): ServerWithWatchers {
             return json({
               path: filePath,
               fileName: basename(filePath),
-              type: fileType,
               status: "present",
             });
           } else {
-            // New document — register metadata only, load content on demand
             fileMap.set(filePath, {
               content: null,
+              renderedHtml: null,
+              headings: null,
               isLoaded: false,
-              type: fileType,
               debounceTimer: null,
             });
             fileOrder.push(filePath);
@@ -798,14 +1056,12 @@ function createServer(options: ServerOptions): ServerWithWatchers {
               type: "document-added",
               path: filePath,
               fileName: basename(filePath),
-              fileType,
             });
           }
 
           return json({
             path: filePath,
             fileName: basename(filePath),
-            type: fileType,
             status: "added",
           });
         } catch (err) {
@@ -814,15 +1070,13 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         }
       }
 
-      // Single document (backward compat + path-aware)
       if (pathname === "/api/document" && method === "GET") {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
-        const state = fileMap.get(ctxOrRes.filePath)!;
-        const content = await ctxOrRes.getCurrentContent();
+        const { html, headings } = await ensureRenderedHtml(ctxOrRes.filePath);
         return json({
-          content,
-          type: state.type,
+          html,
+          headings,
           filePath: ctxOrRes.filePath,
           fileName: basename(ctxOrRes.filePath),
           clean: options.clean || false,
@@ -841,11 +1095,11 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         return createHeartbeat(onHeartbeatOpen, onHeartbeatClose);
       }
 
-      // Comments routes
       if (pathname === "/api/comments" && method === "GET") {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
-        return getComments(ctxOrRes);
+        const rendered = await ensureRenderedHtml(ctxOrRes.filePath);
+        return getComments(ctxOrRes, rendered.html);
       }
 
       if (pathname === "/api/comments/raw" && method === "GET") {
@@ -857,20 +1111,22 @@ function createServer(options: ServerOptions): ServerWithWatchers {
       if (pathname === "/api/comments" && method === "POST") {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
+        invalidatePageCache();
         return addComment(ctxOrRes, req);
       }
 
       if (pathname === "/api/comments" && method === "DELETE") {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
+        invalidatePageCache();
         return clearComments(ctxOrRes);
       }
 
-      // Parameterized comment routes
       const commentId = extractCommentId(pathname);
       if (commentId) {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
+        invalidatePageCache();
 
         if (pathname.endsWith("/reanchor") && method === "PUT") {
           return reanchorComment(ctxOrRes, req, commentId);
@@ -883,7 +1139,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         }
       }
 
-      // Settings routes (global, not per-document)
       if (pathname === "/api/settings" && method === "GET") {
         return getSettingsRoute();
       }
@@ -892,15 +1147,17 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         return updateSettingsRoute(req);
       }
 
-      // ── Static / SPA serving ────────────────────────────────
+      if (pathname === "/") {
+        return serveAppPage(req);
+      }
 
+      if (isDev) {
+        return proxyToVite(req, pathname, url.search);
+      }
       return serveStaticFile(distPath, pathname);
     },
   });
 
-  // Set up per-file watchers after Bun.serve() succeeds to avoid
-  // leaking FSWatcher handles if the server fails to bind.
-  const watchers: FSWatcher[] = [];
   for (const fp of fileOrder) {
     const watcher = watchFile(fp);
     if (watcher) watchers.push(watcher);
@@ -909,11 +1166,11 @@ function createServer(options: ServerOptions): ServerWithWatchers {
   return { server, watchers };
 }
 
-// ─── Port fallback + start ──────────────────────────────────────────
-
 export async function startServer(
   options: ServerOptions,
 ): Promise<ServerResult> {
+  getShiki();
+
   const MAX_PORT = 65535;
 
   for (let port = options.port; port <= MAX_PORT; port++) {
@@ -923,9 +1180,16 @@ export async function startServer(
       const displayHost =
         options.host === "0.0.0.0" ? "localhost" : options.host;
 
+      let stopVite: (() => void) | undefined;
+      if (process.env.NODE_ENV === "development") {
+        stopVite = await spawnViteDev();
+      }
+
       const originalStop = server.stop.bind(server);
       const wrappedServer = {
         stop() {
+          disposeMermaidWorker();
+          stopVite?.();
           for (const w of watchers) w.close();
           originalStop();
         },