claude-relay 2.2.4 → 2.3.1

package/lib/public/app.js

@@ -1,12 +1,12 @@
-import { copyToClipboard, escapeHtml } from './modules/utils.js';
+import { showToast, copyToClipboard, escapeHtml } from './modules/utils.js';
 import { refreshIcons, iconHtml, randomThinkingVerb } from './modules/icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal } from './modules/markdown.js';
 import { initSidebar, renderSessionList, handleSearchResults, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline } from './modules/sidebar.js';
 import { initRewind, setRewindMode, showRewindModal, clearPendingRewindUuid } from './modules/rewind.js';
 import { initNotifications, showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './modules/notifications.js';
-import { initInput, clearPendingImages, handleInputSync, autoResize } from './modules/input.js';
+import { initInput, clearPendingImages, handleInputSync, autoResize, builtinCommands } from './modules/input.js';
 import { initQrCode } from './modules/qrcode.js';
-import { initFileBrowser, loadRootDirectory, handleFsList, handleFsRead, refreshIfOpen, handleFileChanged, closeFileViewer } from './modules/filebrowser.js';
+import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFsRead, handleDirChanged, refreshIfOpen, handleFileChanged, handleFileHistory, handleGitDiff, handleFileAt, getPendingNavigate, closeFileViewer } from './modules/filebrowser.js';
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermExited, handleTermClosed } from './modules/terminal.js';
 import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools } from './modules/tools.js';
 
@@ -137,7 +137,10 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   });
 
   document.addEventListener("keydown", function (e) {
-    if (e.key === "Escape") closeProjectDropdown();
+    if (e.key === "Escape") {
+      closeProjectDropdown();
+      closeImageModal();
+    }
   });
 
   if (projectHintDismiss) {
@@ -156,6 +159,22 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   });
   $("mermaid-modal").querySelector(".confirm-backdrop").addEventListener("click", closeMermaidModal);
   $("mermaid-modal").querySelector(".mermaid-modal-btn[title='Close']").addEventListener("click", closeMermaidModal);
+  $("image-modal").querySelector(".confirm-backdrop").addEventListener("click", closeImageModal);
+  $("image-modal").querySelector(".image-modal-close").addEventListener("click", closeImageModal);
+
+  function showImageModal(src) {
+    var modal = $("image-modal");
+    var img = $("image-modal-img");
+    if (!modal || !img) return;
+    img.src = src;
+    modal.classList.remove("hidden");
+    refreshIcons(modal);
+  }
+
+  function closeImageModal() {
+    var modal = $("image-modal");
+    if (modal) modal.classList.add("hidden");
+  }
 
   // --- State ---
   var ws = null;
@@ -166,6 +185,8 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   // isComposing -> modules/input.js
   var reconnectTimer = null;
   var reconnectDelay = 1000;
+  var disconnectNotifTimer = null;
+  var disconnectNotifShown = false;
   var activityEl = null;
   var currentMsgEl = null;
   var currentFullText = "";
@@ -657,6 +678,229 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     });
   }
 
+  // --- Status panel ---
+  var statusPanel = $("status-panel");
+  var statusPanelClose = $("status-panel-close");
+  var statusPidEl = $("status-pid");
+  var statusUptimeEl = $("status-uptime");
+  var statusRssEl = $("status-rss");
+  var statusHeapUsedEl = $("status-heap-used");
+  var statusHeapTotalEl = $("status-heap-total");
+  var statusExternalEl = $("status-external");
+  var statusSessionsEl = $("status-sessions");
+  var statusProcessingEl = $("status-processing");
+  var statusClientsEl = $("status-clients");
+  var statusTerminalsEl = $("status-terminals");
+  var statusRefreshTimer = null;
+
+  function formatBytes(n) {
+    if (n >= 1073741824) return (n / 1073741824).toFixed(1) + " GB";
+    if (n >= 1048576) return (n / 1048576).toFixed(1) + " MB";
+    if (n >= 1024) return (n / 1024).toFixed(1) + " KB";
+    return n + " B";
+  }
+
+  function formatUptime(seconds) {
+    var d = Math.floor(seconds / 86400);
+    var h = Math.floor((seconds % 86400) / 3600);
+    var m = Math.floor((seconds % 3600) / 60);
+    var s = Math.floor(seconds % 60);
+    if (d > 0) return d + "d " + h + "h " + m + "m";
+    if (h > 0) return h + "h " + m + "m " + s + "s";
+    return m + "m " + s + "s";
+  }
+
+  function updateStatusPanel(data) {
+    if (!statusPidEl) return;
+    statusPidEl.textContent = String(data.pid);
+    statusUptimeEl.textContent = formatUptime(data.uptime);
+    statusRssEl.textContent = formatBytes(data.memory.rss);
+    statusHeapUsedEl.textContent = formatBytes(data.memory.heapUsed);
+    statusHeapTotalEl.textContent = formatBytes(data.memory.heapTotal);
+    statusExternalEl.textContent = formatBytes(data.memory.external);
+    statusSessionsEl.textContent = String(data.sessions);
+    statusProcessingEl.textContent = String(data.processing);
+    statusClientsEl.textContent = String(data.clients);
+    statusTerminalsEl.textContent = String(data.terminals);
+  }
+
+  function requestProcessStats() {
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "process_stats" }));
+    }
+  }
+
+  function toggleStatusPanel() {
+    if (!statusPanel) return;
+    var opening = statusPanel.classList.contains("hidden");
+    statusPanel.classList.toggle("hidden");
+    if (opening) {
+      requestProcessStats();
+      statusRefreshTimer = setInterval(requestProcessStats, 5000);
+    } else {
+      if (statusRefreshTimer) {
+        clearInterval(statusRefreshTimer);
+        statusRefreshTimer = null;
+      }
+    }
+    refreshIcons();
+  }
+
+  if (statusPanelClose) {
+    statusPanelClose.addEventListener("click", function () {
+      statusPanel.classList.add("hidden");
+      if (statusRefreshTimer) {
+        clearInterval(statusRefreshTimer);
+        statusRefreshTimer = null;
+      }
+    });
+  }
+
+  // --- Context panel ---
+  var contextPanel = $("context-panel");
+  var contextPanelClose = $("context-panel-close");
+  var contextPanelMinimize = $("context-panel-minimize");
+  var contextBarFill = $("context-bar-fill");
+  var contextBarPct = $("context-bar-pct");
+  var contextUsedEl = $("context-used");
+  var contextWindowEl = $("context-window");
+  var contextMaxOutputEl = $("context-max-output");
+  var contextInputEl = $("context-input");
+  var contextOutputEl = $("context-output");
+  var contextCacheReadEl = $("context-cache-read");
+  var contextCacheWriteEl = $("context-cache-write");
+  var contextModelEl = $("context-model");
+  var contextCostEl = $("context-cost");
+  var contextTurnsEl = $("context-turns");
+  var contextMini = $("context-mini");
+  var contextMiniFill = $("context-mini-fill");
+  var contextMiniLabel = $("context-mini-label");
+  var contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+
+  function contextPctClass(pct) {
+    return pct >= 85 ? " danger" : pct >= 60 ? " warn" : "";
+  }
+
+  function updateContextPanel() {
+    if (!contextUsedEl) return;
+    // Context window usage = input tokens (includes cache read/write) + output tokens
+    var used = contextData.input + contextData.output;
+    var win = contextData.contextWindow;
+    var pct = win > 0 ? Math.min(100, (used / win) * 100) : 0;
+    var cls = contextPctClass(pct);
+    // Panel bar
+    contextBarFill.style.width = pct.toFixed(1) + "%";
+    contextBarFill.className = "context-bar-fill" + cls;
+    contextBarPct.textContent = pct.toFixed(0) + "%";
+    // Mini bar
+    if (contextMiniFill) {
+      contextMiniFill.style.width = pct.toFixed(1) + "%";
+      contextMiniFill.className = "context-mini-fill" + cls;
+    }
+    if (contextMiniLabel) {
+      contextMiniLabel.textContent = (win > 0 ? formatTokens(used) + "/" + formatTokens(win) : "0%");
+    }
+    contextUsedEl.textContent = formatTokens(used);
+    contextWindowEl.textContent = win > 0 ? formatTokens(win) : "-";
+    contextMaxOutputEl.textContent = contextData.maxOutputTokens > 0 ? formatTokens(contextData.maxOutputTokens) : "-";
+    contextInputEl.textContent = formatTokens(contextData.input);
+    contextOutputEl.textContent = formatTokens(contextData.output);
+    contextCacheReadEl.textContent = formatTokens(contextData.cacheRead);
+    contextCacheWriteEl.textContent = formatTokens(contextData.cacheWrite);
+    contextModelEl.textContent = contextData.model;
+    contextCostEl.textContent = "$" + contextData.cost.toFixed(4);
+    contextTurnsEl.textContent = String(contextData.turns);
+  }
+
+  function accumulateContext(cost, usage, modelUsage) {
+    if (cost != null) contextData.cost += cost;
+    // Use latest turn values (not cumulative) since each turn's input_tokens
+    // already includes the full conversation context up to that point
+    if (usage) {
+      contextData.input = usage.input_tokens || usage.inputTokens || 0;
+      contextData.output = usage.output_tokens || usage.outputTokens || 0;
+      contextData.cacheRead = usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0;
+      contextData.cacheWrite = usage.cache_creation_input_tokens || usage.cacheCreationInputTokens || 0;
+    }
+    contextData.turns++;
+    if (modelUsage) {
+      var models = Object.keys(modelUsage);
+      if (models.length > 0) {
+        var m = models[0];
+        var mu = modelUsage[m];
+        contextData.model = m;
+        if (mu.contextWindow) contextData.contextWindow = mu.contextWindow;
+        if (mu.maxOutputTokens) contextData.maxOutputTokens = mu.maxOutputTokens;
+      }
+    }
+    updateContextPanel();
+  }
+
+  // contextView: "off" | "mini" | "panel"
+  function getContextView() {
+    try { return localStorage.getItem("claude-relay-context-view") || "off"; } catch (e) { return "off"; }
+  }
+  function setContextView(v) {
+    try { localStorage.setItem("claude-relay-context-view", v); } catch (e) {}
+  }
+
+  function applyContextView(view) {
+    if (contextPanel) contextPanel.classList.toggle("hidden", view !== "panel");
+    if (contextMini) contextMini.classList.toggle("hidden", view !== "mini");
+    if (view === "panel") refreshIcons();
+  }
+
+  function resetContextData() {
+    contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+    updateContextPanel();
+  }
+
+  function resetContext() {
+    resetContextData();
+    // Keep view state, just reset data
+    applyContextView(getContextView());
+  }
+
+  function minimizeContext() {
+    setContextView("mini");
+    applyContextView("mini");
+  }
+
+  function expandContext() {
+    setContextView("panel");
+    applyContextView("panel");
+  }
+
+  function toggleContextPanel() {
+    if (!contextPanel) return;
+    var view = getContextView();
+    if (view === "panel") {
+      setContextView("mini");
+      applyContextView("mini");
+    } else {
+      setContextView("panel");
+      applyContextView("panel");
+    }
+  }
+
+  if (contextPanelClose) {
+    contextPanelClose.addEventListener("click", function () {
+      setContextView("off");
+      applyContextView("off");
+    });
+  }
+
+  if (contextPanelMinimize) {
+    contextPanelMinimize.addEventListener("click", minimizeContext);
+  }
+
+  // Restore context view on load
+  applyContextView(getContextView());
+
+  if (contextMini) {
+    contextMini.addEventListener("click", expandContext);
+  }
+
   function addToMessages(el) {
     if (prependAnchor) messagesEl.insertBefore(el, prependAnchor);
     else messagesEl.appendChild(el);
@@ -732,6 +976,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     div.dataset.turn = ++turnCounter;
     var bubble = document.createElement("div");
     bubble.className = "bubble";
+    bubble.dir = "auto";
 
     if (images && images.length > 0) {
       var imgRow = document.createElement("div");
@@ -740,6 +985,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
         var img = document.createElement("img");
         img.src = "data:" + images[i].mediaType + ";base64," + images[i].data;
         img.className = "bubble-img";
+        img.addEventListener("click", function () { showImageModal(this.src); });
         imgRow.appendChild(img);
       }
       bubble.appendChild(imgRow);
@@ -781,7 +1027,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       currentMsgEl = document.createElement("div");
       currentMsgEl.className = "msg-assistant";
       currentMsgEl.dataset.turn = turnCounter;
-      currentMsgEl.innerHTML = '<div class="md-content"></div>';
+      currentMsgEl.innerHTML = '<div class="md-content" dir="auto"></div>';
       addToMessages(currentMsgEl);
       currentFullText = "";
     }
@@ -894,6 +1140,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     setStatus("connected");
     enableMainInput();
     resetUsage();
+    resetContext();
   }
 
   // --- WebSocket ---
@@ -920,8 +1167,13 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
 
     ws.onopen = function () {
       if (connectTimeoutId) { clearTimeout(connectTimeoutId); connectTimeoutId = null; }
-      // Local notification on reconnect (only if not focused)
-      if (wasConnected && !document.hasFocus() && "serviceWorker" in navigator) {
+      // Cancel pending "connection lost" notification if reconnected quickly
+      if (disconnectNotifTimer) {
+        clearTimeout(disconnectNotifTimer);
+        disconnectNotifTimer = null;
+      }
+      // Only show "restored" notification if "lost" was actually shown
+      if (wasConnected && disconnectNotifShown && !document.hasFocus() && "serviceWorker" in navigator) {
         navigator.serviceWorker.ready.then(function (reg) {
           reg.showNotification("Claude Relay", {
             body: "Server connection restored",
@@ -929,6 +1181,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           });
         }).catch(function () {});
       }
+      disconnectNotifShown = false;
       wasConnected = true;
       setStatus("connected");
       reconnectDelay = 1000;
@@ -954,14 +1207,20 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       setStatus("disconnected");
       processing = false;
       setActivity(null);
-      // Local notification when connection drops (only if not focused)
-      if (!document.hasFocus() && "serviceWorker" in navigator) {
-        navigator.serviceWorker.ready.then(function (reg) {
-          reg.showNotification("Claude Relay", {
-            body: "Server connection lost",
-            tag: "claude-disconnect",
-          });
-        }).catch(function () {});
+      // Delay "connection lost" notification by 5s to suppress brief disconnects
+      if (!disconnectNotifTimer) {
+        disconnectNotifTimer = setTimeout(function () {
+          disconnectNotifTimer = null;
+          disconnectNotifShown = true;
+          if (!document.hasFocus() && "serviceWorker" in navigator) {
+            navigator.serviceWorker.ready.then(function (reg) {
+              reg.showNotification("Claude Relay", {
+                body: "Server connection lost",
+                tag: "claude-disconnect",
+              });
+            }).catch(function () {});
+          }
+        }, 5000);
       }
       scheduleReconnect();
     };
@@ -1002,6 +1261,22 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           if (pendingQuery) {
             requestAnimationFrame(function() { buildSearchTimeline(pendingQuery); });
           }
+          // Scroll to tool element if navigating from file edit history
+          var nav = getPendingNavigate();
+          if (nav && (nav.toolId || nav.assistantUuid)) {
+            requestAnimationFrame(function() {
+              // Prefer scrolling to the exact tool element
+              var target = nav.toolId ? messagesEl.querySelector('[data-tool-id="' + nav.toolId + '"]') : null;
+              if (!target && nav.assistantUuid) {
+                target = messagesEl.querySelector('[data-uuid="' + nav.assistantUuid + '"]');
+              }
+              if (target) {
+                target.scrollIntoView({ behavior: "smooth", block: "center" });
+                target.classList.add("message-blink");
+                setTimeout(function() { target.classList.remove("message-blink"); }, 2000);
+              }
+            });
+          }
           break;
 
         case "info":
@@ -1017,6 +1292,11 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
             var debugWrap = $("debug-menu-wrap");
             if (debugWrap) debugWrap.classList.remove("hidden");
           }
+          if (msg.lanHost) window.__lanHost = msg.lanHost;
+          if (msg.dangerouslySkipPermissions) {
+            var spBanner = $("skip-perms-banner");
+            if (spBanner) spBanner.classList.remove("hidden");
+          }
           updateProjectSwitcher(msg);
           break;
 
@@ -1045,7 +1325,10 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           break;
 
         case "slash_commands":
-          slashCommands = (msg.commands || []).map(function (name) {
+          var reserved = new Set(builtinCommands.map(function (c) { return c.name; }));
+          slashCommands = (msg.commands || []).filter(function (name) {
+            return !reserved.has(name);
+          }).map(function (name) {
             return { name: name, desc: "Skill" };
           });
           break;
@@ -1067,6 +1350,10 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           }
           break;
 
+        case "toast":
+          showToast(msg.message, msg.level, msg.detail);
+          break;
+
         case "input_sync":
           handleInputSync(msg.text);
           break;
@@ -1093,6 +1380,9 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           var draft = sessionDrafts[activeSessionId] || "";
           inputEl.value = draft;
           autoResize();
+          if (!("ontouchstart" in window)) {
+            inputEl.focus();
+          }
           break;
 
         case "session_id":
@@ -1260,6 +1550,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           finalizeAssistantBlock();
           addTurnMeta(msg.cost, msg.duration);
           accumulateUsage(msg.cost, msg.usage);
+          accumulateContext(msg.cost, msg.usage, msg.modelUsage);
           break;
 
         case "done":
@@ -1272,7 +1563,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           enableMainInput();
           resetToolState();
           if (document.hidden) {
-            if (isNotifAlertEnabled()) showDoneNotification();
+            if (isNotifAlertEnabled() && !window._pushSubscription) showDoneNotification();
             if (isNotifSoundEnabled()) playDoneSound();
           }
           break;
@@ -1297,7 +1588,10 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
 
         case "rewind_complete":
           setRewindMode(false);
-          addSystemMessage("Rewound to earlier point. Files have been restored.", false);
+          var rewindText = "Rewound to earlier point. Files have been restored.";
+          if (msg.mode === "chat") rewindText = "Conversation rewound to earlier point.";
+          else if (msg.mode === "files") rewindText = "Files restored to earlier point.";
+          addSystemMessage(rewindText, false);
           break;
 
         case "rewind_error":
@@ -1317,6 +1611,22 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           handleFileChanged(msg);
           break;
 
+        case "fs_dir_changed":
+          handleDirChanged(msg);
+          break;
+
+        case "fs_file_history_result":
+          handleFileHistory(msg);
+          break;
+
+        case "fs_git_diff_result":
+          handleGitDiff(msg);
+          break;
+
+        case "fs_file_at_result":
+          handleFileAt(msg);
+          break;
+
         case "term_list":
           handleTermList(msg);
           break;
@@ -1336,6 +1646,10 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
         case "term_closed":
           handleTermClosed(msg);
           break;
+
+        case "process_stats":
+          updateStatusPanel(msg);
+          break;
       }
   }
 
@@ -1467,6 +1781,10 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     addUserMessage: addUserMessage,
     addSystemMessage: addSystemMessage,
     toggleUsagePanel: toggleUsagePanel,
+    toggleStatusPanel: toggleStatusPanel,
+    toggleContextPanel: toggleContextPanel,
+    resetContextData: resetContextData,
+    showImageModal: showImageModal,
   });
 
   // --- Notifications module (viewport, banners, notifications, debug, service worker) ---
@@ -1479,6 +1797,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     scrollToBottom: scrollToBottom,
     basePath: basePath,
     toggleUsagePanel: toggleUsagePanel,
+    toggleStatusPanel: toggleStatusPanel,
   });
 
   // --- QR code ---
@@ -1488,6 +1807,8 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   initFileBrowser({
     get ws() { return ws; },
     get connected() { return connected; },
+    get activeSessionId() { return activeSessionId; },
+    messagesEl: messagesEl,
     fileTreeEl: $("file-tree"),
     fileViewerEl: $("file-viewer"),
   });

package/lib/public/css/base.css

@@ -103,4 +103,9 @@ html, body {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
+.toast.toast-warn {
+  background: #3a2a00;
+  border-color: #7a5a00;
+  color: #ffc107;
+}
 

package/lib/public/css/diff.css

@@ -0,0 +1,128 @@
+/* ==========================================================================
+   Diff Views (unified + split)
+   ========================================================================== */
+
+.diff-unified,
+.diff-split-view {
+  overflow: auto;
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.diff-table {
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+}
+
+/* --- Line numbers --- */
+.diff-ln {
+  width: 40px;
+  min-width: 40px;
+  padding: 0 8px 0 4px;
+  text-align: right;
+  color: var(--text-dimmer);
+  user-select: none;
+  vertical-align: top;
+  white-space: nowrap;
+  opacity: 0.6;
+  border-right: 1px solid var(--border-subtle);
+}
+
+/* --- Marker column (unified only) --- */
+.diff-marker {
+  width: 16px;
+  min-width: 16px;
+  padding: 0 2px;
+  text-align: center;
+  color: var(--text-dimmer);
+  user-select: none;
+  vertical-align: top;
+}
+
+/* --- Code cells --- */
+.diff-code {
+  padding: 0 12px;
+  white-space: pre;
+  vertical-align: top;
+  tab-size: 2;
+}
+
+/* --- Unified diff row colors --- */
+.diff-row-remove {
+  background: rgba(229, 83, 75, 0.12);
+}
+
+.diff-row-remove .diff-marker {
+  color: var(--diff-remove, #E5534B);
+}
+
+.diff-row-add {
+  background: rgba(87, 171, 90, 0.12);
+}
+
+.diff-row-add .diff-marker {
+  color: var(--diff-add, #57AB5A);
+}
+
+/* --- Hunk header row (patch diffs) --- */
+.diff-row-hunk {
+  background: rgba(128, 128, 128, 0.05);
+}
+
+.diff-row-hunk .diff-hunk-text {
+  color: var(--text-dimmer);
+  font-style: italic;
+  padding: 2px 12px;
+}
+
+/* --- Split diff specifics --- */
+.diff-table-split .diff-code-old,
+.diff-table-split .diff-code-new {
+  max-width: 0;
+  overflow: hidden;
+}
+
+/* Split: divider between left and right */
+.diff-table-split .diff-code-old {
+  border-right: 1px solid var(--border-subtle);
+}
+
+/* Split: change rows */
+.diff-row-change .diff-code-old,
+.diff-row-remove .diff-code-old {
+  background: rgba(229, 83, 75, 0.12);
+}
+
+.diff-row-change .diff-code-new,
+.diff-row-add .diff-code-new {
+  background: rgba(87, 171, 90, 0.12);
+}
+
+/* Empty cells in split view */
+.diff-row-remove .diff-code-new,
+.diff-row-add .diff-code-old {
+  background: rgba(128, 128, 128, 0.03);
+}
+
+/* --- Compact mode for inline previews --- */
+.diff-compact .diff-table {
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.diff-compact .diff-ln {
+  width: 28px;
+  min-width: 28px;
+  padding: 0 4px 0 2px;
+}
+
+.diff-compact .diff-code {
+  padding: 0 6px;
+}
+
+.diff-compact .diff-marker {
+  width: 12px;
+  min-width: 12px;
+}