lhumina_code/hero_os
20
0
Fork 0
Code Issues 8 Pull requests 2 Projects 1 Releases Packages Wiki Activity Actions

WIP: Dioxus Bootstrap migration — hero_os (Phase 4 shell) #26

Closed
mik-tf wants to merge 0 commits from development_dioxus_bootstrap into development
pull from: development_dioxus_bootstrap
merge into: lhumina_code:development
Conversation 4 Commits - Files changed - +871 -2
mik-tf commented 2026-03-14 05:17:21 +00:00
Owner
Copy link

DO NOT MERGE

Phase 4: OS shell migration to Dioxus WASM per lhumina_code/home#26

This provides the outer shell that will natively host all migrated service UIs.

## DO NOT MERGE Phase 4: OS shell migration to Dioxus WASM per https://forge.ourworld.tf/lhumina_code/home/issues/26 This provides the outer shell that will natively host all migrated service UIs.
feat: add Bootstrap-based OS shell (hero_os_ui_wasm) and --dist flag
Some checks failed
Build and Test / test (pull_request) Failing after 4m14s
Details
45514a3d03 
Phase 4 of the Dioxus Bootstrap migration. Adds:

- hero_os_ui_wasm: standalone WASM crate providing a Bootstrap-based
  alternative shell for Hero OS using dioxus-bootstrap-css v0.1.6.
  Features navbar with context selector, sidebar with grouped island
  navigation, and iframe-based embedding of migrated service UIs.

- Server --dist flag: hero_os_ui gains an optional --dist argument to
  serve the Bootstrap shell at /shell alongside the main app.
feat: wire 15 Bootstrap service islands into hero_os_app
Some checks failed
Build and Test / test (pull_request) Failing after 4m14s
Details
8d72ca94ab 
Add optional dependencies and feature flags (bs-*) for all 15
Bootstrap-migrated service UI crates. Each island is gated behind
its own feature flag, with a bootstrap-islands group feature to
enable all at once.

Adds cfg-gated match arms in island_content.rs and island metadata
entries in registry.rs for: hero_services, hero_cloud, hero_indexer,
hero_inspector, hero_voice, hero_proxy, hero_embedder, hero_zinit,
hero_auth, hero_aibroker, hero_redis, hero_books, hero_foundry,
hero_forge, hero_osis.

Also adds media and development archipelago definitions in the
registry for proper grouping.

4 of 15 crates (services, embedder, redis, foundry) have been
converted to library crates and compile successfully. The remaining
11 still need lib.rs conversion in their respective repos.
fix: normalize bootstrap island deps and match arms for hero_os_app integration
Some checks failed
Build and Test / test (pull_request) Failing after 4m12s
Details
3225cfbe50
mik-tf commented 2026-03-16 13:53:51 +00:00
Author
Owner
Copy link

Dioxus Bootstrap Migration — Full Component Conversion Complete

Summary

All 16 service UIs + 44 archipelago islands = 60 UI crates are now using dioxus-bootstrap-css components instead of raw Bootstrap HTML.

Audit Results

Service UIs (14 repos, 77 files changed):

  • hero_books: 105 raw → converted (Container, Alert, Breadcrumb, Spinner, Card, Table, Badge, InputGroup, Row/Col)
  • hero_forge: 88 raw → converted (Nav, NavItem, NavLink, Container, Col, Card slots)
  • hero_redis: 46 raw → converted (Card with header_class/body_class, Row/Col, Alert, Button)
  • hero_auth: 38 raw → converted (Row/Col, Alert, Button) + top padding fix
  • hero_foundry: 38 raw → converted (Alert, Badge, Spinner, Breadcrumb, ListGroup)
  • All others: converted with proper component usage

Archipelagos (53 files, 210 insertions, 260 deletions):

  • All Alert, Row, Spinner, Badge patterns converted
  • Final audit shows 0 remaining violations (except 14 <a> link-buttons — library limitation)

Shell Fixes (this repo)

  • .desktop bottom gap: 112px → 130px (prevents dock overlap)
  • Consistent py-3 top padding across all service UIs
  • Auth card header/body padding aligned with Askama original

Known Gap — dioxus-bootstrap-css

  • Button component needs href prop to render <a> for link-buttons (Bootstrap 5.3 pattern: <a class="btn btn-primary" href="...">).
  • Will fix in dioxus-bootstrap-css — we own the repo.

Branch: development_dioxus_bootstrap_2

Deployed and tested at https://herodevbootstrap.gent04.grid.tf

## Dioxus Bootstrap Migration — Full Component Conversion Complete ### Summary All **16 service UIs** + **44 archipelago islands** = **60 UI crates** are now using `dioxus-bootstrap-css` components instead of raw Bootstrap HTML. ### Audit Results **Service UIs** (14 repos, 77 files changed): - hero_books: 105 raw → converted (Container, Alert, Breadcrumb, Spinner, Card, Table, Badge, InputGroup, Row/Col) - hero_forge: 88 raw → converted (Nav, NavItem, NavLink, Container, Col, Card slots) - hero_redis: 46 raw → converted (Card with header_class/body_class, Row/Col, Alert, Button) - hero_auth: 38 raw → converted (Row/Col, Alert, Button) + top padding fix - hero_foundry: 38 raw → converted (Alert, Badge, Spinner, Breadcrumb, ListGroup) - All others: converted with proper component usage **Archipelagos** (53 files, 210 insertions, 260 deletions): - All Alert, Row, Spinner, Badge patterns converted - Final audit shows 0 remaining violations (except 14 `<a>` link-buttons — library limitation) ### Shell Fixes (this repo) - `.desktop` bottom gap: 112px → 130px (prevents dock overlap) - Consistent `py-3` top padding across all service UIs - Auth card header/body padding aligned with Askama original ### Known Gap — dioxus-bootstrap-css - `Button` component needs `href` prop to render `<a>` for link-buttons (Bootstrap 5.3 pattern: `<a class="btn btn-primary" href="...">`). - Will fix in dioxus-bootstrap-css — we own the repo. ### Branch: `development_dioxus_bootstrap_2` Deployed and tested at https://herodevbootstrap.gent04.grid.tf
mik-tf commented 2026-03-16 15:33:53 +00:00
Author
Owner
Copy link

Status Update — 100% dioxus-bootstrap-css Components

Achieved

All 16 service UIs + 44 archipelago islands now use dioxus-bootstrap-css components exclusively:

  • Zero raw div { class: "alert/btn/card/row/col/table/badge/spinner" } patterns remaining
  • All link-buttons use Button { href, target, download } (library 0.2.3)
  • All dismissible alerts use Alert { dismissible, on_dismiss } (library 0.2.4)
  • All toasts use Toast/ToastContainer from the library (0.2.5)
  • Auth sidebar cards use pure Bootstrap utility classes (small, py-2) instead of custom CSS — matching the Embedder gold standard

dioxus-bootstrap-css improvements published

  • 0.2.2: Button { href } — link-buttons render <a>
  • 0.2.3: Button { target, download } — complete anchor support
  • 0.2.4: Alert { on_dismiss } — callback for external state
  • 0.2.5: Headerless Toast close button + on_dismiss

Remaining: Custom CSS Cleanup

Audit found 10 of 16 service UIs have a copy-pasted "compact sizing" CSS block that globally overrides Bootstrap component font-sizes (body, .form-control, .btn, .nav-tabs .nav-link all set to 0.85rem). This fights Bootstrap's own styling.

The fix (proven with Auth): Replace custom CSS font-size overrides with Bootstrap utility classes (small, btn-sm, form-control-sm) directly on dioxus-bootstrap-css component props. This is the pure dioxus-bootstrap approach.

Priority: zinit (worst, 1070 lines reimplements Bootstrap), then hero_redis/embedder/indexer/aibroker/services/shrimp/inspector (shared pattern), then forge/books/osis/cloud/proxy.

Branches

  • Service UIs: development_dioxus_bootstrap
  • hero_os + archipelagos: development_dioxus_bootstrap_2

Live at https://herodevbootstrap.gent04.grid.tf

## Status Update — 100% dioxus-bootstrap-css Components ### Achieved All **16 service UIs** + **44 archipelago islands** now use dioxus-bootstrap-css components exclusively: - Zero raw `div { class: "alert/btn/card/row/col/table/badge/spinner" }` patterns remaining - All link-buttons use `Button { href, target, download }` (library 0.2.3) - All dismissible alerts use `Alert { dismissible, on_dismiss }` (library 0.2.4) - All toasts use `Toast`/`ToastContainer` from the library (0.2.5) - Auth sidebar cards use pure Bootstrap utility classes (`small`, `py-2`) instead of custom CSS — matching the Embedder gold standard ### dioxus-bootstrap-css improvements published - **0.2.2**: `Button { href }` — link-buttons render `<a>` - **0.2.3**: `Button { target, download }` — complete anchor support - **0.2.4**: `Alert { on_dismiss }` — callback for external state - **0.2.5**: Headerless Toast close button + `on_dismiss` ### Remaining: Custom CSS Cleanup Audit found **10 of 16 service UIs** have a copy-pasted "compact sizing" CSS block that globally overrides Bootstrap component font-sizes (`body`, `.form-control`, `.btn`, `.nav-tabs .nav-link` all set to `0.85rem`). This fights Bootstrap's own styling. **The fix** (proven with Auth): Replace custom CSS font-size overrides with Bootstrap utility classes (`small`, `btn-sm`, `form-control-sm`) directly on dioxus-bootstrap-css component props. This is the pure dioxus-bootstrap approach. Priority: zinit (worst, 1070 lines reimplements Bootstrap), then hero_redis/embedder/indexer/aibroker/services/shrimp/inspector (shared pattern), then forge/books/osis/cloud/proxy. ### Branches - Service UIs: `development_dioxus_bootstrap` - hero_os + archipelagos: `development_dioxus_bootstrap_2` Live at https://herodevbootstrap.gent04.grid.tf
mik-tf commented 2026-03-16 15:37:49 +00:00
Author
Owner
Copy link

Final Phase: Custom CSS Cleanup

Goal

Remove ALL custom CSS that reimplements Bootstrap. After this, every service UI uses only dioxus-bootstrap-css components + Bootstrap utility classes for Bootstrap-equivalent styling. Custom CSS remains only for genuinely app-specific patterns.

What gets removed (10 service UIs)

The compact sizing anti-pattern (copy-pasted in 10 files):

body { font-size: 0.85rem; }
.form-control, .form-select { font-size: 0.85rem; }
.btn { font-size: 0.85rem; }
.nav-tabs .nav-link { font-size: 0.85rem; padding: 0.4rem 0.75rem; }

Replacement: small class, btn-sm, form-control-sm, py-1 px-3 on nav-links.

Bootstrap component reimplementations:

  • .stats-card / .sidebar-card → Card { } with utility classes
  • Badge color overrides → Badge { color } component prop
  • Progress bar reimplementation → Progress / ProgressBar components
  • Redundant [data-bs-theme] overrides → Bootstrap handles this natively
  • zinit: .card, .card-header, .form-control, .toast, .navbar !important overrides

What legitimately stays

  • Custom animations (@keyframes, hover lifts)
  • App-specific layouts (split panes, log viewers, audio player)
  • Syntax highlighting (JSON, code)
  • Tree views, context menus
  • Status dot indicators
  • Monospace code viewers
  • Markdown rendered content styling

Approach

Same pattern proven with Auth: replace CSS rules with Bootstrap utility classes directly on dioxus-bootstrap-css component props.

Priority

  1. zinit (worst — 1070 lines, reimplements Bootstrap)
  2. hero_redis/embedder/indexer/aibroker/services/shrimp/inspector (shared pattern)
  3. hero_forge/books/osis/cloud/proxy (smaller fixes)

Starting now.

## Final Phase: Custom CSS Cleanup ### Goal Remove ALL custom CSS that reimplements Bootstrap. After this, every service UI uses **only** dioxus-bootstrap-css components + Bootstrap utility classes for Bootstrap-equivalent styling. Custom CSS remains only for genuinely app-specific patterns. ### What gets removed (10 service UIs) **The compact sizing anti-pattern** (copy-pasted in 10 files): ```css body { font-size: 0.85rem; } .form-control, .form-select { font-size: 0.85rem; } .btn { font-size: 0.85rem; } .nav-tabs .nav-link { font-size: 0.85rem; padding: 0.4rem 0.75rem; } ``` Replacement: `small` class, `btn-sm`, `form-control-sm`, `py-1 px-3` on nav-links. **Bootstrap component reimplementations:** - `.stats-card` / `.sidebar-card` → `Card { }` with utility classes - Badge color overrides → `Badge { color }` component prop - Progress bar reimplementation → `Progress` / `ProgressBar` components - Redundant `[data-bs-theme]` overrides → Bootstrap handles this natively - zinit: `.card`, `.card-header`, `.form-control`, `.toast`, `.navbar` `!important` overrides ### What legitimately stays - Custom animations (`@keyframes`, hover lifts) - App-specific layouts (split panes, log viewers, audio player) - Syntax highlighting (JSON, code) - Tree views, context menus - Status dot indicators - Monospace code viewers - Markdown rendered content styling ### Approach Same pattern proven with Auth: replace CSS rules with Bootstrap utility classes directly on dioxus-bootstrap-css component props. ### Priority 1. zinit (worst — 1070 lines, reimplements Bootstrap) 2. hero_redis/embedder/indexer/aibroker/services/shrimp/inspector (shared pattern) 3. hero_forge/books/osis/cloud/proxy (smaller fixes) Starting now.
mik-tf commented 2026-03-16 15:51:00 +00:00
Author
Owner
Copy link

Final Phase Complete: Pure dioxus-bootstrap-css

All custom CSS that reimplemented Bootstrap has been removed across all 16 service UIs. Every Bootstrap-equivalent style now comes from dioxus-bootstrap-css components + Bootstrap utility classes.

Changes

13 service UIs cleaned (hero_foundry was already clean, hero_voice/hero_auth already done):

  • ~665 lines of Bootstrap-overriding CSS removed
  • Replaced with Bootstrap utility classes on components (small, btn-sm, form-control-sm, bg-body-tertiary, fw-semibold, text-secondary, etc.)
  • zinit: 148 lines removed (was reimplementing .card, .navbar, .form-control, .toast with !important)
  • hero_forge: 113 lines removed (.sidebar-card, .breadcrumb-link, badge overrides)
  • hero_books: 97 lines removed (kept page-content rules for dangerous_inner_html markdown)
  • 7 shared-pattern UIs: ~280 lines total removed (compact sizing anti-pattern)

What remains in CSS (all genuinely app-specific)

  • Custom animations (@keyframes pulse, card hover lifts)
  • App-specific layouts (split panes, log viewers, audio player)
  • Syntax highlighting (JSON, code)
  • Tree views, context menus, status dots
  • Monospace code viewers
  • Markdown rendered content styling
  • Custom theme variables (:root vars)

Status: COMPLETE

  • 16 service UIs: 100% pure dioxus-bootstrap-css
  • 44 archipelago islands: 100% pure dioxus-bootstrap-css
  • dioxus-bootstrap-css: v0.2.5 with Button href/target/download, Alert on_dismiss, Toast headerless
  • Zero Bootstrap-overriding custom CSS

Deployed at https://herodevbootstrap.gent04.grid.tf
Branches: development_dioxus_bootstrap (services), development_dioxus_bootstrap_2 (hero_os, archipelagos)

## Final Phase Complete: Pure dioxus-bootstrap-css All custom CSS that reimplemented Bootstrap has been removed across all 16 service UIs. Every Bootstrap-equivalent style now comes from dioxus-bootstrap-css components + Bootstrap utility classes. ### Changes **13 service UIs cleaned** (hero_foundry was already clean, hero_voice/hero_auth already done): - ~665 lines of Bootstrap-overriding CSS removed - Replaced with Bootstrap utility classes on components (`small`, `btn-sm`, `form-control-sm`, `bg-body-tertiary`, `fw-semibold`, `text-secondary`, etc.) - zinit: 148 lines removed (was reimplementing .card, .navbar, .form-control, .toast with !important) - hero_forge: 113 lines removed (.sidebar-card, .breadcrumb-link, badge overrides) - hero_books: 97 lines removed (kept page-content rules for dangerous_inner_html markdown) - 7 shared-pattern UIs: ~280 lines total removed (compact sizing anti-pattern) ### What remains in CSS (all genuinely app-specific) - Custom animations (@keyframes pulse, card hover lifts) - App-specific layouts (split panes, log viewers, audio player) - Syntax highlighting (JSON, code) - Tree views, context menus, status dots - Monospace code viewers - Markdown rendered content styling - Custom theme variables (:root vars) ### Status: COMPLETE - 16 service UIs: 100% pure dioxus-bootstrap-css - 44 archipelago islands: 100% pure dioxus-bootstrap-css - dioxus-bootstrap-css: v0.2.5 with Button href/target/download, Alert on_dismiss, Toast headerless - Zero Bootstrap-overriding custom CSS Deployed at https://herodevbootstrap.gent04.grid.tf Branches: `development_dioxus_bootstrap` (services), `development_dioxus_bootstrap_2` (hero_os, archipelagos)
mik-tf closed this pull request 2026-03-16 16:30:56 +00:00
Some checks failed
Build and Test / test (pull_request) Failing after 4m12s
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
lhumina_code/hero_os!26
No description provided.