Hero OS — Dioxus Bootstrap Migration #26
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Hero OS — Dioxus Bootstrap Migration
Context
dioxus-bootstrap-cssv0.1.6 is published and complete — 50+ components, 100% Bootstrap 5.3 parity, zero JavaScript. All interactive behaviors (modals, dropdowns, carousel, accordion, offcanvas, tooltips, etc.) are signal-driven. Comprehensive rustdocs provide Bootstrap HTML → Dioxus RSX mappings enabling AI-powered one-shot translation.Reference material:
Goal
Replace all Bootstrap HTML/Askama/Tera server-rendered UIs across Hero OS with Dioxus WASM frontends using
dioxus-bootstrap-css. No iframes. Native Dioxus components. Desktop + mobile.Per-Repo Workflow
What Claude Code does for each repo:
development_dioxus_bootstrapbranch fromdevelopmentdioxus-bootstrap-css = "0.1.6"--distflag, feature-gate askama,/assets/{*path}route)cargo check)dx serve(UI renders, RPC calls expected to fail without backend)developmentWhat is NOT done automatically (only on explicit request):
:devdioxuscontainer imageherodevdioxusVMBranch Strategy
development_dioxus_bootstrapbranch fromdevelopmentdevelopmentintodevelopment_dioxus_bootstrapto stay currentdevelopment_dioxus_bootstrap→development— never merge itPhase 1 — Quick Wins (1–4 templates each)
Phase 2 — Medium Complexity
Phase 3 — High Complexity
Phase 4 — Integration
Learnings from hero_services_ui
dioxus-bootstrap-css components used:
BootstrapHead<link>tags in base.html)ThemeProvider+ThemeToggleNavbar,NavbarExpandContainer,Row,Col,ColumnSizeTabs,TabTableCardButton,ButtonGroup,Color,SizeModal,ModalSizeKey findings:
docs.rs/.../src/dioxus_bootstrap_css/tabs.rs.html) which have full doc comments with HTML → RSX mappings.rpc.rs,types.rs,components/,main.rswithuse_futurepolling loops.dx serveworks for UI testing — RPC calls fail (no backend) but layout/components render correctly. Full integration testing needs the deployed environment.FORGEJO_TOKEN— source~/hero/cfg/env/*before API calls (perenv_secretsskill).Axum server changes (same for every repo):
--distCLI flag to serve WASM dist directory/assets/{*path}route for WASM bundle filesaskamamade optional behinddefault = ["askama"]feature flagindex_handlertries WASM dist first, falls back to AskamaDeployment (when explicitly requested)
Environment:
hero_services/deploy/single-vm/envs/:devdioxushttps://herodevdioxus.gent04.grid.tfssh -6 root@[IPv6]→docker exec -it herodevdioxus bashBuild pipeline:
Hotfix deploy (single binary):
All environments:
:dev:dev2:demo:demo2:prod:devdioxusWhat Changes vs What Stays
/rpcproxy endpointBootstrapHeadThemeProvidersignal handles it__HERO_VAR__,${VAR_NAME}unchangedArchipelago Library Conversion (all phases)
All 15
*_wasmcrates have been converted from standalone WASM binaries to archipelago library crates:[[bin]]→[lib]withcrate-type = ["cdylib", "rlib"]IslandContextfromhero_archipelagos_core[package.metadata.island]with id, archipelago, title, icondefault,web,standalonedioxus-bootstrap-cssusage preserved (Bootstrap 5.3 is the target design system)hero_os_app Integration
All 15 Bootstrap islands wired into
hero_os_app:Cargo.toml: 15 optional git dependencies +bs-*feature flags +bootstrap-islandsgroupisland_content.rs: 15 cfg-gated match arms for native renderingregistry.rs: metadata entries with archipelago assignmentsEnable with
cargo build --features bootstrap-islands— no iframes, single shared Dioxus runtime.Status: Code Complete
All code changes are on
development_dioxus_bootstrapbranches. Nothing merged todevelopment. Remaining:--features bootstrap-islands(requires all git deps accessible):devdioxuscontainer image (on request)herodevdioxusVM (on request)Part 2: Full Bootstrap Migration — Archipelago Islands + Shell
Branch:
development_dioxus_bootstrap_2on hero_archipelagos and hero_osAll ~44 archipelago islands + the hero_os shell converted from custom
var(--color-*)design system todioxus-bootstrap-cssv0.1.6.Result: 100% of Hero OS UI now uses dioxus-bootstrap-css for pixel-perfect Bootstrap 5.3 styling. Zero custom CSS variable design system remaining. Zero JavaScript. Single shared Dioxus WASM runtime.
Claude Code Skills
dioxusenv_secrets~/hero/cfg/env/*,FORGEJO_TOKENforge_apihero_ui_dashboardtfgrid_deployNote on hero_books_dioxus: An earlier Dioxus crate exists in the hero_books repo using dioxus-bootstrap-css v0.1.2. This is outdated and NOT a reference. All migration work starts fresh using v0.1.6 and the showcase/rustdocs as the guide.
Timeline: ~2 weeks target, quality over speed.
mik-tf referenced this issue from lhumina_code/hero_services2026-03-14 04:21:54 +00:00
mik-tf referenced this issue from lhumina_code/hero_os2026-03-14 16:28:20 +00:00
Part 3: Full dioxus-bootstrap-css Component Rewrite — 44 Archipelago Islands + Shell Dock
Part 2 swapped CSS variable names but kept inline styles. Part 3 rewrites every island to use actual
dioxus-bootstrap-csscomponents (Card, Table, Button, Modal, Tabs, Container/Row/Col, Navbar, etc.) — matching the quality of the 15 service UIs from Part 1.Goal
100% pixel-perfect Bootstrap 5.3 throughout Hero OS. Every view, every component, every island uses
dioxus-bootstrap-css. Responsive on phone/tablet/desktop. Uniform dark/light mode. Zero inline styles.Branch:
development_dioxus_bootstrap_2(same as Part 2)Batches
--features core,bootstrap-islandsPart 4: Integration & Polish — Unified 59-Island Architecture
Vision
Hero OS is a single WASM application containing 59 archipelago islands, ALL using
dioxus-bootstrap-cssv0.1.6, ALL compiled natively into one binary. Zero iframes. Zero JavaScript. Pixel-perfect Bootstrap 5.3 on every screen — phone, tablet, desktop. Dark/light mode everywhere.The stack:
Architecture
Key Principle
There is NO distinction between 'archipelago islands' and 'service UIs'. They are ALL archipelago islands. The 15 service UIs (books, redis, indexer, etc.) replace the old iframe wrappers in
archipelagos/embed/. They must have 100% feature parity with the old Askama/iframe versions — same tables, same modals, same actions, same data — but rendered with dioxus-bootstrap-css.Reference: hero_books on herodev2 — this is the target quality. Library cards, navigation, theme toggle, all features working. The dioxus-bootstrap version must be pixel-perfect identical but native WASM.
What's Left (Part 4)
/hero_*_ui/rpc(from IslandContext), not hardcoded/rpc--features core,bootstrap-islands, pack, push, deployStatus
Part 5: Polish — Registry Cleanup + Layout Fix
Current State
The dioxus-bootstrap-css refactoring WORKS. All 15 service UIs render natively (no iframes) with real data from backends. Examples confirmed working: Indexer (full admin with 7 tabs, stats, databases), Redis (stats, databases, API docs), Foundry (repositories, docs, API, MCP). Dark mode works throughout.
Remaining Issues (2 categories)
Issue A: Registry ID mismatch (causes blank/failed islands)
The dock popup has DUPLICATE entries because the registry has both old IDs (
indexer,zinit,redis,aibroker,auth,books) AND new IDs (hero_indexer,hero_zinit,hero_redis, etc.). Clicking the old ID falls through to the dynamic WASM loader which returns 404. Clicking the newhero_*ID routes to our Bootstrap component correctly.Fix: Remove ALL old duplicate island registrations. Keep only
hero_*prefixed IDs. Update archipelago default island mappings. Merge duplicate archipelagos (two 'Development' entries). Remove 'Media' or rename. Add 'Books' back.This single fix resolves: Books blank, AI Broker blank, duplicate dock entries, failed island loads.
Issue B: Layout grid nesting (tabs beside sidebar instead of below)
In the old Askama version, the layout was:
In our dioxus-bootstrap version, the tabs and content sit at the wrong nesting level — appearing beside the sidebar instead of spanning the content column. This affects Indexer, Redis, and likely all service UIs with sidebar+tabs layout.
Fix: Audit all 15 service UI
app.rsfiles. EnsureTabscomponent is insideCol { lg: 9 }, not at the same level as the sidebarCol { lg: 3 }.TODO
--features core,bootstrap-islandsWhat Works
HERO_OS_FEATURES=core,bootstrap-islands+ path deps ✓Part 5 Progress — Detailed Testing Results
Working (dioxus-bootstrap, real data, no iframes)
Remaining Issues (4 categories)
Category C — Blank/loading islands (PRIORITY)
Some service UIs show blank or loading forever. Root cause: inconsistent
IslandContextprop types — some acceptIslandContextdirectly, othersOption<IslandContext>. Match arms in island_content.rs passcontextvsSome(context)inconsistently.Category A — Registry/dock organization
Dock popup contents don't match herodev2 reference:
Category B — UI layout polish
Embedder, Indexer, Redis tabs show at same level as sidebar instead of properly inside content column. Need to match old Askama layout grid.
Category D — Books-specific
Next Steps
Part 5 continued — Shrimp + Final Polish
Shrimp UI
Shrimp (AI agent/MCP server) is the only service without a dioxus-bootstrap UI. Unlike the other 15 where we translated existing Askama templates, Shrimp never had an Askama UI — it's a Bun/TypeScript server.
We'll create
hero_shrimp_ui_wasmfollowing the same pattern ashero_aibroker_ui_wasm:/hero_shrimp/bs-shrimpfeature flagThis makes it 16 service UIs, all dioxus-bootstrap, all native WASM.
Remaining fixes in this iteration
Part 6: Final Polish
Current State
Working (16 dioxus-bootstrap service UIs, all native WASM, no iframes):
Remaining Issues
1. Auth crashes browser (CRITICAL)
Auth does a blocking RPC call on mount. When the auth backend doesn't respond, it hangs the entire browser tab (Page Unresponsive).
Fix: When embedded in hero_os (context provided), skip login/setup flow entirely. Go straight to the admin panel. The OS handles authentication — the user is already logged in at the OS level.
Spec: If
contextis provided → show admin panel directly (users list, OAuth test, JSON-RPC console, MCP, API Docs tabs). No login check, no setup check. If backend is down, show "Disconnected" gracefully like Services and Cloud do.2. Redis — skip login when embedded
Same principle: when embedded in hero_os, show the Redis admin UI directly (stats, databases, commands). No authentication flow needed — the OS user is already authenticated.
Spec: If
contextis provided → go directly to the main admin view. Never block on initial connection check.3. General principle for ALL service UIs
When embedded in hero_os (
contextis provided):spawnnot blockinguse_future4. Other cosmetic fixes
Next Steps
Part 7: Pixel-Perfect Layout Parity with Old Askama Templates
Problem
The dioxus-bootstrap service UIs work functionally but the layout doesn't match the old Askama Bootstrap templates. Specifically:
Approach
For each of the 16 service UIs:
templates/index.htmlondevelopmentbranch)app.rsto match the original layout preciselyThe old templates follow this pattern:
The Askama code is still in each repo's
templates/directory ondevelopmentbranch. Thedioxus-bootstrap-csslibrary has all needed components.What was fixed so far
web,bootstrap-islandsfor complete experience ✓TODO
Part 7 Finding: dioxus-bootstrap-css Tab Component Layout
Root Cause
The tab layout issue isn't about RSX nesting — it's about how the
Tabs/Tabcomponents fromdioxus-bootstrap-cssrender HTML.Standard Bootstrap HTML separates tab buttons from tab content:
But
dioxus-bootstrap-cssTabcomponent renders each tab button AND its content together as siblings — the content appears inline after the button, not in a separate content area.Fix Options
ul.nav.nav-tabswith buttons, thendiv.tab-contentwith panes, using signals for active stateStatus
Everything else works:
Remaining cosmetic:
Part 8: Fix dioxus-bootstrap-css Tabs Component + Release 0.1.7
Root Cause Found
The
Tabs/Tabcomponent indioxus-bootstrap-cssrenders each tab button AND its content together as siblings in the DOM. Standard Bootstrap separates them:This is the ONLY component with a layout design flaw. All other components (Card, Table, Button, Modal, etc.) are pixel-perfect Bootstrap 5.3.
Plan
tabs.rsin dioxus-bootstrap-css — make Tabs/Tab render separated nav-tabs + tab-contentdx serve, verify correct renderingWhy this is the right fix
One fix in the library → all 16 service UIs automatically get correct tab layouts. No changes needed in any Hero OS repo. Every future user of dioxus-bootstrap-css also benefits.
Repo
Local:
/home/pctwo/Documents/temp/bootstrap_like/mik-tf/dioxus-bootstrapRemote: https://github.com/mik-tf/dioxus-bootstrap (development branch)
Current version: 0.1.6
Target version: 0.1.7
Part 8 Complete: dioxus-bootstrap-css 0.1.8 Released
What was done
Library improvements (dioxus-bootstrap-css):
Card: addedheader_classandfooter_classprops — enables pixel-perfect card-header styling (flex layout, padding, action buttons)TabList: now the primary and recommended tabs API — produces pixel-perfect separated Bootstrap HTML (<ul class="nav nav-tabs">+<div class="tab-content">)Tabs: alias forTabList(same component, both names work)Tabchild-based API removed (Dioxus rendering limitation — content rendered inline instead of separated)Verified locally:
test_examples/embedder_test_pure/for future referenceWhat's happening now
Tabs/Tab→TabList/TabDefCard { header_class }dioxus-bootstrap-css design principle confirmed
Any standard Bootstrap 5.3 HTML can be translated 1-to-1 to dioxus-bootstrap-css RSX using the library components. The rustdocs show exact Bootstrap HTML → Dioxus mappings for every component. The Embedder test example serves as the reference pattern for all Hero OS service UI migrations.
Releases
content_classto TabsPropsheader_class/footer_class, TabList as primary API, Tabs alias, removed Tab child APIPart 9: Pixel-Perfect Rewrite — All 60 Islands
Confirmed
Plan
Phase A: 16 service UIs — pixel-perfect match to Askama templates
For each service UI:
Repos: hero_services, hero_cloud, hero_indexer_ui, hero_inspector, hero_embedder, hero_auth, hero_aibroker, hero_redis, hero_books, hero_foundry, hero_forge_ui, hero_osis, hero_voice, hero_proxy, zinit, hero_shrimp
Branch:
development_dioxus_bootstrapPhase B: 44 archipelago islands — rewrite to pure dioxus-bootstrap-css
For each archipelago island:
Repo: hero_archipelagos
Branch:
development_dioxus_bootstrap_2Execution
Phases A and B run in parallel (different repos). After both:
Current Status
dioxus-bootstrap-css 0.2.0 Released
Breaking improvement
Buttonnow uses#[props(extends = GlobalAttributes)]— accepts ANY HTML attribute:titlefor tooltipsdata-bs-togglefor dropdowns/modals/collapsedata-bs-targetfor targetingaria-label,aria-expandedfor accessibilityidfor DOM targetingNo more raw
button { class: "btn..." }workarounds needed.Next: apply extends to all components
Same pattern should be applied to Card, Table, Navbar, and all other components. This makes dioxus-bootstrap-css truly 1-to-1 with Bootstrap HTML — no limitations.
Releases
Status Update — Part 9 Progress
What was done
dioxus-bootstrap-css improvements:
Hero OS fixes:
Verified working:
What remains (not 100% yet)
All committed and pushed
development_dioxus_bootstrap— synced ✓development_dioxus_bootstrap_2— synced ✓development✓Complete Plan to 100% Dioxus Bootstrap Hero OS
Phase 1: Fix Backend Connectivity (16 service UIs)
Fix "Disconnected" states — verify RPC base paths, test endpoints, fix mismatches.
Phase 2: Navbar Pixel-Perfect (16 service UIs)
Match EVERY navbar element from Askama originals: database/namespace selectors, +/- buttons, connection status, stats info, OpenRPC button.
Phase 3: Sidebar Pixel-Perfect (16 service UIs)
Match sidebar cards exactly: Card header_class, Row/Col stats, Table for badges, refresh buttons, spacing.
Phase 4: Tab Content Pixel-Perfect (16 service UIs)
Match all tab templates: forms, tables, accordions. Ensure all tabs work.
Phase 5: 44 Archipelago Islands — Pure Dioxus Bootstrap
Replace remaining raw divs/inline styles with Card, TabList, Button, Table components.
Phase 6: Shell Polish
Dock width, window chrome, theme consistency.
Phase 7: Full Container Rebuild + Deploy
Full make dist, pack, push, deploy to herodevbootstrap. Systematic test.
Phase 8: Automated Fixes (issue #25)
Fix service TOML configs — no manual post-deploy patches.
Current vs Target
Closed as we track here now: #28