Skip to content

feat: floating control panel — the draggable palette replaces the static header controls - #181

Merged
lex00 merged 2 commits into
mainfrom
feat/control-panel
Aug 9, 2026
Merged

feat: floating control panel — the draggable palette replaces the static header controls#181
lex00 merged 2 commits into
mainfrom
feat/control-panel

Conversation

@lex00

@lex00 lex00 commented Aug 9, 2026

Copy link
Copy Markdown
Contributor

Closes #180.

All static UI controls move off the fixed chrome into one floating, Adobe-style control panel. The header keeps only state (meta line + the zoom/env/stack/tier strip); ⌘K keeps every command and gains panel entries.

What's in the panel

Tab Contents
View zoom stops, radial toggle, fit / SVG export / inspect toggle, lanes link, theme picker
Scope env (source vs live overlay), stack, tier, target — visible now, not ⌘K-only
Substrates status rows with bring-up / reset / run-pipeline actions inline
Model the two old header legends as live counts + per-component applied/unapplied rows that click through to inspect
Deploy the deploy actions bar and the observe → reconcile → apply dial

Chrome (web/panel.js, new)

  • Drag by the title bar; magnetic snap to viewport edges and corners (both = corner dock); a snapped edge stays flush through window resizes and content-height changes.
  • Collapse to the title bar via the chevron or a double-click; the ⌘K pill sits on the title bar.
  • Position, collapsed state, and active tab persist in localStorage (behold.panel).
  • No framework, no build step — same rules as app.js; themed entirely by the shared CSS vars, so all 552 Ghostty themes work.

Wiring notes

  • #substrates, #dial, #actions kept their ids — renderSubstrates/renderDial/initActions just render into hosts that now live inside tabs. Substrate rows only rebuild when the poll data changes, so buttons don't vanish under the cursor.
  • The Model tab replaces the #legend/#component-legend header spans; it picks the drift vs component-status vocabulary from the last render's meta.mode.
  • The zoom <select>, theme picker slot, and header pills are gone; renderStatusbar() re-renders the panel on every load/lens change and echoes zoom on the strip again.
  • Static export: unchanged capture path (</head> injection intact, web/ copied verbatim — panel.js rides along via files: ["web"]).

Verified

  • 584 unit tests, tsc, build pass.
  • Drove the SPA headless against a stubbed API: all five tabs render, drag-snap docks flush to a corner, collapse works, ⌘K opens with the new panel commands, a Model row click selects + inspects the node, and a light Ghostty theme derives correctly. No console errors.

🤖 Generated with Claude Code

lex00 and others added 2 commits August 8, 2026 22:48
…tic header controls (#180)

Every control moves off the fixed chrome into one Adobe-style floating
panel (web/panel.js owns the chrome: drag by the title bar, magnetic
snap to viewport edges/corners, collapse to the bar, tabs, persisted
position; app.js renders the tab contents):

- View: zoom stops, radial, fit / SVG export / inspect toggle, the
  lanes link, and the theme picker.
- Scope: env/stack/tier/target — the lenses that were ⌘K-only.
- Substrates: status rows with bring-up/reset/run-pipeline inline again.
- Model: the two old header legends as live counts, plus per-component
  applied/unapplied rows that click through to inspect.
- Deploy: the deploy actions bar and the observe → reconcile → apply
  dial, unchanged in behavior.

The header keeps only state (meta + the zoom/env/stack/tier strip); the
⌘K palette keeps every command — same handlers — and gains collapse/
expand + jump-to-tab entries. The ⌘K pill lives on the panel title bar.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…180)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@lex00
lex00 merged commit 638ef4c into main Aug 9, 2026
3 checks passed
@lex00
lex00 deleted the feat/control-panel branch August 9, 2026 04:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Floating control panel: draggable Adobe-style palette replaces the static header controls

1 participant