clay-server 5.3.0-beta.5 → 5.3.0-beta.7

package/lib/public/modules/contextual-clay-geometry.js

@@ -8,8 +8,12 @@ function state() { return store.get('contextualClayGeometry') || {}; }
 function surface() { return document.getElementById('contextual-clay'); }
 function narrow() { return window.matchMedia('(max-width: 768px)').matches; }
 function rectValue(rect) { return { left: rect.left, top: rect.top, width: rect.width, height: rect.height }; }
+function maximumWidth() {
+  var style = getComputedStyle(surface());
+  return (parseFloat(style.getPropertyValue('--mate-content-width')) || 860) + (parseFloat(style.getPropertyValue('--contextual-chat-gutter')) || 80);
+}
 function bounded(value) {
-  return { left: Math.round(Math.max(0, Math.min(16384, value.left))), top: Math.round(Math.max(0, Math.min(16384, value.top))), width: Math.round(Math.max(340, Math.min(2560, value.width))), height: Math.round(Math.max(360, Math.min(2160, value.height))) };
+  return { left: Math.round(Math.max(0, Math.min(16384, value.left))), top: Math.round(Math.max(0, Math.min(16384, value.top))), width: Math.round(Math.max(340, Math.min(maximumWidth(), value.width))), height: Math.round(Math.max(360, Math.min(2160, value.height))) };
 }
 function setState(patch) { store.set({ contextualClayGeometry: Object.assign({}, state(), patch) }); }
 function defaultGeometry() {
@@ -22,7 +26,7 @@ export function positionContextualClay() {
   var hint = renderContextualMateHint();
   if (!element || narrow() || (store.get('contextualClay') || {}).mode === 'opening') return;
   var desired = state().preview || state().desired || defaultGeometry();
-  var width = Math.min(desired.width, window.innerWidth - 16);
+  var width = Math.min(desired.width, maximumWidth(), window.innerWidth - 16);
   var height = Math.min(desired.height, window.innerHeight - 16);
   var left = Math.max(8, Math.min(desired.left, window.innerWidth - width - 8));
   var top = Math.max(8, Math.min(desired.top, window.innerHeight - height - 8));
@@ -78,7 +82,7 @@ function move(event) {
   if (!state().preview && Math.hypot(dx, dy) < 3) return;
   var value = Object.assign({}, drag.start);
   if (drag.edge) {
-    if (drag.edge.indexOf('e') >= 0) value.width = Math.max(340, Math.min(2560, window.innerWidth - value.left - 8, value.width + dx));
+    if (drag.edge.indexOf('e') >= 0) value.width = Math.max(340, Math.min(maximumWidth(), window.innerWidth - value.left - 8, value.width + dx));
     if (drag.edge.indexOf('s') >= 0) value.height = Math.max(360, Math.min(2160, window.innerHeight - value.top - 8, value.height + dy));
   } else {
     value.left = Math.max(8, Math.min(window.innerWidth - value.width - 8, value.left + dx));

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

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

@@ -0,0 +1,140 @@
+import { recordToolExpansion } from './view-presentation-state.js';
+import { releaseFileReview } from './file-pane-review.js';
+import { paintFileHistory, receiveFileHistory } from './file-pane-history.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench, unregisterRightWorkbench } from './right-workbench.js';
+import { TOOL_PANES } from './tool-pane-tree.js';
+import { workspaceChanged, freshInstance, activeSavedView } from './view-workspace-state.js';
+import { filePaneShell, updateFilePaneToolbar } from './file-pane-toolbar.js';
+import { paintFilePane, filePreviewKind } from './file-pane-render.js';
+import { cancelPlantUmlPreview } from './plantuml-preview.js';
+import { copyToClipboard, showToast } from './utils.js';
+import { copyMarkdownFormatting } from './rich-clipboard.js';
+import { exportMarkdownAsPdf } from './markdown.js';
+import { downloadProjectFile } from './filebrowser-context-menu.js';
+
+export function filePaneStates() { return store.get('filePaneInstances') || {}; }
+function context() { var s = store.snap(); return JSON.stringify([s.currentSlug, s.myUserId, s.currentProjectOwnerId, s.projectSplitViewActiveId, s.projectSplitViewSocketGeneration]); }
+export function filePaneState(id) { var state = filePaneStates()[id]; return state && state.context === context() && state.open ? state : null; }
+export function updateFilePaneState(id, patch) {
+  var states = Object.assign({}, filePaneStates()); states[id] = Object.assign({}, states[id], patch); store.set({ filePaneInstances: states }); return states[id];
+}
+export function sendFilePaneRequest(state, type, extra) {
+  var ws = getWs();
+  if (!ws || !store.get('connected') || !filePaneState(state.instanceId)) return;
+  ws.send(JSON.stringify(Object.assign({ type: type, instanceId: state.instanceId, requestId: state.requestId, path: state.resource.path,
+    projectSlug: store.get('currentSlug'), accountId: store.get('myUserId') || null }, extra)));
+}
+function unwatch(state) {
+  var ws = getWs();
+  if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'fs_unwatch', instanceId: state.instanceId, requestId: state.requestId }));
+}
+function request(id) {
+  var state = filePaneState(id); if (!state) return;
+  unwatch(state); state = updateFilePaneState(id, { requestId: freshInstance(), error: null, suppliedSnapshotRequestId: null });
+  sendFilePaneRequest(state, 'fs_read'); sendFilePaneRequest(state, 'fs_watch'); sendFilePaneRequest(state, 'fs_file_history');
+}
+function panelFor(id) { return document.getElementById('file-' + id); }
+export function repaintFilePane(id) {
+  var state = filePaneState(id), panel = panelFor(id); if (!state || !panel) return;
+  delete panel.querySelector('.tool-pane-header').dataset.controlSurface;
+  updateFilePaneToolbar(panel, state);
+  panel.classList.toggle('panel-fullscreen', !!state.expanded);
+  var body = panel.querySelector('.file-viewer-body');
+  if (state.historyVisible) { paintFileHistory(body, state); return; }
+  paintFilePane(body, state);
+}
+export function closeFilePane(id) {
+  var state = filePaneState(id); if (!state) return;
+  recordToolExpansion('file-' + id, false);
+  releaseFileReview(id); unwatch(state); cancelPlantUmlPreview(id); updateFilePaneState(id, { open: false, requestId: null });
+  var panel = panelFor(id); if (panel) { panel.dispatchEvent(new Event('clay-tool-pane-dispose')); panel.remove(); }
+  releaseRightWorkbench('file-' + id); unregisterRightWorkbench('file-' + id); delete TOOL_PANES['file-' + id]; workspaceChanged();
+}
+export function actOnFilePane(id, action) {
+  var state = filePaneState(id); if (!state) return;
+  if (action !== 'refresh') store.set({ activeFilePaneId: id });
+  var resource = Object.assign({}, state.resource), patch = {};
+  if (action === 'close') { closeFilePane(id); return; }
+  if (action === 'pin') resource.mode = resource.mode === 'pin' ? 'follow' : 'pin';
+  else if (action === 'preview' || action === 'source') { resource.rendered = action === 'preview'; patch.historyVisible = false; patch.diff = null; }
+  else if (action === 'history') patch.historyVisible = !state.historyVisible;
+  else if (action === 'expand') patch.expanded = !state.expanded;
+  else if (action === 'escape') { patch.expanded = false; patch.presenting = false; }
+  else if (action === 'refresh') { request(id); return; }
+  else if (action === 'copy') { copyToClipboard(state.diff ? state.diff.newStr || '' : state.content || ''); return; }
+  else if (action === 'formatted') { copyMarkdownFormatting(state.content || '').catch(function (error) { showToast(error.message, 'error'); }); return; }
+  else if (action === 'download') { downloadProjectFile(resource.path); return; }
+  else if (action === 'pdf') {
+    resource.rendered = true; updateFilePaneState(id, { resource: resource, historyVisible: false, presenting: false }); repaintFilePane(id);
+    var markdown = panelFor(id).querySelector('.file-viewer-markdown');
+    if (markdown) exportMarkdownAsPdf(markdown, resource.path).catch(function (error) { showToast(error.message, 'error'); });
+    workspaceChanged(); return;
+  } else if (/^h[123]$/.test(action)) patch.slideLevel = Number(action.slice(1));
+  else if (action === 'slides') { patch.presenting = !state.presenting; patch.expanded = patch.presenting; patch.slideIndex = 0; resource.rendered = true; patch.historyVisible = false; }
+  else if (action === 'next' || action === 'previous') {
+    if (!state.presenting) return;
+    var count = (state.content || '').split('\n').filter(function (line) { return new RegExp('^' + '#'.repeat(state.slideLevel || 1) + ' ').test(line); }).length;
+    patch.slideIndex = Math.max(0, Math.min(Math.max(0, count - 1), (state.slideIndex || 0) + (action === 'next' ? 1 : -1)));
+  } else return;
+  patch.resource = resource; updateFilePaneState(id, patch); repaintFilePane(id);
+  if (patch.expanded !== undefined) recordToolExpansion('file-' + id, patch.expanded);
+  workspaceChanged();
+}
+export function mountFilePane(pane) {
+  var id = pane.instanceId, name = 'file-' + id;
+  if (!filePaneState(id)) {
+    updateFilePaneState(id, { instanceId: id, context: context(), open: true, resource: Object.assign({}, pane.resource), content: null, requestId: freshInstance() });
+    TOOL_PANES[name] = { id: name, label: 'Files', icon: 'file-text' };
+    var panel = filePaneShell(id, function (action) { actOnFilePane(id, action); });
+    function activate() { store.set({ activeFilePaneId: id }); }
+    panel.addEventListener('pointerdown', activate, true); panel.addEventListener('focusin', activate);
+    document.getElementById('main-panels').appendChild(panel);
+    registerRightWorkbench(name, function () { closeFilePane(id); }, name);
+  }
+  store.set({ activeFilePaneId: id });
+  claimRightWorkbench(name); repaintFilePane(id); request(id); workspaceChanged(); return 'restored';
+}
+export function openIndependentFile(path, options) {
+  options = options || {};
+  if (!store.get('connected') || options.projectSlug && options.projectSlug !== store.get('currentSlug') || options.sessionId && String(options.sessionId) !== String(store.get('activeSessionId'))) return false;
+  var cwd = String(store.get('cwd') || '').replace(/\/$/, '');
+  if (cwd && path.indexOf(cwd + '/') === 0) path = path.slice(cwd.length + 1);
+  if (!path || /[\\\x00-\x1f\x7f:]/.test(path) || !path.split('/').every(function (part) { return part && part !== '.' && part !== '..'; })) { showToast('This file cannot be bound to the current View.', 'warn'); return false; }
+  var states = filePaneStates(), following = Object.keys(states).map(function (id) { return filePaneState(id); }).filter(function (state) { return state && state.resource.mode === 'follow'; });
+  if (following.length) {
+    following.forEach(function (state) {
+      store.set({ activeFilePaneId: state.instanceId });
+      releaseFileReview(state.instanceId); unwatch(state); updateFilePaneState(state.instanceId, { content: null, entries: null, historyVisible: false, historyTarget: null, historyContents: {}, historySelected: [], historyDiff: null, historyDiffHash: null, diff: options.diff || null, line: options.line || null, heading: options.heading || null,
+        resource: { path: path, mode: 'follow', rendered: !options.line && !options.diff && options.rendered !== false && !!filePreviewKind(path) } });
+      repaintFilePane(state.instanceId); request(state.instanceId);
+    }); workspaceChanged(); return true;
+  }
+  var view = activeSavedView(), count = view ? view.workspace.panes.filter(function (pane) { return pane.kind !== 'session' && pane.open; }).length : Object.keys(states).filter(function (id) { return filePaneState(id); }).length;
+  if (count >= 8) { showToast('A View supports at most eight tool panes. Close a pane first.', 'warn'); return false; }
+  var id = freshInstance();
+  mountFilePane({ instanceId: id, resource: { path: path, mode: 'follow', rendered: !options.line && !options.diff && options.rendered !== false && !!filePreviewKind(path) } });
+  updateFilePaneState(id, { line: options.line || null, heading: options.heading || null, diff: options.diff || null }); return true;
+}
+export function routeFilePaneMessage(msg) {
+  if (!msg.instanceId) return false;
+  var state = filePaneState(msg.instanceId);
+  if (!state || !store.get('connected') || state.requestId !== msg.requestId || state.resource.path !== msg.path) return true;
+  if (msg.type === 'fs_read_result' && (msg.projectSlug !== store.get('currentSlug') || (msg.accountId || null) !== (store.get('myUserId') || null))) return true;
+  if (msg.type === 'fs_read_result' && !msg.error && state.suppliedSnapshotRequestId === msg.requestId) return true;
+  if (msg.type === 'fs_read_result' || msg.type === 'fs_file_changed') {
+    updateFilePaneState(state.instanceId, { content: msg.content, size: msg.size, binary: msg.binary, imageUrl: msg.imageUrl, error: msg.error || null }); repaintFilePane(state.instanceId);
+  } else receiveFileHistory(state, msg);
+  return true;
+}
+export function resetFilePanes() {
+  Object.keys(filePaneStates()).forEach(function (id) {
+    releaseFileReview(id); var state = filePaneStates()[id]; unwatch(state); cancelPlantUmlPreview(id);
+    var panel = panelFor(id); if (panel) { panel.dispatchEvent(new Event('clay-tool-pane-dispose')); panel.remove(); }
+    unregisterRightWorkbench('file-' + id); delete TOOL_PANES['file-' + id];
+  }); store.set({ filePaneInstances: {}, activeFilePaneId: null });
+}
+store.subscribe(function (state, previous) {
+  if (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId || state.currentProjectOwnerId !== previous.currentProjectOwnerId || state.projectSplitViewActiveId !== previous.projectSplitViewActiveId || state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration) resetFilePanes();
+});

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

@@ -0,0 +1,41 @@
+import { filePaneState, openIndependentFile } from './file-pane-instances.js';
+import { localFileTarget } from './clay-file-links.js';
+
+export function resolvePaneLink(base, target) {
+  if (target.charAt(0) === '/') return target;
+  var parts = base.split('/'); parts.pop();
+  var segments = target.split('/');
+  for (var i = 0; i < segments.length; i++) {
+    if (!segments[i] || segments[i] === '.') continue;
+    if (segments[i] === '..') { if (!parts.length) return null; parts.pop(); }
+    else parts.push(segments[i]);
+  }
+  return parts.join('/');
+}
+export function bindFilePaneLinks(markdown, state) {
+  var counts = {};
+  Array.from(markdown.querySelectorAll('h1,h2,h3,h4,h5,h6')).forEach(function (heading) {
+    var slug = heading.textContent.trim().toLowerCase().replace(/[^\p{L}\p{N}_\s-]/gu, '').replace(/\s+/g, '-');
+    var count = counts[slug] || 0; counts[slug] = count + 1; heading.dataset.fileHeading = slug + (count ? '-' + count : '');
+  });
+  markdown.addEventListener('click', function (event) {
+    var link = event.target.closest('a, .clay-file-link'); if (!link || !markdown.contains(link)) return;
+    var href = link.getAttribute('href'), path = link.dataset.filePath;
+    if (href && href.charAt(0) === '#') {
+      event.preventDefault(); event.stopPropagation();
+      var fragment; try { fragment = decodeURIComponent(href.slice(1)); } catch (e) { return; }
+      Array.from(markdown.querySelectorAll('[data-file-heading]')).some(function (heading) { if (heading.dataset.fileHeading !== fragment) return false; heading.scrollIntoView({ block: 'start' }); return true; }); return;
+    }
+    var target = path ? { path: path, line: Number(link.dataset.fileLine) || null } : localFileTarget(href);
+    if (!target) return;
+    event.preventDefault(); event.stopPropagation();
+    var live = filePaneState(state.instanceId); if (!live || live.requestId !== state.requestId) return;
+    var resolved = resolvePaneLink(state.resource.path, target.path);
+    if (resolved) openIndependentFile(resolved, { line: target.line, heading: link.dataset.fileHeading || null });
+  });
+}
+
+export function scrollFileHeading(markdown, heading) {
+  if (!heading) return;
+  Array.from(markdown.querySelectorAll('[data-file-heading]')).some(function (element) { if (!/^H[1-6]$/.test(element.tagName) || element.dataset.fileHeading !== heading) return false; element.scrollIntoView({ block: 'start' }); return true; });
+}

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

@@ -0,0 +1,48 @@
+import { bindFilePaneLinks, scrollFileHeading } from './file-pane-links.js';
+import { paintFileReview } from './file-pane-review.js';
+import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks } from './markdown.js';
+import { renderHtmlPreview, isHtmlFile } from './html-preview.js';
+import { renderPlantUmlPreview, cancelPlantUmlPreview, isPlantUmlFile } from './plantuml-preview.js';
+import { renderCodeWithLineNumbers, renderLargeTextFile, mapExtToLanguage } from './file-viewer-source.js';
+
+export function filePreviewKind(path) {
+  return /\.mdx?$/i.test(path) ? 'markdown' : isHtmlFile(path) ? 'html' : isPlantUmlFile(path) ? 'uml' : /\.svg$/i.test(path) ? 'svg' : null;
+}
+export function paintFilePane(body, state) {
+  cancelPlantUmlPreview(state.instanceId);
+  var path = state.resource.path, content = state.content || '', kind = filePreviewKind(path), scroll = body.scrollTop;
+  body.replaceChildren();
+  if (state.error) { var error = document.createElement('div'); error.className = 'file-tree-error'; error.textContent = state.error; body.appendChild(error); return; }
+  if (state.content == null && !state.binary) { body.textContent = 'Loading file…'; return; }
+  if (state.binary) {
+    if (state.imageUrl) { var image = document.createElement('img'); image.src = state.imageUrl; image.alt = path; body.appendChild(image); }
+    else body.textContent = 'Binary file';
+  } else if (state.diff) {
+    paintFileReview(body, state);
+  } else if ((state.size || content.length) > 1024 * 1024) renderLargeTextFile(body, content, state.size);
+  else if (!state.resource.rendered || !kind) renderCodeWithLineNumbers(body, content, path.split('.').pop());
+  else if (kind === 'markdown') {
+    var markdown = document.createElement('div'); markdown.className = 'file-viewer-markdown';
+    markdown.innerHTML = renderMarkdown(content); body.appendChild(markdown);
+    Array.from(markdown.querySelectorAll('img')).forEach(function (image) {
+      var src = image.getAttribute('src');
+      if (src && !/^(https?:|data:|api\/file)/.test(src)) image.src = 'api/file?path=' + encodeURIComponent(path.replace(/[^/]*$/, '') + src);
+    });
+    bindFilePaneLinks(markdown, state);
+    highlightCodeBlocks(markdown); renderMermaidBlocks(markdown);
+    if (state.presenting) {
+      var slide = -1, level = 'H' + (state.slideLevel || 1);
+      Array.from(markdown.children).forEach(function (child) {
+        if (child.tagName === level) slide++;
+        child.hidden = Math.max(0, slide) !== (state.slideIndex || 0);
+      });
+    }
+  } else if (kind === 'html') renderHtmlPreview(body, content, path);
+  else if (kind === 'uml') renderPlantUmlPreview(body, content, path, state.instanceId);
+  else {
+    var svg = document.createElement('img'); svg.className = 'file-viewer-svg-preview'; svg.alt = path;
+    svg.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(content); body.appendChild(svg);
+  }
+  body.scrollTop = state.line ? Math.max(0, (state.line - 1) * 20 - 80) : scroll;
+  if (kind === 'markdown' && state.heading) scrollFileHeading(body, state.heading);
+}

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

@@ -0,0 +1,26 @@
+import { filePaneState, updateFilePaneState, repaintFilePane } from './file-pane-instances.js';
+import { renderSplitDiff, renderUnifiedDiff } from './diff.js';
+import { renderCodeWithLineNumbers, mapExtToLanguage } from './file-viewer-source.js';
+
+var callbacks = new Map();
+export function bindFileReview(state, review) {
+  if (review) callbacks.set(state.instanceId, { requestId: state.requestId, context: state.context, review: review });
+  else callbacks.delete(state.instanceId);
+}
+export function releaseFileReview(id) { callbacks.delete(id); }
+export function paintFileReview(body, state) {
+  var bar = document.createElement('div'); bar.className = 'file-history-view-bar';
+  var receipt = callbacks.get(state.instanceId);
+  function current() { var live = filePaneState(state.instanceId); return live && live.requestId === state.requestId && live.context === state.context; }
+  function button(label, callback) { var b = document.createElement('button'); b.type = 'button'; b.textContent = label; b.disabled = !callback; b.addEventListener('click', function () { if (current() && callback) callback(); }); bar.appendChild(b); }
+  button('Back to file', function () { updateFilePaneState(state.instanceId, { diff: null }); repaintFilePane(state.instanceId); });
+  ['Split', 'Unified', 'Source'].forEach(function (mode) { button(mode, function () { updateFilePaneState(state.instanceId, { reviewMode: mode.toLowerCase() }); repaintFilePane(state.instanceId); }); });
+  if (receipt && receipt.requestId === state.requestId && receipt.context === state.context) {
+    var review = receipt.review, label = document.createElement('span'); label.textContent = (review.index + 1) + ' of ' + review.total; bar.appendChild(label);
+    button('Previous file', review.previous); button('Next file', review.next); if (review.askAgent) button('Ask agent', review.askAgent);
+  }
+  body.appendChild(bar);
+  var content = document.createElement('div'), ext = state.resource.path.split('.').pop(); body.appendChild(content);
+  if (state.reviewMode === 'source') renderCodeWithLineNumbers(content, state.diff.newStr || '', ext);
+  else content.appendChild((state.reviewMode === 'unified' ? renderUnifiedDiff : renderSplitDiff)(state.diff.oldStr || '', state.diff.newStr || '', mapExtToLanguage(ext)));
+}

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

@@ -0,0 +1,54 @@
+import { filePreviewKind } from './file-pane-render.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+function button(label, icon, action) {
+  var element = document.createElement('button'); element.type = 'button'; element.title = label; element.setAttribute('aria-label', label);
+  element.innerHTML = icon ? iconHtml(icon) : label; element.addEventListener('click', action); return element;
+}
+export function filePaneShell(id, act) {
+  var panel = document.createElement('section'); panel.id = 'file-' + id; panel.className = 'file-instance'; panel.dataset.fileInstance = id;
+  var header = document.createElement('header'); header.className = 'tool-pane-header split-pane-header'; header.dataset.toolPane = panel.id;
+  var title = document.createElement('span'); title.className = 'tool-pane-title split-pane-title';
+  var space = document.createElement('span'); space.className = 'split-pane-drag-space';
+  var actions = document.createElement('div'); actions.className = 'file-viewer-window-actions';
+  var pin = button('Pin this file', 'pin', function () { act('pin'); }); pin.dataset.action = 'pin';
+  actions.append(pin, button('Expand file pane', 'maximize-2', function () { act('expand'); }), button('Close file pane', 'x', function () { act('close'); }));
+  header.append(title, space, actions);
+  var toolbar = document.createElement('div'); toolbar.className = 'file-instance-toolbar'; toolbar.setAttribute('aria-label', 'File actions');
+  ['Preview', 'Source', 'History'].forEach(function (label) { var b = button(label, null, function () { act(label.toLowerCase()); }); b.dataset.action = label.toLowerCase(); toolbar.appendChild(b); });
+  var more = button('More file actions', 'ellipsis', toggle); more.setAttribute('aria-haspopup', 'menu'); more.setAttribute('aria-expanded', 'false');
+  toolbar.appendChild(more);
+  var menu = document.createElement('div'); menu.className = 'file-instance-more hidden'; menu.setAttribute('role', 'menu');
+  [['Copy source', 'copy'], ['Copy formatted', 'formatted'], ['Download', 'download'], ['Export PDF', 'pdf'], ['Present slides', 'slides'], ['Use H1 headings', 'h1'], ['Use H2 headings', 'h2'], ['Use H3 headings', 'h3'], ['Refresh', 'refresh']].forEach(function (item) {
+    var b = button(item[0], null, function () { dismiss(true); act(item[1]); }); b.setAttribute('role', 'menuitem'); b.dataset.action = item[1]; menu.appendChild(b);
+  });
+  function dismiss(focus) { menu.classList.add('hidden'); more.setAttribute('aria-expanded', 'false'); if (focus) more.focus(); }
+  function toggle() { var open = menu.classList.contains('hidden'); dismiss(false); if (open) { menu.classList.remove('hidden'); more.setAttribute('aria-expanded', 'true'); menu.querySelector('button:not(:disabled)').focus(); } }
+  function outside(event) { if (!menu.contains(event.target) && !more.contains(event.target)) dismiss(false); }
+  panel.addEventListener('keydown', function (event) {
+    if (!menu.classList.contains('hidden')) {
+      if (event.key === 'Escape' || event.key === 'Tab') { dismiss(event.key === 'Escape'); event.stopPropagation(); if (event.key === 'Escape') event.preventDefault(); }
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Home' || event.key === 'End') {
+        var buttons = Array.from(menu.querySelectorAll('button:not(:disabled)')), index = buttons.indexOf(document.activeElement);
+        index = event.key === 'Home' ? 0 : event.key === 'End' ? buttons.length - 1 : (index + (event.key === 'ArrowDown' ? 1 : -1) + buttons.length) % buttons.length;
+        buttons[index].focus(); event.preventDefault(); event.stopPropagation();
+      }
+      return;
+    }
+    if (event.key === 'Escape') { act('escape'); event.stopPropagation(); }
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') act(event.key === 'ArrowRight' ? 'next' : 'previous');
+  });
+  document.addEventListener('pointerdown', outside);
+  panel.addEventListener('clay-tool-pane-dispose', function () { document.removeEventListener('pointerdown', outside); }, { once: true });
+  var body = document.createElement('div'); body.className = 'file-viewer-body'; body.tabIndex = 0;
+  panel.append(header, toolbar, menu, body); refreshIcons(); return panel;
+}
+export function updateFilePaneToolbar(panel, state) {
+  var title = panel.querySelector('.tool-pane-title'); title.textContent = state.resource.path.split('/').pop(); title.title = state.resource.path;
+  var pin = panel.querySelector('[data-action="pin"]'), pinned = state.resource.mode === 'pin';
+  pin.setAttribute('aria-pressed', String(pinned)); pin.title = pinned ? 'Pinned to ' + state.resource.path + '. Switch to Follow selection' : 'Following file selection. Pin this file'; pin.setAttribute('aria-label', pinned ? 'Follow file selection' : 'Pin this file');
+  ['preview', 'source', 'history'].forEach(function (key) { panel.querySelector('[data-action="' + key + '"]').setAttribute('aria-pressed', String(key === 'history' ? state.historyVisible : !state.historyVisible && (key === 'preview') === state.resource.rendered)); });
+  panel.querySelector('[data-action="preview"]').disabled = !filePreviewKind(state.resource.path) || !!state.binary;
+  var markdown = /\.mdx?$/i.test(state.resource.path);
+  ['pdf', 'formatted', 'slides', 'h1', 'h2', 'h3'].forEach(function (key) { panel.querySelector('[data-action="' + key + '"]').disabled = !markdown; });
+}

package/lib/public/modules/file-viewer-source.js

@@ -0,0 +1,70 @@
+import { iconHtml } from './icons.js';
+export 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;
+}
+
+export 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);
+  }
+}
+
+export 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);
+}
+
+export function formatSize(bytes) {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / 1048576).toFixed(1) + " MB";
+}