clay-server 4.7.1-beta.5 → 4.8.0-beta.2

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/css/vendor-login-browser.css

@@ -0,0 +1,63 @@
+.login-browser {
+  width: min(820px, calc(100vw - 48px));
+  height: min(780px, calc(100dvh - 48px));
+  max-width: none;
+  max-height: none;
+  padding: 0;
+  margin: auto;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--bg);
+  color: var(--text);
+  box-shadow: 0 32px 100px #0005, 0 4px 16px #0003;
+}
+.login-browser[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
+.login-browser::backdrop { background: #0007; backdrop-filter: blur(6px); }
+.login-browser-header { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
+.login-browser-vendor { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
+.login-browser-heading { flex: 1; min-width: 0; }
+.login-browser h2 { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; margin: 0; }
+.login-browser-origin { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--text-dimmer); }
+.login-browser-actions { display: flex; align-items: center; gap: 3px; }
+.login-browser button, .login-browser-more summary { font: inherit; cursor: pointer; color: var(--text-muted, var(--text)); }
+.login-browser button { border: 0; background: transparent; }
+.login-browser svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.6; }
+.login-browser .login-browser-icon, .login-browser-more summary { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 7px; }
+.login-browser button:hover, .login-browser-more summary:hover { background: var(--bg-alt); color: var(--text); }
+.login-browser button:focus-visible, .login-browser-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.login-browser .login-browser-keyboard-button { display: none; }
+.login-browser-more { position: relative; }
+.login-browser-more summary { list-style: none; }
+.login-browser-more summary::-webkit-details-marker { display: none; }
+.login-browser-menu { position: absolute; right: 0; top: 39px; z-index: 3; width: 180px; padding: 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); box-shadow: 0 8px 28px #0003; }
+.login-browser-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; border-radius: 6px; font-size: 12px; text-align: left; }
+.login-browser-viewport { position: relative; min-height: 0; overflow: hidden; background: #fff; line-height: 0; }
+.login-browser canvas { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; }
+.login-browser-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg-alt); color: var(--text-dimmer); font-size: 12px; line-height: 1.5; }
+.login-browser-loading strong { font-size: 14px; font-weight: 500; color: var(--text); }
+.login-browser-loading[hidden] { display: none; }
+.login-browser-spinner { width: 22px; height: 22px; margin-bottom: 8px; border: 2px solid var(--border); border-top-color: var(--text-dimmer); border-radius: 50%; animation: login-browser-spin .9s linear infinite; }
+.login-browser-keyboard { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; bottom: 0; left: 50%; opacity: 0; font-size: 16px; }
+.login-browser-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border); }
+.login-browser-info { min-width: 0; }
+.login-browser-status { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.login-browser-status-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--text-dimmer); }
+.login-browser[data-phase="error"] .login-browser-status-dot { background: var(--warning, #d69c51); }
+.login-browser-footer p { margin: 0; font-size: 11px; color: var(--text-dimmer); line-height: 1.5; }
+.login-browser-footer .login-browser-privacy { margin-top: 5px; color: var(--text-muted, var(--text)); }
+.login-browser .login-browser-terminal { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 11px; font-weight: 500; color: var(--text); }
+.login-browser-terminal svg:last-child { width: 12px; height: 12px; color: var(--text-dimmer); }
+@keyframes login-browser-spin { to { transform: rotate(360deg); } }
+@media (max-width: 600px) {
+  .login-browser { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
+  .login-browser-header { padding: max(12px, env(safe-area-inset-top)) 12px 12px; gap: 9px; }
+  .login-browser-vendor { width: 30px; height: 30px; border-radius: 8px; }
+  .login-browser h2 { font-size: 14px; }
+  .login-browser .login-browser-keyboard-button { display: flex; }
+  .login-browser-footer { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
+  .login-browser-status { justify-content: center; }
+  .login-browser-privacy { text-align: center; }
+  .login-browser .login-browser-terminal { min-height: 40px; font-size: 12px; }
+}
+@media (prefers-reduced-motion: reduce) { .login-browser-spinner { animation: none; } }

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
@@ -92,6 +93,7 @@ import { handleSkillInstallWs } from './app-skills-install.js';
 import { handleNotificationsState, handleNotificationCreated, handleNotificationDismissed, handleNotificationDismissedAll, showUpdateBanner } from './app-notifications.js';
 import { handleUpdateSnoozed } from './update-snooze.js';
 import { autoStartLoginIfNeeded, handleVendorLoginReady, handleVendorLoginState, handleVendorLoginError, handleAuthRefreshed } from './vendor-login.js';
+import { handleLoginBrowserMessage } from './vendor-login-browser.js';
 import { handleDebatePreparing, handleDebateBriefReady, renderDebateBriefReady, handleDebateStarted, renderDebateStarted, handleDebateTurn, handleDebateActivity, handleDebateStream, handleDebateTurnDone, handleDebateCommentQueued, handleDebateCommentInjected, renderDebateCommentInjected, handleDebateResumed, handleDebateEnded, renderDebateEnded, handleDebateError, isDebateActive, renderMcpDebateProposal, renderDebateUserResume } from './debate.js';
 import { handleMentionStart, handleMentionActivity, handleMentionStream, handleMentionDone, handleMentionError, renderMentionUser, renderMentionResponse, renderUserMention } from './mention.js';
 
@@ -103,6 +105,11 @@ 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;
+  }
   if (handleIssuesMessage(msg)) return;
   if (handleAutonomousRunMessage(msg)) return;
   if (handleLoopInterviewMessage(msg)) return;

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

@@ -170,7 +170,7 @@ function showBanner(notif, autoDismissMs) {
   } else if (isAuthRequired) {
     actionsHtml =
       '<div class="notif-banner-actions">' +
-        '<button class="notif-banner-auth-login notif-banner-update-now">Open terminal &amp; log in</button>' +
+        '<button class="notif-banner-auth-login notif-banner-update-now">Sign in</button>' +
       '</div>';
   } else if (isTuiAttention) {
     actionsHtml =

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