clay-server 5.3.0-beta.4 → 5.3.0-beta.6

package/lib/public/modules/filebrowser.js

@@ -1,10 +1,14 @@
+import { independentFilesActive, closeActiveFilePane, expandActiveFilePane, reopenIndependentFile, refreshIndependentFile, presentIndependentFile } from './file-pane-entrypoints.js';
+import { openIndependentFile, routeFilePaneMessage } from './file-pane-instances.js';
+import { activeSavedView } from './view-workspace-state.js';
+import { mapExtToLanguage, renderCodeWithLineNumbers, renderLargeTextFile, formatSize } from './file-viewer-source.js';
 import { presentedDocument, refreshPresentedDocument, closePresentedDocument } from './clay-studio-document.js';
 import { registerStudioPaint } from './clay-studio-render.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { escapeHtml, copyToClipboard } from './utils.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, exportMarkdownAsPdf } from './markdown.js';
 import { closeSidebar } from './sidebar.js';
-import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench, isRightWorkbenchCurrent } from './right-workbench.js';
+import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench, isRightWorkbenchCurrent, rightWorkbenchRevisionFor } from './right-workbench.js';
 import { renderUnifiedDiff, renderSplitDiff } from './diff.js';
 import { initFileIcons, getFileIconSvg, getFolderIconSvg } from './fileicons.js';
 import { copyMarkdownFormatting } from './rich-clipboard.js';
@@ -47,7 +51,7 @@ export function initFileBrowser(_ctx) {
     onFocus: function(path) {
       claimRightWorkbench("file-viewer");
       ctx.fileViewerEl.classList.remove("hidden");
-      if (path !== currentFilePath || (store.get("fileViewerIsHtml") && isRendered && !document.querySelector(".file-viewer-html-preview"))) requestFileContent(path);
+      if (path !== currentFilePath || (store.get("fileViewerIsHtml") && isRendered && !ctx.fileViewerEl.querySelector(".file-viewer-html-preview"))) requestFileContent(path);
     },
     onEmpty: function() { resetMarkdownViewModes(); teardownFileViewer(); },
   });
@@ -499,24 +503,30 @@ function ensureRenderedMarkdown() {
 }
 
 export function closeFileViewer() {
+  if (independentFilesActive()) return closeActiveFilePane();
   releaseRightWorkbench("file-viewer");
   teardownFileViewer();
 }
 
 function teardownFileViewer() {
   cancelPlantUmlPreview();
-  var htmlFrame = document.querySelector(".file-viewer-html-preview");
+  var htmlFrame = ctx.fileViewerEl.querySelector(".file-viewer-html-preview");
   if (htmlFrame) htmlFrame.remove();
   if (currentFilePath && isFollowingMarkdown(currentFilePath)) cancelMarkdownFollow();
   sendUnwatch();
   inlineDiffActive = false;
   exitMarkdownSlides();
   ctx.fileViewerEl.classList.remove("file-viewer-wide");
-  setFileViewerFullscreen(false);
+  setLegacyFileViewerFullscreen(false);
   ctx.fileViewerEl.classList.add("hidden");
 }
 
 export function setFileViewerFullscreen(enabled) {
+  if (independentFilesActive()) return expandActiveFilePane(enabled);
+  return setLegacyFileViewerFullscreen(enabled);
+}
+
+function setLegacyFileViewerFullscreen(enabled) {
   var isFullscreen = !!enabled;
   var viewer = ctx && ctx.fileViewerEl ? ctx.fileViewerEl : document.getElementById("file-viewer");
   var button = document.getElementById("file-viewer-fullscreen");
@@ -575,6 +585,11 @@ var pendingRenderedOpen = false;
 
 export function openFile(filePath, opts) {
   if (!filePath) return;
+  if (activeSavedView() && !store.get('paneMode')) {
+    var opened = openIndependentFile(filePath, opts);
+    if (opened !== false) closePresentedDocument();
+    return opened;
+  }
   var state = store.snap();
   if (!state.connected) return false;
   if (opts && opts.projectSlug && opts.projectSlug !== state.currentSlug) return false;
@@ -597,6 +612,7 @@ export function openFile(filePath, opts) {
 }
 
 export function reopenFileViewer() {
+  if (independentFilesActive()) return reopenIndependentFile();
   var workbenchRevision = claimRightWorkbench("file-viewer");
   store.set({ fileViewerOpenRevision: workbenchRevision });
   if (!focusedFileViewerTab()) return false;
@@ -616,6 +632,7 @@ export function reopenFileViewer() {
 
 export function openWorkingTreeDiff(diff) {
   if (!diff || !diff.path) return;
+  if (independentFilesActive()) return presentIndependentFile({ path: diff.path, content: diff.newContent, binary: diff.binary }, diff.binary ? null : { oldStr: diff.oldContent || "", newStr: diff.newContent || "" }, diff.review);
   var workbenchRevision = claimRightWorkbench("file-viewer");
   store.set({ fileViewerOpenRevision: workbenchRevision });
   openFileViewerTab(diff.path);
@@ -636,6 +653,7 @@ export function openWorkingTreeDiff(diff) {
 
 export function presentMarkdownEdit(msg) {
   if (!msg || !beginMarkdownPresentation(msg.path)) return;
+  if (independentFilesActive()) return presentIndependentFile(msg);
   var workbenchRevision = claimRightWorkbench("file-viewer");
   store.set({ fileViewerOpenRevision: workbenchRevision });
   openFileViewerTab(msg.path, { content: msg.content });
@@ -739,7 +757,7 @@ function requestFileContent(filePath) {
   if (refreshPresentedDocument(filePath)) return;
   var requestId = "file-read-" + Date.now() + "-" + Math.random().toString(36).slice(2);
   var state = store.snap();
-  store.set({ fileReadRequest: { requestId: requestId, path: filePath, projectSlug: state.currentSlug || null, sessionId: state.activeSessionId != null ? String(state.activeSessionId) : null, accountId: state.myUserId || null, workbenchRevision: store.get('rightWorkbenchRevision') || 0 } });
+  store.set({ fileReadRequest: { requestId: requestId, path: filePath, projectSlug: state.currentSlug || null, sessionId: state.activeSessionId != null ? String(state.activeSessionId) : null, accountId: state.myUserId || null, viewId: state.projectSplitViewActiveId || null, socketGeneration: state.projectSplitViewSocketGeneration, workbenchRevision: rightWorkbenchRevisionFor('file-viewer') } });
   var pending = store.get('pendingFileNavigation');
   if (pending && pending.path === filePath) store.set({ pendingFileNavigation: Object.assign({}, pending, { requestId: requestId }) });
   if (ctx.ws && ctx.connected) {
@@ -750,6 +768,7 @@ function requestFileContent(filePath) {
 var pendingRefresh = false;
 
 export function refreshIfOpen(filePath) {
+  if (independentFilesActive()) return refreshIndependentFile(filePath);
   if (!currentFilePath || ctx.fileViewerEl.classList.contains("hidden")) return;
   // Don't refresh while history panel or inline diff is showing
   if (historyVisible || inlineDiffActive) return;
@@ -863,7 +882,7 @@ function renderFilteredTree(container, tree, depth, query) {
       (function (rowEl, childEl, folderName) {
         rowEl.addEventListener("click", function (e) {
           e.stopPropagation();
-          claimRightWorkbench("file-viewer");
+          if (!activeSavedView()) claimRightWorkbench("file-viewer");
           var isExpanded = rowEl.classList.contains("expanded");
           rowEl.classList.toggle("expanded");
           childEl.classList.toggle("hidden", isExpanded);
@@ -886,6 +905,11 @@ function renderFilteredTree(container, tree, depth, query) {
       (function (filePath, rowEl) {
         rowEl.addEventListener("click", function (e) {
           e.stopPropagation();
+          if (activeSavedView() && !store.get('paneMode')) {
+            openIndependentFile(filePath);
+            if (window.innerWidth <= 768) closeSidebar();
+            return;
+          }
           claimRightWorkbench("file-viewer");
           if (followedFileChanged(filePath)) cancelMarkdownFollow();
           var prev = ctx.fileTreeEl.querySelector(".file-tree-item.active");
@@ -1018,8 +1042,10 @@ function restoreExpanded(expandedSet) {
 }
 
 export function handleFsRead(msg) {
+  if (routeFilePaneMessage(msg)) return;
   var request = store.get('fileReadRequest');
   var state = store.snap();
+  if (request && (request.viewId !== (state.projectSplitViewActiveId || null) || request.socketGeneration !== state.projectSplitViewSocketGeneration)) return;
   if (!request || !state.connected || msg.requestId !== request.requestId || msg.path !== request.path) return;
   if ((request.projectSlug || null) !== (state.currentSlug || null)) return;
   if ((request.sessionId || null) !== (state.activeSessionId == null ? null : String(state.activeSessionId))) return;
@@ -1094,7 +1120,7 @@ function renderEntries(container, entries, depth) {
       (function (dirPath, childEl, rowEl, folderName) {
         rowEl.addEventListener("click", function (e) {
           e.stopPropagation();
-          claimRightWorkbench("file-viewer");
+          if (!activeSavedView()) claimRightWorkbench("file-viewer");
           var isExpanded = rowEl.classList.contains("expanded");
           if (isExpanded) {
             rowEl.classList.remove("expanded");
@@ -1134,6 +1160,11 @@ function renderEntries(container, entries, depth) {
       (function (filePath, rowEl) {
         rowEl.addEventListener("click", function (e) {
           e.stopPropagation();
+          if (activeSavedView() && !store.get('paneMode')) {
+            openIndependentFile(filePath);
+            if (window.innerWidth <= 768) closeSidebar();
+            return;
+          }
           claimRightWorkbench("file-viewer");
           if (followedFileChanged(filePath)) cancelMarkdownFollow();
           // Mark active
@@ -1382,6 +1413,7 @@ function pathsReferToSameFile(left, right) {
 }
 
 export function handleFileChanged(msg, presentedSource) {
+  if (routeFilePaneMessage(msg)) return;
   var source = store.get('studioDocumentView');
   if (source && source.descriptor.path === msg.path && (!presentedSource || presentedDocument(msg.path) !== presentedSource)) return;
   if (!msg.path || !pathsReferToSameFile(msg.path, currentFilePath)) return;
@@ -1545,81 +1577,7 @@ function showInlineDiff(oldStr, newStr, review) {
   render();
 }
 
-function mapExtToLanguage(ext) {
-  var map = {
-    js: "javascript", ts: "typescript", jsx: "javascript", tsx: "typescript",
-    py: "python", rb: "ruby", go: "go", rs: "rust", java: "java",
-    css: "css", html: "xml", xml: "xml", json: "json", yaml: "yaml",
-    yml: "yaml", md: "markdown", sh: "bash", bash: "bash", zsh: "bash",
-    sql: "sql", c: "c", cpp: "cpp", h: "c", hpp: "cpp",
-    cs: "csharp", swift: "swift", kt: "kotlin", vue: "xml", svelte: "xml"
-  };
-  return map[ext] || null;
-}
-
-function currentLang() {
-  if (!currentFilePath) return null;
-  var ext = currentFilePath.split(".").pop().toLowerCase();
-  return mapExtToLanguage(ext);
-}
-
-function renderCodeWithLineNumbers(bodyEl, content, ext) {
-  var lang = mapExtToLanguage(ext);
-  var lines = content.split("\n");
-  var lineCount = lines.length;
-
-  var viewer = document.createElement("div");
-  viewer.className = "file-viewer-code";
-
-  var gutter = document.createElement("pre");
-  gutter.className = "file-viewer-gutter";
-  var nums = [];
-  for (var i = 1; i <= lineCount; i++) nums.push(i);
-  gutter.textContent = nums.join("\n");
-
-  var codeWrap = document.createElement("pre");
-  codeWrap.className = "file-viewer-code-content";
-  var codeEl = document.createElement("code");
-  if (lang) codeEl.className = "language-" + lang;
-  codeEl.textContent = content;
-  codeWrap.appendChild(codeEl);
-
-  viewer.appendChild(gutter);
-  viewer.appendChild(codeWrap);
-
-  bodyEl.innerHTML = "";
-  bodyEl.appendChild(viewer);
-
-  if (typeof hljs !== "undefined" && lang) {
-    hljs.highlightElement(codeEl);
-  }
-}
-
-function renderLargeTextFile(bodyEl, content, size) {
-  var viewer = document.createElement("div");
-  viewer.className = "file-viewer-large-text";
-
-  var notice = document.createElement("div");
-  notice.className = "file-viewer-large-notice";
-  notice.innerHTML = iconHtml("file-text") +
-    "<span>Large file (" + formatSize(size || 0) + ") — showing plain text for performance</span>";
-
-  var codeWrap = document.createElement("pre");
-  var codeEl = document.createElement("code");
-  codeEl.textContent = content;
-  codeWrap.appendChild(codeEl);
-
-  viewer.appendChild(notice);
-  viewer.appendChild(codeWrap);
-  bodyEl.innerHTML = "";
-  bodyEl.appendChild(viewer);
-}
-
-function formatSize(bytes) {
-  if (bytes < 1024) return bytes + " B";
-  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB";
-  return (bytes / 1048576).toFixed(1) + " MB";
-}
+function currentLang() { return currentFilePath ? mapExtToLanguage(currentFilePath.split('.').pop().toLowerCase()) : null; }
 
 // --- File edit history ---
 
@@ -1639,6 +1597,7 @@ function requestGitDiff(hash, hash2) {
 }
 
 export function handleFileHistory(msg) {
+  if (routeFilePaneMessage(msg)) return;
   currentHistoryEntries = msg.entries || [];
   var historyBtn = document.getElementById("file-viewer-history");
 
@@ -1655,6 +1614,7 @@ export function handleFileHistory(msg) {
 }
 
 export function handleGitDiff(msg) {
+  if (routeFilePaneMessage(msg)) return;
   if (msg.hash && msg.diff !== undefined) {
     var key = msg.hash2 ? msg.hash + ".." + msg.hash2 : msg.hash;
     gitDiffCache[key] = msg.diff;
@@ -1673,6 +1633,7 @@ function requestFileAt(hash) {
 }
 
 export function handleFileAt(msg) {
+  if (routeFilePaneMessage(msg)) return;
   if (msg.hash && msg.content !== undefined) {
     fileAtCache[msg.hash] = msg.content;
   }
@@ -2370,7 +2331,7 @@ function renderViewFileContent(entry, content) {
   bodyEl.appendChild(codeContainer);
 }
 
-function navigateToEdit(edit) {
+export function navigateToEdit(edit) {
   // If already in the same session, scroll directly without replaying history
   if (ctx.activeSessionId === edit.sessionLocalId) {
     scrollToToolElement(edit.toolId, edit.assistantUuid);

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

@@ -1,3 +1,4 @@
+import { fileEntryContext } from './file-pane-entrypoints.js';
 import { currentGithubWorkMarkup, refreshGithubWork, resetGithubWork } from './session-github.js';
 import { store } from './store.js';
 import { refreshIcons, iconHtml } from './icons.js';
@@ -332,7 +333,9 @@ function runAction(action, paths) {
 }
 
 function openFileDiff(filePath, reviewIndex) {
+  var receipt = fileEntryContext();
   requestJson(apiPath("file-diff?path=" + encodeURIComponent(filePath)), { cache: "no-store" }).then(function (result) {
+    if (receipt !== fileEntryContext()) return;
     var paths = currentStatus ? currentStatus.files.map(function (file) { return file.path; }) : [filePath];
     var index = typeof reviewIndex === "number" ? reviewIndex : paths.indexOf(filePath);
     if (index < 0) index = 0;
@@ -350,8 +353,10 @@ function openFileDiff(filePath, reviewIndex) {
 }
 
 function openSessionDiff(sessionKey, filePath) {
+  var receipt = fileEntryContext();
   var url = apiPath("session-diff?session=" + encodeURIComponent(sessionKey) + "&path=" + encodeURIComponent(filePath));
   requestJson(url, { cache: "no-store" }).then(function (result) {
+    if (receipt !== fileEntryContext()) return;
     openWorkingTreeDiff(result);
     showToast("Compared with start of " + (result.sessionTitle || "session"));
   }).catch(function (err) {

package/lib/public/modules/issues.js

@@ -2,7 +2,7 @@ import { openLinear, initLinearPanel } from './linear-panel.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { showToast } from './utils.js';
-import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+import { handlesWorkbenchKey, claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
 import { refreshIcons } from './icons.js';
 import { enhanceClayLogLinks } from './clay-log-links.js';
 import { updateIssueLink } from './clay-issue-links.js';
@@ -169,7 +169,7 @@ export function initIssues() {
   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><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>';
+  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><button type="button" class="issues-linear-link" data-open-linear title="Open Linear" aria-label="Open Linear">Linear<i data-lucide="chevron-right"></i></button></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);
@@ -226,9 +226,8 @@ export function initIssues() {
   });
   store.subscribe(function (state, previous) {
     if (state.currentSlug !== previous.currentSlug || (previous.connected && !state.connected)) { closeIssues(); store.set({ issuesRequests: {}, issuesSelected: null, issuesCache: {}, issuesMutationRequest: null }); }
-    if (state.issuesOpen && (state.projectLogsOpen || state.scheduledTasksOpen)) closeIssues();
   });
-  document.addEventListener('keydown', function (event) { if (store.get('issuesOpen')) { deleteDialogKeydown(event); if (!event.defaultPrevented && event.key === 'Escape') closeIssues(); } });
+  document.addEventListener('keydown', function (event) { if (store.get('issuesOpen') && handlesWorkbenchKey('issues', event)) { deleteDialogKeydown(event); if (!event.defaultPrevented && event.key === 'Escape') closeIssues(); } });
 }
 function showIssueEdit(entry) {
   if (!entry) return;

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

@@ -4,7 +4,7 @@ import { escapeHtml } from './utils.js';
 import { renderMarkdown } from './markdown.js';
 import { refreshIcons } from './icons.js';
 import { linearIconMarkup } from './session-github.js';
-import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+import { handlesWorkbenchKey, claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
 
 function esc(value) { return escapeHtml(String(value || '')).replace(/"/g, '"').replace(/'/g, '''); }
 function panel() { return document.getElementById('linear-panel'); }
@@ -145,7 +145,7 @@ export function initLinearPanel() {
     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(); });
+  document.addEventListener('keydown', function (event) { if (event.key === 'Escape' && store.get('linearOpen') && handlesWorkbenchKey('linear', event)) 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.activeSessionId !== previous.activeSessionId) && state.linearIssue) renderIssue();

package/lib/public/modules/mate-knowledge-workbench.js

@@ -103,7 +103,7 @@ function bindPanel() {
   panel.querySelector('[data-knowledge-forward]').addEventListener('click', function () { navigateHistory('forward'); });
   panel.querySelector('.knowledge-search input').addEventListener('input', scheduleSearch);
   panel.querySelector('[data-knowledge-wide]').addEventListener('click', function () { var key = workspaceKey(); patchState(key, { wide: !stateFor(key).wide }); renderShell(); });
-  panel.querySelector('[data-knowledge-full]').addEventListener('click', exitEditor);
+  panel.querySelector('[data-knowledge-full]').addEventListener('click', togglePaneExpansion);
   panel.querySelector('[data-delete-cancel]').addEventListener('click', closeDelete);
   panel.querySelector('[data-delete-confirm]').addEventListener('click', confirmDelete);
   panel.addEventListener('click', handlePanelClick);
@@ -326,10 +326,14 @@ function retrySync() {
   simpleRequest('knowledge_sync', { names: retry.names }, { syncRetry: retry });
 }
 
+function togglePaneExpansion() { var key = workspaceKey(), state = stateFor(key);
+  if (state.fullscreen) { patchState(key, { paneExpanded: false }); exitEditor(); return; }
+  patchState(key, { paneExpanded: !state.paneExpanded }); renderShell();
+}
 function renderShell() {
-  var state = stateFor(workspaceKey()); panel.classList.toggle('knowledge-wide', state.wide); panel.classList.toggle('panel-fullscreen', state.fullscreen);
-  panel.querySelector('[data-knowledge-wide]').setAttribute('aria-pressed', String(state.wide)); panel.querySelector('[data-knowledge-full]').setAttribute('aria-pressed', String(state.fullscreen));
-  panel.querySelector('[data-knowledge-full]').hidden = !state.fullscreen; panel.querySelector('[data-knowledge-wide]').hidden = state.fullscreen;
+  var state = stateFor(workspaceKey()); panel.classList.toggle('knowledge-wide', state.wide); panel.classList.toggle('panel-fullscreen', !!(state.fullscreen || state.paneExpanded));
+  panel.querySelector('[data-knowledge-wide]').setAttribute('aria-pressed', String(state.wide)); panel.querySelector('[data-knowledge-full]').setAttribute('aria-pressed', String(!!(state.fullscreen || state.paneExpanded)));
+  panel.querySelector('[data-knowledge-full]').hidden = false; panel.querySelector('[data-knowledge-wide]').hidden = state.fullscreen;
   panel.querySelector('[data-knowledge-back]').disabled = !(state.navigationBack || []).length; panel.querySelector('[data-knowledge-forward]').disabled = !(state.navigationForward || []).length;
 }
 function renderStatus() {
@@ -433,12 +437,12 @@ export function openKnowledgeWorkbench() {
   ensurePanel(); if (!panel || !isMateWorkspace(store.snap())) return; returnFocus = document.activeElement;
   claimRightWorkbench('mate-knowledge'); panel.classList.remove('hidden'); setKnowledgeNarrowBackground(panel, true); var button = document.getElementById('knowledge-workbench-btn'); if (button) button.classList.add('active');
   var key = workspaceKey(); var state = stateFor(key); var drafts = Object.assign({}, state.drafts); if (state.selected && drafts[state.selected]) drafts[state.selected] = Object.assign({}, drafts[state.selected], { mode: 'read' });
-  setState(key, Object.assign({}, state, { drafts: drafts, fullscreen: false, loading: true, error: '' })); simpleRequest('knowledge_list'); if (stateFor(key).query.trim()) { patchState(key, { searching: true }); requestSearch(key, stateFor(key).query, 0, false); } render(); setTimeout(function () { var search = panel.querySelector('.knowledge-search input'); if (search) search.focus(); }, 0);
+  setState(key, Object.assign({}, state, { drafts: drafts, fullscreen: false, paneExpanded: false, loading: true, error: '' })); simpleRequest('knowledge_list'); if (stateFor(key).query.trim()) { patchState(key, { searching: true }); requestSearch(key, stateFor(key).query, 0, false); } render(); setTimeout(function () { var search = panel.querySelector('.knowledge-search input'); if (search) search.focus(); }, 0);
 }
 export function closeKnowledgeWorkbench(skipSave) {
   if (!panel) return; var active = document.activeElement; var shouldReturn = skipSave !== true && (!active || active === document.body || panel.contains(active));
   var key = workspaceKey(); cancelScheduledSearch(); if (deleteTarget) closeDelete(); if (skipSave !== true) { saveScroll(); var selected = stateFor(key).selected; if (selected) saveDraftNow(key, selected); }
-  patchState(key, { fullscreen: false }); destroyKnowledgeEditor(); panel.classList.add('hidden'); setKnowledgeNarrowBackground(panel, false); releaseRightWorkbench('mate-knowledge');
+  patchState(key, { fullscreen: false, paneExpanded: false }); destroyKnowledgeEditor(); panel.classList.add('hidden'); setKnowledgeNarrowBackground(panel, false); releaseRightWorkbench('mate-knowledge');
   var button = document.getElementById('knowledge-workbench-btn'); if (button) button.classList.remove('active'); if (shouldReturn && returnFocus && returnFocus.isConnected) returnFocus.focus(); returnFocus = null;
 }
 export function initMateKnowledgeWorkbench() {

package/lib/public/modules/notifications.js

@@ -1,3 +1,4 @@
+import { store } from './store.js';
 import { initNotificationSettings, saveNotificationPreference, updatePushSettings } from './notification-settings.js';
 import { initExtensionSettings } from './extension-settings.js';
 import { copyToClipboard, showToast } from './utils.js';
@@ -71,7 +72,9 @@ export function initNotifications(_ctx) {
   var $ = ctx.$;
 
   // --- Mobile viewport (iOS keyboard handling) ---
-  if (window.visualViewport) {
+  // Embedded panes follow the host viewport. Their layout resize is not a
+  // software keyboard opening and must not force the transcript to its tail.
+  if (window.visualViewport && !store.get('paneMode')) {
     var layout = $("layout");
     var mobileTabBar = document.getElementById("mobile-tab-bar");
     var keyboardWasOpen = false;

package/lib/public/modules/pane-activation.js

@@ -1,3 +1,5 @@
+import { paneHeaderRuntime, initPaneHeaderRuntime } from './pane-header-runtime.js';
+import { sendBoundBrowserCommand } from './pane-browser-transport.js';
 import { disarmStickyBottom } from './chat-render-runtime.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
@@ -204,10 +206,13 @@ export function initPaneActivation() {
       return binding && { ownerId: binding.viewerId, projectSlug: binding.projectSlug, sessionId: binding.sessionId,
         binding: binding, ready: store.get('connected') && store.get('paneReady') && !store.get('paneSuspended') };
     },
+    headerRuntime: paneHeaderRuntime,
+    browserCommand: sendBoundBrowserCommand,
     activate: activatePaneSession,
     checkDraft: function () { if (!store.get('panePendingBinding')) { var draft = takeComposerDraft(); restoreComposerDraft(draft); } },
     suspend: suspendPane,
   };
+  initPaneHeaderRuntime(frame);
   // A pointer that began on the previous conversation cannot become a Stop or
   // approval click on the replacement conversation after hydration.
   document.addEventListener('pointerdown', function () { store.set({ panePointerBinding: store.get('paneCommittedBinding') }); }, true);

package/lib/public/modules/pane-binding.js

@@ -63,7 +63,11 @@ export function livePaneBinding(frame, message) {
   var target = live && paneTarget(state, state.paneBindingSessions || [], live.sessionId);
   var inLegacySplit = !!(live && split && split.panes.some(function (pane) { return pane.slug === live.projectSlug && pane.sessionId === live.sessionId; }));
   var activePresentation = (state.projectSplitViews || []).find(function (view) { return view.id === state.projectSplitViewActiveId; });
-  var inPresentation = !!(live && live.binding && !split && activePresentation && activePresentation.sessions.some(function (session) {
+  var pair = activePresentation && activePresentation.workspace && activePresentation.workspace.linkedPair;
+  var linkedPresentation = !!(split && pair && split.groupId === pair.groupId && (state.splitGroups || []).some(function (group) {
+    return group.id === pair.groupId && group.pair && (state.paneBindingSessions || []).some(function (session) { return session.id === group.pair.driverId && session.sessionOriginId === pair.driverOriginId; });
+  }));
+  var inPresentation = !!(live && live.binding && (!split || linkedPresentation) && activePresentation && activePresentation.sessions.some(function (session) {
     return session.id === live.sessionId && session.sessionOriginId === live.binding.sessionOriginId;
   }));
   var inSingletonPresentation = !!(live && live.binding && !split && !activePresentation &&

package/lib/public/modules/pane-browser-bridge.js

@@ -1,4 +1,5 @@
 import { store } from './store.js';
+import { selectBrowserPane } from './pane-browser-transport.js';
 import { livePaneBinding, paneMessageBinding } from './pane-binding.js';
 import { showToast } from './utils.js';
 
@@ -9,14 +10,27 @@ export function forwardPaneBrowserLink(url) {
 }
 export function handlePaneBrowserMessage(event, host) {
   if (!event || event.origin !== window.location.origin || !host || !event.data || event.data.type !== 'clay-pane-open-browser') return false;
-  var msg = event.data, s = store.snap();
+  var msg = event.data, s = Object.assign({}, store.snap());
   var frame = Array.from(host.querySelectorAll('.split-pane-frame')).find(function (item) { return item.contentWindow === event.source; });
-  var pane = frame && s.splitPanes && s.splitPanes.panes && s.splitPanes.panes.find(function (item) { return String(item.slug) === frame.dataset.projectSlug && String(item.sessionId) === frame.dataset.sessionId; });
-  if (!pane || msg.projectSlug !== s.currentSlug || msg.projectSlug !== frame.dataset.projectSlug || String(msg.sessionId) !== frame.dataset.sessionId) return true;
+  var pane = frame && frame.clayPane ? { slug: frame.dataset.projectSlug, sessionId: frame.dataset.sessionId } : frame && s.splitPanes && s.splitPanes.panes && s.splitPanes.panes.find(function (item) { return String(item.slug) === frame.dataset.projectSlug && String(item.sessionId) === frame.dataset.sessionId; });
+  if (!s.connected || !pane || msg.projectSlug !== s.currentSlug || msg.projectSlug !== frame.dataset.projectSlug || String(msg.sessionId) !== frame.dataset.sessionId) return true;
   var expected = new URL('/p/' + encodeURIComponent(pane.slug) + '/?pane=1&session=' + encodeURIComponent(pane.sessionId), window.location.href).href;
   if (frame.clayPane ? !livePaneBinding(frame, msg) : frame.src !== expected) return true;
-  // The authenticated host owns the browser; a live same-project pane supplies only a URL.
-  var binding = frame.clayPane && frame.clayPane.identity().binding;
-  import('./shared-browser.js').then(function (module) { if (binding && (!livePaneBinding(frame, msg) || frame.clayPane.identity().binding !== binding)) return; module.openSharedBrowserAt(msg.url); }).catch(function (error) { showToast(error.message || 'Could not open the browser.', 'warn'); });
+  // Present in the host while browser effects retain the exact source pane binding.
+  var binding = frame.clayPane && frame.clayPane.identity().binding, document = frame.contentDocument;
+  function current() {
+    var now = store.snap();
+    if (!now.connected || now.currentSlug !== s.currentSlug || now.myUserId !== s.myUserId ||
+        now.currentProjectOwnerId !== s.currentProjectOwnerId || now.projectSplitViewSocketGeneration !== s.projectSplitViewSocketGeneration ||
+        frame.contentWindow !== event.source || frame.contentDocument !== document ||
+        frame.dataset.projectSlug !== msg.projectSlug || String(frame.dataset.sessionId) !== String(msg.sessionId) ||
+        !Array.from(host.querySelectorAll('.split-pane-frame')).includes(frame)) return false;
+    if (binding) return !!frame.clayPane && livePaneBinding(frame, msg) && frame.clayPane.identity().binding === binding;
+    return frame.src === expected && !!(now.splitPanes && now.splitPanes.panes.some(function (item) { return String(item.slug) === pane.slug && String(item.sessionId) === String(pane.sessionId); }));
+  }
+  import('./shared-browser.js').then(function (module) {
+    if (!current() || binding && !selectBrowserPane(frame, binding)) return;
+    module.openSharedBrowserAt(msg.url);
+  }).catch(function (error) { showToast(error.message || 'Could not open the browser.', 'warn'); });
   return true;
 }

package/lib/public/modules/pane-browser-transport.js

@@ -0,0 +1,110 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { livePaneBinding, paneMessageBinding, samePaneBinding, paneTarget } from './pane-binding.js';
+
+// Browser-only presentation bridge. Effects still use the source pane's real
+// authenticated socket and the existing server browser service.
+function browserSource() { return store.get('paneBrowserSource') || null; }
+function focusedOrigin() {
+  var focused = store.get('projectSplitViewFocusedOrigin') || store.get('projectSplitViewSingletonOrigin');
+  if (focused) return focused;
+  var view = (store.get('projectSplitViews') || []).find(function (item) { return item.id === store.get('projectSplitViewActiveId'); });
+  return view && view.activeSessionOriginId || store.get('sessionOriginId') || null;
+}
+var receive = null;
+var changed = null;
+var fieldsByAction = {
+  state_request: [], open: ['url', 'newTab', 'incognito'], view: ['browserId', 'visible'],
+  control: ['browserId', 'control'], close: ['browserId'], end: ['browserId'], input: ['browserId', 'epoch', 'event'],
+};
+function frames() {
+  return Array.from(document.querySelectorAll('#split-host .split-pane:not(.split-pane-cached) .split-pane-frame'));
+}
+export function hasBrowserPaneHost() { return !store.get('paneMode') && frames().some(function (frame) { return !!frame.clayPane || !!paneTarget(store.snap(), store.get('paneBindingSessions') || [], Number(frame.dataset.sessionId)); }); }
+function current() {
+  var source = browserSource();
+  if (!source || source.socket !== getWs() || source.owner !== store.get('myUserId') || source.project !== store.get('currentSlug')) return false;
+  var frame = source.frame;
+  return frames().includes(frame) && frame.contentWindow === source.window && frame.contentDocument === source.document &&
+    !frame.dataset.requestedSessionId && livePaneBinding(frame, { paneBinding: source.binding });
+}
+export function browserPaneSessionId() { return current() ? browserSource().binding.sessionId : null; }
+export function browserPaneStamp() { var source = browserSource(); return current() ? source.binding.requestId + ':' + source.binding.generation : null; }
+export function browserPaneBound() { return !!browserSource(); }
+export function selectBrowserPane(frame, binding) {
+  var source = browserSource();
+  if (!frame || !binding || !frames().includes(frame) || frame.dataset.requestedSessionId || !livePaneBinding(frame, { paneBinding: binding })) return false;
+  if (current() && source.frame === frame && samePaneBinding(source.binding, binding)) {
+    if (source.focusedOrigin !== focusedOrigin()) store.set({ paneBrowserSource: Object.assign({}, source, { focusedOrigin: focusedOrigin() }) });
+    return true;
+  }
+  var previous = store.get('sharedBrowser');
+  if (current() && previous) sendBrowserPaneCommand('view', { browserId: previous.id, visible: false });
+  store.set({ paneBrowserSource: { frame: frame, window: frame.contentWindow, document: frame.contentDocument, binding: binding,
+    socket: getWs(), owner: store.get('myUserId'), project: store.get('currentSlug'), focusedOrigin: focusedOrigin() }, paneBrowserTarget: binding });
+  if (changed) changed(true);
+  return true;
+}
+export function ensureBrowserPaneSource() {
+  if (current() && browserSource().focusedOrigin === focusedOrigin()) return true;
+  var candidates = frames();
+  var origin = focusedOrigin();
+  var frame = candidates.find(function (item) { return origin && item.dataset.sessionOriginId === origin; }) ||
+    candidates.find(function (item) { var pane = item.closest('.split-pane'); return pane && pane.dataset.active === 'true'; }) || candidates[0];
+  var live = frame && frame.clayPane && frame.clayPane.identity();
+  return !!live && selectBrowserPane(frame, live.binding);
+}
+export function sendBrowserPaneCommand(action, fields) {
+  var source = browserSource();
+  if (!Object.prototype.hasOwnProperty.call(fieldsByAction, action)) return false;
+  if (!source && !hasBrowserPaneHost()) return null;
+  if (!current() || !source.frame.clayPane || typeof source.frame.clayPane.browserCommand !== 'function') return false;
+  return source.frame.clayPane.browserCommand(action, fields || {}, source.binding);
+}
+export function sendBoundBrowserCommand(action, fields, binding) {
+  var allowed = Object.prototype.hasOwnProperty.call(fieldsByAction, action) && fieldsByAction[action], ws = getWs();
+  if (!allowed || !ws || ws.readyState !== 1 || !samePaneBinding(binding, paneMessageBinding()) ||
+      !store.get('connected') || store.get('panePendingBinding') || store.get('activeSessionId') !== binding.sessionId) return false;
+  var message = { type: 'shared_browser_' + action, sessionId: binding.sessionId, paneBinding: binding };
+  allowed.forEach(function (key) { if (Object.prototype.hasOwnProperty.call(fields, key)) message[key] = fields[key]; });
+  ws.send(JSON.stringify(message));
+  return true;
+}
+export function forwardBrowserPaneMessage(message) {
+  var frame = window.frameElement;
+  if (!store.get('paneMode') || !frame || !frame.clayPane) return false;
+  if (['shared_browser_state', 'shared_browser_frame', 'shared_browser_error'].indexOf(message.type) < 0) return false;
+  var binding = paneMessageBinding();
+  if (binding && samePaneBinding(binding, message.paneActivation)) {
+    window.parent.postMessage({ type: 'clay-pane-browser-update', paneBinding: binding, message: message }, location.origin);
+  }
+  return true;
+}
+export function initBrowserPaneTransport(onMessage, onChanged) {
+  if (store.get('paneMode')) return;
+  receive = onMessage; changed = onChanged;
+  window.addEventListener('message', function (event) {
+    var data = event.data;
+    if (event.origin !== location.origin || !data || data.type !== 'clay-pane-browser-update' || !data.message) return;
+    var frame = frames().find(function (item) { return item.contentWindow === event.source; });
+    var message = data.message, source = browserSource();
+    if (!frame || !livePaneBinding(frame, data) || !samePaneBinding(data.paneBinding, message.paneActivation) ||
+        message.sessionId !== data.paneBinding.sessionId || ['shared_browser_state', 'shared_browser_frame', 'shared_browser_error'].indexOf(message.type) < 0) return;
+    if (!current() || source.frame !== frame || !samePaneBinding(source.binding, data.paneBinding)) {
+      if (message.type !== 'shared_browser_state' || !message.present || !selectBrowserPane(frame, data.paneBinding)) return;
+    }
+    receive(message, true);
+  });
+  document.addEventListener('clay-pane-ready', function () {
+    queueMicrotask(function () {
+      if (!current() && ensureBrowserPaneSource()) sendBrowserPaneCommand('state_request', {});
+    });
+  }, true);
+  store.subscribe(function () {
+    var source = browserSource();
+    if (source && !current()) {
+      store.set({ paneBrowserSource: null, paneBrowserTarget: null });
+      if (changed) changed(false);
+    }
+  });
+}