Hero OS Shell: double dock/toolbar rendering + iframe nesting broken

mik-tf commented

2026-03-26 00:50:28 +00:00

Owner

Problem

Multiple critical UI rendering issues in the Dioxus WASM shell on herodev:

1. Double/triple dock bar

When opening any island (Books, Foundry, AI Broker, etc.), the bottom dock bar duplicates — showing 2 or 3 copies stacked. Each nested level adds another dock.

2. Double top bar

The Geomind context bar + date/time bar duplicates when navigating to services. Books shows 2 top bars, Foundry shows 3.

3. Foundry Admin — blank content with nested toolbars

Foundry Admin shows the title bar 3 times but no content renders. The iframe nesting appears broken — each level of nesting duplicates the shell chrome.

4. AI Broker connector button unclickable

The green connector status button on hero_aibroker cannot be clicked.

Root cause hypothesis

The Dioxus shell is rendering island iframes inside the shell frame, but each iframe also loads the shell, causing recursive nesting. This is an iframe embedding / routing issue in the WASM shell — the iframe src should load the service UI directly, not the shell wrapper.

Impact

Books: usable but cluttered (double dock)
Foundry: completely broken (blank content)
AI Broker: partially broken (connector unclickable)
All islands: affected by dock duplication

Testing gap

Our smoke tests (Layer 2) only check HTTP status codes and CSS assets. No automated test verifies:

Single dock bar rendered (no duplicates)
Island content actually renders inside the shell
No recursive iframe nesting
Clickable UI elements (connector buttons, etc.)

Need to add Playwright E2E tests (Layer 4) or Hero Browser MCP visual tests (Layer 6) that verify shell rendering.

Suggested tests to add

- dock bar count === 1 (querySelector all .dock, assert length 1)
- top bar count === 1
- iframe content loads (not blank)
- no nested hero_os_ui inside iframes

Signed-off-by: mik-tf

## Problem Multiple critical UI rendering issues in the Dioxus WASM shell on herodev: ### 1. Double/triple dock bar When opening any island (Books, Foundry, AI Broker, etc.), the bottom dock bar duplicates — showing 2 or 3 copies stacked. Each nested level adds another dock. ### 2. Double top bar The Geomind context bar + date/time bar duplicates when navigating to services. Books shows 2 top bars, Foundry shows 3. ### 3. Foundry Admin — blank content with nested toolbars Foundry Admin shows the title bar 3 times but no content renders. The iframe nesting appears broken — each level of nesting duplicates the shell chrome. ### 4. AI Broker connector button unclickable The green connector status button on hero_aibroker cannot be clicked. ## Root cause hypothesis The Dioxus shell is rendering island iframes inside the shell frame, but each iframe also loads the shell, causing recursive nesting. This is an iframe embedding / routing issue in the WASM shell — the iframe src should load the service UI directly, not the shell wrapper. ## Impact - **Books**: usable but cluttered (double dock) - **Foundry**: completely broken (blank content) - **AI Broker**: partially broken (connector unclickable) - **All islands**: affected by dock duplication ## Testing gap Our smoke tests (Layer 2) only check HTTP status codes and CSS assets. No automated test verifies: - Single dock bar rendered (no duplicates) - Island content actually renders inside the shell - No recursive iframe nesting - Clickable UI elements (connector buttons, etc.) Need to add Playwright E2E tests (Layer 4) or Hero Browser MCP visual tests (Layer 6) that verify shell rendering. ## Suggested tests to add ``` - dock bar count === 1 (querySelector all .dock, assert length 1) - top bar count === 1 - iframe content loads (not blank) - no nested hero_os_ui inside iframes ``` Signed-off-by: mik-tf