clay-server 2.26.0-beta.1 → 2.26.0-beta.11

package/lib/public/css/messages.css

@@ -1798,6 +1798,23 @@ body.wide-view .msg-assistant:hover {
   background: var(--bg-alt);
 }
 
+/* Grouped messages: same sender within same minute, hide avatar + header */
+body.wide-view .msg-user.grouped > .dm-bubble-avatar,
+body.wide-view .msg-assistant.grouped > .dm-bubble-avatar,
+body.mate-dm-active .msg-assistant.grouped > .dm-bubble-avatar {
+  visibility: hidden;
+}
+body.wide-view .msg-user.grouped .dm-bubble-header,
+body.wide-view .msg-assistant.grouped .dm-bubble-header,
+body.mate-dm-active .msg-assistant.grouped .dm-bubble-header {
+  display: none;
+}
+body.wide-view .msg-user.grouped,
+body.wide-view .msg-assistant.grouped,
+body.mate-dm-active .msg-assistant.grouped {
+  padding-top: 1px;
+}
+
 body.wide-view .msg-user {
   justify-content: flex-start;
 }

package/lib/public/css/mobile-nav.css

@@ -342,7 +342,6 @@
     margin-bottom: 4px;
     background: none;
     border: none;
-    border-bottom: 1px solid var(--border-subtle);
     color: var(--accent);
     font-family: "Pretendard", system-ui, sans-serif;
     font-size: 15px;
@@ -351,6 +350,9 @@
     text-align: left;
     -webkit-tap-highlight-color: transparent;
   }
+  .mobile-session-new:last-of-type {
+    border-bottom: 1px solid var(--border-subtle);
+  }
 
   .mobile-session-new:active {
     background: rgba(var(--overlay-rgb), 0.06);

package/lib/public/css/overlays.css

@@ -123,6 +123,187 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
 }
 .pwa-standalone .top-bar-share-btn { display: none !important; }
 
+/* Extension pill button — same style as share/install pills */
+.ext-pill-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.top-bar-ext-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
+  color: var(--text-secondary);
+  border: none;
+  border-radius: 10px;
+  padding: 2px 10px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 1;
+  transition: background 0.15s, color 0.15s;
+}
+.top-bar-ext-btn .lucide { width: 12px; height: 12px; }
+.top-bar-ext-btn:hover { background: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text); }
+@media (max-width: 768px) {
+  .top-bar-ext-btn span { display: none; }
+}
+
+/* Extension popover */
+.ext-popover {
+  display: none;
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  z-index: 200;
+  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.35);
+  width: 340px;
+}
+.ext-popover.visible { display: block; }
+.ext-popover-header { margin-bottom: 8px; }
+.ext-popover-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+.ext-experimental {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--warning, #f59e0b);
+  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent);
+  padding: 2px 6px;
+  border-radius: 6px;
+  vertical-align: middle;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  position: relative;
+  top: -1px;
+}
+.ext-popover-sub {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.ext-popover-sub a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.ext-popover-sub a:hover { text-decoration: underline; }
+.ext-popover-desc {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+.ext-popover-download {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 0;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.ext-popover-download .lucide { width: 14px; height: 14px; }
+.ext-popover-download:hover { opacity: 0.85; }
+.ext-popover-download:disabled { opacity: 0.5; cursor: default; }
+.ext-popover-status {
+  font-size: 11px;
+  color: var(--accent);
+  text-align: center;
+  margin-top: 6px;
+}
+.ext-popover-status.hidden { display: none; }
+.ext-popover-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 12px 0;
+}
+.ext-popover-guide-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+.ext-popover-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ext-popover-step {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+.ext-snum {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  flex-shrink: 0;
+  position: relative;
+  top: 1px;
+}
+.ext-popover-code {
+  font-family: "Roboto Mono", monospace;
+  font-size: 11px;
+  background: var(--bg-tertiary);
+  padding: 1px 5px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ext-popover-code:hover { background: color-mix(in srgb, var(--accent) 15%, var(--bg-tertiary)); }
+
+/* Extension connected state */
+.top-bar-ext-btn.ext-connected {
+  background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent);
+  color: var(--success, #22c55e);
+}
+.top-bar-ext-btn.ext-connected:hover {
+  background: color-mix(in srgb, var(--success, #22c55e) 20%, transparent);
+  color: var(--success, #22c55e);
+}
+.ext-popover-connected {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
+  color: var(--success, #22c55e);
+  border-radius: 8px;
+  font-size: 12.5px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+.ext-popover-connected .lucide { width: 15px; height: 15px; }
+.ext-popover-connected.hidden { display: none; }
+
 /* PWA install modal */
 .pwa-modal {
   position: fixed;

package/lib/public/css/rewind.css

@@ -171,6 +171,85 @@
 
 .sys-msg.error .sys-text { color: var(--error); }
 
+/* ==========================================================================
+   Context Card (browser tab preview shown between user msg and assistant response)
+   ========================================================================== */
+
+.context-card {
+  max-width: 400px;
+  margin: 8px auto 12px;
+  padding: 12px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.08);
+}
+
+.context-card-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+  font-size: 11px;
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
+  font-weight: 500;
+}
+
+.context-card-header .context-card-icon {
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+.context-card-screenshot {
+  display: block;
+  width: 100%;
+  max-height: 200px;
+  object-fit: contain;
+  border-radius: 8px;
+  background: var(--bg);
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.context-card-screenshot:hover {
+  transform: scale(1.01);
+}
+
+.context-card-skeleton {
+  width: 100%;
+  height: 120px;
+  border-radius: 8px;
+  background: var(--bg);
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.context-card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-top: 8px;
+  gap: 12px;
+}
+
+.context-card-title {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.context-card-domain {
+  font-size: 11px;
+  color: var(--text-dimmer);
+  font-family: monospace;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 /* ==========================================================================
    Activity Indicator
    ========================================================================== */

package/lib/public/css/server-settings.css

@@ -906,3 +906,4 @@
   line-height: 1.45;
   margin-top: 2px;
 }
+

package/lib/public/css/sidebar.css

@@ -257,6 +257,16 @@
   letter-spacing: 0.5px;
 }
 
+/* --- Section labels --- */
+.sidebar-section-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 4px 12px 2px;
+}
+
 /* --- Tools section --- */
 #sidebar-tools {
   flex-shrink: 0;

package/lib/public/css/title-bar.css

@@ -23,8 +23,8 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  background: color-mix(in srgb, var(--success) 12%, transparent);
-  color: var(--success);
+  background: color-mix(in srgb, #3b82f6 12%, transparent);
+  color: #3b82f6;
   border: none;
   border-radius: 10px;
   padding: 2px 10px;
@@ -38,7 +38,7 @@
 }
 
 .top-bar-update-btn .lucide { width: 12px; height: 12px; }
-.top-bar-update-btn:hover { background: color-mix(in srgb, var(--success) 20%, transparent); }
+.top-bar-update-btn:hover { background: color-mix(in srgb, #3b82f6 20%, transparent); }
 
 /* --- Top bar actions (right-aligned group) --- */
 .top-bar-actions {
@@ -342,6 +342,7 @@
   gap: 6px;
   width: 80px;
   cursor: default;
+  position: relative;
 }
 
 .header-context-bar {
@@ -370,6 +371,191 @@
   white-space: nowrap;
 }
 
+/* --- Context usage popover --- */
+.context-usage-popover {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: -12px;
+  width: 320px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 16px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
+  z-index: 200;
+  animation: ctx-popover-in 0.12s ease-out;
+  line-height: 1.5;
+}
+
+.context-usage-popover.hidden { display: none; }
+
+@keyframes ctx-popover-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Header */
+.ctx-pop-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 12px;
+}
+
+.ctx-pop-model {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: "Roboto Mono", monospace;
+}
+
+.ctx-pop-pct {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text);
+  font-family: "Roboto Mono", monospace;
+  letter-spacing: -0.5px;
+}
+
+.ctx-pop-tokens {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: "Roboto Mono", monospace;
+  margin-left: 6px;
+  font-weight: 400;
+}
+
+/* Stacked category bar */
+.ctx-cat-bar {
+  display: flex;
+  height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  background: var(--border);
+  margin-bottom: 12px;
+  gap: 1px;
+}
+
+.ctx-cat-bar > div {
+  height: 100%;
+  min-width: 3px;
+  transition: width 0.3s ease;
+  border-radius: 2px;
+}
+
+/* Category legend */
+.ctx-cat-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-bottom: 4px;
+}
+
+.ctx-cat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 12px;
+  padding: 3px 0;
+  border-radius: 4px;
+  transition: background 0.1s ease;
+}
+
+.ctx-cat-item:hover {
+  background: rgba(var(--overlay-rgb), 0.03);
+}
+
+.ctx-emoji {
+  display: inline-block;
+  filter: grayscale(1);
+  font-size: 12px;
+  transition: filter 0.15s ease;
+}
+
+.ctx-cat-item:hover .ctx-emoji,
+.ctx-pop-row:hover .ctx-emoji,
+.ctx-pop-note .ctx-emoji {
+  filter: grayscale(0);
+}
+
+.ctx-cat-name {
+  color: var(--text-secondary);
+}
+
+.ctx-cat-value {
+  font-family: "Roboto Mono", monospace;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Sections */
+.ctx-pop-divider {
+  border: none;
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 10px 0;
+}
+
+.ctx-pop-section-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.8px;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.ctx-pop-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  padding: 3px 0;
+  border-radius: 4px;
+  transition: background 0.1s ease;
+}
+
+.ctx-pop-row:hover {
+  background: rgba(var(--overlay-rgb), 0.03);
+}
+
+.ctx-pop-row-label {
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 12px;
+}
+
+.ctx-pop-row-value {
+  font-family: "Roboto Mono", monospace;
+  color: var(--text-muted);
+  font-size: 11px;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.ctx-pop-note {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 10px;
+  text-align: center;
+  padding: 4px 8px;
+  background: var(--border-subtle);
+  border-radius: 4px;
+  font-family: "Roboto Mono", monospace;
+}
+
+@media (max-width: 400px) {
+  .context-usage-popover {
+    width: 260px;
+    right: -8px;
+  }
+}
+
 /* --- Shared pill style for rate limit & fast mode --- */
 .header-rate-limit,
 .header-fast-mode {

package/lib/public/index.html

@@ -52,6 +52,28 @@
   <div id="top-bar">
     <div class="top-bar-left-pills">
       <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Open as app"><i data-lucide="download"></i> Open as app</button>
+      <div id="ext-pill-wrap" class="ext-pill-wrap">
+        <button id="ext-pill" class="top-bar-ext-btn" title="Chrome Extension"><i data-lucide="puzzle"></i> Extension</button>
+        <div id="ext-popover" class="ext-popover">
+          <div class="ext-popover-header">
+            <div class="ext-popover-title">Clay for Chrome <span class="ext-experimental">Experimental</span></div>
+            <div class="ext-popover-sub">v0.1.0 &middot; <a href="https://github.com/chadbyte/clay-chrome" target="_blank" rel="noopener">GitHub</a></div>
+          </div>
+          <div class="ext-popover-connected hidden" id="ext-connected-banner"><i data-lucide="check-circle"></i> Extension connected</div>
+          <div class="ext-popover-desc" id="ext-popover-desc">Connect your browser to Clay. Gives Claude visibility into open tabs, console, network, DOM, and screenshots.</div>
+          <button class="ext-popover-download" id="ext-download-btn"><i data-lucide="download"></i> Download Extension (.zip)</button>
+          <div class="ext-popover-status hidden" id="ext-download-status"></div>
+          <div class="ext-popover-divider" id="ext-popover-divider"></div>
+          <div class="ext-popover-guide-title" id="ext-popover-guide-title">Installation</div>
+          <div class="ext-popover-steps">
+            <div class="ext-popover-step"><span class="ext-snum">1</span> Download above, then unzip to a permanent folder.</div>
+            <div class="ext-popover-step"><span class="ext-snum">2</span> Open <code id="ext-copy-url" class="ext-popover-code" title="Click to copy">chrome://extensions</code></div>
+            <div class="ext-popover-step"><span class="ext-snum">3</span> Enable <strong>Developer mode</strong> (top-right toggle).</div>
+            <div class="ext-popover-step"><span class="ext-snum">4</span> <strong>Load unpacked</strong> > select the unzipped folder.</div>
+            <div class="ext-popover-step"><span class="ext-snum">5</span> Refresh this page. Done!</div>
+          </div>
+        </div>
+      </div>
       <button id="share-pill" class="top-bar-share-btn" title="Share"><i data-lucide="qr-code"></i> Share</button>
       <div id="update-pill-wrap" class="top-bar-update hidden">
         <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
@@ -234,11 +256,11 @@
         <button id="mate-sticky-notes-btn"><i data-lucide="sticky-note"></i> <span>Sticky Notes</span></button>
         <button id="mate-skills-btn"><i data-lucide="puzzle"></i> <span>Skills</span></button>
         <button id="mate-scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
-        <button id="mate-debate-btn"><i data-lucide="mic"></i> <span>Debate</span></button>
       </div>
       <div id="mate-sidebar-conversations">
         <div class="mate-sidebar-sessions-header">
           <span>Conversations</span>
+          <button id="mate-debate-btn" class="mate-debate-pill" title="New Debate"><i data-lucide="mic"></i> Debate</button>
           <div class="mate-sidebar-actions">
             <button id="mate-search-session-btn" type="button" title="Search sessions"><i data-lucide="search"></i></button>
             <button id="mate-new-session-btn" type="button" title="New session"><i data-lucide="plus"></i></button>
@@ -310,7 +332,6 @@
           <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
           <button id="header-rename-btn" type="button" title="Rename session"><i data-lucide="pencil"></i></button>
           <div id="mate-mobile-title" class="mate-mobile-title hidden">
-            <button id="mate-mobile-back" class="mate-mobile-back" type="button" aria-label="Back"><i data-lucide="chevron-left"></i></button>
             <img id="mate-mobile-avatar" class="mate-mobile-avatar" alt="">
             <span id="mate-mobile-name" class="mate-mobile-name"></span>
           </div>
@@ -415,7 +436,14 @@
       <div id="input-wrapper">
         <div id="mention-menu"></div>
         <div id="slash-menu"></div>
-        <div id="suggestion-chips" class="hidden"></div>
+        <div id="context-sources-bar">
+          <div id="context-sources-chips"></div>
+          <button id="context-sources-add" type="button" title="Add context source"><i data-lucide="plus"></i><span>Context Sources</span></button>
+          <div id="context-sources-picker" class="hidden">
+            <div class="context-picker-section" id="context-picker-terminals"></div>
+            <div class="context-picker-section" id="context-picker-tabs"></div>
+          </div>
+        </div>
         <div id="input-row">
           <div id="context-mini" class="hidden">
             <div class="context-mini-bar">
@@ -424,6 +452,7 @@
             <span class="context-mini-label" id="context-mini-label">0%</span>
           </div>
           <div id="image-preview-bar"></div>
+          <div id="suggestion-chips" class="hidden"></div>
           <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send" dir="auto"></textarea>
           <div id="input-bottom">
             <div id="attach-wrap">
@@ -1477,30 +1506,38 @@
   </div>
 </div>
 
-<!-- Debate Modal -->
+<!-- Debate Modal (Wizard) -->
 <div id="debate-modal" class="hidden">
   <div class="debate-modal-backdrop"></div>
   <div class="debate-modal-card">
     <div class="debate-modal-header">
       <span><i data-lucide="mic"></i> New Debate</span>
+      <div class="debate-wizard-steps">
+        <span class="debate-step-dot active" data-step="0"></span>
+        <span class="debate-step-dot" data-step="1"></span>
+      </div>
       <button id="debate-modal-close">&times;</button>
     </div>
-    <div class="debate-modal-body">
-      <label class="debate-field-label" for="debate-topic-input">Topic <span class="debate-field-req">*</span></label>
-      <textarea id="debate-topic-input" rows="2" placeholder="e.g. Should AI development be regulated?"></textarea>
-      <label class="debate-field-label" for="debate-panel-list">Select panelists</label>
-      <div id="debate-panel-list" class="debate-panel-list"></div>
-      <div id="debate-skip-setup-row" class="debate-skip-setup-row hidden">
-        <label class="debate-toggle-label">
-          <input type="checkbox" id="debate-skip-setup-toggle">
-          <span>Skip setup</span>
-          <span class="debate-skip-setup-hint">Moderator generates the brief automatically from conversation context</span>
-        </label>
+    <!-- Step 0: Topic -->
+    <div class="debate-wizard-page active" data-step="0">
+      <div class="debate-modal-body">
+        <label class="debate-field-label" for="debate-topic-input">Topic <span class="debate-field-req">*</span></label>
+        <textarea id="debate-topic-input" rows="2" placeholder="e.g. Should AI development be regulated?"></textarea>
+      </div>
+    </div>
+    <!-- Step 1: Panelists -->
+    <div class="debate-wizard-page" data-step="1">
+      <div class="debate-modal-body">
+        <label class="debate-field-label" for="debate-panel-list">Select panelists</label>
+        <div id="debate-panel-list" class="debate-panel-list"></div>
       </div>
     </div>
     <div class="debate-modal-footer">
       <button id="debate-modal-cancel" class="debate-btn-cancel">Cancel</button>
-      <button id="debate-modal-start" class="debate-btn-start">Start</button>
+      <button id="debate-modal-back" class="debate-btn-back hidden">Back</button>
+      <button id="debate-modal-quick" class="debate-btn-quick hidden">Quick Start</button>
+      <button id="debate-modal-next" class="debate-btn-next hidden">Choose Panel</button>
+      <button id="debate-modal-start" class="debate-btn-start hidden">Design Debate</button>
     </div>
   </div>
 </div>