@hansenexus/hud 0.1.0

package/chunk-xezxydm3.js

@@ -0,0 +1,47 @@
+// panels/use-poll.ts
+import { useEffect, useState } from "react";
+"use client";
+function usePoll(url, intervalMs = 60000) {
+  const [state, setState] = useState({ loading: url !== null });
+  useEffect(() => {
+    if (!url)
+      return;
+    let cancelled = false;
+    async function tick() {
+      if (document.hidden)
+        return;
+      try {
+        const res = await fetch(url, { headers: { Accept: "application/json" } });
+        if (cancelled)
+          return;
+        if (res.redirected || res.status === 401 || res.status === 403) {
+          setState({ loading: false, error: "auth required" });
+          return;
+        }
+        if (!res.ok) {
+          setState({ loading: false, error: `HTTP ${res.status}` });
+          return;
+        }
+        const data = await res.json();
+        if (!cancelled)
+          setState({ loading: false, data });
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            loading: false,
+            error: error instanceof Error ? error.message : "request failed"
+          });
+        }
+      }
+    }
+    tick();
+    const timer = setInterval(() => void tick(), intervalMs);
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+    };
+  }, [url, intervalMs]);
+  return state;
+}
+
+export { usePoll };

package/chunk-xjn0896g.js

@@ -0,0 +1,574 @@
+import {
+  HudUnlockPanel,
+  useHudUnlock
+} from "./chunk-msqkkqw7.js";
+import {
+  DevDrawer,
+  DevDrawerProvider,
+  cancelGrab,
+  completeGrab,
+  getGrabberState,
+  subscribeGrabber,
+  useDevDrawer
+} from "./chunk-82nm9wcg.js";
+import {
+  getVitalsSnapshot
+} from "./chunk-ghxh8926.js";
+import {
+  captureBuffer
+} from "./chunk-24vrg16w.js";
+import {
+  hudRequiresUnlock,
+  resolveHudAccess
+} from "./chunk-r06bpmy6.js";
+import {
+  HudProvider,
+  useHud
+} from "./chunk-wspz08q7.js";
+import {
+  isHudVisible,
+  resolveHudEnv
+} from "./chunk-babjpqkb.js";
+import {
+  HUD_BUNDLE_MARKER
+} from "./chunk-v086j53b.js";
+
+// ../review-kit/rail/rail-store.ts
+var tools = [];
+var insetPx = 0;
+var listeners = new Set;
+function emit() {
+  tools = [...tools];
+  for (const listener of listeners)
+    listener();
+}
+function subscribeRail(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getRailTools() {
+  return tools;
+}
+function registerRailTool(tool) {
+  const index = tools.findIndex((t) => t.id === tool.id);
+  if (index === -1)
+    tools.push(tool);
+  else
+    tools[index] = tool;
+  tools.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
+  emit();
+}
+function unregisterRailTool(id) {
+  tools = tools.filter((t) => t.id !== id);
+  emit();
+}
+function getRailInset() {
+  return insetPx;
+}
+var host = null;
+function claimRailHost(token) {
+  if (host === null)
+    host = token;
+  return host === token;
+}
+function releaseRailHost(token) {
+  if (host === token)
+    host = null;
+}
+// ../review-kit/rail/tool-rail.tsx
+import { useEffect as useEffect2, useId, useRef, useSyncExternalStore } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+
+// ../review-kit/picker/element-picker.tsx
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+"use client";
+var OVERLAY_MARKER = "data-hn-overlay";
+var OVERLAY_Z_INDEX = 2147483000;
+function ElementPicker({
+  active,
+  chromeSelector,
+  onPick,
+  onCancel,
+  hint = "Element wählen · Esc bricht ab",
+  accent = "#fbbf24",
+  accentText = "#3a2a00"
+}) {
+  const [highlight, setHighlight] = useState(null);
+  useEffect(() => {
+    if (!active) {
+      setHighlight(null);
+      return;
+    }
+    const exclude = chromeSelector ? `[${OVERLAY_MARKER}],${chromeSelector}` : `[${OVERLAY_MARKER}]`;
+    document.body.style.cursor = "crosshair";
+    function targetFrom(event) {
+      const el = event.target;
+      if (!(el instanceof Element))
+        return null;
+      if (el.closest(exclude))
+        return null;
+      return el;
+    }
+    function onMove(event) {
+      const el = targetFrom(event);
+      if (!el) {
+        setHighlight(null);
+        return;
+      }
+      const r = el.getBoundingClientRect();
+      setHighlight({
+        left: r.left,
+        top: r.top,
+        width: r.width,
+        height: r.height,
+        label: el.tagName.toLowerCase()
+      });
+    }
+    function onClick(event) {
+      const el = targetFrom(event);
+      if (!el)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      onPick(el, { clientX: event.clientX, clientY: event.clientY });
+    }
+    function onKey(event) {
+      if (event.key === "Escape")
+        onCancel();
+    }
+    document.addEventListener("mousemove", onMove, true);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.body.style.cursor = "";
+      document.removeEventListener("mousemove", onMove, true);
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [active, chromeSelector, onPick, onCancel]);
+  if (!active || typeof document === "undefined")
+    return null;
+  const marker = { [OVERLAY_MARKER]: "" };
+  return createPortal(/* @__PURE__ */ jsxs("div", {
+    ...marker,
+    style: { position: "fixed", inset: 0, zIndex: OVERLAY_Z_INDEX, pointerEvents: "none" },
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: "50%",
+          transform: "translateX(-50%)",
+          background: accent,
+          color: accentText,
+          font: "700 11px ui-monospace, monospace",
+          padding: "3px 12px",
+          borderRadius: "0 0 6px 6px"
+        },
+        children: hint
+      }),
+      highlight && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            style: {
+              position: "fixed",
+              left: highlight.left - 2,
+              top: highlight.top - 2,
+              width: highlight.width + 4,
+              height: highlight.height + 4,
+              border: `1.5px solid ${accent}`,
+              background: "rgba(251,191,36,.08)",
+              borderRadius: 3
+            }
+          }),
+          /* @__PURE__ */ jsx("div", {
+            style: {
+              position: "fixed",
+              left: highlight.left - 2,
+              top: Math.max(highlight.top - 20, 0),
+              background: accent,
+              color: accentText,
+              font: "700 10px ui-monospace, monospace",
+              padding: "1px 6px",
+              borderRadius: 3
+            },
+            children: highlight.label
+          })
+        ]
+      })
+    ]
+  }), document.body);
+}
+
+// ../review-kit/rail/tool-rail.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+"use client";
+function ToolRail() {
+  const token = useRef(Symbol("rail-host"));
+  const id = useId();
+  const tools2 = useSyncExternalStore(subscribeRail, getRailTools, getRailTools);
+  const inset = useSyncExternalStore(subscribeRail, getRailInset, getRailInset);
+  const isHost = claimRailHost(token.current);
+  useEffect2(() => {
+    const claimed = token.current;
+    return () => releaseRailHost(claimed);
+  }, []);
+  if (!isHost || tools2.length === 0 || typeof document === "undefined")
+    return null;
+  const marker = { [OVERLAY_MARKER]: "" };
+  return createPortal2(/* @__PURE__ */ jsx2("div", {
+    ...marker,
+    style: {
+      position: "fixed",
+      right: inset,
+      top: "50%",
+      transform: "translateY(-50%)",
+      zIndex: OVERLAY_Z_INDEX + 100,
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      transition: "right 180ms ease",
+      pointerEvents: "auto"
+    },
+    children: tools2.map((tool) => /* @__PURE__ */ jsx2(RailTab, {
+      tool
+    }, `${id}-${tool.id}`))
+  }), document.body);
+}
+function RailTab({ tool }) {
+  const accent = tool.accent ?? "#111827";
+  return /* @__PURE__ */ jsxs2("button", {
+    onClick: tool.onClick,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      padding: "14px 9px",
+      borderRadius: "8px 0 0 8px",
+      border: "none",
+      borderRight: tool.active ? "3px solid #fff" : "none",
+      background: accent,
+      color: "#fff",
+      font: "600 12px ui-sans-serif, system-ui, sans-serif",
+      letterSpacing: ".02em",
+      cursor: "pointer",
+      writingMode: "vertical-rl",
+      boxShadow: "0 2px 10px rgba(0,0,0,.3)",
+      opacity: tool.active ? 1 : 0.92
+    },
+    title: tool.label,
+    type: "button",
+    children: [
+      tool.label,
+      tool.badge !== undefined && tool.badge !== "" && /* @__PURE__ */ jsx2("span", {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minWidth: 16,
+          height: 16,
+          padding: "0 4px",
+          borderRadius: 8,
+          background: "rgba(255,255,255,.22)",
+          font: "700 10px ui-monospace, monospace",
+          writingMode: "horizontal-tb"
+        },
+        children: tool.badge
+      })
+    ]
+  });
+}
+// hud.tsx
+import { Lock } from "lucide-react";
+import { useEffect as useEffect3, useMemo } from "react";
+
+// capture.ts
+var installed = false;
+var restorers = [];
+var MAX_TEXT = 300;
+function toText(args) {
+  return args.map((arg) => {
+    if (typeof arg === "string")
+      return arg;
+    if (arg instanceof Error)
+      return `${arg.name}: ${arg.message}`;
+    try {
+      return JSON.stringify(arg);
+    } catch {
+      return String(arg);
+    }
+  }).join(" ").slice(0, MAX_TEXT);
+}
+function isHudInternal(url, input, init) {
+  if (url.includes("/api/hud/") || url.includes("/api/otel/vitals"))
+    return true;
+  try {
+    if (new Headers(init?.headers).has("x-hud-internal"))
+      return true;
+    if (input instanceof Request && input.headers.has("x-hud-internal"))
+      return true;
+  } catch {}
+  return false;
+}
+function patchConsole() {
+  const kinds = ["log", "warn", "error"];
+  for (const kind of kinds) {
+    const original = console[kind].bind(console);
+    console[kind] = (...args) => {
+      captureBuffer.push({ kind, text: toText(args) });
+      original(...args);
+    };
+    restorers.push(() => {
+      console[kind] = original;
+    });
+  }
+}
+function patchFetch() {
+  const originalFetch = window.fetch;
+  const callOriginal = originalFetch.bind(window);
+  const patched = async (input, init) => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    const method = init?.method ?? (input instanceof Request ? input.method : "GET");
+    if (isHudInternal(url, input, init))
+      return callOriginal(input, init);
+    const started = performance.now();
+    try {
+      const response = await callOriginal(input, init);
+      captureBuffer.push({
+        kind: "fetch",
+        text: `${method.toUpperCase()} ${url}`.slice(0, MAX_TEXT),
+        status: response.status,
+        durationMs: Math.round(performance.now() - started)
+      });
+      return response;
+    } catch (error) {
+      captureBuffer.push({
+        kind: "fetch",
+        text: `${method.toUpperCase()} ${url} — ${toText([error])}`.slice(0, MAX_TEXT),
+        status: 0,
+        durationMs: Math.round(performance.now() - started)
+      });
+      throw error;
+    }
+  };
+  window.fetch = Object.assign(patched, originalFetch);
+  restorers.push(() => {
+    window.fetch = originalFetch;
+  });
+}
+function observeLongTasks() {
+  if (typeof PerformanceObserver === "undefined")
+    return;
+  try {
+    const observer = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        captureBuffer.push({
+          kind: "longtask",
+          text: `long task ${Math.round(entry.duration)} ms`,
+          durationMs: Math.round(entry.duration)
+        });
+      }
+    });
+    observer.observe({ type: "longtask", buffered: true });
+    restorers.push(() => observer.disconnect());
+  } catch {}
+}
+function installCapture() {
+  if (installed || typeof window === "undefined")
+    return;
+  installed = true;
+  patchConsole();
+  patchFetch();
+  observeLongTasks();
+}
+function uninstallCapture() {
+  if (!installed)
+    return;
+  while (restorers.length > 0)
+    restorers.pop()?.();
+  installed = false;
+}
+// grabber/element-grabber.tsx
+import { useCallback, useSyncExternalStore as useSyncExternalStore2 } from "react";
+
+// ../review-kit/anchor/selector.ts
+function buildAnchorSelector(el, root) {
+  const segments = [];
+  let node = el;
+  while (node && node !== root) {
+    const tag = node.tagName.toLowerCase();
+    const parent = node.parentElement;
+    if (!parent)
+      break;
+    const siblings = [...parent.children].filter((c) => c.tagName === node?.tagName);
+    const index = siblings.indexOf(node) + 1;
+    segments.unshift(siblings.length > 1 ? `${tag}:nth-of-type(${index})` : tag);
+    node = parent;
+  }
+  return segments.join(" > ");
+}
+function anchorLabelFor(el) {
+  const text = (el.textContent ?? "").trim().replace(/\s+/g, " ");
+  const tag = el.tagName.toLowerCase();
+  return text ? `${tag} “${text.slice(0, 32)}${text.length > 32 ? "…" : ""}”` : tag;
+}
+// grabber/payload.ts
+function buildAnchor(el) {
+  const r = el.getBoundingClientRect();
+  const pct = (part, whole) => whole > 0 ? Number((part / whole * 100).toFixed(1)) : 0;
+  return {
+    selector: buildAnchorSelector(el, document.body),
+    label: anchorLabelFor(el),
+    x: pct(r.left, window.innerWidth),
+    y: pct(r.top, window.innerHeight),
+    width: pct(r.width, window.innerWidth),
+    height: pct(r.height, window.innerHeight)
+  };
+}
+function matchComponentHints(hints, route, label, max = 5) {
+  if (!hints?.length)
+    return [];
+  const tokens = `${route} ${label}`.toLowerCase().split(/[^a-z0-9]+/).filter((t) => t.length > 2);
+  if (tokens.length === 0)
+    return hints.slice(0, max);
+  return hints.map((hint) => {
+    const haystack = `${hint.name} ${hint.path}`.toLowerCase();
+    const score = tokens.reduce((n, token) => haystack.includes(token) ? n + 1 : n, 0);
+    return { hint, score };
+  }).filter((h) => h.score > 0).sort((a, b) => b.score - a.score).slice(0, max).map((h) => h.hint);
+}
+function buildDispatchPayload(input) {
+  const route = window.location.pathname;
+  const recentErrors = captureBuffer.getSnapshot().filter((entry) => entry.kind === "error" || entry.kind === "warn").slice(-5).map((entry) => `[${entry.kind}] ${entry.text.slice(0, 200)}`);
+  return {
+    app: input.config.appSlug,
+    env: input.env,
+    route,
+    anchor: input.anchor,
+    componentHints: matchComponentHints(input.config.componentHints, route, input.anchor.label),
+    recentErrors,
+    vitals: input.vitals,
+    grabbedAt: new Date().toISOString()
+  };
+}
+
+// grabber/element-grabber.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+"use client";
+function GrabberController() {
+  const { config, env } = useHud();
+  const { openDrawer, setActiveTab } = useDevDrawer();
+  const grabber = useSyncExternalStore2(subscribeGrabber, getGrabberState, getGrabberState);
+  const onPick = useCallback((el, _point) => {
+    completeGrab(buildDispatchPayload({ config, env, anchor: buildAnchor(el), vitals: getVitalsSnapshot() }));
+    setActiveTab("dispatch");
+    openDrawer();
+  }, [config, env, openDrawer, setActiveTab]);
+  return /* @__PURE__ */ jsx3(ElementPicker, {
+    active: grabber.mode === "grabbing",
+    chromeSelector: HUD_CHROME_SELECTOR,
+    onPick,
+    onCancel: cancelGrab,
+    hint: "grab active — click an element · Esc cancels"
+  });
+}
+var HUD_CHROME_SELECTOR = "[data-hud-chrome]";
+
+// hud.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+"use client";
+var ENV_BADGE = {
+  development: "DEV",
+  preview: "PREVIEW",
+  staging: "STAGING",
+  production: "PROD · READ-ONLY",
+  disabled: "OFF"
+};
+function Hud({ config, panels }) {
+  const env = resolveHudEnv();
+  if (!isHudVisible(env))
+    return null;
+  return /* @__PURE__ */ jsx4(DevDrawerProvider, {
+    config: {
+      storageKey: config.storageKey ?? `${config.appSlug}-hud`,
+      shortcutKey: config.shortcutKey === undefined ? "h" : config.shortcutKey,
+      defaultHeight: 38,
+      minHeight: 25,
+      maxHeight: 75
+    },
+    children: /* @__PURE__ */ jsx4(HudProvider, {
+      config,
+      env,
+      panels,
+      children: /* @__PURE__ */ jsx4(HudChrome, {})
+    })
+  });
+}
+function HudChrome() {
+  const { config, env, name, panels } = useHud();
+  const { isOpen, toggleDrawer } = useDevDrawer();
+  const access = resolveHudAccess(env);
+  const apiBase = config.apiBase ?? "/api/hud";
+  const { state: unlockState, error: unlockError, unlock } = useHudUnlock(apiBase, access);
+  const locked = hudRequiresUnlock(access) && unlockState !== "unlocked";
+  useEffect3(() => {
+    installCapture();
+  }, []);
+  const tabs = useMemo(() => {
+    if (locked) {
+      return [
+        {
+          id: "unlock",
+          label: "Locked",
+          icon: Lock,
+          content: /* @__PURE__ */ jsx4(HudUnlockPanel, {
+            env,
+            state: unlockState,
+            error: unlockError,
+            onUnlock: unlock
+          })
+        }
+      ];
+    }
+    return panels.map((panel) => ({
+      id: panel.id,
+      label: panel.label,
+      icon: panel.icon,
+      content: panel.content
+    }));
+  }, [locked, env, unlockState, unlockError, unlock, panels]);
+  useEffect3(() => {
+    if (config.showFab === false)
+      return;
+    registerRailTool({
+      id: "hud",
+      label: "hud",
+      accent: "#0369a1",
+      order: 20,
+      active: isOpen,
+      onClick: toggleDrawer
+    });
+    return () => unregisterRailTool("hud");
+  }, [config.showFab, isOpen, toggleDrawer]);
+  if (tabs.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs3("div", {
+    "data-hud-chrome": true,
+    "data-hud-marker": HUD_BUNDLE_MARKER,
+    style: { display: "contents" },
+    children: [
+      /* @__PURE__ */ jsx4(ToolRail, {}),
+      /* @__PURE__ */ jsx4(DevDrawer, {
+        tabs,
+        title: name,
+        badgeLabel: ENV_BADGE[env]
+      }),
+      !locked && /* @__PURE__ */ jsx4(GrabberController, {})
+    ]
+  });
+}
+
+export { installCapture, uninstallCapture, buildAnchorSelector, buildAnchor, matchComponentHints, buildDispatchPayload, Hud };