address Copilot review findings on PR #141

- ARIA tab semantics: move role="tab" onto the label button so nested
  interactive elements (dot, close) are siblings of the tabbable element,
  not nested inside it. Wrapper is now role="presentation".
- Per-tab status dot: add aria-label that reflects current state and
  reconnect action; aria-disabled when inert.
- Toolbar buttons (clear, layout-drawer/dock/popout, close, +): add
  explicit aria-label; mark icon SVGs aria-hidden so screen readers
  don't try to announce path data.
- Capabilities fetch failures and websocket errors now also write a
  red [console] line into the xterm buffer, so a failing session
  isn't a silent black void — matches the existing 'err' frame path.
- Dock resize: switch from mouse events to Pointer Events with
  setPointerCapture/releasePointerCapture, plus blur and
  visibilitychange cleanups. Prevents stuck drag state when the mouse
  releases outside the window.
- Fix CSS selector for .xterm height: actual DOM is
  .console-xterm-pad > #console-xterm > .console-session-host > .xterm
  — old selector skipped the #console-xterm wrapper, so the rule was
  inert and the terminal didn't always fill its container.
- Popout templ doc comment was stale (mentioned overriding the close
  button); CSS now hides the entire header in popout mode, comment
  updated to match.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: sarg3nt

gearbox/internal/framework/templates/components/console.templ

@@ -51,8 +51,9 @@ templ ConsoleDrawer() {
 				<button type="button"
 					id="console-btn-clear"
 					class="console-tool-btn"
+					aria-label="Clear terminal buffer"
 					title="Clear (Ctrl-L sends to remote; this just clears the local buffer)">
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<svg class="w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M1 7h22M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3"></path>
 					</svg>
 				</button>
@@ -63,33 +64,37 @@ templ ConsoleDrawer() {
 				<button type="button"
 					id="console-btn-layout-drawer"
 					class="console-tool-btn"
+					aria-label="Switch to fullscreen layout"
 					title="Fullscreen drawer">
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<svg class="w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
 					</svg>
 				</button>
 				<button type="button"
 					id="console-btn-layout-dock"
 					class="console-tool-btn"
+					aria-label="Switch to docked layout"
 					title="Dock to bottom">
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<svg class="w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<rect x="3" y="4" width="18" height="16" rx="2" stroke-width="2"></rect>
 						<line x1="3" y1="14" x2="21" y2="14" stroke-width="2"></line>
 					</svg>
 				</button>
 				<button type="button"
 					id="console-btn-layout-popout"
 					class="console-tool-btn"
+					aria-label="Open console in new window"
 					title="Open in new window">
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<svg class="w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
 					</svg>
 				</button>
 				<button type="button"
 					id="console-drawer-close"
 					class="console-tool-btn"
+					aria-label="Close console"
 					title="Close console (Esc)">
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<svg class="w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
 					</svg>
 				</button>
@@ -106,7 +111,7 @@ templ ConsoleDrawer() {
 				class="console-tab-new"
 				aria-label="New tab"
 				title="Open another tab to this box">
-				<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<svg class="w-3 h-3" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
 				</svg>
 			</button>

gearbox/internal/framework/templates/pages/console_popout.templ

@@ -11,10 +11,14 @@ import (
 // — just the ConsoleDrawer in fullscreen mode plus the assets needed to
 // drive it.
 //
-// On load the inline boot script calls markPopout (which hides the
-// layout-switch buttons that don't apply here) and opens a session
-// against the given box. Closing the drawer here means closing the
-// browser tab — handled by overriding the close button to window.close().
+// On load the inline boot script calls markPopout which:
+//   1. Tags the drawer with .console-popout so CSS hides the entire
+//      header (incl. the close button) and the tab bar — the popout
+//      window is single-session, all chrome controls are meaningless.
+//   2. Forces the layout to drawer (fullscreen) and disables Esc-to-close.
+//
+// The only way to exit a popout is closing the OS window (Cmd-W /
+// red close button) — by design, since the chrome's gone anyway.
 templ ConsolePopoutPage(boxID string, boxName string) {
 	<!DOCTYPE html>
 	<html lang="en" class="h-full">

gearbox/static/css/components/console.css

@@ -247,7 +247,13 @@ body.console-dock-open {
 }
 
 /* The .xterm viewport already handles its own scrollbar; suppress the
- * outer wrapper's so we don't get two stacked tracks during transitions. */
-.console-xterm-pad > .console-session-host > .xterm {
+ * outer wrapper's so we don't get two stacked tracks during transitions.
+ * DOM hierarchy is .console-xterm-pad > #console-xterm > .console-session-host > .xterm
+ * — sessions append their host into #console-xterm. */
+.console-xterm-pad #console-xterm > .console-session-host > .xterm {
+	height: 100%;
+}
+#console-xterm {
+	width: 100%;
 	height: 100%;
 }

gearbox/static/js/console/console.js

@@ -237,6 +237,15 @@
         this.ws.send(JSON.stringify({ t: 'resize', cols: cols, rows: rows }));
     };
 
+    // Emit a visible error line into the xterm buffer. The status dot
+    // also reflects the state via color, but the terminal needs its own
+    // surface so a failing session isn't a silent black void. Matches
+    // the server-side 'err' frame path which already writes red text.
+    ConsoleSession.prototype._writeError = function (msg) {
+        if (!this.term) return;
+        this.term.write('\r\n\x1b[31m[console] ' + msg + '\x1b[0m\r\n');
+    };
+
     ConsoleSession.prototype.connect = function () {
         this._ensureTerm();
         if (this.ws) { try { this.ws.close(); } catch (_) {} }
@@ -255,6 +264,7 @@
                     self.mode = '';
                     self.uid = null;
                     self.errorMsg = 'disabled on agent';
+                    self._writeError('console disabled on this agent');
                     self._setStatus('error');
                     return;
                 }
@@ -264,6 +274,7 @@
             })
             .catch(function (e) {
                 self.errorMsg = e.message;
+                self._writeError('capabilities fetch failed: ' + e.message);
                 self._setStatus('error');
             });
     };
@@ -304,6 +315,7 @@
         };
         ws.onerror = function () {
             self.errorMsg = 'socket error';
+            self._writeError('websocket error');
             self._setStatus('error');
         };
         ws.onclose = function () {
@@ -399,31 +411,50 @@
         if (!handle) return;
         const self = this;
         let dragging = false;
+        let pointerID = null;
         let startY = 0;
         let startH = 0;
 
-        handle.addEventListener('mousedown', function (e) {
+        // Pointer Events with setPointerCapture so drag state survives
+        // the cursor leaving the window — mouseup-outside used to leave
+        // the dock in a stuck "still resizing" state. visibilitychange
+        // and blur are additional belt-and-suspenders cleanups.
+        const stopDrag = function () {
+            if (!dragging) return;
+            dragging = false;
+            try { if (pointerID !== null) handle.releasePointerCapture(pointerID); } catch (_) {}
+            pointerID = null;
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            prefSet('dockHeight', self.dockHeight);
+            const s = self._active();
+            if (s) s.fit();
+        };
+
+        handle.addEventListener('pointerdown', function (e) {
             dragging = true;
+            pointerID = e.pointerId;
             startY = e.clientY;
             startH = self.dockHeight;
             document.body.style.cursor = 'row-resize';
             document.body.style.userSelect = 'none';
+            try { handle.setPointerCapture(e.pointerId); } catch (_) {}
             e.preventDefault();
         });
-        window.addEventListener('mousemove', function (e) {
-            if (!dragging) return;
+        handle.addEventListener('pointermove', function (e) {
+            if (!dragging || e.pointerId !== pointerID) return;
             const dy = startY - e.clientY;
             self.dockHeight = clampInt(startH + dy, DOCK_MIN, window.innerHeight - 100);
             self._applyDockHeight();
         });
-        window.addEventListener('mouseup', function () {
-            if (!dragging) return;
-            dragging = false;
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-            prefSet('dockHeight', self.dockHeight);
-            const s = self._active();
-            if (s) s.fit();
+        handle.addEventListener('pointerup', stopDrag);
+        handle.addEventListener('pointercancel', stopDrag);
+        // If the user alt-tabs or the page is hidden mid-drag, treat it
+        // as drop — without these the body cursor/userSelect overrides
+        // can linger after the user returns.
+        window.addEventListener('blur', stopDrag);
+        document.addEventListener('visibilitychange', function () {
+            if (document.hidden) stopDrag();
         });
     };
 
@@ -665,10 +696,14 @@
                 ? s.label + ' #' + labelIdx[s.label]
                 : s.label;
 
+            // Tab wrapper is layout-only — the focusable element with
+            // role="tab" is the label button. This keeps ARIA semantics
+            // happy: nested interactive children (dot, close) sit inside
+            // the wrapper but are siblings of the role="tab" element,
+            // not nested inside it. See Copilot review on PR #141.
             const tab = document.createElement('div');
             tab.className = 'console-tab' + (s.id === self.activeID ? ' active' : '');
-            tab.setAttribute('role', 'tab');
-            tab.setAttribute('aria-selected', s.id === self.activeID ? 'true' : 'false');
+            tab.setAttribute('role', 'presentation');
 
             // Per-tab status dot. Doubles as a reconnect button when the
             // session is closed/errored — clicking switches active to
@@ -678,17 +713,22 @@
             dot.type = 'button';
             dot.className = 'console-tab-dot is-' + s.status;
             const isReconnectable = s.status === 'closed' || s.status === 'error';
+            const dotStateText = ({
+                connected: 'Connected',
+                connecting: 'Connecting',
+                idle: 'Idle',
+                closed: 'Closed',
+                error: 'Error: ' + (s.errorMsg || 'unknown'),
+            })[s.status] || s.status;
             if (isReconnectable) {
                 dot.classList.add('is-clickable');
-                dot.title = (s.status === 'error'
-                    ? 'Error: ' + (s.errorMsg || 'unknown')
-                    : 'Closed') + ' — click to reconnect';
+                dot.title = dotStateText + ' — click to reconnect';
+                dot.setAttribute('aria-label', display + ' — ' + dotStateText + '. Click to reconnect.');
+                dot.removeAttribute('aria-disabled');
             } else {
-                dot.title = ({
-                    connected: 'Connected',
-                    connecting: 'Connecting…',
-                    idle: '',
-                })[s.status] || s.status;
+                dot.title = dotStateText;
+                dot.setAttribute('aria-label', display + ' — ' + dotStateText);
+                dot.setAttribute('aria-disabled', 'true');
             }
             dot.addEventListener('click', function (e) {
                 e.stopPropagation();
@@ -700,6 +740,11 @@
             label.className = 'console-tab-label';
             label.textContent = display;
             label.title = display + ' (' + s.status + ')';
+            // Label button carries the role="tab" semantics so screen
+            // readers expose the tab list correctly (one role="tab" per
+            // tab, focusable, with aria-selected reflecting active).
+            label.setAttribute('role', 'tab');
+            label.setAttribute('aria-selected', s.id === self.activeID ? 'true' : 'false');
             label.addEventListener('click', function () { self._setActive(s.id); });
 
             const close = document.createElement('button');