clay-server 3.5.1-beta.1 → 3.6.0-beta.1

package/lib/daemon.js

@@ -29,6 +29,7 @@ var { loadConfig, saveConfig, socketPath, generateSlug, syncClayrc, removeFromCl
 var { createIPCServer } = require("./ipc");
 var { createServer, generateAuthToken } = require("./server");
 var osUsersMod = require("./os-users");
+var { scheduleOsUserDiagnosticsAsync } = require("./os-user-diagnostics");
 var { checkAclSupport, grantProjectAccess, revokeProjectAccess, provisionAllUsers, provisionLinuxUser, grantAllUsersAccess, deactivateLinuxUser, ensureProjectsDir } = osUsersMod;
 var usersModule = require("./users");
 var { createWorktree, removeWorktree, isWorktree } = require("./worktree");
@@ -1460,6 +1461,12 @@ function startListening() {
           console.error("[daemon] Startup provisioning error:", provErr.message);
         }
         console.log("[daemon] Startup OS users check complete.");
+
+        // Diagnostics run after provisioning, never affect provisioning or serving.
+        scheduleOsUserDiagnosticsAsync({
+          getUsers: function() { return usersModule.getAllUsers(); },
+          getProjects: function() { return config.projects; },
+        });
       }, 100);
     }
 

package/lib/os-user-diagnostics-worker.js

@@ -0,0 +1,18 @@
+// Runs blocking OS-user diagnostics outside the daemon process.
+
+var diagnostics = require("./os-user-diagnostics");
+var input = "";
+
+process.stdin.setEncoding("utf8");
+process.stdin.on("data", function(chunk) {
+  input += chunk;
+});
+process.stdin.on("end", function() {
+  try {
+    var options = JSON.parse(input);
+    var result = diagnostics.collectOsUserDiagnostics(options);
+    process.stdout.write(JSON.stringify({ summary: diagnostics.summarizeDiagnostics(result) }));
+  } catch (e) {
+    process.exitCode = 1;
+  }
+});

package/lib/os-user-diagnostics.js

@@ -0,0 +1,312 @@
+// Best-effort, read-only diagnostics for the current OS-user compatibility mode.
+
+var fs = require("fs");
+var childProcess = require("child_process");
+var path = require("path");
+var execFileSync = childProcess.execFileSync;
+var osUsers = require("./os-users");
+
+function commandAvailable(command, execFile) {
+  try {
+    execFile(command, ["--help"], { stdio: "ignore", timeout: 5000 });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function credentialPaths(home) {
+  if (!home) return [];
+  return [
+    home + "/.claude",
+    home + "/.codex",
+    home + "/.config/gh",
+    home + "/.config/gcloud",
+  ];
+}
+
+function accessStatus(checks) {
+  var names = ["read", "traverse", "write"];
+  for (var i = 0; i < names.length; i++) {
+    if (!checks[names[i]] || checks[names[i]].status === "unknown") return "unknown";
+  }
+  for (var j = 0; j < names.length; j++) {
+    if (checks[names[j]].status === "deny") return "deny";
+  }
+  return "allow";
+}
+
+function unknownChecks() {
+  return {
+    read: { status: "unknown" },
+    traverse: { status: "unknown" },
+    write: { status: "unknown" },
+  };
+}
+
+function projectAccessScript(projectPath) {
+  return [
+    "var fs = require('fs');",
+    "var target = " + JSON.stringify(projectPath) + ";",
+    "var checks = {};",
+    "function check(name, mode) {",
+    "  try { fs.accessSync(target, mode); checks[name] = { status: 'allow' }; }",
+    "  catch (error) { checks[name] = { status: 'deny', code: String(error && error.code || 'EACCES') }; }",
+    "}",
+    "check('read', fs.constants.R_OK);",
+    "check('traverse', fs.constants.X_OK);",
+    "check('write', fs.constants.W_OK);",
+    "process.stdout.write(JSON.stringify(checks));",
+  ].join(" ");
+}
+
+/**
+ * Check directory access as the mapped identity without creating or changing
+ * any file. The spawn wrapper intentionally follows the runtime's current
+ * supplementary-group behavior, including its setpriv fallback.
+ */
+function probeMappedProjectAccess(project, user, options) {
+  options = options || {};
+  var result = {
+    projectSlug: project && project.slug || null,
+    userId: user && user.id || null,
+    result: "unknown",
+    checks: unknownChecks(),
+  };
+  if (!project || !project.path) {
+    result.evidence = "project_path_unavailable";
+    return result;
+  }
+  if (!user || !user.linuxUser) {
+    result.evidence = "linux_mapping_missing";
+    return result;
+  }
+
+  var resolveUser = options.resolveUser || osUsers.resolveOsUserInfo;
+  var wrapSpawn = options.wrapSpawn || osUsers.wrapSpawnAsUser;
+  var execFile = options.execFile || execFileSync;
+  var nodePath = options.nodePath || process.execPath;
+  var account;
+  try {
+    account = resolveUser(user.linuxUser);
+  } catch (e) {
+    result.evidence = "linux_account_unavailable";
+    return result;
+  }
+  if (!account || account.uid == null || account.gid == null) {
+    result.evidence = "linux_account_invalid";
+    return result;
+  }
+
+  try {
+    var spawn = wrapSpawn(nodePath, ["-e", projectAccessScript(project.path)], {
+      encoding: "utf8",
+      timeout: 5000,
+      stdio: "pipe",
+      uid: account.uid,
+      gid: account.gid,
+    }, options.setprivCheck);
+    var output = execFile(spawn.command, spawn.args, spawn.options);
+    var checks = JSON.parse(String(output).trim());
+    if (!checks || typeof checks !== "object") throw new Error("Invalid access probe result");
+    result.checks = checks;
+    result.result = accessStatus(checks);
+    result.evidence = "mapped_identity_access";
+  } catch (e) {
+    result.evidence = "probe_unavailable";
+  }
+  return result;
+}
+
+function collectUserDiagnostics(user, options) {
+  options = options || {};
+  var resolveUser = options.resolveUser || osUsers.resolveOsUserInfo;
+  var exists = options.exists || fs.existsSync;
+  var execFile = options.execFile || execFileSync;
+  var result = {
+    userId: user && user.id || null,
+    linuxUser: user && user.linuxUser || null,
+    mapping: "missing",
+    account: "unknown",
+    supplementaryGroups: "unknown",
+    credentialPaths: [],
+  };
+  if (!user || !user.linuxUser) return result;
+
+  var account;
+  try {
+    account = resolveUser(user.linuxUser);
+    result.mapping = "resolved";
+    result.account = "present";
+  } catch (e) {
+    result.mapping = "unavailable";
+    result.account = "missing";
+    result.evidence = "linux_account_unavailable";
+    return result;
+  }
+
+  try {
+    var output = execFile("id", ["-Gn", user.linuxUser], { encoding: "utf8", timeout: 5000, stdio: "pipe" });
+    result.supplementaryGroups = output.trim() ? output.trim().split(/\s+/) : [];
+  } catch (e) {
+    result.supplementaryGroups = "unknown";
+  }
+  var paths = credentialPaths(account.home);
+  for (var i = 0; i < paths.length; i++) {
+    var present = "unknown";
+    try { present = !!exists(paths[i]); } catch (e) {}
+    result.credentialPaths.push({ path: paths[i], present: present });
+  }
+  return result;
+}
+
+function collectOsUserDiagnostics(options) {
+  options = options || {};
+  var users = options.users || [];
+  var projects = options.projects || [];
+  var probeProjectAccess = options.probeProjectAccess || probeMappedProjectAccess;
+  var execFile = options.execFile || execFileSync;
+  var result = {
+    collectedAt: Date.now(),
+    setprivAvailable: commandAvailable("setpriv", execFile),
+    users: [],
+    projectAccess: [],
+  };
+  for (var i = 0; i < users.length; i++) {
+    try {
+      result.users.push(collectUserDiagnostics(users[i], options));
+    } catch (e) {
+      result.users.push({
+        userId: users[i] && users[i].id || null,
+        linuxUser: users[i] && users[i].linuxUser || null,
+        mapping: "unknown",
+        account: "unknown",
+        supplementaryGroups: "unknown",
+        credentialPaths: [],
+      });
+    }
+  }
+  for (var pi = 0; pi < projects.length; pi++) {
+    var project = projects[pi];
+    for (var ui = 0; ui < users.length; ui++) {
+      var user = users[ui];
+      if (!project || !user) continue;
+      var probe;
+      try {
+        probe = probeProjectAccess(project, user, options);
+        if (!probe || typeof probe !== "object") probe = { result: "unknown", evidence: "invalid_probe_result" };
+      } catch (e) {
+        probe = { result: "unknown", evidence: "probe_failed" };
+      }
+      if (!probe.projectSlug) probe.projectSlug = project.slug || null;
+      if (!probe.userId) probe.userId = user.id || null;
+      if (!probe.result) probe.result = "unknown";
+      result.projectAccess.push(probe);
+    }
+  }
+  return result;
+}
+
+function summarizeDiagnostics(result) {
+  var users = result.users || [];
+  var projectAccess = result.projectAccess || [];
+  var unavailableMappings = 0;
+  var unknownProbes = 0;
+  for (var i = 0; i < users.length; i++) {
+    if (users[i].mapping !== "resolved") unavailableMappings++;
+  }
+  for (var j = 0; j < projectAccess.length; j++) {
+    if (projectAccess[j].result === "unknown") unknownProbes++;
+  }
+  return "OS-user diagnostics: " + users.length + " user mappings, " + unavailableMappings + " unavailable, " + projectAccess.length + " project probes, " + unknownProbes + " unavailable";
+}
+
+function diagnosticsPayload(options) {
+  var users = typeof options.getUsers === "function" ? options.getUsers() : options.users || [];
+  var projects = typeof options.getProjects === "function" ? options.getProjects() : options.projects || [];
+  return {
+    users: users.map(function(user) {
+      return { id: user && user.id || null, linuxUser: user && user.linuxUser || null };
+    }),
+    projects: projects.map(function(project) {
+      return { slug: project && project.slug || null, path: project && project.path || null };
+    }),
+  };
+}
+
+function logDiagnosticMessage(logger, level, message) {
+  try {
+    if (logger && typeof logger[level] === "function") logger[level]("[daemon] " + message);
+  } catch (e) {}
+}
+
+/**
+ * Run blocking host probes in a short-lived child so diagnostics cannot stall
+ * the daemon event loop after it starts serving requests.
+ */
+function scheduleOsUserDiagnosticsAsync(options) {
+  options = options || {};
+  var schedule = options.schedule || setTimeout;
+  var clearSchedule = options.clearSchedule || clearTimeout;
+  var spawn = options.spawn || childProcess.spawn;
+  var logger = options.logger || console;
+  var timeoutMs = options.timeoutMs || 30000;
+  try {
+    schedule(function() {
+      var child;
+      var timeout;
+      var output = "";
+      var completed = false;
+      function finish(level, message) {
+        if (completed) return;
+        completed = true;
+        if (timeout) clearSchedule(timeout);
+        logDiagnosticMessage(logger, level, message);
+      }
+      try {
+        child = spawn(options.nodePath || process.execPath, [path.join(__dirname, "os-user-diagnostics-worker.js")], {
+          stdio: ["pipe", "pipe", "ignore"],
+        });
+        if (!child || !child.stdin || !child.stdout || typeof child.once !== "function") {
+          finish("warn", "OS-user diagnostics unavailable");
+          return;
+        }
+        child.stdout.on("data", function(chunk) { output += String(chunk); });
+        child.once("error", function() { finish("warn", "OS-user diagnostics unavailable"); });
+        child.once("close", function(code) {
+          if (completed) return;
+          if (code !== 0) {
+            finish("warn", "OS-user diagnostics unavailable");
+            return;
+          }
+          try {
+            var report = JSON.parse(output);
+            if (!report || typeof report.summary !== "string") throw new Error("Invalid diagnostics report");
+            finish("log", report.summary);
+          } catch (e) {
+            finish("warn", "OS-user diagnostics unavailable");
+          }
+        });
+        timeout = schedule(function() {
+          try { child.kill(); } catch (e) {}
+          finish("warn", "OS-user diagnostics timed out");
+        }, timeoutMs);
+        child.stdin.end(JSON.stringify(diagnosticsPayload(options)));
+      } catch (e) {
+        try { if (child && typeof child.kill === "function") child.kill(); } catch (killError) {}
+        finish("warn", "OS-user diagnostics unavailable");
+      }
+    }, 0);
+  } catch (e) {
+    logDiagnosticMessage(logger, "warn", "OS-user diagnostics could not be scheduled");
+  }
+}
+
+module.exports = {
+  collectOsUserDiagnostics: collectOsUserDiagnostics,
+  collectUserDiagnostics: collectUserDiagnostics,
+  credentialPaths: credentialPaths,
+  probeMappedProjectAccess: probeMappedProjectAccess,
+  scheduleOsUserDiagnosticsAsync: scheduleOsUserDiagnosticsAsync,
+  summarizeDiagnostics: summarizeDiagnostics,
+};

package/lib/os-users.js

@@ -54,14 +54,15 @@ function setprivAvailable() {
  *   Node's uid/gid options (primary group only) so behavior degrades safely.
  * Requires the parent process to be root, which is the case in os-users mode.
  */
-function wrapSpawnAsUser(command, args, options) {
+function wrapSpawnAsUser(command, args, options, setprivCheck) {
   args = args || [];
   options = options || {};
   var uid = options.uid;
   var gid = options.gid;
   if (uid == null || gid == null) return { command: command, args: args, options: options };
 
-  if (_inheritGroups && setprivAvailable()) {
+  var hasSetpriv = typeof setprivCheck === "function" ? setprivCheck() : setprivAvailable();
+  if (_inheritGroups && hasSetpriv) {
     var wrappedArgs = ["--reuid", String(uid), "--regid", String(gid), "--init-groups", "--", command].concat(args);
     var newOpts = Object.assign({}, options);
     delete newOpts.uid;
@@ -348,6 +349,39 @@ function toLinuxUsername(clayUsername) {
   return name;
 }
 
+function findAvailableLinuxUsername(baseName, existsFn, rejectedCandidates) {
+  var exists = existsFn || linuxUserExists;
+  rejectedCandidates = rejectedCandidates || Object.create(null);
+  if (!exists(baseName) && !rejectedCandidates[baseName]) return baseName;
+  for (var suffixNumber = 2; suffixNumber < 10000; suffixNumber++) {
+    var suffix = "-" + suffixNumber;
+    var candidate = baseName.substring(0, 32 - suffix.length).replace(/-+$/, "") + suffix;
+    if (!exists(candidate) && !rejectedCandidates[candidate]) return candidate;
+  }
+  throw new Error("Could not allocate a unique Linux username for " + baseName);
+}
+
+function allocateLinuxUsername(baseName, existsFn, createUser) {
+  var exists = existsFn || linuxUserExists;
+  var rejectedCandidates = Object.create(null);
+  for (var attempt = 0; attempt < 9999; attempt++) {
+    var linuxName = findAvailableLinuxUsername(baseName, exists, rejectedCandidates);
+    try {
+      createUser(linuxName);
+      return linuxName;
+    } catch (e) {
+      var msg = (e.stderr || e.message || "").trim();
+      if (exists(linuxName) || e.status === 9 || /already exists/i.test(msg)) {
+        // NSS can lag a successful concurrent useradd, so remember collisions locally.
+        rejectedCandidates[linuxName] = true;
+        continue;
+      }
+      throw e;
+    }
+  }
+  throw new Error("Could not allocate a unique Linux username for " + baseName);
+}
+
 /**
  * Ensure linger is enabled for a Linux user so systemd creates /run/user/<uid>.
  * Required for CLI tools like gcloud and gh that need XDG_RUNTIME_DIR.
@@ -484,31 +518,28 @@ function installClaudeCli(linuxName) {
  * Returns { ok: true, linuxUser: "clay-xxx" } or { error: "..." }.
  */
 function provisionLinuxUser(clayUsername) {
-  var linuxName = toLinuxUsername(clayUsername);
-
-  // Handle name collisions by appending a number
-  if (linuxUserExists(linuxName)) {
-    // Check if this is a clay-managed user (reuse it)
-    // Otherwise find an available name
-    console.log("[os-users] Linux user " + linuxName + " already exists, reusing.");
-    return { ok: true, linuxUser: linuxName };
-  }
-
+  var baseName = toLinuxUsername(clayUsername);
+  var linuxName;
   try {
-    execFileSync("useradd", ["-m", "-s", "/bin/bash", linuxName], {
-      encoding: "utf8",
-      timeout: 15000,
-      stdio: "pipe",
+    linuxName = allocateLinuxUsername(baseName, linuxUserExists, function(candidate) {
+      execFileSync("useradd", ["-m", "-s", "/bin/bash", candidate], {
+        encoding: "utf8",
+        timeout: 15000,
+        stdio: "pipe",
+      });
     });
-    ensureLinger(linuxName);
-    console.log("[os-users] Provisioned Linux user: " + linuxName + " (Clay user: " + clayUsername + ")");
-    installClaudeCli(linuxName);
-    return { ok: true, linuxUser: linuxName };
   } catch (e) {
     var msg = (e.stderr || e.message || "").trim();
-    console.error("[os-users] Failed to provision Linux user " + linuxName + ": " + msg);
-    return { error: "Failed to create Linux user " + linuxName + ": " + msg };
+    console.error("[os-users] Failed to provision Linux user " + baseName + ": " + msg);
+    return { error: "Failed to create Linux user " + baseName + ": " + msg };
+  }
+  if (linuxName !== baseName) {
+    console.log("[os-users] Linux user " + baseName + " already exists; provisioning " + linuxName + " instead");
   }
+  ensureLinger(linuxName);
+  console.log("[os-users] Provisioned Linux user: " + linuxName + " (Clay user: " + clayUsername + ")");
+  installClaudeCli(linuxName);
+  return { ok: true, linuxUser: linuxName };
 }
 
 /**
@@ -627,4 +658,6 @@ module.exports = {
   getLinuxUserHome: getLinuxUserHome,
   getLinuxUserUid: getLinuxUserUid,
   isSafeLinuxUsername: isSafeLinuxUsername,
+  findAvailableLinuxUsername: findAvailableLinuxUsername,
+  allocateLinuxUsername: allocateLinuxUsername,
 };

package/lib/public/css/filebrowser.css

@@ -1002,32 +1002,74 @@
 }
 
 .file-viewer-header {
+  display: block;
+  padding: 0;
+  flex-shrink: 0;
+  min-height: 0;
+  background: var(--bg);
+}
+
+.file-viewer-tabbar {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
+  align-items: stretch;
+  height: 36px;
+  min-width: 0;
+  background: var(--bg-deep);
   border-bottom: 1px solid var(--border-subtle);
-  flex-shrink: 0;
-  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-tabs { display: flex; min-width: 0; flex: 1; overflow-x: auto; overflow-y: hidden; gap: 0; scrollbar-width: none; }
+.file-viewer-tabs::-webkit-scrollbar { display: none; }
+.file-viewer-tab { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; gap: 7px; min-width: 108px; max-width: 190px; height: 36px; overflow: hidden; white-space: nowrap; border: 0; border-right: 1px solid var(--border-subtle); border-radius: 0; padding: 0 8px 0 10px; background: var(--bg-alt); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
+.file-viewer-tab::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: transparent; }
+.file-viewer-tab:hover { background: var(--bg-hover); color: var(--text); }
+.file-viewer-tab.active { background: var(--bg); color: var(--text); }
+.file-viewer-tab.active::before { background: var(--accent); }
+.file-viewer-tab.preview .file-viewer-tab-label { font-style: italic; }
+.file-viewer-tab-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; }
+.file-viewer-tab-icon:empty { display: none; }
+.file-viewer-tab-icon svg { width: 16px; height: 16px; }
+.file-viewer-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.file-viewer-tab-close { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: auto; border-radius: 4px; flex: 0 0 18px; color: var(--text-muted); font-size: 16px; font-style: normal; line-height: 1; opacity: 0; }
+.file-viewer-tab:hover .file-viewer-tab-close, .file-viewer-tab.active .file-viewer-tab-close { opacity: 1; }
+.file-viewer-tab-close:hover { background: var(--bg-hover); color: var(--text); }
+
+.file-viewer-toolbar {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 1px;
+  padding: 0 6px;
+  background: var(--bg-deep);
+  border-left: 1px solid var(--border-subtle);
+}
+
+.file-viewer-breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 30px;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg);
+}
 
 .file-viewer-path {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  min-width: 0;
   flex: 1;
-  font-family: "Roboto Mono", monospace;
-  font-size: 13px;
-  color: var(--text-secondary);
+  font-size: 12px;
+  color: var(--text-muted);
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  direction: rtl;
-  text-align: left;
 }
 
+.file-viewer-path-segment { flex: 0 0 auto; }
+.file-viewer-path-segment.current { color: var(--text-secondary); }
+.file-viewer-path-separator { color: var(--text-dimmer); font-size: 15px; line-height: 1; }
+
 .file-viewer-btn {
   display: flex;
   align-items: center;
@@ -1179,10 +1221,10 @@
   color: var(--text);
 }
 
-#file-viewer.panel-fullscreen .file-viewer-header {
-  padding-left: clamp(18px, 3vw, 48px);
-  padding-right: clamp(18px, 3vw, 48px);
-  background: var(--bg);
+#file-viewer.panel-fullscreen .file-viewer-breadcrumbs { padding-left: clamp(18px, 3vw, 48px); padding-right: clamp(18px, 3vw, 48px); }
+
+@media (hover: none) {
+  .file-viewer-tab-close { opacity: 1; }
 }
 
 #file-viewer.panel-fullscreen .file-viewer-body {
@@ -1652,6 +1694,28 @@
   border: 1px solid var(--border-subtle);
 }
 
+.file-viewer-svg-preview {
+  display: grid;
+  place-items: center;
+  min-height: 100%;
+  padding: clamp(24px, 5vw, 56px);
+  background-color: var(--bg);
+  background-image:
+    linear-gradient(45deg, var(--bg-alt) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--bg-alt) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--bg-alt) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--bg-alt) 75%);
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+  background-size: 20px 20px;
+}
+
+.file-viewer-svg-preview img {
+  display: block;
+  max-width: 100%;
+  max-height: calc(100dvh - 150px);
+  filter: drop-shadow(0 8px 24px rgba(var(--shadow-rgb), 0.18));
+}
+
 /* --- Web Terminal --- */
 
 /* Terminal header with tabs */

package/lib/public/index.html

@@ -680,22 +680,28 @@
 
   <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>
-        <span class="file-viewer-live-label">Editing</span>
-      </span>
-      <button class="file-viewer-btn hidden" id="file-viewer-render" title="Toggle rendered view"><i data-lucide="book-open"></i></button>
-      <button class="file-viewer-btn hidden" id="file-viewer-pdf" title="Export PDF"><i data-lucide="file-down"></i></button>
-      <button class="file-viewer-btn hidden" id="file-viewer-slides" title="Present as slides" aria-label="Present Markdown as slides" aria-pressed="false"><i data-lucide="presentation"></i></button>
-      <button class="file-viewer-btn file-viewer-slide-level hidden" id="file-viewer-slide-level" title="Split slides by heading level" aria-haspopup="menu" aria-expanded="false"><span>H1</span><i data-lucide="chevron-down"></i></button>
-      <button class="file-viewer-btn hidden" id="file-viewer-history" title="Edit history"><i data-lucide="clock"></i></button>
-      <button class="file-viewer-btn" id="file-viewer-refresh" title="Refresh"><i data-lucide="refresh-cw"></i></button>
-      <button class="file-viewer-btn" id="file-viewer-copy" title="Copy contents" aria-label="Copy contents"><i data-lucide="copy"></i></button>
-      <button class="file-viewer-btn hidden" id="file-viewer-copy-formatted" title="Copy Markdown formatting" aria-label="Copy Markdown formatting"><i data-lucide="clipboard-copy"></i></button>
-      <button class="file-viewer-btn" id="file-viewer-fullscreen" title="Toggle fullscreen"><i data-lucide="maximize-2"></i></button>
-      <button class="file-viewer-btn" id="file-viewer-close" title="Close"><i data-lucide="x"></i></button>
+      <div class="file-viewer-tabbar">
+        <div class="file-viewer-tabs" id="file-viewer-tabs" role="tablist"></div>
+        <div class="file-viewer-toolbar" aria-label="Editor actions">
+          <button class="file-viewer-btn hidden" id="file-viewer-render" title="Toggle rendered view"><i data-lucide="book-open"></i></button>
+          <button class="file-viewer-btn hidden" id="file-viewer-pdf" title="Export PDF"><i data-lucide="file-down"></i></button>
+          <button class="file-viewer-btn hidden" id="file-viewer-slides" title="Present as slides" aria-label="Present Markdown as slides" aria-pressed="false"><i data-lucide="presentation"></i></button>
+          <button class="file-viewer-btn file-viewer-slide-level hidden" id="file-viewer-slide-level" title="Split slides by heading level" aria-haspopup="menu" aria-expanded="false"><span>H1</span><i data-lucide="chevron-down"></i></button>
+          <button class="file-viewer-btn hidden" id="file-viewer-history" title="Edit history"><i data-lucide="clock"></i></button>
+          <button class="file-viewer-btn" id="file-viewer-refresh" title="Refresh"><i data-lucide="refresh-cw"></i></button>
+          <button class="file-viewer-btn" id="file-viewer-copy" title="Copy contents" aria-label="Copy contents"><i data-lucide="copy"></i></button>
+          <button class="file-viewer-btn hidden" id="file-viewer-copy-formatted" title="Copy Markdown formatting" aria-label="Copy Markdown formatting"><i data-lucide="clipboard-copy"></i></button>
+          <button class="file-viewer-btn" id="file-viewer-fullscreen" title="Toggle fullscreen"><i data-lucide="maximize-2"></i></button>
+          <button class="file-viewer-btn" id="file-viewer-close" title="Close"><i data-lucide="x"></i></button>
+        </div>
+      </div>
+      <div class="file-viewer-breadcrumbs">
+        <div class="file-viewer-path" id="file-viewer-path" aria-label="Current file path"></div>
+        <span class="file-viewer-live-status hidden" id="file-viewer-live-status" aria-live="polite">
+          <span class="file-viewer-live-dot"></span>
+          <span class="file-viewer-live-label">Editing</span>
+        </span>
+      </div>
     </div>
     <div class="file-viewer-body" id="file-viewer-body"></div>
   </div>

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

@@ -1,5 +1,8 @@
+import { getFileIconSvg } from './fileicons.js';
+
 var tabs = new Map();
 var focusedPath = null;
+var previewPath = null;
 var onFocus = null;
 var onEmpty = null;
 
@@ -15,14 +18,23 @@ function render() {
   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.className = "file-viewer-tab" + (path === focusedPath ? " active" : "") + (path === previewPath ? " preview" : "");
+    tab.setAttribute("role", "tab");
+    tab.setAttribute("aria-selected", path === focusedPath ? "true" : "false");
     tab.title = path;
     tab.addEventListener("click", function() { focusFileViewerTab(path); });
+    var icon = document.createElement("span");
+    icon.className = "file-viewer-tab-icon";
+    icon.innerHTML = getFileIconSvg(label(path));
+    var name = document.createElement("span");
+    name.className = "file-viewer-tab-label";
+    name.textContent = label(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(icon);
+    tab.appendChild(name);
     tab.appendChild(close);
     root.appendChild(tab);
   });
@@ -37,11 +49,37 @@ export function openFileViewerTab(path, data) {
   if (!path) return false;
   var exists = tabs.has(path);
   tabs.set(path, Object.assign(tabs.get(path) || {}, data || {}));
+  if (path === previewPath) previewPath = null;
+  focusedPath = path;
+  render();
+  return !exists;
+}
+
+export function previewFileViewerTab(path, data) {
+  if (!path) return false;
+  if (tabs.has(path) && path !== previewPath) {
+    focusedPath = path;
+    render();
+    return false;
+  }
+  if (previewPath && previewPath !== path) tabs.delete(previewPath);
+  var exists = tabs.has(path);
+  tabs.set(path, Object.assign(tabs.get(path) || {}, data || {}));
+  previewPath = path;
   focusedPath = path;
   render();
   return !exists;
 }
 
+export function updateFileViewerTab(path, data) {
+  if (!path) return false;
+  if (!tabs.has(path)) return false;
+  tabs.set(path, Object.assign(tabs.get(path) || {}, data || {}));
+  if (focusedPath !== path) return false;
+  render();
+  return true;
+}
+
 export function focusFileViewerTab(path) {
   if (!tabs.has(path)) return false;
   focusedPath = path;
@@ -55,6 +93,7 @@ export function closeFileViewerTab(path) {
   var paths = Array.from(tabs.keys());
   var index = paths.indexOf(path);
   tabs.delete(path);
+  if (previewPath === path) previewPath = null;
   if (focusedPath === path) focusedPath = paths[index + 1] || paths[index - 1] || null;
   render();
   if (focusedPath && onFocus) onFocus(focusedPath, tabs.get(focusedPath));
@@ -62,4 +101,4 @@ export function closeFileViewerTab(path) {
 }
 
 export function focusedFileViewerTab() { return focusedPath; }
-export function clearFileViewerTabs() { tabs.clear(); focusedPath = null; render(); }
+export function clearFileViewerTabs() { tabs.clear(); focusedPath = null; previewPath = null; render(); }

package/lib/public/modules/filebrowser.js

@@ -9,7 +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';
+import { initFileViewerTabs, openFileViewerTab, previewFileViewerTab, updateFileViewerTab, closeFileViewerTab, focusedFileViewerTab, clearFileViewerTabs } from './filebrowser-tabs.js';
 
 var ctx;
 var showDropHint = function () {};
@@ -18,6 +18,7 @@ var currentContent = null;  // last read file content for copy
 var currentFilePath = null;  // path of the currently viewed file
 var isRendered = false;      // markdown render toggle state
 var currentIsMarkdown = false;
+var currentIsSvg = false;
 var historyVisible = false;
 var currentHistoryEntries = [];
 var pendingNavigate = null;  // { sessionLocalId, assistantUuid }
@@ -181,8 +182,12 @@ export function initFileBrowser(_ctx) {
 
   // Markdown render toggle
   document.getElementById("file-viewer-render").addEventListener("click", function () {
-    if (!currentContent || !currentIsMarkdown) return;
+    if (!currentContent || (!currentIsMarkdown && !currentIsSvg)) return;
     isRendered = !isRendered;
+    if (currentIsSvg) {
+      renderSvgBody();
+      return;
+    }
     if (!isRendered && isFollowingMarkdown(currentFilePath)) cancelMarkdownFollow();
     renderBody();
   });
@@ -377,7 +382,11 @@ function kbCollapseOrAscend() {
 }
 
 function kbActivate() {
-  if (_kbFocused) _kbFocused.click();
+  if (!_kbFocused) return;
+  if (!isDirRow(_kbFocused) && _kbFocused.dataset.path) {
+    openFileViewerTab(_kbFocused.dataset.path);
+  }
+  _kbFocused.click();
 }
 
 function handleTreeKeyDown(e) {
@@ -500,6 +509,7 @@ export function resetFileBrowser() {
   currentFilePath = null;
   isRendered = false;
   currentIsMarkdown = false;
+  currentIsSvg = false;
   historyVisible = false;
   currentHistoryEntries = [];
   pendingNavigate = null;
@@ -541,6 +551,7 @@ export function openFile(filePath, opts) {
 
 export function openWorkingTreeDiff(diff) {
   if (!diff || !diff.path) return;
+  openFileViewerTab(diff.path);
   pendingRenderedOpen = false;
   pendingOpenMode = diff.binary ? null : {
     type: "diff",
@@ -801,9 +812,14 @@ function renderFilteredTree(container, tree, depth, query) {
           var prev = ctx.fileTreeEl.querySelector(".file-tree-item.active");
           if (prev) prev.classList.remove("active");
           rowEl.classList.add("active");
+          previewFileViewerTab(filePath);
           requestFileContent(filePath);
           if (window.innerWidth <= 768) closeSidebar();
         });
+        rowEl.addEventListener("dblclick", function (e) {
+          e.stopPropagation();
+          openFileViewerTab(filePath);
+        });
       })(entry.path, row);
 
       container.appendChild(row);
@@ -1033,12 +1049,17 @@ function renderEntries(container, entries, depth) {
           var prev = ctx.fileTreeEl.querySelector(".file-tree-item.active");
           if (prev) prev.classList.remove("active");
           rowEl.classList.add("active");
+          previewFileViewerTab(filePath);
           requestFileContent(filePath);
           // Mobile: close sidebar
           if (window.innerWidth <= 768) {
             closeSidebar();
           }
         });
+        rowEl.addEventListener("dblclick", function (e) {
+          e.stopPropagation();
+          openFileViewerTab(filePath);
+        });
       })(entry.path, row);
 
       container.appendChild(row);
@@ -1050,7 +1071,7 @@ function renderEntries(container, entries, depth) {
 // --- File viewer ---
 
 function showFileContent(msg) {
-  openFileViewerTab(msg.path, { content: msg.content });
+  if (!updateFileViewerTab(msg.path, { content: msg.content })) return;
   var pathEl = document.getElementById("file-viewer-path");
   var bodyEl = document.getElementById("file-viewer-body");
   var renderBtn = document.getElementById("file-viewer-render");
@@ -1064,13 +1085,14 @@ function showFileContent(msg) {
 
   exitMarkdownSlides();
 
-  pathEl.textContent = msg.path;
+  renderFileBreadcrumb(pathEl, msg.path);
   var keepRenderState = pendingRefresh && msg.path === currentFilePath;
   var prevRendered = isRendered;
   pendingRefresh = false;
   currentContent = null;
   currentFilePath = msg.path;
   currentIsMarkdown = false;
+  currentIsSvg = false;
   if (!keepRenderState) isRendered = false;
   var requestedExt = msg.path.split(".").pop().toLowerCase();
   if (pendingRenderedOpen && (requestedExt === "md" || requestedExt === "mdx")) {
@@ -1095,23 +1117,27 @@ function showFileContent(msg) {
     currentContent = msg.content;
     var ext = requestedExt;
     currentIsMarkdown = (ext === "md" || ext === "mdx");
+    currentIsSvg = ext === "svg";
     if (pendingRenderedOpen && currentIsMarkdown) isRendered = true;
 
-    if (currentIsMarkdown) {
+    if (currentIsMarkdown || currentIsSvg) {
       renderBtn.classList.remove("hidden");
-      renderBtn.title = "Render markdown";
-      copyBtn.title = "Copy Markdown source";
+      renderBtn.title = currentIsSvg ? "Show SVG source" : "Render markdown";
+      copyBtn.title = currentIsSvg ? "Copy SVG source" : "Copy Markdown source";
     } else {
       copyBtn.title = "Copy contents";
     }
 
-    // Show raw by default, use renderBody for markdown toggle
+    // Markdown starts as source; SVG starts as a safe image preview.
     if (currentIsMarkdown) {
       var transitionFrom = keepRenderState && prevRendered && previousWasMarkdown &&
         isFollowingMarkdown(msg.path) && pathsReferToSameFile(previousPath, msg.path)
         ? (previousContent == null ? "" : previousContent)
         : null;
       renderBody(transitionFrom, refreshSlideIndex);
+    } else if (currentIsSvg) {
+      if (!keepRenderState) isRendered = true;
+      renderSvgBody();
     } else {
       renderCodeWithLineNumbers(bodyEl, msg.content, ext);
     }
@@ -1158,6 +1184,47 @@ function showFileContent(msg) {
   }
 }
 
+function renderSvgBody() {
+  var bodyEl = document.getElementById("file-viewer-body");
+  var renderBtn = document.getElementById("file-viewer-render");
+  if (!bodyEl || !currentFilePath || currentContent == null) return;
+  if (!isRendered) {
+    renderCodeWithLineNumbers(bodyEl, currentContent, "svg");
+    renderBtn.classList.remove("active");
+    renderBtn.title = "Show SVG preview";
+    return;
+  }
+  bodyEl.innerHTML = "";
+  var preview = document.createElement("div");
+  preview.className = "file-viewer-svg-preview";
+  var image = document.createElement("img");
+  image.src = "api/file?path=" + encodeURIComponent(currentFilePath);
+  image.alt = currentFilePath;
+  image.draggable = false;
+  preview.appendChild(image);
+  bodyEl.appendChild(preview);
+  renderBtn.classList.add("active");
+  renderBtn.title = "Show SVG source";
+}
+
+function renderFileBreadcrumb(root, path) {
+  root.innerHTML = "";
+  root.title = path;
+  var parts = String(path || "").replace(/\\/g, "/").split("/").filter(function(part) { return part; });
+  for (var i = 0; i < parts.length; i++) {
+    if (i > 0) {
+      var separator = document.createElement("span");
+      separator.className = "file-viewer-path-separator";
+      separator.textContent = "›";
+      root.appendChild(separator);
+    }
+    var segment = document.createElement("span");
+    segment.className = "file-viewer-path-segment" + (i === parts.length - 1 ? " current" : "");
+    segment.textContent = parts[i];
+    root.appendChild(segment);
+  }
+}
+
 function pathsReferToSameFile(left, right) {
   if (!left || !right) return false;
   var a = String(left).replace(/\\/g, "/");
@@ -1454,6 +1521,8 @@ function rerenderFileContent() {
 
   if (currentIsMarkdown) {
     renderBody();
+  } else if (currentIsSvg) {
+    renderSvgBody();
   } else {
     renderCodeWithLineNumbers(bodyEl, currentContent, ext);
   }

package/package.json

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