From fca68fca3385359eb75d85c7e1ec02e00da85d63 Mon Sep 17 00:00:00 2001 From: "Orca (ecs-claude)" Date: Wed, 19 Aug 2026 05:38:09 +0800 Subject: [PATCH] =?UTF-8?q?fix(console):=20slice=207=20self-review=20?= =?UTF-8?q?=E2=80=94=20Debug=20drawer=20visible-when-hidden=20bug=20+=20po?= =?UTF-8?q?lish?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- console/src/main.ts | 10 ++++++---- console/src/styles.css | 23 +++++++++++++++++------ 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/console/src/main.ts b/console/src/main.ts index 18fe630..ed19700 100644 --- a/console/src/main.ts +++ b/console/src/main.ts @@ -915,11 +915,13 @@ async function boot(): Promise { if (themeBtn) initThemeToggle(themeBtn as HTMLButtonElement); setupUpdater(); await startCore(); - // Config tab: pin the oab-mcp target (cluster/profile/region → hermetic env); - // on save the backend reloads the core, so refresh the roster after. + // Debug drawer's Config tab: pin the oab-mcp target (cluster/profile/region → + // hermetic env); on save the backend reloads the core, so refresh the roster + // after. initConfigTab({ onSaved: () => void tick() }); - // Compose tab: author the template/overlay/skills library + preview the - // composed bundle (agent-deployment ADR, slice 1). Self-contained; no polling. + // Compose (no longer a tab — an always-visible section, slice 6): author the + // template/overlay/skills library + preview the composed bundle + // (agent-deployment ADR, slice 1). Self-contained; no polling. initComposeTab(); updateScreen(); void refreshConfig(); diff --git a/console/src/styles.css b/console/src/styles.css index ec341d7..3dccf77 100644 --- a/console/src/styles.css +++ b/console/src/styles.css @@ -75,6 +75,13 @@ body { padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--panel); + /* Part E: "persistent chrome... spans every screen." Needs its own stacking + context + a z-index above the Debug drawer's (50) — the drawer is + `position: fixed; top: 0`, so without this it paints over the topbar's + right-side controls (cluster/poll status, theme/update buttons) instead of + sliding in below them. */ + position: relative; + z-index: 60; } .brand { @@ -238,6 +245,14 @@ body { padding: 12px 0 0; overflow: auto; } +/* `display: flex` above and the `[hidden]` UA-stylesheet rule have equal + specificity — without this, the later (author) rule wins the cascade and + the drawer stays visible even with the `hidden` attribute set (found via a + Playwright check while self-reviewing: `#debug-drawer` rendered on top of + everything from first paint, before any `[⚙]` was ever clicked). */ +.debug-drawer[hidden] { + display: none; +} .debug-head { display: flex; align-items: center; @@ -253,12 +268,8 @@ body { flex: 1; } -/* Two tabbed panes — the first display, so launch + core lifecycle and the raw - MCP interaction are one click apart and visible immediately. */ -.logs { - border-bottom: 1px solid var(--border); - background: var(--panel); -} +/* The tab strip — now only used inside the Debug drawer (`#debug-tabs`, + slice 6); the top-level `.logs` wrapper it used to live in is gone. */ .tabs { display: flex; gap: 4px;