@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/server.ts

@@ -13,6 +13,11 @@ import {
   serializeComments,
   truncateSelection,
 } from "./lib/comment-storage.js";
+import { findTextPosition } from "./lib/highlight/resolver.js";
+import { extractTextFromHtml } from "./lib/html-text.js";
+import { createKeyLock } from "./lib/key-lock.js";
+import { getShiki, renderMarkdown } from "./lib/markdown-renderer.js";
+import { disposeMermaidWorker } from "./lib/mermaid-renderer.js";
 import { isMarkdownFile } from "./lib/utils.js";
 import {
   AnchorConfidences,
@@ -21,6 +26,7 @@ import {
   FontFamilies,
   type FontFamily,
 } from "./schema.js";
+import { renderTemplate } from "./template.js";
 
 function isErrnoException(err: unknown): err is NodeJS.ErrnoException {
   return err instanceof Error && "code" in err;
@@ -56,6 +62,8 @@ function invalidateResolvedComments(filePath: string): void {
   resolvedCommentsCache.delete(filePath);
 }
 
+const withCommentLock = createKeyLock("comments");
+
 async function canonicalPath(filePath: string): Promise<string> {
   return fs.realpath(path.resolve(filePath));
 }
@@ -63,6 +71,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);
@@ -80,27 +89,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,
       };
     });
 
@@ -221,15 +249,31 @@ function errorResponse(message: string, status: number): Response {
   return Response.json({ error: message }, { status });
 }
 
+function errorWithDetail(
+  message: string,
+  err: unknown,
+  status = 500,
+): Response {
+  const detail = err instanceof Error ? err.message : String(err);
+  return errorResponse(`${message}: ${detail}`, status);
+}
+
 interface RouteContext {
   filePath: string;
   getCurrentContent: () => Promise<string>;
 }
 
-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);
@@ -264,18 +308,19 @@ 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);
+    return errorWithDetail("Failed to add comment", err);
   }
 }
 
@@ -292,62 +337,65 @@ 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);
+    return errorWithDetail("Failed to update comment", err);
   }
 }
 
 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);
-    return errorResponse("Failed to delete comment", 500);
+    return errorWithDetail("Failed to delete comment", err);
   }
 }
 
 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);
-    return errorResponse("Failed to clear comments", 500);
+    return errorWithDetail("Failed to clear comments", err);
   }
 }
 
@@ -378,40 +426,38 @@ 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);
+    return errorWithDetail("Failed to re-anchor comment", err);
   }
 }
 
@@ -527,10 +573,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);
@@ -572,7 +621,6 @@ async function isViteReady(): Promise<boolean> {
 }
 
 async function spawnViteDev(): Promise<() => void> {
-  // If Vite is already running (e.g. after bun --watch restart), reuse it
   if (await isViteReady()) {
     return () => {};
   }
@@ -601,6 +649,8 @@ function extractCommentId(pathname: string): string | undefined {
 
 interface FileState {
   content: string | null;
+  renderedHtml: string | null;
+  headings: import("./lib/headings").Heading[] | null;
   isLoaded: boolean;
   debounceTimer: ReturnType<typeof setTimeout> | null;
 }
@@ -617,10 +667,18 @@ function createServer(options: ServerOptions): ServerWithWatchers {
   for (const entry of options.files) {
     fileMap.set(entry.filePath, {
       content: entry.content ?? null,
+      renderedHtml: null,
+      headings: null,
       isLoaded: entry.content !== undefined,
       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];
@@ -680,6 +738,23 @@ function createServer(options: ServerOptions): ServerWithWatchers {
     return content;
   }
 
+  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);
@@ -701,10 +776,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;
@@ -715,16 +911,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);
@@ -732,12 +979,14 @@ 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;
@@ -789,6 +1038,8 @@ function createServer(options: ServerOptions): ServerWithWatchers {
           } else {
             fileMap.set(filePath, {
               content: null,
+              renderedHtml: null,
+              headings: null,
               isLoaded: false,
               debounceTimer: null,
             });
@@ -818,9 +1069,10 @@ function createServer(options: ServerOptions): ServerWithWatchers {
       if (pathname === "/api/document" && method === "GET") {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
-        const content = await ctxOrRes.getCurrentContent();
+        const { html, headings } = await ensureRenderedHtml(ctxOrRes.filePath);
         return json({
-          content,
+          html,
+          headings,
           filePath: ctxOrRes.filePath,
           fileName: basename(ctxOrRes.filePath),
           clean: options.clean || false,
@@ -842,7 +1094,8 @@ function createServer(options: ServerOptions): ServerWithWatchers {
       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") {
@@ -854,12 +1107,14 @@ 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);
       }
 
@@ -867,6 +1122,7 @@ function createServer(options: ServerOptions): ServerWithWatchers {
       if (commentId) {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
+        invalidatePageCache();
 
         if (pathname.endsWith("/reanchor") && method === "PUT") {
           return reanchorComment(ctxOrRes, req, commentId);
@@ -887,6 +1143,10 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         return updateSettingsRoute(req);
       }
 
+      if (pathname === "/") {
+        return serveAppPage(req);
+      }
+
       if (isDev) {
         return proxyToVite(req, pathname, url.search);
       }
@@ -894,9 +1154,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
     },
   });
 
-  // 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);
@@ -908,6 +1165,8 @@ function createServer(options: ServerOptions): ServerWithWatchers {
 export async function startServer(
   options: ServerOptions,
 ): Promise<ServerResult> {
+  getShiki();
+
   const MAX_PORT = 65535;
 
   for (let port = options.port; port <= MAX_PORT; port++) {
@@ -925,6 +1184,7 @@ export async function startServer(
       const originalStop = server.stop.bind(server);
       const wrappedServer = {
         stop() {
+          disposeMermaidWorker();
           stopVite?.();
           for (const w of watchers) w.close();
           originalStop();