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

package/lib/public/modules/terminal.js

@@ -1,11 +1,14 @@
+import { recordToolExpansion } from './view-presentation-state.js';
+import { workspaceChanged } from './view-workspace-state.js';
 import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { closeSidebar } from './sidebar.js';
 import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
 import { copyToClipboard } from './utils.js';
-import { getTerminalTheme, getDockedTerminalTheme } from './theme.js';
+import { getTerminalTheme } from './theme.js';
 import { getTerminalFontFamily, getTerminalFontSize, onTerminalFontChange } from './terminal-prefs.js';
 import { createKeyToolbar } from './terminal-toolbar.js';
+import { applyTerminalSize, hasTerminalViewport } from './terminal-viewport.js';
 
 var ctx;
 var tabs = new Map(); // termId -> { id, title, exited, xterm, fitAddon, bodyEl }
@@ -145,13 +148,8 @@ export function initTerminal(_ctx) {
 
   // Fullscreen toggle
   document.getElementById("terminal-fullscreen").addEventListener("click", function () {
-    var isFs = ctx.terminalContainerEl.classList.toggle("panel-fullscreen");
-    var icon = this.querySelector("[data-lucide]");
-    if (icon) {
-      icon.setAttribute("data-lucide", isFs ? "minimize-2" : "maximize-2");
-      refreshIcons();
-    }
-    fitTerminal();
+    setTerminalExpanded(!ctx.terminalContainerEl.classList.contains('panel-fullscreen'));
+    recordToolExpansion('terminal', ctx.terminalContainerEl.classList.contains('panel-fullscreen'));
   });
 
   // Header toggle button
@@ -224,6 +222,7 @@ export function openTerminal() {
 
 // --- Close terminal panel (hide, detach, but keep PTYs alive) ---
 export function closeTerminal() {
+  recordToolExpansion('terminal', false);
   releaseRightWorkbench("terminal");
   var container = ctx.terminalContainerEl;
   container.classList.remove("panel-fullscreen");
@@ -279,7 +278,7 @@ function closeTab(termId) {
 }
 
 // --- Activate a tab (show xterm, attach) ---
-function activateTab(termId) {
+function activateTab(termId, savedBinding) {
   var tab = tabs.get(termId);
   if (!tab) return;
 
@@ -294,6 +293,10 @@ function activateTab(termId) {
   }
 
   activeTabId = termId;
+  var binding = (store.get("clayControlTerminalViews") || []).find(function (item) { return item.id === termId; });
+  if (binding) store.set({ savedViewTerminalResource: { id: binding.id, identity: binding.identity, runtimeId: binding.runtimeId } });
+  var unavailable = document.getElementById("terminal-saved-unavailable"); if (unavailable) unavailable.remove();
+  workspaceChanged();
 
   // Lazy-create xterm instance
   if (!tab.xterm) {
@@ -305,7 +308,7 @@ function activateTab(termId) {
 
   // Attach to server
   if (ctx.ws && ctx.connected) {
-    ctx.ws.send(JSON.stringify({ type: "term_attach", id: termId }));
+    ctx.ws.send(JSON.stringify({ type: "term_attach", id: termId, savedBinding: savedBinding }));
   }
 
   // Fit and focus
@@ -358,7 +361,7 @@ function createXtermForTab(tab) {
     cursorBlink: true,
     fontSize: getTerminalFontSize(),
     fontFamily: getTerminalFontFamily(),
-    theme: (store.get('rightWorkbenchDockedOwners') || []).indexOf('terminal') !== -1 ? getDockedTerminalTheme() : getTerminalTheme(),
+    theme: getTerminalTheme(),
   });
 
   var fitAddon = null;
@@ -480,7 +483,7 @@ function fitTerminal() {
     fitRafId = null;
     if (!activeTabId) return;
     var tab = tabs.get(activeTabId);
-    if (!tab || !tab.fitAddon || !tab.xterm) return;
+    if (!isOpen || !tab || !tab.fitAddon || !tab.xterm || !hasTerminalViewport(tab)) return;
 
     try {
       tab.fitAddon.fit();
@@ -557,11 +560,13 @@ function renderTabBar() {
 
       var moreBtn = document.createElement("button");
       moreBtn.className = "terminal-tab-more";
-      moreBtn.innerHTML = '<i data-lucide="ellipsis" style="width:12px;height:12px"></i>';
+      moreBtn.innerHTML = iconHtml('x');
+      moreBtn.setAttribute('aria-label', 'Close terminal tab ' + t.title);
       moreBtn.addEventListener("click", function (e) {
         e.stopPropagation();
-        showTabContextMenu(e, t, label);
+        closeTab(t.id);
       });
+      el.addEventListener('contextmenu', function (event) { event.preventDefault(); showTabContextMenu(event, t, label); });
       el.appendChild(moreBtn);
 
       el.addEventListener("click", function () {
@@ -699,7 +704,7 @@ function updateTerminalBadge() {
 // --- Handle server messages ---
 
 export function handleTermList(msg) {
-  store.set({ clayControlTerminalViews: (msg.terminals || []).map(function (item) { return { id: item.id, identity: item.controlIdentity, revision: item.controlRevision, runtimeId: store.get('controlRuntimeId') }; }) });
+  store.set({ clayControlTerminalViews: (msg.terminals || []).map(function (item) { return { id: item.id, identity: item.controlIdentity, revision: item.controlRevision, exited: item.exited, runtimeId: store.get('controlRuntimeId') }; }) });
   // TUI session terminals are owned by session-tui-view.js and must not
   // appear in the bottom terminal panel. Filter them out before any tab
   // bookkeeping so the panel never tries to render or auto-attach them.
@@ -744,6 +749,7 @@ export function handleTermList(msg) {
   }
 
   renderTabBar();
+  store.set({ savedViewTerminalListReady: true });
 
   // If panel is open and we have tabs, re-attach
   if (isOpen && tabs.size > 0) {
@@ -782,9 +788,7 @@ export function handleTermResized(msg) {
   handleTerminalProjection(msg);
   if (!msg.id) return;
   var tab = tabs.get(msg.id);
-  if (tab && tab.xterm && msg.cols > 0 && msg.rows > 0) {
-    tab.xterm.resize(msg.cols, msg.rows);
-  }
+  applyTerminalSize(tab, msg, isOpen && msg.id === activeTabId, fitTerminal);
 }
 
 export function handleTermExited(msg) {
@@ -825,6 +829,7 @@ export function handleTermClosed(msg) {
 
 // --- Reset on reconnect ---
 export function resetTerminals() {
+  store.set({ savedViewTerminalListReady: false, savedViewTerminalResource: null });
   // Dispose all xterm instances (server state survives, client re-syncs via term_list)
   for (var tab of tabs.values()) {
     disposeTab(tab);
@@ -842,8 +847,8 @@ export function sendTerminalCommand(command) {
   }
 }
 
-export function setTerminalTheme(xtermTheme) {
-  if ((store.get('rightWorkbenchDockedOwners') || []).indexOf('terminal') !== -1) xtermTheme = getDockedTerminalTheme();
+export function setTerminalTheme() {
+  var xtermTheme = getTerminalTheme();
   for (var tab of tabs.values()) {
     if (tab.xterm) {
       tab.xterm.options.theme = xtermTheme;
@@ -851,9 +856,6 @@ export function setTerminalTheme(xtermTheme) {
   }
 }
 
-store.subscribe(function (state, previous) {
-  if ((state.rightWorkbenchDockedOwners || []).includes('terminal') !== (previous.rightWorkbenchDockedOwners || []).includes('terminal')) setTerminalTheme(getTerminalTheme());
-});
 
 // Live font update: applies family/size to every open shell terminal
 // and refits each (cell dimensions change with font size, so cols/rows
@@ -983,3 +985,27 @@ function showTermCtxMenu(e, tab) {
     document.addEventListener("click", closeTermCtxMenu, { once: true });
   }, 0);
 }
+
+// Restoration must never enter openTerminal's create-new branch.
+export function restoreExistingTerminal(resource) {
+  if (!store.get('connected') || !store.get('controlRuntimeId')) return 'pending';
+  if (!store.get('savedViewTerminalListReady')) return 'pending';
+  var live = (store.get('clayControlTerminalViews') || []).find(function (item) { return item.id === resource.id && item.identity === resource.identity && item.runtimeId === resource.runtimeId && !item.exited; });
+  claimRightWorkbench('terminal');
+  var container = document.getElementById('terminal-container'); container.classList.remove('hidden');
+  if (live && tabs.has(resource.id)) { isOpen = true; activateTab(resource.id, resource); return 'restored'; }
+  isOpen = false;
+  tabs.forEach(function (tab) { if (tab.bodyEl) tab.bodyEl.style.display = 'none'; });
+  var notice = document.getElementById('terminal-saved-unavailable');
+  if (!notice) { notice = document.createElement('p'); notice.id = 'terminal-saved-unavailable'; notice.className = 'saved-view-unavailable'; notice.setAttribute('role', 'status'); document.getElementById('terminal-body').appendChild(notice); }
+  notice.textContent = 'This saved terminal is unavailable. Close this pane and open Terminal to choose an available shell.';
+  return 'unavailable';
+}
+
+export function setTerminalExpanded(enabled) {
+  var panel = document.getElementById('terminal-container'); if (!panel) return;
+  panel.classList.toggle('panel-fullscreen', !!enabled);
+  var icon = panel.querySelector('#terminal-fullscreen [data-lucide]');
+  if (icon) { icon.setAttribute('data-lucide', enabled ? 'minimize-2' : 'maximize-2'); refreshIcons(); }
+  if (!panel.classList.contains('hidden')) fitTerminal();
+}

package/lib/public/modules/theme-palette.js

@@ -0,0 +1,177 @@
+// --- Color utilities ---
+
+function hexToRgb(hex) {
+  var h = hex.replace("#", "");
+  return {
+    r: parseInt(h.substring(0, 2), 16),
+    g: parseInt(h.substring(2, 4), 16),
+    b: parseInt(h.substring(4, 6), 16)
+  };
+}
+
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map(function (v) {
+    var c = Math.max(0, Math.min(255, Math.round(v)));
+    return c.toString(16).padStart(2, "0");
+  }).join("");
+}
+
+function darken(hex, amount) {
+  var c = hexToRgb(hex);
+  var f = 1 - amount;
+  return rgbToHex(c.r * f, c.g * f, c.b * f);
+}
+
+function lighten(hex, amount) {
+  var c = hexToRgb(hex);
+  return rgbToHex(
+    c.r + (255 - c.r) * amount,
+    c.g + (255 - c.g) * amount,
+    c.b + (255 - c.b) * amount
+  );
+}
+
+function mixColors(hex1, hex2, weight) {
+  var c1 = hexToRgb(hex1);
+  var c2 = hexToRgb(hex2);
+  var w = weight;
+  return rgbToHex(
+    c1.r * w + c2.r * (1 - w),
+    c1.g * w + c2.g * (1 - w),
+    c1.b * w + c2.b * (1 - w)
+  );
+}
+
+function hexToRgba(hex, alpha) {
+  var c = hexToRgb(hex);
+  return "rgba(" + c.r + ", " + c.g + ", " + c.b + ", " + alpha + ")";
+}
+
+function luminance(hex) {
+  var c = hexToRgb(hex);
+  return (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255;
+}
+
+var DEFAULT_DARK_THEME_ID = "clay-dark";
+var DEFAULT_LIGHT_THEME_ID = "clay-light";
+
+// Embedded defaults keep the first render branded before /api/themes loads.
+var defaultDarkFallback = {
+  name: "Clay Studio Dark", variant: "dark",
+  base00: "171715", base01: "20201D", base02: "393934", base03: "686861",
+  base04: "A0A098", base05: "D1D1CA", base06: "E8E8E2", base07: "FAFAF5",
+  base08: "FF7479", base09: "7776FF", base0A: "E0B45B", base0B: "07E5A3",
+  base0C: "5FD2C0", base0D: "8AA7FF", base0E: "C39AF3", base0F: "D69A7D",
+  accent2: "07E5A3", link: "7F7EC8"
+};
+
+var defaultLightFallback = {
+  name: "Clay Studio Light", variant: "light",
+  base00: "F7F7F3", base01: "EEEEEA", base02: "D7D7D0", base03: "A2A29B",
+  base04: "73736C", base05: "44443F", base06: "252522", base07: "151513",
+  base08: "C84B50", base09: "5857FC", base0A: "956A19", base0B: "087B59",
+  base0C: "187A7C", base0D: "3F62B4", base0E: "7A52A8", base0F: "9A5A46",
+  accent2: "07E5A3", link: "4948B8"
+};
+
+// --- Compute CSS variables from a base16 palette ---
+function computeVars(theme) {
+  var b = {};
+  var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
+              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
+  for (var i = 0; i < keys.length; i++) {
+    b[keys[i]] = "#" + theme[keys[i]];
+  }
+
+  var isLight = theme.variant === "light";
+  var accent2 = theme.accent2 ? "#" + theme.accent2 : b.base0D;
+  var link = theme.link ? "#" + theme.link : b.base0D;
+
+  return {
+    "--bg":             b.base00,
+    "--bg-alt":         b.base01,
+    "--text":           b.base06,
+    "--text-secondary": b.base05,
+    "--text-muted":     b.base04,
+    "--text-dimmer":    b.base03,
+    "--accent":         b.base09,
+    "--accent-hover":   isLight ? darken(b.base09, 0.12) : lighten(b.base09, 0.12),
+    "--accent-bg":      hexToRgba(b.base09, 0.12),
+    "--link":           link,
+    "--link-hover":     isLight ? darken(link, 0.10) : lighten(link, 0.10),
+    "--code-bg":        isLight ? darken(b.base00, 0.03) : darken(b.base00, 0.15),
+    "--border":         b.base02,
+    "--border-subtle":  mixColors(b.base00, b.base02, 0.6),
+    "--input-bg":       isLight ? darken(b.base00, 0.04) : mixColors(b.base01, b.base02, 0.5),
+    "--ask-mate-bg":    isLight ? mixColors("#ffffff", darken(b.base00, 0.04), 0.6) : mixColors(b.base00, mixColors(b.base01, b.base02, 0.5), 0.6),
+    "--user-bubble":    isLight ? darken(b.base01, 0.03) : mixColors(b.base01, b.base02, 0.3),
+    "--error":          b.base08,
+    "--success":        b.base0B,
+    "--warning":        b.base0A,
+    "--sidebar-bg":     isLight ? darken(b.base00, 0.02) : darken(b.base00, 0.10),
+    "--sidebar-hover":  isLight ? darken(b.base00, 0.06) : mixColors(b.base00, b.base01, 0.5),
+    "--sidebar-active": isLight ? darken(b.base01, 0.05) : mixColors(b.base01, b.base02, 0.5),
+    "--filebrowser-bg": isLight ? lighten(b.base00, 0.03) : lighten(b.base00, 0.04),
+    "--filebrowser-border": isLight ? darken(b.base00, 0.08) : mixColors(b.base02, b.base00, 0.5),
+    "--accent-8":       hexToRgba(b.base09, 0.08),
+    "--accent-12":      hexToRgba(b.base09, 0.12),
+    "--accent-15":      hexToRgba(b.base09, 0.15),
+    "--accent-20":      hexToRgba(b.base09, 0.20),
+    "--accent-25":      hexToRgba(b.base09, 0.25),
+    "--accent-30":      hexToRgba(b.base09, 0.30),
+    "--accent2":        accent2,
+    "--accent2-hover":  isLight ? darken(accent2, 0.12) : lighten(accent2, 0.12),
+    "--accent2-bg":     hexToRgba(accent2, 0.12),
+    "--accent2-8":      hexToRgba(accent2, 0.08),
+    "--accent2-12":     hexToRgba(accent2, 0.12),
+    "--accent2-15":     hexToRgba(accent2, 0.15),
+    "--accent2-20":     hexToRgba(accent2, 0.20),
+    "--accent2-25":     hexToRgba(accent2, 0.25),
+    "--accent2-30":     hexToRgba(accent2, 0.30),
+    "--error-8":        hexToRgba(b.base08, 0.08),
+    "--error-12":       hexToRgba(b.base08, 0.12),
+    "--error-15":       hexToRgba(b.base08, 0.15),
+    "--error-25":       hexToRgba(b.base08, 0.25),
+    "--success-8":      hexToRgba(b.base0B, 0.08),
+    "--success-12":     hexToRgba(b.base0B, 0.12),
+    "--success-15":     hexToRgba(b.base0B, 0.15),
+    "--success-25":     hexToRgba(b.base0B, 0.25),
+    "--warning-bg":     hexToRgba(b.base0A, 0.12),
+    "--overlay-rgb":    isLight ? "0,0,0" : "255,255,255",
+    "--shadow-rgb":     "0,0,0",
+    "--hl-comment":     b.base03,
+    "--hl-keyword":     b.base0E,
+    "--hl-string":      b.base0B,
+    "--hl-number":      b.base09,
+    "--hl-function":    b.base0D,
+    "--hl-variable":    b.base08,
+    "--hl-type":        b.base0A,
+    "--hl-constant":    b.base09,
+    "--hl-tag":         b.base08,
+    "--hl-attr":        b.base0D,
+    "--hl-regexp":      b.base0C,
+    "--hl-meta":        b.base0F,
+    "--hl-builtin":     b.base09,
+    "--hl-symbol":      b.base0F,
+    "--hl-addition":    b.base0B,
+    "--hl-deletion":    b.base08
+  };
+}
+
+function validateTheme(t) {
+  if (!t || typeof t !== "object") return false;
+  if (!t.name || typeof t.name !== "string") return false;
+  var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
+              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
+  for (var i = 0; i < keys.length; i++) {
+    if (!t[keys[i]] || !/^[0-9a-fA-F]{6}$/.test(t[keys[i]])) return false;
+  }
+  if (t.variant && t.variant !== "dark" && t.variant !== "light") return false;
+  if (!t.variant) {
+    t.variant = luminance("#" + t.base00) > 0.5 ? "light" : "dark";
+  }
+  return true;
+}
+
+
+export { hexToRgb, rgbToHex, darken, lighten, mixColors, hexToRgba, luminance, computeVars, validateTheme, defaultDarkFallback, defaultLightFallback, DEFAULT_DARK_THEME_ID, DEFAULT_LIGHT_THEME_ID };

package/lib/public/modules/theme.js

@@ -5,165 +5,7 @@ import { setTuiSessionTheme } from './session-tui-view.js';
 import { setTuiAttentionTheme } from './tui-attention.js';
 import { updateMermaidTheme } from './markdown.js';
 
-// --- Color utilities ---
-
-function hexToRgb(hex) {
-  var h = hex.replace("#", "");
-  return {
-    r: parseInt(h.substring(0, 2), 16),
-    g: parseInt(h.substring(2, 4), 16),
-    b: parseInt(h.substring(4, 6), 16)
-  };
-}
-
-function rgbToHex(r, g, b) {
-  return "#" + [r, g, b].map(function (v) {
-    var c = Math.max(0, Math.min(255, Math.round(v)));
-    return c.toString(16).padStart(2, "0");
-  }).join("");
-}
-
-function darken(hex, amount) {
-  var c = hexToRgb(hex);
-  var f = 1 - amount;
-  return rgbToHex(c.r * f, c.g * f, c.b * f);
-}
-
-function lighten(hex, amount) {
-  var c = hexToRgb(hex);
-  return rgbToHex(
-    c.r + (255 - c.r) * amount,
-    c.g + (255 - c.g) * amount,
-    c.b + (255 - c.b) * amount
-  );
-}
-
-function mixColors(hex1, hex2, weight) {
-  var c1 = hexToRgb(hex1);
-  var c2 = hexToRgb(hex2);
-  var w = weight;
-  return rgbToHex(
-    c1.r * w + c2.r * (1 - w),
-    c1.g * w + c2.g * (1 - w),
-    c1.b * w + c2.b * (1 - w)
-  );
-}
-
-function hexToRgba(hex, alpha) {
-  var c = hexToRgb(hex);
-  return "rgba(" + c.r + ", " + c.g + ", " + c.b + ", " + alpha + ")";
-}
-
-function luminance(hex) {
-  var c = hexToRgb(hex);
-  return (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255;
-}
-
-var DEFAULT_DARK_THEME_ID = "clay-dark";
-var DEFAULT_LIGHT_THEME_ID = "clay-light";
-
-// Embedded defaults keep the first render branded before /api/themes loads.
-var defaultDarkFallback = {
-  name: "Clay Studio Dark", variant: "dark",
-  base00: "171715", base01: "20201D", base02: "393934", base03: "686861",
-  base04: "A0A098", base05: "D1D1CA", base06: "E8E8E2", base07: "FAFAF5",
-  base08: "FF7479", base09: "7776FF", base0A: "E0B45B", base0B: "07E5A3",
-  base0C: "5FD2C0", base0D: "8AA7FF", base0E: "C39AF3", base0F: "D69A7D",
-  accent2: "07E5A3", link: "7F7EC8"
-};
-
-var defaultLightFallback = {
-  name: "Clay Studio Light", variant: "light",
-  base00: "F7F7F3", base01: "EEEEEA", base02: "D7D7D0", base03: "A2A29B",
-  base04: "73736C", base05: "44443F", base06: "252522", base07: "151513",
-  base08: "C84B50", base09: "5857FC", base0A: "956A19", base0B: "087B59",
-  base0C: "187A7C", base0D: "3F62B4", base0E: "7A52A8", base0F: "9A5A46",
-  accent2: "07E5A3", link: "4948B8"
-};
-
-// --- Compute CSS variables from a base16 palette ---
-function computeVars(theme) {
-  var b = {};
-  var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
-              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
-  for (var i = 0; i < keys.length; i++) {
-    b[keys[i]] = "#" + theme[keys[i]];
-  }
-
-  var isLight = theme.variant === "light";
-  var accent2 = theme.accent2 ? "#" + theme.accent2 : b.base0D;
-  var link = theme.link ? "#" + theme.link : b.base0D;
-
-  return {
-    "--bg":             b.base00,
-    "--bg-alt":         b.base01,
-    "--text":           b.base06,
-    "--text-secondary": b.base05,
-    "--text-muted":     b.base04,
-    "--text-dimmer":    b.base03,
-    "--accent":         b.base09,
-    "--accent-hover":   isLight ? darken(b.base09, 0.12) : lighten(b.base09, 0.12),
-    "--accent-bg":      hexToRgba(b.base09, 0.12),
-    "--link":           link,
-    "--link-hover":     isLight ? darken(link, 0.10) : lighten(link, 0.10),
-    "--code-bg":        isLight ? darken(b.base00, 0.03) : darken(b.base00, 0.15),
-    "--border":         b.base02,
-    "--border-subtle":  mixColors(b.base00, b.base02, 0.6),
-    "--input-bg":       isLight ? darken(b.base00, 0.04) : mixColors(b.base01, b.base02, 0.5),
-    "--ask-mate-bg":    isLight ? mixColors("#ffffff", darken(b.base00, 0.04), 0.6) : mixColors(b.base00, mixColors(b.base01, b.base02, 0.5), 0.6),
-    "--user-bubble":    isLight ? darken(b.base01, 0.03) : mixColors(b.base01, b.base02, 0.3),
-    "--error":          b.base08,
-    "--success":        b.base0B,
-    "--warning":        b.base0A,
-    "--sidebar-bg":     isLight ? darken(b.base00, 0.02) : darken(b.base00, 0.10),
-    "--sidebar-hover":  isLight ? darken(b.base00, 0.06) : mixColors(b.base00, b.base01, 0.5),
-    "--sidebar-active": isLight ? darken(b.base01, 0.05) : mixColors(b.base01, b.base02, 0.5),
-    "--filebrowser-bg": isLight ? lighten(b.base00, 0.03) : lighten(b.base00, 0.04),
-    "--filebrowser-border": isLight ? darken(b.base00, 0.08) : mixColors(b.base02, b.base00, 0.5),
-    "--accent-8":       hexToRgba(b.base09, 0.08),
-    "--accent-12":      hexToRgba(b.base09, 0.12),
-    "--accent-15":      hexToRgba(b.base09, 0.15),
-    "--accent-20":      hexToRgba(b.base09, 0.20),
-    "--accent-25":      hexToRgba(b.base09, 0.25),
-    "--accent-30":      hexToRgba(b.base09, 0.30),
-    "--accent2":        accent2,
-    "--accent2-hover":  isLight ? darken(accent2, 0.12) : lighten(accent2, 0.12),
-    "--accent2-bg":     hexToRgba(accent2, 0.12),
-    "--accent2-8":      hexToRgba(accent2, 0.08),
-    "--accent2-12":     hexToRgba(accent2, 0.12),
-    "--accent2-15":     hexToRgba(accent2, 0.15),
-    "--accent2-20":     hexToRgba(accent2, 0.20),
-    "--accent2-25":     hexToRgba(accent2, 0.25),
-    "--accent2-30":     hexToRgba(accent2, 0.30),
-    "--error-8":        hexToRgba(b.base08, 0.08),
-    "--error-12":       hexToRgba(b.base08, 0.12),
-    "--error-15":       hexToRgba(b.base08, 0.15),
-    "--error-25":       hexToRgba(b.base08, 0.25),
-    "--success-8":      hexToRgba(b.base0B, 0.08),
-    "--success-12":     hexToRgba(b.base0B, 0.12),
-    "--success-15":     hexToRgba(b.base0B, 0.15),
-    "--success-25":     hexToRgba(b.base0B, 0.25),
-    "--warning-bg":     hexToRgba(b.base0A, 0.12),
-    "--overlay-rgb":    isLight ? "0,0,0" : "255,255,255",
-    "--shadow-rgb":     "0,0,0",
-    "--hl-comment":     b.base03,
-    "--hl-keyword":     b.base0E,
-    "--hl-string":      b.base0B,
-    "--hl-number":      b.base09,
-    "--hl-function":    b.base0D,
-    "--hl-variable":    b.base08,
-    "--hl-type":        b.base0A,
-    "--hl-constant":    b.base09,
-    "--hl-tag":         b.base08,
-    "--hl-attr":        b.base0D,
-    "--hl-regexp":      b.base0C,
-    "--hl-meta":        b.base0F,
-    "--hl-builtin":     b.base09,
-    "--hl-symbol":      b.base0F,
-    "--hl-addition":    b.base0B,
-    "--hl-deletion":    b.base08
-  };
-}
+import { hexToRgb, rgbToHex, darken, lighten, mixColors, hexToRgba, luminance, computeVars, validateTheme, defaultDarkFallback, defaultLightFallback, DEFAULT_DARK_THEME_ID, DEFAULT_LIGHT_THEME_ID } from './theme-palette.js';
 
 var defaultExactVars = computeVars(defaultDarkFallback);
 
@@ -267,11 +109,6 @@ export function getTerminalTheme() {
   return computeTerminalTheme(getTheme(DEFAULT_DARK_THEME_ID) || defaultDarkFallback);
 }
 
-export function getDockedTerminalTheme() {
-  var theme = getCurrentTheme();
-  return Object.assign({}, computeTerminalTheme(theme), { background: '#' + theme.base00 });
-}
-
 export function getMermaidThemeVars() {
   return computeMermaidVars(getCurrentTheme());
 }
@@ -332,7 +169,7 @@ export function applyTheme(themeId, fromPicker) {
   // Terminals deliberately keep Clay Studio Dark for predictable ANSI
   // contrast, even while the surrounding workspace uses a light theme.
   var termTheme = getTerminalTheme();
-  try { setTerminalTheme(termTheme); } catch (e) {}
+  try { setTerminalTheme(); } catch (e) {}
   try { setTuiSessionTheme(termTheme); } catch (e) {}
   try { setTuiAttentionTheme(termTheme); } catch (e) {}
 
@@ -401,21 +238,6 @@ function loadThemes() {
   });
 }
 
-function validateTheme(t) {
-  if (!t || typeof t !== "object") return false;
-  if (!t.name || typeof t.name !== "string") return false;
-  var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
-              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
-  for (var i = 0; i < keys.length; i++) {
-    if (!t[keys[i]] || !/^[0-9a-fA-F]{6}$/.test(t[keys[i]])) return false;
-  }
-  if (t.variant && t.variant !== "dark" && t.variant !== "light") return false;
-  if (!t.variant) {
-    t.variant = luminance("#" + t.base00) > 0.5 ? "light" : "dark";
-  }
-  return true;
-}
-
 // --- Light / Dark mode toggle ---
 
 // Returns the system preferred mode

package/lib/public/modules/tool-pane-chrome.js

@@ -0,0 +1,88 @@
+import { WORKBENCH_PANELS } from './workbench-panels.js';
+import { recordToolExpansion } from './view-presentation-state.js';
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { TOOL_PANES } from './tool-pane-tree.js';
+
+function titleFor(panel, name) {
+  if (name === 'terminal') {
+    var state = store.snap(), project = (state.projectsHubList || []).find(function (item) { return item && item.slug === state.currentSlug; });
+    var projectName = project && (project.title || project.project || project.name) || state.projectName || state.currentSlug;
+    return projectName ? projectName + ' · Terminal' : 'Terminal';
+  }
+  if (name === 'file-viewer') { var tab = panel.querySelector('.file-viewer-tab.active .file-viewer-tab-label'); return tab && tab.textContent || 'Files'; }
+  var browser = store.get('sharedBrowser');
+  try { return browser && browser.url ? new URL(browser.url).hostname : 'Browser'; } catch (error) { return 'Browser'; }
+}
+export function renderToolPaneChrome(panel, name) {
+  if (panel.dataset.fileInstance) return;
+  if (WORKBENCH_PANELS[name]) { renderWorkbenchChrome(panel, name); return; }
+  var definition = TOOL_PANES[name];
+  if (!definition) return;
+  var header = panel.querySelector(':scope > .tool-pane-header');
+  if (!header) {
+    var original = panel.querySelector(name === 'terminal' ? '.terminal-header' : name === 'browser' ? '.shared-browser-header' : '.file-viewer-tabbar');
+    if (!original) return;
+    header = document.createElement('header'); header.className = 'tool-pane-header split-pane-header'; header.dataset.toolPane = name;
+    var kind = document.createElement('span'); kind.className = 'tool-pane-kind' + (name === 'terminal' ? '' : ' split-view-runtime');
+    kind.innerHTML = iconHtml(definition.icon) + (name === 'terminal' ? '' : '<span class="split-view-model">' + definition.label + '</span>');
+    var title = document.createElement('span'); title.className = 'tool-pane-title split-pane-title';
+    var space = document.createElement('span'); space.className = 'split-pane-drag-space'; space.title = 'Drag to rearrange panes'; space.setAttribute('aria-hidden', 'true');
+    var actions = original.querySelector('.terminal-header-actions, .shared-browser-window, .file-viewer-window-actions');
+    header.append(kind, title, space); if (actions) header.appendChild(actions);
+    panel.insertBefore(header, panel.firstChild);
+    if (name === 'browser') {
+      header.classList.add('browser-pane-header');
+      var tabs = panel.querySelector('.shared-browser-tabs');
+      if (tabs) header.insertBefore(tabs, space);
+      kind.setAttribute('aria-label', 'Browser'); kind.setAttribute('data-tip', 'Browser');
+      original.hidden = true; var close = header.querySelector('[data-action="hide"]'); if (close) { close.title = 'Close browser pane'; close.setAttribute('aria-label', 'Close browser pane'); }
+    }
+    else original.classList.add('tool-pane-tab-row');
+    var observer = new MutationObserver(function () { update(); });
+    observer.observe(panel, { childList: true, characterData: true, subtree: true, attributes: true, attributeFilter: ['aria-selected'] });
+    panel.addEventListener('clay-tool-pane-dispose', function () { observer.disconnect(); }, { once: true });
+    refreshIcons();
+  }
+  function update() {
+    var label = titleFor(panel, name), title = header.querySelector('.tool-pane-title');
+    if (title.textContent !== label) { title.textContent = label; title.title = label; }
+  }
+  update();
+}
+
+store.subscribe(function (state, previous) {
+  if (state.projectName === previous.projectName && state.projectsHubList === previous.projectsHubList && state.currentSlug === previous.currentSlug) return;
+  var panel = document.getElementById('terminal-container');
+  if (panel && panel.querySelector(':scope > .tool-pane-header')) renderToolPaneChrome(panel, 'terminal');
+});
+
+function renderWorkbenchChrome(panel, name) {
+  panel.classList.add('workbench-pane-shell');
+  var header = panel.querySelector(':scope > header');
+  if (!header || header.dataset.toolPane === name) return;
+  header.dataset.toolPane = name;
+  header.classList.add('tool-pane-header', 'split-pane-header');
+  var actions = header.querySelector('[class*="window-actions"], :scope > div:last-child');
+  if (!actions) {
+    actions = document.createElement('div');
+    Array.from(header.querySelectorAll(':scope > button')).forEach(function (button) {
+      var label = button.getAttribute('aria-label') || '';
+      if (/^(Widen|Close)|fullscreen/i.test(label)) actions.appendChild(button);
+    });
+    header.appendChild(actions);
+  }
+  actions.classList.add('workbench-pane-actions');
+  var title = header.querySelector('strong, [class$="-title"]');
+  if (title) title.classList.add('tool-pane-title');
+  var space = document.createElement('span'); space.className = 'split-pane-drag-space';
+  space.title = 'Drag to rearrange panes'; space.setAttribute('aria-hidden', 'true');
+  header.insertBefore(space, actions);
+  var expanded = panel.classList.contains('panel-fullscreen');
+  var observer = new MutationObserver(function () {
+    var next = panel.classList.contains('panel-fullscreen');
+    if (next !== expanded) { expanded = next; recordToolExpansion(name, next); }
+  });
+  observer.observe(panel, { attributes: true, attributeFilter: ['class'] });
+  panel.addEventListener('clay-tool-pane-dispose', function () { observer.disconnect(); }, { once: true });
+}