@peaske7/readit 0.2.1 → 0.3.0-rc.0

package/go/internal/server/comments.go

@@ -139,7 +139,7 @@ func (s *Server) createComment(w http.ResponseWriter, r *http.Request) {
 
 	commentPath, err := CommentPath(path)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to resolve comment path")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to resolve comment path: %v", err))
 		return
 	}
 	cf := CommentFile{
@@ -189,18 +189,18 @@ func (s *Server) updateComment(w http.ResponseWriter, r *http.Request) {
 
 	commentPath, err := CommentPath(path)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to resolve comment path")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to resolve comment path: %v", err))
 		return
 	}
 	data, err := os.ReadFile(commentPath)
 	if err != nil {
-		writeError(w, http.StatusNotFound, "comment file not found")
+		writeError(w, http.StatusNotFound, fmt.Sprintf("comment file not found: %v", err))
 		return
 	}
 
 	cf, err := ParseCommentFile(data)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to parse comments")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to parse comments: %v", err))
 		return
 	}
 
@@ -209,7 +209,7 @@ func (s *Server) updateComment(w http.ResponseWriter, r *http.Request) {
 			cf.Comments[i].Comment = strings.TrimSpace(body.Comment)
 
 			if err := WriteCommentFile(commentPath, cf); err != nil {
-				writeError(w, http.StatusInternalServerError, "failed to save")
+				writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to save: %v", err))
 				return
 			}
 			s.invalidateCommentCache(path)
@@ -231,18 +231,18 @@ func (s *Server) deleteComment(w http.ResponseWriter, r *http.Request) {
 
 	commentPath, err := CommentPath(path)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to resolve comment path")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to resolve comment path: %v", err))
 		return
 	}
 	data, err := os.ReadFile(commentPath)
 	if err != nil {
-		writeError(w, http.StatusNotFound, "comment file not found")
+		writeError(w, http.StatusNotFound, fmt.Sprintf("comment file not found: %v", err))
 		return
 	}
 
 	cf, err := ParseCommentFile(data)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to parse comments")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to parse comments: %v", err))
 		return
 	}
 
@@ -260,13 +260,13 @@ func (s *Server) deleteComment(w http.ResponseWriter, r *http.Request) {
 
 	if len(filtered) == 0 {
 		if err := os.Remove(commentPath); err != nil && !os.IsNotExist(err) {
-			writeError(w, http.StatusInternalServerError, "failed to delete comment file")
+			writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to delete comment file: %v", err))
 			return
 		}
 	} else {
 		cf.Comments = filtered
 		if err := WriteCommentFile(commentPath, cf); err != nil {
-			writeError(w, http.StatusInternalServerError, "failed to save comments")
+			writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to save comments: %v", err))
 			return
 		}
 	}
@@ -284,7 +284,7 @@ func (s *Server) deleteAllComments(w http.ResponseWriter, r *http.Request) {
 
 	commentPath, err := CommentPath(path)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to resolve comment path")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to resolve comment path: %v", err))
 		return
 	}
 	if err := os.Remove(commentPath); err != nil && !os.IsNotExist(err) {
@@ -321,18 +321,18 @@ func (s *Server) reanchorComment(w http.ResponseWriter, r *http.Request) {
 
 	commentPath, err := CommentPath(path)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to resolve comment path")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to resolve comment path: %v", err))
 		return
 	}
 	data, err := os.ReadFile(commentPath)
 	if err != nil {
-		writeError(w, http.StatusNotFound, "comment file not found")
+		writeError(w, http.StatusNotFound, fmt.Sprintf("comment file not found: %v", err))
 		return
 	}
 
 	cf, err := ParseCommentFile(data)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to parse comments")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to parse comments: %v", err))
 		return
 	}
 
@@ -354,7 +354,7 @@ func (s *Server) reanchorComment(w http.ResponseWriter, r *http.Request) {
 
 			cf.Hash = ComputeHash(state.Content)
 			if err := WriteCommentFile(commentPath, cf); err != nil {
-				writeError(w, http.StatusInternalServerError, "failed to save")
+				writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to save: %v", err))
 				return
 			}
 			s.invalidateCommentCache(path)
@@ -370,7 +370,7 @@ func (s *Server) rawComments(w http.ResponseWriter, r *http.Request) {
 	path := s.resolveFilePath(r)
 	commentPath, err := CommentPath(path)
 	if err != nil {
-		writeError(w, http.StatusInternalServerError, "failed to resolve comment path")
+		writeError(w, http.StatusInternalServerError, fmt.Sprintf("failed to resolve comment path: %v", err))
 		return
 	}
 

package/go/internal/server/storage.go

@@ -18,7 +18,7 @@ import (
 var (
 	frontMatterRe      = regexp.MustCompile(`(?s)^---\n(.*?)\n---`)
 	frontMatterStripRe = regexp.MustCompile(`(?s)^---\n.*?\n---\n*`)
-	commentMetaRe      = regexp.MustCompile(`<!--\s*c:([^|]+)\|([^|]+)\|([^>]+)\s*-->`)
+	commentMetaRe      = regexp.MustCompile(`<!--\s*c:([^|]+)\|([^|>]+?)(?:\|([^>]*?))?\s*-->`)
 	anchorPrefixRe     = regexp.MustCompile(`<!--\s*anchor:([A-Za-z0-9+/=]+)\s*-->`)
 )
 

package/go/internal/server/storage_test.go

@@ -116,3 +116,37 @@ func TestParseAndSerializeRoundTrip(t *testing.T) {
 		}
 	}
 }
+
+func TestParseLegacyTwoFieldMarker(t *testing.T) {
+	legacy := []byte(`---
+source: /test.md
+hash: abc
+version: 1
+---
+
+<!-- c:abcd1234|L5 -->
+> selected text
+
+a comment body
+
+---
+`)
+
+	cf, err := ParseCommentFile(legacy)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if len(cf.Comments) != 1 {
+		t.Fatalf("expected 1 comment from legacy 2-field marker, got %d", len(cf.Comments))
+	}
+	c := cf.Comments[0]
+	if c.ID != "abcd1234" {
+		t.Errorf("ID: got %q, want %q", c.ID, "abcd1234")
+	}
+	if c.LineHint != "L5" {
+		t.Errorf("LineHint: got %q, want %q", c.LineHint, "L5")
+	}
+	if c.CreatedAt != "" {
+		t.Errorf("CreatedAt: got %q, want empty string", c.CreatedAt)
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaske7/readit",
-  "version": "0.2.1",
+  "version": "0.3.0-rc.0",
   "description": "A CLI tool to review Markdown documents with inline comments",
   "author": "Jay Shimada <peaske@pm.me>",
   "license": "MIT",

package/src/App.svelte

@@ -15,6 +15,7 @@ import {
   formatComment,
   generatePrompt,
 } from "./lib/export";
+import { fetchOrThrow } from "./lib/fetch-or-throw";
 import { Positions } from "./lib/positions";
 import { matchesBinding, ShortcutActions } from "./lib/shortcut-registry";
 import { AnchorConfidences, type Comment } from "./schema";
@@ -94,7 +95,7 @@ async function addComment(
   setCommentsError(null, filePath);
 
   try {
-    const response = await fetch(
+    const response = await fetchOrThrow(
       `/api/comments?path=${encodeURIComponent(filePath)}`,
       {
         method: "POST",
@@ -106,12 +107,8 @@ async function addComment(
           endOffset,
         }),
       },
+      "Failed to add comment",
     );
-    if (!response.ok) {
-      const body = await response.json().catch(() => null);
-      const detail = body?.error ?? response.statusText;
-      throw new Error(detail);
-    }
     const data = await response.json();
     const current = app.documents.get(filePath)?.comments ?? [];
     setComments(
@@ -140,19 +137,23 @@ async function editComment(filePath: string, id: string, newText: string) {
     filePath,
   );
 
+  setCommentsError(null, filePath);
   try {
-    const response = await fetch(
+    await fetchOrThrow(
       `/api/comments/${id}?path=${encodeURIComponent(filePath)}`,
       {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ comment: trimmed }),
       },
+      "Failed to update comment",
     );
-    if (!response.ok)
-      throw new Error(`Failed to update comment: ${response.statusText}`);
   } catch (err) {
     console.error("Failed to edit comment:", err);
+    setCommentsError(
+      err instanceof Error ? err.message : "Failed to update comment",
+      filePath,
+    );
     setComments(previousComments, filePath);
   }
 }
@@ -166,17 +167,19 @@ async function deleteComment(filePath: string, id: string) {
     filePath,
   );
 
+  setCommentsError(null, filePath);
   try {
-    const response = await fetch(
+    await fetchOrThrow(
       `/api/comments/${id}?path=${encodeURIComponent(filePath)}`,
-      {
-        method: "DELETE",
-      },
+      { method: "DELETE" },
+      "Failed to delete comment",
     );
-    if (!response.ok)
-      throw new Error(`Failed to delete comment: ${response.statusText}`);
   } catch (err) {
     console.error("Failed to delete comment:", err);
+    setCommentsError(
+      err instanceof Error ? err.message : "Failed to delete comment",
+      filePath,
+    );
     setComments(previousComments, filePath);
   }
 }
@@ -187,17 +190,19 @@ async function deleteAllComments(filePath: string) {
 
   setComments([], filePath);
 
+  setCommentsError(null, filePath);
   try {
-    const response = await fetch(
+    await fetchOrThrow(
       `/api/comments?path=${encodeURIComponent(filePath)}`,
-      {
-        method: "DELETE",
-      },
+      { method: "DELETE" },
+      "Failed to delete all comments",
     );
-    if (!response.ok)
-      throw new Error(`Failed to delete all comments: ${response.statusText}`);
   } catch (err) {
     console.error("Failed to delete all comments:", err);
+    setCommentsError(
+      err instanceof Error ? err.message : "Failed to delete all comments",
+      filePath,
+    );
     setComments(previousComments, filePath);
   }
 }
@@ -227,17 +232,17 @@ async function reanchorComment(
     filePath,
   );
 
+  setCommentsError(null, filePath);
   try {
-    const response = await fetch(
+    const response = await fetchOrThrow(
       `/api/comments/${id}/reanchor?path=${encodeURIComponent(filePath)}`,
       {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ selectedText, startOffset, endOffset }),
       },
+      "Failed to re-anchor comment",
     );
-    if (!response.ok)
-      throw new Error(`Failed to re-anchor comment: ${response.statusText}`);
     const data = await response.json();
     const current = app.documents.get(filePath)?.comments ?? [];
     setComments(
@@ -246,6 +251,10 @@ async function reanchorComment(
     );
   } catch (err) {
     console.error("Failed to re-anchor comment:", err);
+    setCommentsError(
+      err instanceof Error ? err.message : "Failed to re-anchor comment",
+      filePath,
+    );
     setComments(previousComments, filePath);
   }
 }

package/src/components/DocumentViewer.svelte

@@ -9,6 +9,7 @@ import type { Positions } from "../lib/positions";
 import { cn } from "../lib/utils";
 import { AnchorConfidences, type Comment, FontFamilies } from "../schema";
 import { settings } from "../stores/settings.svelte";
+import MermaidEnhancer from "./MermaidEnhancer.svelte";
 
 let {
   content,
@@ -40,10 +41,11 @@ let {
   positions: Positions;
 } = $props();
 
-let contentEl: HTMLElement | undefined;
+let contentEl: HTMLElement | undefined = $state();
 let containerEl: HTMLDivElement | undefined = $state();
 let adapter: Highlighter | null = null;
 let renderedContent = "";
+let contentVersion = $state(0);
 
 let proseClass = $derived(
   settings.fontFamily === FontFamilies.SANS_SERIF
@@ -74,10 +76,13 @@ async function hydrateMermaid(root: HTMLElement) {
           );
           const wrapper = document.createElement("div");
           wrapper.className = "mermaid-container";
+          wrapper.dataset.mermaidSource = encodeURIComponent(code);
+          // eslint-disable-next-line -- trusted mermaid render output
           wrapper.innerHTML = svg;
           preEl.replaceWith(wrapper);
         } catch {}
       }
+      contentVersion++;
       if (isActive) requestAnimationFrame(() => positions.cache());
     } catch {}
   });
@@ -132,6 +137,7 @@ onMount(() => {
   }
 
   renderedContent = content;
+  contentVersion++;
 
   void hydrateMermaid(contentEl!);
 
@@ -209,6 +215,7 @@ $effect(() => {
   if (renderedContent !== content) {
     contentEl.innerHTML = content; // eslint-disable-line -- trusted server content
     renderedContent = content;
+    contentVersion++;
     void hydrateMermaid(contentEl);
   }
 });
@@ -216,3 +223,11 @@ $effect(() => {
 
 <div bind:this={containerEl} class="flex-1 min-w-0">
 </div>
+
+<MermaidEnhancer
+  root={contentEl}
+  {contentVersion}
+  notifyContentChanged={() => {
+    if (isActive) requestAnimationFrame(() => positions.cache());
+  }}
+/>

package/src/components/MermaidEnhancer.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+import { Code2, Image as ImageIcon, Maximize2 } from "lucide-svelte";
+import { mount, unmount } from "svelte";
+import { localeState, t } from "../stores/locale.svelte";
+import MermaidModal from "./MermaidModal.svelte";
+
+interface Props {
+  /** The article element that contains all rendered mermaid containers. */
+  root: HTMLElement | undefined;
+  /** Bumped whenever document content is re-rendered (rescan triggers). */
+  contentVersion: number;
+  /** Called after an inline toggle so margin notes / positions can recache. */
+  notifyContentChanged?: () => void;
+}
+
+let { root, contentVersion, notifyContentChanged }: Props = $props();
+
+let modalOpen = $state(false);
+let modalSvg = $state("");
+let modalSource = $state("");
+
+const ENHANCED_FLAG = "readitMermaidEnhanced";
+
+function decodeSource(container: HTMLElement): string {
+  const encoded = container.dataset.mermaidSource ?? "";
+  try {
+    return decodeURIComponent(encoded);
+  } catch {
+    return encoded;
+  }
+}
+
+function openModal(container: HTMLElement) {
+  const svgEl = container.querySelector("svg");
+  modalSvg = svgEl ? svgEl.outerHTML : "";
+  modalSource = decodeSource(container);
+  modalOpen = true;
+}
+
+function ensureSourceView(container: HTMLElement, source: string): HTMLElement {
+  let pre = container.querySelector<HTMLElement>(".mermaid-source-view");
+  if (pre) return pre;
+  pre = document.createElement("pre");
+  pre.className = "mermaid-source-view";
+  const codeEl = document.createElement("code");
+  codeEl.className = "language-mermaid";
+  codeEl.textContent = source;
+  pre.appendChild(codeEl);
+  pre.style.display = "none";
+  // Insert before the toolbar so the toolbar stays the last child.
+  const toolbar = container.querySelector(".mermaid-toolbar");
+  container.insertBefore(pre, toolbar);
+  return pre;
+}
+
+function toggleInline(container: HTMLElement, source: string): void {
+  const svg = container.querySelector<SVGElement>("svg");
+  const pre = ensureSourceView(container, source);
+  const showingCode = container.dataset.mermaidView === "code";
+  const next = showingCode ? "graph" : "code";
+
+  if (svg) svg.style.display = next === "code" ? "none" : "";
+  pre.style.display = next === "code" ? "block" : "none";
+  container.dataset.mermaidView = next;
+
+  const toolbar = container.querySelector<HTMLElement>(".mermaid-toolbar");
+  const toggleBtn = toolbar?.querySelector<HTMLButtonElement>(
+    '[data-action="toggle"]',
+  );
+  toggleBtn?.setAttribute(
+    "aria-label",
+    next === "code" ? t("mermaid.showDiagram") : t("mermaid.showSource"),
+  );
+  toggleBtn?.setAttribute("aria-pressed", next === "code" ? "true" : "false");
+
+  const handle = (
+    toolbar as (HTMLElement & { _readitHandle?: ToolbarHandle }) | null
+  )?._readitHandle;
+  handle?.remountToggleIcon(next);
+
+  notifyContentChanged?.();
+}
+
+interface ToolbarHandle {
+  cleanup: () => void;
+  remountToggleIcon: (view: "graph" | "code") => void;
+}
+
+function mountToggleIcon(target: HTMLElement, view: "graph" | "code") {
+  // Show "code" icon when graph is visible (click to see code), and vice versa.
+  const Icon = view === "graph" ? Code2 : ImageIcon;
+  return mount(Icon, { target, props: { size: 14 } });
+}
+
+function buildToolbar(container: HTMLElement): HTMLElement {
+  const toolbar = document.createElement("div");
+  toolbar.className = "mermaid-toolbar";
+  toolbar.setAttribute("contenteditable", "false");
+
+  const toggleBtn = document.createElement("button");
+  toggleBtn.type = "button";
+  toggleBtn.dataset.action = "toggle";
+  toggleBtn.setAttribute("aria-label", t("mermaid.showSource"));
+  toggleBtn.setAttribute("aria-pressed", "false");
+
+  const expandBtn = document.createElement("button");
+  expandBtn.type = "button";
+  expandBtn.dataset.action = "expand";
+  expandBtn.setAttribute("aria-label", t("mermaid.expand"));
+
+  toolbar.appendChild(toggleBtn);
+  toolbar.appendChild(expandBtn);
+
+  let toggleIcon = mountToggleIcon(toggleBtn, "graph");
+  const expandIcon = mount(Maximize2, {
+    target: expandBtn,
+    props: { size: 14 },
+  });
+
+  toggleBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleInline(container, decodeSource(container));
+  });
+
+  expandBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    openModal(container);
+  });
+
+  const handle: ToolbarHandle = {
+    cleanup: () => {
+      void unmount(toggleIcon);
+      void unmount(expandIcon);
+    },
+    remountToggleIcon: (view) => {
+      void unmount(toggleIcon);
+      toggleIcon = mountToggleIcon(toggleBtn, view);
+    },
+  };
+  (toolbar as HTMLElement & { _readitHandle?: ToolbarHandle })._readitHandle =
+    handle;
+
+  return toolbar;
+}
+
+function enhance(target: HTMLElement) {
+  const containers = target.querySelectorAll<HTMLElement>(
+    ".mermaid-container[data-mermaid-source]",
+  );
+
+  for (const container of containers) {
+    if (container.dataset[ENHANCED_FLAG] === "true") continue;
+    container.dataset[ENHANCED_FLAG] = "true";
+
+    // Ensure the container can host the absolutely-positioned toolbar.
+    container.style.position = "relative";
+
+    const toolbar = buildToolbar(container);
+    container.appendChild(toolbar);
+  }
+}
+
+function cleanup(target: HTMLElement) {
+  const toolbars = target.querySelectorAll<HTMLElement>(".mermaid-toolbar");
+  for (const tb of toolbars) {
+    (
+      tb as HTMLElement & { _readitHandle?: ToolbarHandle }
+    )._readitHandle?.cleanup();
+    tb.remove();
+  }
+  const enhanced = target.querySelectorAll<HTMLElement>(
+    ".mermaid-container[data-readit-mermaid-enhanced]",
+  );
+  for (const c of enhanced) {
+    delete c.dataset[ENHANCED_FLAG];
+  }
+}
+
+$effect(() => {
+  if (!root) return;
+  // Re-scan whenever contentVersion changes; declared so Svelte tracks it.
+  void contentVersion;
+  enhance(root);
+  return () => {
+    if (root) cleanup(root);
+  };
+});
+
+// Refresh aria-labels on existing imperative toolbars when locale changes.
+$effect(() => {
+  if (!root) return;
+  void localeState.locale;
+  const toolbars = root.querySelectorAll<HTMLElement>(".mermaid-toolbar");
+  for (const tb of toolbars) {
+    const container = tb.closest<HTMLElement>(".mermaid-container");
+    const showingCode = container?.dataset.mermaidView === "code";
+    tb.querySelector<HTMLButtonElement>('[data-action="toggle"]')?.setAttribute(
+      "aria-label",
+      showingCode ? t("mermaid.showDiagram") : t("mermaid.showSource"),
+    );
+    tb.querySelector<HTMLButtonElement>('[data-action="expand"]')?.setAttribute(
+      "aria-label",
+      t("mermaid.expand"),
+    );
+  }
+});
+</script>
+
+<MermaidModal
+  bind:open={modalOpen}
+  svg={modalSvg}
+  source={modalSource}
+  onclose={() => {
+    modalOpen = false;
+  }}
+/>

package/src/components/MermaidModal.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { Code2, Image as ImageIcon } from "lucide-svelte";
+import { t } from "../stores/locale.svelte";
+import Dialog from "./ui/Dialog.svelte";
+
+interface Props {
+  open: boolean;
+  svg: string;
+  source: string;
+  onclose: () => void;
+}
+
+let { open = $bindable(false), svg, source, onclose }: Props = $props();
+
+type View = "graph" | "code";
+let view = $state<View>("graph");
+
+// Reset to graph view each time the modal opens so the user always
+// lands on the diagram first.
+$effect(() => {
+  if (open) view = "graph";
+});
+</script>
+
+<Dialog
+  bind:open
+  {onclose}
+  contentClass="w-[90vw] h-[90vh] max-w-[90vw]"
+>
+  {#snippet header()}
+    {t("mermaid.modalTitle")}
+  {/snippet}
+
+  {#snippet headerActions()}
+    <div class="flex items-center gap-1 mr-8">
+      <button
+        type="button"
+        onclick={() => (view = "graph")}
+        aria-pressed={view === "graph"}
+        class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 aria-pressed:bg-zinc-100 dark:aria-pressed:bg-zinc-800 aria-pressed:text-zinc-900 dark:aria-pressed:text-zinc-100"
+      >
+        <ImageIcon class="w-3.5 h-3.5" />
+        {t("mermaid.viewGraph")}
+      </button>
+      <button
+        type="button"
+        onclick={() => (view = "code")}
+        aria-pressed={view === "code"}
+        class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 aria-pressed:bg-zinc-100 dark:aria-pressed:bg-zinc-800 aria-pressed:text-zinc-900 dark:aria-pressed:text-zinc-100"
+      >
+        <Code2 class="w-3.5 h-3.5" />
+        {t("mermaid.viewCode")}
+      </button>
+    </div>
+  {/snippet}
+
+  <div class="w-full h-full overflow-auto flex items-center justify-center">
+    {#if view === "graph"}
+      <!-- eslint-disable-next-line -- trusted mermaid render output -->
+      <div class="mermaid-container mermaid-modal-graph">{@html svg}</div>
+    {:else}
+      <pre
+        class="w-full h-full m-0 p-4 text-xs leading-relaxed font-mono text-zinc-800 dark:text-zinc-200 bg-zinc-50 dark:bg-zinc-950 rounded-lg overflow-auto whitespace-pre"
+      >{source}</pre>
+    {/if}
+  </div>
+</Dialog>

package/src/index.css

@@ -734,6 +734,111 @@ html {
   }
 }
 
+/* Interactive toolbar (hover-revealed) */
+.mermaid-toolbar {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(228, 228, 231, 0.6);
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.dark .mermaid-toolbar {
+  background: rgba(24, 24, 27, 0.85);
+  border-color: rgba(63, 63, 70, 0.6);
+}
+
+.mermaid-container:hover .mermaid-toolbar,
+.mermaid-toolbar:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mermaid-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.375rem;
+  color: rgb(82, 82, 91);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition:
+    background 120ms ease-out,
+    color 120ms ease-out;
+}
+
+.mermaid-toolbar button:hover {
+  background: rgba(228, 228, 231, 0.8);
+  color: rgb(24, 24, 27);
+}
+
+.dark .mermaid-toolbar button {
+  color: rgb(161, 161, 170);
+}
+
+.dark .mermaid-toolbar button:hover {
+  background: rgba(63, 63, 70, 0.8);
+  color: rgb(244, 244, 245);
+}
+
+/* Inline source view shown when toggled to code mode */
+.mermaid-source-view {
+  margin: 0;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background: rgb(244, 244, 245);
+  color: rgb(39, 39, 42);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  overflow: auto;
+  white-space: pre;
+}
+
+.dark .mermaid-source-view {
+  background: rgb(24, 24, 27);
+  color: rgb(228, 228, 231);
+}
+
+.mermaid-source-view code {
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* Modal-mode mermaid graph — let it scale up */
+.mermaid-modal-graph {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mermaid-modal-graph > svg {
+  max-width: 100%;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
+}
+
 /* ========================================
    Floating TOC Panel
    ======================================== */

package/src/lib/comment-storage.test.ts

@@ -328,13 +328,14 @@ describe("serializeComments", () => {
           selectedText: "selected text",
           comment: "My comment",
           lineHint: "L42",
+          createdAt: "2026-05-09T00:00:00Z",
           startOffset: 100,
           endOffset: 113,
         },
       ],
     };
     const result = serializeComments(file);
-    expect(result).toContain("<!-- c:12345678|L42 -->");
+    expect(result).toContain("<!-- c:12345678|L42|2026-05-09T00:00:00Z -->");
     expect(result).toContain("> selected text");
     expect(result).toContain("My comment");
   });
@@ -591,6 +592,67 @@ describe("truncateSelection", () => {
   });
 });
 
+describe("parseCommentFile cross-runtime format", () => {
+  it("parses 2-field marker (legacy TS-written files)", () => {
+    const content = `---
+source: /test.md
+hash: abc
+version: 1
+---
+
+<!-- c:abcd1234|L5 -->
+> selected text
+some comment
+
+---
+`;
+    const parsed = parseCommentFile(content);
+    expect(parsed.comments).toHaveLength(1);
+    expect(parsed.comments[0].id).toBe("abcd1234");
+    expect(parsed.comments[0].lineHint).toBe("L5");
+    expect(parsed.comments[0].createdAt).toBeUndefined();
+  });
+
+  it("parses 3-field marker (Go-written files)", () => {
+    const content = `---
+source: /test.md
+hash: abc
+version: 1
+---
+
+<!-- c:abcd1234|L5|2026-05-09T12:34:56.789Z -->
+> selected text
+some comment
+
+---
+`;
+    const parsed = parseCommentFile(content);
+    expect(parsed.comments).toHaveLength(1);
+    expect(parsed.comments[0].createdAt).toBe("2026-05-09T12:34:56.789Z");
+  });
+
+  it("serializeComments writes 3-field marker", () => {
+    const file: CommentFile = {
+      source: "/test.md",
+      hash: "abc",
+      version: 1,
+      comments: [
+        {
+          id: "abcd1234",
+          selectedText: "selected",
+          comment: "body",
+          lineHint: "L1",
+          createdAt: "2026-05-09T00:00:00Z",
+          startOffset: 0,
+          endOffset: 8,
+        },
+      ],
+    };
+    const serialized = serializeComments(file);
+    expect(serialized).toContain("<!-- c:abcd1234|L1|2026-05-09T00:00:00Z -->");
+  });
+});
+
 describe("parseCommentFile version check", () => {
   it("accepts current version", () => {
     const content = `---

package/src/lib/comment-storage.ts

@@ -116,13 +116,14 @@ export function parseCommentFile(content: string): CommentFile {
 
 function parseCommentBlock(block: string): Comment | undefined {
   const metadataMatch = block.match(
-    /<!--\s*c:([^|]+)\|([^|>\s]+)(?:\|[^>]*)?\s*-->/,
+    /<!--\s*c:([^|]+)\|([^|>\s]+)(?:\|([^>]*))?\s*-->/,
   );
   if (!metadataMatch) {
     return undefined;
   }
 
-  const [, id, lineHint] = metadataMatch;
+  const [, id, lineHint, createdAtRaw] = metadataMatch;
+  const createdAt = createdAtRaw?.trim() || undefined;
 
   const anchorMatch = block.match(/<!--\s*anchor:(.+?)\s*-->/);
   const anchorPrefix = anchorMatch ? anchorMatch[1] : undefined;
@@ -147,6 +148,7 @@ function parseCommentBlock(block: string): Comment | undefined {
     selectedText,
     comment: commentBody,
     lineHint,
+    createdAt,
     anchorPrefix,
     startOffset: 0,
     endOffset: 0,
@@ -177,7 +179,8 @@ function serializeComment(comment: Comment): string {
   const lines: string[] = [];
 
   const lineHint = comment.lineHint || "L0";
-  lines.push(`<!-- c:${comment.id}|${lineHint} -->`);
+  const createdAt = comment.createdAt || new Date().toISOString();
+  lines.push(`<!-- c:${comment.id}|${lineHint}|${createdAt} -->`);
 
   if (comment.anchorPrefix) {
     lines.push(`<!-- anchor:${comment.anchorPrefix} -->`);
@@ -215,6 +218,7 @@ export function createComment(
     startOffset,
     endOffset,
     lineHint,
+    createdAt: new Date().toISOString(),
     anchorPrefix: needsTruncation
       ? selectedText.slice(0, ANCHOR_PREFIX_LENGTH)
       : undefined,

package/src/lib/fetch-or-throw.test.ts

@@ -0,0 +1,59 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fetchOrThrow } from "./fetch-or-throw";
+
+function mockFetch(response: Response) {
+  return vi.spyOn(globalThis, "fetch").mockResolvedValue(response);
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("fetchOrThrow", () => {
+  it("returns response on 2xx", async () => {
+    mockFetch(new Response("ok", { status: 200 }));
+    const res = await fetchOrThrow("/api", {}, "fallback");
+    expect(res.ok).toBe(true);
+  });
+
+  it("throws body.error when response is not ok and body has error field", async () => {
+    mockFetch(
+      new Response(JSON.stringify({ error: "EACCES: permission denied" }), {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    await expect(fetchOrThrow("/api", {}, "fallback")).rejects.toThrow(
+      "EACCES: permission denied",
+    );
+  });
+
+  it("falls back to statusText when body is not JSON", async () => {
+    mockFetch(
+      new Response("not json", { status: 500, statusText: "Server Error" }),
+    );
+    await expect(fetchOrThrow("/api", {}, "fallback")).rejects.toThrow(
+      "Server Error",
+    );
+  });
+
+  it("falls back to fallback message when statusText is empty", async () => {
+    mockFetch(new Response("", { status: 500, statusText: "" }));
+    await expect(fetchOrThrow("/api", {}, "fallback message")).rejects.toThrow(
+      "fallback message",
+    );
+  });
+
+  it("falls back to statusText when body is JSON but lacks error field", async () => {
+    mockFetch(
+      new Response(JSON.stringify({ ok: false }), {
+        status: 500,
+        statusText: "Internal Error",
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    await expect(fetchOrThrow("/api", {}, "fallback")).rejects.toThrow(
+      "Internal Error",
+    );
+  });
+});

package/src/lib/fetch-or-throw.ts

@@ -0,0 +1,12 @@
+export async function fetchOrThrow(
+  url: string,
+  init: RequestInit,
+  fallback: string,
+): Promise<Response> {
+  const response = await fetch(url, init);
+  if (!response.ok) {
+    const body = await response.json().catch(() => null);
+    throw new Error(body?.error || response.statusText || fallback);
+  }
+  return response;
+}

package/src/lib/i18n/en.ts

@@ -113,4 +113,12 @@ export const en: Translations = {
     "Copy selected text with context for LLM",
   "shortcut.clearSelection.label": "Clear Selection",
   "shortcut.clearSelection.description": "Clear text selection",
+
+  // Mermaid diagram
+  "mermaid.modalTitle": "Mermaid diagram",
+  "mermaid.viewGraph": "Graph",
+  "mermaid.viewCode": "Code",
+  "mermaid.showSource": "Show source",
+  "mermaid.showDiagram": "Show diagram",
+  "mermaid.expand": "Expand diagram",
 };

package/src/lib/i18n/ja.ts

@@ -115,4 +115,12 @@ export const ja: Translations = {
     "選択テキストをLLMコンテキスト付きでコピー",
   "shortcut.clearSelection.label": "選択を解除",
   "shortcut.clearSelection.description": "テキスト選択を解除",
+
+  // Mermaid diagram
+  "mermaid.modalTitle": "Mermaid ダイアグラム",
+  "mermaid.viewGraph": "図",
+  "mermaid.viewCode": "コード",
+  "mermaid.showSource": "ソースを表示",
+  "mermaid.showDiagram": "図を表示",
+  "mermaid.expand": "拡大表示",
 };

package/src/lib/i18n/types.ts

@@ -117,6 +117,14 @@ export interface Translations {
   "shortcut.copySelectionLLM.description": string;
   "shortcut.clearSelection.label": string;
   "shortcut.clearSelection.description": string;
+
+  // Mermaid diagram
+  "mermaid.modalTitle": string;
+  "mermaid.viewGraph": string;
+  "mermaid.viewCode": string;
+  "mermaid.showSource": string;
+  "mermaid.showDiagram": string;
+  "mermaid.expand": string;
 }
 
 export type TranslationKey = keyof Translations;

package/src/lib/key-lock.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from "vitest";
+import { createKeyLock } from "./key-lock";
+
+function deferred<T>(): {
+  promise: Promise<T>;
+  resolve: (v: T) => void;
+  reject: (e: unknown) => void;
+} {
+  let resolve!: (v: T) => void;
+  let reject!: (e: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+describe("createKeyLock", () => {
+  it("serializes operations on the same key", async () => {
+    const withLock = createKeyLock("serial");
+    const order: number[] = [];
+    const a = deferred<void>();
+    const b = deferred<void>();
+
+    const p1 = withLock("k", async () => {
+      await a.promise;
+      order.push(1);
+    });
+    const p2 = withLock("k", async () => {
+      await b.promise;
+      order.push(2);
+    });
+
+    // p2 must NOT have started yet because p1 hasn't resolved
+    b.resolve();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(order).toEqual([]);
+
+    a.resolve();
+    await p1;
+    await p2;
+    expect(order).toEqual([1, 2]);
+  });
+
+  it("runs different keys concurrently", async () => {
+    const withLock = createKeyLock("concurrent");
+    const order: string[] = [];
+    const a = deferred<void>();
+
+    const p1 = withLock("alpha", async () => {
+      await a.promise;
+      order.push("alpha");
+    });
+    const p2 = withLock("beta", async () => {
+      order.push("beta");
+    });
+
+    await p2;
+    expect(order).toEqual(["beta"]);
+
+    a.resolve();
+    await p1;
+    expect(order).toEqual(["beta", "alpha"]);
+  });
+
+  it("survives a thrown error in a previous holder", async () => {
+    const withLock = createKeyLock("error-recovery");
+    const p1 = withLock("k", async () => {
+      throw new Error("boom");
+    });
+    await expect(p1).rejects.toThrow("boom");
+
+    const p2 = withLock("k", async () => 42);
+    await expect(p2).resolves.toBe(42);
+  });
+
+  it("preserves resolved return values", async () => {
+    const withLock = createKeyLock("return-value");
+    const v = await withLock("k", async () => "value");
+    expect(v).toBe("value");
+  });
+
+  it("namespaces are independent", async () => {
+    const a = createKeyLock("ns-a");
+    const b = createKeyLock("ns-b");
+    const order: string[] = [];
+    const block = deferred<void>();
+
+    const pa = a("shared-key", async () => {
+      await block.promise;
+      order.push("a");
+    });
+    const pb = b("shared-key", async () => {
+      order.push("b");
+    });
+
+    await pb;
+    expect(order).toEqual(["b"]);
+    block.resolve();
+    await pa;
+    expect(order).toEqual(["b", "a"]);
+  });
+});

package/src/lib/key-lock.ts

@@ -0,0 +1,23 @@
+const locks = new Map<string, Map<string, Promise<unknown>>>();
+
+function namespace(name: string): Map<string, Promise<unknown>> {
+  let n = locks.get(name);
+  if (!n) {
+    n = new Map();
+    locks.set(name, n);
+  }
+  return n;
+}
+
+export function createKeyLock(name: string) {
+  const map = namespace(name);
+  return function withLock<T>(key: string, fn: () => Promise<T>): Promise<T> {
+    const prev = map.get(key) ?? Promise.resolve();
+    const next = prev.catch(() => {}).then(fn);
+    map.set(
+      key,
+      next.catch(() => {}),
+    );
+    return next;
+  };
+}

package/src/lib/markdown-renderer.ts

@@ -150,8 +150,9 @@ async function replaceMermaidBlocks(html: string): Promise<string> {
   for (let i = matches.length - 1; i >= 0; i--) {
     const svg = svgs[i];
     if (svg !== null) {
-      const { fullMatch, index } = matches[i];
-      const replacement = `<div class="mermaid-container">${svg}</div>`;
+      const { fullMatch, index, code } = matches[i];
+      const encodedSource = encodeURIComponent(code);
+      const replacement = `<div class="mermaid-container" data-mermaid-source="${encodedSource}">${svg}</div>`;
       html =
         html.slice(0, index) +
         replacement +

package/src/server.ts

@@ -15,6 +15,7 @@ import {
 } 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";
@@ -61,20 +62,7 @@ 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;
-}
+const withCommentLock = createKeyLock("comments");
 
 async function canonicalPath(filePath: string): Promise<string> {
   return fs.realpath(path.resolve(filePath));
@@ -261,6 +249,15 @@ 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>;
@@ -323,8 +320,7 @@ async function addComment(ctx: RouteContext, req: Request): Promise<Response> {
     return json({ comment: newComment }, 201);
   } catch (err) {
     console.error("Failed to add comment:", err);
-    const detail = err instanceof Error ? err.message : String(err);
-    return errorResponse(`Failed to add comment: ${detail}`, 500);
+    return errorWithDetail("Failed to add comment", err);
   }
 }
 
@@ -359,7 +355,7 @@ async function updateComment(
     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);
   }
 }
 
@@ -389,7 +385,7 @@ async function deleteComment(ctx: RouteContext, id: string): Promise<Response> {
     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);
   }
 }
 
@@ -399,7 +395,7 @@ async function clearComments(ctx: RouteContext): Promise<Response> {
     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);
   }
 }
 
@@ -461,7 +457,7 @@ async function reanchorComment(
     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);
   }
 }