lhumina_code/home
22
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Hero OS — UI Component Library & Form Quality #7

New issue
Closed
opened 2026-03-09 20:53:02 +00:00 by mik-tf · 0 comments
mik-tf commented 2026-03-09 20:53:02 +00:00
Owner
Copy link

Hero OS — UI Component Library & Form Quality

Standalone tracker for bringing WASM Dioxus islands to Bootstrap 5.3 visual quality. Covers form controls, component library, demo data, and layout polish.

Related: Issue #5 — Production Readiness Plan (infrastructure, theme sync, contexts, deployment)
This issue: 100% focused on UI quality — what the user sees and interacts with.

Branching Strategy

All work for Issue #7 happens on development_miktf, branched from latest development.

Repo Branch Purpose
hero_osis development_miktf Seed data (Phase 1)
hero_os development_miktf CSS styles (Phase 2, 5)
hero_archipelagos development_miktf Components + forms (Phase 3, 4, 5)

Workflow

  1. Work on development_miktf — all changes go here
  2. Sync — periodically merge development into development_miktf to pick up upstream changes (never rebase, always merge)
  3. Finalize — once the full pipeline completes (all human confirmations), merge development_miktf into development

development_miktf is always a superset of development + our WIP. One-way sync until ready, then merge back.

Deployment

Tier Image Tag Gateway Port Status
dev :dev herodev.gent02.grid.tf 8805 Live
demo :demo herodemo.gent02.grid.tf 8806 Live
prod :prod TBD TBD Not deployed

Registry: forge.ourworld.tf/lhumina_code/hero_zero
VM: TFGrid Node 8, Mycelium 495:72fa:8ec3:9264:ff0f:c0a8:abad:234c

Deploy Commands

# Build locally (from lhumina_code/ workspace)
DOCKER_BUILDKIT=1 docker buildx build --ssh default \
  --build-arg BASE_IMAGE=hero_zero:base \
  -f hero_services/Dockerfile.dev -t hero_zero:dev \
  --platform linux/amd64 --load .

# Push to registry
docker tag hero_zero:dev forge.ourworld.tf/lhumina_code/hero_zero:dev
docker push forge.ourworld.tf/lhumina_code/hero_zero:dev

# Deploy to herodev
ssh root@495:72fa:8ec3:9264:ff0f:c0a8:abad:234c "docker pull forge.ourworld.tf/lhumina_code/hero_zero:dev && \
  docker stop herodev; docker rm herodev; \
  docker run -d --name herodev -p 8805:6666 forge.ourworld.tf/lhumina_code/hero_zero:dev"

# Promote to herodemo
docker tag hero_zero:dev forge.ourworld.tf/lhumina_code/hero_zero:demo
docker push forge.ourworld.tf/lhumina_code/hero_zero:demo
ssh root@495:72fa:8ec3:9264:ff0f:c0a8:abad:234c "docker pull forge.ourworld.tf/lhumina_code/hero_zero:demo && \
  docker stop herodemo; docker rm herodemo; \
  docker run -d --name herodemo -p 8806:6666 forge.ourworld.tf/lhumina_code/hero_zero:demo"

DevOps Workflow

Step What Who Gate
1 Code — implement the phase Claude —
2 Local Docker build — build image from unpushed local code Claude must compile
3 Deploy to herodev — push image to registry, pull on VM Claude —
4 Human test on herodev — verify on https://herodev.gent02.grid.tf/hero_os_ui/ Human must confirm
5 Commit & push — push code to development_miktf Claude only after step 4 confirms
6 Remote Docker build — rebuild from clean remote development_miktf code Claude must compile
7 Deploy to herodev (again) — ship remote-built image Claude —
8 Human test on herodev — verify the remote build works identically Human must confirm
9 Tag :demo — tag image and deploy to herodemo Claude only after step 8 confirms
10 Human test on herodemo — verify on https://herodemo.gent02.grid.tf/hero_os_ui/ Human must confirm
11 Update this issue — check off items, add session log with date + image SHA Claude —

Rules

  • Never push before human confirms on herodev (step 4 → step 5)
  • Never tag :demo before human confirms the remote build (step 8 → step 9)
  • Never rebase, always merge
  • herodev gets changes first, herodemo only after confirmation
  • No hot-swapping WASM — always do full Docker rebuild + deploy
  • All pushes go to development_miktf, merged to development via PR after confirmation

Phases

Phase 1: Demo Data ✅ DONE

Goal: Every island shows realistic, populated data — no empty/zero states.

Completed work:

  • Added 36 seed TOML files for root context (media, communication, calendar, AI, files)
  • Differentiated seed data across all 4 contexts (geomind, threefold, incubaid, root):
    • Media: 12 unique photos (3 per context, themed), 11 unique songs (themed per context), albums and playlists
    • Files: 18 unique files across contexts (AI docs, grid specs, business files, admin runbooks)
    • Business: 154 records — geomind (AI companies), threefold (grid ops), incubaid (full VC portfolio), root (minimal admin)
    • Calendar: 20 events (5 per context, March 2026 timestamps, themed)
    • Communication: 36 records (conversations, messages, emails — themed per context)
  • Added real media files: 9 JPGs, 11 MP3s, 9 documents bundled in hero_osis/data/media/
  • Updated hero_services/docker/entrypoint.sh to seed media files per context via WebDAV

Not addressed (no OSIS schema): HR, Finance

Phase 1.5: Loading Spinner & Form Centering Fix ✅ DONE

Goal: Fix loading spinner (text was spinning with the circle) and center business forms.

Completed work:

  • Loading spinner fix: Removed duplicate .island-spinner CSS rule that applied animation: spin to the entire container including text. Correct definition uses flex column layout: spinning div + static span.
  • Form centering: Added margin: 0 auto inline style to all 8 business form files (contacts.rs, companies.rs, contracts.rs, deals.rs, instruments.rs, opportunities.rs, persons.rs, transactions.rs).
  • Server CSS: Added matching spinner and form centering rules to hero_archipelagos/server/src/styles.css.

Commits: hero_os adb1aef, hero_archipelagos 1f9ffeb, hero_osis 1ab5ef7

Phase 2: Form Controls in CSS ✅ DONE

Goal: Bootstrap 5.3-quality base styles for all HTML form elements in styles.css.

Completed work (commit bb747e8): Added ~350 lines to styles.css:

  • input[type="text/email/password/number/url"] — padding, border-radius, border, bg, color, focus ring, transition
  • textarea — same as input, min-height, resize vertical
  • select — same as input + custom chevron SVG background
  • input[type="checkbox/radio"] — custom styled (accent color, checked state)
  • ::placeholder — muted color, opacity 0.6
  • :disabled — opacity 0.5, cursor not-allowed
  • .form-label, .form-helper, .form-error — typography helpers
  • Badge variants, card, tabs, alert, spinner, toggle-switch, list-row, stat-grid, table-responsive
  • Light-mode overrides for all new components

Phase 3: Core Components ✅ DONE

Goal: Add missing components to hero_archipelagos/core/src/components/.

Completed work (commit 29d006d): Added 10 new Dioxus components:

  • TextField — text input with label, placeholder, error, helper text
  • TextareaField — textarea with label, auto-grow, char counter
  • CheckboxField — checkbox with label, description
  • FormGroup — layout wrapper: label + input + error/helper
  • Badge — status/tag pill (primary, success, warning, danger, muted)
  • Card — container with optional header, body, footer
  • Tabs — tab bar with active state, content panel switching
  • Alert — info/success/warning/error banner with optional dismiss
  • Spinner — standalone loading indicator
  • ToggleSwitch — on/off switch

Phase 4: Island Form Overhaul ✅ DONE

Goal: Replace raw HTML inputs with core components across all 14 forms.

Completed work (commit 29d006d): Migrated 7 island forms to core components (net -313 lines):

  • productivity/stories/src/views/story_form.rs — TextField, TextareaField, SelectField, FormGroup
  • productivity/projects/src/views/project_form.rs — same
  • productivity/sprints/src/views/milestone_form.rs — same
  • messaging/src/islands/search_bar.rs — TextField
  • contacts/src/islands/contact_form.rs — FormGroup
  • calendar/src/islands/event_form.rs — FormGroup + CheckboxField
  • productivity/tasks/src/views/task_form.rs — FormGroup

Phase 5: Layout Polish ✅ DONE

Goal: Final visual pass — spacing, alignment, empty states, responsive behavior.

Completed work (commit bb747e8):

  • List views — .list-row with consistent row height, hover states
  • Dashboard layouts — .stat-grid stat cards
  • Tables — .table-responsive horizontal scroll
  • Dark/Light consistency — light-mode overrides for all new components

Architecture Reference

Key Files

File Purpose
hero_os/crates/hero_os_app/src/styles.css Single source of truth for all WASM styles
hero_os/crates/hero_os_app/src/theme.rs Theme engine, color generation
hero_archipelagos/core/src/components/mod.rs Component library exports
hero_archipelagos/core/src/styles.rs Design system constants
hero_osis/data/seed/ Seed data TOML files (per context)
hero_services/Dockerfile.dev Docker build

Color Tokens

Token Dark Light
--color-primary #007AFF #007AFF
--color-background #212529 #f8f9fc
--color-surface #2b3035 #ffffff
--color-text #dee2e6 #1a1a2e
--color-text-muted #adb5bd #6c757d
--color-border rgba(255,255,255,0.18) rgba(0,0,0,0.12)
--color-error #dc3545 #dc3545

Session Log

Date Phase Branch Summary
2026-03-08 1 development_miktf Added 36 seed TOML files (media, communication, calendar, AI, files) for root context. Deployed to herodev.
2026-03-09 1 development_miktf Differentiated all seed data across 4 contexts (geomind, threefold, incubaid, root). Added 9 new photos, 4 new songs, 4 new documents. Business data: 154 records themed per context.
2026-03-09 1.5 development_miktf Fixed loading spinner (text no longer spins). Centered 8 business forms with inline margin: 0 auto. Added spinner/centering CSS to server styles.css.
2026-03-09 2+5 development_miktf Added ~350 lines of form control CSS to styles.css: .form-control, .form-label, .form-helper, .form-error, badge, card, tabs, alert, spinner, toggle-switch, list-row, stat-grid, table-responsive, light-mode overrides. (bb747e8)
2026-03-09 3+4 development_miktf Added 10 new core components (TextField, TextareaField, CheckboxField, FormGroup, Badge, Card, Tabs, Alert, Spinner, ToggleSwitch). Migrated 7 island forms to core components, net -313 lines. (29d006d)
## Hero OS — UI Component Library & Form Quality Standalone tracker for bringing WASM Dioxus islands to Bootstrap 5.3 visual quality. Covers form controls, component library, demo data, and layout polish. **Related:** [Issue #5 — Production Readiness Plan](https://forge.ourworld.tf/lhumina_code/home/issues/5) (infrastructure, theme sync, contexts, deployment) **This issue:** 100% focused on **UI quality** — what the user sees and interacts with. --- ## Branching Strategy **All work for Issue #7 happens on `development_miktf`**, branched from latest `development`. | Repo | Branch | Purpose | |---|---|---| | `hero_osis` | `development_miktf` | Seed data (Phase 1) | | `hero_os` | `development_miktf` | CSS styles (Phase 2, 5) | | `hero_archipelagos` | `development_miktf` | Components + forms (Phase 3, 4, 5) | ### Workflow 1. **Work** on `development_miktf` — all changes go here 2. **Sync** — periodically merge `development` into `development_miktf` to pick up upstream changes (never rebase, always merge) 3. **Finalize** — once the full pipeline completes (all human confirmations), merge `development_miktf` into `development` `development_miktf` is always a superset of `development` + our WIP. One-way sync until ready, then merge back. --- ## Deployment | Tier | Image Tag | Gateway | Port | Status | |---|---|---|---|---| | **dev** | `:dev` | `herodev.gent02.grid.tf` | 8805 | Live | | **demo** | `:demo` | `herodemo.gent02.grid.tf` | 8806 | Live | | **prod** | `:prod` | TBD | TBD | Not deployed | **Registry:** `forge.ourworld.tf/lhumina_code/hero_zero` **VM:** TFGrid Node 8, Mycelium `495:72fa:8ec3:9264:ff0f:c0a8:abad:234c` ### Deploy Commands ```bash # Build locally (from lhumina_code/ workspace) DOCKER_BUILDKIT=1 docker buildx build --ssh default \ --build-arg BASE_IMAGE=hero_zero:base \ -f hero_services/Dockerfile.dev -t hero_zero:dev \ --platform linux/amd64 --load . # Push to registry docker tag hero_zero:dev forge.ourworld.tf/lhumina_code/hero_zero:dev docker push forge.ourworld.tf/lhumina_code/hero_zero:dev # Deploy to herodev ssh root@495:72fa:8ec3:9264:ff0f:c0a8:abad:234c "docker pull forge.ourworld.tf/lhumina_code/hero_zero:dev && \ docker stop herodev; docker rm herodev; \ docker run -d --name herodev -p 8805:6666 forge.ourworld.tf/lhumina_code/hero_zero:dev" # Promote to herodemo docker tag hero_zero:dev forge.ourworld.tf/lhumina_code/hero_zero:demo docker push forge.ourworld.tf/lhumina_code/hero_zero:demo ssh root@495:72fa:8ec3:9264:ff0f:c0a8:abad:234c "docker pull forge.ourworld.tf/lhumina_code/hero_zero:demo && \ docker stop herodemo; docker rm herodemo; \ docker run -d --name herodemo -p 8806:6666 forge.ourworld.tf/lhumina_code/hero_zero:demo" ``` --- ## DevOps Workflow | Step | What | Who | Gate | |------|------|-----|------| | 1 | **Code** — implement the phase | Claude | — | | 2 | **Local Docker build** — build image from unpushed local code | Claude | must compile | | 3 | **Deploy to herodev** — push image to registry, pull on VM | Claude | — | | 4 | **Human test on herodev** — verify on `https://herodev.gent02.grid.tf/hero_os_ui/` | Human | must confirm | | 5 | **Commit & push** — push code to `development_miktf` | Claude | only after step 4 confirms | | 6 | **Remote Docker build** — rebuild from clean remote `development_miktf` code | Claude | must compile | | 7 | **Deploy to herodev (again)** — ship remote-built image | Claude | — | | 8 | **Human test on herodev** — verify the remote build works identically | Human | must confirm | | 9 | **Tag `:demo`** — tag image and deploy to herodemo | Claude | only after step 8 confirms | | 10 | **Human test on herodemo** — verify on `https://herodemo.gent02.grid.tf/hero_os_ui/` | Human | must confirm | | 11 | **Update this issue** — check off items, add session log with date + image SHA | Claude | — | ### Rules - **Never push before human confirms on herodev** (step 4 → step 5) - **Never tag `:demo` before human confirms the remote build** (step 8 → step 9) - **Never rebase, always merge** - **herodev gets changes first**, herodemo only after confirmation - **No hot-swapping WASM** — always do full Docker rebuild + deploy - **All pushes go to `development_miktf`**, merged to `development` via PR after confirmation --- ## Phases ### Phase 1: Demo Data ✅ DONE **Goal:** Every island shows realistic, populated data — no empty/zero states. **Completed work:** - Added 36 seed TOML files for root context (media, communication, calendar, AI, files) - **Differentiated seed data across all 4 contexts** (geomind, threefold, incubaid, root): - **Media:** 12 unique photos (3 per context, themed), 11 unique songs (themed per context), albums and playlists - **Files:** 18 unique files across contexts (AI docs, grid specs, business files, admin runbooks) - **Business:** 154 records — geomind (AI companies), threefold (grid ops), incubaid (full VC portfolio), root (minimal admin) - **Calendar:** 20 events (5 per context, March 2026 timestamps, themed) - **Communication:** 36 records (conversations, messages, emails — themed per context) - Added real media files: 9 JPGs, 11 MP3s, 9 documents bundled in `hero_osis/data/media/` - Updated `hero_services/docker/entrypoint.sh` to seed media files per context via WebDAV **Not addressed (no OSIS schema):** HR, Finance --- ### Phase 1.5: Loading Spinner & Form Centering Fix ✅ DONE **Goal:** Fix loading spinner (text was spinning with the circle) and center business forms. **Completed work:** - **Loading spinner fix:** Removed duplicate `.island-spinner` CSS rule that applied `animation: spin` to the entire container including text. Correct definition uses flex column layout: spinning `div` + static `span`. - **Form centering:** Added `margin: 0 auto` inline style to all 8 business form files (`contacts.rs`, `companies.rs`, `contracts.rs`, `deals.rs`, `instruments.rs`, `opportunities.rs`, `persons.rs`, `transactions.rs`). - **Server CSS:** Added matching spinner and form centering rules to `hero_archipelagos/server/src/styles.css`. **Commits:** `hero_os` `adb1aef`, `hero_archipelagos` `1f9ffeb`, `hero_osis` `1ab5ef7` --- ### Phase 2: Form Controls in CSS ✅ DONE **Goal:** Bootstrap 5.3-quality base styles for all HTML form elements in `styles.css`. **Completed work** (commit `bb747e8`): Added ~350 lines to `styles.css`: - [x] `input[type="text/email/password/number/url"]` — padding, border-radius, border, bg, color, focus ring, transition - [x] `textarea` — same as input, min-height, resize vertical - [x] `select` — same as input + custom chevron SVG background - [x] `input[type="checkbox/radio"]` — custom styled (accent color, checked state) - [x] `::placeholder` — muted color, opacity 0.6 - [x] `:disabled` — opacity 0.5, cursor not-allowed - [x] `.form-label`, `.form-helper`, `.form-error` — typography helpers - [x] Badge variants, card, tabs, alert, spinner, toggle-switch, list-row, stat-grid, table-responsive - [x] Light-mode overrides for all new components --- ### Phase 3: Core Components ✅ DONE **Goal:** Add missing components to `hero_archipelagos/core/src/components/`. **Completed work** (commit `29d006d`): Added 10 new Dioxus components: - [x] **TextField** — text input with label, placeholder, error, helper text - [x] **TextareaField** — textarea with label, auto-grow, char counter - [x] **CheckboxField** — checkbox with label, description - [x] **FormGroup** — layout wrapper: label + input + error/helper - [x] **Badge** — status/tag pill (primary, success, warning, danger, muted) - [x] **Card** — container with optional header, body, footer - [x] **Tabs** — tab bar with active state, content panel switching - [x] **Alert** — info/success/warning/error banner with optional dismiss - [x] **Spinner** — standalone loading indicator - [x] **ToggleSwitch** — on/off switch --- ### Phase 4: Island Form Overhaul ✅ DONE **Goal:** Replace raw HTML inputs with core components across all 14 forms. **Completed work** (commit `29d006d`): Migrated 7 island forms to core components (net -313 lines): - [x] `productivity/stories/src/views/story_form.rs` — TextField, TextareaField, SelectField, FormGroup - [x] `productivity/projects/src/views/project_form.rs` — same - [x] `productivity/sprints/src/views/milestone_form.rs` — same - [x] `messaging/src/islands/search_bar.rs` — TextField - [x] `contacts/src/islands/contact_form.rs` — FormGroup - [x] `calendar/src/islands/event_form.rs` — FormGroup + CheckboxField - [x] `productivity/tasks/src/views/task_form.rs` — FormGroup --- ### Phase 5: Layout Polish ✅ DONE **Goal:** Final visual pass — spacing, alignment, empty states, responsive behavior. **Completed work** (commit `bb747e8`): - [x] List views — `.list-row` with consistent row height, hover states - [x] Dashboard layouts — `.stat-grid` stat cards - [x] Tables — `.table-responsive` horizontal scroll - [x] Dark/Light consistency — light-mode overrides for all new components --- ## Architecture Reference ### Key Files | File | Purpose | |---|---| | `hero_os/crates/hero_os_app/src/styles.css` | Single source of truth for all WASM styles | | `hero_os/crates/hero_os_app/src/theme.rs` | Theme engine, color generation | | `hero_archipelagos/core/src/components/mod.rs` | Component library exports | | `hero_archipelagos/core/src/styles.rs` | Design system constants | | `hero_osis/data/seed/` | Seed data TOML files (per context) | | `hero_services/Dockerfile.dev` | Docker build | ### Color Tokens | Token | Dark | Light | |---|---|---| | `--color-primary` | `#007AFF` | `#007AFF` | | `--color-background` | `#212529` | `#f8f9fc` | | `--color-surface` | `#2b3035` | `#ffffff` | | `--color-text` | `#dee2e6` | `#1a1a2e` | | `--color-text-muted` | `#adb5bd` | `#6c757d` | | `--color-border` | `rgba(255,255,255,0.18)` | `rgba(0,0,0,0.12)` | | `--color-error` | `#dc3545` | `#dc3545` | --- ## Session Log | Date | Phase | Branch | Summary | |---|---|---|---| | 2026-03-08 | 1 | `development_miktf` | Added 36 seed TOML files (media, communication, calendar, AI, files) for root context. Deployed to herodev. | | 2026-03-09 | 1 | `development_miktf` | Differentiated all seed data across 4 contexts (geomind, threefold, incubaid, root). Added 9 new photos, 4 new songs, 4 new documents. Business data: 154 records themed per context. | | 2026-03-09 | 1.5 | `development_miktf` | Fixed loading spinner (text no longer spins). Centered 8 business forms with inline `margin: 0 auto`. Added spinner/centering CSS to server styles.css. | | 2026-03-09 | 2+5 | `development_miktf` | Added ~350 lines of form control CSS to styles.css: `.form-control`, `.form-label`, `.form-helper`, `.form-error`, badge, card, tabs, alert, spinner, toggle-switch, list-row, stat-grid, table-responsive, light-mode overrides. (`bb747e8`) | | 2026-03-09 | 3+4 | `development_miktf` | Added 10 new core components (TextField, TextareaField, CheckboxField, FormGroup, Badge, Card, Tabs, Alert, Spinner, ToggleSwitch). Migrated 7 island forms to core components, net -313 lines. (`29d006d`) |
mik-tf added this to the ACTIVE project 2026-03-09 21:09:06 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
development
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
ACTIVE
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/home#7
No description provided.