clay-server 4.8.0-beta.1 → 4.8.0-beta.2

package/lib/public/css/issues.css

@@ -1,20 +1,7 @@
 #issues-panel { position: relative; width: 50%; max-width: 720px; min-width: 360px; height: calc(100% - 16px); margin: 8px 8px 8px 10px; min-height: 0; align-self: center; display: flex; flex-direction: column; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; flex-shrink: 0; }
-@media (min-width: 1024px) {
-  #issues-panel {
-    box-shadow:
-      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
-      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
-    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  #issues-panel { animation: none; }
-}
 #issues-panel.hidden { display: none; }
 #issues-panel.issues-wide { width: 70%; max-width: 1200px; }
-#issues-panel.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; animation: none; }
+#issues-panel.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }
 #issues-panel header { height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
 #issues-panel .issues-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
 #issues-panel .issues-title .lucide { width: 15px; color: var(--accent); }

package/lib/public/css/mcp-skills-workbench.css

@@ -0,0 +1,51 @@
+.mcp-skills-workbench { display:flex; flex-direction:column; flex-shrink:0; width:50%; max-width:720px; min-width:360px; height:calc(100% - 16px); align-self:center; margin:8px 8px 8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--bg); overflow:hidden; }
+.mcp-skills-workbench.hidden { display:none; }
+.mcp-skills-workbench.workbench-wide { width:70%; max-width:1200px; }
+.mcp-skills-workbench.panel-fullscreen { width:100%; max-width:none; min-width:0; height:100%; margin:0; border:0; border-radius:0; }
+.mcp-skills-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
+.mcp-skills-header strong,.mcp-skills-header>div { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; }
+.mcp-skills-header svg { width:15px; height:15px; }
+.mcp-skills-header button { display:flex; padding:6px; background:transparent; border:0; border-radius:6px; color:var(--text-muted); cursor:pointer; }
+.mcp-skills-header button:hover { background:var(--bg-alt); color:var(--text); }
+.mcp-skills-tabs { display:flex; padding:0 16px; border-bottom:1px solid var(--border); gap:24px; flex-shrink:0; }
+.mcp-skills-tabs button { padding:13px 0 11px; background:none; border:0; border-bottom:2px solid transparent; color:var(--text-muted); font:inherit; font-size:12px; cursor:pointer; }
+.mcp-skills-tabs button[aria-selected="true"] { color:var(--text); border-bottom-color:var(--accent); }
+.mcp-skills-tabs button[hidden] { display:none; }
+#mcp-skills-workbench #skills-modal,#mcp-skills-workbench #mcp-modal { position:static; inset:auto; z-index:auto; display:flex; flex:1; min-height:0; align-items:stretch; justify-content:stretch; }
+#mcp-skills-workbench #skills-modal.hidden,#mcp-skills-workbench #mcp-modal.hidden { display:none; }
+#mcp-skills-workbench .skills-dialog,#mcp-skills-workbench .mcp-dialog { width:100%; max-width:none; min-width:0; height:100%; max-height:none; padding:0; display:flex; flex-direction:column; overflow:hidden; }
+#mcp-skills-workbench .mcp-header,#mcp-skills-workbench #skills-modal-close { display:none; }
+#mcp-skills-workbench .skills-header { padding:12px 16px 0; }
+#mcp-skills-workbench .skills-title { font-size:12px; font-weight:500; }
+#mcp-skills-workbench .skills-powered-by { font-size:10px; }
+#mcp-skills-workbench .skills-search { margin:12px 16px 0; }
+#mcp-skills-workbench .skills-tabs { padding:8px 16px 0; gap:0; overflow-x:auto; }
+#mcp-skills-workbench .skills-tab { padding:9px 10px; font-size:11px; white-space:nowrap; }
+#mcp-skills-workbench .skills-content,#mcp-skills-workbench .mcp-content { flex:1; min-height:0; overflow-y:auto; padding:16px; }
+#mcp-skills-workbench .skills-detail { display:flex; flex-direction:column; gap:24px; height:auto; min-height:0; }
+#mcp-skills-workbench .skills-detail-main { min-width:0; flex:none; border-right:0; overflow:visible; }
+#mcp-skills-workbench .skills-detail-sidebar { width:auto; border-left:0; padding-left:0; border-top:1px solid var(--border); padding-top:20px; }
+#mcp-skills-workbench .skills-detail-name { font-size:24px; overflow-wrap:anywhere; }
+#mcp-skills-workbench .skills-installed-item { align-items:flex-start; }
+#mcp-skills-workbench .skills-item { padding:12px 0; }
+#mcp-skills-workbench .mcp-server-row { flex-wrap:wrap; }
+#mcp-skills-workbench .mcp-server-perm-reason { flex-basis:100%; padding-left:26px; }
+#mcp-skills-workbench button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+@media (max-width:1023px) { .mcp-skills-workbench,.mcp-skills-workbench.workbench-wide { position:fixed; inset:0; z-index:160; width:100%; max-width:none; min-width:0; height:100dvh; margin:0; border:0; border-radius:0; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } }
+
+#mcp-skills-workbench .skills-detail-main > .skills-detail-md-wrap { flex:none; overflow:visible; padding:0; }
+#mcp-skills-workbench .skills-detail-main > .skills-detail-name,#mcp-skills-workbench .skills-detail-main > .skills-detail-desc,#mcp-skills-workbench .skills-detail-main > .skills-detail-cmd { margin-left:0; margin-right:0; }
+
+#mcp-skills-workbench .skills-detail-cmd code { min-width:0; overflow-x:auto; }
+
+#mcp-skills-workbench .ext-pill-wrap { display:block; flex-shrink:0; padding:12px 16px; border-bottom:1px solid var(--border); max-height:55%; overflow-y:auto; }
+#mcp-skills-workbench .top-bar-ext-btn { padding:8px 10px; border-radius:6px; gap:6px; }
+#mcp-skills-workbench .top-bar-ext-btn::after { content:"Setup"; margin-left:8px; color:var(--text-muted); font-weight:400; }
+#mcp-skills-workbench .top-bar-ext-btn.ext-connected::after { content:"Connected"; color:var(--success); }
+#mcp-skills-workbench .ext-popover { position:static; width:auto; margin-top:12px; padding:12px; box-shadow:none; border-radius:8px; }
+
+#mcp-skills-workbench .ext-feature-summary { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--text-muted); }
+#mcp-skills-workbench .ext-popover-desc p { margin:0 0 8px; }
+#mcp-skills-workbench .ext-feature-list { margin:0 0 16px; padding-left:18px; }
+#mcp-skills-workbench .ext-feature-list li { margin-bottom:8px; line-height:1.6; }
+#mcp-skills-workbench .ext-feature-list strong { color:var(--text); font-weight:500; }

package/lib/public/css/project-logs.css

@@ -18,12 +18,6 @@
     flex-direction: column;
     overflow: hidden;
     flex-shrink: 0;
-    box-shadow:
-      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
-      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
-    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
   }
   #project-logs-panel.hidden { display: none; }
   #project-logs-panel.project-logs-wide {
@@ -38,14 +32,9 @@
     margin: 0;
     border: 0;
     border-radius: 0;
-    box-shadow: none;
-    animation: none;
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  #project-logs-panel { animation: none; }
-}
 
 /* Narrow screens: full overlay, like the other workbench tools. */
 @media (max-width: 1023px) {

package/lib/public/css/right-workbench.css

@@ -0,0 +1,28 @@
+/* Shared desktop workbench elevation and motion. Keep panel content styles local. */
+@keyframes workbench-panel-in {
+  from { opacity: 0; transform: translateX(10px) scale(0.995); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@media (min-width: 1024px) {
+  :is(#file-viewer, #terminal-container, #project-logs-panel, #issues-panel, #notes-browser, #scheduled-tasks-panel, #shared-browser-panel, #mcp-skills-workbench):not(.panel-fullscreen) {
+    box-shadow:
+      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
+      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
+  }
+}
+
+:is(#file-viewer, #terminal-container, #project-logs-panel, #issues-panel, #notes-browser, #scheduled-tasks-panel, #shared-browser-panel, #mcp-skills-workbench).panel-fullscreen {
+  box-shadow: none;
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(#file-viewer, #terminal-container, #project-logs-panel, #issues-panel, #notes-browser, #scheduled-tasks-panel, #shared-browser-panel, #mcp-skills-workbench):not(.panel-fullscreen) {
+    animation: none;
+    transition: none;
+  }
+}

package/lib/public/css/scheduled-tasks.css

@@ -1,5 +1,5 @@
 @media (min-width: 1024px) {
-  #scheduled-tasks-panel { width: 50%; max-width: 760px; min-width: 380px; height: calc(100% - 16px); min-height: 0; align-self: center; margin: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; box-shadow: 4px 8px 18px rgba(var(--shadow-rgb), .14), 2px 2px 4px rgba(var(--shadow-rgb), .08); animation: workbench-panel-in .18s cubic-bezier(.2,.8,.2,1); }
+  #scheduled-tasks-panel { width: 50%; max-width: 760px; min-width: 380px; height: calc(100% - 16px); min-height: 0; align-self: center; margin: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
   #scheduled-tasks-panel.hidden { display: none; }
   #scheduled-tasks-panel.scheduled-tasks-wide { width: 70%; max-width: 1200px; }
   #scheduled-tasks-panel.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }

package/lib/public/css/shared-browser-skins.css

@@ -0,0 +1,28 @@
+/* Device silhouettes follow viewport dimensions; they do not emulate an OS. */
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor { border: 9px solid #252729; border-bottom: 30px solid #c8cbcc; border-radius: 12px 12px 5px 5px; box-shadow: 0 0 0 2px #acb0b2, 0 20px 32px #0005; }
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor-brand { left: 0; right: 0; text-align: center; color: #53585a; }
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor-stand { bottom: -49px; height: 18px; width: calc(100% + 60px); background: linear-gradient(#dfe1e2, #babfc2); border-radius: 2px 2px 45% 45%; box-shadow: 0 3px 0 #858b8e, 0 12px 15px #0005; }
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor-stand::before { top: 0; bottom: auto; height: 5px; left: 42%; right: 42%; clip-path: none; background: #9ba1a4; border-radius: 0 0 5px 5px; }
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor-stand::after { display: none; }
+.shared-browser-viewport[data-skin="crt"] { background: #183638; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor { border: 22px solid #c9c7b9; border-bottom-width: 42px; border-radius: 24px; box-shadow: inset 0 0 0 3px #797b72, 0 0 0 2px #e4e1d4, 8px 10px 0 #999b90, 12px 24px 30px #0005; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor::before { inset: -5px; border: 5px solid; border-color: #8a8b80 #b4b5a8 #e3e1d4 #9c9e91; border-radius: 6px; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor-brand { bottom: -33px; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor::after { bottom: -28px; right: 6px; width: 9px; height: 9px; border: 3px solid #afb1a3; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor-stand { bottom: -66px; width: 35%; height: 24px; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor-detail { position: absolute; bottom: -27px; right: 35px; width: 40px; height: 4px; background: repeating-linear-gradient(90deg, #85897e 0 6px, transparent 6px 12px); }
+.shared-browser-viewport[data-skin="mac"] { background: #292824; gap: 28px; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor { border: 24px solid #d7cfbb; border-top-width: 30px; border-bottom-width: 78px; border-radius: 15px 15px 7px 7px; box-shadow: 0 5px 0 #afa68f, 0 7px 0 #e6ddc9, 0 22px 30px #0005; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor::before { inset: -6px; border: 6px solid; border-color: #aaa18c #bcb39d #ede4cf #bab099; border-radius: 9px; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor-brand { bottom: -51px; left: 1px; color: #696250; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor-stand { display: none; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor-detail { position: absolute; bottom: -43px; right: 2px; width: 30%; height: 5px; background: #625f54; border-bottom: 2px solid #efe6d3; border-radius: 1px; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor-detail::after { content: ""; position: absolute; top: 15px; right: 0; width: 65%; height: 10px; background: repeating-linear-gradient(90deg, #aaa08a 0 2px, transparent 2px 5px); }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor::after { bottom: -67px; }
+.shared-browser-viewport[data-skin="phone"] { background: #23282d; gap: 24px; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor { border: 12px solid #141517; border-top-width: 48px; border-bottom-width: 54px; border-radius: 38px; box-shadow: 0 0 0 2px #9a9d9f, 0 0 0 4px #46494c, 0 20px 35px #0006; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor::before { inset: auto auto -44px 50%; width: 32px; height: 32px; transform: translateX(-50%); border: 1px solid #666a6e; border-radius: 50%; background: #191b1d; box-shadow: inset 0 0 0 2px #111; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor::after { top: -27px; bottom: auto; right: calc(50% + 39px); width: 6px; height: 6px; background: #283d52; box-shadow: 0 0 0 2px #08090a; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor-detail { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 4px; background: #08090a; box-shadow: 0 1px 0 #383b3d; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor-brand { left: auto; right: 10px; bottom: -34px; font-size: 10px; color: #92979c; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor-stand { display: none; }

package/lib/public/css/shared-browser.css

@@ -0,0 +1,91 @@
+@import url("./shared-browser-skins.css");
+
+/* Shared browser uses the existing mutually exclusive right workbench. */
+.shared-browser-panel { width: 50%; max-width: 780px; min-width: 360px; height: calc(100% - 16px); align-self: center; margin: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; box-shadow: 4px 8px 18px rgba(var(--shadow-rgb), .14); }
+.shared-browser-panel.hidden, #shared-browser-btn.hidden { display: none; }
+.shared-browser-panel.shared-browser-wide { width: 70%; max-width: 1280px; }
+.shared-browser-panel.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }
+.shared-browser-header { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
+.shared-browser-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
+.shared-browser-panel svg { width: 15px; height: 15px; flex-shrink: 0; }
+.shared-browser-phase { font-size: 10px; color: var(--text-muted); }
+.shared-browser-phase[data-live="true"]::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--accent); }
+.shared-browser-window { display: flex; margin-left: auto; gap: 2px; }
+.shared-browser-panel button { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text); border: 0; border-radius: 6px; padding: 7px; cursor: pointer; font: inherit; }
+.shared-browser-panel button:hover { background: var(--bg-alt); }
+.shared-browser-panel button:disabled, .shared-browser-panel input:disabled, .shared-browser-panel select:disabled { opacity: .45; cursor: default; }
+.shared-browser-panel button:focus-visible, #shared-browser-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.shared-browser-address { display: flex; align-items: center; gap: 3px; padding: 8px; border-bottom: 1px solid var(--border); }
+.shared-browser-address input { flex: 1; width: 0; min-width: 0; background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 11px; }
+.shared-browser-viewport { position: relative; flex: 1; min-height: 0; background: #202224; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 44px; }
+.shared-browser-monitor { position: relative; flex-shrink: 0; box-sizing: content-box; border: 10px solid #e7e2d6; border-bottom-width: 32px; border-radius: 13px; background: #111315; box-shadow: 0 2px 0 #b8b2a5, 0 18px 36px rgba(0,0,0,.28), 0 0 0 1px #f5f0e6; }
+.shared-browser-monitor::before { content: ""; position: absolute; inset: -1px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
+.shared-browser-monitor::after { content: ""; position: absolute; bottom: -20px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #aaa697; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
+.shared-browser-monitor[data-live="true"]::after { background: #79a582; box-shadow: 0 0 5px rgba(121,165,130,.4), inset 0 1px 1px rgba(0,0,0,.15); }
+.shared-browser-monitor-brand { position: absolute; left: 5px; bottom: -25px; color: #787469; font-family: "Source Serif 4", Georgia, serif; font-size: 15px; font-weight: 600; font-synthesis: none; letter-spacing: -.012em; line-height: 24px; pointer-events: none; }
+.shared-browser-monitor-stand { position: absolute; left: 50%; bottom: -57px; width: clamp(80px, 28%, 180px); height: 25px; transform: translateX(-50%); pointer-events: none; }
+.shared-browser-monitor-stand::before { content: ""; position: absolute; top: 0; bottom: 3px; left: 30%; right: 30%; background: linear-gradient(#aaa69c, #d2cdbf); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
+.shared-browser-monitor-stand::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: #d8d3c6; border-radius: 2px; box-shadow: 0 1px 0 #9b978d, 0 6px 10px rgba(0,0,0,.22); }
+.shared-browser-monitor-label { color: #a5aaaf; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
+.shared-browser-monitor .shared-browser-empty { color: #a5aaaf; }
+.shared-browser-monitor .shared-browser-empty h3 { color: #eceeef; }
+.shared-browser-viewport canvas { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; }
+.shared-browser-keyboard { position: absolute; bottom: 0; left: 50%; width: 1px; height: 1px; opacity: 0; padding: 0; border: 0; }
+.shared-browser-empty { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; text-align: center; color: var(--text-muted); pointer-events: none; }
+.shared-browser-empty.hidden { display: none; }
+.shared-browser-empty > svg { width: 28px; height: 28px; opacity: .65; }
+.shared-browser-empty h3 { font-size: 14px; font-weight: 500; color: var(--text); margin: 16px 0 0; }
+.shared-browser-empty p { font-size: 12px; line-height: 1.6; }
+.shared-browser-empty .shared-browser-private { font-size: 10px; margin-top: 20px; }
+.shared-browser-footer { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 40px; padding: 5px 10px; border-top: 1px solid var(--border); font-size: 10px; }
+.shared-browser-control, .shared-browser-details { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.shared-browser-control span { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.shared-browser-footer button { padding: 5px 6px; white-space: nowrap; flex-shrink: 0; }
+.shared-browser-footer button[hidden] { display: none; }
+.shared-browser-control button { border: 1px solid var(--border); }
+.shared-browser-details { margin-left: auto; flex-shrink: 0; color: var(--text-muted); }
+.shared-browser-details select { font: inherit; background: transparent; color: var(--text-muted); border: 0; padding: 4px 0; cursor: pointer; }
+.shared-browser-details [data-action="end"] { color: var(--text-muted); border-left: 1px solid var(--border); border-radius: 0; padding-left: 10px; }
+.shared-browser-error.hidden { display: none; }
+.shared-browser-error { padding: 8px 12px; margin: 0; font-size: 11px; color: var(--text); background: var(--bg-alt); }
+@media (max-width: 1023px) { #shared-browser-panel, #shared-browser-btn { display: none !important; } }
+
+.shared-browser-resolution { position: relative; }
+.shared-browser-resolution [data-viewport-trigger] { gap: 5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+.shared-browser-resolution [data-viewport-trigger] svg { width: 11px; height: 11px; }
+.shared-browser-resolution-menu { position: absolute; z-index: 10; right: 0; bottom: calc(100% + 9px); width: 158px; max-height: min(260px, 50vh); overflow-y: auto; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
+.shared-browser-resolution-menu[hidden] { display: none; }
+.shared-browser-resolution-menu button { display: flex; justify-content: space-between; width: 100%; padding: 8px 10px; text-align: left; font-size: 11px; font-variant-numeric: tabular-nums; }
+.shared-browser-resolution-menu button[aria-checked="true"] { background: var(--bg-alt); color: var(--text); }
+.shared-browser-resolution-menu button[aria-checked="true"]::after { content: "✓"; color: var(--accent); }
+
+.shared-browser-caption { display: flex; flex-direction: column; align-items: center; gap: 10px; width: calc(100% - 40px); max-width: 590px; text-align: center; }
+.shared-browser-activity { position: relative; width: 100%; max-width: 590px; }
+.shared-browser-activity[hidden], .shared-browser-pointer[hidden] { display: none; }
+.shared-browser-caption-history { max-height: 170px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #70757a transparent; padding: 8px 16px; text-align: center; }
+.shared-browser-caption-history:focus-visible { outline: 1px solid #92979c; outline-offset: 2px; border-radius: 6px; }
+.shared-browser-caption-row { margin: 0 0 14px; color: #fff; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; font-weight: 600; text-shadow: 0 2px 3px #000, 1px 0 2px #000, -1px 0 2px #000; overflow-wrap: anywhere; }
+.shared-browser-caption-row:last-child { margin-bottom: 0; }
+.shared-browser-activity-text { padding: 2px 7px; background: rgba(0,0,0,.62); box-decoration-break: clone; -webkit-box-decoration-break: clone; border-radius: 3px; }
+.shared-browser-caption-row[data-age="1"] { opacity: .7; }
+.shared-browser-caption-row[data-age="2"] { opacity: .48; }
+.shared-browser-caption-row[data-age="3"] { opacity: .3; }
+.shared-browser-activity[data-reviewing="true"] .shared-browser-caption-row { opacity: .9; }
+.shared-browser-caption-row small { display: block; margin-top: 5px; font-size: 11px; font-weight: 400; color: #edc6ae; }
+.shared-browser-panel .shared-browser-caption-latest { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); padding: 3px 9px; font-size: 10px; white-space: nowrap; color: #eceeef; background: #353a3f; border: 1px solid #62686e; border-radius: 12px; }
+.shared-browser-caption-latest[hidden] { display: none; }
+.shared-browser-caption-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.shared-browser-pointer-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
+.shared-browser-pointer { position: absolute; width: 24px; height: 28px; transition: left .12s linear, top .12s linear; filter: drop-shadow(0 2px 2px #0006); }
+.shared-browser-pointer svg { width: 24px; height: 28px; fill: #8076f5; stroke: white; stroke-width: 1.6; }
+.shared-browser-pointer i { position: absolute; left: -12px; top: -12px; width: 30px; height: 30px; border: 2px solid #a59dff; border-radius: 50%; opacity: 0; }
+@media (prefers-reduced-motion: reduce) { .shared-browser-pointer { transition: none; } }
+
+.shared-browser-tabs { display: flex; gap: 4px; align-items: center; overflow-x: auto; flex-shrink: 0; padding: 6px 8px 0; border-bottom: 1px solid var(--border); }
+.shared-browser-tab { display: flex; align-items: center; min-width: 100px; max-width: 210px; border-radius: 7px 7px 0 0; background: var(--bg-alt); }
+.shared-browser-tab:has([aria-selected="true"]) { box-shadow: inset 0 -2px var(--accent); background: var(--bg-surface, var(--bg-alt)); }
+.shared-browser-tab [role="tab"] { min-width: 0; gap: 8px; font-size: 11px; padding: 9px 8px; }
+.shared-browser-tab [role="tab"] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.shared-browser-tab small { font-size: 9px; color: var(--text-muted); }
+.shared-browser-tab [aria-selected="true"] small { color: var(--accent); }
+.shared-browser-tab > button:last-child { padding: 5px; font-size: 15px; color: var(--text-muted); }

package/lib/public/css/sticky-notes.css

@@ -561,12 +561,6 @@
     flex-direction: column;
     overflow: hidden;
     flex-shrink: 0;
-    box-shadow:
-      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
-      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
-    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
   }
   #notes-browser.hidden { display: none; }
   #notes-browser.notes-browser-wide { width: 70%; max-width: 1200px; }
@@ -578,14 +572,9 @@
     margin: 0;
     border: 0;
     border-radius: 0;
-    box-shadow: none;
-    animation: none;
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  #notes-browser { animation: none; }
-}
 
 /* Narrow screens: full viewport overlay, like the other workbench tools. */
 @media (max-width: 1023px) {

package/lib/public/index.html

@@ -57,28 +57,6 @@
   <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 hidden" 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>
       <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>
       <div id="update-popover" class="top-bar-popover">
@@ -1768,6 +1746,36 @@
       <span class="mcp-title"><i data-lucide="cable"></i> MCP Servers</span>
       <button class="skills-close" id="mcp-modal-close"><i data-lucide="x"></i></button>
     </div>
+      <div id="ext-pill-wrap" class="ext-pill-wrap">
+        <button id="ext-pill" class="top-bar-ext-btn" title="Chrome Extension" aria-expanded="false" aria-controls="ext-popover"><i data-lucide="puzzle"></i> Extension</button>
+        <p class="ext-feature-summary">Connect your Chrome tabs and local MCP tools to Clay.</p>
+        <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">
+            <p>With Clay for Chrome, your agent can:</p>
+            <ul class="ext-feature-list">
+              <li><strong>Work with your open tabs.</strong> Read pages, capture screenshots, click buttons and fill in forms.</li>
+              <li><strong>Help debug a website.</strong> Inspect page structure, console errors and network requests.</li>
+              <li><strong>Use MCP tools on your computer.</strong> Add MCP servers in the extension and connect them through the separately installed Clay MCP Bridge.</li>
+            </ul>
+          </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>
     <div class="mcp-content" id="mcp-content">
       <p class="mcp-no-servers">No MCP servers detected. Configure in Clay Chrome Extension.</p>
     </div>

package/lib/public/modules/app-messages.js

@@ -1,3 +1,4 @@
+import { handleSharedBrowserMessage } from './shared-browser.js';
 import { syncGithubSessions } from './session-github.js';
 import { handleIssuesMessageInContext as handleIssuesMessage } from './issues-context.js';
 // app-messages.js - WebSocket message router
@@ -104,6 +105,7 @@ var connectOverlay = document.getElementById("connect-overlay");
 initMessageDeliveryUi();
 
 export function processMessage(msg) {
+  if (handleSharedBrowserMessage(msg)) return;
   if (msg.type === "vendor_login_browser_frame" || msg.type === "vendor_login_browser_status") {
     handleLoginBrowserMessage(msg);
     return;

package/lib/public/modules/extension-settings.js

@@ -0,0 +1,110 @@
+import { openMcpSkillsWorkbench } from "./mcp-skills-workbench.js";
+import { copyToClipboard, showToast } from "./utils.js";
+import { iconHtml, refreshIcons } from "./icons.js";
+
+export function initExtensionSettings() {
+  var extPillWrap = document.getElementById("ext-pill-wrap");
+  var extPillBtn = document.getElementById("ext-pill");
+  var extPopover = document.getElementById("ext-popover");
+  var extDownloadBtn = document.getElementById("ext-download-btn");
+  var extDownloadStatus = document.getElementById("ext-download-status");
+  var extCopyUrl = document.getElementById("ext-copy-url");
+  if (!extPillWrap || !extPillBtn || !extPopover) return;
+
+  // Detect extension connection via postMessage from content.js
+
+  var connectedBanner = document.getElementById("ext-connected-banner");
+  var extDivider = document.getElementById("ext-popover-divider");
+  var extGuideTitle = document.getElementById("ext-popover-guide-title");
+  var extSteps = extPopover.querySelector(".ext-popover-steps");
+
+  function setExtConnected() {
+    if (extPillBtn.classList.contains("ext-connected")) return;
+    extPillBtn.classList.add("ext-connected");
+    extPillBtn.innerHTML = '<i data-lucide="check"></i> Extension';
+    refreshIcons(extPillBtn);
+    if (connectedBanner) connectedBanner.classList.remove("hidden");
+    if (extDownloadBtn) extDownloadBtn.style.display = "none";
+    if (extDownloadStatus) extDownloadStatus.classList.add("hidden");
+    if (extDivider) extDivider.style.display = "none";
+    if (extGuideTitle) extGuideTitle.style.display = "none";
+    if (extSteps) extSteps.style.display = "none";
+  }
+
+  window.addEventListener("message", function (event) {
+    if (event.source !== window) return;
+    if (!event.data || event.data.source !== "clay-chrome-extension") return;
+    setExtConnected();
+  });
+
+  // Toggle popover
+  extPillBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    openMcpSkillsWorkbench("mcp");
+    var expanded = extPopover.classList.toggle("visible");
+    extPillBtn.setAttribute("aria-expanded", String(expanded));
+    refreshIcons(extPopover);
+  });
+
+  document.addEventListener("click", function (e) {
+    if (!extPopover.contains(e.target) && e.target !== extPillBtn && !extPillBtn.contains(e.target)) {
+      extPopover.classList.remove("visible");
+      extPillBtn.setAttribute("aria-expanded", "false");
+    }
+  });
+
+  // Download button
+  if (extDownloadBtn) {
+    extDownloadBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      extDownloadBtn.disabled = true;
+      extDownloadBtn.innerHTML = iconHtml("loader") + " Downloading...";
+      refreshIcons(extDownloadBtn);
+      var loaderIcon = extDownloadBtn.querySelector(".lucide");
+      if (loaderIcon) loaderIcon.style.animation = "spin 1s linear infinite";
+      if (extDownloadStatus) {
+        extDownloadStatus.classList.remove("hidden");
+        extDownloadStatus.textContent = "Fetching from GitHub...";
+        extDownloadStatus.style.color = "";
+      }
+      fetch("/api/extension/download").then(function (resp) {
+        if (!resp.ok) throw new Error("Download failed (" + resp.status + ")");
+        return resp.blob();
+      }).then(function (blob) {
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement("a");
+        a.href = url;
+        a.download = "clay-chrome-extension.zip";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        if (extDownloadStatus) {
+          extDownloadStatus.textContent = "Download complete!";
+          extDownloadStatus.style.color = "var(--accent)";
+        }
+        showToast("Extension downloaded");
+      }).catch(function (err) {
+        if (extDownloadStatus) {
+          extDownloadStatus.textContent = "Failed: " + err.message;
+          extDownloadStatus.style.color = "var(--danger, #e53935)";
+        }
+        showToast("Download failed");
+      }).finally(function () {
+        extDownloadBtn.disabled = false;
+        extDownloadBtn.innerHTML = iconHtml("download") + " Download Extension (.zip)";
+        refreshIcons(extDownloadBtn);
+      });
+    });
+  }
+
+  // Copy chrome://extensions URL
+  if (extCopyUrl) {
+    extCopyUrl.addEventListener("click", function (e) {
+      e.stopPropagation();
+      copyToClipboard("chrome://extensions").then(function () {
+        showToast("Copied chrome://extensions");
+      });
+    });
+  }
+}

package/lib/public/modules/mcp-skills-workbench.js

@@ -0,0 +1,67 @@
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+
+function state() { return store.get('mcpSkillsWorkbench') || {}; }
+function patch(value) { store.set({ mcpSkillsWorkbench: Object.assign({}, state(), value) }); }
+function skillsAllowed() { var permissions = store.get('permissions'); return !permissions || permissions.skills !== false; }
+export function ensureMcpSkillsWorkbench() {
+  var panel = document.getElementById('mcp-skills-workbench');
+  if (panel) return panel;
+  var root = document.getElementById('main-panels');
+  if (!root) return null;
+  panel = document.createElement('section'); panel.id = 'mcp-skills-workbench'; panel.className = 'mcp-skills-workbench hidden'; panel.setAttribute('aria-label', 'MCP / Skills');
+  panel.innerHTML = '<header class="mcp-skills-header"><strong>' + iconHtml('blocks') + 'MCP / Skills</strong><div>' +
+    '<button type="button" data-workbench="wide" aria-label="Widen MCP / Skills">' + iconHtml('chevrons-left-right') + '</button>' +
+    '<button type="button" data-workbench="fullscreen" aria-label="Toggle MCP / Skills fullscreen">' + iconHtml('maximize-2') + '</button>' +
+    '<button type="button" data-workbench="close" aria-label="Close MCP / Skills">' + iconHtml('x') + '</button></div></header>' +
+    '<div class="mcp-skills-tabs" role="tablist" aria-label="MCP / Skills sections"><button id="mcp-workbench-tab" role="tab" data-section="mcp" aria-controls="mcp-modal">MCP Servers</button><button id="skills-workbench-tab" role="tab" data-section="skills" aria-controls="skills-modal">Skills</button></div>';
+  ['mcp', 'skills'].forEach(function (name) {
+    var section = document.getElementById(name + '-modal');
+    if (!section) return;
+    var backdrop = section.querySelector('.confirm-backdrop'); if (backdrop) backdrop.remove();
+    var dialog = section.querySelector('.confirm-dialog'); if (dialog) dialog.classList.remove('confirm-dialog');
+    section.setAttribute('role', 'tabpanel'); section.setAttribute('aria-labelledby', name + '-workbench-tab');
+    panel.appendChild(section);
+  });
+  root.appendChild(panel);
+  panel.querySelector('[data-workbench="close"]').onclick = closeMcpSkillsWorkbench;
+  ['wide', 'fullscreen'].forEach(function (key) { panel.querySelector('[data-workbench="' + key + '"]').onclick = function () { var value = {}; value[key] = !state()[key]; patch(value); }; });
+  panel.querySelectorAll('[data-section]').forEach(function (button) {
+    button.onclick = function () { openMcpSkillsWorkbench(button.dataset.section); };
+    button.onkeydown = function (event) {
+      if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+      event.preventDefault(); var tab = button.dataset.section === 'mcp' && skillsAllowed() ? 'skills' : 'mcp';
+      if (event.key === 'Home') tab = 'mcp'; if (event.key === 'End' && skillsAllowed()) tab = 'skills';
+      openMcpSkillsWorkbench(tab); panel.querySelector('[data-section="' + tab + '"]').focus();
+    };
+  });
+  // Compatibility targets for older mobile entry points; never palette tiles.
+  ['skills-btn', 'mate-skills-btn'].forEach(function (id) {
+    if (document.getElementById(id)) return;
+    var button = document.createElement('button'); button.id = id; button.hidden = true;
+    button.onclick = function () { openMcpSkillsWorkbench('skills'); }; root.appendChild(button);
+  });
+  refreshIcons(panel); render(); return panel;
+}
+export function openMcpSkillsWorkbench(tab) {
+  if (!ensureMcpSkillsWorkbench()) return;
+  tab = tab || state().tab || 'mcp';
+  if (tab === 'skills' && !skillsAllowed()) tab = 'mcp';
+  claimRightWorkbench('mcp-skills'); patch({ open: true, tab: tab });
+}
+export function closeMcpSkillsWorkbench() { patch({ open: false }); releaseRightWorkbench('mcp-skills'); }
+function render() {
+  var panel = document.getElementById('mcp-skills-workbench'); if (!panel) return;
+  var current = state(); var tab = current.tab || 'mcp';
+  panel.classList.toggle('hidden', !current.open); panel.classList.toggle('workbench-wide', !!current.wide); panel.classList.toggle('panel-fullscreen', !!current.fullscreen);
+  ['wide', 'fullscreen'].forEach(function (key) { panel.querySelector('[data-workbench="' + key + '"]').setAttribute('aria-pressed', String(!!current[key])); });
+  panel.querySelectorAll('[data-section]').forEach(function (button) { var selected = button.dataset.section === tab; button.setAttribute('aria-selected', String(selected)); button.tabIndex = selected ? 0 : -1; button.hidden = button.dataset.section === 'skills' && !skillsAllowed(); });
+  ['mcp', 'skills'].forEach(function (name) { var section = document.getElementById(name + '-modal'); if (section) section.classList.toggle('hidden', !current.open || name !== tab); });
+}
+registerRightWorkbench('mcp-skills', closeMcpSkillsWorkbench);
+store.subscribe(function (current, previous) {
+  if (current.currentSlug !== previous.currentSlug || current.myUserId !== previous.myUserId || current.dmMode !== previous.dmMode) { closeMcpSkillsWorkbench(); return; }
+  if (current.permissions !== previous.permissions && !skillsAllowed() && state().tab === 'skills') { patch({ tab: 'mcp' }); return; }
+  if (current.mcpSkillsWorkbench !== previous.mcpSkillsWorkbench || current.permissions !== previous.permissions) render();
+});

package/lib/public/modules/mcp-ui.js

@@ -1,3 +1,4 @@
+import { ensureMcpSkillsWorkbench, openMcpSkillsWorkbench, closeMcpSkillsWorkbench } from './mcp-skills-workbench.js';
 // mcp-ui.js - MCP Servers modal (sidebar button + panel)
 // Renders available MCP servers with per-project toggle checkboxes.
 
@@ -69,6 +70,7 @@ export function mcpPermissionModeApplicability(state) {
 }
 
 export function initMcp() {
+  ensureMcpSkillsWorkbench();
   modal = document.getElementById("mcp-modal");
   contentEl = document.getElementById("mcp-content");
 
@@ -87,6 +89,7 @@ export function initMcp() {
       state.currentMode !== prev.currentMode || state.effectivePermissionMode !== prev.effectivePermissionMode ||
       state.permissionCapabilities !== prev.permissionCapabilities || state.mcpPermissionModeOverrides !== prev.mcpPermissionModeOverrides ||
       state.mcpPermissionModePendingByTarget !== prev.mcpPermissionModePendingByTarget || state.connected !== prev.connected;
+    changed = changed || state.mcpSkillsWorkbench !== prev.mcpSkillsWorkbench;
     if (changed && modal && !modal.classList.contains("hidden")) renderMcpServerList();
   });
 
@@ -126,14 +129,14 @@ export function getMcpServers() {
 
 function openMcpModal() {
   if (!modal) return;
-  modal.classList.remove("hidden");
+  openMcpSkillsWorkbench("mcp");
   refreshIcons(modal);
   renderMcpServerList();
 }
 
 function closeMcpModal() {
   if (!modal) return;
-  modal.classList.add("hidden");
+  closeMcpSkillsWorkbench();
 }
 
 function updateBadge() {
@@ -272,11 +275,8 @@ function renderMcpServerList() {
       label: "Setup Extension",
       icon: "puzzle",
       onClick: function () {
-        closeMcpModal();
-        setTimeout(function () {
-          var extPill = document.getElementById("ext-pill");
-          if (extPill) extPill.click();
-        }, 100);
+        var extPill = document.getElementById("ext-pill");
+        if (extPill && extPill.getAttribute("aria-expanded") !== "true") extPill.click();
       }
     }
   }));
@@ -317,11 +317,8 @@ function renderMcpServerList() {
       label: "Open Extension popup to add servers",
       icon: "puzzle",
       onClick: function () {
-        closeMcpModal();
-        setTimeout(function () {
-          var extPill = document.getElementById("ext-pill");
-          if (extPill) extPill.click();
-        }, 100);
+        var extPill = document.getElementById("ext-pill");
+        if (extPill && extPill.getAttribute("aria-expanded") !== "true") extPill.click();
       }
     } : null
   }));