Hero OS: Complete SPA/WASM migration with dioxus-bootstrap-css

mik-tf commented

2026-03-24 20:59:56 +00:00

Owner

Context

With v0.7.1-dev (#78, #87), all services are healthy, voice pipeline (earshot VAD + Kokoro TTS + local Whisper STT) is wired, and the Settings Voice & Audio tab is in place. The codebase is stable and fully tested (112 smoke + 20 integration, 0 failures).

Goal

Make Hero OS a complete SPA with consistent Bootstrap styling across all components — both the shell (hero_os_app WASM) and the admin UIs (Axum-served dashboards).

Approach

Use dioxus-bootstrap-css to bring Bootstrap 5.3 into the Dioxus WASM shell natively, eliminating the current mix of:

Inline styles in RSX components
CSS variables with fallback values
External CDN links for Bootstrap in admin UIs
/hero-bootstrap-bridge.css bridge file

Tasks

Phase 1: Bootstrap in Dioxus shell

Add dioxus-bootstrap-css to hero_os_app
Replace inline styles in shell components (toolbar, dock, settings, window manager) with Bootstrap classes
Unify theme variables — single source of truth for colors, spacing, typography
Remove hero-bootstrap-bridge.css (no longer needed when shell uses Bootstrap directly)

Phase 2: Island component library

Create shared Bootstrap component library in hero_archipelagos_core
Migrate island RSX from inline styles to Bootstrap utility classes
Consistent card, form, button, table patterns across all islands

Phase 3: Admin UI alignment

Align Askama-based admin UIs (proc, embedder, inspector, etc.) with same Bootstrap theme
Shared CSS variables between WASM shell and admin iframes
Remove duplicate Bootstrap CDN loads (embed once, share via theme sync)

Phase 4: Product readiness

Responsive layout (mobile-first)
Accessibility audit (ARIA, keyboard nav)
Performance: lazy-load islands, code-split WASM
Error boundaries in all islands
Loading states and skeleton screens
Offline/PWA support

#78 Voice AI pipeline (complete)
#87 Service health audit (complete)
#55 UI: revert to original theme

## Context With v0.7.1-dev (#78, #87), all services are healthy, voice pipeline (earshot VAD + Kokoro TTS + local Whisper STT) is wired, and the Settings Voice & Audio tab is in place. The codebase is stable and fully tested (112 smoke + 20 integration, 0 failures). ## Goal Make Hero OS a complete SPA with consistent Bootstrap styling across all components — both the shell (hero_os_app WASM) and the admin UIs (Axum-served dashboards). ## Approach Use [dioxus-bootstrap-css](https://crates.io/crates/dioxus-bootstrap-css) to bring Bootstrap 5.3 into the Dioxus WASM shell natively, eliminating the current mix of: - Inline styles in RSX components - CSS variables with fallback values - External CDN links for Bootstrap in admin UIs - `/hero-bootstrap-bridge.css` bridge file ## Tasks ### Phase 1: Bootstrap in Dioxus shell - [ ] Add `dioxus-bootstrap-css` to hero_os_app - [ ] Replace inline styles in shell components (toolbar, dock, settings, window manager) with Bootstrap classes - [ ] Unify theme variables — single source of truth for colors, spacing, typography - [ ] Remove hero-bootstrap-bridge.css (no longer needed when shell uses Bootstrap directly) ### Phase 2: Island component library - [ ] Create shared Bootstrap component library in hero_archipelagos_core - [ ] Migrate island RSX from inline styles to Bootstrap utility classes - [ ] Consistent card, form, button, table patterns across all islands ### Phase 3: Admin UI alignment - [ ] Align Askama-based admin UIs (proc, embedder, inspector, etc.) with same Bootstrap theme - [ ] Shared CSS variables between WASM shell and admin iframes - [ ] Remove duplicate Bootstrap CDN loads (embed once, share via theme sync) ### Phase 4: Product readiness - [ ] Responsive layout (mobile-first) - [ ] Accessibility audit (ARIA, keyboard nav) - [ ] Performance: lazy-load islands, code-split WASM - [ ] Error boundaries in all islands - [ ] Loading states and skeleton screens - [ ] Offline/PWA support ## Related - #78 Voice AI pipeline (complete) - #87 Service health audit (complete) - #55 UI: revert to original theme