fix(console): #140 bug fixes + multi-session manager (tabs/dock/popout)

[sarg3nt]

Summary

Closes #140.

Started as the bug fixes from #140 (404 on shell icon, drop-to-Home navigation, Tools-column placement). User asked to bundle scope-creep QoL work in the same PR — multi-session/tabs/dock/popout/font-slider — since they prefer one big diff over many small ones. Result: full console-manager rewrite layered on top of the original fixes.

Bug fixes (original #140 scope)

• d.id → d.box_id at three call sites in static/js/bx/bx-page.js (cellClick, palette command id, palette run). BoxRow.JSONfield is box_id, not id — old code sent /api/console/undefined/capabilities → 404.
• Guard grid.on('rowClick', …) against clicks originating in the Tools column. Tabulator fires rowClick from its own event delegation independent of DOM bubbling, so e.stopPropagation() inside cellClick was not enough.
• Move shell icon out from between Name / Location into a right-anchored Tools column. Originally frozen: true; switched to unfrozen after the user pointed out the Tabulator divider was ugly.

Reusable console plumbing

static/js/console/console.js rewritten as a ConsoleSession (one PTY + xterm + WS) plus a ConsoleManager (chrome / tabs / layout / prefs). Sessions take a descriptor: { kind, boxID, … }. Adding container-exec for the future Docker gear means a new kind: 'container' case in wsURLForDescriptor + capsURLForDescriptor — the chrome and tabs come along for free.

Layouts

• drawer — fullscreen overlay (the original behavior).
• dock — pinned bottom strip, drag-resizable, height persisted to localStorage["gearbox.console.dockHeight"]. Pure-CSS sibling selector keeps the dock anchored to the right of the sidebar (#main-content.ml-16 ~ #console-drawer.console-layout-dock { left: 4rem }), with a transition: left 0.3s to track the sidebar's own collapse animation.
• popout — window.open('/console/popout/{boxID}', '_blank', 'popup=yes …') opens a chromeless window driven by pages.ConsolePopoutPage. Authentication + per-box opt-in gating match APIConsoleCapabilities. In popout mode all chrome is hidden (.console-popout .console-header, .console-tab-bar, .console-dock-handle { display: none }) so the terminal fills the window.

Drawer ↔ dock are mutually exclusive — only the inactive layout's button is visible in the toolbar. Popout button stays put.

Tabs

• Tab strip + per-tab close button, visible from the first session so the + new tab affordance is always discoverable.
• Every click of the bx-grid shell icon spawns a new tab (no de-duping). The + button reuses the active tab's descriptor — "another shell into the same box."
• Duplicate labels get a #N suffix at render time; closing one of two clones renames the survivor back.
• Per-tab status dot (left of the label) doubles as the reconnect button: green = connected (inert), yellow = connecting, red = error (clickable → reconnect), gray = closed/idle. Connected dots are inert to avoid an accidental session rip.

Header + toolbar

• "Console: <box>" prefix + box-name span + status/mode/uid pills all removed — the box name lives in the tab, the dot carries connection state, uid is recoverable with whoami, mode is a single value today (revisit if we add an SSH-bridge mode).
• Toolbar: font-slider (10–24 px, persisted to localStorage, matches logs-viewer pattern), Clear, layout-switch (drawer-or-dock, mutually exclusive), popout, close.
• Header padding tightened (py-2 → py-1), dock resize handle dropped from 6px → 5px.

Preferences

All under gearbox.console.*:

• fontSize (int 10..24, default 13) — applied to all sessions immediately
• dockHeight (int px, default 320, min 160)
• layout ("drawer" | "dock", default "drawer") — popout is transient, never persisted

Files

gearbox/cmd/server/main.go                                           +5      route /console/popout/{boxID}
gearbox/internal/framework/handler/console_popout.go                 +46     NEW — popout page handler
gearbox/internal/framework/templates/components/console.templ        ~151    drawer chrome rewritten
gearbox/internal/framework/templates/pages/console_popout.templ      +69     NEW — chromeless popout page
gearbox/static/css/components/console.css                            +253    NEW — layouts, tabs, dot, handle
gearbox/static/js/bx/bx-page.js                                      ~59     bug fixes + Tools column
gearbox/static/js/console/console.js                                 ~1001   ConsoleSession + ConsoleManager

Test plan

• Shell icon on the bx grid opens a console for the targeted box (no 404, no nav to Home).
• Tools column on the right of the grid, no divider between Last checked and Tools.
• Clicking the shell icon twice opens two tabs against the same box, labelled Light Hugger #1 / #2.
• Closing one duplicate tab renames the survivor back to Light Hugger.
• Closing the only tab closes the panel.
• Per-tab dot is green when connected, red on error, clickable to reconnect when closed/errored.
• Font slider changes the size live, persists across reload, applies to all sessions in the panel.
• Drawer ↔ dock toggle: clicking the visible layout button swaps modes; only one layout button is visible at a time.
• In dock mode, the panel sits to the right of the sidebar (does NOT cover it), drag handle resizes, the height survives a reload.
• Collapsing the sidebar slides the dock left to meet it (transition synced).
• Popout button opens a new chromeless window with no header / tabs / toolbar — just the terminal.
• Cmd-W closes the popout window cleanly.
• Esc closes the in-page console (or just the active tab in dock mode with ≥ 2 sessions); Esc is a no-op inside a popout window.
• Permissions still gated: a user without box_console:view gets 403 on /console/popout/{boxID}.
• A box with console_enabled: false returns 404 on /console/popout/{boxID} and the bx grid does not show the shell icon for it.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR fixes the /bx console-launch regressions from #140 and introduces a rewritten multi-session console UI (tabs + dock + popout) built around a ConsoleSession/ConsoleManager architecture. It also adds a new server route + handler + templ page to support a chromeless console popout window.

Changes:

• Fix bx-grid console actions: correct box_id usage, prevent Tools-cell clicks from triggering row navigation, and move the shell icon into a dedicated Tools column.
• Replace the single-session console drawer JS with a multi-session manager supporting tabs, drawer/dock layouts, persisted preferences, and popout.
• Add popout page plumbing (route, handler, templ page) and new console panel CSS (layouts, tabs, status dot, dock resize handle).

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
gearbox/static/js/console/console.js	Rewritten console client into session/manager model with tabs, layout modes, popout integration, and persisted prefs.
gearbox/static/js/bx/bx-page.js	Fixes console launch bugs (wrong ID field, rowClick interference) and adds a Tools column.
gearbox/static/css/components/console.css	New stylesheet for console chrome: dock/drawer positioning, tabs, status dot, dock resize handle, popout mode.
gearbox/internal/framework/templates/components/console.templ	Updates ConsoleDrawer markup for new toolbar/tab UI and loads console.css.
gearbox/internal/framework/templates/pages/console_popout.templ	New standalone chromeless page that boots the console manager in popout mode.
gearbox/internal/framework/handler/console_popout.go	New handler to serve the popout page with auth + box gating.
gearbox/cmd/server/main.go	Registers /console/popout/{boxID} route.