clay-server 5.5.0-beta.3 → 5.5.0-beta.5

package/lib/github-connection-store.js

@@ -0,0 +1,39 @@
+// Metadata only. GitHub CLI owns credentials; Clay Studio never reads its stores.
+var fs = require('fs'), path = require('path'), crypto = require('crypto');
+function attach(root) {
+  var directory = path.join(root, 'github-connections');
+  function file(owner) {
+    if (typeof owner !== 'string' || !/^[a-zA-Z0-9_-]{1,128}$/.test(owner)) throw new Error('Invalid connection owner.');
+    return path.join(directory, owner + '.json');
+  }
+  function read(owner) {
+    try { return JSON.parse(fs.readFileSync(file(owner), 'utf8')); }
+    catch (error) { if (error.code === 'ENOENT') return { revision: null, connection: null }; throw new Error('Could not read GitHub connection.'); }
+  }
+  function reserve(key) {
+    fs.mkdirSync(directory, { recursive: true, mode: 0o700 });
+    var target = path.join(directory, 'runtime-' + crypto.createHash('sha256').update(key).digest('hex') + '.lock');
+    var fd;
+    try { fd = fs.openSync(target, 'wx', 0o600); fs.writeFileSync(fd, JSON.stringify({ startedAt: Date.now(), pid: process.pid })); }
+    catch (error) { throw new Error('A GitHub login is already running or its outcome needs operator inspection. No login was retried.'); }
+    finally { if (fd !== undefined) fs.closeSync(fd); }
+    return function () { fs.unlinkSync(target); };
+  }
+  function save(owner, revision, connection) {
+    fs.mkdirSync(directory, { recursive: true, mode: 0o700 });
+    var target = file(owner), fd, temp;
+    try {
+      fd = fs.openSync(target + '.lock', 'wx', 0o600);
+      if (read(owner).revision !== revision) throw new Error('GitHub connection changed. Refresh before confirming again.');
+      var next = { revision: crypto.randomUUID(), connection: connection };
+      temp = target + '.' + crypto.randomUUID() + '.tmp';
+      fs.writeFileSync(temp, JSON.stringify(next), { mode: 0o600 }); fs.renameSync(temp, target);
+      return next;
+    } finally {
+      if (temp && fs.existsSync(temp)) fs.unlinkSync(temp);
+      if (fd !== undefined) { fs.closeSync(fd); fs.unlinkSync(target + '.lock'); }
+    }
+  }
+  return { read: read, save: save, reserve: reserve };
+}
+module.exports = { attach: attach };

package/lib/github-runtime.js

@@ -0,0 +1,43 @@
+// Shared GitHub credential context for Personal settings and session work.
+var crypto = require('crypto');
+function environment(identity) {
+  var env = Object.assign({}, identity ? require('./build-user-env').buildUserEnv(identity) : process.env, { GH_PROMPT_DISABLED: '1', GH_HOST: 'github.com' });
+  if (identity) {
+    ['GH_TOKEN', 'GITHUB_TOKEN', 'GH_ENTERPRISE_TOKEN', 'GITHUB_ENTERPRISE_TOKEN', 'GH_CONFIG_DIR', 'XDG_CONFIG_HOME'].forEach(function (key) { delete env[key]; });
+    env.HOME = identity.home; env.USER = identity.user; env.LOGNAME = identity.user;
+  }
+  return env;
+}
+function binding(identity) {
+  var env = environment(identity);
+  return crypto.createHash('sha256').update(JSON.stringify([identity || null, env.HOME, env.PATH, env.GH_CONFIG_DIR, env.XDG_CONFIG_HOME, env.GH_TOKEN, env.GITHUB_TOKEN])).digest('hex');
+}
+function overridden(identity) { var env = environment(identity); return !!(env.GH_TOKEN || env.GITHUB_TOKEN); }
+function run(identity, args) {
+  return new Promise(function (resolve, reject) {
+    var opts = { cwd: environment(identity).HOME, env: environment(identity), timeout: 15000, maxBuffer: 16384, encoding: 'utf8' };
+    if (identity) { opts.uid = identity.uid; opts.gid = identity.gid; }
+    var wrapped = require('./os-users').wrapSpawnAsUser('gh', args, opts);
+    var child = require('child_process').execFile(wrapped.command, wrapped.args, wrapped.options, function (error, stdout) {
+      if (!error) return resolve(stdout);
+      var failure = new Error('GitHub verification is unavailable.');
+      failure.kind = error.code === 'ENOENT' || error.code === 127 && args[0] === '--version' ? 'missing' : error.code === 4 ? 'unauthenticated' : 'unknown';
+      try { if (Number(JSON.parse(stdout).status) === 401) failure.kind = 'unauthenticated'; } catch (ignored) {}
+      reject(failure);
+    });
+    child.stdin.on('error', function () {}); child.stdin.end();
+  });
+}
+async function inspect(identity, execute) {
+  execute = execute || run;
+  var result = { status: 'unknown', overridden: overridden(identity), checkedAt: Date.now(), account: null };
+  try { await execute(identity, ['--version']); }
+  catch (error) { result.status = error.kind === 'missing' ? 'missing' : 'unknown'; return result; }
+  try {
+    var data = JSON.parse(await execute(identity, ['api', '--hostname', 'github.com', 'user', '--jq', '{id: .id, login: .login}']));
+    if (!data || !Number.isSafeInteger(data.id) || data.id <= 0 || typeof data.login !== 'string' || !/^[a-zA-Z0-9][a-zA-Z0-9-]{0,38}$/.test(data.login)) throw new Error('Invalid identity.');
+    result.account = { id: data.id, login: data.login, host: 'github.com' }; result.status = 'authenticated';
+  } catch (error) { result.status = error.kind === 'unauthenticated' ? 'unauthenticated' : 'unknown'; }
+  result.checkedAt = Date.now(); return result;
+}
+module.exports = { environment: environment, binding: binding, overridden: overridden, inspect: inspect };

package/lib/project-github-connection.js

@@ -0,0 +1,164 @@
+// Human-only Personal Integrations flow, bound to live account and runtime identity.
+var crypto = require('crypto'), os = require('os');
+var runtime = require('./github-runtime');
+var LOGIN_ARGS = ['auth', 'login', '--hostname', 'github.com', '--web', '--git-protocol', 'https', '--skip-ssh-key'];
+function attach(ctx) {
+  var drafts = new Map(), flows = new Map(), watched = new WeakSet();
+  function actor(ws) {
+    if (ws && ws._clayAuthCheck && !ws._clayAuthCheck()) throw new Error('Sign in again to manage GitHub.');
+    if (!ws || ws.readyState !== 1 || !ctx.clients.has(ws) || ws._clayPane || ws._clayPaneActivation || !ctx.requestAccess.canAccessProject(ws, ctx.slug)) throw new Error('Reopen Personal settings in your connected workspace.');
+    var user = ws._clayUser && ctx.usersModule.findUserById(ws._clayUser.id);
+    if (ctx.usersModule.isMultiUser() && !user || ws._clayUser && !user) throw new Error('This account is no longer available.');
+    if (!ctx.requestAccess.hasPermission(ws, 'terminal')) throw new Error('Terminal permission is required to inspect or connect GitHub.');
+    var identity = ctx.osUsers ? user && user.linuxUser && ctx.resolveOsUserInfo(user.linuxUser) : null;
+    if (ctx.osUsers && (!identity || !identity.user || !identity.home || !Number.isInteger(identity.uid) || !Number.isInteger(identity.gid))) throw new Error('Your mapped OS account is unavailable.');
+    var info = os.userInfo(), env = runtime.environment(identity);
+    return { owner: user ? String(user.id) : 'default', user: user ? JSON.stringify(user) : null, identity: identity,
+      shared: !identity, canLogin: !!identity || !user || user.role === 'admin',
+      runtime: identity || { user: info.username, uid: info.uid, gid: info.gid, home: env.HOME }, binding: runtime.binding(identity) };
+  }
+  function valid(ws, item) {
+    if (!item) return false;
+    try { return drafts.get(ws) === item && JSON.stringify(actor(ws)) === item.signature && (!item.expires || Date.now() < item.expires); } catch (error) { return false; }
+  }
+  function send(ws, request, value) {
+    if (ws.readyState === 1) ctx.sendTo(ws, Object.assign({type:'personal_github', requestId:request.requestId, contextId:request.contextId}, value));
+  }
+  function requireCurrent(ws, item) { if (!valid(ws, item)) throw new Error('GitHub account context changed. Refresh before continuing.'); }
+  function snapshot(item, state, extra) {
+    return Object.assign({state:state, saved:ctx.storage.read(item.actor.owner), observed:item.observed || null,
+      runtime:Object.assign({shared:item.actor.shared},item.actor.runtime), canLogin:item.actor.canLogin && !(item.observed && item.observed.overridden), reviewId:item.reviewId},extra || {});
+  }
+  function releaseLock(item) { if (item.unlock) { item.unlock(); item.unlock = null; } }
+  async function stop(ws, item) {
+    if (item.stopping) return;
+    item.stopping = true; item.reviewId = null;
+    send(ws,item.request,{state:'stopping',message:'Waiting for the GitHub login terminal to exit…'});
+    clearInterval(item.timer);
+    try {
+      if (!item.terminal) throw new Error('Launch outcome is unknown.');
+      await ctx.tm.closeAndWait(item.terminal.id,{identity:item.terminal.identity,revalidate:function () {
+        if (flows.get(ws) !== item) throw new Error('The login terminal changed.');
+      }});
+      flows.delete(ws); releaseLock(item); drafts.delete(ws);
+      send(ws,item.request,{state:'stopped',message:'Login terminal exited. GitHub CLI credentials may have changed; refresh before another explicit attempt. Your saved Clay Studio connection was retained.'});
+    } catch (error) {
+      send(ws,item.request,{state:'unknown',message:'Terminal shutdown could not be confirmed. Ask the server operator to inspect this login before retrying. No attempt will replay automatically.'});
+    }
+  }
+  function release(ws) {
+    var flow = flows.get(ws);
+    if (flow) { drafts.delete(ws); stop(ws,flow); }
+    else drafts.delete(ws);
+  }
+  function sameAccount(left,right) { return !!left && !!right && left.id === right.id && left.login === right.login && left.host === right.host; }
+  async function inspect(ws,item) {
+    var observed = await runtime.inspect(item.actor.identity,ctx.execute);
+    requireCurrent(ws,item); item.observed = observed;
+    item.reviewId = crypto.randomUUID(); item.expires = Date.now()+120000;
+    item.saved = ctx.storage.read(item.actor.owner);
+    send(ws,item.request,snapshot(item,'ready'));
+  }
+  async function run(ws,msg) {
+    if (msg.type === 'personal_github_release' || msg.type === 'personal_github_stop') {
+      var active = drafts.get(ws) || flows.get(ws);
+      if (active && active.request.contextId === msg.contextId) release(ws);
+      return;
+    }
+    if (msg.type === 'personal_github_get') {
+      if (flows.has(ws)) throw new Error('Finish or stop the current GitHub login before refreshing.');
+      var target = actor(ws);
+      var item = {actor:target,signature:JSON.stringify(target),request:msg,saved:ctx.storage.read(target.owner)};
+      drafts.set(ws,item);
+      if (!watched.has(ws)) { watched.add(ws); ws.once('close',function () { watched.delete(ws); release(ws); }); }
+      // Publish the saved record independently of a possibly unavailable network check.
+      send(ws,msg,snapshot(item,'checking'));
+      await inspect(ws,item); return;
+    }
+    var item = drafts.get(ws);
+    requireCurrent(ws,item);
+    if (!item.reviewId || item.reviewId !== msg.reviewId || item.busy) throw new Error('This GitHub review expired or was already used. Refresh status.');
+    if (item.request.contextId !== msg.contextId) throw new Error('GitHub context changed.');
+    item.request = msg;
+    item.busy = true;
+    try {
+      if (msg.type === 'personal_github_disconnect') {
+        if (!item.saved.connection) throw new Error('There is no saved GitHub connection.');
+        requireCurrent(ws,item);
+        var removed = ctx.storage.save(item.actor.owner,item.saved.revision,null);
+        item.saved = removed; item.reviewId = null;
+        send(ws,msg,snapshot(item,'saved',{message:'Clay Studio association removed. GitHub CLI credentials and existing CLI-backed tools are retained.'})); return;
+      }
+      if (msg.type !== 'personal_github_connect' && msg.type !== 'personal_github_login') throw new Error('Unsupported GitHub connection operation.');
+      var fresh = await runtime.inspect(item.actor.identity,ctx.execute);
+      requireCurrent(ws,item);
+      if (ctx.storage.read(item.actor.owner).revision !== item.saved.revision) throw new Error('Saved connection changed. Refresh before confirming again.');
+      if (fresh.status !== item.observed.status || fresh.overridden !== item.observed.overridden || fresh.status === 'authenticated' && !sameAccount(fresh.account,item.observed.account)) throw new Error('The GitHub CLI account changed. Refresh and confirm the exact account again.');
+      if (msg.type === 'personal_github_connect') {
+        if (fresh.status !== 'authenticated') throw new Error('Verify an authenticated GitHub account before connecting.');
+        requireCurrent(ws,item);
+        var saved = ctx.storage.save(item.actor.owner,item.saved.revision,{account:fresh.account,runtime:item.actor.runtime,shared:item.actor.shared,checkedAt:fresh.checkedAt,connectedAt:Date.now()});
+        item.saved = saved; item.observed = fresh; item.reviewId = null;
+        send(ws,msg,snapshot(item,'saved',{message:'GitHub association saved for the verified CLI account.'})); return;
+      }
+      if (!item.actor.canLogin || fresh.overridden) throw new Error('Browser login cannot replace environment credentials. Only an administrator may replace shared runtime credentials.');
+      if (fresh.status !== 'authenticated' && fresh.status !== 'unauthenticated') throw new Error('Authentication is unknown. Resolve the CLI installation or network problem before starting login.');
+      item.reviewId = null;
+      item.unlock = ctx.storage.reserve(JSON.stringify([item.actor.runtime.uid,item.actor.runtime.gid,item.actor.runtime.home]));
+      item.attachKey = crypto.randomUUID(); item.expires = null; flows.set(ws,item);
+      try {
+        item.terminal = ctx.tm.create(100,24,item.actor.identity,ws,{kind:'github-login',title:'GitHub sign in',githubLogin:true,
+          revalidateGithub:function () { requireCurrent(ws,item); },
+          onExit:function (terminal) {
+            if (item.stopping) return;
+            clearInterval(item.timer);
+            // Defer until create() has assigned the exact terminal identity.
+            Promise.resolve().then(async function () {
+              if (flows.get(ws) !== item) return;
+              try {
+                await ctx.tm.closeAndWait(terminal.id,{identity:terminal.identity,revalidate:function () { if (flows.get(ws) !== item) throw new Error('Login changed.'); }});
+                flows.delete(ws); releaseLock(item);
+                requireCurrent(ws,item);
+                send(ws,item.request,{state:'verifying',message:'Login terminal exited. Checking the actual GitHub API identity…'});
+                await inspect(ws,item);
+              } catch (error) { send(ws,item.request,{state:'unknown',message:'Login ended, but verification or cleanup could not be confirmed. Refresh status before explicitly continuing.'}); }
+            });
+          }});
+        if (!item.terminal) { flows.delete(ws); releaseLock(item); throw new Error('The GitHub login terminal is unavailable.'); }
+        item.timer = setInterval(function () { if (!valid(ws,item)) stop(ws,item); },250); item.timer.unref();
+        send(ws,item.request,snapshot(item,'started',{terminalId:item.terminal.id,attachKey:item.attachKey,slug:ctx.slug,message:'Use the code and github.com device page shown in the terminal. You may approve on another device. Stop waits for terminal exit; it cannot undo credentials already saved by gh.'}));
+      } catch (error) {
+        if (flows.has(ws)) send(ws,item.request,{state:'unknown',message:'Login launch outcome is uncertain. Ask the server operator to inspect it before retrying.'});
+        else throw error;
+      }
+    } finally { item.busy = false; }
+  }
+  function terminalMessage(ws,msg) {
+    var terminal = msg.id && ctx.tm.inspect(msg.id);
+    if (!/^term_/.test(msg.type || '')) return false;
+    if (!terminal || terminal.kind !== 'github-login') return !!msg.githubAttachKey;
+    var item, owner;
+    flows.forEach(function (flow,peer) { if (flow.terminal && flow.terminal.id === msg.id && flow.terminal.identity === terminal.identity) { item = flow; owner = peer; } });
+    try {
+      if (!item || item.stopping) return true;
+      requireCurrent(owner,item);
+      if (JSON.stringify(actor(ws)) !== item.signature || msg.githubAttachKey !== item.attachKey) return true;
+      if (msg.type === 'term_attach') {
+        if (item.peer && item.peer !== ws) return true;
+        if (!item.peer) ws.once('close',function () { if (flows.get(owner) === item) stop(owner,item); });
+        item.peer = ws; ctx.tm.attach(msg.id,ws);
+      } else if (item.peer === ws && msg.type === 'term_input') {
+        if (typeof msg.data === 'string' && /^[ynYN\r\n\x03\x1b\[AB]*$/.test(msg.data) && msg.data.length <= 16) ctx.tm.writeGithub(msg.id,msg.data,terminal.identity);
+      } else if (item.peer === ws && msg.type === 'term_resize' && Number.isInteger(msg.cols) && Number.isInteger(msg.rows) && msg.cols >= 20 && msg.cols <= 240 && msg.rows >= 5 && msg.rows <= 100) {
+        ctx.tm.resizeExact(msg.id,msg.cols,msg.rows,terminal.identity,function () { requireCurrent(owner,item); });
+      } else if (item.peer === ws && (msg.type === 'term_close' || msg.type === 'term_detach')) stop(owner,item);
+    } catch (error) { if (item) stop(owner,item); }
+    return true;
+  }
+  return {handle:function (ws,msg) {
+    if (terminalMessage(ws,msg)) return true;
+    if (!/^personal_github_/.test(msg.type || '')) return false;
+    run(ws,msg).catch(function (error) { send(ws,msg,{state:'error',message:error.message}); }); return true;
+  }, destroy:function () { flows.forEach(function (item,ws) { release(ws); }); drafts.clear(); }};
+}
+module.exports = { attach: attach, LOGIN_ARGS: LOGIN_ARGS };

package/lib/project.js

@@ -2040,6 +2040,7 @@ function createProjectContext(opts) {
 
     // --- Vendor login flow (delegated to project-vendor-login.js) ---
     if (_sharedBrowser.handleMessage(ws, msg)) return;
+    if (_githubConnection.handle(ws, msg)) return;
     if (_vendorLogin.handleVendorLoginMessage(ws, msg)) return;
 
     // --- Notes, terminals, context, user message (delegated to project-user-message.js) ---
@@ -2458,6 +2459,12 @@ function createProjectContext(opts) {
     getOsUserInfoForWs: getOsUserInfoForWs,
   });
 
+  var _githubConnection = require('./project-github-connection').attach({
+    storage: opts.githubConnectionStorage, clients: clients, requestAccess: _requestAccess,
+    slug: slug, osUsers: osUsers, usersModule: usersModule, resolveOsUserInfo: resolveOsUserInfo,
+    tm: tm, sendTo: sendTo,
+  });
+
   // --- Vendor login flow (delegated to project-vendor-login.js) ---
   var _vendorLogin = attachVendorLogin({
     workerAuth: _workerAuth,
@@ -2880,6 +2887,7 @@ function createProjectContext(opts) {
   function destroy() {
     _mcp.destroy();
     _sharedBrowser.destroy();
+    _githubConnection.destroy();
     _vendorLogin.destroy();
     if (_scheduledMessages) _scheduledMessages.shutdown();
     if (_autonomousRun) _autonomousRun.shutdown();

package/lib/public/appearance-bootstrap.js

@@ -5,6 +5,12 @@
   var light = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
   var seed = window.__clayAppearanceSeed;
 
+  var color = globalThis.ClayWorkspaceBackgrounds.getColor(seed && seed.backgroundColor, seed && seed.customBackgroundColors);
+  root.dataset.workspaceColor = color.id;
+  root.style.setProperty('--workspace-solid-light', color.light);
+  root.style.setProperty('--workspace-solid-dark', color.dark);
+  root.dataset.workspaceBackground = seed && seed.background === "workshop" ? "workshop" : "plain";
+
   function applyMode(mode) {
     if (mode !== "light" && mode !== "dark") return;
     root.classList.toggle("light-theme", mode === "light");

package/lib/public/css/chrome-material.css

@@ -0,0 +1,133 @@
+/* One translucent material for navigation and pane chrome. Keep the filter on
+   a backing layer so fixed-position controls retain their original viewport. */
+:root {
+  --chrome-material-blur: 14px;
+  --chrome-material-saturation: 1.08;
+  --chrome-material-tint: 74%;
+  --topbar-material-tint: 88%;
+}
+
+:is(#top-bar, :where(#navigation-island) > #icon-strip, #sidebar-column, #mate-sidebar-column, .title-bar-content,
+    .split-pane-header, .tool-pane-header, .terminal-header,
+    .file-viewer-tabbar, .shared-browser-header, .dm-header-bar, #contextual-clay > header) {
+  --chrome-material-solid: var(--bg-alt);
+  --chrome-material-fill: var(--chrome-material-solid);
+  --chrome-material-filter: none;
+}
+
+:is(#top-bar, #sidebar-column, #mate-sidebar-column, .title-bar-content,
+    .split-pane-header, .tool-pane-header, .terminal-header,
+    .file-viewer-tabbar, .shared-browser-header, .dm-header-bar, #contextual-clay > header) {
+  position: relative;
+  isolation: isolate;
+  background: transparent;
+}
+
+:is(#sidebar-column, #mate-sidebar-column) {
+  --chrome-material-solid: var(--sidebar-bg);
+}
+
+/* Keep the global menu quieter and denser than the navigation/pane glass. */
+#top-bar {
+  --chrome-material-solid: var(--sidebar-bg);
+  --chrome-material-tint: var(--topbar-material-tint);
+  /* Preserve the toolbar popover layer above chat and below contextual Clay. */
+  z-index: 150;
+}
+
+body.mate-workspace-active :is(#sidebar-column, .title-bar-content) {
+  --chrome-material-solid: var(--clay-surround);
+  background: transparent;
+}
+
+:is(#top-bar, #sidebar-column, #mate-sidebar-column, .title-bar-content,
+    .split-pane-header, .tool-pane-header, .terminal-header,
+    .file-viewer-tabbar, .shared-browser-header, .dm-header-bar, #contextual-clay > header)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--chrome-material-fill);
+  -webkit-backdrop-filter: var(--chrome-material-filter);
+  backdrop-filter: var(--chrome-material-filter);
+  pointer-events: none;
+}
+
+/* The sidebar's own material continues behind its title and navigation. */
+:is(#sidebar-column, #mate-sidebar-column) > .title-bar-sidebar {
+  background: transparent;
+}
+
+/* Let the one sidebar backing continue through the sticky toolbar. Scrolling
+   session paint is clipped below it instead of adding a second tinted face. */
+@supports (clip-path: inset(0px)) {
+  #sidebar-column .session-list-sticky-top { background: transparent; }
+  #sidebar-column #session-list > :not(.session-list-sticky-top) {
+    clip-path: inset(var(--session-list-clip-top, 0px) 0 0);
+  }
+}
+
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, black 74%, transparent)) {
+  :is(#top-bar, :where(#navigation-island) > #icon-strip, #sidebar-column, #mate-sidebar-column, .title-bar-content,
+      .split-pane-header, .tool-pane-header, .terminal-header,
+      .file-viewer-tabbar, .shared-browser-header, .dm-header-bar, #contextual-clay > header) {
+    --chrome-material-fill: color-mix(in srgb, var(--chrome-material-solid) var(--chrome-material-tint), transparent);
+    --chrome-material-filter: blur(var(--chrome-material-blur)) saturate(var(--chrome-material-saturation));
+  }
+}
+
+/* The mobile drawer owns its existing fixed positioning and touch behavior. */
+@media (max-width: 768px) {
+  #sidebar {
+    --chrome-material-solid: var(--sidebar-bg);
+    --chrome-material-fill: var(--chrome-material-solid);
+    --chrome-material-filter: none;
+    isolation: isolate;
+    background: transparent;
+  }
+  #sidebar::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--chrome-material-fill);
+    -webkit-backdrop-filter: var(--chrome-material-filter);
+    backdrop-filter: var(--chrome-material-filter);
+    pointer-events: none;
+  }
+  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, black 74%, transparent)) {
+    #sidebar {
+      --chrome-material-fill: color-mix(in srgb, var(--chrome-material-solid) var(--chrome-material-tint), transparent);
+      --chrome-material-filter: blur(var(--chrome-material-blur)) saturate(var(--chrome-material-saturation));
+    }
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+  :is(#top-bar, :where(#navigation-island) > #icon-strip, #sidebar-column, #mate-sidebar-column, #sidebar, .title-bar-content,
+      .split-pane-header, .tool-pane-header, .terminal-header,
+      .file-viewer-tabbar, .shared-browser-header, .dm-header-bar, #contextual-clay > header) {
+    --chrome-material-fill: var(--chrome-material-solid);
+    --chrome-material-filter: none;
+  }
+}
+
+/* Only shared pane shells opt in. Their existing content keeps its own fills;
+   this backing also makes otherwise transparent content and gaps opaque. The
+   measured header boundary follows wrapping and safe-area changes. */
+#main-panels > .tool-pane-material {
+  /* Override the legacy per-tool and docked shell fills, never body surfaces. */
+  background: transparent !important;
+  isolation: isolate;
+}
+#main-panels > .tool-pane-material::before {
+  content: "";
+  position: absolute;
+  inset: var(--tool-pane-body-top, 0px) 0 0;
+  z-index: -1;
+  background: var(--bg);
+  pointer-events: none;
+}
+/* Browser tabs live inside the shared header, rather than its content body. */
+.tool-pane-material > .tool-pane-header > .shared-browser-tabs { background: transparent; }

package/lib/public/css/menus.css

@@ -246,23 +246,7 @@
 #shared-browser-toggle-btn:hover,
 #terminal-toggle-btn:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.04); border-color: var(--border); }
 #terminal-toggle-btn { position: relative; }
-#terminal-count {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background: var(--brand-green);
-  color: var(--brand-ink);
-  font-size: 9px;
-  font-weight: 700;
-  min-width: 14px;
-  height: 14px;
-  border-radius: 7px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 3px;
-  font-family: "Roboto Mono", monospace;
-}
+
 #terminal-count.hidden { display: none; }
 
 /* --- QR code button & overlay --- */