tmux-ide 2.9.0-beta.35 → 2.9.0-beta.37

package/bin/cli.js

@@ -11279,7 +11279,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "tmux-ide",
-      version: "2.9.0-beta.35",
+      version: "2.9.0-beta.37",
       description: "A visual, agent-aware IDE for any tmux session, with optional workspace presets",
       type: "module",
       bin: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmux-ide",
-  "version": "2.9.0-beta.35",
+  "version": "2.9.0-beta.37",
   "description": "A visual, agent-aware IDE for any tmux session, with optional workspace presets",
   "type": "module",
   "bin": {

package/packages/daemon/dist/tui/mirror/runtime/application-terminal-workspace.jsx

@@ -91,6 +91,11 @@ export function ApplicationTerminalWorkspace(props) {
             ? clampTerminalViewportOrigin(snapshot, { cols: frame.width, rows: frame.contentHeight }, origin, snapshot.history.length)
             : origin;
     }, (paneId) => props.adapter.retainPaneView?.(paneId) ?? null);
+    createEffect(() => {
+        const paneId = props.focusedPane;
+        props.onScrollbackChange?.(paneId !== null && scrollback.offset(paneId) > 0);
+    });
+    onCleanup(() => props.onScrollbackChange?.(false));
     const selectionViewport = (paneId, frame) => props.adapter.renderSource.supportsViewportOrigin
         ? {
             cols: frame.width,
@@ -1318,10 +1323,10 @@ export function ApplicationTerminalWorkspace(props) {
           </box>)}
       </For>
       <Show when={windowLinkMenu()}>
-        <Menu theme={props.theme} title="Window link" left={0} top={1} width={Math.min(36, props.width)} viewportWidth={props.width} viewportHeight={props.height} selectedId="unlink" items={[{ id: "unlink", label: "Unlink this tab", shortcut: "U" }]} footer="Other links keep their panes" onDismiss={() => setWindowLinkMenu(null)} onSelect={unlinkWindowTab}/>
+        <Menu theme={props.theme} viewportOrigin={{ x: props.originX ?? 0, y: props.originY ?? 0 }} title="Window link" left={0} top={1} width={Math.min(36, props.width)} viewportWidth={props.width} viewportHeight={props.height} selectedId="unlink" items={[{ id: "unlink", label: "Unlink this tab", shortcut: "U" }]} footer="Other links keep their panes" onDismiss={() => setWindowLinkMenu(null)} onSelect={unlinkWindowTab}/>
       </Show>
       <Show when={paneContextMenu()}>
-        {(menu) => (<PaneActionMenu theme={props.theme} left={menu().left} top={menu().top} width={paneContextMenuWidth()} viewportWidth={props.width} viewportHeight={props.height + topOffset()} paneTitle={menu().displayName} active onDismiss={paneMenu.dismiss} selectedId={menu().selectedId} closeArmed={menu().closeArmed} onHighlight={paneMenu.highlight} onActionIntent={paneMenu.activate}/>)}
+        {(menu) => (<PaneActionMenu theme={props.theme} left={menu().left} top={menu().top} width={paneContextMenuWidth()} viewportWidth={props.width} viewportHeight={props.height + topOffset()} viewportOrigin={{ x: props.originX ?? 0, y: props.originY ?? 0 }} paneTitle={menu().displayName} active onDismiss={paneMenu.dismiss} selectedId={menu().selectedId} closeArmed={menu().closeArmed} onHighlight={paneMenu.highlight} onActionIntent={paneMenu.activate}/>)}
       </Show>
       <For each={[
             ...new Set([

package/packages/daemon/dist/tui/mirror/runtime/application-transient-note-owner.js

@@ -16,7 +16,8 @@ export function createApplicationTransientNoteOwner(options) {
         publish(note) {
             clear();
             options.write(note);
-            if (!note)
+            if (!note ||
+                /\b(?:failed|failure|error|unavailable|disconnected|reconnecting|recovering|read.only|denied)\b/iu.test(note))
                 return;
             timer = clock.setTimeout(() => {
                 timer = null;

package/packages/daemon/dist/tui/mirror/shell-chrome.js

@@ -222,9 +222,10 @@ export function shellStatusLine(variant, input, width) {
     }
     return `${out}…`;
 }
-function meaningfulStatusMessage(message) {
+export function meaningfulStatusMessage(message) {
     const value = message?.trim();
-    if (!value || /^(?:ready|live|connected)$/iu.test(value))
+    if (!value ||
+        /^(?:ready|live|connected|live tmux sessions? discovered|\d+ sessions? live)$/iu.test(value))
         return null;
     return value;
 }
@@ -264,7 +265,12 @@ export function contextStatusPresentation(input) {
             : input.connectionState === "recovering"
                 ? "Recovering"
                 : "Disconnected";
-    const activityLabel = transient ?? notification ?? connectionLabel;
+    const persistentProblem = notification && contextStatusTone(notification, "connected").tone === "blocked";
+    const activityLabel = input.connectionState !== "connected"
+        ? (notification ?? connectionLabel)
+        : persistentProblem
+            ? notification
+            : (transient ?? notification ?? connectionLabel);
     const activityTone = contextStatusTone(activityLabel, input.connectionState);
     const location = input.variant === "wide"
         ? [

package/packages/daemon/dist/tui/mirror/theme.js

@@ -10,6 +10,8 @@
  * verbatim, aliasing @opentui/core to a browser shim that only exposes RGBA.
  */
 import { RGBA } from "@opentui/core";
+/** Shared scrim for modal surfaces across light and dark themes. */
+export const MODAL_BACKDROP = RGBA.fromInts(0, 0, 0, 150);
 import { BUILTIN_VISUAL_THEMES, findVisualThemePreset, contrastRatio, deriveAttentionBlend, deriveFocusedHeader, mixSrgbColors, readableForeground, resolveVisualTheme, } from "@tmux-ide/contracts";
 import { LEGACY_THEME_OVERRIDE_PROVENANCE, } from "../../lib/legacy-theme-compat.js";
 import { parseTerminalHostColor, terminalHostMode } from "../../lib/terminal-host-color.js";

package/packages/daemon/dist/tui/mirror/ui/button.jsx

@@ -24,7 +24,7 @@ export function TuiButton(props) {
         const inset = size() === "compact" ? 1 : 1;
         return clipTerminal(`${" ".repeat(inset)}${marker}${props.label}${shortcut} `, width());
     };
-    const background = () => variant() === "ghost" && palette().state === "base"
+    const background = () => palette().state === "base" && (variant() === "ghost" || variant() === "secondary")
         ? (props.background ?? props.theme.roles.surfaces.panel)
         : palette().background;
     const activate = () => {

package/packages/daemon/dist/tui/mirror/ui/menu.jsx

@@ -12,7 +12,7 @@ export function Menu(props) {
         preferredHeight: preferredHeight(),
     });
     const innerWidth = () => metrics().contentWidth;
-    return (<OverlayFrame theme={props.theme} viewportWidth={props.viewportWidth ?? Math.max(props.width, props.left + props.width)} viewportHeight={props.viewportHeight ?? Math.max(preferredHeight(), props.top + preferredHeight())} width={props.width} height={preferredHeight()} placement="anchor" anchor={{ x: props.left, y: props.top }} zIndex={props.zIndex ?? 20} active={props.active} title={props.title} footer={props.footer} onDismiss={props.onDismiss}>
+    return (<OverlayFrame theme={props.theme} viewportWidth={props.viewportWidth ?? Math.max(props.width, props.left + props.width)} viewportHeight={props.viewportHeight ?? Math.max(preferredHeight(), props.top + preferredHeight())} width={props.width} height={preferredHeight()} viewportOrigin={props.viewportOrigin} placement="anchor" anchor={{ x: props.left, y: props.top }} zIndex={props.zIndex ?? 20} active={props.active} title={props.title} footer={props.footer} onDismiss={props.onDismiss}>
       <For each={props.items.map((item) => item.id)}>
         {(id) => {
             const item = () => props.items.find((item) => item.id === id);

package/packages/daemon/dist/tui/mirror/ui/overlay-frame.jsx

@@ -1,9 +1,13 @@
+/* @jsxImportSource @opentui/solid */
+import { Portal, useTerminalDimensions } from "@opentui/solid";
+import { MODAL_BACKDROP } from "../theme.js";
 import { clipTerminal } from "../terminal-text.js";
 import { overlayFrameSize, overlaySurfacePadding } from "./overlay-model.js";
 /** Owns modal geometry and pointer capture without owning commands or renderer lifecycle. */
 export function OverlayFrame(props) {
-    const viewportWidth = () => Math.max(1, Math.floor(props.viewportWidth));
-    const viewportHeight = () => Math.max(1, Math.floor(props.viewportHeight));
+    const dimensions = useTerminalDimensions();
+    const viewportWidth = () => Math.max(1, Math.floor(props.viewportOrigin ? dimensions().width : props.viewportWidth));
+    const viewportHeight = () => Math.max(1, Math.floor(props.viewportOrigin ? dimensions().height : props.viewportHeight));
     const size = () => overlayFrameSize({
         viewportWidth: viewportWidth(),
         viewportHeight: viewportHeight(),
@@ -18,14 +22,14 @@ export function OverlayFrame(props) {
     const innerWidth = () => Math.max(1, width() - (props.surface !== false ? padding().horizontal * 2 : bordered() ? 2 : 0));
     const left = () => {
         if (props.placement === "anchor")
-            return Math.max(0, Math.min(props.anchor?.x ?? 0, viewportWidth() - width()));
+            return Math.max(0, Math.min((props.anchor?.x ?? 0) + (props.viewportOrigin?.x ?? 0), viewportWidth() - width()));
         if (props.placement === "top-right")
             return Math.max(0, viewportWidth() - width() - 1);
         return Math.max(0, Math.floor((viewportWidth() - width()) / 2));
     };
     const top = () => {
         if (props.placement === "anchor")
-            return Math.max(0, Math.min(props.anchor?.y ?? 0, viewportHeight() - height()));
+            return Math.max(0, Math.min((props.anchor?.y ?? 0) + (props.viewportOrigin?.y ?? 0), viewportHeight() - height()));
         if (props.placement === "top-right")
             return Math.min(1, viewportHeight() - height());
         return Math.max(0, Math.floor((viewportHeight() - height()) / 2));
@@ -61,7 +65,7 @@ export function OverlayFrame(props) {
     </box>);
     if (props.modal === false)
         return frame();
-    return (<box id="ui-overlay-frame-host" position="absolute" left={0} top={0} width={viewportWidth()} height={viewportHeight()} zIndex={props.zIndex ?? 100} onMouseDown={(event) => {
+    const host = () => (<box id="ui-overlay-frame-host" position="absolute" left={0} top={0} width={viewportWidth()} height={viewportHeight()} zIndex={props.zIndex ?? 100} backgroundColor={props.active === false ? undefined : MODAL_BACKDROP} onMouseDown={(event) => {
             event.preventDefault();
             event.stopPropagation();
             if (props.active !== false && props.dismissOnOutsidePress !== false)
@@ -69,4 +73,15 @@ export function OverlayFrame(props) {
         }}>
       {frame()}
     </box>);
+    return props.viewportOrigin ? (<Portal ref={(node) => {
+            const container = node;
+            container.position = "absolute";
+            container.left = 0;
+            container.top = 0;
+            container.width = "100%";
+            container.height = "100%";
+            container.zIndex = props.zIndex ?? 100;
+        }}>
+      {host()}
+    </Portal>) : (host());
 }

package/packages/daemon/dist/tui/mirror/workspace/pane-action-menu.jsx

@@ -11,5 +11,5 @@ function presentation(closeArmed) {
 }
 /** Pane-scoped menu compound. Command execution remains owned by the workspace runtime. */
 export function PaneActionMenu(props) {
-    return (<Menu theme={props.theme} left={props.left} top={props.top} width={props.width} viewportWidth={props.viewportWidth} viewportHeight={props.viewportHeight} active={props.active} title={props.paneTitle} footer={props.closeArmed ? "X / Enter confirm · Esc cancel" : "↑↓ choose · Enter run · Esc back"} selectedId={props.selectedId} items={presentation(props.closeArmed)} onDismiss={props.onDismiss} onHighlight={(id) => props.onHighlight?.(id)} onSelect={(id) => props.onActionIntent(id)}/>);
+    return (<Menu theme={props.theme} left={props.left} top={props.top} width={props.width} viewportWidth={props.viewportWidth} viewportHeight={props.viewportHeight} viewportOrigin={props.viewportOrigin} active={props.active} title={props.paneTitle} footer={props.closeArmed ? "X / Enter confirm · Esc cancel" : "↑↓ choose · Enter run · Esc back"} selectedId={props.selectedId} items={presentation(props.closeArmed)} onDismiss={props.onDismiss} onHighlight={(id) => props.onHighlight?.(id)} onSelect={(id) => props.onActionIntent(id)}/>);
 }

package/packages/daemon/dist/tui/mirror/workspace/terminal-pane-header.jsx

@@ -31,6 +31,7 @@ function badgeWidth(status) {
  */
 export function PaneTitleBar(props) {
     const [pointerInside, setPointerInside] = createSignal(false);
+    const [menuHovered, setMenuHovered] = createSignal(false);
     const hovered = () => props.hovered ?? pointerInside();
     const safeWidth = () => Math.max(1, Math.floor(props.width));
     const status = () => agentStatus(props.activity);
@@ -41,10 +42,16 @@ export function PaneTitleBar(props) {
             : status();
     const presence = () => (props.interaction ? paneInteractionPresence(props.interaction) : null);
     const activityLabel = () => presence()
-        ? `${presence().badge}${props.interaction?.origin === "external" ? " · External tmux" : ""}`
+        ? `${presence().badge[0]}${presence().badge.slice(1).toLowerCase()}${props.interaction?.origin === "external" ? " · tmux" : ""}`
         : "";
     const activityWidth = () => {
-        const available = safeWidth() - markerGutterWidth() - markerWidth() - actionWidth() - zoomWidth() - 4;
+        const available = safeWidth() -
+            markerGutterWidth() -
+            markerWidth() -
+            actionWidth() -
+            zoomWidth() -
+            badgeWidth(statusLabel()) -
+            12;
         if (!presence() || available < presence().badge.length + 2)
             return 0;
         return Math.min(available, terminalDisplayWidth(activityLabel()) + 2);
@@ -56,12 +63,6 @@ export function PaneTitleBar(props) {
     // Reserve these cells even when the control is quiet or unavailable. Hover
     // and menu lifetime must never change title clipping or terminal geometry.
     const actionWidth = () => (safeWidth() >= 7 ? 3 : 0);
-    const actionsVisible = () => props.selected ||
-        props.keyboardFocused ||
-        props.terminalFocused ||
-        hovered() ||
-        props.menuFocused ||
-        props.menuOpen;
     const zoomLabel = () => !props.zoomed
         ? ""
         : safeWidth() >= 32
@@ -146,16 +147,18 @@ export function PaneTitleBar(props) {
             }}>
           {clipTerminal(zoomLabel(), zoomWidth())}
         </text>) : null}
-      <Show when={activityBadge()} keyed>
-        {(activity) => (<Badge theme={props.theme} label={activity.label} width={activity.width} tone={activity.presence.tone === "danger"
+      <box id={`pane-header-status:${props.paneId}`} width={activityWidth() + (showBadge() ? badgeWidth(statusLabel()) : 0)} height={1} flexShrink={0} flexDirection="row" backgroundColor={props.theme.roles.surfaces.panel}>
+        <Show when={activityBadge()} keyed>
+          {(activity) => (<Badge theme={props.theme} label={activity.label} width={activity.width} tone={activity.presence.tone === "danger"
                 ? "destructive"
                 : activity.presence.tone === "info"
                     ? "accent"
-                    : "done"} selected={props.selected} focused={props.keyboardFocused || props.terminalFocused}/>)}
-      </Show>
-      {showBadge() ? (<AgentBadge theme={props.theme} label={statusLabel()} status={status()} activity={props.activity} width={badgeWidth(statusLabel())} selected={props.selected} focused={props.keyboardFocused || props.terminalFocused} hovered={hovered()} attention={props.attention}/>) : null}
-      {actionWidth() > 0 ? (<box width={actionWidth()} height={1} flexShrink={0}>
-          <IconButton theme={props.theme} icon={actionsVisible() ? "⋯" : " "} label="Pane actions" variant="ghost" width={actionWidth()} focused={props.menuFocused} selected={props.menuOpen} disabled={props.menuDisabled} background={palette().background} onPress={() => activateMenu()}/>
+                    : "done"}/>)}
+        </Show>
+        {showBadge() ? (<AgentBadge theme={props.theme} label={statusLabel()} status={status()} activity={props.activity} width={badgeWidth(statusLabel())} attention={props.attention}/>) : null}
+      </box>
+      {actionWidth() > 0 ? (<box width={actionWidth()} height={1} flexShrink={0} onMouseOver={() => setMenuHovered(true)} onMouseOut={() => setMenuHovered(false)}>
+          <IconButton theme={props.theme} icon="⋯" label="Pane actions" variant="secondary" width={actionWidth()} hovered={menuHovered()} focused={props.menuFocused} selected={props.menuOpen} disabled={props.menuDisabled} background={props.theme.roles.surfaces.panelRaised} onPress={() => activateMenu()}/>
         </box>) : null}
     </box>);
 }

package/packages/daemon/src/tui/mirror/__snapshots__/shell-chrome-renderer.test.tsx.snap

@@ -1,7 +1,7 @@
 // Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`ShellChrome OpenTUI renderer renders deterministic %sx%s compact shell chrome 1`] = `
-"  ⌂  !❯   ▤   ±   ◆                            ready ⧉ web  !blocked F5 palette
+"  ⌂  !❯   ▤   ±   ◆                                   ⧉ web !blocked F5 palette
   tmux              ┌──────────────────────────────────────────────────────────┐
  ● web              │ › compact workspace                                      │
  ○ api              │● Active view and keyboard focus are selected     terminal│
@@ -24,11 +24,11 @@ exports[`ShellChrome OpenTUI renderer renders deterministic %sx%s compact shell
                     │                                                          │
                     │                                                          │
                     └──────────────────────────────────────────────────────────┘
-  F5 · ^q quit       F6 Sessions  F7 Attention                      F5 Commands"
+  F5 · ^q quit       F6 Sessions  F7 Attention  F10 Sidebar         F5 Commands"
 `;
 
 exports[`ShellChrome OpenTUI renderer renders deterministic %sx%s standard shell chrome 1`] = `
-" ▸ tmux-ide   ⌂ Home  !❯ Terminal   ▤ Files   ± Diff   ◆ Missions                      ready ⧉ web  !blocked F5 palette
+" ▸ tmux-ide   ⌂ Home  !❯ Terminal   ▤ Files   ± Diff   ◆ Missions                             ⧉ web !blocked F5 palette
   tmux-ide                  ┌──────────────────────────────────────────────────────────────────────────────────────────┐
  ● web                      │ › standard workspace                                                                     │
  ○ api                      │● Active view and keyboard focus are selected                                     terminal│
@@ -67,11 +67,11 @@ exports[`ShellChrome OpenTUI renderer renders deterministic %sx%s standard shell
                             │                                                                                          │
                             │                                                                                          │
                             └──────────────────────────────────────────────────────────────────────────────────────────┘
-  F5 palette · ^q quit       F6 Sessions  F7 Attention                                                      F5 Commands"
+  F5 palette · ^q quit       F6 Sessions  F7 Attention  F10 Sidebar                                         F5 Commands"
 `;
 
 exports[`ShellChrome OpenTUI renderer renders deterministic %sx%s wide shell chrome 1`] = `
-" ▸ tmux-ide  F1  ⌂ Home  F2 !❯ Terminal  F3  ▤ Files  F4  ± Diff  F6  ◆ Missions                                                                                       ready ⧉ web  !blocked F5 palette
+" ▸ tmux-ide  F1  ⌂ Home  F2 !❯ Terminal  F3  ▤ Files  F4  ± Diff  F6  ◆ Missions                                                                                              ⧉ web !blocked F5 palette
   tmux-ide                  ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  ● web                      │ › wide workspace                                                                                                                                                         │
  ○ api                      │● Active view and keyboard focus are selected                                                                                                                     terminal│
@@ -130,5 +130,5 @@ exports[`ShellChrome OpenTUI renderer renders deterministic %sx%s wide shell chr
                             │                                                                                                                                                                          │
                             │                                                                                                                                                                          │
                             └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
-  F5 palette · ^q quit       F6 Sessions  F7 Attention                                                                                                                                      F5 Commands"
+  F5 palette · ^q quit       F6 Sessions  F7 Attention  F10 Sidebar                                                                                                                         F5 Commands"
 `;

package/packages/daemon/src/tui/mirror/runtime/__snapshots__/application-shell-view-renderer.test.tsx.snap

@@ -1,7 +1,7 @@
 // Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`production ApplicationShellView retains shell, window strip, pane chrome, and canvas at %sx%s 1`] = `
-"  ⌂  ●❯                                                                    live
+"  ⌂  ●❯                                                            Local · main
   tmux              ● main    ● workin…                                       +
  ● main               ● Codex                  ● working  ⋯
  ○ website          CANONICAL-CELL
@@ -13,11 +13,11 @@ exports[`production ApplicationShellView retains shell, window strip, pane chrom
 
 …
 
-                     F6 Sessions  F7 Attention                      F5 Commands"
+                     F6 Sessions  F7 Attention  F10 Sidebar         F5 Commands"
 `;
 
 exports[`production ApplicationShellView retains shell, window strip, pane chrome, and canvas at %sx%s 2`] = `
-"   tmux-ide   ⌂ Home  ●❯ Terminals                                                                                 live
+"   tmux-ide   ⌂ Home  ●❯ Terminals                                                                         Local · main
   tmux-ide                  ● main    ● workin…                                                            + New window
  ● main                       ● Codex                  ● working  ⋯
  ○ website                  CANONICAL-CELL
@@ -29,11 +29,11 @@ exports[`production ApplicationShellView retains shell, window strip, pane chrom
 
 …
 
-                             F6 Sessions  F7 Attention                                                      F5 Commands"
+                             F6 Sessions  F7 Attention  F10 Sidebar                                         F5 Commands"
 `;
 
 exports[`production ApplicationShellView retains shell, window strip, pane chrome, and canvas at %sx%s 3`] = `
-"   tmux-ide  F1  ⌂ Home  F2 ●❯ Terminals                                                                                                                                                           live
+"   tmux-ide  F1  ⌂ Home  F2 ●❯ Terminals                                                                                                                                                   Local · main
   tmux-ide                  ● main    ● workin…                                                                                                                                            + New window
  ● main                       ● Codex                  ● working  ⋯
  ○ website                  CANONICAL-CELL
@@ -45,11 +45,11 @@ exports[`production ApplicationShellView retains shell, window strip, pane chrom
 
 …
 
-                             F6 Sessions  F7 Attention                                                                                                                                      F5 Commands"
+                             F6 Sessions  F7 Attention  F10 Sidebar                                                                                                                         F5 Commands"
 `;
 
 exports[`production ApplicationShellView reacts palette geometry through narrow live resizes 1`] = `
-"  ⌂  ●❯                live
+"  ⌂  ●❯
  t  Command palette  esc
  m   Search commands…
  2    Home            F1
@@ -61,7 +61,7 @@ exports[`production ApplicationShellView reacts palette geometry through narrow
 `;
 
 exports[`production ApplicationShellView reacts palette geometry through narrow live resizes 2`] = `
-"  ⌂  ●❯        live
+"  ⌂  ●❯
  tCommand palette
  m …rch commands…
  2  Home        F1w
@@ -71,9 +71,9 @@ exports[`production ApplicationShellView reacts palette geometry through narrow
 `;
 
 exports[`production ApplicationShellView preserves canonical attention while prioritizing mixed window activity 1`] = `
-"   tmux-ide   ⌂ Home  ●❯ Terminals                                                                                 live
+"   tmux-ide   ⌂ Home  ●❯ Terminals                                                                         Local · main
   tmux-ide                  ! main    ! workin…                                                            + New window
- ● main                       ● Codex                  ● working  ⋯   ! Scout                     ! idle
+ ● main                       ● Codex                  ● working  ⋯   ! Scout                     ! idle  ⋯
                             CANONICAL-CELL                          CANONICAL-CELL
  Agents
  ● Codex [WORKING]
@@ -83,5 +83,5 @@ exports[`production ApplicationShellView preserves canonical attention while pri
 
 …
 
-                             F6 Sessions  F7 Attention                                                      F5 Commands"
+                             F6 Sessions  F7 Attention  F10 Sidebar                                         F5 Commands"
 `;

package/packages/daemon/src/tui/mirror/runtime/application-shell-view.tsx

@@ -10,7 +10,7 @@ import type { ApplicationAppearanceOwner } from "./application-appearance-owner.
 /* @jsxImportSource @opentui/solid */
 import type { ApplicationShellProjectionV1 } from "@tmux-ide/contracts";
 import type { Accessor, ComponentProps, JSX } from "solid-js";
-import { Show, createMemo } from "solid-js";
+import { Show, createMemo, createSignal } from "solid-js";
 
 import { friendlySessionLabel } from "../terminal-text.ts";
 import { ApplicationShell } from "../workspace/application-shell-view.tsx";
@@ -163,6 +163,7 @@ export interface ApplicationShellViewProps {
 
 /** Pure Solid composition over the WorkspaceClient semantic projection. */
 export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Element {
+  const [scrollback, setScrollback] = createSignal(false);
   const projection = createMemo(() => {
     const semantic = props.semantic();
     if (!semantic) return null;
@@ -395,14 +396,13 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
           >
             <ApplicationShell
               footerContext={props.surface() === "home" ? "home" : "terminals"}
+              scrollback={props.surface() === "terminals" && scrollback()}
               rightChips={
-                props.machineLabel
+                props.surface() === "terminals" && props.dimensions().width >= 60
                   ? [
                       {
-                        id: "machine",
-                        label: `SSH ${props.machineLabel}`,
-                        context: true,
-                        textColor: props.machineColor,
+                        id: "workspace-context",
+                        label: ` ${props.machineLabel ?? "Local"} · ${friendlySessionLabel(shell.activeSession)} `,
                       },
                     ]
                   : undefined
@@ -413,6 +413,11 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
               onHelp={() => props.onSetPaletteOpen(true, "mouse")}
               note={
                 props.bootstrapNote() ??
+                (props.copyFeedback
+                  ? props.copyFeedback.copied
+                    ? "Copied"
+                    : "Copy unavailable"
+                  : null) ??
                 (props.generationStatus() === "read-only"
                   ? `Read-only input · select a pane to request control · shared tmux ${props.layout().current?.cols ?? "?"}×${props.layout().current?.rows ?? "?"}`
                   : props.generationStatus())
@@ -517,6 +522,7 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                 >
                   {(source) => (
                     <ApplicationTerminalWorkspace
+                      onScrollbackChange={setScrollback}
                       layout={props.layout}
                       adapter={source.adapter}
                       rendererEpoch={source.rendererEpoch}

package/packages/daemon/src/tui/mirror/runtime/application-terminal-workspace.tsx

@@ -148,6 +148,7 @@ export function beginApplicationMouseIngress(
 }
 
 export interface ApplicationTerminalWorkspaceProps {
+  readonly onScrollbackChange?: (active: boolean) => void;
   readonly paneInteractions?: Accessor<ReadonlyMap<string, PaneInteractionProjection>>;
   readonly layout: Accessor<OpenTuiWorkspaceLayoutSnapshot>;
   readonly adapter: PaneScopedTerminalAdapter;
@@ -318,6 +319,12 @@ export function ApplicationTerminalWorkspace(props: ApplicationTerminalWorkspace
     },
     (paneId) => props.adapter.retainPaneView?.(paneId) ?? null,
   );
+
+  createEffect(() => {
+    const paneId = props.focusedPane;
+    props.onScrollbackChange?.(paneId !== null && scrollback.offset(paneId) > 0);
+  });
+  onCleanup(() => props.onScrollbackChange?.(false));
   const selectionViewport = (paneId: string, frame: OpenTuiPaneFrame) =>
     props.adapter.renderSource.supportsViewportOrigin
       ? {
@@ -1880,6 +1887,7 @@ export function ApplicationTerminalWorkspace(props: ApplicationTerminalWorkspace
       <Show when={windowLinkMenu()}>
         <Menu
           theme={props.theme}
+          viewportOrigin={{ x: props.originX ?? 0, y: props.originY ?? 0 }}
           title="Window link"
           left={0}
           top={1}
@@ -1902,6 +1910,7 @@ export function ApplicationTerminalWorkspace(props: ApplicationTerminalWorkspace
             width={paneContextMenuWidth()}
             viewportWidth={props.width}
             viewportHeight={props.height + topOffset()}
+            viewportOrigin={{ x: props.originX ?? 0, y: props.originY ?? 0 }}
             paneTitle={menu().displayName}
             active
             onDismiss={paneMenu.dismiss}

package/packages/daemon/src/tui/mirror/runtime/application-transient-note-owner.ts

@@ -31,7 +31,13 @@ export function createApplicationTransientNoteOwner(options: {
     publish(note) {
       clear();
       options.write(note);
-      if (!note) return;
+      if (
+        !note ||
+        /\b(?:failed|failure|error|unavailable|disconnected|reconnecting|recovering|read.only|denied)\b/iu.test(
+          note,
+        )
+      )
+        return;
       timer = clock.setTimeout(() => {
         timer = null;
         if (options.read() === note) options.write(null);

package/packages/daemon/src/tui/mirror/shell-chrome-view.tsx

@@ -2,6 +2,7 @@
 import { For, Show } from "solid-js";
 import {
   contextStatusPresentation,
+  meaningfulStatusMessage,
   developmentChromeLabel,
   shellNavigationPresentation,
   shellSurfaceTabs,
@@ -106,7 +107,14 @@ export function ShellTabBar(props: ShellTabBarProps) {
           />
         )}
       </For>
-      <For each={props.note ? [props.note] : []}>
+      <For
+        each={
+          meaningfulStatusMessage(props.note) &&
+          /read.only|reconnect|disconnect|recover|unavailable|failed/iu.test(props.note ?? "")
+            ? [props.note!]
+            : []
+        }
+      >
         {(note) => (
           <Badge
             theme={props.theme}
@@ -117,24 +125,28 @@ export function ShellTabBar(props: ShellTabBarProps) {
               1,
               Math.min(Math.floor(props.width / 3), terminalDisplayWidth(note) + 1),
             )}
-            tone="accent"
+            tone="warning"
           />
         )}
       </For>
       <For each={props.rightChips ?? []}>
         {(chip) => (
-          <Badge
-            theme={props.theme}
-            label={chip.label.trim()}
-            textColor={chip.textColor}
-            width={Math.max(1, terminalDisplayWidth(chip.label) + (chip.context ? 1 : 0))}
-            presentation={`${chip.label}${chip.context ? " " : ""}`}
-            surface="header"
-            hovered={chip.hovered}
-            context={chip.context}
-            attention={chip.attention}
-            tone={chip.attention ? "warning" : chip.context ? "accent" : "neutral"}
-          />
+          <text
+            width={Math.min(
+              Math.max(1, Math.floor(props.width / 3)),
+              terminalDisplayWidth(chip.label),
+            )}
+            flexShrink={0}
+            fg={
+              chip.attention
+                ? props.theme.roles.statusTone.warning
+                : (chip.textColor ?? props.theme.roles.text.muted)
+            }
+            bg={props.theme.roles.surfaces.panel}
+            overflow="hidden"
+          >
+            {clipTerminal(chip.label, Math.max(1, Math.floor(props.width / 3)))}
+          </text>
         )}
       </For>
     </Surface>
@@ -152,6 +164,7 @@ export interface ShellStatusStripProps {
   tool?: string | null;
   dockMode?: string | null;
   focus?: string | null;
+  scrollback?: boolean;
   notification: string | null;
   transient?: string | null;
   connectionState?: "connected" | "reconnecting" | "disconnected" | "recovering";
@@ -178,16 +191,19 @@ export function ContextStatusBar(props: ShellStatusStripProps) {
   const activity = () => presentation().activity;
   const showMessage = () => !/^(?:Live|\d+ sessions? live)$/iu.test(activity().label);
   const hints = () => {
-    const candidates = /^home$/iu.test(props.mode)
-      ? [
-          { keys: "↑↓", label: "Select" },
-          { keys: "Enter", label: "Open" },
-          { keys: "/", label: "Search" },
-        ]
-      : [
-          { keys: "F6", label: "Sessions" },
-          { keys: "F7", label: "Attention" },
-        ];
+    const candidates = props.scrollback
+      ? [{ keys: "Esc", label: "Back to live" }]
+      : /^home$/iu.test(props.mode)
+        ? [
+            { keys: "↑↓", label: "Select" },
+            { keys: "Enter", label: "Open" },
+            { keys: "/", label: "Search" },
+          ]
+        : [
+            { keys: "F6", label: "Sessions" },
+            { keys: "F7", label: "Attention" },
+            { keys: "F10", label: "Sidebar" },
+          ];
     let remaining = available();
     return candidates.filter((hint) => {
       const width = terminalDisplayWidth(`${hint.keys} ${hint.label}`) + 2;

package/packages/daemon/src/tui/mirror/shell-chrome.ts

@@ -385,9 +385,13 @@ export interface ContextStatusPresentation {
   readonly hints: readonly ContextStatusHint[];
 }
 
-function meaningfulStatusMessage(message: string | null | undefined): string | null {
+export function meaningfulStatusMessage(message: string | null | undefined): string | null {
   const value = message?.trim();
-  if (!value || /^(?:ready|live|connected)$/iu.test(value)) return null;
+  if (
+    !value ||
+    /^(?:ready|live|connected|live tmux sessions? discovered|\d+ sessions? live)$/iu.test(value)
+  )
+    return null;
   return value;
 }
 
@@ -445,7 +449,14 @@ export function contextStatusPresentation(input: {
         : input.connectionState === "recovering"
           ? "Recovering"
           : "Disconnected";
-  const activityLabel = transient ?? notification ?? connectionLabel;
+  const persistentProblem =
+    notification && contextStatusTone(notification, "connected").tone === "blocked";
+  const activityLabel =
+    input.connectionState !== "connected"
+      ? (notification ?? connectionLabel)
+      : persistentProblem
+        ? notification
+        : (transient ?? notification ?? connectionLabel);
   const activityTone = contextStatusTone(activityLabel, input.connectionState);
   const location: ContextStatusLocationSegment[] =
     input.variant === "wide"

package/packages/daemon/src/tui/mirror/theme.ts

@@ -10,6 +10,9 @@
  * verbatim, aliasing @opentui/core to a browser shim that only exposes RGBA.
  */
 import { RGBA } from "@opentui/core";
+
+/** Shared scrim for modal surfaces across light and dark themes. */
+export const MODAL_BACKDROP = RGBA.fromInts(0, 0, 0, 150);
 import {
   BUILTIN_VISUAL_THEMES,
   findVisualThemePreset,

package/packages/daemon/src/tui/mirror/ui/button.tsx

@@ -16,7 +16,7 @@ export interface TuiButtonProps extends ComponentInteractionState {
   variant?: ButtonVariant;
   size?: ButtonSize;
   width?: number;
-  /** Opaque surface used by neutral/ghost controls embedded in custom chrome. */
+  /** Opaque base surface used by neutral controls embedded in custom chrome. */
   background?: RGBA;
   onPress?: () => void;
 }
@@ -55,7 +55,7 @@ export function TuiButton(props: TuiButtonProps) {
     return clipTerminal(`${" ".repeat(inset)}${marker}${props.label}${shortcut} `, width());
   };
   const background = () =>
-    variant() === "ghost" && palette().state === "base"
+    palette().state === "base" && (variant() === "ghost" || variant() === "secondary")
       ? (props.background ?? props.theme.roles.surfaces.panel)
       : palette().background;
   const activate = () => {

package/packages/daemon/src/tui/mirror/ui/menu.tsx

@@ -24,6 +24,7 @@ export interface MenuProps {
   width: number;
   viewportWidth?: number;
   viewportHeight?: number;
+  viewportOrigin?: Readonly<{ x: number; y: number }>;
   zIndex?: number;
   active?: boolean;
   footer?: string;
@@ -53,6 +54,7 @@ export function Menu(props: MenuProps) {
       }
       width={props.width}
       height={preferredHeight()}
+      viewportOrigin={props.viewportOrigin}
       placement="anchor"
       anchor={{ x: props.left, y: props.top }}
       zIndex={props.zIndex ?? 20}

package/packages/daemon/src/tui/mirror/ui/overlay-frame.tsx

@@ -1,7 +1,8 @@
 /* @jsxImportSource @opentui/solid */
-import type { JSX } from "@opentui/solid";
+import { Portal, useTerminalDimensions, type JSX } from "@opentui/solid";
+import { type BoxRenderable } from "@opentui/core";
 
-import type { SemanticThemeSnapshot } from "../theme.ts";
+import { MODAL_BACKDROP, type SemanticThemeSnapshot } from "../theme.ts";
 import { clipTerminal } from "../terminal-text.ts";
 import { overlayFrameSize, overlaySurfacePadding, type OverlayPlacement } from "./overlay-model.ts";
 
@@ -17,6 +18,8 @@ export interface OverlayFrameProps {
   footer?: string;
   placement?: OverlayPlacement;
   anchor?: Readonly<{ x: number; y: number }>;
+  /** Lift an anchored workspace menu into the full application overlay plane. */
+  viewportOrigin?: Readonly<{ x: number; y: number }>;
   modal?: boolean;
   active?: boolean;
   zIndex?: number;
@@ -27,8 +30,11 @@ export interface OverlayFrameProps {
 
 /** Owns modal geometry and pointer capture without owning commands or renderer lifecycle. */
 export function OverlayFrame(props: OverlayFrameProps) {
-  const viewportWidth = () => Math.max(1, Math.floor(props.viewportWidth));
-  const viewportHeight = () => Math.max(1, Math.floor(props.viewportHeight));
+  const dimensions = useTerminalDimensions();
+  const viewportWidth = () =>
+    Math.max(1, Math.floor(props.viewportOrigin ? dimensions().width : props.viewportWidth));
+  const viewportHeight = () =>
+    Math.max(1, Math.floor(props.viewportOrigin ? dimensions().height : props.viewportHeight));
   const size = () =>
     overlayFrameSize({
       viewportWidth: viewportWidth(),
@@ -48,13 +54,25 @@ export function OverlayFrame(props: OverlayFrameProps) {
     );
   const left = () => {
     if (props.placement === "anchor")
-      return Math.max(0, Math.min(props.anchor?.x ?? 0, viewportWidth() - width()));
+      return Math.max(
+        0,
+        Math.min(
+          (props.anchor?.x ?? 0) + (props.viewportOrigin?.x ?? 0),
+          viewportWidth() - width(),
+        ),
+      );
     if (props.placement === "top-right") return Math.max(0, viewportWidth() - width() - 1);
     return Math.max(0, Math.floor((viewportWidth() - width()) / 2));
   };
   const top = () => {
     if (props.placement === "anchor")
-      return Math.max(0, Math.min(props.anchor?.y ?? 0, viewportHeight() - height()));
+      return Math.max(
+        0,
+        Math.min(
+          (props.anchor?.y ?? 0) + (props.viewportOrigin?.y ?? 0),
+          viewportHeight() - height(),
+        ),
+      );
     if (props.placement === "top-right") return Math.min(1, viewportHeight() - height());
     return Math.max(0, Math.floor((viewportHeight() - height()) / 2));
   };
@@ -139,7 +157,7 @@ export function OverlayFrame(props: OverlayFrameProps) {
     </box>
   );
   if (props.modal === false) return frame();
-  return (
+  const host = () => (
     <box
       id="ui-overlay-frame-host"
       position="absolute"
@@ -148,6 +166,7 @@ export function OverlayFrame(props: OverlayFrameProps) {
       width={viewportWidth()}
       height={viewportHeight()}
       zIndex={props.zIndex ?? 100}
+      backgroundColor={props.active === false ? undefined : MODAL_BACKDROP}
       onMouseDown={(event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -157,4 +176,21 @@ export function OverlayFrame(props: OverlayFrameProps) {
       {frame()}
     </box>
   );
+  return props.viewportOrigin ? (
+    <Portal
+      ref={(node) => {
+        const container = node as BoxRenderable;
+        container.position = "absolute";
+        container.left = 0;
+        container.top = 0;
+        container.width = "100%";
+        container.height = "100%";
+        container.zIndex = props.zIndex ?? 100;
+      }}
+    >
+      {host()}
+    </Portal>
+  ) : (
+    host()
+  );
 }

package/packages/daemon/src/tui/mirror/workspace/__snapshots__/application-shell-renderer.test.tsx.snap

@@ -1,7 +1,7 @@
 // Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`production ApplicationShell → WorkbenchShell OpenTUI renderer records the %sx%s collapsed dock acceptance baseline 1`] = `
-"  ⌂  ●❯                                               production application ro…
+"  ⌂  ●❯
   tmux              ▌› Native terminal canvas                 terminals · canvas
  ● main
  ○ website
@@ -28,7 +28,7 @@ exports[`production ApplicationShell → WorkbenchShell OpenTUI renderer records
 `;
 
 exports[`production ApplicationShell → WorkbenchShell OpenTUI renderer records the %sx%s open dock acceptance baseline 1`] = `
-"   tmux-ide   ⌂ Home  ●❯ Terminals                                                          production application root
+"   tmux-ide   ⌂ Home  ●❯ Terminals
   tmux-ide                  ▌› Native terminal canvas                                                 terminals · canvas
  ● main
  ○ website
@@ -71,7 +71,7 @@ exports[`production ApplicationShell → WorkbenchShell OpenTUI renderer records
 `;
 
 exports[`production ApplicationShell → WorkbenchShell OpenTUI renderer records the %sx%s maximized dock acceptance baseline 1`] = `
-"   tmux-ide  F1  ⌂ Home  F2 ●❯ Terminals                                                                                                                                    production application root
+"   tmux-ide  F1  ⌂ Home  F2 ●❯ Terminals
   tmux-ide                   ▸ tools  F3  ▤ Files  F4  ± Changes  F6 ●◆ Missions  F9  ◷ Activity                                                                                    ▾ close   ▣ restore
  ● main                     ▌○ Native Missions surface                                                                                                                                         maximized
  ○ website

package/packages/daemon/src/tui/mirror/workspace/application-shell-view.tsx

@@ -11,6 +11,7 @@ import type { SemanticThemeSnapshot } from "../theme.ts";
 import type { ApplicationShellProjection } from "./application-shell.ts";
 
 export interface ApplicationShellProps {
+  scrollback?: boolean;
   footerContext?: "home" | "terminals";
   theme: SemanticThemeSnapshot;
   projection: ApplicationShellProjection;
@@ -144,6 +145,7 @@ export function ApplicationShell(props: ApplicationShellProps) {
               props.showToolStatus === false ? null : props.projection.semantic.bottomDock.mode
             }
             focus={props.focusLabel ?? applicationShellFocusLabel(props.projection)}
+            scrollback={props.scrollback}
             notification={props.projection.semantic.statusStrip.message}
             transient={props.note}
             connectionState={props.projection.semantic.statusStrip.state}

package/packages/daemon/src/tui/mirror/workspace/pane-action-menu.tsx

@@ -12,6 +12,7 @@ export interface PaneActionMenuProps {
   readonly width: number;
   readonly viewportWidth?: number;
   readonly viewportHeight?: number;
+  readonly viewportOrigin?: Readonly<{ x: number; y: number }>;
   readonly active?: boolean;
   readonly selectedId: PaneMenuActionId;
   readonly closeArmed: boolean;
@@ -39,6 +40,7 @@ export function PaneActionMenu(props: PaneActionMenuProps) {
       width={props.width}
       viewportWidth={props.viewportWidth}
       viewportHeight={props.viewportHeight}
+      viewportOrigin={props.viewportOrigin}
       active={props.active}
       title={props.paneTitle}
       footer={

package/packages/daemon/src/tui/mirror/workspace/terminal-pane-header.tsx

@@ -84,6 +84,7 @@ function badgeWidth(status: string | undefined): number {
  */
 export function PaneTitleBar(props: PaneTitleBarProps) {
   const [pointerInside, setPointerInside] = createSignal(false);
+  const [menuHovered, setMenuHovered] = createSignal(false);
   const hovered = () => props.hovered ?? pointerInside();
   const safeWidth = () => Math.max(1, Math.floor(props.width));
   const status = () => agentStatus(props.activity);
@@ -96,11 +97,17 @@ export function PaneTitleBar(props: PaneTitleBarProps) {
   const presence = () => (props.interaction ? paneInteractionPresence(props.interaction) : null);
   const activityLabel = () =>
     presence()
-      ? `${presence()!.badge}${props.interaction?.origin === "external" ? " · External tmux" : ""}`
+      ? `${presence()!.badge[0]}${presence()!.badge.slice(1).toLowerCase()}${props.interaction?.origin === "external" ? " · tmux" : ""}`
       : "";
   const activityWidth = () => {
     const available =
-      safeWidth() - markerGutterWidth() - markerWidth() - actionWidth() - zoomWidth() - 4;
+      safeWidth() -
+      markerGutterWidth() -
+      markerWidth() -
+      actionWidth() -
+      zoomWidth() -
+      badgeWidth(statusLabel()) -
+      12;
     if (!presence() || available < presence()!.badge.length + 2) return 0;
     return Math.min(available, terminalDisplayWidth(activityLabel()) + 2);
   };
@@ -111,13 +118,6 @@ export function PaneTitleBar(props: PaneTitleBarProps) {
   // Reserve these cells even when the control is quiet or unavailable. Hover
   // and menu lifetime must never change title clipping or terminal geometry.
   const actionWidth = () => (safeWidth() >= 7 ? 3 : 0);
-  const actionsVisible = () =>
-    props.selected ||
-    props.keyboardFocused ||
-    props.terminalFocused ||
-    hovered() ||
-    props.menuFocused ||
-    props.menuOpen;
   const zoomLabel = () =>
     !props.zoomed
       ? ""
@@ -267,49 +267,60 @@ export function PaneTitleBar(props: PaneTitleBarProps) {
           {clipTerminal(zoomLabel(), zoomWidth())}
         </text>
       ) : null}
-      <Show when={activityBadge()} keyed>
-        {(activity) => (
-          <Badge
+      <box
+        id={`pane-header-status:${props.paneId}`}
+        width={activityWidth() + (showBadge() ? badgeWidth(statusLabel()) : 0)}
+        height={1}
+        flexShrink={0}
+        flexDirection="row"
+        backgroundColor={props.theme.roles.surfaces.panel}
+      >
+        <Show when={activityBadge()} keyed>
+          {(activity) => (
+            <Badge
+              theme={props.theme}
+              label={activity.label}
+              width={activity.width}
+              tone={
+                activity.presence.tone === "danger"
+                  ? "destructive"
+                  : activity.presence.tone === "info"
+                    ? "accent"
+                    : "done"
+              }
+            />
+          )}
+        </Show>
+        {showBadge() ? (
+          <AgentBadge
             theme={props.theme}
-            label={activity.label}
-            width={activity.width}
-            tone={
-              activity.presence.tone === "danger"
-                ? "destructive"
-                : activity.presence.tone === "info"
-                  ? "accent"
-                  : "done"
-            }
-            selected={props.selected}
-            focused={props.keyboardFocused || props.terminalFocused}
+            label={statusLabel()!}
+            status={status()!}
+            activity={props.activity}
+            width={badgeWidth(statusLabel())}
+            attention={props.attention}
           />
-        )}
-      </Show>
-      {showBadge() ? (
-        <AgentBadge
-          theme={props.theme}
-          label={statusLabel()!}
-          status={status()!}
-          activity={props.activity}
-          width={badgeWidth(statusLabel())}
-          selected={props.selected}
-          focused={props.keyboardFocused || props.terminalFocused}
-          hovered={hovered()}
-          attention={props.attention}
-        />
-      ) : null}
+        ) : null}
+      </box>
       {actionWidth() > 0 ? (
-        <box width={actionWidth()} height={1} flexShrink={0}>
+        <box
+          width={actionWidth()}
+          height={1}
+          flexShrink={0}
+          onMouseOver={() => setMenuHovered(true)}
+          onMouseOut={() => setMenuHovered(false)}
+        >
           <IconButton
             theme={props.theme}
-            icon={actionsVisible() ? "⋯" : " "}
+            icon="⋯"
             label="Pane actions"
-            variant="ghost"
+            variant="secondary"
             width={actionWidth()}
+            hovered={menuHovered()}
             focused={props.menuFocused}
             selected={props.menuOpen}
             disabled={props.menuDisabled}
-            background={palette().background}
+            background={props.theme.roles.surfaces.panelRaised}
             onPress={() => activateMenu()}
           />
         </box>