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

package/lib/public/css/settings-ui.css

@@ -0,0 +1,295 @@
+/* ==========================================================================
+   Settings UI primitives
+   One scoped visual language for User, Project and Server settings.
+   Loaded after the per-surface sheets so these rules win on equal specificity.
+   Uses existing theme tokens only; nothing here applies outside settings.
+   ========================================================================== */
+
+:is(#user-settings, #project-settings, #server-settings) {
+  --sui-radius-control: 8px;
+  --sui-radius-card: 10px;
+  --sui-control-h: 36px;
+  --sui-focus: 0 0 0 3px var(--accent-12);
+}
+
+/* --- Headings --- */
+:is(.us-section, .ps-section, .server-settings-section) h2 {
+  margin: 0 0 18px;
+  font-size: 20px;
+  font-weight: var(--font-weight-heading, 650);
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  color: var(--text);
+}
+
+:is(.us-section, .ps-section, .server-settings-section) h3 {
+  margin: 26px 0 8px;
+  font-size: 12px;
+  font-weight: var(--font-weight-heading, 650);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+:is(.us-section, .ps-section, .server-settings-section) .settings-card h3 {
+  margin: 0 0 4px;
+  font-size: 14px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text);
+}
+
+/* --- Navigation --- */
+:is(#user-settings .us-nav-item, #project-settings .settings-nav-item, #server-settings .settings-nav-item) {
+  padding: 7px 10px;
+  border: 0;
+  border-radius: var(--sui-radius-control);
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+:is(#user-settings .us-nav-item, #project-settings .settings-nav-item, #server-settings .settings-nav-item):hover {
+  background: rgba(var(--overlay-rgb), 0.05);
+  color: var(--text);
+}
+
+:is(#user-settings .us-nav-item, #project-settings .settings-nav-item, #server-settings .settings-nav-item).active {
+  background: rgba(var(--overlay-rgb), 0.08);
+  color: var(--text);
+}
+
+:is(#user-settings .us-nav-danger, #server-settings .settings-nav-danger, #project-settings .settings-nav-danger),
+:is(#user-settings .us-nav-danger, #server-settings .settings-nav-danger, #project-settings .settings-nav-danger).active {
+  color: var(--error);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-nav-item, .settings-nav-item, .settings-nav-dropdown):focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* --- Cards and rows --- */
+:is(#user-settings, #project-settings, #server-settings) .settings-card {
+  margin-bottom: 16px;
+  padding: 4px 0;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--sui-radius-card);
+  background: var(--bg-alt);
+  box-shadow: none;
+}
+
+:is(#user-settings, #project-settings, #server-settings) .settings-card:has(.layout-switcher) { padding: 14px; }
+
+:is(#user-settings, #project-settings, #server-settings) .settings-field { padding: 14px 16px; }
+
+:is(#user-settings, #project-settings, #server-settings) .settings-field-row,
+:is(#user-settings, #project-settings, #server-settings) .settings-toggle-row {
+  position: relative;
+  gap: 16px;
+  padding: 12px 16px;
+}
+
+:is(#user-settings, #project-settings, #server-settings) .settings-label {
+  display: block;
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--text);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.settings-field-row, .settings-toggle-row) .settings-label { margin-bottom: 0; }
+
+:is(#user-settings, #project-settings, #server-settings) .settings-hint,
+:is(.ps-section-desc, .ps-save-status) {
+  margin: 4px 0 0;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+:is(#user-settings, #project-settings, #server-settings) .settings-value { color: var(--text); }
+
+/* --- Toggle: keep the input keyboard-reachable, show focus on the track --- */
+:is(#user-settings, #project-settings, #server-settings) .settings-toggle-row input {
+  display: block;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(#user-settings, #project-settings, #server-settings) .settings-toggle-row input:focus-visible + .toggle-track {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* --- Text controls --- */
+:is(#user-settings, #project-settings, #server-settings) :is(.us-text-input, .ps-text-input, .settings-select, .ps-select, .ps-textarea, .settings-network-origins, #settings-pin-input) {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--sui-control-h);
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--sui-radius-control);
+  background: var(--bg);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.4;
+  outline: none;
+  box-shadow: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.ps-textarea, .settings-network-origins) {
+  padding: 10px 12px;
+  line-height: 1.6;
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-text-input, .ps-text-input, .settings-select, .ps-select, .ps-textarea, .settings-network-origins, #settings-pin-input):hover:not(:disabled) {
+  border-color: var(--text-dimmer);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-text-input, .ps-text-input, .settings-select, .ps-select, .ps-textarea, .settings-network-origins, #settings-pin-input):focus,
+:is(#user-settings, #project-settings, #server-settings) :is(.us-text-input, .ps-text-input, .settings-select, .ps-select, .ps-textarea, .settings-network-origins, #settings-pin-input):focus-visible {
+  border-color: var(--accent);
+  box-shadow: var(--sui-focus);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-text-input, .ps-text-input, .ps-textarea, #settings-pin-input)::placeholder { color: var(--text-dimmer); }
+
+:is(#user-settings, #project-settings, #server-settings) :is(input, textarea, select):disabled { opacity: 0.55; cursor: not-allowed; }
+
+:is(#user-settings, #project-settings, #server-settings) :is(input, textarea)[aria-invalid="true"] {
+  border-color: var(--error);
+  box-shadow: 0 0 0 3px var(--error-12);
+}
+
+/* --- Buttons: primary / secondary / destructive --- */
+:is(#user-settings, #project-settings, #server-settings) :is(.us-btn, .settings-btn-sm, .settings-btn-option) {
+  box-sizing: border-box;
+  min-height: 32px;
+  padding: 6px 14px;
+  border-radius: var(--sui-radius-control);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
+}
+
+:is(#user-settings, #project-settings, #server-settings) .us-btn {
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: #fff;
+}
+
+:is(#user-settings, #project-settings, #server-settings) .us-btn:hover:not(:disabled) {
+  opacity: 1;
+  filter: brightness(1.08);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-btn-secondary, .settings-btn-sm) {
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-secondary);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-btn-secondary, .settings-btn-sm):hover:not(:disabled) {
+  filter: none;
+  border-color: var(--text-dimmer);
+  background: rgba(var(--overlay-rgb), 0.06);
+  color: var(--text);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-btn-danger, .settings-btn-danger) {
+  border-color: color-mix(in srgb, var(--error) 40%, var(--border));
+  background: transparent;
+  color: var(--error);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-btn-danger, .settings-btn-danger):hover:not(:disabled) {
+  background: var(--error-12);
+  border-color: var(--error);
+  color: var(--error);
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-btn, .settings-btn-sm):focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+:is(#user-settings, #project-settings, #server-settings) :is(.us-btn, .settings-btn-sm):disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* --- Form layout and status --- */
+:is(#user-settings, #project-settings, #server-settings) .settings-form { display: flex; flex-direction: column; align-items: stretch; }
+:is(#user-settings, #project-settings, #server-settings) .settings-form .settings-hint { margin-top: 8px; }
+
+:is(#user-settings, #project-settings, #server-settings) .settings-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+:is(#user-settings, #project-settings, #server-settings) .settings-status {
+  min-height: 18px;
+  margin: 12px 0 0;
+  padding-left: 14px;
+  position: relative;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+:is(#user-settings, #project-settings, #server-settings) .settings-status::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text-dimmer);
+}
+
+:is(#user-settings, #project-settings, #server-settings) .settings-status:empty { display: none; }
+:is(#user-settings, #project-settings, #server-settings) .settings-status[data-state="connected"] { color: var(--text); }
+:is(#user-settings, #project-settings, #server-settings) .settings-status[data-state="connected"]::before { background: var(--success, #3fb950); }
+:is(#user-settings, #project-settings, #server-settings) .settings-status[data-state="error"] { color: var(--error); }
+:is(#user-settings, #project-settings, #server-settings) .settings-status[data-state="error"]::before { background: var(--error); }
+
+@media (max-width: 580px) {
+  :is(#user-settings, #project-settings, #server-settings) .settings-form-actions > .us-btn { flex: 1 1 auto; }
+  :is(#user-settings, #project-settings, #server-settings) .settings-field { padding: 14px; }
+}
+
+/* Monospace controls keep their face after the shared control reset. */
+:is(#user-settings, #project-settings, #server-settings) :is(.us-pin-input, .settings-network-origins, .ps-textarea-mono) {
+  font-family: var(--font-mono, "Roboto Mono", monospace);
+  font-size: 13px;
+}
+
+/* Description-to-form gap inside integration cards. */
+:is(#user-settings, #project-settings, #server-settings) .settings-field > .settings-hint + .settings-form { margin-top: 16px; }
+
+/* The shared server-settings mobile dropdown margin (16px sides) pushed the
+   100%-wide User Settings dropdown past the modal edge. */
+@media (max-width: 580px) {
+  #user-settings .settings-nav-dropdown {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+  }
+}

package/lib/public/index.html

@@ -1015,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>
@@ -1023,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>
@@ -1193,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>

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

@@ -1,3 +1,4 @@
+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';
@@ -816,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/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/project-settings.js

@@ -3,6 +3,8 @@ import { refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
 import { parseEmojis } from './markdown.js';
 import { closeFileViewer } from './filebrowser.js';
+import { holdNotesForSettings, releaseNotesForSettings } from './sticky-notes.js';
+import { openNotesBrowser, closeNotesBrowser, isNotesBrowserOpen } from './sticky-notes-browser.js';
 import { renderModelList, renderModeList, renderEffortBar, renderThinkingBar, renderBetaCard } from './settings-defaults.js';
 import { initProjectSessionVisibilitySettings, populateProjectSessionVisibilitySettings } from './project-session-visibility-settings.js';
 
@@ -12,6 +14,7 @@ var navItems = null;
 var sections = null;
 var currentSlug = null;
 var currentProject = null; // { slug, name, icon }
+var notesBrowserReopen = false;
 
 // Emoji categories (reuse from sidebar)
 var EMOJI_CATEGORIES = null;
@@ -186,15 +189,30 @@ export function openProjectSettings(slug, project) {
   // Close file viewer if open (prevent split-screen)
   closeFileViewer();
 
+  // Sticky notes must not sit over settings; remember what to restore.
+  if (panelEl.classList.contains("hidden")) {
+    notesBrowserReopen = isNotesBrowserOpen();
+    if (notesBrowserReopen) closeNotesBrowser();
+    holdNotesForSettings();
+  }
+
   // Show panel
   panelEl.classList.remove("hidden");
   refreshIcons();
 }
 
-export function closeProjectSettings() {
+// `cleanup` is for teardown while leaving the project: the notes workbench is
+// not reopened over whatever screen comes next.
+export function closeProjectSettings(opts) {
   if (!panelEl) return;
+  var wasOpen = !panelEl.classList.contains("hidden");
   panelEl.classList.add("hidden");
   closePsEmojiPicker();
+  if (wasOpen) {
+    releaseNotesForSettings();
+    if (notesBrowserReopen && !(opts && opts.cleanup)) openNotesBrowser();
+    notesBrowserReopen = false;
+  }
 }
 
 export function isProjectSettingsOpen() {