claude-relay 2.2.3 → 2.3.0

package/lib/public/css/messages.css

@@ -407,6 +407,45 @@ pre.mermaid-error {
   max-height: 75vh;
 }
 
+/* --- Image lightbox modal --- */
+#image-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
+#image-modal.hidden { display: none; }
+#image-modal .confirm-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, 0.8); }
+
+.image-modal-dialog {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#image-modal-img {
+  max-width: 92vw;
+  max-height: 90vh;
+  border-radius: 12px;
+  object-fit: contain;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
+}
+
+.image-modal-close {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: background 0.15s;
+}
+.image-modal-close:hover { background: rgba(255, 255, 255, 0.2); }
+
 /* ==========================================================================
    Thinking
    ========================================================================== */
@@ -566,6 +605,37 @@ pre.mermaid-error {
   white-space: nowrap;
 }
 
+.tool-desc.tool-desc-link {
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 2px;
+  transition: color 0.15s, text-decoration-color 0.15s;
+}
+
+.tool-desc.tool-desc-link:hover {
+  color: var(--accent);
+  text-decoration-color: var(--accent);
+}
+
+.tool-desc-link-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+  opacity: 0.3;
+  vertical-align: middle;
+  transition: opacity 0.15s;
+}
+
+.tool-desc-link-icon .lucide {
+  width: 11px;
+  height: 11px;
+}
+
+.tool-desc.tool-desc-link:hover .tool-desc-link-icon {
+  opacity: 0.8;
+}
+
 .tool-status-icon {
   flex-shrink: 0;
   width: 16px;
@@ -670,6 +740,13 @@ pre.mermaid-error {
 }
 
 .edit-diff-path { flex: 1; }
+.edit-diff-path-link {
+  cursor: pointer;
+}
+.edit-diff-path-link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
 
 .edit-diff-toggles {
   display: inline-flex;
@@ -695,61 +772,19 @@ pre.mermaid-error {
 .edit-diff-toggle.active { color: var(--text); background: var(--sidebar-active); }
 .edit-diff-toggle + .edit-diff-toggle { border-left: 1px solid var(--border); }
 
-.edit-diff-body {
-  display: flex;
+/* Constrain diff module tables inside tool results */
+.edit-diff .diff-unified,
+.edit-diff .diff-split-view,
+.tool-result-block > .diff-unified {
   max-height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: auto;
 }
 
-.edit-diff-body pre {
-  margin: 0;
-  max-height: none;
-  overflow-y: visible;
-  font-family: "SF Mono", Menlo, Monaco, monospace;
+.edit-diff .diff-table,
+.tool-result-block > .diff-unified .diff-table {
   font-size: 12px;
-  line-height: 1.55;
-}
-
-.edit-diff-gutter {
-  flex-shrink: 0;
-  padding: 12px 12px 12px 14px;
-  text-align: right;
-  color: var(--text-dimmer);
-  user-select: none;
-  -webkit-user-select: none;
-  min-width: 36px;
-  border-right: 1px solid var(--border-subtle);
 }
 
-.edit-diff-content {
-  flex: 1;
-  padding: 12px 14px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.edit-diff-content .diff-add {
-  color: #3FB950;
-  background: rgba(63, 185, 80, 0.08);
-  display: inline-block;
-  width: 100%;
-}
-
-.edit-diff-content .diff-del {
-  color: #F85149;
-  background: rgba(248, 81, 73, 0.08);
-  display: inline-block;
-  width: 100%;
-}
-
-/* Split view */
-.edit-diff-split { overflow-x: auto; }
-.edit-diff-split .edit-diff-side-old { border-right: 1px solid var(--border); }
-.edit-diff-split .edit-diff-side-old,
-.edit-diff-split .edit-diff-side-new { min-width: 0; flex: 1; }
-.edit-diff-split .edit-diff-gutter { min-width: 30px; padding: 12px 8px 12px 10px; }
-
 /* --- Code viewer (Read tool) --- */
 .code-viewer {
   display: flex;

package/lib/public/css/overlays.css

@@ -178,6 +178,24 @@
 #update-banner-close .lucide { width: 14px; height: 14px; }
 #update-banner-close:hover { color: var(--text-secondary); }
 
+/* --- Skip permissions banner --- */
+#skip-perms-banner {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 7px 16px;
+  background: rgba(229, 83, 75, 0.12);
+  border-bottom: 1px solid rgba(229, 83, 75, 0.25);
+  font-size: 12px;
+  font-weight: 500;
+  color: #E5534B;
+}
+
+#skip-perms-banner.hidden { display: none; }
+#skip-perms-banner .lucide { width: 14px; height: 14px; flex-shrink: 0; }
+
 /* --- Confirm modal --- */
 #confirm-modal {
   position: fixed;
@@ -287,6 +305,28 @@
 
 .rewind-modal-body p { margin: 0 0 10px; }
 
+#rewind-mode-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+#rewind-mode-options label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 4px 0;
+}
+
+#rewind-mode-options input[type="radio"] {
+  accent-color: var(--accent);
+  margin: 0;
+}
+
 .rewind-file-section {
   margin-top: 10px;
   border: 1px solid var(--border-subtle);

package/lib/public/index.html

@@ -71,6 +71,7 @@
     <div id="sidebar-panel-files" class="sidebar-panel hidden">
       <div id="file-panel-header">
         <button id="file-panel-back" type="button"><i data-lucide="arrow-left"></i> <span>Sessions</span></button>
+        <button id="file-panel-refresh" type="button" title="Refresh file tree"><i data-lucide="refresh-cw"></i></button>
       </div>
       <div id="file-tree"></div>
     </div>
@@ -83,6 +84,9 @@
         <a class="sidebar-menu-item" href="https://github.com/chadbyte/claude-relay" target="_blank" rel="noopener">
           <i data-lucide="github"></i> <span>GitHub</span>
         </a>
+        <button class="sidebar-menu-item" id="footer-status">
+          <i data-lucide="activity"></i> <span>Status</span>
+        </button>
         <button class="sidebar-menu-item" id="footer-update-check">
           <i data-lucide="refresh-cw"></i> <span>Check for updates</span>
         </button>
@@ -100,6 +104,10 @@
       <span class="onboarding-banner-text" id="onboarding-banner-text"></span>
       <button id="onboarding-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
     </div>
+    <div id="skip-perms-banner" class="hidden">
+      <i data-lucide="shield-off"></i>
+      <span>Skip permissions mode is active. All tool executions are auto-approved.</span>
+    </div>
     <div id="header">
       <div id="header-left">
         <button id="sidebar-expand-btn" title="Open sidebar"><i data-lucide="panel-left-open"></i></button>
@@ -163,24 +171,79 @@
     </div>
     <div id="messages"></div>
 
-    <div id="usage-panel" class="hidden">
-      <div class="usage-panel-header">
-        <span>Usage</span>
-        <button id="usage-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
+    <div id="info-panels">
+      <div id="usage-panel" class="hidden">
+        <div class="usage-panel-header">
+          <span>Usage</span>
+          <button id="usage-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
+        </div>
+        <div class="usage-panel-body">
+          <a href="https://claude.ai/settings/usage" target="_blank" rel="noopener" class="usage-external-link">
+            <span>Check plan usage on claude.ai</span>
+            <i data-lucide="external-link"></i>
+          </a>
+          <div class="usage-divider"></div>
+          <div class="usage-section-label">Session</div>
+          <div class="usage-row"><span class="usage-label">Cost</span><span id="usage-cost" class="usage-value">$0.0000</span></div>
+          <div class="usage-row"><span class="usage-label">Input tokens</span><span id="usage-input" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Output tokens</span><span id="usage-output" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Cache read</span><span id="usage-cache-read" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Cache write</span><span id="usage-cache-write" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Turns</span><span id="usage-turns" class="usage-value">0</span></div>
+        </div>
       </div>
-      <div class="usage-panel-body">
-        <a href="https://claude.ai/settings/usage" target="_blank" rel="noopener" class="usage-external-link">
-          <span>Check plan usage on claude.ai</span>
-          <i data-lucide="external-link"></i>
-        </a>
-        <div class="usage-divider"></div>
-        <div class="usage-section-label">Session</div>
-        <div class="usage-row"><span class="usage-label">Cost</span><span id="usage-cost" class="usage-value">$0.0000</span></div>
-        <div class="usage-row"><span class="usage-label">Input tokens</span><span id="usage-input" class="usage-value">0</span></div>
-        <div class="usage-row"><span class="usage-label">Output tokens</span><span id="usage-output" class="usage-value">0</span></div>
-        <div class="usage-row"><span class="usage-label">Cache read</span><span id="usage-cache-read" class="usage-value">0</span></div>
-        <div class="usage-row"><span class="usage-label">Cache write</span><span id="usage-cache-write" class="usage-value">0</span></div>
-        <div class="usage-row"><span class="usage-label">Turns</span><span id="usage-turns" class="usage-value">0</span></div>
+      <div id="status-panel" class="hidden">
+        <div class="usage-panel-header">
+          <span>Status</span>
+          <button id="status-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
+        </div>
+        <div class="usage-panel-body">
+          <div class="usage-section-label">Process</div>
+          <div class="usage-row"><span class="usage-label">PID</span><span id="status-pid" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Uptime</span><span id="status-uptime" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">RSS Memory</span><span id="status-rss" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Heap Used</span><span id="status-heap-used" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Heap Total</span><span id="status-heap-total" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">External</span><span id="status-external" class="usage-value">-</span></div>
+          <div class="usage-divider"></div>
+          <div class="usage-section-label">Sessions</div>
+          <div class="usage-row"><span class="usage-label">Active</span><span id="status-sessions" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Processing</span><span id="status-processing" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Clients</span><span id="status-clients" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Terminals</span><span id="status-terminals" class="usage-value">-</span></div>
+        </div>
+      </div>
+      <div id="context-panel" class="hidden">
+        <div class="usage-panel-header">
+          <span>Context</span>
+          <div class="usage-panel-actions">
+            <button id="context-panel-minimize" aria-label="Minimize" title="Minimize to input"><i data-lucide="minus"></i></button>
+            <button id="context-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
+          </div>
+        </div>
+        <div class="usage-panel-body">
+          <div class="usage-section-label">Context Window</div>
+          <div class="context-bar-wrap">
+            <div class="context-bar">
+              <div class="context-bar-fill" id="context-bar-fill"></div>
+            </div>
+            <span class="context-bar-pct" id="context-bar-pct">0%</span>
+          </div>
+          <div class="usage-row"><span class="usage-label">Used</span><span id="context-used" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Window</span><span id="context-window" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Max output</span><span id="context-max-output" class="usage-value">-</span></div>
+          <div class="usage-divider"></div>
+          <div class="usage-section-label">Session Tokens</div>
+          <div class="usage-row"><span class="usage-label">Input</span><span id="context-input" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Output</span><span id="context-output" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Cache read</span><span id="context-cache-read" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Cache write</span><span id="context-cache-write" class="usage-value">0</span></div>
+          <div class="usage-divider"></div>
+          <div class="usage-section-label">Model</div>
+          <div class="usage-row"><span class="usage-label">Name</span><span id="context-model" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Cost</span><span id="context-cost" class="usage-value">$0.0000</span></div>
+          <div class="usage-row"><span class="usage-label">Turns</span><span id="context-turns" class="usage-value">0</span></div>
+        </div>
       </div>
     </div>
     <div id="todo-sticky" class="hidden"></div>
@@ -189,6 +252,12 @@
       <div id="input-wrapper">
         <div id="slash-menu"></div>
         <div id="input-row">
+          <div id="context-mini" class="hidden">
+            <div class="context-mini-bar">
+              <div class="context-mini-fill" id="context-mini-fill"></div>
+            </div>
+            <span class="context-mini-label" id="context-mini-label">0%</span>
+          </div>
           <div id="image-preview-bar"></div>
           <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send"></textarea>
           <div id="input-bottom">
@@ -215,6 +284,7 @@
     <div class="file-viewer-header">
       <span class="file-viewer-path" id="file-viewer-path"></span>
       <button class="file-viewer-btn hidden" id="file-viewer-render" title="Toggle rendered view"><i data-lucide="book-open"></i></button>
+      <button class="file-viewer-btn hidden" id="file-viewer-history" title="Edit history"><i data-lucide="clock"></i></button>
       <button class="file-viewer-btn" id="file-viewer-copy" title="Copy contents"><i data-lucide="copy"></i></button>
       <button class="file-viewer-btn" id="file-viewer-close" title="Close"><i data-lucide="x"></i></button>
     </div>
@@ -253,6 +323,14 @@
   </div>
 </div>
 
+<div id="image-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="image-modal-dialog">
+    <img id="image-modal-img" src="" alt="">
+    <button class="image-modal-close"><i data-lucide="x" style="width:18px;height:18px"></i></button>
+  </div>
+</div>
+
 <div id="mermaid-modal" class="hidden">
   <div class="confirm-backdrop"></div>
   <div class="mermaid-modal-dialog">
@@ -311,6 +389,11 @@
     <div class="rewind-modal-title">Rewind to this point?</div>
     <div class="rewind-modal-body">
       <p id="rewind-summary"></p>
+      <div id="rewind-mode-options">
+        <label><input type="radio" name="rewind-mode" value="both" checked> Conversation and files</label>
+        <label><input type="radio" name="rewind-mode" value="chat"> Conversation only</label>
+        <label><input type="radio" name="rewind-mode" value="files"> Files only</label>
+      </div>
       <div id="rewind-files-list"></div>
     </div>
     <div class="confirm-actions">