fix(console): Config tab renders empty — duplicate id="config" - #82
Open
brettchien wants to merge 1 commit into
Open
fix(console): Config tab renders empty — duplicate id="config"#82brettchien wants to merge 1 commit into
brettchien wants to merge 1 commit into
Conversation
`index.html` had two elements with `id="config"`: the sidebar fleet-config section and the Config tab's actual pane (with the mcp-target form). Both `main.ts`'s `configEl` lookup and the tab-switcher's `document.getElementById(tab.dataset.target)` resolved to the first match (the sidebar section) — so clicking the Config tab toggled `hidden` on the wrong element, and the real pane (cluster/profile/region form) never un-hid. Renamed the sidebar fleet-config section to `id="fleet-config"` (CSS keys off the `.config-wrap`/`.config` classes, not the id, so no style impact) and updated the one `main.ts` reference. The Config tab's pane keeps `id="config"`, matching its `data-target="config"` tab button. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This was referenced Aug 18, 2026
brettchien
added a commit
that referenced
this pull request
Aug 18, 2026
…e 6/6) (#89) ADR #83 Part D / §7.6: Activity, MCP · oab-mcp, and Config (cluster / profile / region) drop off the top-level tab strip and collapse into one secondary Debug drawer that slides over the right edge, opened by a `[⚙]` from either the Fleets screen (per-row, scoped to that fleet, 7.2) or the Fleet detail header (scoped to the active fleet, 7.3). Their internals are unchanged — same panes, same tab switch inside the drawer — only their standing in the top-level navigation moves. Compose is the one thing left outside the drawer: it's now always visible in its own section (nothing left to tab away from, since the other three moved) rather than a fourth peer tab. Fixes two duplicate-id bugs of the same class as #82, both reintroduced by slice 1 and only surfaced now that this code is touched again: `id="config"` collided between the Fleets-screen mount and the bottom Config pane (`getElementById("config")` always resolved to the Fleets screen — the debug Config tab never showed the form it should have), and `id="cfg-save"` collided between the fleets.toml/ registry TOML editor's Save button and the Config pane's own submit button (`config.ts`'s save-disable logic was wired to the wrong button). The Config pane's ids are now `debug-config` / `debug-cfg-save`.
brettchien
added a commit
that referenced
this pull request
Aug 18, 2026
…bug + polish (#90) Self-review of console-navigation-ia (ADR #83) now that all six implementation slices are merged — read the full post-slice-6 console/ (not per-slice diffs) against the ADR §7 mockups and checked for the #82 class of bug (duplicate ids, getElementById grabbing the wrong element, `hidden` not actually toggling). Found via a Playwright render check (headless Chromium, screenshots), not just reading: - **`#debug-drawer` was visible from first paint, `hidden` attribute notwithstanding.** `.debug-drawer { display: flex; ... }` and the `[hidden]` UA-stylesheet rule have equal specificity — the later author rule won the cascade, so the drawer (position: fixed, z-index: 50) rendered on top of the whole app before any `[⚙]` was ever clicked. Fixed with a `.debug-drawer[hidden] { display: none }` override. Every other `hidden`-toggled element in the console (`#deploy-wrap`, `#fleet-detail`, `#config-editor`, `#mcpio`, `#debug-config`) was checked the same way and doesn't have this problem — none of them set their own `display` on the toggled element itself. - The drawer also visually covered the topbar's right-side controls (cluster/poll status, theme/update buttons) while open, confirmed by the same render check. Gave `.topbar` its own stacking context (`position: relative; z-index: 60`, above the drawer's 50) so it stays on top, per Part E ("persistent chrome... spans every screen"). - No duplicate ids or dangling `getElementById` references anywhere in `console/` (checked exhaustively — every id is unique, every `getElementById` call target exists). Also two small cleanups surfaced by reading the whole file instead of per-slice diffs: `.logs` (dead CSS — nothing has used that class since Activity/MCP/Config moved into the Debug drawer) and two "Compose tab"/"Config tab" code comments left over from before Compose stopped being a tab and Config moved into the drawer. No other mockup-fidelity or cross-slice consistency issues found — persistent chat, `[+ New fleet]`/`[+ Add instance]`/`[⚙]` wiring, and class-naming reuse (`cfg-btn`, `fd-btn`/`fd-gear`) all check out against ADR §7.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bug
Clicking the Config tab showed an empty panel instead of the cluster/profile/region form.
Root cause
console/index.htmlhad two elements withid="config":renderFleetConfig)config-formwith cluster/profile/region fields)main.ts's tab-switcher doesdocument.getElementById(tab.dataset.target)to find the pane to un-hide — for the Config tab that resolves to the firstid="config"match in document order (the sidebar section), not the real pane. So the real pane'shiddenattribute was never cleared.Fix
Renamed the sidebar fleet-config section to
id="fleet-config"and updated the onemain.tsreference (configEl). CSS keys off.config-wrap/.configclasses, not the id, so no styling impact. The tab pane keepsid="config", matching itsdata-target="config"button.Verification
console:tsc --noEmitclean · 91 vitest (unchanged) ·vite buildOK. Visual pass (Config tab now shows the form) wants eyes on a real build.🤖 Generated with Claude Code