clay-server 3.4.0-beta.22 → 3.4.0-beta.24

package/lib/public/css/filebrowser.css

@@ -960,7 +960,7 @@
     width: 50%;
     max-width: 720px;
     min-width: 360px;
-    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
     background: var(--bg);
     display: flex;
     flex-direction: column;
@@ -1011,6 +1011,11 @@
   min-height: 44px;
 }
 
+.file-viewer-tabs { display: flex; min-width: 0; flex: 1; overflow-x: auto; gap: 2px; }
+.file-viewer-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 5px; padding: 4px 7px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
+.file-viewer-tab.active { background: var(--sidebar-hover); color: var(--text); }
+.file-viewer-tab-close { font-size: 16px; line-height: 12px; color: var(--text-muted); }
+
 .file-viewer-path {
   flex: 1;
   font-family: "Roboto Mono", monospace;

package/lib/public/css/pane.css

@@ -23,6 +23,12 @@ body.pane-mode #sticky-notes-container {
   display: none !important;
 }
 
+body.pane-mode #file-viewer { display: none !important; }
+
+body.pane-mode #connect-overlay { background: var(--bg); }
+body.pane-mode #connect-overlay #ascii-logo-canvas { display: none; }
+body.pane-mode #connect-overlay-msg { color: var(--text-dimmer); }
+
 body.pane-mode .notif-banner-container {
   display: none !important;
 }

package/lib/public/index.html

@@ -403,7 +403,7 @@
       <div id="app">
         <div id="connect-overlay">
       <canvas id="ascii-logo-canvas"></canvas>
-      <p id="connect-overlay-msg">Reconnecting to server…</p>
+      <p id="connect-overlay-msg">Connecting…</p>
     </div>
     <div id="sticky-notes-container" class="hidden"></div>
     <div id="debate-info-float" class="hidden"></div>
@@ -680,6 +680,7 @@
 
   <div id="file-viewer" class="hidden">
     <div class="file-viewer-header">
+      <div class="file-viewer-tabs" id="file-viewer-tabs" role="tablist"></div>
       <span class="file-viewer-path" id="file-viewer-path"></span>
       <span class="file-viewer-live-status hidden" id="file-viewer-live-status" aria-live="polite">
         <span class="file-viewer-live-dot"></span>

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

@@ -17,6 +17,7 @@ var reconnectTimer = null;
 var reconnectDelay = 1000;
 var connectTimeoutId = null;
 var connectOverlay = null;
+var hasConnectedOnce = false;
 
 export function initConnection() {
   connectOverlay = document.getElementById("connect-overlay");
@@ -39,6 +40,7 @@ export function initConnection() {
     if (state.connected !== prev.connected) {
       var sendBtn = getSendBtn();
       if (state.connected) {
+        hasConnectedOnce = true;
         if (sendBtn) sendBtn.disabled = false;
         if (connectOverlay) connectOverlay.classList.add("hidden");
         var updPill = document.getElementById("update-pill-wrap");
@@ -46,6 +48,10 @@ export function initConnection() {
         stopLogoAnimation();
       } else {
         if (sendBtn) sendBtn.disabled = true;
+        if (hasConnectedOnce && connectOverlay) {
+          var overlayMessage = document.getElementById("connect-overlay-msg");
+          if (overlayMessage) overlayMessage.textContent = "Reconnecting to server…";
+        }
         if (connectOverlay) connectOverlay.classList.remove("hidden");
         startLogoAnimation();
       }

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

@@ -28,6 +28,7 @@ import { startThinking, appendThinking, stopThinking, resetThinkingGroup, create
 import { showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './notifications.js';
 import { handleFsList, handleFsRead, handleFileChanged, handleDirChanged, handleFileHistory, handleGitDiff, handleFileAt, refreshIfOpen, getPendingNavigate, handleFsSearch, presentMarkdownEdit } from './filebrowser.js';
 import { beginMarkdownTurn, finishMarkdownTurn, markdownPathFromToolInput } from './markdown-live-edit.js';
+import { forwardPaneMarkdownPresentation } from './pane-bridge.js';
 import { isProjectSettingsOpen, handleInstructionsRead, handleInstructionsWrite, handleProjectEnv, handleProjectEnvSaved, handleProjectSharedEnv, handleProjectSharedEnvSaved, handleProjectOwnerChanged } from './project-settings.js';
 import { updateSettingsModels, updateSettingsStats, updateDaemonConfig, handleSetPinResult, handleKeepAwakeChanged, handleInheritGroupsChanged, handleAutoContinueChanged, handleRestartResult, handleShutdownResult, handleSharedEnv, handleSharedEnvSaved, handleGlobalClaudeMdRead, handleGlobalClaudeMdWrite } from './server-settings.js';
 import { handleTermList, handleTermCreated, sendTerminalCommand, handleTermOutput, handleTermResized, handleTermExited, handleTermClosed } from './terminal.js';
@@ -1400,7 +1401,10 @@ export function processMessage(msg) {
         break;
 
       case "markdown_edit_present":
-        if (!store.get('replayingHistory') && !store.get('dmMode')) presentMarkdownEdit(msg);
+        if (!store.get('replayingHistory') && !store.get('dmMode')) {
+          if (store.get('paneMode')) forwardPaneMarkdownPresentation(msg);
+          else if (!store.get('splitPanes')) presentMarkdownEdit(msg);
+        }
         break;
 
       case "fs_dir_changed":

package/lib/public/modules/filebrowser-tabs.js

@@ -0,0 +1,65 @@
+var tabs = new Map();
+var focusedPath = null;
+var onFocus = null;
+var onEmpty = null;
+
+function label(path) {
+  var parts = String(path || "").split("/");
+  return parts[parts.length - 1] || path;
+}
+
+function render() {
+  var root = document.getElementById("file-viewer-tabs");
+  if (!root) return;
+  root.innerHTML = "";
+  tabs.forEach(function(value, path) {
+    var tab = document.createElement("button");
+    tab.type = "button";
+    tab.className = "file-viewer-tab" + (path === focusedPath ? " active" : "");
+    tab.textContent = label(path);
+    tab.title = path;
+    tab.addEventListener("click", function() { focusFileViewerTab(path); });
+    var close = document.createElement("span");
+    close.className = "file-viewer-tab-close";
+    close.textContent = "×";
+    close.addEventListener("click", function(event) { event.stopPropagation(); closeFileViewerTab(path); });
+    tab.appendChild(close);
+    root.appendChild(tab);
+  });
+}
+
+export function initFileViewerTabs(options) {
+  onFocus = options && options.onFocus;
+  onEmpty = options && options.onEmpty;
+}
+
+export function openFileViewerTab(path, data) {
+  if (!path) return false;
+  var exists = tabs.has(path);
+  tabs.set(path, Object.assign(tabs.get(path) || {}, data || {}));
+  focusedPath = path;
+  render();
+  return !exists;
+}
+
+export function focusFileViewerTab(path) {
+  if (!tabs.has(path)) return false;
+  focusedPath = path;
+  render();
+  if (onFocus) onFocus(path, tabs.get(path));
+  return true;
+}
+
+export function closeFileViewerTab(path) {
+  if (!tabs.has(path)) return;
+  var paths = Array.from(tabs.keys());
+  var index = paths.indexOf(path);
+  tabs.delete(path);
+  if (focusedPath === path) focusedPath = paths[index + 1] || paths[index - 1] || null;
+  render();
+  if (focusedPath && onFocus) onFocus(focusedPath, tabs.get(focusedPath));
+  if (!focusedPath && onEmpty) onEmpty();
+}
+
+export function focusedFileViewerTab() { return focusedPath; }
+export function clearFileViewerTabs() { tabs.clear(); focusedPath = null; render(); }

package/lib/public/modules/filebrowser.js

@@ -9,6 +9,7 @@ import { copyMarkdownFormatting } from './rich-clipboard.js';
 import { animateMarkdownChange, beginMarkdownPresentation, cancelMarkdownFollow, isFollowingMarkdown } from './markdown-live-edit.js';
 import { store } from './store.js';
 import { enterMarkdownSlides, exitMarkdownSlides, handleMarkdownSlideKey, syncMarkdownSlidesButton, toggleMarkdownSlideLevelMenu } from './markdown-slides.js';
+import { initFileViewerTabs, openFileViewerTab, closeFileViewerTab, focusedFileViewerTab, clearFileViewerTabs } from './filebrowser-tabs.js';
 
 var ctx;
 var showDropHint = function () {};
@@ -30,6 +31,14 @@ var pendingFileAt = null;    // callback for pending file-at
 
 export function initFileBrowser(_ctx) {
   ctx = _ctx;
+  var mainPanels = document.getElementById("main-panels");
+  if (mainPanels && ctx.fileViewerEl) mainPanels.insertBefore(ctx.fileViewerEl, mainPanels.firstChild);
+  initFileViewerTabs({
+    onFocus: function(path) {
+      if (path !== currentFilePath) requestFileContent(path);
+    },
+    onEmpty: function() { teardownFileViewer(); },
+  });
 
   // Load material file icons in background
   initFileIcons().then(function () {
@@ -133,7 +142,7 @@ export function initFileBrowser(_ctx) {
 
   // Close button
   document.getElementById("file-viewer-close").addEventListener("click", function () {
-    closeFileViewer();
+    closeFileViewerTab(focusedFileViewerTab());
   });
 
   // Full-viewport presentation toggle
@@ -448,6 +457,14 @@ function ensureRenderedMarkdown() {
 }
 
 export function closeFileViewer() {
+  if (focusedFileViewerTab()) {
+    closeFileViewerTab(focusedFileViewerTab());
+    return;
+  }
+  teardownFileViewer();
+}
+
+function teardownFileViewer() {
   if (currentFilePath && isFollowingMarkdown(currentFilePath)) cancelMarkdownFollow();
   sendUnwatch();
   inlineDiffActive = false;
@@ -475,8 +492,8 @@ export function setFileViewerFullscreen(enabled) {
 }
 
 export function resetFileBrowser() {
-  // Close viewer
-  closeFileViewer();
+  clearFileViewerTabs();
+  teardownFileViewer();
   // Clear all cached state
   treeData = {};
   currentContent = null;
@@ -513,6 +530,7 @@ export function openFile(filePath, opts) {
     cancelMarkdownFollow();
   }
   pendingRenderedOpen = !!(opts && opts.rendered);
+  openFileViewerTab(filePath);
   if (opts && opts.diff) {
     pendingOpenMode = { type: "diff", oldStr: opts.diff.oldStr, newStr: opts.diff.newStr };
   } else {
@@ -540,6 +558,7 @@ export function openWorkingTreeDiff(diff) {
 
 export function presentMarkdownEdit(msg) {
   if (!msg || !beginMarkdownPresentation(msg.path)) return;
+  openFileViewerTab(msg.path, { content: msg.content });
   pendingOpenMode = null;
   pendingRenderedOpen = true;
   pendingRefresh = false;
@@ -1031,6 +1050,7 @@ function renderEntries(container, entries, depth) {
 // --- File viewer ---
 
 function showFileContent(msg) {
+  openFileViewerTab(msg.path, { content: msg.content });
   var pathEl = document.getElementById("file-viewer-path");
   var bodyEl = document.getElementById("file-viewer-body");
   var renderBtn = document.getElementById("file-viewer-render");

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

@@ -23,6 +23,12 @@ export function reportPaneContext(data) {
   }, window.location.origin);
 }
 
+export function forwardPaneMarkdownPresentation(message) {
+  if (!store.get('paneMode') || window.parent === window) return false;
+  window.parent.postMessage({ type: "clay-pane-present-markdown", message: message }, window.location.origin);
+  return true;
+}
+
 // Toggle without setContextView: panes share localStorage with the main app,
 // so persisting here would silently rewrite the user's main-view preference.
 function togglePaneContextPanel() {

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

@@ -10,6 +10,7 @@ import { VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 import { groupedSessionIds, findSplitGroup } from './split-group-helpers.js';
 import { showConfirm } from './app-misc.js';
 import { syncPairChrome } from './split-pair-ui.js';
+import { presentMarkdownEdit } from './filebrowser.js';
 
 var host = null;
 var nativeApp = null;
@@ -269,7 +270,13 @@ function updatePaneContextChip(paneEl, msg) {
 function handlePaneMessage(event) {
   if (event.origin !== window.location.origin) return;
   var msg = event.data;
-  if (!msg || msg.type !== "clay-pane-context" || !host) return;
+  if (!msg || !host) return;
+  if (msg.type === "clay-pane-present-markdown") {
+    var present = msg.message;
+    if (present) presentMarkdownEdit(present);
+    return;
+  }
+  if (msg.type !== "clay-pane-context") return;
   var frames = host.querySelectorAll(".split-pane-frame");
   for (var i = 0; i < frames.length; i++) {
     if (frames[i].contentWindow === event.source) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "3.4.0-beta.22",
+  "version": "3.4.0-beta.24",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",