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

package/lib/public/css/split-view-layout.css

@@ -79,7 +79,6 @@
 #split-host.split-view-canvas.visible {
   display: flex;
   padding: 7px;
-  background: var(--bg-alt);
   box-sizing: border-box;
 }
 .split-view-tree, .split-view-branch, .split-view-leaf {
@@ -107,8 +106,10 @@
 }
 .split-view-canvas .split-pane-title {
   min-width: 0;
-  flex: 1;
+  flex: 0 1 auto;
   max-width: none;
+  padding: 0;
+  margin-left: 0;
   font-size: 11px;
   font-weight: 500;
   overflow: hidden;
@@ -174,7 +175,7 @@ body.split-view-resizing .split-pane-frame { pointer-events: none; }
     align-content: center;
     gap: 4px;
   }
-  .split-view-canvas .split-pane-title { flex: 1 0 70px; }
+  .split-view-canvas .split-pane-title { flex: 0 1 auto; }
   .split-view-canvas .split-view-runtime { flex: 0 1 auto; max-width: 55%; min-width: 48px; }
 }
 .split-view-workers {
@@ -462,3 +463,36 @@ body.split-view-resizing .split-pane-frame { pointer-events: none; }
 
 /* Light reflects received WebSocket output, independent of processing state. */
 .split-view-worker-dot.io { background: var(--brand-green); box-shadow: 0 0 5px var(--brand-green); }
+
+/* Header whitespace is a handle; text and controls retain their own actions. */
+.split-pane-drag-space { flex: 1 1 12px; min-width: 12px; align-self: stretch; cursor: grab; touch-action: none; }
+.split-view-canvas .split-pane-header { cursor: grab; touch-action: none; }
+.split-view-canvas .split-pane-header[data-pane-loading="true"] { cursor: default; }
+body.is-dragging .split-pane-header, body.is-dragging .split-pane-drag-space { cursor: grabbing; }
+.split-view-canvas.split-view-drag-preview > .split-pane,
+.split-view-canvas.split-view-drag-preview > .split-view-divider,
+.split-view-canvas.split-view-drag-preview > .split-view-drop-preview {
+  transition: left 280ms cubic-bezier(.2,.75,.25,1), top 280ms cubic-bezier(.2,.75,.25,1),
+    width 280ms cubic-bezier(.2,.75,.25,1), height 280ms cubic-bezier(.2,.75,.25,1);
+}
+.split-view-canvas.split-view-drag-preview > .split-view-divider { pointer-events: none; opacity: .35; }
+.split-view-canvas.split-view-drag-preview > .split-view-drop-preview { background: transparent; }
+@media (prefers-reduced-motion: reduce) {
+  .split-view-canvas.split-view-drag-preview > .split-pane,
+  .split-view-canvas.split-view-drag-preview > .split-view-divider,
+  .split-view-canvas.split-view-drag-preview > .split-view-drop-preview { transition: none; }
+}
+
+.split-view-canvas > .split-pane.split-pane-drag-source { opacity: .72; }
+
+/* A shared tint marks the moving window without altering its content theme. */
+:is(.split-pane-drag-source, .tool-pane-drag-source)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  box-shadow: inset 0 0 0 1px var(--accent-20);
+  pointer-events: none;
+}

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

@@ -59,8 +59,8 @@
   position: absolute;
   top: -4px;
   right: -4px;
-  background: var(--accent);
-  color: #fff;
+  background: var(--brand-gold);
+  color: var(--brand-ink);
   font-size: 9px;
   font-weight: 700;
   min-width: 14px;
@@ -71,6 +71,7 @@
   justify-content: center;
   padding: 0 3px;
   font-family: "Roboto Mono", monospace;
+  pointer-events: none;
 }
 
 .sticky-notes-count.hidden { display: none; }

package/lib/public/css/tool-pane.css

@@ -0,0 +1,127 @@
+/* All registered tool windows share the session pane's shell and density. */
+.tool-pane-header { height: 33px; min-height: 33px; padding: 0 8px; gap: 5px; user-select: none; }
+.tool-pane-header .tool-pane-title { flex: 0 1 auto; max-width: 55%; font-size: 11px; font-weight: 500; padding: 0; margin: 0; cursor: default; }
+.tool-pane-kind { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
+.tool-pane-kind svg { width: 14px; height: 14px; color: var(--text-muted); }
+.tool-pane-header :is(.terminal-header-actions, .file-viewer-window-actions, .shared-browser-window) { display: flex; align-items: center; margin-left: 0; gap: 2px; }
+.tool-pane-header :is(.terminal-header-actions, .file-viewer-window-actions, .shared-browser-window, .workbench-pane-actions) button { width: 24px; height: 24px; padding: 4px; border-radius: 5px; }
+.tool-pane-header button svg { width: 13px; height: 13px; }
+.tool-pane-header .workbench-layout-toggle { width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
+.tool-pane-header .workbench-layout-toggle svg { width: 13px !important; height: 13px !important; }
+/* Tabs use the compact inset pills of the Split Worker row. */
+.tool-pane-tab-row, .tool-pane-header ~ .shared-browser-tabs {
+  display: flex; align-items: center; gap: 5px; padding: 4px 11px; min-height: 30px; height: auto;
+  flex-shrink: 0; overflow-x: auto; background: var(--bg); border-bottom: 0; scrollbar-width: thin;
+}
+.tool-pane-tab-row .terminal-tabs, .tool-pane-tab-row .file-viewer-tabs { display: flex; gap: 5px; min-width: 0; overflow: auto; border: 0; }
+.tool-pane-tab-row :is(.terminal-tab, .file-viewer-tab), .tool-pane-header ~ .shared-browser-tabs .shared-browser-tab {
+  display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; min-width: 0; max-width: 284px;
+  height: 22px; min-height: 22px; padding: 0 6px; border: 1px solid var(--border-subtle); border-radius: 5px;
+  background: var(--bg-alt); color: var(--text-muted); font-size: 11px; line-height: 20px;
+}
+.tool-pane-tab-row :is(.terminal-tab.active, .file-viewer-tab.active), .tool-pane-header ~ .shared-browser-tabs .shared-browser-tab:has([aria-selected="true"]) { border-color: var(--accent-20); background: var(--accent-bg); color: var(--text-secondary); }
+.tool-pane-header ~ .shared-browser-tabs .shared-browser-tab { padding: 0; gap: 0; }
+.tool-pane-header ~ .shared-browser-tabs .shared-browser-tab > [role="tab"] { min-width: 0; padding: 0 6px; height: 20px; border: 0; background: transparent; font-size: 11px; }
+.tool-pane-header ~ .shared-browser-tabs .shared-browser-tab small { display: none; }
+.tool-pane-tab-row :is(.terminal-tab-more, .file-viewer-tab-close), .tool-pane-header ~ .shared-browser-tabs .shared-browser-tab > button:not([role="tab"]) { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--text-dimmer); }
+.tool-pane-tab-row .terminal-tab-more svg { width: 11px; height: 11px; }
+.tool-pane-tab-row .terminal-new-tab-btn { height: 22px; width: 22px; padding: 3px; flex-shrink: 0; }
+@media (min-width: 1024px) {
+  #main-panels > :is(#terminal-container, #shared-browser-panel, #file-viewer, .file-instance, .workbench-pane-shell).tool-pane-window[data-workbench-placement="docked"]:not(.panel-fullscreen) {
+    position: absolute; inset: auto; flex: none; min-width: 0; max-width: none; margin: 0; align-self: auto;
+    z-index: 4; container-type: inline-size; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px;
+    background: var(--bg); box-shadow: none; animation: none;
+    transition: left 280ms cubic-bezier(.2,.75,.25,1), top 280ms cubic-bezier(.2,.75,.25,1), width 280ms cubic-bezier(.2,.75,.25,1), height 280ms cubic-bezier(.2,.75,.25,1);
+  }
+  .tool-pane-window > .tool-pane-header { cursor: grab; touch-action: none; }
+  .tool-pane-window .shared-browser-viewport { min-height: 0; }
+  .tool-pane-window [data-action="wide"], .tool-pane-window #file-viewer-wide { display: none; }
+  .tool-pane-drag-source { opacity: .72; }
+  body.tool-pane-dragging, body.tool-pane-dragging .tool-pane-header { cursor: grabbing; user-select: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  #main-panels > :is(#terminal-container, #shared-browser-panel, #file-viewer, .file-instance, .workbench-pane-shell).tool-pane-window[data-workbench-placement="docked"]:not(.panel-fullscreen) { transition: none; }
+}
+
+@container (max-width: 380px) {
+  .tool-pane-header { height: auto; min-height: 55px; padding: 4px 8px; flex-wrap: wrap; align-content: center; gap: 4px; }
+  .tool-pane-header .tool-pane-kind { max-width: 55%; }
+}
+
+.tool-pane-header ~ .shared-browser-header[hidden] { display: none; }
+
+/* Expanded tool windows retain the same inset frame as a focused session. */
+@media (min-width: 1024px) {
+  #main-panels > :is(#terminal-container, #shared-browser-panel, #file-viewer, .file-instance, .workbench-pane-shell).panel-fullscreen {
+    inset: 7px !important;
+    width: calc(100% - 14px) !important;
+    height: calc(100% - 14px) !important;
+    max-width: none;
+    max-height: none !important;
+    min-width: 0;
+    margin: 0;
+    box-sizing: border-box;
+    border: 1px solid var(--border);
+    border-radius: 9px;
+    container-type: inline-size;
+  }
+}
+
+/* Independent Files panes use the same shell; only the content owns scrolling. */
+.file-instance { position: absolute; right: 8px; top: 8px; bottom: 8px; width: min(50%, 720px); min-width: 300px; display: flex; flex-direction: column; overflow: hidden; z-index: 20; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 28px #0002; }
+.file-instance.hidden { display: none; }
+.file-instance .tool-pane-header { height: 33px; min-height: 33px; flex-wrap: nowrap; }
+.file-instance .tool-pane-title { max-width: none; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-instance button { color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
+.file-instance button:hover { background: var(--bg-alt); }
+.file-instance button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.file-instance button[aria-pressed="true"] { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-20); }
+.file-instance button:disabled { opacity: .4; cursor: default; }
+.file-instance-toolbar { display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
+.file-instance-toolbar button { font-size: 11px; height: 24px; padding: 2px 7px; }
+.file-instance-toolbar button:last-child { margin-left: auto; }
+.file-instance-toolbar svg { width: 14px; height: 14px; }
+.file-instance-more { position: absolute; right: 8px; top: 65px; z-index: 30; min-width: 160px; padding: 4px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); box-shadow: 0 5px 20px #0003; }
+.file-instance-more button { display: block; width: 100%; text-align: left; padding: 5px 8px; font-size: 12px; }
+.file-instance-history { display: block; width: 100%; padding: 8px; text-align: left; }
+.file-instance .file-viewer-body { flex: 1; min-height: 0; }
+.file-instance .file-viewer-body > img { max-width: 100%; }
+@media (max-width: 1023px) { .file-instance { position: fixed; inset: 0; width: 100%; min-width: 0; border-radius: 0; z-index: 300; } }
+
+.file-instance-more.hidden { display: none; }
+.file-instance.panel-fullscreen { z-index: 310; }
+@media (max-width: 1023px) {
+  .file-instance { inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; }
+}
+
+/* A focused conversation owns the canvas; the saved dock layout is retained. */
+#main-panels.view-session-focused > .tool-pane-window:not(.panel-fullscreen) { visibility: hidden; pointer-events: none; }
+
+/* Workbench content stays owned by its module; this shared shell owns geometry. */
+.workbench-pane-actions { display: flex; align-items: center; gap: 2px; margin-left: 0; flex-shrink: 0; }
+#main-panels > .workbench-pane-shell > .tool-pane-header { display: flex; flex-wrap: nowrap; height: 33px; min-height: 33px; padding: 0 8px; gap: 5px; }
+.workbench-pane-shell > .tool-pane-header > [class$="-subtitle"] { display: none; }
+.workbench-pane-shell > .tool-pane-header > .split-pane-drag-space { flex: 1; min-width: 12px; align-self: stretch; }
+@media (min-width: 1024px) {
+  #main-panels > .workbench-pane-shell[data-workbench-placement="overlay"]:not(.panel-fullscreen) {
+    position: absolute; top: 8px; bottom: 8px; right: 8px; left: auto;
+    width: min(50%, 720px); min-width: 300px; max-width: none; margin: 0;
+    max-height: none; border: 1px solid var(--border); border-radius: 9px;
+    box-shadow: 0 8px 28px #0002; z-index: 20;
+  }
+  #main-panels > .workbench-pane-shell.tool-pane-window:not(.panel-fullscreen) [aria-label^="Widen"] { display: none; }
+}
+
+@media (min-width: 1024px) {
+  #main-panels > .workbench-pane-shell[data-workbench-placement="overlay"]:not(.panel-fullscreen):has([aria-label^="Widen"][aria-pressed="true"]) { width: 80%; }
+}
+
+#main-panels > .workbench-pane-shell > .tool-pane-header .workbench-pane-actions { display: flex; align-items: center; gap: 2px; margin-left: 0; }
+#main-panels > .workbench-pane-shell > .tool-pane-header .workbench-pane-actions button { min-width: 24px; width: 24px; height: 24px; padding: 4px; border: 0; border-radius: 5px; background: transparent; }
+#main-panels > .workbench-pane-shell > .tool-pane-header button svg { width: 13px; height: 13px; }
+#main-panels > .workbench-pane-shell > .tool-pane-header .tool-pane-title { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 500; }
+#main-panels > .workbench-pane-shell > .tool-pane-header .workbench-pane-actions button:hover { background: var(--sidebar-hover); color: var(--text); }
+#main-panels > .workbench-pane-shell > .tool-pane-header .workbench-pane-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+#main-panels > .workbench-pane-shell > .tool-pane-header .workbench-pane-actions button[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); }
+
+.file-instance:not([data-workbench-placement="docked"]) [data-action="pin"] { display: none; }

package/lib/public/index.html

@@ -78,9 +78,9 @@ body { background: transparent; color: inherit; }
       <div id="skip-perms-pill" class="top-bar-pill pill-error hidden"><i data-lucide="shield-off"></i> <span>Skip perms</span></div>
       <div id="client-count" class="top-bar-pill pill-accent hidden"><i data-lucide="users"></i> <span id="client-count-text"></span></div>
       <!-- Right workbench controls: same nodes and handlers as before; app JS returns them to the title bar on mobile. -->
-      <button type="button" id="shared-browser-toggle-btn" class="hidden" title="Browser" aria-label="Browser" aria-controls="shared-browser-panel" aria-expanded="false" disabled><i data-lucide="globe"></i></button>
+      <button type="button" id="shared-browser-toggle-btn" class="hidden" title="Browser" aria-label="Browser" aria-controls="shared-browser-panel" aria-expanded="false" disabled><i data-lucide="globe"></i><span class="shared-browser-count hidden" aria-hidden="true"></span></button>
       <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
-      <button type="button" id="sticky-notes-toggle-btn" aria-label="Hide sticky notes" aria-pressed="false" title="Hide sticky notes" hidden><i data-lucide="sticky-note"></i></button>
+      <button type="button" id="sticky-notes-toggle-btn" aria-label="Hide sticky notes" aria-pressed="false" title="Hide sticky notes" hidden><i data-lucide="sticky-note"></i><span class="sticky-notes-count hidden" aria-hidden="true"></span></button>
       <button id="notif-center-btn" title="Notifications"><i data-lucide="bell"></i><span id="notif-center-badge" class="notif-badge hidden">0</span></button>
       <button id="server-settings-btn" title="Settings" aria-label="Settings" aria-expanded="false"><i data-lucide="settings"></i></button>
     </div>
@@ -704,7 +704,7 @@ body { background: transparent; color: inherit; }
       <button class="terminal-new-tab-btn" id="terminal-new-tab" title="New tab"><i data-lucide="plus"></i></button>
       <div class="terminal-header-actions">
         <button class="file-viewer-btn" id="terminal-fullscreen" title="Toggle fullscreen"><i data-lucide="maximize-2"></i></button>
-        <button class="file-viewer-btn" id="terminal-close" title="Hide panel"><i data-lucide="minus"></i></button>
+        <button class="file-viewer-btn" id="terminal-close" title="Close terminal pane" aria-label="Close terminal pane"><i data-lucide="x"></i></button>
       </div>
     </div>
     <div id="terminal-toolbar" class="term-toolbar hidden">

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

@@ -83,6 +83,21 @@ function createHeaderWorkerHistoryControl(root, context) {
 }
 
 export function initHeader() {
+  store.subscribe(function (state, prev) {
+    if (!state.connected && prev.connected || state.panePendingBinding && state.panePendingBinding !== prev.panePendingBinding) {
+      store.set({ loadingMore: false });
+    }
+    if (state.paneReady && !prev.paneReady || !state.replayingHistory && prev.replayingHistory) {
+      // Replay can expose the sentinel before the pane accepts requests.
+      // Observe it again once the committed conversation is interactive.
+      var messages = getMessagesEl();
+      var sentinel = messages && messages.querySelector('.history-sentinel');
+      if (sentinel && historySentinelObserver) {
+        historySentinelObserver.unobserve(sentinel);
+        historySentinelObserver.observe(sentinel);
+      }
+    }
+  });
   var headerRenameBtn = document.getElementById("header-rename-btn");
   var headerTitleEl = document.getElementById("header-title");
   var headerInfoBtn = document.getElementById("header-info-btn");
@@ -339,12 +354,19 @@ export function updateHistorySentinel() {
 export function requestMoreHistory() {
   var ws = getWs();
   var s = store.snap();
-  if (s.loadingMore || s.historyFrom <= 0 || !ws || !s.connected) return;
+  if (s.loadingMore || s.historyFrom <= 0 || !ws || ws.readyState !== 1 || !s.connected ||
+      s.replayingHistory || s.historyReplayBatch || s.panePendingBinding || s.paneSuspended ||
+      s.paneCommittedBinding && !s.paneReady || s.deferredSessionSwitch) return;
   store.set({ loadingMore: true });
   var messagesEl = getMessagesEl();
   var btn = messagesEl.querySelector(".load-more-btn");
   if (btn) btn.classList.add("loading");
-  ws.send(JSON.stringify({ type: "load_more_history", before: s.historyFrom }));
+  try {
+    ws.send(JSON.stringify({ type: "load_more_history", before: s.historyFrom, paneBinding: s.paneCommittedBinding || undefined }));
+  } catch (error) {
+    store.set({ loadingMore: false });
+    if (btn) btn.classList.remove("loading");
+  }
 }
 
 export function prependOlderHistory(items, meta) {

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

@@ -267,7 +267,7 @@ export function processMessage(msg) {
         break;
 
       case "history_meta":
-        store.set({ historyFrom: msg.from, historyTotal: msg.total, replayingHistory: true });
+        store.set({ historyFrom: msg.from, historyTotal: msg.total, loadingMore: false, replayingHistory: true });
         updateHistorySentinel();
         break;
 

package/lib/public/modules/clay-file-links.js

@@ -63,10 +63,11 @@ export function renderLocalFileLink(href, title, text) {
   var label = text || target.path;
   var tooltip = target.path + (target.line ? ":" + target.line + (target.column ? ":" + target.column : "") : "");
   var state = store.snap();
+  var fragment = target.href.indexOf('#') >= 0 && !target.line ? decode(target.href.slice(target.href.indexOf('#') + 1)) : '';
   var projectAttr = state.currentSlug ? ' data-file-project-slug="' + escapeHtml(String(state.currentSlug)) + '"' : '';
   var sessionAttr = state.activeSessionId != null ? ' data-file-session-id="' + escapeHtml(String(state.activeSessionId)) + '"' : '';
   return '<button type="button" class="clay-file-link" data-file-path="' + escapeHtml(target.path) + '"' +
-    projectAttr + sessionAttr +
+    projectAttr + sessionAttr + (fragment ? ' data-file-heading="' + escapeHtml(fragment) + '"' : '') +
     (target.line ? ' data-file-line="' + target.line + '"' : '') +
     (target.column ? ' data-file-column="' + target.column + '"' : '') +
     ' title="' + escapeHtml(tooltip) + '" aria-label="Open file ' + escapeHtml(tooltip) + '">' +

package/lib/public/modules/clay-session-links.js

@@ -1,7 +1,7 @@
 import { parseClaySessionReference, renderClaySessionLink } from './clay-log-links.js';
 
 // The prefix is a display compatibility label, never a navigation target.
-var citationPattern = /\[([A-Za-z0-9][A-Za-z0-9_-]{0,79})\/(session:[A-Za-z0-9_-]{24}(?:#entry-[0-9]+)?)(?:\s+[\u2014-]\s+([^\]\n]{1,80}))?\]/g;
+var citationPattern = /\[([A-Za-z0-9][A-Za-z0-9_-]{0,79})\/(session:[A-Za-z0-9_-]{24}(?:#entry-[0-9]+)?)(?:\s+[\u2014\u00b7-]\s+([^\]\n]{1,80}))?\]/g;
 function matches(text) {
   var pattern = new RegExp(citationPattern.source, 'g'), results = [], match;
   while ((match = pattern.exec(text))) if (parseClaySessionReference(match[2])) results.push({ start: match.index, end: pattern.lastIndex, prefix: match[1], ref: match[2], label: match[3] || '' });

package/lib/public/modules/clay-split-view-screen.js

@@ -1,3 +1,4 @@
+import { toolPaneScreen, toolPaneRendering } from './clay-tool-pane-screen.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { livePaneBinding } from './pane-binding.js';
@@ -13,6 +14,8 @@ export function splitViewScreenSnapshot() {
     viewId: view ? view.id : null, revision: view ? view.revision : 0, tree: view ? view.tree : null,
     focusOrigin: state.projectSplitViewFocusedOrigin || null, singletonOrigin: state.projectSplitViewSingletonOrigin || null,
     activeSessionId: state.activeSessionId || null,
+    tools: toolPaneScreen(view, hidden),
+    expandedPaneId: (toolPaneScreen(view, hidden).find(function (tool) { return tool.expanded; }) || {}).instanceId || null,
     panes: Array.from(document.querySelectorAll('.split-pane-frame')).slice(0, 32).map(function (frame) {
       var live = frame.clayPane && frame.clayPane.identity(), binding = live && live.binding;
       var ready = !!livePaneBinding(frame), cached = !!frame.closest('.split-pane-cached');
@@ -60,10 +63,10 @@ export function applySplitViewNavigation(target) {
 }
 function renderedTarget(snapshot, target) {
   var exact = snapshot && !snapshot.hidden && snapshot.viewId === target.view.id && snapshot.revision === target.view.revision &&
-    snapshot.focusOrigin === target.focusOrigin && JSON.stringify(snapshot.tree) === JSON.stringify(target.view.tree);
-  var expected = target.view.sessions.filter(function (session) { return !target.focusOrigin || session.sessionOriginId === target.focusOrigin; });
+    snapshot.focusOrigin === target.focusOrigin && (snapshot.expandedPaneId || null) === (target.view.workspace && target.view.workspace.presentation && target.view.workspace.presentation.expandedPaneId || null) && JSON.stringify(snapshot.tree) === JSON.stringify(target.view.tree);
+  var expected = target.view.sessions.filter(function (session) { return snapshot && !snapshot.expandedPaneId && (!target.focusOrigin || session.sessionOriginId === target.focusOrigin); });
   var shown = snapshot ? snapshot.panes.filter(function (pane) { return pane.visible; }) : [];
-  return !!(exact && shown.length === expected.length && expected.every(function (session) { return shown.some(function (pane) { return pane.origin === session.sessionOriginId && pane.sessionId === session.id && pane.ready && !pane.cached; }); }));
+  return !!(exact && toolPaneRendering(snapshot, target.view) && shown.length === expected.length && expected.every(function (session) { return shown.some(function (pane) { return pane.origin === session.sessionOriginId && pane.sessionId === session.id && pane.ready && !pane.cached; }); }));
 }
 export function observeSplitViewRendering(msg, socket) {
   var target = msg.target;

package/lib/public/modules/clay-tool-pane-screen.js

@@ -0,0 +1,35 @@
+import { TOOL_PANES } from './tool-pane-tree.js';
+import { store } from './store.js';
+import { visible } from './clay-navigation-render.js';
+import { paneOwner } from './view-workspace-state.js';
+import { filePaneState } from './file-pane-instances.js';
+export function toolPaneScreen(view, hidden) {
+  if (!view || !view.workspace) return [];
+  var run = store.get('savedWorkspaceRuntime');
+  return view.workspace.panes.filter(function (pane) { return pane.kind !== 'session'; }).slice(0, 16).map(function (pane) {
+    var name = paneOwner(pane), panel = document.getElementById(pane.kind === 'file' ? name : TOOL_PANES[name] && TOOL_PANES[name].id);
+    var file = pane.kind === 'file' ? filePaneState(pane.instanceId) : null;
+    var unavailable = !!(run && run.unavailable[name] || file && file.error);
+    var exact = false;
+    if (pane.kind === 'workbench') exact = !!(panel && !panel.classList.contains('hidden') && (store.get('rightWorkbenchOwner') === name || (store.get('rightWorkbenchDockedOwners') || []).indexOf(name) >= 0));
+    else if (pane.kind === 'file') exact = !!(file && file.resource && file.resource.path === pane.resource.path && file.resource.mode === pane.resource.mode && file.resource.rendered === pane.resource.rendered && (file.content != null || file.binary));
+    else if (pane.kind === 'terminal') {
+      var terminal = store.get('savedViewTerminalResource');
+      exact = !!(terminal && terminal.id === pane.resource.id && terminal.identity === pane.resource.identity && terminal.runtimeId === pane.resource.runtimeId && (store.get('clayControlTerminalViews') || []).some(function (item) { return item.id === terminal.id && item.identity === terminal.identity && !item.exited; }));
+    } else {
+      var browser = store.get('sharedBrowser');
+      exact = !!(browser && browser.id === pane.resource.id && browser.phase !== 'ended' && store.get('controlRuntimeId') === pane.resource.runtimeId && store.get('sessionOriginId') === pane.resource.sessionOriginId);
+    }
+    var ready = !!(pane.open && panel && !unavailable && exact);
+    var shown = !!(!hidden && pane.open && panel && visible(panel));
+    var rect = shown ? panel.getBoundingClientRect() : null;
+    function pixel(value) { return Math.max(-100000, Math.min(100000, Math.round(value))); }
+    return { instanceId: pane.instanceId, kind: pane.kind, placement: panel && panel.dataset && ['docked', 'overlay'].indexOf(panel.dataset.workbenchPlacement) >= 0 ? panel.dataset.workbenchPlacement : null, expanded: !!(pane.open && panel && panel.classList && panel.classList.contains('panel-fullscreen')), visible: shown, ready: ready, unavailable: unavailable,
+      geometry: rect ? { x: pixel(rect.x), y: pixel(rect.y), width: Math.max(0, pixel(rect.width)), height: Math.max(0, pixel(rect.height)) } : null };
+  });
+}
+export function toolPaneRendering(snapshot, view) {
+  var expected = view.workspace ? view.workspace.panes.filter(function (pane) { return pane.kind !== 'session' && pane.open && (!snapshot.focusOrigin || snapshot.expandedPaneId || pane.placement === 'overlay') && (!view.workspace.presentation || !view.workspace.presentation.expandedPaneId || view.workspace.presentation.expandedPaneId === pane.instanceId); }) : [];
+  var tools = snapshot.tools || [];
+  return expected.every(function (pane) { return tools.some(function (tool) { return tool.instanceId === pane.instanceId && tool.kind === pane.kind && tool.placement === pane.placement && !!tool.expanded === !!(view.workspace.presentation && view.workspace.presentation.expandedPaneId === pane.instanceId) && tool.visible && tool.ready && !tool.unavailable; }); }) && tools.filter(function (tool) { return tool.visible; }).length === expected.length;
+}

package/lib/public/modules/file-history-snapshot.js

@@ -0,0 +1,12 @@
+// Session tool input is historical evidence. The current disk file is not.
+export function historicalSnapshot(entry, before) {
+  if (!entry || entry.source === 'git') return undefined;
+  var full = before ? entry.beforeContent : entry.afterContent;
+  if (typeof full === 'string') return full;
+  if (entry.toolName === 'Write' || entry.isFullWrite) return before ? undefined : typeof entry.content === 'string' ? entry.content : undefined;
+  var excerpt = before ? entry.old_string : entry.new_string;
+  return typeof excerpt === 'string' ? excerpt : undefined;
+}
+export function historicalScope(entry) {
+  return entry && entry.source !== 'git' && entry.toolName === 'Edit' && typeof entry.afterContent !== 'string' ? 'Recorded changed excerpt; a full-file snapshot was not recorded.' : '';
+}

package/lib/public/modules/file-pane-entrypoints.js

@@ -0,0 +1,55 @@
+import { recordToolExpansion } from './view-presentation-state.js';
+import { registerStudioPaint } from './clay-studio-render.js';
+import { bindFileReview } from './file-pane-review.js';
+// Compatibility entrypoints resolve an actual pane in the authenticated current View.
+import { store } from './store.js';
+import { activeSavedView } from './view-workspace-state.js';
+import { filePaneStates, filePaneState, openIndependentFile, updateFilePaneState, repaintFilePane, actOnFilePane, closeFilePane, mountFilePane } from './file-pane-instances.js';
+import { claimRightWorkbench } from './right-workbench.js';
+import { presentedDocument } from './clay-studio-document.js';
+import { showToast } from './utils.js';
+
+export function independentFilesActive() { return !!activeSavedView() && !store.get('paneMode'); }
+export function fileEntryContext() { var s = store.snap(); return JSON.stringify([s.currentSlug, s.myUserId, s.currentProjectOwnerId, s.projectSplitViewActiveId, s.projectSplitViewSocketGeneration]); }
+export function normalizedFilePath(path) {
+  var cwd = String(store.get('cwd') || '').replace(/\/$/, '');
+  return cwd && path.indexOf(cwd + '/') === 0 ? path.slice(cwd.length + 1) : path;
+}
+export function activeFilePane() {
+  var id = store.get('activeFilePaneId'), state = filePaneState(id);
+  if (state) return state;
+  var ids = Object.keys(filePaneStates()).reverse();
+  for (var i = 0; i < ids.length; i++) { state = filePaneState(ids[i]); if (state) return state; }
+  return null;
+}
+export function closeActiveFilePane() { var state = activeFilePane(); if (state) closeFilePane(state.instanceId); }
+export function expandActiveFilePane(enabled) { var state = activeFilePane(); if (state) { updateFilePaneState(state.instanceId, { expanded: !!enabled }); repaintFilePane(state.instanceId); recordToolExpansion('file-' + state.instanceId, enabled); } }
+export function reopenIndependentFile() {
+  var last = filePaneStates()[store.get('activeFilePaneId')];
+  if (last && !last.open && last.context === fileEntryContext()) { mountFilePane(last); return true; }
+  var state = activeFilePane();
+  if (state) { claimRightWorkbench('file-' + state.instanceId); return true; }
+  var closed = Object.keys(filePaneStates()).reverse().map(function (id) { return filePaneStates()[id]; }).find(function (item) { return item.context === fileEntryContext(); });
+  if (!closed) return false;
+  mountFilePane(closed); return true;
+}
+export function refreshIndependentFile(path) {
+  path = normalizedFilePath(path);
+  Object.keys(filePaneStates()).forEach(function (id) { var state = filePaneState(id); if (state && state.resource.path === path && !state.historyVisible && !state.diff) actOnFilePane(id, 'refresh'); });
+}
+export function presentIndependentFile(msg, diff, review) {
+  // Source-frame receipts do not grant access to a same-named parent-project file.
+  var source = presentedDocument(msg.path);
+  if (source && source.descriptor.sourceSlug !== store.get('currentSlug')) { showToast('Source-project document presentation is unavailable in this View.', 'warn'); return false; }
+  if (!openIndependentFile(msg.path, { rendered: !diff, diff: diff })) return false;
+  var path = normalizedFilePath(msg.path);
+  Object.keys(filePaneStates()).forEach(function (id) {
+    var state = filePaneState(id);
+    if (!state || state.resource.mode !== 'follow' || state.resource.path !== path) return;
+    bindFileReview(state, review);
+    updateFilePaneState(id, { suppliedSnapshotRequestId: state.requestId, content: msg.content || '', size: msg.size || (msg.content || '').length, binary: !!msg.binary, diff: diff || null }); repaintFilePane(id);
+    var panel = document.getElementById('file-' + id);
+    registerStudioPaint(msg, panel.querySelector('.tool-pane-header'), null, panel.querySelector('.file-viewer-body'));
+  });
+  return true;
+}

package/lib/public/modules/file-pane-history.js

@@ -0,0 +1,78 @@
+import { historicalSnapshot, historicalScope } from './file-history-snapshot.js';
+import { filePaneState, updateFilePaneState, sendFilePaneRequest, repaintFilePane } from './file-pane-instances.js';
+import { renderSplitDiff, renderUnifiedDiff, reconstructPatchSources } from './diff.js';
+import { renderCodeWithLineNumbers, mapExtToLanguage } from './file-viewer-source.js';
+import { navigateToEdit } from './filebrowser.js';
+
+function control(label, action) { var b = document.createElement('button'); b.type = 'button'; b.textContent = label; b.addEventListener('click', action); return b; }
+function current(state) { var live = filePaneState(state.instanceId); return live && live.requestId === state.requestId; }
+function change(state, patch) { if (!current(state)) return; updateFilePaneState(state.instanceId, patch); repaintFilePane(state.instanceId); }
+function entryContent(state, entry, before) { return entry.source === 'git' ? (state.historyContents || {})[entry.hash] : historicalSnapshot(entry, before); }
+function requestEntry(state, entry) { if (entry.source === 'git') sendFilePaneRequest(state, 'fs_file_at', { hash: entry.hash }); }
+export function paintFileHistory(body, state) {
+  body.replaceChildren();
+  var target = state.historyTarget;
+  if (target) {
+    var bar = document.createElement('div'); bar.className = 'file-history-view-bar';
+    bar.appendChild(control('Back to timeline', function () { change(state, { historyTarget: null }); }));
+    ['Split', 'Unified', 'Source'].forEach(function (mode) { bar.appendChild(control(mode, function () { change(state, { historyMode: mode.toLowerCase() }); })); });
+    body.appendChild(bar);
+    var content = document.createElement('div'); body.appendChild(content);
+    var before, after;
+    if (target.kind === 'git') {
+      if (state.historyDiffHash !== target.entry.hash) { content.textContent = 'Loading revision…'; return; }
+      if (state.historyError) { content.textContent = state.historyError; return; }
+      var parsed = reconstructPatchSources(state.historyDiff || ''); before = parsed.oldStr; after = parsed.newStr;
+      if (state.historyMode === 'source') after = entryContent(state, target.entry);
+    } else if (target.kind === 'compare') { before = entryContent(state, target.entries[0], true); after = entryContent(state, target.entries[1]); }
+    else { before = historicalSnapshot(target.entry, true); after = historicalSnapshot(target.entry, false); }
+    var entries = target.entries || [target.entry], historical = entries.some(function (entry) { return entry.source !== 'git'; });
+    var note = entries.map(historicalScope).filter(Boolean).join(' ');
+    if (note) { var notice = document.createElement('p'); notice.textContent = note; body.insertBefore(notice, content); }
+    if (after === undefined || before === undefined && state.historyMode !== 'source') {
+      content.textContent = state.historyError || (historical ? 'This historical snapshot was not recorded. Use Source to inspect the recorded content, when available.' : 'Loading revision…'); return;
+    }
+    var ext = state.resource.path.split('.').pop();
+    if (state.historyMode === 'source') renderCodeWithLineNumbers(content, after, ext);
+    else content.appendChild((state.historyMode === 'unified' ? renderUnifiedDiff : renderSplitDiff)(before, after, mapExtToLanguage(ext)));
+    return;
+  }
+  if (!state.entries) { body.textContent = 'Loading history…'; return; }
+  if (!state.entries.length) { body.textContent = 'No file history'; return; }
+  var selected = state.historySelected || [], comparison = document.createElement('div'); comparison.className = 'file-history-view-bar';
+  comparison.textContent = 'Compare revisions (' + selected.length + '/2)';
+  var compare = control('Compare', function () {
+    if (!current(state) || selected.length !== 2) return;
+    change(state, { historyTarget: { kind: 'compare', entries: selected }, historyError: null });
+    selected.forEach(function (entry) { requestEntry(state, entry); });
+  }); compare.disabled = selected.length !== 2; comparison.appendChild(compare); body.appendChild(comparison);
+  state.entries.forEach(function (entry) {
+    var row = document.createElement('div'); row.className = 'file-history-entry';
+    var title = document.createElement('div'); title.className = 'file-history-title'; title.textContent = entry.message || entry.assistantSnippet || entry.toolName || 'Edit'; row.appendChild(title);
+    var meta = document.createElement('div'); meta.className = 'file-history-meta'; meta.textContent = entry.source === 'git' ? entry.hash.slice(0, 7) + ' · ' + (entry.author || '') : entry.sessionTitle || 'Conversation'; row.appendChild(meta);
+    if (entry.source !== 'git' && entry.toolName === 'Edit') row.appendChild(renderUnifiedDiff(entry.old_string || '', entry.new_string || '', mapExtToLanguage(state.resource.path.split('.').pop())));
+    var select = control(selected.indexOf(entry) >= 0 ? 'Deselect' : 'Select for comparison', function () {
+      var next = selected.filter(function (item) { return item !== entry; });
+      if (next.length === selected.length) next = next.slice(-1).concat(entry);
+      change(state, { historySelected: next });
+    }); row.appendChild(select);
+    row.appendChild(control('View change', function () {
+      change(state, { historyTarget: { kind: entry.source === 'git' ? 'git' : 'session', entry: entry }, historyError: null });
+      if (entry.source === 'git') { sendFilePaneRequest(state, 'fs_git_diff', { hash: entry.hash }); requestEntry(state, entry); }
+    }));
+    if (entry.source === 'session') row.appendChild(control('Go to conversation', function () { if (current(state)) navigateToEdit(entry); }));
+    body.appendChild(row);
+  });
+}
+export function receiveFileHistory(state, msg) {
+  if (msg.type === 'fs_file_history_result') updateFilePaneState(state.instanceId, { entries: msg.entries || [], historyError: msg.error || null });
+  else if (msg.type === 'fs_git_diff_result') {
+    var target = state.historyTarget;
+    if (!target || target.kind !== 'git' || target.entry.hash !== msg.hash) return;
+    updateFilePaneState(state.instanceId, { historyDiff: msg.diff, historyDiffHash: msg.hash, historyError: msg.error || null });
+  } else if (msg.type === 'fs_file_at_result') {
+    var contents = Object.assign({}, state.historyContents || {}); contents[msg.hash] = msg.content;
+    updateFilePaneState(state.instanceId, { historyContents: contents, historyError: msg.error || null });
+  } else return;
+  if (state.historyVisible) repaintFilePane(state.instanceId);
+}