@levistudio/redline 0.1.0 → 0.3.0

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/render.ts

@@ -3,8 +3,9 @@ import {
   highlightText as _highlightText,
   preserveScroll as _preserveScroll,
   latestVerdict,
+  isEscalated,
 } from "./lib";
-import { state, apiFetch, showError } from "./state";
+import { state, apiFetch, showError, reportMutationFailure } from "./state";
 import {
   buildCommentCard,
   captureTypingState,
@@ -171,7 +172,7 @@ export async function saveComment(
       showError(data.error || "Failed to save comment");
     }
   } catch (err: unknown) {
-    showError("Failed to save comment: " + (err as Error).message);
+    reportMutationFailure("Failed to save comment", err);
   }
 }
 
@@ -195,7 +196,7 @@ export async function submitReply(id: string, message: string): Promise<void> {
       showError(data.error || "Failed to save reply");
     }
   } catch (err: unknown) {
-    showError("Failed to save reply: " + (err as Error).message);
+    reportMutationFailure("Failed to save reply", err);
   }
 }
 
@@ -220,7 +221,7 @@ export async function resolveComment(id: string): Promise<void> {
       showError(data.error || "Failed to resolve comment");
     }
   } catch (err: unknown) {
-    showError("Failed to resolve: " + (err as Error).message);
+    reportMutationFailure("Failed to resolve", err);
   }
 }
 
@@ -240,7 +241,7 @@ export async function reopenComment(id: string): Promise<void> {
       showError(data.error || "Failed to reopen comment");
     }
   } catch (err: unknown) {
-    showError("Failed to reopen: " + (err as Error).message);
+    reportMutationFailure("Failed to reopen", err);
   }
 }
 
@@ -345,6 +346,17 @@ export function applyRoundState(): void {
           bannerText = `${reviseCount} of ${total} comments imply edits.`;
         }
         banner.textContent = bannerText;
+        // Escalations are orthogonal to the revise/accept verdict — a comment
+        // can be answered in-thread yet still need the launching agent. Call
+        // it out on its own line so it survives all three banner branches.
+        const escCount = state.comments.filter(isEscalated).length;
+        if (escCount > 0) {
+          const escLine = document.createElement("div");
+          escLine.className = "banner-escalation";
+          escLine.textContent =
+            `↑ ${escCount} comment${escCount !== 1 ? "s" : ""} escalated to the launching agent.`;
+          banner.appendChild(escLine);
+        }
         banner.style.display = "block";
       }
 

package/src/client/selection.ts

@@ -197,7 +197,7 @@ export function initSelectionHandlers(): void {
 
       const captured = captureSelection(sel, text);
       if (!captured) {
-        showError("Highlight a single passage \u2014 selections that cross images or sections can't be anchored.");
+        showError("Couldn't anchor that selection \u2014 try highlighting the passage again.");
         sel.removeAllRanges();
         return;
       }

package/src/client/sse.ts

@@ -1,4 +1,4 @@
-import { state } from "./state";
+import { state, markSessionEnded } from "./state";
 import {
   renderComments,
   applyHighlights,
@@ -10,6 +10,11 @@ import {
 let sseHasConnectedOnce = false;
 let currentEs: EventSource | null = null;
 let lastEventAt = Date.now();
+// Consecutive failed connection attempts with no successful open in between.
+// A transient blip resolves on the next reconnect (resetting this to 0); a
+// dead server never reconnects, so a sustained run means the server is gone.
+let consecutiveSseErrors = 0;
+const MAX_SSE_ERRORS = 4;
 
 export async function softRefresh({ rehighlight = false } = {}): Promise<void> {
   try {
@@ -53,6 +58,24 @@ export function initSSE(): void {
   document.addEventListener("visibilitychange", onVisibleOrFocus);
   window.addEventListener("focus", onVisibleOrFocus);
 
+  // Tell the server explicitly when this tab is going away, so it can
+  // distinguish a real close from a bare SSE drop (sleep, network blip) and
+  // not abandon a session the user means to keep. `keepalive` lets the POST
+  // survive unload; `pagehide` is more reliable than `beforeunload`. Skip the
+  // bfcache case (e.persisted) — the page may be restored and reconnect.
+  window.addEventListener("pagehide", (e) => {
+    if ((e as PageTransitionEvent).persisted) return;
+    try {
+      fetch("/api/tab-closed", {
+        method: "POST",
+        keepalive: true,
+        headers: { "X-Redline-Token": state.csrfToken },
+      });
+    } catch {
+      /* unload is best-effort */
+    }
+  });
+
   setInterval(() => {
     const banner = document.getElementById("sidebar-status-banner");
     const revising = banner?.classList.contains("revising");
@@ -74,6 +97,7 @@ export function initSSE(): void {
       });
     es.onopen = () => {
       lastEventAt = Date.now();
+      consecutiveSseErrors = 0;
       if (sseHasConnectedOnce) {
         softRefresh({ rehighlight: true });
       }
@@ -173,6 +197,14 @@ export function initSSE(): void {
     es.onerror = () => {
       es.close();
       if (currentEs === es) currentEs = null;
+      consecutiveSseErrors += 1;
+      // A run of failures with no successful open in between means the server
+      // is gone for good (it exited, or restarted on a fresh port this tab
+      // can't reach). Stop the silent retry loop and tell the user.
+      if (consecutiveSseErrors >= MAX_SSE_ERRORS) {
+        markSessionEnded();
+        return;
+      }
       setTimeout(connectEvents, 3000);
     };
   })();

package/src/client/state.ts

@@ -25,6 +25,7 @@ export const state = {
   pendingSelection: null as PendingSelection | null,
   navIdx: 0,
   deliberateScrollUntil: 0,
+  sessionEnded: false,
 };
 
 export type PendingSelection = {
@@ -54,3 +55,24 @@ export function showError(msg: string): void {
   el.style.display = "block";
   setTimeout(() => (el.style.display = "none"), 4000);
 }
+
+// The redline server has exited (session ended, or process killed). This tab
+// can no longer do anything useful — show a persistent banner instead of
+// letting actions fail with a cryptic "Failed to fetch". Idempotent.
+export function markSessionEnded(): void {
+  if (state.sessionEnded) return;
+  state.sessionEnded = true;
+  const el = document.getElementById("session-ended-banner");
+  if (el) el.style.display = "block";
+}
+
+// A fetch network failure (TypeError) on a mutating request means the server
+// is unreachable — treat it as a definitively ended session. A non-network
+// failure (server replied with an error) is shown as a transient toast.
+export function reportMutationFailure(action: string, err: unknown): void {
+  if (err instanceof TypeError) {
+    markSessionEnded();
+  } else {
+    showError(action + ": " + (err as Error).message);
+  }
+}

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 ── */
@@ -492,6 +569,7 @@ mark.rl-highlight.rl-img:hover, mark.rl-highlight.rl-img.active {
   line-height: 1.5;
 }
 .verdict.revise { color: #92400e; }
+.verdict.escalate { color: #5b21b6; }
 
 /* Warm-tinted resolve button when the latest verdict implies an edit */
 .btn-resolve-comment.revise {
@@ -519,6 +597,22 @@ mark.rl-highlight.rl-img:hover, mark.rl-highlight.rl-img.active {
 .verdict-badge.revise { background: #fef3c7; color: #92400e; }
 .verdict-badge.accept { background: #e5e7eb; color: var(--text-muted); }
 
+/* Escalation badge on the quote line — comment routed to the launching agent */
+.escalate-badge {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 6px;
+  padding: 1px 6px;
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-radius: 3px;
+  font-style: normal;
+  background: #ede9fe;
+  color: #5b21b6;
+}
+
 /* Round-level secondary action (under the primary banner button) */
 .round-secondary {
   margin-top: 8px;
@@ -709,6 +803,16 @@ mark.rl-highlight.rl-img:hover, mark.rl-highlight.rl-img.active {
   align-items: center;
   gap: 8px;
 }
+/* Escalation sub-line under the round banner — purple to match the
+   ↑ Escalated comment badges, distinct from the green verdict copy. */
+.banner-escalation {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid #a5d6a7;
+  color: #5b21b6;
+  font-size: 12.5px;
+  font-weight: 600;
+}
 #sidebar-status-banner.revising {
   background: #fff3e0;
   border-bottom-color: #ffb74d;
@@ -821,22 +925,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 +974,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 +1011,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/parseReply.ts

@@ -7,6 +7,7 @@
 // text into the UI. The delimiter form needs no escaping:
 //
 //   REQUIRES_REVISION: <true|false>
+//   ESCALATE: <true|false>   (optional — absent means false)
 //   REASON: <one short sentence, or empty>
 //   ---MESSAGE---
 //   <free-form prose, may contain anything>
@@ -25,6 +26,10 @@ export interface ParsedReply {
   message: string;
   requires_revision: boolean;
   reason: string;
+  // True when the agent flagged the comment for the launching ("outer") agent
+  // — something it couldn't act on from inside the review. Optional in the
+  // envelope; absent means false.
+  escalate: boolean;
 }
 
 function tryDelimiterEnvelope(s: string): ParsedReply | null {
@@ -37,11 +42,13 @@ function tryDelimiterEnvelope(s: string): ParsedReply | null {
 
   const reqMatch = header.match(/REQUIRES_REVISION\s*:\s*(true|false)\b/i);
   const reasonMatch = header.match(/REASON\s*:\s*(.*?)\s*(?:\n|$)/i);
+  const escMatch = header.match(/ESCALATE\s*:\s*(true|false)\b/i);
 
   return {
     message,
     requires_revision: reqMatch ? reqMatch[1].toLowerCase() === "true" : true,
     reason: reasonMatch ? reasonMatch[1].trim() : "",
+    escalate: escMatch ? escMatch[1].toLowerCase() === "true" : false,
   };
 }
 
@@ -93,6 +100,7 @@ export function parseReply(raw: string): ParsedReply {
           message: obj.message.trim(),
           requires_revision: obj.requires_revision !== false, // default true if missing/non-bool
           reason: typeof obj.reason === "string" ? obj.reason.trim() : "",
+          escalate: obj.escalate === true,
         };
       }
     } catch { /* fall through */ }
@@ -111,5 +119,5 @@ export function parseReply(raw: string): ParsedReply {
     if (obj) return obj;
   }
 
-  return { message: trimmed, requires_revision: true, reason: "" };
+  return { message: trimmed, requires_revision: true, reason: "", escalate: false };
 }

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.
  *