feat: Multi-node explorer UI, console session persistence, and health monitoring #55

Merged

mahmoud merged 23 commits from development_explorer_mode into development 2026-04-02 14:51:37 +00:00

Conversation 0 Commits 23 Files changed 16 +1232 -303

mahmoud commented 2026-04-02 14:39:51 +00:00

Owner

Copy link

Description

Explorer mode, multi-node UI, production hardening, and console improvements for hero_compute. This PR adds server-driven UI mode detection (local/master/worker), a view toggle for master nodes to switch between local and explorer views, resizable and persistent console sessions, a startup health check overlay with background polling, and numerous UX improvements including skeleton loading states, activity log persistence, and VM lifecycle state preservation across page navigation.

Changes

• Server-driven UI mode: UI mode (local/master/worker) determined server-side via HERO_COMPUTE_UI_MODE env var and /api/mode endpoint — replaces client-side heuristics
• Explorer view toggle: Master nodes get a Node/Explorer toggle in the navbar; view mode persists in localStorage
• Health check overlay: /status endpoint checks all services (Compute Server, my_hypervisor, hero_proc, Central Config, Image Registry, Explorer on master only); startup overlay on first page load, background 2s polling shows overlay on critical failure
• Status hover card: Hovering the "Connected" indicator in the navbar shows a live service status card updated every 2s
• Resizable console: Console terminal wrap is drag-resizable (CSS resize: both), with fullscreen and resize disabled for remote-node consoles (hostname comparison via /api/config)
• Console resize protocol: Terminal resize events sent to VM via in-band \x01RSZ protocol — server encodes JSON resize messages from browser into the binary vsock format
• Persistent console sessions: Server-side session persistence across browser refresh (vsock kept alive, 64KB output buffer, replay on reconnect); floating mini terminal with live output; background WebSocket for minimized sessions
• VM lifecycle state preservation: Deleting VMs tracked in sessionStorage, polling resumes after page reload; transitional VMs (provisioning, starting, stopping) auto-resume polling and log fetching
• Activity log persistence: Activity log stored in sessionStorage, deduplicated on seed, survives page navigation
• Skeleton loading states: Shimmer skeleton rows replace "Loading..." spinners in all VM tables (vms, index, nodes, admin)
• Toast redesign: Custom .hc-toast component using app theme variables instead of Bootstrap colored backgrounds
• Proxy timeouts: Explorer proxy connections get 10s connect and 120s read timeouts
• TCP bridge improvements: Configurable bind address, optional auth token, connection semaphore (max 100)

Related Issues

• Update this section with related issue links

### Description Explorer mode, multi-node UI, production hardening, and console improvements for hero_compute. This PR adds server-driven UI mode detection (local/master/worker), a view toggle for master nodes to switch between local and explorer views, resizable and persistent console sessions, a startup health check overlay with background polling, and numerous UX improvements including skeleton loading states, activity log persistence, and VM lifecycle state preservation across page navigation. ### Changes - **Server-driven UI mode**: UI mode (`local`/`master`/`worker`) determined server-side via `HERO_COMPUTE_UI_MODE` env var and `/api/mode` endpoint — replaces client-side heuristics - **Explorer view toggle**: Master nodes get a Node/Explorer toggle in the navbar; view mode persists in localStorage - **Health check overlay**: `/status` endpoint checks all services (Compute Server, my_hypervisor, hero_proc, Central Config, Image Registry, Explorer on master only); startup overlay on first page load, background 2s polling shows overlay on critical failure - **Status hover card**: Hovering the "Connected" indicator in the navbar shows a live service status card updated every 2s - **Resizable console**: Console terminal wrap is drag-resizable (CSS `resize: both`), with fullscreen and resize disabled for remote-node consoles (hostname comparison via `/api/config`) - **Console resize protocol**: Terminal resize events sent to VM via in-band `\x01RSZ` protocol — server encodes JSON resize messages from browser into the binary vsock format - **Persistent console sessions**: Server-side session persistence across browser refresh (vsock kept alive, 64KB output buffer, replay on reconnect); floating mini terminal with live output; background WebSocket for minimized sessions - **VM lifecycle state preservation**: Deleting VMs tracked in sessionStorage, polling resumes after page reload; transitional VMs (provisioning, starting, stopping) auto-resume polling and log fetching - **Activity log persistence**: Activity log stored in sessionStorage, deduplicated on seed, survives page navigation - **Skeleton loading states**: Shimmer skeleton rows replace "Loading..." spinners in all VM tables (vms, index, nodes, admin) - **Toast redesign**: Custom `.hc-toast` component using app theme variables instead of Bootstrap colored backgrounds - **Proxy timeouts**: Explorer proxy connections get 10s connect and 120s read timeouts - **TCP bridge improvements**: Configurable bind address, optional auth token, connection semaphore (max 100) ### Related Issues - [ ] _Update this section with related issue links_

mahmoud added 23 commits 2026-04-02 14:39:51 +00:00

feat: Server-driven UI mode and TCP explorer ... 68d5aa412d

- Add `HERO_COMPUTE_UI_MODE` environment variable.
- Fetch UI mode from `/api/config`.
- Remove local UI mode toggling.
- Update explorer heartbeat to support TCP.
- Handle non-local modes for admin/explorer pages.
- Display current UI mode in navigation.

refactor: Remove UI elements from renderModeCard ... 6c5c82f3fa

- Remove icon, title, and subtitle element retrieval
- Remove switchLabel element retrieval
- Remove conditional setting of icon, title, subtitle, and switchLabel
- Update conditional check for stats element existence

merge: resolve conflict with development (central config + UI mode) 3e576878e8

feat: Add UI view mode toggle for master ... 1657d21750

- Add localStorage for view mode persistence
- Implement view toggle buttons in the navbar
- Initialize view mode toggle on page load
- Update mode management logic

feat: Update UI labels and server mode logic ... 8780b69538

- Rename "Fleet" to "Explorer" in UI
- Inject `ui_mode` variable into script
- Update `getServerMode` to use injected `ui_mode`

feat: Update UI labels and server mode logic ... 4cf5d4ec75

- Rename "Fleet" to "Explorer" in UI
- Inject `ui_mode` variable into script
- Update `getServerMode` to use injected `ui_mode`

ender mode card client-side ... 98dd3b3c66

- Auto-detect UI mode based on explorer socket existence
- Update `setViewMode` to use `location.replace`
- Remove server-side rendering of mode card content
- Implement client-side rendering for mode card detailsa

refactor: Improve node label formatting ... 1ca44ad298

- Add helper function to format node labels
- Display hostname and SID consistently
- Update various UI elements to use the new format

feat: Improve deployment logs and VM console link ... 671f540706

- Auto-expand deployment log section
- Re-resolve log container on DOM change
- Display "Waiting for logs" message
- Log fetch errors and increase retries
- Clear and update VM console link

refactor: Improve UI mode detection and console resize handling ... fd762c323f

- Add `effective_mode` method to `AppState`
- Auto-detect UI mode based on explorer socket existence
- Handle WebSocket resize messages for console
- Implement console resize sending to VM
- Adjust VM table column count for master mode
- Conditionally hide console minimize button for remote VMs
- Reset console dialog state on connect

perf: Debounce and delay console resize events ... 0366788031

- Debounce resize events to prevent flooding
- Delay initial resize event for shell handler initialization

feat: Add resizable console terminal ... 380c5ac23d

- Add CSS for resizable console
- Update fullscreen toggle logic
- Observe wrapper for resize events
- Hide fullscreen for remote nodes
- Make console wrapper resizable

feat: Add detailed health check endpoint and startup overlay ... e1ddb1dadc

- Add `/api/health/detailed` endpoint
- Implement detailed health checks for services
- Add CSS for startup overlay
- Add JavaScript for startup health checks
- Display startup checks on page load

refactor: Improve startup overlay styling and logic ... 056a9817ed

- Update transition and card styling
- Refactor header and checks layout
- Adjust check row and detail styling
- Improve error message display
- Update retry logic for server unreachable state

feat: Improve status overlay and timeouts ... 09bbb20601

- Increase socket read timeout to 120 seconds
- Change health check endpoint from /api/health/detailed to /status
- Add hostname to server config
- Add data-node-hostname attribute to VM rows
- Close console if deleted VM had one open
- Refactor startup checks and health polling logic
- Implement table skeleton rows for loading states
- Remove redundant checkServerStatus calls

fix: Hide startup overlay by default ... 12b56b5b72

- Add `d-none` class to startup overlay div
- Update comment for startup overlay

feat: Improve VM status reporting and delete confirmation ... ddff8ed946

- Conditionally show Explorer status based on mode
- Add elapsed time to delete VM confirmation dialog
- Improve clarity of delete operation status updates

fix: Disable VM row interaction during loading ... dc12f49a73

- Add 'pe-none' and 'opacity-50' classes
- Remove 'clickable' class

feat: Track VM deletion state across page navigation ... 25d66994d4

- Add sessionStorage-based tracker for deleting VMs
- Display "deleting" state and elapsed time on VM rows
- Disable VM row interaction while deleting
- Prevent stale delete entries in sessionStorage

feat: Add status hover card for server services ... d5b196549c

- Add CSS for status hover card
- Implement logic to render service status in hover card
- Persist activity log in sessionStorage
- Update activity log saving mechanism

refactor: Improve VM ID display in toasts and logs ... 4a5eda7d55

- Use short VM SID in initiated toasts
- Use short VM SID in initiated logs
- Use short VM SID in delete failed toasts
- Use short VM SID in delete failed logs

feat: Improve toast notifications and VM polling ... e0f6bd152b

- Add custom toast component with animations
- Resume polling for transitional VMs on page reload
- Update toast appearance and dismiss behavior
- Ensure transitional VM polling on initial render

feat: Add VM deletion polling and activity log deduplication ... 42f9bfbbe3

- Avoid duplicate activity log entries
- Prevent duplicate seeding of activity log
- Add polling for VMs being deleted
- Resume polling for deleted VMs

mahmoud changed title from Merge development to feat: Multi-node explorer UI, console session persistence, and health monitoring 2026-04-02 14:51:32 +00:00

mahmoud merged commit d5c9c1ce76 into development 2026-04-02 14:51:37 +00:00

mahmoud referenced this pull request from a commit 2026-04-02 14:51:38 +00:00

Merge pull request 'feat: Multi-node explorer UI, console session persistence, and health monitoring' (#55) from development_explorer_mode into development

timur referenced this pull request 2026-05-19 02:32:31 +00:00

Rename hero_service → hero_lifecycle (#55 downstream) #112

timur referenced this pull request from a commit 2026-05-19 02:32:32 +00:00

flip pin: issue-55-codegen-alignment → development (#55)

timur referenced this pull request from a commit 2026-05-19 02:32:33 +00:00

Rename hero_service → hero_lifecycle (#55 downstream) (#112)

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

prio_critical

  

prio_low

  

type_bug

  

type_contact

  

type_issue

  

type_lead

  

type_question

  

type_story

  

type_task

No labels

prio_critical

prio_low

type_bug

type_contact

type_issue

type_lead

type_question

type_story

type_task

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

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_compute!55

No description provided.