hyperhive/frontend/packages/dashboard
iris 560360d2e3 dashboard: extract shared helpers into common.js (#406 step 1)
First slice of the app.js split (#406). Pure utility / infrastructure
code that both /index.html and /flow.html use lifts out of the IIFE
into a sibling ES module:

- DOM helpers: `$`, `el`, `esc`, `form`, `fmtAgeSecs`
- Side-panel singleton (`Panel.open` / `openNamed` / `refresh` /
  `close` / `bind`). The `ensure()` lazy-init makes it tolerate
  being imported before the DOM element exists — `bind()` still
  needs to be called once the host page is ready.
- Path linkification + file-preview side panel:
  `appendLinkified`, `appendText`, `makePathLink`, plus the
  internal `openFilePanel` + `fetchStateFile` + `mdNode` /
  `svgImage` / `buildTabbedPreview` it depends on.
- Browser-notification module `NOTIF` (`bind`, `show`,
  `renderControls`).

`app.js` now imports these from `./common.js` and the duplicated
definitions are gone. Each removal is replaced by a one-line
breadcrumb comment so a reader chasing a name from the bundled
output can find where it landed.

`truncate`, `fmtAgo`, `fmtElapsed`, `fmtDuration` stay in app.js for
now — each has caller-specific phrasing ("X running", "X ago") that
doesn't generalise cleanly. Lift them when a second consumer needs
the same shape.

## Next steps (separate PRs)

- Step 2: split app.js into `tabs.js` (entry for /index.html — tab
  renderers + tab routing + refreshState) and `flow.js` (entry for
  /flow.html — broker terminal + inbox derived store + compose),
  both importing from common.js. Updates `build.mjs` for multiple
  entry points and switches each HTML file's `<script src>`.
- Step 3 (#408 follow-up): backend-side stream split so /flow.html
  doesn't have to subscribe to the dashboard's mutation events at all.

## Validation

- `npm run build` clean.
- Build deltas: `app.js` 154.3kb (was 153.6kb) — bundle size bumped
  slightly due to per-module overhead; same code under the hood.
  Source: app.js 2603 → 2287 lines (-316); common.js 367 lines (new).
- No HTML / CSS changes. Both pages still load `/static/app.js` as
  before.

Browser smoke test isn't possible from inside iris's container.
Worth eyeballing post-deploy:
  - Notification toggle + send still works (NOTIF.bind, NOTIF.show)
  - Side panel still opens for diff / file preview / logs (Panel)
  - Path tokens in messages still render as clickable anchors that
    open the file in the side panel (appendLinkified → makePathLink
    → openFilePanel)
2026-05-25 02:01:49 +02:00
..
src dashboard: extract shared helpers into common.js (#406 step 1) 2026-05-25 02:01:49 +02:00
build.mjs dashboard: tab-bar restructure + extract FL0W to /flow.html (#369) 2026-05-24 13:03:53 +02:00
package.json frontend: add npm workspace scaffold under frontend/ 2026-05-23 14:51:01 +02:00