claude-relay 2.3.0 → 2.4.0

package/lib/public/css/overlays.css

@@ -18,8 +18,8 @@
   justify-content: center;
   gap: 8px;
   padding: 8px 16px;
-  background: rgba(218, 119, 86, 0.08);
-  border-bottom: 1px solid rgba(218, 119, 86, 0.15);
+  background: var(--accent-8);
+  border-bottom: 1px solid var(--accent-15);
   font-size: 12px;
   color: var(--text-secondary);
 }
@@ -73,8 +73,8 @@
   justify-content: center;
   gap: 8px;
   padding: 8px 16px;
-  background: rgba(87, 171, 90, 0.08);
-  border-bottom: 1px solid rgba(87, 171, 90, 0.15);
+  background: var(--success-8);
+  border-bottom: 1px solid var(--success-15);
   font-size: 12px;
   color: var(--text-secondary);
   position: relative;
@@ -92,8 +92,8 @@
 .update-banner-text strong { color: var(--text); font-weight: 600; }
 
 #update-how {
-  background: rgba(87, 171, 90, 0.15);
-  border: 1px solid rgba(87, 171, 90, 0.25);
+  background: var(--success-15);
+  border: 1px solid var(--success-25);
   border-radius: 6px;
   color: var(--success);
   cursor: pointer;
@@ -105,7 +105,7 @@
   transition: background 0.15s;
 }
 
-#update-how:hover { background: rgba(87, 171, 90, 0.25); }
+#update-how:hover { background: var(--success-25); }
 
 #update-popover {
   display: none;
@@ -118,7 +118,7 @@
   border-radius: 10px;
   padding: 12px 16px;
   z-index: 200;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
   white-space: nowrap;
 }
 
@@ -140,7 +140,7 @@
   font-family: "SF Mono", Menlo, Monaco, monospace;
   font-size: 13px;
   color: var(--text);
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(var(--overlay-rgb), 0.06);
   padding: 6px 12px;
   border-radius: 6px;
   user-select: all;
@@ -186,11 +186,11 @@
   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);
+  background: var(--error-12);
+  border-bottom: 1px solid var(--error-25);
   font-size: 12px;
   font-weight: 500;
-  color: #E5534B;
+  color: var(--error);
 }
 
 #skip-perms-banner.hidden { display: none; }
@@ -211,7 +211,7 @@
 .confirm-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(var(--shadow-rgb), 0.5);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
 }
@@ -224,7 +224,7 @@
   padding: 20px 24px;
   max-width: 320px;
   width: 90%;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.5);
 }
 
 .confirm-text {
@@ -341,13 +341,13 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(var(--overlay-rgb), 0.03);
   cursor: pointer;
   user-select: none;
   transition: background 0.15s;
 }
 
-.rewind-file-header:hover { background: rgba(255, 255, 255, 0.06); }
+.rewind-file-header:hover { background: rgba(var(--overlay-rgb), 0.06); }
 
 .rewind-file-chevron {
   display: inline-flex;
@@ -377,8 +377,8 @@
   flex-shrink: 0;
 }
 
-.rewind-file-stats .stat-add { color: #3FB950; }
-.rewind-file-stats .stat-del { color: #F85149; }
+.rewind-file-stats .stat-add { color: var(--success); }
+.rewind-file-stats .stat-del { color: var(--error); }
 
 .rewind-file-diff {
   display: none;
@@ -407,7 +407,7 @@
   font-style: italic;
 }
 
-/* --- Resume modal --- */
+/* --- Resume / Session Picker modal --- */
 #resume-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
 #resume-modal.hidden { display: none; }
 
@@ -418,44 +418,68 @@
   margin-bottom: 12px;
 }
 
-.resume-modal-body {
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin-bottom: 16px;
+.resume-picker-dialog { min-width: 380px; max-width: 480px; }
+.resume-picker-body { margin-bottom: 12px; }
+
+.resume-picker-loading {
+  display: flex; align-items: center; gap: 10px;
+  padding: 24px 0; justify-content: center;
+  font-size: 13px; color: var(--text-muted);
 }
+.resume-picker-loading.hidden { display: none; }
+.resume-picker-empty.hidden { display: none; }
+.resume-picker-list.hidden { display: none; }
 
-.resume-modal-body p { margin: 0 0 10px; }
+.resume-picker-spinner {
+  width: 16px; height: 16px;
+  border: 2px solid var(--border);
+  border-top-color: var(--text-secondary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
 
-.resume-modal-hint {
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-bottom: 12px;
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.resume-picker-empty {
+  padding: 24px 0; text-align: center;
+  font-size: 13px; color: var(--text-muted);
 }
 
-.resume-modal-hint code {
-  background: rgba(255, 255, 255, 0.07);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: "SF Mono", Menlo, Monaco, monospace;
-  font-size: 0.92em;
+.resume-picker-list {
+  max-height: 400px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 2px;
 }
 
-#resume-session-input {
-  width: 100%;
-  background: var(--input-bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text);
-  font-size: 13px;
-  font-family: "SF Mono", Menlo, Monaco, monospace;
-  padding: 10px 12px;
-  outline: none;
-  transition: border-color 0.2s;
+.cli-session-item {
+  display: flex; flex-direction: column; gap: 4px;
+  padding: 10px 12px; border-radius: 8px;
+  cursor: pointer; transition: background 0.15s;
+  border: 1px solid transparent;
 }
 
-#resume-session-input:focus { border-color: var(--text-dimmer); }
-#resume-session-input::placeholder { color: var(--text-muted); font-family: "Inter", system-ui, sans-serif; }
+.cli-session-item:hover {
+  background: rgba(var(--overlay-rgb), 0.05);
+  border-color: var(--border-subtle);
+}
+
+.cli-session-title {
+  font-size: 13px; color: var(--text);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  line-height: 1.4;
+}
+
+.cli-session-meta {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 11px; color: var(--text-muted);
+  flex-wrap: wrap;
+}
+
+.cli-session-meta .badge {
+  background: rgba(var(--overlay-rgb), 0.07);
+  padding: 1px 6px; border-radius: 4px;
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  font-size: 10px;
+}
 
 /* --- Notification help modal --- */
 #notif-help-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
@@ -488,7 +512,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(var(--overlay-rgb), 0.04);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 8px 10px;
@@ -520,6 +544,98 @@
 .notif-help-url .popover-copy:hover { color: var(--text); border-color: var(--text-dimmer); }
 .notif-help-url .popover-copy.copied { color: var(--success); border-color: var(--success); }
 
+/* --- Add project modal --- */
+#add-project-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
+#add-project-modal.hidden { display: none; }
+
+.add-project-dialog { max-width: 420px; }
+
+.add-project-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 14px;
+}
+
+.add-project-body { margin-bottom: 16px; }
+
+.add-project-input-wrap { position: relative; }
+
+#add-project-input {
+  width: 100%;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 13px;
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  padding: 10px 12px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+#add-project-input:focus { border-color: var(--text-dimmer); }
+#add-project-input::placeholder { color: var(--text-muted); font-family: "Inter", system-ui, sans-serif; }
+
+#add-project-suggestions {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
+}
+
+#add-project-suggestions.hidden { display: none; }
+
+.add-project-suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.add-project-suggestion-item:first-child { border-radius: 8px 8px 0 0; }
+.add-project-suggestion-item:last-child { border-radius: 0 0 8px 8px; }
+.add-project-suggestion-item:only-child { border-radius: 8px; }
+.add-project-suggestion-item:hover,
+.add-project-suggestion-item.active { background: var(--sidebar-hover); }
+
+.add-project-suggestion-item .lucide { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
+
+.add-project-suggestion-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.add-project-suggestion-path {
+  font-size: 11px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 50%;
+}
+
+#add-project-error {
+  font-size: 12px;
+  color: var(--error);
+  margin-top: 8px;
+}
+
+#add-project-error.hidden { display: none; }
+
 /* --- Connect overlay --- */
 #connect-overlay {
   position: absolute;
@@ -570,7 +686,7 @@
     90deg,
     var(--accent) 0%,
     var(--accent) 35%,
-    #f0c0a0 50%,
+    var(--accent-hover) 50%,
     var(--accent) 65%,
     var(--accent) 100%
   );

package/lib/public/css/rewind.css

@@ -37,7 +37,7 @@
 }
 
 #app.rewind-mode .msg-user[data-uuid] .bubble:hover {
-  box-shadow: 0 0 0 2px var(--accent-hover), 0 0 12px rgba(218, 119, 86, 0.2);
+  box-shadow: 0 0 0 2px var(--accent-hover), 0 0 12px var(--accent-20);
 }
 
 #app.rewind-mode .msg-user:not([data-uuid]) { opacity: 0.35; }
@@ -58,9 +58,9 @@
   align-items: center;
   gap: 8px;
   background: var(--bg-alt);
-  border: 1px solid rgba(218, 119, 86, 0.25);
+  border: 1px solid var(--accent-25);
   border-radius: 20px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.3);
   z-index: 10;
   white-space: nowrap;
 }
@@ -79,7 +79,7 @@
   height: 22px;
   border-radius: 50%;
   border: none;
-  background: rgba(218, 119, 86, 0.15);
+  background: var(--accent-15);
   color: var(--accent);
   cursor: pointer;
   padding: 0;
@@ -88,7 +88,7 @@
 }
 
 .rewind-exit-btn .lucide { width: 12px; height: 12px; }
-.rewind-exit-btn:hover { background: rgba(218, 119, 86, 0.3); }
+.rewind-exit-btn:hover { background: var(--accent-30); }
 
 /* --- Rewind timeline --- */
 .rewind-timeline {
@@ -112,7 +112,7 @@
   position: absolute;
   left: -3px;
   width: 8px;
-  background: rgba(218, 119, 86, 0.2);
+  background: var(--accent-20);
   border-radius: 4px;
   pointer-events: none;
   transition: top 0.1s ease, height 0.1s ease;
@@ -156,7 +156,7 @@
 
 .rewind-timeline-marker:hover {
   border-color: var(--accent);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.3);
 }
 
 .rewind-timeline-marker:hover .lucide,
@@ -225,7 +225,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  background: linear-gradient(90deg, var(--accent) 0%, #F0C8A0 50%, var(--accent) 100%);
+  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent) 100%);
   background-size: 200% auto;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -280,7 +280,7 @@
 }
 
 .ask-user-option:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(var(--overlay-rgb), 0.06);
   border-color: var(--accent);
 }
 
@@ -353,7 +353,7 @@
 }
 
 .ask-user-skip:hover {
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(var(--overlay-rgb), 0.04);
   color: var(--text-secondary);
   border-color: var(--text-dimmer);
 }
@@ -382,7 +382,7 @@
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(var(--overlay-rgb), 0.03);
   border: 1px solid var(--border);
   border-bottom: none;
   border-radius: 12px 12px 0 0;
@@ -398,7 +398,7 @@
   border: 1px solid var(--border);
   border-top: none;
   border-bottom: none;
-  background: rgba(255, 255, 255, 0.015);
+  background: rgba(var(--overlay-rgb), 0.015);
 }
 
 .permission-summary {
@@ -464,7 +464,7 @@
   border: 1px solid var(--border);
   border-top: none;
   border-radius: 0 0 12px 12px;
-  background: rgba(255, 255, 255, 0.015);
+  background: rgba(var(--overlay-rgb), 0.015);
 }
 
 .permission-btn {
@@ -485,7 +485,7 @@
 .permission-allow-session { background: var(--bg-alt); color: var(--text-secondary); border-color: var(--border); }
 .permission-allow-session:hover { background: var(--input-bg); opacity: 1; }
 .permission-deny { background: transparent; border-color: var(--border); color: var(--text-muted); }
-.permission-deny:hover { background: rgba(229, 83, 75, 0.08); border-color: var(--error); color: var(--error); opacity: 1; }
+.permission-deny:hover { background: var(--error-8); border-color: var(--error); color: var(--error); opacity: 1; }
 
 /* Resolved states */
 .permission-container.resolved .permission-btn { display: none; }
@@ -494,10 +494,10 @@
 .permission-container.resolved-allowed .permission-decision-label { color: var(--text-muted); }
 
 .permission-container.resolved-denied .permission-header {
-  border-color: rgba(229, 83, 75, 0.15);
+  border-color: var(--error-15);
 }
-.permission-container.resolved-denied .permission-body { border-color: rgba(229, 83, 75, 0.15); }
-.permission-container.resolved-denied .permission-actions { border-color: rgba(229, 83, 75, 0.15); }
+.permission-container.resolved-denied .permission-body { border-color: var(--error-15); }
+.permission-container.resolved-denied .permission-actions { border-color: var(--error-15); }
 .permission-container.resolved-denied .permission-decision-label { color: var(--error); }
 
 .permission-container.resolved-cancelled .permission-decision-label { color: var(--text-dimmer); }