claude-relay 2.2.4 → 2.3.1

package/lib/public/css/menus.css

@@ -419,23 +419,34 @@
 .model-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
 .model-menu-item.active { color: var(--accent); font-weight: 600; }
 
-/* --- Usage panel --- */
-#usage-panel {
+/* --- Info panels container --- */
+#info-panels {
   position: fixed;
   top: 80px;
   right: 16px;
   width: 280px;
   max-height: calc(100vh - 160px);
   overflow-y: auto;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+#info-panels:empty { display: none; }
+
+/* --- Usage panel --- */
+#usage-panel, #status-panel, #context-panel {
   background: var(--bg-alt);
   border: 1px solid var(--border);
   border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  z-index: 50;
   font-size: 12px;
+  pointer-events: auto;
 }
 
-#usage-panel.hidden { display: none; }
+#usage-panel.hidden, #status-panel.hidden, #context-panel.hidden { display: none; }
 
 .usage-panel-header {
   display: flex;
@@ -448,6 +459,11 @@
   color: var(--text);
 }
 
+.usage-panel-actions {
+  display: flex;
+  gap: 2px;
+}
+
 .usage-panel-header button {
   display: flex;
   align-items: center;
@@ -523,8 +539,76 @@
   font-weight: 500;
 }
 
+/* --- Context bar --- */
+.context-bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0 8px;
+}
+.context-bar {
+  flex: 1;
+  height: 6px;
+  background: var(--border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.context-bar-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--success);
+  border-radius: 3px;
+  transition: width 0.3s ease, background 0.3s ease;
+}
+.context-bar-fill.warn { background: #E5A84B; }
+.context-bar-fill.danger { background: var(--error); }
+.context-bar-pct {
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  min-width: 32px;
+  text-align: right;
+}
+
+/* --- Context mini bar (in input area) --- */
+#context-mini {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px 2px;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+#context-mini:hover { opacity: 0.8; }
+#context-mini.hidden { display: none; }
+.context-mini-bar {
+  flex: 1;
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.context-mini-fill {
+  height: 100%;
+  width: 0%;
+  border-radius: 2px;
+  background: var(--success);
+  transition: width 0.3s ease, background 0.3s ease;
+}
+.context-mini-fill.warn { background: #E5A84B; }
+.context-mini-fill.danger { background: var(--error); }
+.context-mini-label {
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  min-width: 24px;
+  text-align: right;
+}
+
 @media (max-width: 768px) {
-  #usage-panel {
+  #info-panels {
     top: auto;
     bottom: calc(var(--safe-bottom, 0px) + 64px);
     right: 12px;

package/lib/public/css/messages.css

@@ -130,6 +130,8 @@
   word-break: break-word;
   white-space: pre-wrap;
   color: var(--text);
+  unicode-bidi: plaintext;
+  text-align: start;
 }
 
 /* --- Assistant message --- */
@@ -176,6 +178,8 @@
   line-height: 1.7;
   word-break: break-word;
   color: var(--text);
+  unicode-bidi: plaintext;
+  text-align: start;
 }
 
 .md-content p { margin-bottom: 14px; }
@@ -282,7 +286,7 @@ pre:hover .code-copy-btn { opacity: 1; }
 .md-content th, .md-content td {
   border: 1px solid var(--border);
   padding: 8px 12px;
-  text-align: left;
+  text-align: start;
 }
 .md-content th {
   background: rgba(255, 255, 255, 0.04);
@@ -407,6 +411,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 +609,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 +744,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 +776,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>
@@ -131,7 +139,7 @@
           </div>
         </div>
         <div id="notif-menu-wrap">
-          <button id="notif-btn" title="Notifications"><i data-lucide="sliders-horizontal"></i></button>
+          <button id="notif-btn" title="Notifications"><i data-lucide="bell"></i></button>
           <div id="notif-menu" class="hidden">
             <label class="notif-option" id="notif-push-row">
               <span><i data-lucide="smartphone" style="width:14px;height:14px"></i> Push notifications</span>
@@ -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,8 +252,14 @@
       <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>
+          <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send" dir="auto"></textarea>
           <div id="input-bottom">
             <div id="attach-wrap">
               <button id="attach-btn" type="button" aria-label="Attach"><i data-lucide="plus"></i></button>
@@ -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">