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

New issue

Closed

opened 2026-05-18 23:18:59 +00:00 by timur · 1 comment

timur commented

2026-05-18 23:18:59 +00:00

Owner

Context

hero_admin_lib now ships a reusable <hero-api-docs> web component (commit 630f702 in hero_website_framework). hero_proc_admin still ships a hand-rolled API tab — the goal here is to delete the duplicate and consume the framework component.

Parent: hero_website_framework#4 — that issue's audit identified this migration as a follow-up.

Current state (audited 2026-05-19)

crates/hero_proc_admin/templates/index.html (line 667+) defines a tab-api pane with a hand-rolled api-accordion + api-detail-panel split.
crates/hero_proc_admin/static/js/dashboard.js contains the loader logic that fetches the OpenRPC spec, builds the accordion, and renders method details.
crates/hero_proc_admin/templates/base.html:168 already consumes the framework's <hero-connection-status> via /static/shared/js/connection-status.js, so the shared-asset wiring is in place — only the API tab needs swapping.

Migration

Replace the contents of <div class="tab-pane" id="tab-api"> in templates/index.html with the web component:

<hero-api-docs
    spec-url="{{ base_path }}/openrpc.json"
    rpc-url="{{ base_path }}/rpc">
</hero-api-docs>

Add the script tag in templates/base.html next to the existing connection-status.js include:
```
<script src="{{ base_path }}/static/shared/js/api-docs.js"></script>
```
Delete the API-tab loader code from static/js/dashboard.js (search for api-accordion, api-detail-panel, loadApiDocs).
Delete any local static/js/api-docs.* if one exists (current audit shows none).
Verify openrpc.json is reachable at the expected path under the admin router.

Acceptance

API tab in hero_proc_admin renders via <hero-api-docs> only — no local accordion code remains.
Deep links (#api/method/<name>, #api/type/<Name>) still work via the component's hash-prefix attribute.
Sibling admin services scaffolded from the same template inherit the migration for free.

Out of scope

Logs/jobs migration — hero_proc_admin's richer source-tree + splitter UIs stay local for now; the framework's <hero-logs-viewer> / <hero-jobs-viewer> (commits f6af8ab and 9d80616) are the baseline for new admin UIs.

## Context `hero_admin_lib` now ships a reusable `<hero-api-docs>` web component (commit [630f702](https://forge.ourworld.tf/lhumina_code/hero_website_framework/commit/630f702) in hero_website_framework). `hero_proc_admin` still ships a hand-rolled API tab — the goal here is to delete the duplicate and consume the framework component. Parent: [hero_website_framework#4](https://forge.ourworld.tf/lhumina_code/hero_website_framework/issues/4) — that issue's audit identified this migration as a follow-up. ## Current state (audited 2026-05-19) - `crates/hero_proc_admin/templates/index.html` (line 667+) defines a `tab-api` pane with a hand-rolled `api-accordion` + `api-detail-panel` split. - `crates/hero_proc_admin/static/js/dashboard.js` contains the loader logic that fetches the OpenRPC spec, builds the accordion, and renders method details. - `crates/hero_proc_admin/templates/base.html:168` already consumes the framework's `<hero-connection-status>` via `/static/shared/js/connection-status.js`, so the shared-asset wiring is in place — only the API tab needs swapping. ## Migration 1. Replace the contents of `<div class="tab-pane" id="tab-api">` in `templates/index.html` with the web component: ```html <hero-api-docs spec-url="{{ base_path }}/openrpc.json" rpc-url="{{ base_path }}/rpc"> </hero-api-docs> ``` 2. Add the script tag in `templates/base.html` next to the existing `connection-status.js` include: ```html <script src="{{ base_path }}/static/shared/js/api-docs.js"></script> ``` 3. Delete the API-tab loader code from `static/js/dashboard.js` (search for `api-accordion`, `api-detail-panel`, `loadApiDocs`). 4. Delete any local `static/js/api-docs.*` if one exists (current audit shows none). 5. Verify `openrpc.json` is reachable at the expected path under the admin router. ## Acceptance - API tab in `hero_proc_admin` renders via `<hero-api-docs>` only — no local accordion code remains. - Deep links (`#api/method/<name>`, `#api/type/<Name>`) still work via the component's `hash-prefix` attribute. - Sibling admin services scaffolded from the same template inherit the migration for free. ## Out of scope - Logs/jobs migration — `hero_proc_admin`'s richer source-tree + splitter UIs stay local for now; the framework's `<hero-logs-viewer>` / `<hero-jobs-viewer>` (commits [f6af8ab](https://forge.ourworld.tf/lhumina_code/hero_website_framework/commit/f6af8ab) and [9d80616](https://forge.ourworld.tf/lhumina_code/hero_website_framework/commit/9d80616)) are the baseline for *new* admin UIs.

timur referenced this issue from lhumina_code/hero_website_framework

2026-05-18 23:19:11 +00:00

Hoist reusable admin components from existing service UIs into hero_website_lib #4

timur referenced this issue

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

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

timur commented

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

Author

Owner

Duplicate of #108. Same task; work landed there (commit 32af77c). Closing this one.

Duplicate of [#108](https://forge.ourworld.tf/lhumina_code/hero_proc/issues/108). Same task; work landed there ([commit 32af77c](https://forge.ourworld.tf/lhumina_code/hero_proc/commit/32af77c)). Closing this one.

timur closed this issue

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