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

treefmt: apply prettier

Browse source 
Pure `nix fmt` output from the commit before this one — no hand edits.
203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs.

Reproduce with `nix develop -c nix fmt` on the parent commit; the result
should be byte-identical to this tree.

None of the 13 `.prettierignore` entries appears here — verified by
intersecting the changed-file list against the ignore file, with a
control proving the intersection finds a match when one exists.
This commit is contained in:
atlas 2026-09-02 14:29:33 +02:00
commit 39b95c2ede
203 changed files with 10090 additions and 6085 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/packages/shared/src/side-panel/hive-side-panel.css
View file

@ -50,9 +50,15 @@
transition: transform 220ms ease;
overflow: hidden;
}
:host(.open) { pointer-events: auto; }
:host(.open) .side-panel-backdrop { opacity: 1; }
:host(.open) .side-panel-drawer { transform: translateX(0); }
:host(.open) {
pointer-events: auto;
}
:host(.open) .side-panel-backdrop {
opacity: 1;
}
:host(.open) .side-panel-drawer {
transform: translateX(0);
}
.side-panel-resize {
position: absolute;
left: 0;
@ -100,9 +106,14 @@
line-height: 1;
padding: 0.15em 0.4em;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
transition:
border-color 0.15s ease,
color 0.15s ease;
}
.side-panel-close:hover {
border-color: var(--red);
color: var(--red);
}
.side-panel-close:hover { border-color: var(--red); color: var(--red); }
.side-panel-body {
flex: 1;
overflow-y: auto;

137
frontend/packages/shared/src/side-panel/hive-side-panel.js
View file

@ -27,54 +27,74 @@
// had it) — making it available to every consumer (the agent UI didn't
// have it before) is a deliberate behavior widening, not incidental.
import { el } from '../dom.js';
import { attachShadowCss } from '../shadow-css.js';
import sidePanelCss from './hive-side-panel.css';
import { el } from "../dom.js";
import { attachShadowCss } from "../shadow-css.js";
import sidePanelCss from "./hive-side-panel.css";
// See docs/web-ui.md::Side panel for the hit-strip + pointer-capture +
// localStorage persistence model; CSS clamps the stored value to min
// 320px / max 96vw and out-of-range stored values are dropped silently.
// Shared by both packages deliberately — see module header.
const WIDTH_KEY = 'hyperhive:side-panel-width';
const WIDTH_KEY = "hyperhive:side-panel-width";
const WIDTH_MIN = 320;
class HiveSidePanel extends HTMLElement {
connectedCallback() {
const root = attachShadowCss(this, sidePanelCss);
this.setAttribute('aria-hidden', 'true');
this.setAttribute("aria-hidden", "true");
this._owner = null;
this._titleEl = el('span', { class: 'side-panel-title', id: 'side-panel-title' });
this._closeBtn = el('button', {
type: 'button', class: 'side-panel-close', title: 'close (esc)',
}, '✕');
const head = el('header', { class: 'side-panel-head' }, this._titleEl, this._closeBtn);
this._titleEl = el("span", {
class: "side-panel-title",
id: "side-panel-title",
});
this._closeBtn = el(
"button",
{
type: "button",
class: "side-panel-close",
title: "close (esc)",
},
"✕",
);
const head = el(
"header",
{ class: "side-panel-head" },
this._titleEl,
this._closeBtn,
);
this._resizeHandle = el('div', {
class: 'side-panel-resize',
role: 'separator',
'aria-orientation': 'vertical',
'aria-label': 'drag to resize side panel',
title: 'drag to resize',
this._resizeHandle = el("div", {
class: "side-panel-resize",
role: "separator",
"aria-orientation": "vertical",
"aria-label": "drag to resize side panel",
title: "drag to resize",
});
this._bodyEl = el('div', { class: 'side-panel-body' }, el('slot'));
this._bodyEl = el("div", { class: "side-panel-body" }, el("slot"));
this._drawer = el('aside', {
class: 'side-panel-drawer',
role: 'dialog',
'aria-modal': 'true',
'aria-labelledby': 'side-panel-title',
}, this._resizeHandle, head, this._bodyEl);
this._drawer = el(
"aside",
{
class: "side-panel-drawer",
role: "dialog",
"aria-modal": "true",
"aria-labelledby": "side-panel-title",
},
this._resizeHandle,
head,
this._bodyEl,
);
this._backdrop = el('div', { class: 'side-panel-backdrop' });
this._backdrop = el("div", { class: "side-panel-backdrop" });
root.append(this._backdrop, this._drawer);
this._closeBtn.addEventListener('click', () => this.close());
this._backdrop.addEventListener('click', () => this.close());
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.classList.contains('open')) this.close();
this._closeBtn.addEventListener("click", () => this.close());
this._backdrop.addEventListener("click", () => this.close());
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && this.classList.contains("open")) this.close();
});
this._applyStoredWidth();
@ -89,8 +109,8 @@ class HiveSidePanel extends HTMLElement {
this._owner = name;
this._titleEl.textContent = title;
this.replaceChildren(...(content ? [content] : []));
this.classList.add('open');
this.setAttribute('aria-hidden', 'false');
this.classList.add("open");
this.setAttribute("aria-hidden", "false");
}
refresh(name, title, content) {
@ -101,8 +121,8 @@ class HiveSidePanel extends HTMLElement {
close() {
this._owner = null;
this.classList.remove('open');
this.setAttribute('aria-hidden', 'true');
this.classList.remove("open");
this.setAttribute("aria-hidden", "true");
}
currentOwner() {
@ -120,64 +140,79 @@ class HiveSidePanel extends HTMLElement {
_applyStoredWidth() {
const raw = (() => {
try { return localStorage.getItem(WIDTH_KEY); }
catch { return null; }
try {
return localStorage.getItem(WIDTH_KEY);
} catch {
return null;
}
})();
if (!raw) return;
const parsed = parseInt(raw, 10);
if (!Number.isFinite(parsed) || parsed <= 0) return;
this._drawer.style.setProperty('--side-panel-w', this._clampWidth(parsed) + 'px');
this._drawer.style.setProperty(
"--side-panel-w",
this._clampWidth(parsed) + "px",
);
}
_bindResize() {
const handle = this._resizeHandle;
const drawer = this._drawer;
let dragging = false;
handle.addEventListener('pointerdown', (e) => {
handle.addEventListener("pointerdown", (e) => {
e.preventDefault();
dragging = true;
document.body.classList.add('side-panel-resizing');
document.body.classList.add("side-panel-resizing");
// Shadow-scoped counterpart of the global `body.side-panel-resizing`
// class below — the resize handle's own hover/drag appearance lives
// inside this element's shadow tree, which the global class (a
// light-DOM-only escape hatch for the page-wide cursor override)
// can't reach.
this.classList.add('resizing');
this.classList.add("resizing");
// Capture so we keep getting pointermove even when the cursor
// outpaces the handle band (drag-fast-then-pause loses the
// handle's :hover state otherwise).
try { handle.setPointerCapture(e.pointerId); } catch { /* legacy */ }
try {
handle.setPointerCapture(e.pointerId);
} catch {
/* legacy */
}
});
document.addEventListener('pointermove', (e) => {
document.addEventListener("pointermove", (e) => {
if (!dragging) return;
// Drawer is anchored to the right edge — width = viewport - pointer X.
const w = this._clampWidth(document.documentElement.clientWidth - e.clientX);
drawer.style.setProperty('--side-panel-w', w + 'px');
const w = this._clampWidth(
document.documentElement.clientWidth - e.clientX,
);
drawer.style.setProperty("--side-panel-w", w + "px");
});
const stopDrag = () => {
if (!dragging) return;
dragging = false;
document.body.classList.remove('side-panel-resizing');
this.classList.remove('resizing');
document.body.classList.remove("side-panel-resizing");
this.classList.remove("resizing");
// Persist the final width. Read the actual rendered width
// rather than re-deriving so the stored value matches what
// the operator saw at mouseup.
const w = drawer.getBoundingClientRect().width;
try { localStorage.setItem(WIDTH_KEY, String(Math.round(w))); }
catch { /* localStorage unavailable — width is session-only */ }
try {
localStorage.setItem(WIDTH_KEY, String(Math.round(w)));
} catch {
/* localStorage unavailable — width is session-only */
}
};
document.addEventListener('pointerup', stopDrag);
document.addEventListener('pointercancel', stopDrag);
document.addEventListener("pointerup", stopDrag);
document.addEventListener("pointercancel", stopDrag);
// Re-clamp on viewport resize so a persisted width that exceeds
// 96vw doesn't push the drawer off-screen after a window shrink.
window.addEventListener('resize', () => {
window.addEventListener("resize", () => {
if (dragging) return;
const cur = drawer.getBoundingClientRect().width;
const clamped = this._clampWidth(cur);
if (clamped !== Math.round(cur)) {
drawer.style.setProperty('--side-panel-w', clamped + 'px');
drawer.style.setProperty("--side-panel-w", clamped + "px");
}
});
}
}
customElements.define('hive-side-panel', HiveSidePanel);
customElements.define("hive-side-panel", HiveSidePanel);