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

Hero OS -- Remaining UI/UX Work #11

New issue
Closed
opened 2026-03-10 15:37:01 +00:00 by mik-tf · 1 comment
mik-tf commented 2026-03-10 15:37:01 +00:00
Owner
Copy link

Continuation of #5 (Production Readiness Plan). That issue covers all completed work through Session C. This issue tracks remaining UI/UX work.

Related:

Branching Model

All repos use development as the default branch.

  • development : default, always deployable
  • development_{name} : feature branches for fast-paced AI-assisted development
  • main : releases (when ready)

One branch, one commit, one issue

AI-assisted development generates many commits fast. To keep history clean and traceable, we follow a strict rule:

  • Each feature branch (development_{name}) is squashed into one commit before merging to development
  • That commit message links to the issue, e.g.: https://forge.ourworld.tf/lhumina_code/home/issues/11 — Remaining UI/UX Work
  • One branch = one commit = one issue on development

This means every commit on development represents a complete, reviewed piece of work and links directly to the issue that describes it.

Workflow

  1. Branch development_{name} from latest development
  2. Work on development_{name} (as many commits as needed)
  3. Merge development into development_{name} periodically (never rebase, always merge)
  4. When ready, squash into one commit with the issue URL as the commit message
  5. Merge development_{name} into development

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 (pull from registry)
ssh root@495:72fa:... "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:... "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 Pipeline

Step What Who Gate
1 Code — implement changes AI --
2 Local Docker build — build image from unpushed local code AI must compile
3 Deploy to herodev — push image to registry, pull on VM AI --
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 AI only after step 4 confirms
6 Remote Docker build — rebuild from clean remote development code AI must compile
7 Deploy to herodev (again) — ship remote-built image AI --
8 Human test on herodev — verify the remote build works identically Human must confirm
9 Tag :demo — tag image and deploy to herodemo AI 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 AI --

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

Tasks

User-Adjustable Scaling (from Session C Phase 2)

  • html { font-size: var(--ui-font-size, 16px) } + Settings slider (14px-18px)
  • Propagate to iframes via postMessage, persist to localStorage
  • Dock sizing via CSS variables: move Rust consts (DOCK_BUTTON_SIZE, DOCK_ICON_BOX_SIZE, DOCK_ICON_SIZE, DOCK_BORDER_RADIUS) to CSS custom properties
  • Mobile/desktop class switching (.hero-os.mobile / .hero-os.desktop) for responsive dock sizing

Dock & Window Improvements

  • Dock zoom -- settings slider to scale toolbar icons, labels, and font sizes
  • Window snap buttons -- split left/right/fullscreen from window header buttons
  • Fullscreen API -- browser requestFullscreen() on double-click window header
  • Expose/Overview mode -- "see all windows" view (like macOS Mission Control)
  • Mobile search icon -- search/spotlight icon in toolbar for phone users
  • Responsive layout -- dock/toolbar adapt to mobile viewport (bottom nav, hamburger menu, or similar)
  • Touch targets -- ensure all interactive elements meet 44px minimum touch target for mobile

Functional Fixes

  • Store/Archipelagos -- install/uninstall toggles island visibility in dock
  • Contacts -- proper contact list, new contact form, detail view, linked to hero_osis CRM data

App UI Overhauls

  • Files/PDF viewer -- pop-out/floating panel, full-screen, delete, image opening, PDF viewing
  • Photos overhaul -- responsive grid, lightbox, multi-select, bulk actions, album sidebar
  • Songs overhaul -- now playing bar, sortable song list, playlist sidebar
  • Conference/Call UI -- clean room list, proper video grid, standard call controls
  • Business default data + UI -- remove transactions section, improve dashboard layouts

Operational Lessons

  1. Docker cache can go stale -- sometimes --no-cache is needed
  2. Container name conflicts -- always docker stop + rm before docker run
  3. Registry workflow -- build locally, push to registry, pull on VM, run
  4. Never break herodemo -- herodev is the playground
  5. Port mapping -- container 6666 maps to 8805 (herodev) and 8806 (herodemo)
  6. Cargo cache layer speeds rebuilds from ~30min to ~5-10min
  7. SSH agent forwarding -- --no-cache builds need --ssh default
Continuation of https://forge.ourworld.tf/lhumina_code/home/issues/5 (Production Readiness Plan). That issue covers all completed work through Session C. This issue tracks remaining UI/UX work. **Related:** - https://forge.ourworld.tf/lhumina_code/home/issues/5 — Production Readiness Plan (completed) - https://forge.ourworld.tf/lhumina_code/home/issues/9 — Form Quality Parity & Reusable Media Components - https://forge.ourworld.tf/lhumina_code/home/issues/12 — Infrastructure Sync & Production Deployment (prerequisite) - https://forge.ourworld.tf/lhumina_code/-/projects/13 — Project board --- ## Branching Model All repos use `development` as the default branch. - `development` : default, always deployable - `development_{name}` : feature branches for fast-paced AI-assisted development - `main` : releases (when ready) ### One branch, one commit, one issue AI-assisted development generates many commits fast. To keep history clean and traceable, we follow a strict rule: - Each feature branch (`development_{name}`) is squashed into **one commit** before merging to `development` - That commit message links to the issue, e.g.: `https://forge.ourworld.tf/lhumina_code/home/issues/11 — Remaining UI/UX Work` - One branch = one commit = one issue on `development` This means every commit on `development` represents a complete, reviewed piece of work and links directly to the issue that describes it. ### Workflow 1. Branch `development_{name}` from latest `development` 2. Work on `development_{name}` (as many commits as needed) 3. Merge `development` into `development_{name}` periodically (never rebase, always merge) 4. When ready, squash into one commit with the issue URL as the commit message 5. Merge `development_{name}` into `development` --- ## 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 (pull from registry) ssh root@495:72fa:... "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:... "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 Pipeline | Step | What | Who | Gate | |------|------|-----|------| | 1 | **Code** — implement changes | AI | -- | | 2 | **Local Docker build** — build image from unpushed local code | AI | must compile | | 3 | **Deploy to herodev** — push image to registry, pull on VM | AI | -- | | 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` | AI | only after step 4 confirms | | 6 | **Remote Docker build** — rebuild from clean remote `development` code | AI | must compile | | 7 | **Deploy to herodev (again)** — ship remote-built image | AI | -- | | 8 | **Human test on herodev** — verify the remote build works identically | Human | must confirm | | 9 | **Tag `:demo`** — tag image and deploy to herodemo | AI | 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 | AI | -- | **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 --- ## Tasks ### User-Adjustable Scaling (from Session C Phase 2) - [ ] `html { font-size: var(--ui-font-size, 16px) }` + Settings slider (14px-18px) - [ ] Propagate to iframes via postMessage, persist to localStorage - [ ] Dock sizing via CSS variables: move Rust consts (`DOCK_BUTTON_SIZE`, `DOCK_ICON_BOX_SIZE`, `DOCK_ICON_SIZE`, `DOCK_BORDER_RADIUS`) to CSS custom properties - [ ] Mobile/desktop class switching (`.hero-os.mobile` / `.hero-os.desktop`) for responsive dock sizing ### Dock & Window Improvements - [ ] Dock zoom -- settings slider to scale toolbar icons, labels, and font sizes - [ ] Window snap buttons -- split left/right/fullscreen from window header buttons - [ ] Fullscreen API -- browser `requestFullscreen()` on double-click window header - [ ] Expose/Overview mode -- "see all windows" view (like macOS Mission Control) - [ ] Mobile search icon -- search/spotlight icon in toolbar for phone users - [ ] Responsive layout -- dock/toolbar adapt to mobile viewport (bottom nav, hamburger menu, or similar) - [ ] Touch targets -- ensure all interactive elements meet 44px minimum touch target for mobile ### Functional Fixes - [ ] Store/Archipelagos -- install/uninstall toggles island visibility in dock - [ ] Contacts -- proper contact list, new contact form, detail view, linked to hero_osis CRM data ### App UI Overhauls - [ ] Files/PDF viewer -- pop-out/floating panel, full-screen, delete, image opening, PDF viewing - [ ] Photos overhaul -- responsive grid, lightbox, multi-select, bulk actions, album sidebar - [ ] Songs overhaul -- now playing bar, sortable song list, playlist sidebar - [ ] Conference/Call UI -- clean room list, proper video grid, standard call controls - [ ] Business default data + UI -- remove transactions section, improve dashboard layouts --- ## Operational Lessons 1. Docker cache can go stale -- sometimes `--no-cache` is needed 2. Container name conflicts -- always `docker stop + rm` before `docker run` 3. Registry workflow -- build locally, push to registry, pull on VM, run 4. Never break herodemo -- herodev is the playground 5. Port mapping -- container 6666 maps to 8805 (herodev) and 8806 (herodemo) 6. Cargo cache layer speeds rebuilds from ~30min to ~5-10min 7. SSH agent forwarding -- `--no-cache` builds need `--ssh default`
mik-tf added this to the ACTIVE project 2026-03-10 15:37:46 +00:00
mik-tf changed title from Hero OS -- Remaining Production Work to Hero OS -- Remaining UI/UX Work 2026-03-10 15:44:25 +00:00
mik-tf commented 2026-03-18 04:34:57 +00:00
Author
Owner
Copy link

Closed. Sufficient work. Other issues track the rest.

Closed. Sufficient work. Other issues track the rest.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
development
main
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#11
No description provided.