@levistudio/redline 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -4,17 +4,23 @@ All notable changes to Redline are documented here. The format follows [Keep a C
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-05-11
+
 ### Added
-- Node-compatible launcher (`bin/redline.cjs`) so `npx @levistudio/redline <file>` works alongside `bunx`.
-- `ROADMAP.md` and this changelog.
+- **Inline diff view** with a header toggle on revised rounds ([#79](https://github.com/alevi/redline/pull/79)). After a revision pass, the document opens with the diff rendered in place — block-level insert/delete bands and word-level marks for modified paragraphs. `Show changes` / `Hide changes` in the header flips between diff and clean view at any time. View choice persists per file in `sessionStorage`.
+- **Markdown rendering in agent thread replies** ([#75](https://github.com/alevi/redline/pull/75)). Agent replies in the sidebar now render `**bold**`, lists, inline `code`, fenced blocks, and links instead of showing raw markdown. Same `marked` + `sanitize-html` pipeline as the document body.
 
 ### Changed
-- Package renamed to scoped `@levistudio/redline` for npm publishing.
-- README rewritten around the AI-doc-review use case.
+- **Doc header decluttered** ([#74](https://github.com/alevi/redline/pull/74)). `Compare with previous` moved out of the header and into the round-badge dropdown (only when there's a prior round to compare against). Filename no longer renders all-caps.
+- **Banner hierarchy fixed** ([#77](https://github.com/alevi/redline/pull/77)). The reviewer's `--context` focus now reads at full document weight with a 3px accent stripe; the first-run safety notice is demoted to a muted inline line with an underlined "Got it" link. Importance now matches behavior: context shapes every reply for the session, the safety notice is once-per-machine.
 
-## [0.1.0] - 2026-05-09
+### Fixed
+- **Selections spanning a heading into a paragraph** ([#78](https://github.com/alevi/redline/pull/78)) are no longer rejected. The browser's `Selection.toString()` emits `\n\n` between blocks; `captureSelection` now normalizes those before searching the document text, and `highlightText` stores the normalized form so the highlight survives re-renders.
+- Block-level deletes in the diff view now render with strikethrough (previously only word-level deletes inside modified paragraphs were struck through) ([#79](https://github.com/alevi/redline/pull/79)).
 
-Initial public release.
+## [0.1.0] - 2026-05-11
+
+Initial public release on npm as `@levistudio/redline`.
 
 ### Added
 - Local review reader (Bun + Hono server, browser UI) for Markdown files.
@@ -25,6 +31,8 @@ Initial public release.
 - Verdict-aware resolve: every agent reply ships with `requires_revision` so the round-level button auto-defaults to **Revise document** or **Accept as-is**.
 - One-shot revision command: `redline resolve <file> [--model <id>]`.
 - `redline-review` skill for outer-agent handoff (Claude Code etc.).
+- Node-compatible launcher (`bin/redline.cjs`) so `npx @levistudio/redline <file>` works alongside `bunx`.
+- `ROADMAP.md` and this changelog.
 - CSRF token on every mutating `/api/*` request.
 - Cross-process file lock around sidecar transactions.
 - `realpath` check on the static-asset route to block symlink escapes.
@@ -33,5 +41,6 @@ Initial public release.
 - Auto-installs missing dependencies on first CLI run.
 - Initial test suite: server, sidecar, parsing, model-picking, rendering, diff, SSE, integration, happy-dom client.
 
-[Unreleased]: https://github.com/alevi/redline/compare/v0.1.0...HEAD
+[Unreleased]: https://github.com/alevi/redline/compare/v0.2.0...HEAD
+[0.2.0]: https://github.com/alevi/redline/releases/tag/v0.2.0
 [0.1.0]: https://github.com/alevi/redline/releases/tag/v0.1.0

package/README.md

@@ -42,7 +42,7 @@ Two long-lived processes:
 
 Review state lives in a sidecar JSON file at `.review/<filename>.json` next to the doc. History snapshots of every revision land in `.review/history/<filename>.<iso>.md` *before* the revision is written, so you can roll back from disk if a revision goes sideways. Both should be gitignored unless you want them in the repo.
 
-After each revision, the browser overlays a side-by-side diff against the previous round so you can read the agent's changes in context. From there you either open another round of comments or click **Looks good** to finish.
+After each revision, the new round opens with the document rendered inline as a diff against the previous round — insert and delete bands at the block level, word-level marks within modified paragraphs — so you can read the agent's changes in place. Use the **Show changes** / **Hide changes** toggle in the header to flip back to the clean view at any time. From there you either open another round of comments or click **Looks good** to finish.
 
 [CLAUDE.md](CLAUDE.md) has the full architecture tour: sidecar schema, SSE event vocabulary, model picking, frontend gotchas.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levistudio/redline",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Inline comments on Markdown files, for human-in-the-loop AI doc review.",
   "keywords": [
     "markdown",

package/src/client/cards.ts

@@ -166,9 +166,10 @@ function buildThreadEntry(entry: ThreadEntry, isLatestVerdict: boolean): HTMLDiv
     const reason = entry.revision_reason ? escapeHtml(entry.revision_reason) : "edit queued";
     verdictHtml = `<div class="verdict revise"><span class="verdict-icon">\u270E</span><span>${reason}</span></div>`;
   }
+  const messageHtml = entry.messageHtml ?? escapeHtml(entry.message);
   div.innerHTML = `
     <div class="thread-role ${role}">${escapeHtml(label)}</div>
-    <div class="thread-message">${escapeHtml(entry.message)}</div>
+    <div class="thread-message">${messageHtml}</div>
     ${verdictHtml}
   `;
   return div;

package/src/client/diff.ts

@@ -1,37 +1,72 @@
 import { apiFetch } from "./state";
-import { state } from "./state";
 import {
-  applyRoundState,
+  applyDiffSwap,
+  diffStateKey,
+  revertDiffSwap,
+  updateToggleButton,
+} from "./diffToggle";
+import {
+  applyHighlights,
+  renderComments,
   triggerRoundAction,
 } from "./render";
 
-export function showRevisionBanner(): void {
-  if (document.getElementById("revision-banner")) return;
-  const banner = document.createElement("div");
-  banner.id = "revision-banner";
-  banner.className = "revision-banner";
-  banner.innerHTML =
-    '<span class="revision-banner-text">Document revised.</span>' +
-    '<button class="revision-banner-link" id="revision-banner-diff">See what changed \u2192</button>' +
-    '<button class="revision-banner-dismiss" aria-label="Dismiss">\u2715</button>';
-  banner.querySelector("#revision-banner-diff")!.addEventListener("click", () => {
-    banner.remove();
-    showDiffOverlay();
-  });
-  banner.querySelector(".revision-banner-dismiss")!.addEventListener("click", () => banner.remove());
-  const prose = document.getElementById("prose")!;
-  prose.parentNode!.insertBefore(banner, prose);
-}
+let originalProseHtml: string | null = null;
+let diffHtmlCache: string | null = null;
 
-async function showDiffOverlay(): Promise<void> {
+async function fetchDiffHtml(): Promise<string | null> {
+  if (diffHtmlCache !== null) return diffHtmlCache;
   const res = await fetch("/api/diff");
   const data = await res.json();
-  if (!data.ok) return;
-  document.getElementById("diff-panel-body")!.innerHTML = data.html;
+  if (!data.ok) return null;
+  diffHtmlCache = data.html as string;
+  return diffHtmlCache;
+}
+
+function syncToggleButton(on: boolean): void {
+  const btn = document.getElementById("btn-toggle-diff") as HTMLButtonElement | null;
+  if (btn) updateToggleButton(btn, on);
+}
+
+export async function enableDiffMode(): Promise<void> {
+  const prose = document.getElementById("prose");
+  if (!prose) return;
+  const html = await fetchDiffHtml();
+  if (html == null) return;
+  const previous = applyDiffSwap(prose, html);
+  if (previous != null) originalProseHtml = previous;
+  syncToggleButton(true);
+  try { sessionStorage.setItem(diffStateKey(window.__REDLINE__.contextTitle), "1"); } catch {}
+  applyHighlights();
+  renderComments();
+}
+
+export function disableDiffMode(): void {
+  const prose = document.getElementById("prose");
+  if (!prose || originalProseHtml == null) return;
+  if (!revertDiffSwap(prose, originalProseHtml)) return;
+  syncToggleButton(false);
+  try { sessionStorage.removeItem(diffStateKey(window.__REDLINE__.contextTitle)); } catch {}
+  applyHighlights();
+  renderComments();
+}
+
+async function toggleDiff(): Promise<void> {
+  const prose = document.getElementById("prose");
+  if (!prose) return;
+  if (prose.dataset.diffMode === "on") disableDiffMode();
+  else await enableDiffMode();
+}
+
+async function showDiffOverlay(): Promise<void> {
+  const html = await fetchDiffHtml();
+  if (html == null) return;
+  document.getElementById("diff-panel-body")!.innerHTML = html;
   document.getElementById("diff-overlay")!.classList.add("open");
 }
 
 export function initDiffHandlers(): void {
+  document.getElementById("btn-toggle-diff")?.addEventListener("click", () => { void toggleDiff(); });
   document.getElementById("btn-compare")?.addEventListener("click", () => showDiffOverlay());
 
   document.getElementById("diff-btn-accept")!.addEventListener("click", async () => {
@@ -40,7 +75,7 @@ export function initDiffHandlers(): void {
     const btnAccept = document.getElementById("btn-accept") as HTMLButtonElement | null;
     if (btnAccept) {
       btnAccept.disabled = true;
-      btnAccept.textContent = "\u2713 Done";
+      btnAccept.textContent = "✓ Done";
     }
     const banner = document.getElementById("sidebar-status-banner");
     if (banner) {

package/src/client/diffToggle.ts

@@ -0,0 +1,32 @@
+// Pure helpers for the inline-diff toggle. Kept in their own module so they
+// can be unit-tested without pulling in render.ts (which expects a populated
+// window.__REDLINE__ at module-load time).
+
+export function diffStateKey(contextTitle: string): string {
+  return "rl-diff-on-" + contextTitle;
+}
+
+export function updateToggleButton(btn: HTMLButtonElement, on: boolean): void {
+  btn.classList.toggle("active", on);
+  btn.setAttribute("aria-pressed", on ? "true" : "false");
+  btn.textContent = on ? "Hide changes" : "Show changes";
+}
+
+// Swap prose contents into diff view. Returns the previous innerHTML so the
+// caller can restore it later, or null if the prose is already in diff mode
+// (we don't want to clobber the saved-original by overwriting it with the
+// diff HTML we just installed).
+export function applyDiffSwap(prose: HTMLElement, diffHtml: string): string | null {
+  if (prose.dataset.diffMode === "on") return null;
+  const previous = prose.innerHTML;
+  prose.innerHTML = diffHtml;
+  prose.dataset.diffMode = "on";
+  return previous;
+}
+
+export function revertDiffSwap(prose: HTMLElement, originalHtml: string): boolean {
+  if (prose.dataset.diffMode !== "on") return false;
+  prose.innerHTML = originalHtml;
+  prose.dataset.diffMode = "off";
+  return true;
+}

package/src/client/lib.ts

@@ -16,6 +16,10 @@ export type ThreadEntry = {
   role?: "human" | "agent";
   name?: string;
   message: string;
+  // Server-rendered sanitized HTML for `message`. Present on entries
+  // delivered through the API/bootstrap; absent on entries the client
+  // builds locally before the next refresh. Falls back to escaped text.
+  messageHtml?: string;
   requires_revision?: boolean;
   revision_reason?: string;
 };
@@ -110,23 +114,29 @@ export function captureSelection(prose: Element, sel: Selection, text: string):
     return { quote: text, context_before: "", context_after: "" };
   }
 
-  const slice = flat.slice(quoteStart, quoteStart + text.length);
-  if (slice !== text) {
-    // Trimming in the caller, or block-boundary newlines that sel.toString()
-    // inserts but our flat-text walker doesn't, can shift the true start a
-    // few chars away from range.startOffset. Search a small window around
-    // quoteStart for the text before giving up.
+  // Block boundaries: sel.toString() inserts "\n\n" between blocks (e.g. a
+  // heading followed by a paragraph), but the text-node walker concatenates
+  // with no separator. Strip those runs from `text` so it can match `flat`.
+  // We keep single \n (which can appear inside a single text node, e.g. a
+  // code block) untouched.
+  const normalized = text.replace(/\n{2,}/g, "");
+
+  const slice = flat.slice(quoteStart, quoteStart + normalized.length);
+  if (slice !== normalized) {
+    // Trimming in the caller can shift the true start a few chars away from
+    // range.startOffset. Search a small window around quoteStart for the
+    // normalized text before giving up.
     const windowStart = Math.max(0, quoteStart - 64);
-    const windowEnd = Math.min(flat.length, quoteStart + text.length + 64);
-    const found = flat.indexOf(text, windowStart);
+    const windowEnd = Math.min(flat.length, quoteStart + normalized.length + 64);
+    const found = flat.indexOf(normalized, windowStart);
     if (found === -1 || found >= windowEnd) return null;
     quoteStart = found;
   }
 
   return {
-    quote: text,
+    quote: normalized,
     context_before: flat.slice(Math.max(0, quoteStart - 32), quoteStart),
-    context_after: flat.slice(quoteStart + text.length, quoteStart + text.length + 32),
+    context_after: flat.slice(quoteStart + normalized.length, quoteStart + normalized.length + 32),
   };
 }
 

package/src/client/main.ts

@@ -16,7 +16,8 @@ import {
 import { state } from "./state";
 import { initSelectionHandlers } from "./selection";
 import { initSSE } from "./sse";
-import { showRevisionBanner, initDiffHandlers } from "./diff";
+import { enableDiffMode, initDiffHandlers } from "./diff";
+import { diffStateKey } from "./diffToggle";
 import { observeCardSizes } from "./cards";
 
 // Wire card callbacks (breaks circular dependency between cards and render)
@@ -89,9 +90,14 @@ positionCards();
 updateNav();
 applyRoundState();
 
-if (sessionStorage.getItem("just-revised")) {
-  sessionStorage.removeItem("just-revised");
-  showRevisionBanner();
+const justRevised = sessionStorage.getItem("just-revised");
+if (justRevised) sessionStorage.removeItem("just-revised");
+const diffPersisted = (() => {
+  try { return sessionStorage.getItem(diffStateKey(window.__REDLINE__.contextTitle)) === "1"; }
+  catch { return false; }
+})();
+if (justRevised || diffPersisted) {
+  void enableDiffMode();
 }
 if (sessionStorage.getItem("rl-no-changes")) {
   sessionStorage.removeItem("rl-no-changes");

package/src/client/styles.css

@@ -58,7 +58,6 @@ body {
   font-weight: 500;
   color: var(--text-muted);
   letter-spacing: 0.02em;
-  text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -110,6 +109,16 @@ body {
 .round-picker-item:hover { background: var(--thread-bg); }
 .round-picker-item.current { font-weight: 600; pointer-events: none; color: var(--text-muted); }
 .round-picker-meta { font-size: 11px; color: var(--text-muted); margin-left: auto; }
+.round-picker-action {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  border-top: 1px solid var(--border);
+  cursor: pointer;
+  font-family: inherit;
+  color: var(--accent);
+}
 
 .btn-resolve {
   background: var(--accent);
@@ -141,6 +150,23 @@ body {
 .btn-accept:hover:not(:disabled) { border-color: #9ca3af; color: #111827; }
 .btn-accept:disabled { opacity: 0.4; cursor: default; }
 
+.btn-toggle-diff {
+  background: white;
+  color: #374151;
+  border: 1.5px solid #d1d5db;
+  padding: 6px 12px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+.btn-toggle-diff:hover { border-color: #9ca3af; color: #111827; }
+.btn-toggle-diff.active {
+  background: #f3f4f6;
+  color: #111827;
+}
+
 .header-actions { display: flex; gap: 8px; align-items: center; }
 
 /* Asymmetric status: hidden when healthy, visible only when the agent process
@@ -475,6 +501,57 @@ mark.rl-highlight.rl-img:hover, mark.rl-highlight.rl-img.active {
   font-size: 13.5px;
   line-height: 1.5;
   color: var(--text);
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+.thread-message > :first-child { margin-top: 0; }
+.thread-message > :last-child { margin-bottom: 0; }
+.thread-message p {
+  margin: 0 0 8px;
+}
+.thread-message ul,
+.thread-message ol {
+  margin: 4px 0 8px;
+  padding-left: 22px;
+}
+.thread-message li { margin: 2px 0; }
+.thread-message li > p { margin: 0; }
+.thread-message code {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 12.5px;
+}
+.thread-message pre {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 8px 10px;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 12.5px;
+  line-height: 1.45;
+  margin: 4px 0 8px;
+}
+.thread-message pre code {
+  background: transparent;
+  padding: 0;
+}
+.thread-message blockquote {
+  margin: 4px 0 8px;
+  padding-left: 10px;
+  border-left: 3px solid var(--border, #ddd);
+  color: var(--text-muted, #666);
+}
+.thread-message h1,
+.thread-message h2,
+.thread-message h3,
+.thread-message h4 {
+  font-size: 13.5px;
+  font-weight: 600;
+  margin: 4px 0;
+}
+.thread-message a {
+  color: var(--accent);
+  text-decoration: underline;
 }
 
 /* ── Verdict footer on agent replies ── */
@@ -821,22 +898,12 @@ mark.rl-highlight.rl-img:hover, mark.rl-highlight.rl-img.active {
 .diff-prose li { margin: 0.3em 0; line-height: 1.7; }
 .diff-block { border-radius: 4px; margin: 2px -12px; padding: 2px 12px; }
 .diff-block-add { background: #e6ffed; border-left: 3px solid #28a745; }
-.diff-block-del { background: #ffeef0; border-left: 3px solid #d73a49; opacity: 0.8; }
+.diff-block-del { background: #ffeef0; border-left: 3px solid #d73a49; opacity: 0.8; text-decoration: line-through; text-decoration-color: #b91c2c; text-decoration-thickness: 1.5px; }
+.diff-block-del a { text-decoration: line-through; }
 .diff-block-mod { background: #fffbe6; border-left: 3px solid #f0ad00; }
 ins.diff-word-add { background: #acf2bd; text-decoration: none; border-radius: 2px; padding: 0 1px; }
 del.diff-word-del { background: #fdb8c0; border-radius: 2px; padding: 0 1px; }
 .diff-no-changes { padding: 24px 0; color: var(--text-muted); }
-.btn-diff-compare {
-  font-size: 12px;
-  padding: 4px 10px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: white;
-  cursor: pointer;
-  color: var(--text-muted);
-  transition: all 0.1s;
-}
-.btn-diff-compare:hover { color: var(--text); border-color: #aaa; }
 .btn-diff-accept {
   background: #2e7d32;
   color: white;
@@ -880,84 +947,34 @@ del.diff-word-del { background: #fdb8c0; border-radius: 2px; padding: 0 1px; }
   opacity: 0.75;
 }
 
-/* ── Revision banner ── */
-.revision-banner {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 14px;
-  background: #eff6ff;
-  border: 1px solid #bfdbfe;
-  border-radius: var(--radius);
-  margin-bottom: 14px;
-  font-size: 13.5px;
-  color: #1e40af;
-}
-.revision-banner-text { flex: 1; }
-.revision-banner-link {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #1d4ed8;
-  font-size: 13.5px;
-  font-weight: 500;
-  padding: 0;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.revision-banner-link:hover { color: #1e40af; }
-.revision-banner-dismiss {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #60a5fa;
-  font-size: 13px;
-  padding: 1px 4px;
-  border-radius: 3px;
-  line-height: 1;
-  opacity: 0.7;
-  flex-shrink: 0;
-}
-.revision-banner-dismiss:hover { opacity: 1; background: rgba(96,165,250,0.15); }
-
-/* ── Context banner ── */
+/* ── Context banner ──
+   Muted left-accent stripe; the styling itself signals "framing for what
+   follows", so we don't need a CONTEXT label or a saturated fill. */
 .context-banner {
   display: flex;
   align-items: flex-start;
   gap: 10px;
-  padding: 9px 14px;
-  background: #fffbeb;
-  border: 1px solid #fde68a;
-  border-radius: var(--radius);
+  padding: 8px 12px 8px 16px;
+  border-left: 3px solid var(--accent);
   margin-bottom: 14px;
-  font-size: 13.5px;
-  color: #78350f;
-  line-height: 1.5;
-}
-.context-label {
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: 10.5px;
-  color: #b45309;
-  white-space: nowrap;
-  padding-top: 2px;
-  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--text);
+  line-height: 1.55;
 }
 .context-text { flex: 1; }
 .context-dismiss {
   background: none;
   border: none;
   cursor: pointer;
-  color: #b45309;
-  font-size: 13px;
+  color: var(--text-muted);
+  font-size: 12px;
   padding: 1px 4px;
   border-radius: 3px;
   line-height: 1;
-  opacity: 0.6;
+  opacity: 0.4;
   flex-shrink: 0;
 }
-.context-dismiss:hover { opacity: 1; background: rgba(180,83,9,0.1); }
+.context-dismiss:hover { opacity: 0.9; background: rgba(0,0,0,0.04); }
 
 /* ── First-run security banner ── */
 /* Visible only on the first run on a given browser. Dismissal sets
@@ -967,28 +984,25 @@ del.diff-word-del { background: #fdb8c0; border-radius: 2px; padding: 0 1px; }
 .first-run-banner[hidden] { display: none; }
 .first-run-banner {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 14px;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: var(--radius);
-  margin-bottom: 14px;
-  font-size: 13px;
-  color: #7f1d1d;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 4px 4px 16px;
+  margin-bottom: 10px;
+  font-size: 11.5px;
+  color: var(--text-muted);
   line-height: 1.5;
+  opacity: 0.75;
 }
-.first-run-icon { font-size: 14px; flex-shrink: 0; }
+.first-run-icon { font-size: 10px; flex-shrink: 0; opacity: 0.6; }
 .first-run-text { flex: 1; }
 .first-run-dismiss {
-  background: white;
-  border: 1px solid #fca5a5;
-  color: #7f1d1d;
+  background: none;
+  border: none;
+  color: var(--text-muted);
   cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  padding: 3px 10px;
-  border-radius: 4px;
+  font-size: 11.5px;
+  padding: 0 4px;
+  text-decoration: underline;
   flex-shrink: 0;
 }
-.first-run-dismiss:hover { background: #fee2e2; }
+.first-run-dismiss:hover { color: var(--text); }

package/src/render.ts

@@ -57,6 +57,15 @@ export function renderMarkdown(content: string): string {
   );
 }
 
+// Render a comment-thread message through the same sanitized markdown
+// pipeline as the document body. Agents reply in markdown (bold, lists,
+// inline code, occasional fenced blocks) and the chat-style rendering in
+// the sidebar previously displayed the raw `**bold**` and `1.` syntax,
+// which looked like the agent had failed to render its own output.
+export function renderMessageMarkdown(content: string): string {
+  return renderMarkdown(content);
+}
+
 /**
  * Locate where a quoted passage starts inside the flat text of a document.
  *

package/src/server-page.ts

@@ -1,5 +1,3 @@
-import type { Comment } from "./sidecar";
-
 function escapeHtml(s: string): string {
   return s
     .replace(/&/g, "&")
@@ -11,7 +9,7 @@ function escapeHtml(s: string): string {
 function pageTemplate(
   title: string,
   content: string,
-  comments: Comment[],
+  comments: unknown[],
   roundResolved: boolean,
   agentRepliedAt: string | null,
   roundNumber: number,
@@ -48,21 +46,20 @@ function pageTemplate(
                 const label = n === totalRounds ? 'Round ' + n + ' — current' : 'Round ' + n;
                 return `<a class="round-picker-item${isCurrent ? ' current' : ''}" href="${href}">${label}</a>`;
               }).join('')
-            }</div>` : ''}
+            }${!readOnly ? `<button class="round-picker-item round-picker-action" id="btn-compare" type="button">Compare with previous →</button>` : ''}</div>` : ''}
           </span>
         </span>
         <div class="header-actions">
           <span id="agent-status" class="agent-status" hidden></span>
           ${noAgent ? `<span class="manual-mode-pill" title="Started with --no-agent. No Claude replies, no revision pass.">Manual mode</span>` : ''}
+          ${!readOnly && totalRounds > 1 ? `<button class="btn-toggle-diff" id="btn-toggle-diff" type="button" aria-pressed="false">Show changes</button>` : ''}
           ${readOnly
             ? `<span style="font-size:13px;color:var(--text-muted);font-style:italic">Read-only — <a href="/" style="color:var(--accent)">back to current</a></span>`
-            : `<button class="btn-accept" id="btn-accept" disabled>Revise document</button>
-               ${totalRounds > 1 ? `<button class="btn-diff-compare" id="btn-compare">Compare with previous</button>` : ''}`
+            : `<button class="btn-accept" id="btn-accept" disabled>Revise document</button>`
           }
         </div>
       </div>
       ${context ? `<div class="context-banner" id="context-banner">
-        <span class="context-label">Context</span>
         <span class="context-text">${escapeHtml(context)}</span>
         <button class="context-dismiss" onclick="dismissContextBanner()" aria-label="Dismiss">✕</button>
       </div>` : ''}

package/src/server.ts

@@ -1,7 +1,7 @@
 import { Hono } from "hono";
 import { readFile, realpath } from "fs/promises";
 import path from "path";
-import { renderMarkdown } from "./render";
+import { renderMarkdown, renderMessageMarkdown } from "./render";
 import { renderDocDiff } from "./diff";
 import { pageTemplate } from "./server-page";
 import {
@@ -13,6 +13,22 @@ import {
   type Comment,
 } from "./sidecar";
 
+// Attach a sanitized HTML rendering of each thread message so the client
+// can show markdown formatting (bold, lists, inline code) instead of the
+// raw source. Done server-side because renderMarkdown depends on marked +
+// sanitize-html which are Node-targeted. The HTML is added as a `messageHtml`
+// field alongside the original `message` so callers that read the source
+// (eg. agent prompt building) are unaffected.
+export function serializeCommentsForClient(comments: Comment[]): unknown[] {
+  return comments.map((c) => ({
+    ...c,
+    thread: c.thread.map((e) => ({
+      ...e,
+      messageHtml: renderMessageMarkdown(e.message),
+    })),
+  }));
+}
+
 // Bundle the client JS once per server lifetime. The build is ~50-100ms — felt
 // only at server startup, not on page loads (the bundle is cached in memory)
 // and not when the source file is re-read. See M10 for the on-disk cache idea.
@@ -239,7 +255,7 @@ export function createServer(
     const agentRepliedAt = latestRound?.agent_replied_at ?? null;
     const roundNumber = latestRound?.round ?? 1;
     const totalRounds = sidecar.rounds.length;
-    return c.html(pageTemplate(fileName, html, comments, roundResolved, agentRepliedAt, roundNumber, totalRounds, sidecar.context, false, csrfToken, opts.noAgent ?? false));
+    return c.html(pageTemplate(fileName, html, serializeCommentsForClient(comments), roundResolved, agentRepliedAt, roundNumber, totalRounds, sidecar.context, false, csrfToken, opts.noAgent ?? false));
   });
 
   // Add a comment to the active round
@@ -482,7 +498,7 @@ export function createServer(
     const sidecar = await loadSidecar(filePath);
     const latestRound = sidecar.rounds[sidecar.rounds.length - 1] ?? null;
     return c.json({
-      comments: latestRound?.comments ?? [],
+      comments: serializeCommentsForClient(latestRound?.comments ?? []),
       roundResolved: latestRound?.resolved_at != null,
       totalRounds: sidecar.rounds.length,
     });
@@ -529,7 +545,7 @@ export function createServer(
     return c.html(pageTemplate(
       fileName,
       html,
-      roundData.comments,
+      serializeCommentsForClient(roundData.comments),
       true,   // treat as resolved (read-only)
       roundData.agent_replied_at ?? null,
       n,