vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

frontend: create the side-panel instance eagerly, not lazily behind a per-call guard

Browse source 
Per mara's review on the side-panel PR: create the shared <hive-side-panel>
instance once at module-evaluation time instead of lazily on first call
via an ensurePanel() guard every wrapper method had to remember to call.
ES modules execute after the document is parsed (same timing as a defer
script), so document.body is already available when this code runs --
lazy init bought nothing here and left a footgun for any future method
added to either wrapper.
This commit is contained in:
iris 2026-08-01 00:32:16 +02:00 • committed by mara
commit 996899fcad
2 changed files with 29 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

38
frontend/packages/agent/src/app.js
View file

@ -39,28 +39,24 @@ window.marked = marked;
// ─── side panel (singleton drawer for inbox + loose-ends flyouts) ────── // ─── side panel (singleton drawer for inbox + loose-ends flyouts) ──────
// Thin wrapper around the shared `<hive-side-panel>` element (see // Thin wrapper around the shared `<hive-side-panel>` element (see
// @hive/shared/side-panel.js) — created and appended to <body> lazily // @hive/shared/side-panel.js) — created once, eagerly, when this
// on first use, same pattern `themedToast` uses for its toast-stack // module's IIFE runs (ES modules execute after the document is
// container. This UI's `open(name, title, content)` always takes an // parsed, so `document.body` already exists; no per-call lazy-init
// owner name, so it maps straight onto the shared element's // guard to remember for any method, present or future). This UI's
// `openNamed`; `side-panel-body` is a plain compatibility class this // `open(name, title, content)` always takes an owner name, so it maps
// wrapper puts on its own instance so `agent.css`'s existing // straight onto the shared element's `openNamed`; `side-panel-body`
// `.side-panel-body .agent-inbox …` rules keep reaching the slotted // is a plain compatibility class this wrapper puts on its own
// content by ordinary light-DOM descendant matching. // instance so `agent.css`'s existing `.side-panel-body .agent-inbox
let panelEl = null; // …` rules keep reaching the slotted content by ordinary light-DOM
function ensurePanel() { // descendant matching.
if (!panelEl) { const panelEl = document.createElement('hive-side-panel');
panelEl = document.createElement('hive-side-panel'); panelEl.classList.add('side-panel-body');
panelEl.classList.add('side-panel-body'); document.body.append(panelEl);
document.body.append(panelEl);
}
return panelEl;
}
const Panel = { const Panel = {
open: (name, title, content) => ensurePanel().openNamed(name, title, content), open: (name, title, content) => panelEl.openNamed(name, title, content),
close: () => ensurePanel().close(), close: () => panelEl.close(),
refresh: (name, title, content) => ensurePanel().refresh(name, title, content), refresh: (name, title, content) => panelEl.refresh(name, title, content),
currentOwner: () => ensurePanel().currentOwner(), currentOwner: () => panelEl.currentOwner(),
}; };
// Wire the header pills to open the side panel. Pre-built (vs // Wire the header pills to open the side panel. Pre-built (vs

28
frontend/packages/dashboard/src/common.js
View file

@ -287,27 +287,23 @@ export function openBuildLogStream(id, pre, { onDone, onError } = {}) {
// //
// Thin wrapper around the shared `<hive-side-panel>` element (see // Thin wrapper around the shared `<hive-side-panel>` element (see
// @hive/shared/side-panel.js for the chrome/behavior it owns, including // @hive/shared/side-panel.js for the chrome/behavior it owns, including
// drag-to-resize) — the instance is created and appended to <body> // drag-to-resize). The instance is created once, eagerly, at module
// lazily on first use, same pattern `themedToast` uses for its // evaluation time — ES modules run after the document is parsed (same
// toast-stack container. `side-panel-body` is a plain compatibility // timing `defer` scripts get), so `document.body` already exists here;
// no per-call lazy-init guard needed, and no easy-to-forget step for
// any new method added later. `side-panel-body` is a plain compatibility
// class this wrapper puts on its own instance so `common.css`'s // class this wrapper puts on its own instance so `common.css`'s
// existing `.side-panel-body .md …` rules keep reaching the slotted // existing `.side-panel-body .md …` rules keep reaching the slotted
// content by ordinary light-DOM descendant matching — the shared // content by ordinary light-DOM descendant matching — the shared
// element itself has no idea that class name means anything. // element itself has no idea that class name means anything.
let panelEl = null; const panelEl = document.createElement('hive-side-panel');
function ensurePanel() { panelEl.classList.add('side-panel-body');
if (!panelEl) { document.body.append(panelEl);
panelEl = document.createElement('hive-side-panel');
panelEl.classList.add('side-panel-body');
document.body.append(panelEl);
}
return panelEl;
}
export const Panel = { export const Panel = {
open: (title, content) => ensurePanel().open(title, content), open: (title, content) => panelEl.open(title, content),
openNamed: (name, title, content) => ensurePanel().openNamed(name, title, content), openNamed: (name, title, content) => panelEl.openNamed(name, title, content),
refresh: (name, title, content) => ensurePanel().refresh(name, title, content), refresh: (name, title, content) => panelEl.refresh(name, title, content),
close: () => ensurePanel().close(), close: () => panelEl.close(),
}; };
// ─── path linkification ───────────────────────────────────────────────── // ─── path linkification ─────────────────────────────────────────────────