Redesign service view: unified entries, embedded UI, layout fixes #10

New issue

Closed

opened 2026-03-31 08:47:07 +00:00 by timur · 1 comment

timur commented

2026-03-31 08:47:07 +00:00

Owner

Overview

Several improvements to how hero_inspector presents services — from how they're listed in autodiscovery to how individual service views are structured and how UIs are surfaced.

1. Unified service entries in autodiscovery

Current behavior: Each socket gets its own entry in the autodiscovered services list. So hero_aibroker_server and hero_aibroker_ui appear as two separate entries. Same for hero_os, hero_runner, hero_proxy, etc.

Problem: These are not independent services — they are two halves of the same logical service. Having separate entries doubles the list and forces the user to navigate between them.

Proposed: One entry per logical service (e.g., hero_aibroker, hero_os, hero_runner, hero_proxy). The entry should:

Group the _server and _ui sockets together
Show health status of both server and UI compactly in the service header (e.g., two status badges: server: ● healthy, ui: ● healthy)
The _ui details are accessible via a "UI" tab within the service view (see section 3 below)

2. Remove redundant socket path line

Current behavior: The service detail view shows a line like:

This service serves an HTML interface over its Unix socket at /Users/timurgordon/hero/var/sockets/hero_aibroker_ui.sock.

Problem: The service header already displays the socket path. This line is redundant.

Proposed: Remove this line from the service detail body.

3. Embed UI in service view via iframe

Since we're unifying _server and _ui into one entry, the UI needs a home.

Proposed: Add a "UI" tab alongside the existing Methods / Markdown / etc. tabs. This tab contains an iframe that loads the service's admin UI via the proxy (e.g., http://127.0.0.1:9998/hero_aibroker_ui). This gives instant access to the service dashboard without leaving the inspector.

4. UI path discovery and status

Go further than just embedding the UI — actively discover what's available.

Proposed: Add a "UI Paths" section (could be a sub-tab or panel within the UI tab) that:

Crawls the UI service's routes/paths (e.g., /, /status, /settings, /rpc, etc.)
Lists each discovered path with its HTTP status code
Acts as a quick health overview of all UI endpoints

This could work by:

Fetching the root page and extracting <a href> links
Hitting each path and recording the status
Optionally showing a mini-preview or description of each path

5. Methods/Markdown tabs: card container with scroll

Current behavior: The Methods, Markdown, and other content tabs render their content directly in the page. Long content overflows the viewport and the entire page scrolls.

Problem: On services with many RPC methods or long documentation, the tabs and header scroll out of view. The user loses navigation context.

Proposed: Wrap the tab content area in a card (or equivalent container) with:

Fixed height (e.g., calc(100vh - <header_height>))
overflow-y: auto on the content area so it scrolls within the card
The tab bar and service header remain pinned/visible at all times

Summary of Changes

Area	Change
Autodiscovery list	One entry per logical service, not per socket
Service header	Show both server + UI status badges
Service detail	Remove redundant socket path text
Tabs	Add "UI" tab with iframe embedding the admin UI
Tabs	Add "UI Paths" showing crawled routes + HTTP status
Tab content	Wrap in scrollable card container, pin header + tab bar

## Overview Several improvements to how hero_inspector presents services — from how they're listed in autodiscovery to how individual service views are structured and how UIs are surfaced. --- ## 1. Unified service entries in autodiscovery **Current behavior:** Each socket gets its own entry in the autodiscovered services list. So `hero_aibroker_server` and `hero_aibroker_ui` appear as two separate entries. Same for hero_os, hero_runner, hero_proxy, etc. **Problem:** These are not independent services — they are two halves of the same logical service. Having separate entries doubles the list and forces the user to navigate between them. **Proposed:** One entry per logical service (e.g., `hero_aibroker`, `hero_os`, `hero_runner`, `hero_proxy`). The entry should: - Group the `_server` and `_ui` sockets together - Show health status of both server and UI compactly in the service header (e.g., two status badges: `server: ● healthy`, `ui: ● healthy`) - The `_ui` details are accessible via a "UI" tab within the service view (see section 3 below) --- ## 2. Remove redundant socket path line **Current behavior:** The service detail view shows a line like: > This service serves an HTML interface over its Unix socket at /Users/timurgordon/hero/var/sockets/hero_aibroker_ui.sock. **Problem:** The service header already displays the socket path. This line is redundant. **Proposed:** Remove this line from the service detail body. --- ## 3. Embed UI in service view via iframe Since we're unifying `_server` and `_ui` into one entry, the UI needs a home. **Proposed:** Add a **"UI" tab** alongside the existing Methods / Markdown / etc. tabs. This tab contains an iframe that loads the service's admin UI via the proxy (e.g., `http://127.0.0.1:9998/hero_aibroker_ui`). This gives instant access to the service dashboard without leaving the inspector. --- ## 4. UI path discovery and status Go further than just embedding the UI — actively discover what's available. **Proposed:** Add a **"UI Paths"** section (could be a sub-tab or panel within the UI tab) that: - Crawls the UI service's routes/paths (e.g., `/`, `/status`, `/settings`, `/rpc`, etc.) - Lists each discovered path with its HTTP status code - Acts as a quick health overview of all UI endpoints This could work by: - Fetching the root page and extracting `<a href>` links - Hitting each path and recording the status - Optionally showing a mini-preview or description of each path --- ## 5. Methods/Markdown tabs: card container with scroll **Current behavior:** The Methods, Markdown, and other content tabs render their content directly in the page. Long content overflows the viewport and the entire page scrolls. **Problem:** On services with many RPC methods or long documentation, the tabs and header scroll out of view. The user loses navigation context. **Proposed:** Wrap the tab content area in a card (or equivalent container) with: - Fixed height (e.g., `calc(100vh - <header_height>)`) - `overflow-y: auto` on the content area so it scrolls within the card - The tab bar and service header remain pinned/visible at all times --- ## Summary of Changes | Area | Change | |------|--------| | Autodiscovery list | One entry per logical service, not per socket | | Service header | Show both server + UI status badges | | Service detail | Remove redundant socket path text | | Tabs | Add "UI" tab with iframe embedding the admin UI | | Tabs | Add "UI Paths" showing crawled routes + HTTP status | | Tab content | Wrap in scrollable card container, pin header + tab bar |

timur commented

2026-03-31 11:06:27 +00:00

Author

Owner

Implemented in commit fa5c409 on development branch.

Changes

Unified sidebar entries — _server and _ui sockets now appear as a single grouped entry with dual status badges (server/UI health shown compactly). Uses existing derive_group_name() logic.
Removed redundant socket path notice — The "This service serves an HTML interface..." card has been removed from the service detail view.
Embedded UI tab — New "UI" tab with an iframe that loads the admin UI via the existing proxy (/{group_name}_ui). Lazy-loads on first tab show. For web-only services (no OpenRPC), the UI tab is the default active tab.
UI path discovery — New GET /api/ui-routes/:service_name endpoint that fetches the root page, extracts href links, and checks HTTP status of each path. Triggered via "Discover routes" button in the UI tab.
Scrollable tab content — Header card and tab bar are now pinned while tab content scrolls independently via flex layout. Sidebar also scrolls independently within its column.

Files changed

routes.rs — SidebarGroup struct, build_sidebar_groups(), ui_routes_handler(), new routes, stripped x-frame-options in proxy
sidebar.html — Grouped entries with dual status badges
service.html — Removed web notice, added UI tab with iframe + route discovery, scroll wrapper
base.html — Updated URL regex for ui/service-logs tabs
index.html — Flex layout with viewport height
dashboard.css — Scroll wrapper, iframe, dual-badge styles

Implemented in commit `fa5c409` on `development` branch. ### Changes 1. **Unified sidebar entries** — `_server` and `_ui` sockets now appear as a single grouped entry with dual status badges (server/UI health shown compactly). Uses existing `derive_group_name()` logic. 2. **Removed redundant socket path notice** — The "This service serves an HTML interface..." card has been removed from the service detail view. 3. **Embedded UI tab** — New "UI" tab with an iframe that loads the admin UI via the existing proxy (`/{group_name}_ui`). Lazy-loads on first tab show. For web-only services (no OpenRPC), the UI tab is the default active tab. 4. **UI path discovery** — New `GET /api/ui-routes/:service_name` endpoint that fetches the root page, extracts `href` links, and checks HTTP status of each path. Triggered via "Discover routes" button in the UI tab. 5. **Scrollable tab content** — Header card and tab bar are now pinned while tab content scrolls independently via flex layout. Sidebar also scrolls independently within its column. ### Files changed - `routes.rs` — `SidebarGroup` struct, `build_sidebar_groups()`, `ui_routes_handler()`, new routes, stripped `x-frame-options` in proxy - `sidebar.html` — Grouped entries with dual status badges - `service.html` — Removed web notice, added UI tab with iframe + route discovery, scroll wrapper - `base.html` — Updated URL regex for `ui`/`service-logs` tabs - `index.html` — Flex layout with viewport height - `dashboard.css` — Scroll wrapper, iframe, dual-badge styles