clay-server 2.26.0-beta.5 → 2.26.0-beta.7

package/lib/project.js

@@ -161,8 +161,13 @@ function createProjectContext(opts) {
   var worktreeMeta = opts.worktreeMeta || null; // { parentSlug, branch, accessible }
   var isMate = opts.isMate || false;
   var onCreateWorktree = opts.onCreateWorktree || null;
+  var serverPort = opts.port || 2633;
+  var serverTls = opts.tls || false;
   var latestVersion = null;
 
+  // Browser MCP server runs in-process via createSdkMcpServer (no child process spawn).
+  // Do NOT write to .claude-local/settings.json -- the SDK reads that too, causing duplicate spawns.
+
   // --- Chat image storage ---
   var _imgConfig = require("./config");
   var _imgUtils = require("./utils");
@@ -172,7 +177,18 @@ function createProjectContext(opts) {
 
   // Convert imageRefs in history entries to images with URLs for the client
   function hydrateImageRefs(entry) {
-    if (!entry || !entry.imageRefs) return entry;
+    if (!entry) return entry;
+    // Hydrate context_preview: convert screenshotFile to screenshotUrl
+    if (entry.type === "context_preview" && entry.tab && entry.tab.screenshotFile) {
+      var hydrated = {};
+      for (var k in entry) hydrated[k] = entry[k];
+      hydrated.tab = {};
+      for (var tk in entry.tab) hydrated.tab[tk] = entry.tab[tk];
+      hydrated.tab.screenshotUrl = "/p/" + slug + "/images/" + entry.tab.screenshotFile;
+      delete hydrated.tab.screenshotFile;
+      return hydrated;
+    }
+    if (!entry.imageRefs) return entry;
     if (entry.type !== "user_message" && entry.type !== "mention_user") return entry;
     var images = [];
     for (var ri = 0; ri < entry.imageRefs.length; ri++) {
@@ -180,8 +196,8 @@ function createProjectContext(opts) {
       images.push({ mediaType: ref.mediaType, url: "/p/" + slug + "/images/" + ref.file });
     }
     var hydrated = {};
-    for (var k in entry) {
-      if (k !== "imageRefs") hydrated[k] = entry[k];
+    for (var k2 in entry) {
+      if (k2 !== "imageRefs") hydrated[k2] = entry[k2];
     }
     hydrated.images = images;
     return hydrated;
@@ -275,6 +291,60 @@ function createProjectContext(opts) {
   // --- Per-project clients ---
   var clients = new Set();
 
+  // --- Browser extension state ---
+  var _browserTabList = {}; // tabId -> { id, url, title, favIconUrl }
+  var _extensionWs = null; // WebSocket of the client with the Chrome extension
+  var _extToken = crypto.randomUUID(); // Auth token for MCP server bridge
+  var pendingExtensionRequests = {}; // requestId -> { resolve, timer }
+
+  function sendExtensionCommand(ws, command, args, timeout) {
+    return new Promise(function(resolve) {
+      var requestId = crypto.randomUUID();
+      var ms = timeout || 3000;
+      var timer = setTimeout(function() {
+        delete pendingExtensionRequests[requestId];
+        resolve(null);
+      }, ms);
+      pendingExtensionRequests[requestId] = { resolve: resolve, timer: timer };
+      sendTo(ws, {
+        type: "extension_command",
+        command: command,
+        args: args,
+        requestId: requestId
+      });
+    });
+  }
+
+  // Send extension command via the tracked extension client (for MCP bridge)
+  function sendExtensionCommandAny(command, args, timeout) {
+    if (!_extensionWs || _extensionWs.readyState !== 1) {
+      return Promise.reject(new Error("Browser extension not connected"));
+    }
+    return sendExtensionCommand(_extensionWs, command, args, timeout);
+  }
+
+  function requestTabContext(ws, tabId) {
+    // Try inject first (best-effort), then request all data in parallel.
+    // Even if inject fails (CSP etc.), page text and screenshot still work.
+    return sendExtensionCommand(ws, "tab_inject", { tabId: tabId }).then(function() {}, function() {}).then(function() {
+      return Promise.all([
+        sendExtensionCommand(ws, "tab_console", { tabId: tabId }),
+        sendExtensionCommand(ws, "tab_network", { tabId: tabId }),
+        sendExtensionCommand(ws, "tab_page_text", { tabId: tabId }),
+        sendExtensionCommand(ws, "tab_screenshot", { tabId: tabId })
+      ]);
+    }).then(function(results) {
+      return {
+        console: results[0],
+        network: results[1],
+        pageText: results[2],
+        screenshot: results[3]
+      };
+    }).catch(function() {
+      return null;
+    });
+  }
+
   function send(obj) {
     var data = JSON.stringify(obj);
     for (var ws of clients) {
@@ -487,6 +557,45 @@ function createProjectContext(opts) {
     mateDisplayName: opts.mateDisplayName || "",
     isMate: isMate,
     dangerouslySkipPermissions: dangerouslySkipPermissions,
+    mcpServers: isMate ? undefined : (function () {
+      try {
+        var browserMcp = require("./browser-mcp-server");
+        var mcpConfig = browserMcp.create(sendExtensionCommandAny, function () {
+          return Object.values(_browserTabList || {});
+        }, {
+          watchTab: function (tabId) {
+            var key = "tab:" + tabId;
+            var active = loadContextSources(slug);
+            if (active.indexOf(key) === -1) {
+              active.push(key);
+              saveContextSources(slug, active);
+              var msg = JSON.stringify({ type: "context_sources_state", active: active });
+              for (var c of clients) { if (c.readyState === 1) c.send(msg); }
+            }
+            return active;
+          },
+          unwatchTab: function (tabId) {
+            var key = "tab:" + tabId;
+            var active = loadContextSources(slug);
+            var idx = active.indexOf(key);
+            if (idx !== -1) {
+              active.splice(idx, 1);
+              saveContextSources(slug, active);
+              var msg = JSON.stringify({ type: "context_sources_state", active: active });
+              for (var c of clients) { if (c.readyState === 1) c.send(msg); }
+            }
+            return active;
+          },
+        });
+        if (!mcpConfig) return undefined;
+        var servers = {};
+        servers[mcpConfig.name || "clay-browser"] = mcpConfig;
+        return servers;
+      } catch (e) {
+        console.error("[project] Failed to create browser MCP server:", e.message);
+        return undefined;
+      }
+    })(),
     onProcessingChanged: onProcessingChanged,
     onTurnDone: isMate ? function (session, preview) { digestDmTurn(session, preview); } : null,
     scheduleMessage: function (session, text, resetsAt) {
@@ -1263,7 +1372,9 @@ function createProjectContext(opts) {
     }
     sendTo(ws, { type: "config_state", model: sm.currentModel || "", mode: sm.currentPermissionMode || "default", effort: sm.currentEffort || "medium", betas: sm.currentBetas || [], thinking: sm.currentThinking || "adaptive", thinkingBudget: sm.currentThinkingBudget || 10000 });
     sendTo(ws, { type: "term_list", terminals: tm.list() });
-    sendTo(ws, { type: "context_sources_state", active: loadContextSources(slug) });
+    // Restore context sources (keep tab: sources — validated against _browserTabList at query time)
+    var restoredSources = loadContextSources(slug);
+    sendTo(ws, { type: "context_sources_state", active: restoredSources });
     sendTo(ws, { type: "notes_list", notes: nm.list() });
     sendTo(ws, { type: "loop_registry_updated", records: getHubSchedules() });
 
@@ -3372,6 +3483,27 @@ function createProjectContext(opts) {
       return;
     }
 
+    // --- Browser Extension ---
+    if (msg.type === "browser_tab_list") {
+      _extensionWs = ws; // Track which client has the extension
+      var tabs = msg.tabs || [];
+      _browserTabList = {};
+      for (var bti = 0; bti < tabs.length; bti++) {
+        _browserTabList[tabs[bti].id] = tabs[bti];
+      }
+      return;
+    }
+
+    if (msg.type === "extension_result") {
+      var pending = pendingExtensionRequests[msg.requestId];
+      if (pending) {
+        clearTimeout(pending.timer);
+        pending.resolve(msg.result);
+        delete pendingExtensionRequests[msg.requestId];
+      }
+      return;
+    }
+
     // --- Scheduled tasks permission gate ---
     if (msg.type === "loop_start" || msg.type === "loop_stop" || msg.type === "loop_registry_files" ||
         msg.type === "loop_registry_list" || msg.type === "loop_registry_update" || msg.type === "loop_registry_rename" ||
@@ -3915,23 +4047,176 @@ function createProjectContext(opts) {
       }
     }
 
-    if (!session.isProcessing) {
-      session.isProcessing = true;
-      onProcessingChanged();
-      session.sentToolResults = {};
-      sendToSession(session.localId, { type: "status", status: "processing" });
-      if (!session.queryInstance && (!session.worker || session.messageQueue !== "worker")) {
-        // No active query (or worker idle between queries): start a new query
-        session._queryStartTs = Date.now();
-        console.log("[PERF] project.js: startQuery called, localId=" + session.localId + " t=0ms");
-        sdk.startQuery(session, fullText, msg.images, getLinuxUserForSession(session));
+    // Collect browser tab context (async: requires round-trip to client extension)
+    var tabSources = ctxSources.filter(function(id) {
+      if (!id.startsWith("tab:")) return false;
+      // Only include tabs that currently exist in the browser
+      var tid = parseInt(id.split(":")[1], 10);
+      return !!_browserTabList[tid];
+    });
+
+    function dispatchToSdk(finalText) {
+      if (!session.isProcessing) {
+        session.isProcessing = true;
+        onProcessingChanged();
+        session.sentToolResults = {};
+        sendToSession(session.localId, { type: "status", status: "processing" });
+        if (!session.queryInstance && (!session.worker || session.messageQueue !== "worker")) {
+          // No active query (or worker idle between queries): start a new query
+          session._queryStartTs = Date.now();
+          console.log("[PERF] project.js: startQuery called, localId=" + session.localId + " t=0ms");
+          sdk.startQuery(session, finalText, msg.images, getLinuxUserForSession(session));
+        } else {
+          sdk.pushMessage(session, finalText, msg.images);
+        }
       } else {
-        sdk.pushMessage(session, fullText, msg.images);
+        sdk.pushMessage(session, finalText, msg.images);
       }
+      sm.broadcastSessionList();
+    }
+
+    if (tabSources.length > 0) {
+      // Request tab context from all active browser tab sources
+      var tabPromises = tabSources.map(function(srcId) {
+        var tabId = parseInt(srcId.split(":")[1], 10);
+        return requestTabContext(ws, tabId);
+      });
+      Promise.all(tabPromises).then(function(results) {
+        var tabContextParts = [];
+        var screenshotImages = [];
+
+        for (var ti = 0; ti < results.length; ti++) {
+          if (!results[ti]) continue;
+          var tabId2 = parseInt(tabSources[ti].split(":")[1], 10);
+          var tabInfo = _browserTabList[tabId2];
+          var tabLabel = tabInfo ? (tabInfo.title || tabInfo.url || "Tab " + tabId2) : "Tab " + tabId2;
+          var r = results[ti];
+          var parts = [];
+
+          // Console logs
+          if (r.console && r.console.logs) {
+            try {
+              var logs = typeof r.console.logs === "string" ? JSON.parse(r.console.logs) : r.console.logs;
+              if (logs && logs.length > 0) {
+                var logLines = [];
+                var logSlice = logs.slice(-50);
+                for (var li = 0; li < logSlice.length; li++) {
+                  var entry = logSlice[li];
+                  var ts = entry.ts ? new Date(entry.ts).toTimeString().slice(0, 8) : "";
+                  var lvl = (entry.level || "log").toUpperCase();
+                  logLines.push("[" + ts + " " + lvl + "] " + (entry.text || ""));
+                }
+                parts.push("Console:\n" + logLines.join("\n"));
+              }
+            } catch (e) {
+              // ignore parse errors
+            }
+          }
+
+          // Network requests
+          if (r.network && r.network.network) {
+            try {
+              var netLog = typeof r.network.network === "string" ? JSON.parse(r.network.network) : r.network.network;
+              if (netLog && netLog.length > 0) {
+                var netLines = [];
+                var netSlice = netLog.slice(-30);
+                for (var ni = 0; ni < netSlice.length; ni++) {
+                  var req = netSlice[ni];
+                  var line = (req.method || "GET") + " " + (req.url || "") + " " + (req.status || 0) + " " + (req.duration || 0) + "ms";
+                  if (req.error) line += " [" + req.error + "]";
+                  netLines.push(line);
+                }
+                parts.push("Network (last " + netSlice.length + " requests):\n" + netLines.join("\n"));
+              }
+            } catch (e) {
+              // ignore parse errors
+            }
+          }
+
+          // Page text (from tab_page_text command)
+          if (r.pageText && (r.pageText.text || r.pageText.value)) {
+            var pageContent = r.pageText.text || r.pageText.value;
+            if (pageContent.length > 0) {
+              if (pageContent.length > 32768) {
+                pageContent = pageContent.substring(0, 32768) + "\n... (truncated)";
+              }
+              parts.push("Page text:\n" + pageContent);
+            }
+          }
+
+          // Screenshot — save to disk and add to images for SDK
+          if (r.screenshot && r.screenshot.image) {
+            try {
+              var screenshotData = r.screenshot.image;
+              var screenshotName = saveImageFile("image/png", screenshotData, getLinuxUserForSession(session));
+              if (screenshotName) {
+                var screenshotPath = path.join(imagesDir, screenshotName);
+                // Add to images array for SDK multimodal
+                screenshotImages.push({
+                  mediaType: "image/png",
+                  data: screenshotData,
+                  file: screenshotName,
+                  tabTitle: tabLabel,
+                  tabUrl: tabInfo ? tabInfo.url : ""
+                });
+                parts.push("[Screenshot saved: " + screenshotPath + "]");
+              }
+            } catch (e) {
+              // ignore screenshot save errors
+            }
+          }
+
+          if (r.console && r.console.error) {
+            parts.push("(Console error: " + r.console.error + ")");
+          }
+          if (r.network && r.network.error) {
+            parts.push("(Network error: " + r.network.error + ")");
+          }
+
+          if (parts.length > 0) {
+            tabContextParts.push("[Browser tab: " + tabLabel + "]\n" + parts.join("\n\n"));
+          }
+        }
+
+        if (tabContextParts.length > 0) {
+          fullText = tabContextParts.join("\n\n---\n\n") + "\n\n" + fullText;
+        }
+
+        // If screenshots were captured, send context preview cards and add to SDK images
+        if (screenshotImages.length > 0) {
+          if (!msg.images) msg.images = [];
+          for (var si = 0; si < screenshotImages.length; si++) {
+            var ss = screenshotImages[si];
+            // Save context_preview to history so it restores on session load
+            var previewEntry = {
+              type: "context_preview",
+              tab: {
+                title: ss.tabTitle || "",
+                url: ss.tabUrl || "",
+                screenshotFile: ss.file
+              }
+            };
+            session.history.push(previewEntry);
+            // Send context card to all clients
+            sendToSession(session.localId, {
+              type: "context_preview",
+              tab: {
+                title: ss.tabTitle || "",
+                url: ss.tabUrl || "",
+                screenshotUrl: "/p/" + slug + "/images/" + ss.file
+              }
+            });
+            // Add to SDK images for multimodal
+            msg.images.push({ mediaType: ss.mediaType, data: ss.data });
+          }
+          sm.saveSessionFile(session);
+        }
+
+        dispatchToSdk(fullText);
+      });
     } else {
-      sdk.pushMessage(session, fullText, msg.images);
+      dispatchToSdk(fullText);
     }
-    sm.broadcastSessionList();
   }
 
   // --- Shared helpers ---
@@ -4061,6 +4346,44 @@ function createProjectContext(opts) {
 
   // --- Handle project-scoped HTTP requests ---
   function handleHTTP(req, res, urlPath) {
+    // Browser MCP extension bridge: forward commands to Chrome extension
+    if (req.method === "POST" && urlPath === "/ext-command") {
+      parseJsonBody(req).then(function (body) {
+        // Validate auth token
+        if (!body.token || body.token !== _extToken) {
+          res.writeHead(403, { "Content-Type": "application/json" });
+          res.end('{"error":"Invalid token"}');
+          return;
+        }
+        var command = body.command;
+        var args = body.args || {};
+        var timeout = Math.min(body.timeout || 5000, 30000); // max 30s
+
+        // Special command: list_tabs (no extension round-trip needed)
+        if (command === "list_tabs") {
+          var tabArr = [];
+          for (var tid in _browserTabList) {
+            tabArr.push(_browserTabList[tid]);
+          }
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ result: { tabs: tabArr } }));
+          return;
+        }
+
+        sendExtensionCommandAny(command, args, timeout).then(function (result) {
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ result: result || {} }));
+        }).catch(function (err) {
+          res.writeHead(200, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: err.message || "Extension command failed" }));
+        });
+      }).catch(function () {
+        res.writeHead(400, { "Content-Type": "application/json" });
+        res.end('{"error":"Invalid JSON body"}');
+      });
+      return true;
+    }
+
     // Serve chat images
     if (req.method === "GET" && urlPath.indexOf("/images/") === 0) {
       var imgName = path.basename(urlPath);

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';
@@ -4588,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");
@@ -4972,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) {
@@ -5942,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
    ========================================================================== */
@@ -682,11 +698,6 @@
   flex-wrap: wrap;
   gap: 4px;
   padding: 4px 6px;
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  z-index: 5;
 }
 
 #suggestion-chips.hidden { display: none; }