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

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">
@@ -1037,6 +1015,7 @@
           <option value="us-mates">Mates</option>
           <option value="us-experimental">Experimental</option>
           <option value="us-email">Email</option>
+          <option value="us-integrations">Integrations</option>
         </select>
         <div class="us-modal-nav-items">
           <button class="us-nav-item active" data-section="us-account"><span>Account</span></button>
@@ -1045,6 +1024,7 @@
           <button class="us-nav-item" data-section="us-mates"><span>Mates</span></button>
           <button class="us-nav-item" data-section="us-experimental"><span>Experimental</span></button>
           <button class="us-nav-item" data-section="us-email"><span>Email</span></button>
+          <button class="us-nav-item" data-section="us-integrations"><span>Integrations</span></button>
           <div class="us-nav-separator"></div>
           <button class="us-nav-item us-nav-danger" data-section="us-logout"><span>Log Out</span></button>
         </div>
@@ -1215,6 +1195,24 @@
           </div>
         </div>
 
+        <div class="us-section" data-section="us-integrations">
+          <h2>Integrations</h2>
+          <div class="settings-card"><div class="settings-field">
+            <h3>Linear</h3>
+            <p class="settings-hint">Connect your personal Linear API key to find issues and link them to conversations. Clay reads issues and comments; it does not change Linear.</p>
+            <form id="us-linear-form" class="settings-form">
+              <label class="settings-label" for="us-linear-key">Personal API key</label>
+              <input id="us-linear-key" class="us-text-input" type="password" autocomplete="off" maxlength="4096" required placeholder="Linear API key" aria-describedby="us-linear-help us-linear-status">
+              <p id="us-linear-help" class="settings-hint">Create a read-only key in Linear Settings → Security &amp; access. Your key is encrypted and stored server-side for your account.</p>
+              <div class="settings-form-actions">
+                <button type="submit" class="us-btn">Connect</button>
+                <button type="button" class="us-btn us-btn-secondary" id="us-linear-disconnect" disabled>Disconnect</button>
+              </div>
+              <p id="us-linear-status" class="settings-status" role="status" aria-live="polite"></p>
+            </form>
+          </div></div>
+        </div>
+
         <!-- Email section -->
         <div class="us-section" data-section="us-email">
           <h2>Email Accounts</h2>
@@ -1768,6 +1766,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,5 @@
+import { handleLinearResult } from './linear-panel.js';
+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 +106,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;
@@ -814,6 +817,9 @@ export function processMessage(msg) {
         handleRemoteSelection(msg);
         break;
 
+      case "linear_result":
+        handleLinearResult(msg);
+        break;
       case "pair_result_status":
         handlePairResultStatus(msg);
         break;

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

@@ -621,7 +621,7 @@ export function handleRemoveProjectResult(msg) {
       var targetSlug = chooseProjectAfterRemoval(cachedProjects, msg.slug);
 
       showToast(isWorktree ? "Worktree removed" : "Project removed", "success");
-      closeProjectSettings();
+      closeProjectSettings({ cleanup: true });
 
       // Suppress disconnect overlay and reconnect by detaching the WS
       var ws = getWs();

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/issues.js

@@ -1,3 +1,4 @@
+import { openLinear, initLinearPanel } from './linear-panel.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { showToast } from './utils.js';
@@ -162,13 +163,15 @@ export function openIssues(ref) {
   else listing();
 }
 export function initIssues() {
+  initLinearPanel();
   var host = document.getElementById('main-panels');
   if (!host || panel()) return;
   registerRightWorkbench("issues", closeIssues);
   var el = document.createElement('section');
   el.id = 'issues-panel'; el.className = 'hidden'; el.setAttribute('aria-label', 'Project Issues');
-  el.innerHTML = '<header class="issues-topbar"><button class="issues-icon-btn" data-issues-back aria-label="Back to issues" title="Back to issue list"><i data-lucide="arrow-left"></i></button><span class="issues-title"><i data-lucide="circle-dot"></i>Issues</span><span class="issues-subtitle">Manage issues through Driver chat.</span><div class="issues-window-actions"><button class="issues-icon-btn" data-issues-wide aria-label="Widen Issues" title="Widen Issues" aria-pressed="false"><i data-lucide="chevrons-left-right"></i></button><button class="issues-icon-btn" data-issues-full aria-label="Toggle Issues fullscreen" title="Toggle fullscreen" aria-pressed="false"><i data-lucide="maximize-2"></i></button><button class="issues-icon-btn" data-issues-close aria-label="Close Issues" title="Close Issues"><i data-lucide="x"></i></button></div></header><div class="issues-filters"><label class="issues-search"><i data-lucide="search"></i><input name="query" type="search" placeholder="Search issues" aria-label="Search issues"></label><select name="filter-status" aria-label="Filter status"><option value="">All statuses</option><option value="open">Open</option><option value="in_progress">In progress</option><option value="resolved">Resolved</option><option value="closed">Closed</option></select><select name="filter-type" aria-label="Filter type"><option value="">All types</option><option value="bug">Bug</option><option value="feature">Feature</option><option value="plan">Plan</option></select></div><p class="issues-notice" role="status"></p><main class="issues-content" role="region" aria-live="polite"></main><div class="issues-delete-dialog hidden" role="dialog" aria-modal="true" aria-labelledby="issues-delete-heading"><div class="issues-delete-card"><h2 id="issues-delete-heading">Delete this issue?</h2><p>This removes the issue from the board but preserves its history.</p><p class="issues-delete-title"></p><p class="issues-delete-status" role="status"></p><div><button type="button" data-issue-delete-cancel>Cancel</button><button type="button" data-issue-delete-confirm>Delete issue</button></div></div></div>';
+  el.innerHTML = '<header class="issues-topbar"><button class="issues-icon-btn" data-issues-back aria-label="Back to issues" title="Back to issue list"><i data-lucide="arrow-left"></i></button><span class="issues-title"><i data-lucide="circle-dot"></i>Issues</span><span class="issues-subtitle">Manage issues through Driver chat.</span><button type="button" class="issues-icon-btn" data-open-linear>Linear</button><div class="issues-window-actions"><button class="issues-icon-btn" data-issues-wide aria-label="Widen Issues" title="Widen Issues" aria-pressed="false"><i data-lucide="chevrons-left-right"></i></button><button class="issues-icon-btn" data-issues-full aria-label="Toggle Issues fullscreen" title="Toggle fullscreen" aria-pressed="false"><i data-lucide="maximize-2"></i></button><button class="issues-icon-btn" data-issues-close aria-label="Close Issues" title="Close Issues"><i data-lucide="x"></i></button></div></header><div class="issues-filters"><label class="issues-search"><i data-lucide="search"></i><input name="query" type="search" placeholder="Search issues" aria-label="Search issues"></label><select name="filter-status" aria-label="Filter status"><option value="">All statuses</option><option value="open">Open</option><option value="in_progress">In progress</option><option value="resolved">Resolved</option><option value="closed">Closed</option></select><select name="filter-type" aria-label="Filter type"><option value="">All types</option><option value="bug">Bug</option><option value="feature">Feature</option><option value="plan">Plan</option></select></div><p class="issues-notice" role="status"></p><main class="issues-content" role="region" aria-live="polite"></main><div class="issues-delete-dialog hidden" role="dialog" aria-modal="true" aria-labelledby="issues-delete-heading"><div class="issues-delete-card"><h2 id="issues-delete-heading">Delete this issue?</h2><p>This removes the issue from the board but preserves its history.</p><p class="issues-delete-title"></p><p class="issues-delete-status" role="status"></p><div><button type="button" data-issue-delete-cancel>Cancel</button><button type="button" data-issue-delete-confirm>Delete issue</button></div></div></div>';
   host.appendChild(el);
+  el.querySelector('[data-open-linear]').addEventListener('click', function () { openLinear(); });
   el.addEventListener('input', handleIssueGithubInput);
   var button = document.getElementById('issues-btn');
   if (button) button.addEventListener('click', function () { if (store.get('issuesOpen')) closeIssues(); else openIssues(); });

package/lib/public/modules/linear-panel.js

@@ -0,0 +1,120 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml } from './utils.js';
+import { renderMarkdown } from './markdown.js';
+import { refreshIcons } from './icons.js';
+import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+import { openUserSettings } from './user-settings.js';
+
+function esc(value) { return escapeHtml(String(value || '')).replace(/"/g, '"').replace(/'/g, '''); }
+function panel() { return document.getElementById('linear-panel'); }
+function content() { return panel().querySelector('.linear-content'); }
+function notice(text) { panel().querySelector('[role="status"]').textContent = text; }
+function request(action, args) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) { notice('Reconnect to use Linear.'); return; }
+  if (action === 'linear_search' || (action === 'linear_read' && !args.cursor)) {
+    store.set({ linearIssue: null, linearMatches: [] }); content().textContent = '';
+  }
+  var id = crypto.randomUUID();
+  store.set({ linearRequest: { id: id, action: action, args: args, project: store.get('currentSlug'), socket: ws } });
+  notice('Loading…');
+  ws.send(JSON.stringify({ type: action, args: args, requestId: id }));
+  return id;
+}
+function prose(text) {
+  var element = document.createElement('template');
+  element.innerHTML = renderMarkdown(text || '');
+  // Private Linear attachments need authenticated delivery; keep them as links for now.
+  element.content.querySelectorAll('img').forEach(function (image) {
+    var link = document.createElement('a');
+    link.textContent = image.alt || 'View attachment in Linear';
+    link.href = (store.get('linearIssue') || {}).url || 'https://linear.app'; link.target = '_blank'; link.rel = 'noopener noreferrer';
+    image.replaceWith(link);
+  });
+  return DOMPurify.sanitize(element.innerHTML, { ALLOW_DATA_ATTR: false, FORBID_TAGS: ['form', 'button', 'input', 'select', 'textarea', 'iframe', 'video', 'audio'], FORBID_ATTR: ['id', 'class', 'style'] });
+}
+function renderIssue() {
+  var issue = store.get('linearIssue'), sessions = store.get('linearMatches') || [];
+  if (!issue) return;
+  var active = (store.get('githubWorkSessions') || []).find(function (item) { return item.id === store.get('activeSessionId'); });
+  var linked = !!(active && (active.linearLinks || []).some(function (item) { return item.url === issue.url; }));
+  var prs = active && linked ? (active.githubLinks || []).filter(function (item) { return item.kind === 'pr' && /^https:\/\/github\.com\/[^/]+\/[^/]+\/pull\/[1-9][0-9]*$/.test(item.url); }) : [];
+  content().innerHTML = '<article class="issue-detail"><div class="issue-byline">' + esc(issue.identifier) + ' · ' + esc(issue.stateName) + '</div><h2 class="issue-doc-title">' + esc(issue.title) + '</h2>' +
+    '<div class="linear-actions"><button type="button" data-linear-link>' + (linked ? 'Unlink from this conversation' : 'Link to this conversation') + '</button>' +
+    (!sessions.length ? '<button type="button" data-linear-start>Start work</button>' : '') +
+    '<a target="_blank" rel="noopener noreferrer" href="' + esc(issue.url) + '">Open in Linear</a></div>' +
+    '<p class="settings-hint">Linking shares the issue title and status with this conversation’s viewers. Starting work adds the description and comments to a new conversation.</p>' +
+    (sessions.length ? '<section><h3>Linked conversations</h3>' + sessions.map(function (item) { return '<button type="button" class="issue-row" data-linear-session="' + item.sessionId + '">' + esc(item.title || 'Open conversation') + '</button>'; }).join('') + '</section>' : '') +
+    (prs.length ? '<section><h3>GitHub pull requests</h3>' + prs.map(function (pr) { return '<a target="_blank" rel="noopener noreferrer" href="' + esc(pr.url) + '">PR #' + esc(pr.number) + ' · ' + esc(pr.title) + '</a>'; }).join('<br>') + '</section>' : '') +
+    '<div class="issue-doc-body">' + prose(issue.description) + '</div><section class="issue-discussion"><h3>Comments</h3>' +
+    (issue.comments.length ? issue.comments.map(function (comment) { return '<article><strong>' + esc(comment.author) + '</strong><div class="issue-doc-body">' + prose(comment.body) + '</div></article>'; }).join('') : '<p>No comments yet.</p>') +
+    (issue.pageInfo && issue.pageInfo.hasNextPage ? '<button type="button" data-linear-more>More comments</button>' : '') + '</section></article>';
+}
+function showSearch() {
+  store.set({ linearIssue: null, linearRequest: null, linearMatches: [] });
+  content().innerHTML = '<p class="linear-empty">Search by title or identifier, or paste a Linear issue URL.</p>';
+  notice('');
+  panel().querySelector('input').focus();
+}
+export function closeLinear() {
+  if (panel()) panel().classList.add('hidden');
+  store.set({ linearOpen: false, linearRequest: null, linearIssue: null, linearMatches: [] });
+  releaseRightWorkbench('linear');
+}
+export function openLinear(url) {
+  initLinearPanel();
+  if (!panel() || store.get('isMate')) return;
+  claimRightWorkbench('linear');
+  panel().classList.remove('hidden'); store.set({ linearOpen: true });
+  if (url) { content().textContent = ''; request('linear_read', { url: url }); }
+  else showSearch();
+}
+export function handleLinearResult(msg) {
+  var pending = store.get('linearRequest');
+  if (!pending || !store.get('linearOpen') || pending.id !== msg.requestId || pending.project !== store.get('currentSlug') || msg.projectSlug !== pending.project || pending.socket !== getWs()) return;
+  store.set({ linearRequest: null });
+  panel().querySelectorAll('button').forEach(function (button) { button.disabled = false; });
+  if (msg.error) { notice(msg.error); return; }
+  notice('');
+  var result = msg.result || {};
+  if (msg.action === 'linear_search') {
+    store.set({ linearIssue: null });
+    content().innerHTML = (result.items || []).map(function (item) {
+      return '<button type="button" class="issue-row" data-linear-url="' + esc(item.url) + '"><small>' + esc(item.identifier) + ' · ' + esc(item.stateName) + '</small><strong>' + esc(item.title) + '</strong></button>';
+    }).join('') || '<p class="linear-empty">No matching issues.</p>';
+  } else if (msg.action === 'linear_read') {
+    var issue = result.issue, old = store.get('linearIssue');
+    if (pending.args.cursor && old && old.url === issue.url) issue.comments = old.comments.concat(issue.comments).filter(function (item, index, all) { return all.findIndex(function (other) { return item.id === other.id; }) === index; });
+    store.set({ linearIssue: issue, linearMatches: result.matchingSessions }); renderIssue();
+  } else if (msg.action === 'linear_link' || msg.action === 'linear_unlink') request('linear_read', { url: pending.args.url });
+  else if (msg.action === 'linear_start_work' || msg.action === 'linear_open_work') { request('linear_read', { url: pending.args.url }); }
+}
+export function initLinearPanel() {
+  var host = document.getElementById('main-panels');
+  if (!host || panel()) return;
+  var el = document.createElement('section'); el.id = 'linear-panel'; el.className = 'hidden'; el.setAttribute('aria-label', 'Linear issues');
+  el.innerHTML = '<header class="linear-topbar"><button type="button" data-linear-back aria-label="Back to Linear search"><i data-lucide="arrow-left"></i></button><strong>Linear</strong><button type="button" data-linear-settings>Connection</button><button type="button" data-linear-close aria-label="Close Linear"><i data-lucide="x"></i></button></header><form class="linear-search"><input type="search" aria-label="Search Linear issues" placeholder="Issue URL, identifier or title" maxlength="2048" required><button type="submit">Search</button></form><p class="linear-notice" role="status"></p><div class="linear-content"></div>';
+  host.appendChild(el); registerRightWorkbench('linear', closeLinear); refreshIcons(el);
+  el.querySelector('form').addEventListener('submit', function (event) { event.preventDefault(); request('linear_search', { query: el.querySelector('input').value }); });
+  el.addEventListener('click', function (event) {
+    var button = event.target.closest('button'); if (!button) return;
+    var issue = store.get('linearIssue');
+    if (button.hasAttribute('data-linear-close')) closeLinear();
+    else if (button.hasAttribute('data-linear-back')) showSearch();
+    else if (button.hasAttribute('data-linear-settings')) openUserSettings('us-integrations');
+    else if (button.dataset.linearUrl) { content().textContent = ''; request('linear_read', { url: button.dataset.linearUrl }); }
+    else if (issue && button.hasAttribute('data-linear-link')) {
+      var active = (store.get('githubWorkSessions') || []).find(function (item) { return item.id === store.get('activeSessionId'); });
+      var linked = active && (active.linearLinks || []).some(function (item) { return item.url === issue.url; });
+      button.disabled = true; request(linked ? 'linear_unlink' : 'linear_link', { url: issue.url, sessionId: store.get('activeSessionId') });
+    } else if (issue && button.dataset.linearSession) { button.disabled = true; request('linear_open_work', { url: issue.url, sessionId: Number(button.dataset.linearSession) }); }
+    else if (issue && button.hasAttribute('data-linear-start')) { button.disabled = true; request('linear_start_work', { url: issue.url }); }
+    else if (issue && button.hasAttribute('data-linear-more')) { button.disabled = true; request('linear_read', { url: issue.url, cursor: issue.pageInfo.endCursor }); }
+  });
+  document.addEventListener('keydown', function (event) { if (event.key === 'Escape' && store.get('linearOpen')) closeLinear(); });
+  store.subscribe(function (state, previous) {
+    if (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId || state.dmMode !== previous.dmMode || (previous.connected && !state.connected)) closeLinear();
+    else if (state.linearOpen && state.githubWorkSessions !== previous.githubWorkSessions && state.linearIssue) renderIssue();
+  });
+}

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

@@ -0,0 +1,61 @@
+import { store } from './store.js';
+
+export function clearLinearKeyInput() {
+  var input = document.getElementById('us-linear-key');
+  if (input) input.value = '';
+}
+function setLinearStatus(text, state) {
+  var status = document.getElementById('us-linear-status');
+  if (!status) return;
+  status.textContent = text;
+  if (state) status.dataset.state = state; else delete status.dataset.state;
+}
+export async function loadLinearConnection() {
+  var actor = store.get('myUserId');
+  var generation = (store.get('linearConnectionGeneration') || 0) + 1;
+  store.set({ linearConnectionGeneration: generation });
+  try {
+    var response = await fetch('/api/linear/connection');
+    if (!response.ok) throw new Error('Could not load Linear connection.');
+    var data = await response.json();
+    if (store.get('linearConnectionGeneration') !== generation || store.get('myUserId') !== actor) return;
+    store.set({ linearConnection: data });
+    setLinearStatus(data.connected ? 'Connected to ' + data.workspace.name : 'Not connected', data.connected ? 'connected' : '');
+    var disconnect = document.getElementById('us-linear-disconnect');
+    if (disconnect) disconnect.disabled = !data.connected;
+  } catch (error) { if (store.get('linearConnectionGeneration') === generation) setLinearStatus(error.message, 'error'); }
+}
+export function initLinearSettings() {
+  var form = document.getElementById('us-linear-form');
+  if (!form || store.get('linearSettingsBound')) return;
+  store.set({ linearSettingsBound: true });
+  async function save(disconnect) {
+    if (store.get('linearConnectionSaving')) return;
+    var actor = store.get('myUserId');
+    store.set({ linearConnectionSaving: true, linearConnectionGeneration: (store.get('linearConnectionGeneration') || 0) + 1 });
+    var input = document.getElementById('us-linear-key');
+    var buttons = form.querySelectorAll('button');
+    buttons.forEach(function (button) { button.disabled = true; });
+    setLinearStatus(disconnect ? 'Disconnecting…' : 'Connecting…', '');
+    try {
+      var response = await fetch('/api/linear/connection', { method: disconnect ? 'DELETE' : 'PUT',
+        headers: { 'Content-Type': 'application/json' }, body: disconnect ? undefined : JSON.stringify({ key: input.value }) });
+      clearLinearKeyInput();
+      if (store.get('myUserId') !== actor) return;
+      var data = await response.json();
+      if (!response.ok) throw new Error(data.error || 'Could not update Linear connection.');
+      store.set({ linearConnection: data, githubWorkRefresh: null });
+      setLinearStatus(data.connected ? 'Connected to ' + data.workspace.name : 'Disconnected', data.connected ? 'connected' : '');
+    } catch (error) { clearLinearKeyInput(); setLinearStatus(error.message, 'error'); }
+    finally {
+      store.set({ linearConnectionSaving: false });
+      buttons.forEach(function (button) { button.disabled = false; });
+      document.getElementById('us-linear-disconnect').disabled = !(store.get('linearConnection') || {}).connected;
+    }
+  }
+  store.subscribe(function (state, previous) {
+    if (state.myUserId !== previous.myUserId) { clearLinearKeyInput(); store.set({ linearConnection: null, linearConnectionGeneration: (state.linearConnectionGeneration || 0) + 1 }); }
+  });
+  form.addEventListener('submit', function (event) { event.preventDefault(); save(false); });
+  document.getElementById('us-linear-disconnect').addEventListener('click', function () { save(true); });
+}

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