clay-server 2.26.0-beta.4 → 2.26.0-beta.6

package/lib/public/app.js

@@ -12,7 +12,7 @@ import { initInput, clearPendingImages, handleInputSync, autoResize, builtinComm
 import { initQrCode, triggerShare } from './modules/qrcode.js';
 import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFsRead, handleDirChanged, refreshIfOpen, handleFileChanged, handleFileHistory, handleGitDiff, handleFileAt, getPendingNavigate, closeFileViewer, resetFileBrowser } from './modules/filebrowser.js';
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermResized, handleTermExited, handleTermClosed, sendTerminalCommand } from './modules/terminal.js';
-import { initContextSources, updateTerminalList, handleContextSourcesState, getActiveSources, hasActiveSources } from './modules/context-sources.js';
+import { initContextSources, updateTerminalList, updateBrowserTabList, handleContextSourcesState, getActiveSources, hasActiveSources } from './modules/context-sources.js';
 import { initStickyNotes, handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted, openArchive, closeArchive, isArchiveOpen, hideNotes, showNotes, isNotesVisible } from './modules/sticky-notes.js';
 import { initTheme, getThemeColor, getComputedVar, onThemeChange, getCurrentTheme } from './modules/theme.js';
 import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderElicitationRequest, markElicitationResolved, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, resetThinkingGroup, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, resetTurnMetaCost, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, updateSubagentProgress, initSubagentStop, closeToolGroup, removeToolFromGroup } from './modules/tools.js';
@@ -2599,6 +2599,9 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   var contextMiniLabel = $("context-mini-label");
   var contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
   var headerContextEl = null;
+  var richContextUsage = null;
+  var ctxPopoverEl = null;
+  var ctxPopoverVisible = false;
 
   // Known context window sizes per model (fallback when SDK omits feature flag)
   var KNOWN_CONTEXT_WINDOWS = {
@@ -2646,6 +2649,14 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
         headerContextEl.className = "header-context";
         headerContextEl.innerHTML = '<div class="header-context-bar"><div class="header-context-fill"></div></div><span class="header-context-label"></span>';
         statusArea.insertBefore(headerContextEl, statusArea.firstChild);
+        headerContextEl.addEventListener("mouseenter", function() {
+          if (richContextUsage) {
+            showCtxPopover();
+          }
+        });
+        headerContextEl.addEventListener("mouseleave", function() {
+          ctxHoverTimer = setTimeout(hideCtxPopover, 120);
+        });
       }
       if (headerContextEl) {
         var hFill = headerContextEl.querySelector(".header-context-fill");
@@ -2653,7 +2664,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
         hFill.style.width = pct.toFixed(1) + "%";
         hFill.className = "header-context-fill" + cls;
         hLabel.textContent = pct.toFixed(0) + "%";
-        headerContextEl.dataset.tip = "Context window " + pct.toFixed(0) + "% used (" + formatTokens(used) + " / " + formatTokens(win) + " tokens)";
+        // Use data-tip as fallback when rich data is not yet loaded
+        if (richContextUsage) {
+          headerContextEl.removeAttribute("data-tip");
+        } else {
+          headerContextEl.dataset.tip = "Context window " + pct.toFixed(0) + "% used (" + formatTokens(used) + " / " + formatTokens(win) + " tokens)";
+        }
       }
     }
     contextUsedEl.textContent = formatTokens(used);
@@ -2718,9 +2734,158 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
 
   function resetContextData() {
     contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+    richContextUsage = null;
+    hideCtxPopover();
     updateContextPanel();
   }
 
+  // --- Rich context usage popover ---
+
+  var ctxHoverTimer = null;
+
+  function ensureCtxPopover() {
+    if (ctxPopoverEl) return;
+    ctxPopoverEl = document.createElement("div");
+    ctxPopoverEl.className = "context-usage-popover hidden";
+    // Keep popover open when hovering over it
+    ctxPopoverEl.addEventListener("mouseenter", function() {
+      if (ctxHoverTimer) { clearTimeout(ctxHoverTimer); ctxHoverTimer = null; }
+    });
+    ctxPopoverEl.addEventListener("mouseleave", function() {
+      hideCtxPopover();
+    });
+  }
+
+  function showCtxPopover() {
+    if (!headerContextEl || !richContextUsage) return;
+    if (ctxHoverTimer) { clearTimeout(ctxHoverTimer); ctxHoverTimer = null; }
+    ensureCtxPopover();
+    headerContextEl.appendChild(ctxPopoverEl);
+    renderCtxPopover();
+    ctxPopoverEl.classList.remove("hidden");
+    ctxPopoverVisible = true;
+  }
+
+  function hideCtxPopover() {
+    if (!ctxPopoverEl) return;
+    ctxPopoverEl.classList.add("hidden");
+    ctxPopoverVisible = false;
+  }
+
+  // Categories to hide from the legend (noise, not actionable)
+  var CTX_HIDDEN_CATS = { "Free space": 1, "Autocompact buffer": 1 };
+
+  function renderCtxPopover() {
+    if (!ctxPopoverEl || !richContextUsage) return;
+    var d = richContextUsage;
+    var cats = d.categories || [];
+    var total = d.totalTokens || 0;
+    var max = d.maxTokens || 0;
+    var pct = d.percentage != null ? d.percentage : (max > 0 ? (total / max) * 100 : 0);
+
+    var html = "";
+
+    // Header
+    html += '<div class="ctx-pop-header">';
+    html += '<span class="ctx-pop-model">' + escHtml(d.model || contextData.model || "-") + '</span>';
+    html += '<span class="ctx-pop-pct">' + pct.toFixed(0) + '%';
+    html += '<span class="ctx-pop-tokens">' + formatTokens(total) + ' / ' + formatTokens(max) + '</span>';
+    html += '</span>';
+    html += '</div>';
+
+    // Category emoji map
+    var CTX_EMOJI = {
+      "System prompt": "\ud83d\udcdc", "System tools": "\ud83d\udee0\ufe0f",
+      "Memory files": "\ud83d\udcc1", "Skills": "\u26a1", "Messages": "\ud83d\udcac",
+      "MCP tools": "\ud83d\udd0c", "Agents": "\ud83e\udd16", "Deferred tools": "\ud83d\udce6"
+    };
+
+    // Stacked bar
+    if (cats.length > 0 && max > 0) {
+      html += '<div class="ctx-cat-bar">';
+      for (var i = 0; i < cats.length; i++) {
+        var cat = cats[i];
+        if (cat.isDeferred || !cat.tokens || CTX_HIDDEN_CATS[cat.name]) continue;
+        var w = Math.max(0.3, (cat.tokens / max) * 100);
+        html += '<div style="width:' + w.toFixed(2) + '%;background:' + escHtml(cat.color) + '"></div>';
+      }
+      html += '</div>';
+
+      // Legend
+      html += '<div class="ctx-cat-legend">';
+      for (var j = 0; j < cats.length; j++) {
+        var c = cats[j];
+        if (c.isDeferred || !c.tokens || CTX_HIDDEN_CATS[c.name]) continue;
+        var emoji = CTX_EMOJI[c.name] || "\ud83d\udcca";
+        html += '<div class="ctx-cat-item">';
+        html += '<span class="ctx-cat-name">' + em(emoji) + ' ' + escHtml(c.name) + '</span>';
+        html += '<span class="ctx-cat-value">' + formatTokens(c.tokens) + '</span>';
+        html += '</div>';
+      }
+      html += '</div>';
+    }
+
+    // Message breakdown
+    var mb = d.messageBreakdown;
+    if (mb) {
+      html += '<div class="ctx-pop-divider"></div>';
+      html += '<div class="ctx-pop-section-label">' + em("\ud83d\udcac") + ' Messages</div>';
+      if (mb.userMessageTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udc64") + ' User</span><span class="ctx-pop-row-value">' + formatTokens(mb.userMessageTokens) + '</span></div>';
+      }
+      if (mb.assistantMessageTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83e\udd16") + ' Assistant</span><span class="ctx-pop-row-value">' + formatTokens(mb.assistantMessageTokens) + '</span></div>';
+      }
+      if (mb.toolCallTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udee0\ufe0f") + ' Tool calls</span><span class="ctx-pop-row-value">' + formatTokens(mb.toolCallTokens) + '</span></div>';
+      }
+      if (mb.toolResultTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udccb") + ' Tool results</span><span class="ctx-pop-row-value">' + formatTokens(mb.toolResultTokens) + '</span></div>';
+      }
+      if (mb.attachmentTokens) {
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udcce") + ' Attachments</span><span class="ctx-pop-row-value">' + formatTokens(mb.attachmentTokens) + '</span></div>';
+      }
+    }
+
+    // Memory files
+    var mf = d.memoryFiles;
+    if (mf && mf.length > 0) {
+      html += '<div class="ctx-pop-divider"></div>';
+      html += '<div class="ctx-pop-section-label">' + em("\ud83d\udcc1") + ' Memory Files</div>';
+      var baseCount = {};
+      for (var mc = 0; mc < mf.length; mc++) {
+        var bn = mf[mc].path.split("/").pop() || mf[mc].path;
+        baseCount[bn] = (baseCount[bn] || 0) + 1;
+      }
+      for (var mi = 0; mi < mf.length; mi++) {
+        var fpath = mf[mi].path;
+        var fname = fpath.split("/").pop() || fpath;
+        if (baseCount[fname] > 1) {
+          var parts = fpath.split("/");
+          fname = parts.length >= 2 ? parts[parts.length - 2] + "/" + fname : fpath;
+        }
+        html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udcc4") + ' ' + escHtml(fname) + '</span><span class="ctx-pop-row-value">' + formatTokens(mf[mi].tokens) + '</span></div>';
+      }
+    }
+
+    // Auto-compact note
+    if (d.isAutoCompactEnabled && d.autoCompactThreshold) {
+      html += '<div class="ctx-pop-note">' + em("\u267b\ufe0f") + ' Auto-compact at ' + formatTokens(d.autoCompactThreshold) + '</div>';
+    }
+
+    ctxPopoverEl.innerHTML = html;
+  }
+
+  function escHtml(s) {
+    var div = document.createElement("div");
+    div.textContent = s;
+    return div.innerHTML;
+  }
+
+  function em(emoji) {
+    return '<span class="ctx-emoji">' + emoji + '</span>';
+  }
+
   function resetContext() {
     resetContextData();
     // Keep view state, just reset data
@@ -4052,6 +4217,10 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
 
         case "history_done":
           replayingHistory = false;
+          // Restore cached rich context usage BEFORE updateContextPanel runs
+          if (msg.contextUsage) {
+            richContextUsage = msg.contextUsage;
+          }
           // Restore accurate context data from the last result in full history
           if (msg.lastUsage || msg.lastModelUsage) {
             accumulateContext(msg.lastCost, msg.lastUsage, msg.lastModelUsage, msg.lastStreamInputTokens);
@@ -4419,6 +4588,59 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           }
           break;
 
+        case "context_preview":
+          // Show a Context Card with tab screenshot between user message and assistant response
+          if (msg.tab) {
+            var card = document.createElement("div");
+            card.className = "context-card";
+
+            // Header
+            var header = document.createElement("div");
+            header.className = "context-card-header";
+            var icon = document.createElement("span");
+            icon.className = "context-card-icon";
+            icon.textContent = "\uD83D\uDC41";
+            header.appendChild(icon);
+            var label = document.createElement("span");
+            label.textContent = "Viewing tab";
+            header.appendChild(label);
+            card.appendChild(header);
+
+            // Screenshot
+            if (msg.tab.screenshotUrl) {
+              var img = document.createElement("img");
+              img.className = "context-card-screenshot";
+              img.src = msg.tab.screenshotUrl;
+              img.loading = "lazy";
+              img.addEventListener("click", function () { showImageModal(this.src); });
+              card.appendChild(img);
+            }
+
+            // Meta: title + domain
+            var tabTitle = msg.tab.title || "";
+            var tabDomain = "";
+            try { tabDomain = new URL(msg.tab.url).hostname; } catch (e) {}
+            if (tabTitle || tabDomain) {
+              var meta = document.createElement("div");
+              meta.className = "context-card-meta";
+              var titleEl = document.createElement("span");
+              titleEl.className = "context-card-title";
+              titleEl.textContent = tabTitle;
+              meta.appendChild(titleEl);
+              if (tabDomain) {
+                var domainEl = document.createElement("span");
+                domainEl.className = "context-card-domain";
+                domainEl.textContent = tabDomain;
+                meta.appendChild(domainEl);
+              }
+              card.appendChild(meta);
+            }
+
+            messagesEl.appendChild(card);
+            scrollToBottom();
+          }
+          break;
+
         case "status":
           if (msg.status === "processing") {
             setStatus("processing");
@@ -4614,6 +4836,14 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           accumulateContext(msg.cost, msg.usage, msg.modelUsage, msg.lastStreamInputTokens);
           break;
 
+        case "context_usage":
+          if (msg.data && !replayingHistory) {
+            richContextUsage = msg.data;
+            if (headerContextEl) headerContextEl.removeAttribute("data-tip");
+            if (ctxPopoverVisible) renderCtxPopover();
+          }
+          break;
+
         case "done":
           setActivity(null);
           stopThinking();
@@ -4795,6 +5025,10 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           handleContextSourcesState(msg);
           break;
 
+        case "extension_command":
+          sendExtensionCommand(msg.command, msg.args, msg.requestId);
+          break;
+
         case "term_created":
           handleTermCreated(msg);
           if (pendingTermCommand) {
@@ -5765,6 +5999,59 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     get connected() { return connected; },
   });
 
+  // --- Chrome Extension Bridge ---
+  var _extRequestCallbacks = {}; // requestId -> callback function
+
+  function sendExtensionCommand(command, args, requestId) {
+    window.postMessage({
+      source: "clay-page",
+      payload: {
+        type: "clay_ext_command",
+        command: command,
+        args: args,
+        requestId: requestId
+      }
+    }, "*");
+  }
+
+  function handleExtensionResult(requestId, result) {
+    // Check local callback first (for server-initiated requests)
+    var cb = _extRequestCallbacks[requestId];
+    if (cb) {
+      delete _extRequestCallbacks[requestId];
+      cb(result);
+      return;
+    }
+    // Forward to server
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({
+        type: "extension_result",
+        requestId: requestId,
+        result: result
+      }));
+    }
+  }
+
+  window.addEventListener("message", function(event) {
+    if (event.source !== window) return;
+    if (!event.data || event.data.source !== "clay-chrome-extension") return;
+    var msg = event.data.payload;
+
+    if (msg.type === "clay_ext_tab_list") {
+      updateBrowserTabList(msg.tabs);
+      // Also inform server about tab list
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({
+          type: "browser_tab_list",
+          tabs: msg.tabs
+        }));
+      }
+    }
+    if (msg.type === "clay_ext_result") {
+      handleExtensionResult(msg.requestId, msg.result);
+    }
+  });
+
   // --- Playbook Engine ---
   initPlaybook();
 

package/lib/public/css/input.css

@@ -328,6 +328,12 @@
   white-space: nowrap;
   border: 1px solid var(--border);
   transition: border-color 0.15s;
+  animation: chipIn 0.3s ease-out;
+}
+
+@keyframes chipIn {
+  from { opacity: 0; transform: translateY(6px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .context-chip-label {
@@ -368,6 +374,8 @@
   bottom: calc(100% + 4px);
   left: 0;
   min-width: 200px;
+  max-height: 320px;
+  overflow-y: auto;
   background: var(--sidebar-bg);
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -430,6 +438,14 @@
   text-align: center;
 }
 
+.context-picker-favicon {
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
 /* ==========================================================================
    Input Area — Claude-style unified container
    ========================================================================== */

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;
 }
+