Migrate hand-rolled API tab in `hero_proc_admin` to `<hero-api-docs>` web component #108

New issue

Open

opened 2026-05-19 00:29:33 +00:00 by timur · 1 comment

timur commented

2026-05-19 00:29:33 +00:00

Owner

Context

Follow-up from hero_website_framework#4. The OpenRPC explorer that was meant to be hoisted out of hero_proc_admin has now landed as a reusable web component <hero-api-docs> in hero_admin_lib/static/js/api-docs.js.

Audit (comment 33847): hero_proc_admin still ships its own hand-rolled API tab. Migrate it.

Locations to change

crates/hero_proc_admin/templates/index.html:667+ — the API tab markup.
crates/hero_proc_admin/static/js/dashboard.js — the api-acc* (api-accordion) JS that drives it.
Any associated CSS in crates/hero_proc_admin/static/css/.

What to do

Replace the hand-rolled API-tab section with a single <hero-api-docs> element. Attribute config per the component's doc-comment in hero_admin_lib/src/assets.rs (rpc-url, etc.).
Ensure hero_admin_lib's static assets are mounted on the same path the component expects (/static/shared/js/api-docs.js). Cross-check with how <hero-connection-status> is already wired in templates/base.html:168.
Delete the hand-rolled JS / CSS / template markup once the component is verified working.
Smoke-test in a running hero_proc_admin against hero_proc_server — confirm method list, param input, request fire, response display all match prior behaviour.

Acceptance

API tab in hero_proc_admin rendered by <hero-api-docs>; no hand-rolled accordion code remains.
All api-acc* selectors removed from dashboard.js.
Visual + functional parity with the prior tab.
hero_proc_admin build clean; no orphaned static asset paths.

hero_website_framework#4 — source issue that hoisted the component.
Parent META: hero_skills#262.

## Context Follow-up from [hero_website_framework#4](https://forge.ourworld.tf/lhumina_code/hero_website_framework/issues/4). The OpenRPC explorer that was meant to be hoisted out of `hero_proc_admin` has now landed as a reusable web component `<hero-api-docs>` in [`hero_admin_lib/static/js/api-docs.js`](https://forge.ourworld.tf/lhumina_code/hero_website_framework/src/branch/development/crates/hero_admin_lib/static/js/api-docs.js). Audit ([comment 33847](https://forge.ourworld.tf/lhumina_code/hero_website_framework/issues/4#issuecomment-33847)): `hero_proc_admin` still ships its own hand-rolled API tab. Migrate it. ## Locations to change - `crates/hero_proc_admin/templates/index.html:667+` — the API tab markup. - `crates/hero_proc_admin/static/js/dashboard.js` — the `api-acc*` (api-accordion) JS that drives it. - Any associated CSS in `crates/hero_proc_admin/static/css/`. ## What to do 1. Replace the hand-rolled API-tab section with a single `<hero-api-docs>` element. Attribute config per the component's doc-comment in [`hero_admin_lib/src/assets.rs`](https://forge.ourworld.tf/lhumina_code/hero_website_framework/src/branch/development/crates/hero_admin_lib/src/assets.rs) (`rpc-url`, etc.). 2. Ensure `hero_admin_lib`'s static assets are mounted on the same path the component expects (`/static/shared/js/api-docs.js`). Cross-check with how `<hero-connection-status>` is already wired in `templates/base.html:168`. 3. Delete the hand-rolled JS / CSS / template markup once the component is verified working. 4. Smoke-test in a running `hero_proc_admin` against `hero_proc_server` — confirm method list, param input, request fire, response display all match prior behaviour. ## Acceptance - [ ] API tab in `hero_proc_admin` rendered by `<hero-api-docs>`; no hand-rolled accordion code remains. - [ ] All `api-acc*` selectors removed from `dashboard.js`. - [ ] Visual + functional parity with the prior tab. - [ ] `hero_proc_admin` build clean; no orphaned static asset paths. ## Related - [hero_website_framework#4](https://forge.ourworld.tf/lhumina_code/hero_website_framework/issues/4) — source issue that hoisted the component. - Parent META: [hero_skills#262](https://forge.ourworld.tf/lhumina_code/hero_skills/issues/262).

timur referenced this issue from lhumina_code/hero_skills

2026-05-19 00:29:48 +00:00

[META] Standardize Hero service architecture — template, hero_rpc alignment, framework hoist, skills #262

timur commented

2026-05-19 01:17:28 +00:00

Author

Owner

Done — API tab migrated to `<hero-api-docs>`

Landed on development in commit 32af77c.

What changed

File	Change
`crates/hero_proc_admin/templates/index.html`	Replaced the API TAB markup (lines 625–649: `api-accordion` + `api-detail-panel` + loading state) with a single `<hero-api-docs spec-url="{{ base_path }}/openrpc.json" rpc-url="{{ base_path }}/rpc">`.
`crates/hero_proc_admin/templates/base.html`	Added `<script src="{{ base_path }}/static/shared/js/api-docs.js">` next to the existing `connection-status.js` line — same pattern, same shared mount.
`crates/hero_proc_admin/static/js/dashboard.js`	Removed `apiDocsInitialized` flag, the `switchTab('api')` init branch, the special-case `api/...` hashchange handler (component owns its own hash routing via the default `hash-prefix="api"`), and the entire 478-line API helper block: `API_NS_ICONS`, `_apiSpec`, `apiSchemaTypeLabel/Html`, `apiBuildExampleBody/Output`, `apiCopyToClipboard`, `apiShowDetail/Type`, `apiBuildGroupHtml/TypesGroupHtml`, `apiSelectMethod/Type`, `apiMethodsUsingType`, `apiToggleGroup`, `apiApplyHash`, `initApiDocs`.
`crates/hero_proc_admin/static/css/dashboard.css`	Removed the entire `API DOCS TAB` section (~285 lines, all `.api-*` selectors). The component's styles are scoped to its own Shadow DOM, so no replacement needed.

Net: 4 files, +7 / −804 lines. cargo build -p hero_proc_admin is clean.

Acceptance check (from the issue)

API tab in hero_proc_admin rendered by <hero-api-docs>; no hand-rolled accordion code remains.
All api-acc* selectors removed from dashboard.js. (grep for api-acc|apiAcc|API_NS_ICONS|initApiDocs|_apiSpec returns no matches across the crate.)
Visual + functional parity with the prior tab. Deferred to maintainer — see "Smoke test" below.
hero_proc_admin build clean; no orphaned static asset paths. (The /static/shared/{*path} route in routes.rs:326 already serves api-docs.js from hero_admin_lib — same mount that powers connection-status.js, bootstrap.bundle.min.js, marked.min.js, highlight.min.js.)

Smoke test — deferred

The issue calls for running hero_proc_admin against hero_proc_server and verifying method list / param input / request fire / response. My environment has no provisioned Hero user (PATH_ROOT unset, no hero_cfg.toml), and lab service core to bootstrap the stack has broad side effects (sqlite state, hero_router, hero_code, hero_db). Holding off rather than taking that action autonomously.

Wiring confidence is high regardless: <hero-api-docs> is the same shape as <hero-connection-status> (already working in this admin via the same /static/shared/ mount), and the framework's demo_website exercises it end-to-end. If you spin it up and the API tab looks wrong, the fix is almost certainly attribute-level (e.g. spec-url resolution under a non-root base_path).

Note on the duplicate issue

This is essentially the same task as #107 (less detailed body, no comments). I worked from #108 as instructed; #107 can be closed as a duplicate.

## Done — API tab migrated to `<hero-api-docs>` Landed on `development` in commit [32af77c](https://forge.ourworld.tf/lhumina_code/hero_proc/commit/32af77c). ### What changed | File | Change | |---|---| | `crates/hero_proc_admin/templates/index.html` | Replaced the API TAB markup (lines 625–649: `api-accordion` + `api-detail-panel` + loading state) with a single `<hero-api-docs spec-url="{{ base_path }}/openrpc.json" rpc-url="{{ base_path }}/rpc">`. | | `crates/hero_proc_admin/templates/base.html` | Added `<script src="{{ base_path }}/static/shared/js/api-docs.js">` next to the existing `connection-status.js` line — same pattern, same shared mount. | | `crates/hero_proc_admin/static/js/dashboard.js` | Removed `apiDocsInitialized` flag, the `switchTab('api')` init branch, the special-case `api/...` hashchange handler (component owns its own hash routing via the default `hash-prefix="api"`), and the entire 478-line API helper block: `API_NS_ICONS`, `_apiSpec`, `apiSchemaTypeLabel/Html`, `apiBuildExampleBody/Output`, `apiCopyToClipboard`, `apiShowDetail/Type`, `apiBuildGroupHtml/TypesGroupHtml`, `apiSelectMethod/Type`, `apiMethodsUsingType`, `apiToggleGroup`, `apiApplyHash`, `initApiDocs`. | | `crates/hero_proc_admin/static/css/dashboard.css` | Removed the entire `API DOCS TAB` section (~285 lines, all `.api-*` selectors). The component's styles are scoped to its own Shadow DOM, so no replacement needed. | **Net: 4 files, +7 / −804 lines.** `cargo build -p hero_proc_admin` is clean. ### Acceptance check (from the issue) - [x] API tab in `hero_proc_admin` rendered by `<hero-api-docs>`; no hand-rolled accordion code remains. - [x] All `api-acc*` selectors removed from `dashboard.js`. (`grep` for `api-acc|apiAcc|API_NS_ICONS|initApiDocs|_apiSpec` returns no matches across the crate.) - [ ] Visual + functional parity with the prior tab. **Deferred to maintainer** — see "Smoke test" below. - [x] `hero_proc_admin` build clean; no orphaned static asset paths. (The `/static/shared/{*path}` route in `routes.rs:326` already serves `api-docs.js` from `hero_admin_lib` — same mount that powers `connection-status.js`, `bootstrap.bundle.min.js`, `marked.min.js`, `highlight.min.js`.) ### Smoke test — deferred The issue calls for running `hero_proc_admin` against `hero_proc_server` and verifying method list / param input / request fire / response. My environment has no provisioned Hero user (`PATH_ROOT` unset, no `hero_cfg.toml`), and `lab service core` to bootstrap the stack has broad side effects (sqlite state, hero_router, hero_code, hero_db). Holding off rather than taking that action autonomously. Wiring confidence is high regardless: `<hero-api-docs>` is the same shape as `<hero-connection-status>` (already working in this admin via the same `/static/shared/` mount), and the framework's `demo_website` exercises it end-to-end. If you spin it up and the API tab looks wrong, the fix is almost certainly attribute-level (e.g. `spec-url` resolution under a non-root `base_path`). ### Note on the duplicate issue This is essentially the same task as [#107](https://forge.ourworld.tf/lhumina_code/hero_proc/issues/107) (less detailed body, no comments). I worked from #108 as instructed; #107 can be closed as a duplicate.

timur referenced this issue

2026-05-19 01:24:04 +00:00

Migrate hero_proc_admin API tab to <hero-api-docs> framework component #107