fix(console): terminal toolbar sits above the terminal, not over it (v0.469.4)

CHANGELOG.md

@@ -8,6 +8,16 @@ new version heading in the same commit.
 
 ## [Unreleased]
 
+## [0.469.4] - 2026-11-10
+### Fixed
+- **The terminal toolbar no longer covers the agent's own controls.** The font stepper, Help, Pop out,
+  Focus, Files, Operations and Attach file buttons floated over the terminal's top row, which is where
+  Claude Code puts clickable controls of its own — the `/diff` panel ("No changes this session") has its
+  only close button, a ✕, top-right, so it could not be closed by mouse. The buttons now sit in a strip
+  above the terminal.
+  **For users:** the session terminal's buttons now sit above the terminal instead of on top of it, so
+  nothing in the agent's screen is hidden behind them.
+
 ## [0.469.3] - 2026-11-10
 ### Fixed
 - **A resumed session no longer comes up "Not logged in" or as a blank conversation after a runtime account

package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-os",
-  "version": "0.469.3",
+  "version": "0.469.4",
   "description": "A generic, governed operating system for running autonomous agents safely across brands. Ships with a local web console.",
   "license": "MIT",
   "type": "commonjs",

web/src/App.tsx

@@ -3803,10 +3803,13 @@ function ImageDropZone({ session, attachable, children, onActivity, fontSize, se
   }, [toast])
 
   return (
-    <div ref={wrapRef} className="relative flex min-h-0 w-full flex-1" onMouseDown={() => onActivity?.()}>
-      {children}
-      {/* top-left: terminal font-size stepper + a help button (shortcuts / quirks) */}
-      <div className="absolute left-2 top-2 z-10 flex items-center gap-1.5">
+    <div ref={wrapRef} className="relative flex min-h-0 w-full flex-1 flex-col" onMouseDown={() => onActivity?.()}>
+      {/* Toolbar strip ABOVE the terminal, never floating over it. Claude Code's TUI puts clickable
+          controls in its own top row (the `/diff` panel's only close button is a ✕ top-right), and an
+          overlaid toolbar hid them with no way to reach them by mouse. */}
+      <div className="flex shrink-0 flex-wrap items-center justify-between gap-1.5 bg-neutral-950 px-2 py-1">
+      {/* left: terminal font-size stepper + a help button (shortcuts / quirks) */}
+      <div className="flex items-center gap-1.5">
         <div className="flex items-center overflow-hidden rounded bg-neutral-800/90 text-neutral-200 shadow">
           <button
             className="px-2 py-1 text-xs leading-none hover:bg-neutral-700 disabled:opacity-40"
@@ -3828,8 +3831,8 @@ function ImageDropZone({ session, attachable, children, onActivity, fontSize, se
         {session?.id && <QuickShortcuts session={session} attachable={Boolean(attachable)} />}
       </div>
       <TerminalHelpModal open={help} onClose={() => setHelp(false)} />
-      {/* top-right session toolbar: distraction-free + popout, browse the agent's folder + attach a file */}
-      <div className="absolute right-2 top-2 z-10 flex items-center gap-1.5">
+      {/* right: session toolbar — distraction-free + popout, browse the agent's folder + attach a file */}
+      <div className="flex items-center gap-1.5">
         {popoutHref && (
           <a
             href={popoutHref} target="_blank" rel="noreferrer"
@@ -3885,6 +3888,8 @@ function ImageDropZone({ session, attachable, children, onActivity, fontSize, se
             onChange={(e) => { const f = e.target.files?.[0]; if (f) void upload(f); e.currentTarget.value = '' }} />
         </label>
       </div>
+      </div>
+      <div className="relative flex min-h-0 w-full flex-1">{children}</div>
       {/* drag overlay — raised ON TOP of the iframe (z-30, interactive) only while a file-drag is in
           progress, so it catches the drop the iframe would otherwise swallow */}
       {drag && (