claude-relay 2.3.1 → 2.4.0

package/lib/public/css/base.css

@@ -9,13 +9,13 @@
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   scrollbar-width: thin;
-  scrollbar-color: rgba(255,255,255,0.15) transparent;
+  scrollbar-color: rgba(var(--overlay-rgb),0.15) transparent;
 }
 
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
+::-webkit-scrollbar-thumb { background: rgba(var(--overlay-rgb),0.15); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(var(--overlay-rgb),0.25); }
 
 :root {
   --bg: #2F2E2B;
@@ -34,6 +34,40 @@
   --user-bubble: #46423A;
   --error: #E5534B;
   --success: #57AB5A;
+  --warning: #E5A84B;
+  --accent-8: rgba(218, 119, 86, 0.08);
+  --accent-12: rgba(218, 119, 86, 0.12);
+  --accent-15: rgba(218, 119, 86, 0.15);
+  --accent-20: rgba(218, 119, 86, 0.20);
+  --accent-25: rgba(218, 119, 86, 0.25);
+  --accent-30: rgba(218, 119, 86, 0.30);
+  --error-8: rgba(229, 83, 75, 0.08);
+  --error-12: rgba(229, 83, 75, 0.12);
+  --error-15: rgba(229, 83, 75, 0.15);
+  --error-25: rgba(229, 83, 75, 0.25);
+  --success-8: rgba(87, 171, 90, 0.08);
+  --success-12: rgba(87, 171, 90, 0.12);
+  --success-15: rgba(87, 171, 90, 0.15);
+  --success-25: rgba(87, 171, 90, 0.25);
+  --warning-bg: rgba(229, 168, 75, 0.12);
+  --overlay-rgb: 255,255,255;
+  --shadow-rgb: 0,0,0;
+  --hl-comment: #6D6860;
+  --hl-keyword: #C586C0;
+  --hl-string: #57AB5A;
+  --hl-number: #DA7756;
+  --hl-function: #569CD6;
+  --hl-variable: #E5534B;
+  --hl-type: #E5A84B;
+  --hl-constant: #DA7756;
+  --hl-tag: #E5534B;
+  --hl-attr: #569CD6;
+  --hl-regexp: #4EC9B0;
+  --hl-meta: #D7BA7D;
+  --hl-builtin: #DA7756;
+  --hl-symbol: #D7BA7D;
+  --hl-addition: #57AB5A;
+  --hl-deletion: #E5534B;
   --sidebar-bg: #262522;
   --sidebar-hover: #302E2A;
   --sidebar-active: #3A3834;
@@ -96,7 +130,7 @@ html, body {
   opacity: 0;
   transition: opacity 0.2s, transform 0.2s;
   pointer-events: none;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 20px rgba(var(--shadow-rgb), 0.3);
 }
 
 .toast.visible {
@@ -104,8 +138,8 @@ html, body {
   transform: translateX(-50%) translateY(0);
 }
 .toast.toast-warn {
-  background: #3a2a00;
-  border-color: #7a5a00;
-  color: #ffc107;
+  background: var(--warning-bg);
+  border-color: var(--warning);
+  color: var(--warning);
 }
 

package/lib/public/css/diff.css

@@ -51,19 +51,19 @@
 
 /* --- Unified diff row colors --- */
 .diff-row-remove {
-  background: rgba(229, 83, 75, 0.12);
+  background: var(--error-12);
 }
 
 .diff-row-remove .diff-marker {
-  color: var(--diff-remove, #E5534B);
+  color: var(--error);
 }
 
 .diff-row-add {
-  background: rgba(87, 171, 90, 0.12);
+  background: var(--success-12);
 }
 
 .diff-row-add .diff-marker {
-  color: var(--diff-add, #57AB5A);
+  color: var(--success);
 }
 
 /* --- Hunk header row (patch diffs) --- */
@@ -92,12 +92,12 @@
 /* Split: change rows */
 .diff-row-change .diff-code-old,
 .diff-row-remove .diff-code-old {
-  background: rgba(229, 83, 75, 0.12);
+  background: var(--error-12);
 }
 
 .diff-row-change .diff-code-new,
 .diff-row-add .diff-code-new {
-  background: rgba(87, 171, 90, 0.12);
+  background: var(--success-12);
 }
 
 /* Empty cells in split view */

package/lib/public/css/filebrowser.css

@@ -32,50 +32,12 @@
 .sidebar-panel { flex: 1; overflow-y: auto; min-height: 0; }
 .sidebar-panel.hidden { display: none; }
 
-/* --- File panel header --- */
-#file-panel-header {
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-}
-
-#file-panel-back {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 10px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: 400;
-  cursor: pointer;
-  flex: 1;
-  transition: background 0.15s, color 0.15s;
-}
-
-#file-panel-back .lucide { width: 16px; height: 16px; flex-shrink: 0; }
-#file-panel-back:hover { background: var(--sidebar-hover); color: var(--text); }
-
-#file-panel-refresh {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: background 0.15s, color 0.15s, transform 0.3s;
+/* --- File browser header --- */
+#sessions-header-content.hidden,
+#files-header-content.hidden {
+  display: none;
 }
 
-#file-panel-refresh .lucide { width: 14px; height: 14px; }
-#file-panel-refresh:hover { background: var(--sidebar-hover); color: var(--text); }
 #file-panel-refresh.spinning { animation: spin-once 0.5s ease; }
 @keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 
@@ -414,7 +376,6 @@
 
 .terminal-tabs {
   display: flex;
-  flex: 1;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   gap: 0;
@@ -424,6 +385,25 @@
 
 .terminal-tabs::-webkit-scrollbar { display: none; }
 
+.terminal-new-tab-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 0;
+  margin: 4px 2px;
+  transition: background 0.15s, color 0.15s;
+}
+.terminal-new-tab-btn:hover { background: rgba(var(--overlay-rgb),0.08); color: var(--text); }
+.terminal-new-tab-btn .lucide { width: 14px; height: 14px; }
+
 .terminal-tab {
   display: flex;
   align-items: center;
@@ -461,7 +441,7 @@
 
 .terminal-tab:hover .terminal-tab-close,
 .terminal-tab.active .terminal-tab-close { display: flex; }
-.terminal-tab-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
+.terminal-tab-close:hover { background: rgba(var(--overlay-rgb),0.1); color: var(--text); }
 
 .terminal-tab-label { cursor: default; }
 
@@ -483,6 +463,7 @@
   gap: 2px;
   padding: 0 8px;
   flex-shrink: 0;
+  margin-left: auto;
 }
 
 /* Wide screens: split panel beside #app */
@@ -517,7 +498,6 @@
 
 #terminal-body {
   flex: 1;
-  background: #1a1a1a;
   min-height: 0;
   overflow: hidden;
   position: relative;
@@ -526,7 +506,7 @@
 .terminal-tab-body {
   position: absolute;
   inset: 0;
-  padding: 4px;
+  padding: 4px 0 0 4px;
 }
 
 .terminal-tab-body .xterm {
@@ -606,7 +586,7 @@
   border-radius: 10px;
   padding: 4px 0;
   min-width: 160px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
   z-index: 500;
 }
 
@@ -626,7 +606,7 @@
 }
 
 .term-ctx-item .lucide { width: 14px; height: 14px; flex-shrink: 0; }
-.term-ctx-item:hover { background: rgba(255, 255, 255, 0.05); }
+.term-ctx-item:hover { background: rgba(var(--overlay-rgb), 0.05); }
 
 /* --- File Edit History --- */
 
@@ -727,7 +707,7 @@
 }
 
 .file-history-badge.badge-commit {
-  background: rgba(255,255,255,0.06);
+  background: rgba(var(--overlay-rgb),0.06);
   color: var(--text-muted);
 }
 
@@ -737,7 +717,7 @@
   color: var(--text-muted);
   margin-top: 4px;
   padding: 2px 6px;
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(var(--overlay-rgb), 0.04);
   border-radius: 3px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -811,7 +791,7 @@
   padding: 10px 12px;
   margin-bottom: 8px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(var(--overlay-rgb), 0.04);
   border: 1px solid var(--border);
 }
 
@@ -846,11 +826,11 @@
   flex: 1;
   min-width: 0;
   padding: 7px 10px;
-  border: 1.5px dashed rgba(255, 255, 255, 0.15);
+  border: 1.5px dashed rgba(var(--overlay-rgb), 0.15);
   border-radius: 6px;
   font-size: 11px;
   color: var(--text-muted);
-  background: rgba(255, 255, 255, 0.02);
+  background: rgba(var(--overlay-rgb), 0.02);
   transition: border-color 0.15s, background 0.15s;
 }
 
@@ -871,7 +851,7 @@
   font-size: 10px;
   font-weight: 700;
   flex-shrink: 0;
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(var(--overlay-rgb), 0.1);
   color: var(--text-muted);
 }
 

package/lib/public/css/highlight.css

@@ -0,0 +1,144 @@
+/* ==========================================================================
+   Syntax Highlighting (highlight.js) — base16 CSS-variable driven
+   Replaces CDN github-dark-dimmed.min.css
+   ========================================================================== */
+
+.hljs {
+  color: var(--text);
+  background: var(--code-bg);
+}
+
+/* --- Comments --- */
+.hljs-comment,
+.hljs-quote {
+  color: var(--hl-comment);
+  font-style: italic;
+}
+
+/* --- Keywords / control flow --- */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-selector-id {
+  color: var(--hl-keyword);
+}
+
+/* --- Strings / template literals --- */
+.hljs-string,
+.hljs-doctag,
+.hljs-selector-class {
+  color: var(--hl-string);
+}
+
+/* --- Numbers / booleans / null --- */
+.hljs-number,
+.hljs-literal {
+  color: var(--hl-number);
+}
+
+/* --- Functions / method calls --- */
+.hljs-title,
+.hljs-title.function_,
+.hljs-section {
+  color: var(--hl-function);
+}
+
+/* --- Variables / params --- */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-params {
+  color: var(--hl-variable);
+}
+
+/* --- Types / classes --- */
+.hljs-type,
+.hljs-title.class_,
+.hljs-title.class_.inherited__ {
+  color: var(--hl-type);
+}
+
+/* --- Constants / built-ins --- */
+.hljs-built_in {
+  color: var(--hl-builtin);
+}
+
+/* --- Tags (HTML/XML) --- */
+.hljs-tag,
+.hljs-name {
+  color: var(--hl-tag);
+}
+
+/* --- Attributes --- */
+.hljs-attr,
+.hljs-attribute {
+  color: var(--hl-attr);
+}
+
+/* --- Regexp / links --- */
+.hljs-regexp,
+.hljs-link {
+  color: var(--hl-regexp);
+}
+
+/* --- Meta / preprocessor --- */
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-meta .hljs-string {
+  color: var(--hl-meta);
+}
+
+/* --- Symbols / special --- */
+.hljs-symbol,
+.hljs-bullet {
+  color: var(--hl-symbol);
+}
+
+/* --- Diff additions / deletions --- */
+.hljs-addition {
+  color: var(--hl-addition);
+  background: var(--success-8);
+}
+
+.hljs-deletion {
+  color: var(--hl-deletion);
+  background: var(--error-8);
+}
+
+/* --- Emphasis / strong --- */
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: 700;
+}
+
+/* --- Subst / interpolation --- */
+.hljs-subst {
+  color: var(--text);
+}
+
+/* --- Selector --- */
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: var(--hl-keyword);
+}
+
+/* --- Property (CSS, JSON keys) --- */
+.hljs-property {
+  color: var(--hl-attr);
+}
+
+/* --- Punctuation (brackets etc.) --- */
+.hljs-punctuation {
+  color: var(--text-secondary);
+}
+
+/* --- Operator --- */
+.hljs-operator {
+  color: var(--hl-keyword);
+}
+
+/* --- Char / escape sequences --- */
+.hljs-char.escape_ {
+  color: var(--hl-regexp);
+}

package/lib/public/css/input.css

@@ -12,7 +12,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(var(--overlay-rgb), 0.06);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 8px 12px;
@@ -23,7 +23,7 @@
 
 .bubble-paste:hover {
   border-color: var(--text-dimmer);
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(var(--overlay-rgb), 0.1);
 }
 
 .bubble-paste-preview {
@@ -90,7 +90,7 @@
 }
 
 .pasted-chip-remove .lucide { width: 12px; height: 12px; }
-.pasted-chip-remove:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
+.pasted-chip-remove:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.1); }
 
 /* --- Paste viewer modal --- */
 #paste-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
@@ -133,7 +133,7 @@
   transition: color 0.15s, background 0.15s;
 }
 
-.paste-modal-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
+.paste-modal-close:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.06); }
 
 .paste-modal-body {
   margin: 0;
@@ -288,7 +288,7 @@
 }
 
 #attach-btn .lucide { width: 20px; height: 20px; }
-#attach-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
+#attach-btn:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
 
 #attach-menu {
   position: absolute;
@@ -298,7 +298,7 @@
   background: var(--bg-alt);
   border: 1px solid var(--border);
   border-radius: 14px;
-  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.4);
   z-index: 10;
   overflow: hidden;
 }
@@ -325,7 +325,7 @@
 }
 
 .attach-menu-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(var(--overlay-rgb), 0.05);
   color: var(--text);
 }
 
@@ -381,7 +381,7 @@
   border: 1px solid var(--border);
   border-radius: 14px;
   margin-bottom: 8px;
-  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.4);
   z-index: 10;
 }
 
@@ -400,7 +400,7 @@
 
 .slash-item:hover,
 .slash-item.active {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(var(--overlay-rgb), 0.05);
 }
 
 .slash-item .slash-cmd {