@hansenexus/hud 0.3.0 → 0.4.0

package/dist/plugins/ops.js

@@ -0,0 +1,362 @@
+import { i as definePlugin, n as HudApiError } from "../plugins-DVy_vaYr.js";
+import { i as OPS_CAPABILITY, r as stateRating, t as TELEMETRY_RANGES } from "../types-QJUajwWq.js";
+import { useCallback, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ops/poll.ts
+/** Entries per plugin context, so the pill and the panel share one poller per path. */
+const entries = /* @__PURE__ */ new WeakMap();
+function entryFor(ctx, path) {
+	let byPath = entries.get(ctx);
+	if (!byPath) {
+		byPath = /* @__PURE__ */ new Map();
+		entries.set(ctx, byPath);
+	}
+	let entry = byPath.get(path);
+	if (!entry) {
+		entry = {
+			state: { loading: true },
+			listeners: /* @__PURE__ */ new Set(),
+			inflight: false
+		};
+		byPath.set(path, entry);
+	}
+	return entry;
+}
+/** A readable message for a failed poll; 502 bodies carry the provider's own. */
+function describeError(error) {
+	if (error instanceof HudApiError) {
+		if (error.status === 404) return "route not mounted: add ops() to createHudHandler";
+		const body = error.body;
+		if (typeof body?.error === "string") return body.error;
+		return `HTTP ${error.status}`;
+	}
+	return error instanceof Error ? error.message : "request failed";
+}
+function set(entry, state) {
+	entry.state = state;
+	for (const listener of entry.listeners) listener();
+}
+async function tick(ctx, path, entry, force = false) {
+	if (entry.inflight || !force && typeof document !== "undefined" && document.hidden) return;
+	entry.inflight = true;
+	try {
+		set(entry, {
+			data: await ctx.api(path),
+			loading: false
+		});
+	} catch (error) {
+		set(entry, {
+			...entry.state,
+			error: describeError(error),
+			loading: false
+		});
+	} finally {
+		entry.inflight = false;
+	}
+}
+/**
+* Polls one of the plugin's routes while anything renders it. Pauses while
+* the tab is hidden; subscribers of the same path share one request.
+*/
+function usePoll(ctx, path, intervalMs) {
+	const entry = entryFor(ctx, path);
+	const subscribe = useCallback((listener) => {
+		entry.listeners.add(listener);
+		if (entry.listeners.size === 1) {
+			tick(ctx, path, entry);
+			entry.timer = setInterval(() => void tick(ctx, path, entry), intervalMs);
+		}
+		return () => {
+			entry.listeners.delete(listener);
+			if (entry.listeners.size === 0) clearInterval(entry.timer);
+		};
+	}, [
+		ctx,
+		path,
+		entry,
+		intervalMs
+	]);
+	const state = useSyncExternalStore(subscribe, () => entry.state, () => entry.state);
+	const refresh = useCallback(() => void tick(ctx, path, entry, true), [
+		ctx,
+		path,
+		entry
+	]);
+	return {
+		...state,
+		refresh
+	};
+}
+//#endregion
+//#region src/plugins/ops/styles.ts
+/** Panel styles, rendered as a `<style>` inside the panel, so inside the shadow root. */
+const OPS_CSS = `
+.ops { display: grid; gap: 12px; }
+.ops section { display: grid; gap: 6px; }
+.ops h3 {
+  margin: 0;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--hud-fg-muted);
+}
+.ops .head { display: flex; align-items: center; gap: 6px; font-family: var(--hud-mono); }
+.ops .head .branch { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ops .warn { color: var(--hud-warn); margin: 0; }
+.ops .muted { color: var(--hud-fg-muted); }
+.ops ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
+.ops li a, .ops li > span {
+  display: grid;
+  grid-template-columns: 6px minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 4px;
+  border-radius: 4px;
+  color: inherit;
+  text-decoration: none;
+}
+.ops li a:hover { background: var(--hud-bg-subtle); }
+.ops .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ops .title small { color: var(--hud-fg-muted); margin-left: 6px; }
+.ops .mono { font-family: var(--hud-mono); color: var(--hud-fg-muted); }
+.ops .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
+.ops .stat { padding: 6px 8px; border: 1px solid var(--hud-border); border-radius: 6px; }
+.ops .stat b { display: block; font-family: var(--hud-mono); font-size: 13px; }
+.ops .stat span { font-size: 10px; color: var(--hud-fg-muted); }
+.ops .row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.ops .ranges { display: flex; gap: 2px; }
+.ops button.chip { padding: 1px 6px; border-radius: 999px; font-family: var(--hud-mono); }
+.ops button.chip:hover, .ops button.chip[aria-pressed="true"] { background: var(--hud-bg-subtle); }
+`;
+//#endregion
+//#region src/plugins/ops/ops-panel.tsx
+const CI_POLL_MS = 6e4;
+const TELEMETRY_POLL_MS = 6e4;
+const STATE_LABEL = {
+	success: "passing",
+	failure: "failing",
+	cancelled: "cancelled",
+	running: "running",
+	queued: "queued",
+	neutral: "neutral"
+};
+function stateLabel(state) {
+	return state ? STATE_LABEL[state] : "no runs";
+}
+/** `3m`, `5h`, `2d` since `iso`. */
+function age(iso, now = Date.now()) {
+	if (!iso) return "";
+	const seconds = Math.max(0, Math.round((now - Date.parse(iso)) / 1e3));
+	if (seconds < 60) return `${seconds}s`;
+	if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+	if (seconds < 86400) return `${Math.round(seconds / 3600)}h`;
+	return `${Math.round(seconds / 86400)}d`;
+}
+function Missing({ name }) {
+	return /* @__PURE__ */ jsxs("p", {
+		className: "warn",
+		children: [
+			"Not configured: set ",
+			/* @__PURE__ */ jsx("code", { children: name ?? "its env" }),
+			" in the app's server env."
+		]
+	});
+}
+function RunRow({ run }) {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "dot",
+			"data-rating": stateRating(run.state),
+			title: STATE_LABEL[run.state]
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "title",
+			title: run.title,
+			children: [run.name, /* @__PURE__ */ jsx("small", { children: run.title })]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "mono",
+			children: run.sha
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "mono",
+			children: age(run.startedAt)
+		})
+	] });
+	return /* @__PURE__ */ jsx("li", { children: run.url ? /* @__PURE__ */ jsx("a", {
+		href: run.url,
+		target: "_blank",
+		rel: "noreferrer",
+		children: content
+	}) : /* @__PURE__ */ jsx("span", { children: content }) });
+}
+function Deployment({ deployment }) {
+	if (!deployment) return /* @__PURE__ */ jsx("p", {
+		className: "muted",
+		children: "Nothing deployed."
+	});
+	const rows = [
+		["Environment", deployment.environment],
+		["Image", deployment.image],
+		["Sha", deployment.sha],
+		["Ready", deployment.ready],
+		["Since", deployment.at && `${age(deployment.at)} ago`]
+	];
+	return /* @__PURE__ */ jsx("table", {
+		className: "vitals",
+		children: /* @__PURE__ */ jsx("tbody", { children: rows.flatMap(([label, value]) => value ? /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+			className: "label",
+			children: label
+		}), /* @__PURE__ */ jsx("td", { children: value })] }, label) : []) })
+	});
+}
+function CiSection({ ctx }) {
+	const { data, error, loading, refresh } = usePoll(ctx, "/ci", CI_POLL_MS);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("section", {
+		"aria-label": "CI",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "row",
+				children: [/* @__PURE__ */ jsxs("h3", { children: ["CI", data ? ` · ${data.repo}` : ""] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "chip",
+					onClick: refresh,
+					children: "refresh"
+				})]
+			}),
+			loading && /* @__PURE__ */ jsx("p", {
+				className: "muted",
+				children: "Loading…"
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "warn",
+				children: error
+			}),
+			data && !data.configured && /* @__PURE__ */ jsx(Missing, { name: data.missing }),
+			data?.configured && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "head",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "dot",
+						"data-rating": stateRating(data.state)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "branch",
+						children: data.branch ?? "no branch"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "muted",
+						children: [data.branch ? stateLabel(data.state) : "latest runs, all branches", data.sha ? ` @ ${data.sha}` : ""]
+					})
+				]
+			}), data.runs.length > 0 ? /* @__PURE__ */ jsx("ul", { children: data.runs.map((run) => /* @__PURE__ */ jsx(RunRow, { run }, run.id)) }) : /* @__PURE__ */ jsxs("p", {
+				className: "muted",
+				children: [
+					"No runs",
+					data.branch ? ` on ${data.branch}` : "",
+					"."
+				]
+			})] })
+		]
+	}), data && data.deployment !== void 0 && /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Deployment",
+		children: [/* @__PURE__ */ jsx("h3", { children: "Deployment" }), /* @__PURE__ */ jsx(Deployment, { deployment: data.deployment })]
+	})] });
+}
+function formatStat(value, unit) {
+	if (value === null) return "–";
+	return `${value.toFixed(value < 10 ? 2 : 0)}${unit}`;
+}
+function TelemetrySection({ ctx }) {
+	const [range, setRange] = useState("1h");
+	const { data, error, loading } = usePoll(ctx, `/telemetry?range=${range}`, TELEMETRY_POLL_MS);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Telemetry",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "row",
+				children: [/* @__PURE__ */ jsxs("h3", { children: ["Telemetry", data ? ` · ${data.service}` : ""] }), /* @__PURE__ */ jsx("div", {
+					className: "ranges",
+					children: TELEMETRY_RANGES.map((r) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "chip",
+						"aria-pressed": r === range,
+						onClick: () => setRange(r),
+						children: r
+					}, r))
+				})]
+			}),
+			loading && !data && /* @__PURE__ */ jsx("p", {
+				className: "muted",
+				children: "Loading…"
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "warn",
+				children: error
+			}),
+			data && !data.configured && /* @__PURE__ */ jsx(Missing, { name: data.missing }),
+			data?.configured && /* @__PURE__ */ jsxs("div", {
+				className: "stats",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "stat",
+						children: [/* @__PURE__ */ jsx("b", { children: formatStat(data.errorRate, "/s") }), /* @__PURE__ */ jsx("span", { children: "errors" })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "stat",
+						children: [/* @__PURE__ */ jsx("b", { children: formatStat(data.p95Ms, " ms") }), /* @__PURE__ */ jsx("span", { children: "p95" })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "stat",
+						children: [/* @__PURE__ */ jsx("b", { children: formatStat(data.requestRate, "/s") }), /* @__PURE__ */ jsx("span", { children: "requests" })]
+					})
+				]
+			})
+		]
+	});
+}
+function createOpsPanel({ ci, telemetry }) {
+	function OpsPanel({ ctx }) {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "ops",
+			children: [
+				/* @__PURE__ */ jsx("style", { children: OPS_CSS }),
+				ci && /* @__PURE__ */ jsx(CiSection, { ctx }),
+				telemetry && /* @__PURE__ */ jsx(TelemetrySection, { ctx })
+			]
+		});
+	}
+	return OpsPanel;
+}
+//#endregion
+//#region src/plugins/ops/index.tsx
+function OpsPill({ ctx }) {
+	const { data, error } = usePoll(ctx, "/ci", CI_POLL_MS);
+	const label = !data && error ? "error" : !data ? "–" : !data.configured ? "off" : stateLabel(data.state);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "dot",
+		"data-rating": data ? stateRating(data.state) : void 0
+	}), `CI ${label}`] });
+}
+/**
+* CI and telemetry: the pill shows the CI state of the branch the server runs
+* on, the panel lists recent runs, the deployment (when the CI provider knows
+* it) and error rate, p95 and request rate. Client half; the providers live in
+* the server half, `@hansenexus/hud/plugins/ops/server`, which reads tokens
+* from env and never sends them to the browser.
+*/
+function ops({ ci = true, telemetry = true } = {}) {
+	return definePlugin({
+		id: "ops",
+		title: "Ops",
+		capability: OPS_CAPABILITY,
+		panel: createOpsPanel({
+			ci,
+			telemetry
+		}),
+		...ci ? { pill: OpsPill } : {}
+	});
+}
+//#endregion
+export { ops };

package/dist/plugins/vitals.js

@@ -1,90 +1,7 @@
-import { i as definePlugin } from "../plugins-CzUiTn_r.js";
-import { useEffect, useSyncExternalStore } from "react";
+import { i as definePlugin } from "../plugins-DVy_vaYr.js";
+import { i as useVitals, n as formatVital, r as startVitals, t as VitalsPanel } from "../vitals-panel-Dvc5dnR-.js";
+import { useEffect } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { onCLS, onFCP, onINP, onLCP, onTTFB } from "web-vitals";
-//#region src/plugins/vitals/store.ts
-/** Display order: the three Core Web Vitals first, then the diagnostics. */
-const VITAL_ORDER = [
-	"LCP",
-	"INP",
-	"CLS",
-	"FCP",
-	"TTFB"
-];
-let snapshot = {};
-const listeners = /* @__PURE__ */ new Set();
-let started = false;
-function record(metric) {
-	snapshot = {
-		...snapshot,
-		[metric.name]: {
-			name: metric.name,
-			value: metric.value,
-			rating: metric.rating
-		}
-	};
-	for (const listener of listeners) listener();
-}
-/**
-* Starts collection once per page. Called when the HUD mounts, not when the
-* panel opens: LCP and FCP are only reported for the initial load, so a lazy
-* start would miss them.
-*/
-function startVitals() {
-	if (started) return;
-	started = true;
-	const opts = { reportAllChanges: true };
-	try {
-		onLCP(record, opts);
-		onINP(record, opts);
-		onCLS(record, opts);
-		onFCP(record, opts);
-		onTTFB(record, opts);
-	} catch {}
-}
-function getVitals() {
-	return snapshot;
-}
-function subscribeVitals(listener) {
-	listeners.add(listener);
-	return () => listeners.delete(listener);
-}
-function useVitals() {
-	return useSyncExternalStore(subscribeVitals, getVitals, getVitals);
-}
-function formatVital(name, value) {
-	if (name === "CLS") return value.toFixed(2);
-	if (value >= 1e3) return `${(value / 1e3).toFixed(1)} s`;
-	return `${Math.round(value)} ms`;
-}
-//#endregion
-//#region src/plugins/vitals/vitals-panel.tsx
-function VitalsPanel() {
-	const vitals = useVitals();
-	const rows = VITAL_ORDER.flatMap((name) => {
-		const vital = vitals[name];
-		return vital ? [vital] : [];
-	});
-	if (rows.length === 0) return /* @__PURE__ */ jsx("p", {
-		className: "empty",
-		children: "No metrics yet. LCP reports after the first interaction or tab switch."
-	});
-	return /* @__PURE__ */ jsx("table", {
-		className: "vitals",
-		children: /* @__PURE__ */ jsx("tbody", { children: rows.map((vital) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
-			className: "label",
-			children: vital.name
-		}), /* @__PURE__ */ jsxs("td", { children: [/* @__PURE__ */ jsx("span", {
-			className: "dot",
-			"data-rating": vital.rating,
-			style: {
-				display: "inline-block",
-				marginRight: 6
-			}
-		}), formatVital(vital.name, vital.value)] })] }, vital.name)) })
-	});
-}
-//#endregion
 //#region src/plugins/vitals/index.tsx
 function VitalsPill() {
 	useEffect(() => {

package/dist/{plugins-1QmTmZyL.d.ts → plugins-CQ_0w1ot.d.ts}

@@ -1,4 +1,24 @@
+import { r as GrabPayload } from "./payload-CLKDVZWl.js";
 import { ComponentType } from "react";
+//#region src/core/grabber/store.d.ts
+interface HudGrabState {
+  /** The picker is active: the next click on the page completes the grab. */
+  grabbing: boolean;
+  /** The last completed grab, until a plugin clears it. */
+  payload: GrabPayload | null;
+}
+/** Grab mode for one HUD, shared by the shell and every plugin's `ctx.grab`. */
+interface HudGrab {
+  start: () => void;
+  cancel: () => void;
+  /** Forgets the last payload, e.g. once it has been dispatched. */
+  clear: () => void;
+  getState: () => HudGrabState;
+  subscribe: (listener: () => void) => () => void;
+}
+/** Subscribes a component to a HUD's grab state: `useGrab(ctx.grab)`. */
+declare function useGrab(grab: HudGrab): HudGrabState;
+//#endregion
 //#region src/core/plugins.d.ts
 /**
  * A capability a plugin needs, such as `"cicd.read"`. Core assumes development
@@ -21,6 +41,10 @@ interface HudPluginContext {
   pin: (edge: PinEdge) => void;
   /** Closes this plugin's panel. */
   close: () => void;
+  /** Opens this plugin's panel. */
+  open: () => void;
+  /** The HUD's element grabber: start a grab, read or clear the last payload. See `useGrab`. */
+  grab: HudGrab;
 }
 interface HudPluginProps {
   ctx: HudPluginContext;
@@ -63,7 +87,21 @@ interface HudPlugin {
   /** Live content inside the plugin's pill item. Keep it inline and non-interactive. */
   pill?: ComponentType<HudPluginProps>;
   commands?: readonly HudCommand[];
+  /** Called when a grab (⌘⇧G or the pill's crosshair) completes. */
+  onGrab?: (payload: GrabPayload, ctx: HudPluginContext) => void;
   routes?: HudRoutes;
+  /** Opens deployed tiers (the `access` plugin). Without one the HUD renders only in development. */
+  access?: HudAccessControl;
+}
+/**
+ * What the `access` plugin hands `defineHud`. `env` is the loader's tier
+ * (`development`, `preview`, `staging`, `production`, `disabled`).
+ */
+interface HudAccessControl {
+  /** Capability check for the tier; outside development it narrows `can`. */
+  can: (env: string, capability: HudCapability) => boolean;
+  /** Hook: whether the operator has unlocked this tier. Until then only the access plugin shows. */
+  useUnlocked: (env: string, apiBase: string) => boolean;
 }
 /** Identity helper that types a plugin object without widening it. */
 declare function definePlugin<const P extends HudPlugin>(plugin: P): P;
@@ -73,4 +111,4 @@ declare class HudApiError extends Error {
   constructor(status: number, body: unknown, url: string);
 }
 //#endregion
-export { HudPlugin as a, HudRouteContext as c, PinEdge as d, definePlugin as f, HudHttpMethod as i, HudRouteHandler as l, HudCapability as n, HudPluginContext as o, HudCommand as r, HudPluginProps as s, HudApiError as t, HudRoutes as u };
+export { HudHttpMethod as a, HudPluginProps as c, HudRoutes as d, PinEdge as f, useGrab as g, HudGrabState as h, HudCommand as i, HudRouteContext as l, HudGrab as m, HudApiError as n, HudPlugin as o, definePlugin as p, HudCapability as r, HudPluginContext as s, HudAccessControl as t, HudRouteHandler as u };

package/dist/{plugins-CzUiTn_r.js → plugins-DVy_vaYr.js}

@@ -34,13 +34,15 @@ var HudApiError = class extends Error {
 		this.name = "HudApiError";
 	}
 };
-function createPluginContext(plugin, { app, apiBase, can, pin, close }) {
+function createPluginContext(plugin, { app, apiBase, can, pin, close, open, grab }) {
 	const prefix = `${apiBase.replace(/\/+$/, "")}/${plugin.id}`;
 	return {
 		app,
 		can,
 		pin,
 		close,
+		open,
+		grab,
 		api: async (path, init) => {
 			const url = `${prefix}/${path.replace(/^\/+/, "")}`;
 			const headers = new Headers(init?.headers);