@obsrviq/widgets 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Obsrviq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# @obsrviq/widgets
+
+Embeddable, white-label React components. Drop them into your product; they inherit
+your theme via CSS variables and show no Obsrviq branding.
+
+```bash
+npm install @obsrviq/widgets
+```
+```tsx
+import {
+  ObsrviqReplay, ObsrviqInsights, ObsrviqRecommendations, ObsrviqScore, ObsrviqCopilot,
+} from '@obsrviq/widgets';
+import '@obsrviq/widgets/styles.css'; // one import pulls in all tokens + styles
+
+const api = { apiBaseUrl: 'https://api.yourapp.com', apiKey: 'sk_live_…' };
+```
+
+| Component | Props (beyond `api` + `theme`) |
+|---|---|
+| `<ObsrviqReplay/>` | `sessionId`, `startAtMs?`, `height?`, `onEnded?` |
+| `<ObsrviqInsights/>` | `siteId`, `max?`, `onApply?`, `onDismiss?` |
+| `<ObsrviqRecommendations/>` | `siteId`, `onAction?` |
+| `<ObsrviqScore/>` | `siteId`, `type` (`performance`/`accessibility`/`ai-visibility`), `size?` |
+| `<ObsrviqCopilot/>` | `siteId`, `placeholder?` |
+
+Each renders a skeleton within ~1s, is keyboard- and screen-reader-accessible,
+inherits the host theme, and degrades to a friendly empty state with no data.
+
+## Theming
+
+Override any `--lum-*` token globally, or per-widget via the `theme` prop:
+
+```tsx
+<ObsrviqInsights siteId="…" {...api} theme={{ '--lum-accent': '#e11d48', '--lum-radius': '14px' }} />
+```
+
+> **Browser key exposure:** widgets given a raw `sk_` key expose it client-side.
+> For customer-facing embeds, proxy through your backend or use a short-lived JWT.
+
+Full guide: [docs/EMBEDDING.md](../../docs/EMBEDDING.md).

package/dist/index.d.ts

@@ -0,0 +1,94 @@
+import * as react from 'react';
+import { InsightCard, ScoreType } from '@obsrviq/types';
+
+/** Light/dark color scheme, or an object of `--lum-*` overrides to white-label. */
+type WidgetTheme = 'light' | 'dark' | Record<string, string>;
+interface BaseWidgetProps {
+    apiBaseUrl: string;
+    apiKey?: string;
+    token?: string;
+    /** `'light'` or `'dark'` to pick a color scheme (default follows the page —
+     *  dark for the standalone embed), or an object of `--lum-*` overrides. */
+    theme?: WidgetTheme;
+}
+
+type ClipBounds = {
+    fromEvent?: string;
+    toEvent?: string;
+    fromMs?: number;
+    toMs?: number;
+    fromUtc?: number;
+    toUtc?: number;
+    loop?: boolean;
+};
+/** What to render when the recording can't be shown (not found / load error):
+ *  'message' (default) shows a small note; 'hide' renders nothing so the embed
+ *  collapses on the host page (pair with `onError` to hide your own wrapper). */
+type UnavailableFallback = 'message' | 'hide';
+interface ObsrviqReplayProps extends BaseWidgetProps {
+    /** The session to play. Optional if `userId` is given — then the session is
+     *  resolved from the user + clip bounds (UTC window / event names). */
+    sessionId?: string;
+    /** Resolve the session from this user instead of a session id. */
+    userId?: string;
+    /** Optional site scope for `userId` resolution; omit to search the whole tenant. */
+    siteId?: string;
+    startAtMs?: number;
+    /** Play only a segment: bound by two custom-event names, our-clock ms, or UTC. */
+    clip?: ClipBounds;
+    /** Focus mode the player opens in ('stage' = Watch). Overrides the site default. */
+    defaultMode?: 'balanced' | 'stage' | 'debug';
+    /** Restrict the focus-mode toggle to this allowlist; a single entry hides it. */
+    allowedModes?: Array<'balanced' | 'stage' | 'debug'>;
+    /** Playback speed the player opens at (clamped to the nearest offered speed). */
+    defaultSpeed?: number;
+    /** Show the fullscreen control + `F` shortcut. Default true. */
+    allowFullscreen?: boolean;
+    /** Base for "Copy link" deep-links (this embed's URL has no session id). A
+     *  `:id` template, or a base we append `/sessions/:id` to. Omit → console host. */
+    shareUrl?: string;
+    onEnded?: () => void;
+    /** Called once when the recording can't be shown — `reason` is 'not_found'
+     *  (no such session / no match for the user) or 'error' (load/network/auth).
+     *  Use it to hide your own container, log, retry, etc. */
+    onError?: (info: {
+        reason: 'not_found' | 'error';
+        message: string;
+    }) => void;
+    /** What to render when unavailable. Default 'message'. Use 'hide' to collapse. */
+    fallback?: UnavailableFallback;
+    height?: number | string;
+}
+/** The replay player itself, embeddable and white-label (§12). */
+declare function ObsrviqReplay({ sessionId, userId, siteId, apiBaseUrl, apiKey, token, theme, startAtMs, clip, defaultMode, allowedModes, defaultSpeed, allowFullscreen, shareUrl, onEnded, onError, fallback, height, }: ObsrviqReplayProps): react.JSX.Element | null;
+
+interface ObsrviqInsightsProps extends BaseWidgetProps {
+    siteId: string;
+    max?: number;
+    onApply?: (card: InsightCard) => void;
+    onDismiss?: (card: InsightCard) => void;
+}
+declare function ObsrviqInsights(props: ObsrviqInsightsProps): react.JSX.Element;
+
+interface ObsrviqRecommendationsProps extends BaseWidgetProps {
+    siteId: string;
+    onAction?: (rec: InsightCard) => void;
+}
+/** A prioritized recommendation queue (impact × confidence / effort, §14). */
+declare function ObsrviqRecommendations({ siteId, apiBaseUrl, apiKey, token, theme, onAction }: ObsrviqRecommendationsProps): react.JSX.Element;
+
+interface ObsrviqScoreProps extends BaseWidgetProps {
+    siteId: string;
+    type: ScoreType;
+    size?: number;
+}
+declare function ObsrviqScore({ siteId, type, apiBaseUrl, apiKey, token, theme, size }: ObsrviqScoreProps): react.JSX.Element;
+
+interface ObsrviqCopilotProps extends BaseWidgetProps {
+    siteId: string;
+    placeholder?: string;
+}
+/** Embeddable copilot — NL Q&A grounded in the tenant's data (§14). */
+declare function ObsrviqCopilot({ siteId, apiBaseUrl, apiKey, token, theme, placeholder }: ObsrviqCopilotProps): react.JSX.Element;
+
+export { type BaseWidgetProps, ObsrviqCopilot, type ObsrviqCopilotProps, ObsrviqInsights, type ObsrviqInsightsProps, ObsrviqRecommendations, type ObsrviqRecommendationsProps, ObsrviqReplay, type ObsrviqReplayProps, ObsrviqScore, type ObsrviqScoreProps };

package/dist/index.js

@@ -0,0 +1,465 @@
+// src/ObsrviqReplay.tsx
+import { useEffect, useRef, useState } from "react";
+import { ReplayPlayer } from "@obsrviq/player";
+
+// src/common.tsx
+import { jsx } from "react/jsx-runtime";
+function ThemeScope({
+  theme,
+  className,
+  children
+}) {
+  const scheme = typeof theme === "string" ? theme : void 0;
+  const overrides = theme && typeof theme === "object" ? theme : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `lum-root lum lum-widget ${className ?? ""}`,
+      "data-lum-theme": scheme,
+      style: overrides,
+      children
+    }
+  );
+}
+
+// src/ObsrviqReplay.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function authHeaders(token, apiKey) {
+  if (token) return { authorization: `Bearer ${token}` };
+  if (apiKey) return { authorization: `Bearer ${apiKey}`, "x-obsrviq-key": apiKey };
+  return {};
+}
+function useResolvedSession(enabled, opts) {
+  const { apiBaseUrl, token, apiKey, userId, siteId, clip } = opts;
+  const [state, setState] = useState({
+    sessionId: null,
+    loading: enabled,
+    error: null,
+    notFound: false
+  });
+  const sig = JSON.stringify([userId, siteId, clip?.fromUtc, clip?.toUtc, clip?.fromEvent, clip?.toEvent]);
+  useEffect(() => {
+    if (!enabled || !userId) return;
+    const ctrl = new AbortController();
+    setState({ sessionId: null, loading: true, error: null, notFound: false });
+    const q = new URLSearchParams({ userId });
+    if (siteId) q.set("siteId", siteId);
+    if (clip?.fromUtc != null && clip?.toUtc != null) {
+      q.set("fromUtc", String(clip.fromUtc));
+      q.set("toUtc", String(clip.toUtc));
+    } else if (clip?.fromEvent) {
+      q.set("fromEvent", clip.fromEvent);
+      if (clip.toEvent) q.set("toEvent", clip.toEvent);
+    }
+    const base = apiBaseUrl.replace(/\/$/, "");
+    fetch(`${base}/v1/sessions/locate?${q.toString()}`, {
+      headers: authHeaders(token, apiKey),
+      signal: ctrl.signal
+    }).then(async (r) => {
+      if (!r.ok) {
+        const notFound = r.status === 404;
+        throw Object.assign(
+          new Error(notFound ? "No matching recording for that user." : `Lookup failed (${r.status}).`),
+          { notFound }
+        );
+      }
+      return r.json();
+    }).then((j) => {
+      if (!ctrl.signal.aborted) setState({ sessionId: j.sessionId, loading: false, error: null, notFound: false });
+    }).catch((e) => {
+      if (ctrl.signal.aborted) return;
+      const notFound = !!e?.notFound;
+      setState({
+        sessionId: null,
+        loading: false,
+        error: e instanceof Error ? e.message : "Lookup failed.",
+        notFound
+      });
+    });
+    return () => ctrl.abort();
+  }, [enabled, sig, apiBaseUrl]);
+  return state;
+}
+var msgStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  padding: 16,
+  textAlign: "center",
+  color: "var(--lum-muted)",
+  fontSize: 14
+};
+function ObsrviqReplay({
+  sessionId,
+  userId,
+  siteId,
+  apiBaseUrl,
+  apiKey,
+  token,
+  theme,
+  startAtMs,
+  clip,
+  defaultMode,
+  allowedModes,
+  defaultSpeed,
+  allowFullscreen,
+  shareUrl,
+  onEnded,
+  onError,
+  fallback = "message",
+  height = 560
+}) {
+  const needResolve = !sessionId && !!userId;
+  const resolved = useResolvedSession(needResolve, { apiBaseUrl, token, apiKey, userId, siteId, clip });
+  const [playerError, setPlayerError] = useState(null);
+  const effectiveId = sessionId ?? resolved.sessionId;
+  useEffect(() => setPlayerError(null), [effectiveId]);
+  const reportedRef = useRef(null);
+  useEffect(() => {
+    let info = null;
+    if (!sessionId && !userId) info = { reason: "error", message: "Provide a sessionId or a userId." };
+    else if (resolved.error) info = { reason: resolved.notFound ? "not_found" : "error", message: resolved.error };
+    else if (playerError) info = playerError;
+    if (info) {
+      if (reportedRef.current !== info.message) {
+        reportedRef.current = info.message;
+        onError?.(info);
+      }
+    } else {
+      reportedRef.current = null;
+    }
+  }, [sessionId, userId, resolved.error, resolved.notFound, playerError]);
+  if (!effectiveId) {
+    if (fallback === "hide") return null;
+    const msg = !sessionId && !userId ? "Provide a sessionId or a userId to play a recording." : needResolve && resolved.loading ? "Finding the recording\u2026" : resolved.error ?? "Recording unavailable.";
+    return /* @__PURE__ */ jsx2(ThemeScope, { theme, className: "lum-widget--replay", children: /* @__PURE__ */ jsx2("div", { style: { height }, children: /* @__PURE__ */ jsx2("div", { style: msgStyle, children: msg }) }) });
+  }
+  if (playerError && fallback === "hide") return null;
+  return /* @__PURE__ */ jsx2(ThemeScope, { theme, className: "lum-widget--replay", children: /* @__PURE__ */ jsx2("div", { style: { height }, children: /* @__PURE__ */ jsx2(
+    ReplayPlayer,
+    {
+      sessionId: effectiveId,
+      apiBaseUrl,
+      apiKey,
+      token,
+      startAtMs,
+      clip,
+      defaultMode,
+      allowedModes,
+      defaultSpeed,
+      allowFullscreen,
+      shareUrl,
+      onEnded,
+      onError: (info) => setPlayerError(info),
+      embedded: true
+    }
+  ) }) });
+}
+
+// src/ObsrviqInsights.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Badge, Button, EmptyState, ErrorState, Skeleton, ToastProvider, useToast } from "@obsrviq/ui";
+
+// src/client.ts
+function headers(cfg) {
+  const key = cfg.token || cfg.apiKey;
+  return key ? { authorization: `Bearer ${key}` } : {};
+}
+async function apiGet(cfg, path) {
+  const res = await fetch(`${cfg.apiBaseUrl.replace(/\/$/, "")}${path}`, { headers: headers(cfg) });
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+  return await res.json();
+}
+async function apiPost(cfg, path, body) {
+  const res = await fetch(`${cfg.apiBaseUrl.replace(/\/$/, "")}${path}`, {
+    method: "POST",
+    headers: { ...headers(cfg), "content-type": "application/json" },
+    body: body ? JSON.stringify(body) : void 0
+  });
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+  return await res.json();
+}
+async function* copilotStream(cfg, siteId, question) {
+  const res = await fetch(`${cfg.apiBaseUrl.replace(/\/$/, "")}/v1/copilot/ask`, {
+    method: "POST",
+    headers: { ...headers(cfg), "content-type": "application/json" },
+    body: JSON.stringify({ siteId, question })
+  });
+  if (!res.ok || !res.body) throw new Error(`copilot ${res.status}`);
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() ?? "";
+    for (const line of lines) {
+      const t = line.trim();
+      if (!t.startsWith("data:")) continue;
+      const data = t.slice(5).trim();
+      if (data === "[DONE]") return;
+      try {
+        yield JSON.parse(data);
+      } catch {
+      }
+    }
+  }
+}
+
+// src/ObsrviqInsights.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var SEVERITY_TONE = {
+  info: "info",
+  low: "info",
+  medium: "warn",
+  high: "error"
+};
+function ObsrviqInsights(props) {
+  return /* @__PURE__ */ jsx3(ThemeScope, { theme: props.theme, className: "lum-widget--insights", children: /* @__PURE__ */ jsx3(ToastProvider, { children: /* @__PURE__ */ jsx3(InsightsInner, { ...props }) }) });
+}
+function InsightsInner({ siteId, apiBaseUrl, apiKey, token, max = 5, onApply, onDismiss }) {
+  const cfg = { apiBaseUrl, apiKey, token };
+  const [cards, setCards] = useState2(null);
+  const [error, setError] = useState2(null);
+  const toast = useToast();
+  useEffect2(() => {
+    let alive = true;
+    apiGet(cfg, `/v1/insights?siteId=${siteId}`).then((r) => alive && setCards(r.items)).catch((e) => alive && setError(e.message));
+    return () => {
+      alive = false;
+    };
+  }, [siteId]);
+  const act = async (card, verb) => {
+    setCards((cs) => (cs ?? []).map((c) => c.id === card.id ? { ...c, status: verb === "apply" ? "applied" : "dismissed" } : c));
+    try {
+      await apiPost(cfg, `/v1/insights/${card.id}/${verb}`);
+      toast(verb === "apply" ? "Applied" : "Dismissed", verb === "apply" ? "ok" : "default");
+      (verb === "apply" ? onApply : onDismiss)?.(card);
+    } catch {
+      toast("Could not update \u2014 try again", "error");
+    }
+  };
+  if (error)
+    return /* @__PURE__ */ jsx3(ErrorState, { title: "We couldn't load insights.", children: error });
+  if (!cards)
+    return /* @__PURE__ */ jsx3("div", { className: "lum-w-cards", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "lum-w-card", children: [
+      /* @__PURE__ */ jsx3(Skeleton, { width: "60%", height: 16 }),
+      /* @__PURE__ */ jsx3(Skeleton, { width: "100%", height: 40 })
+    ] }, i)) });
+  const visible = cards.filter((c) => c.status !== "dismissed").slice(0, max);
+  if (visible.length === 0)
+    return /* @__PURE__ */ jsx3(EmptyState, { title: "No insights yet", children: "As soon as visitors arrive, recommendations will appear here." });
+  return /* @__PURE__ */ jsx3("div", { className: "lum-w-cards", children: visible.map((c) => /* @__PURE__ */ jsxs("article", { className: "lum-w-card", children: [
+    /* @__PURE__ */ jsxs("header", { className: "lum-w-card__head", children: [
+      /* @__PURE__ */ jsx3(Badge, { tone: SEVERITY_TONE[c.severity], children: c.severity }),
+      /* @__PURE__ */ jsx3("strong", { children: c.title })
+    ] }),
+    /* @__PURE__ */ jsx3("p", { className: "lum-w-card__what", children: c.what }),
+    /* @__PURE__ */ jsx3("p", { className: "lum-w-card__why lum-muted", children: c.why }),
+    /* @__PURE__ */ jsx3("p", { className: "lum-w-card__rec", children: c.recommendation }),
+    /* @__PURE__ */ jsxs("div", { className: "lum-w-card__meta", children: [
+      c.expectedImpact && /* @__PURE__ */ jsxs(Badge, { tone: "ok", children: [
+        c.expectedImpact.metric,
+        " ",
+        c.expectedImpact.lift
+      ] }),
+      /* @__PURE__ */ jsxs(Badge, { children: [
+        "effort: ",
+        c.effort
+      ] }),
+      c.evidence.length > 0 && /* @__PURE__ */ jsxs("span", { className: "lum-muted", children: [
+        c.evidence.length,
+        " sessions"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("footer", { className: "lum-w-card__actions", children: c.status === "applied" ? /* @__PURE__ */ jsx3(Badge, { tone: "ok", children: "Applied" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx3(Button, { variant: "primary", size: "sm", onClick: () => act(c, "apply"), children: "Apply" }),
+      /* @__PURE__ */ jsx3(Button, { variant: "ghost", size: "sm", onClick: () => act(c, "dismiss"), children: "Dismiss" })
+    ] }) })
+  ] }, c.id)) });
+}
+
+// src/ObsrviqRecommendations.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { Badge as Badge2, Button as Button2, EmptyState as EmptyState2, ErrorState as ErrorState2, Skeleton as Skeleton2 } from "@obsrviq/ui";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ObsrviqRecommendations({ siteId, apiBaseUrl, apiKey, token, theme, onAction }) {
+  const cfg = { apiBaseUrl, apiKey, token };
+  const [items, setItems] = useState3(null);
+  const [error, setError] = useState3(null);
+  useEffect3(() => {
+    let alive = true;
+    apiGet(cfg, `/v1/insights?siteId=${siteId}`).then((r) => alive && setItems(r.items)).catch((e) => alive && setError(e.message));
+    return () => {
+      alive = false;
+    };
+  }, [siteId]);
+  const run = async (rec) => {
+    setItems((xs) => (xs ?? []).filter((x) => x.id !== rec.id));
+    try {
+      await apiPost(cfg, `/v1/insights/${rec.id}/apply`);
+    } catch {
+    }
+    onAction?.(rec);
+  };
+  return /* @__PURE__ */ jsx4(ThemeScope, { theme, className: "lum-widget--recs", children: error ? /* @__PURE__ */ jsx4(ErrorState2, { title: "We couldn't load recommendations.", children: error }) : !items ? /* @__PURE__ */ jsx4("div", { className: "lum-w-queue", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx4(Skeleton2, { height: 48 }, i)) }) : items.filter((i) => i.status === "new" || i.status === "viewed").length === 0 ? /* @__PURE__ */ jsx4(EmptyState2, { title: "You're all caught up", children: "No open recommendations right now." }) : /* @__PURE__ */ jsx4("ol", { className: "lum-w-queue", children: items.filter((i) => i.status === "new" || i.status === "viewed").map((rec, i) => /* @__PURE__ */ jsxs2("li", { className: "lum-w-queue__item", children: [
+    /* @__PURE__ */ jsx4("span", { className: "lum-w-queue__rank lum-mono", children: i + 1 }),
+    /* @__PURE__ */ jsxs2("div", { className: "lum-w-queue__body", children: [
+      /* @__PURE__ */ jsx4("div", { className: "lum-w-queue__title", children: rec.title }),
+      /* @__PURE__ */ jsxs2("div", { className: "lum-w-queue__meta", children: [
+        /* @__PURE__ */ jsx4(Badge2, { tone: rec.severity === "high" ? "error" : rec.severity === "medium" ? "warn" : "info", children: rec.severity }),
+        rec.expectedImpact && /* @__PURE__ */ jsx4(Badge2, { tone: "ok", children: rec.expectedImpact.lift }),
+        /* @__PURE__ */ jsxs2(Badge2, { children: [
+          "effort: ",
+          rec.effort
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(Button2, { size: "sm", variant: "primary", onClick: () => run(rec), children: rec.action.type === "one_click_apply" ? "Apply" : rec.action.type === "open_experiment" ? "Experiment" : "Review" })
+  ] }, rec.id)) }) });
+}
+
+// src/ObsrviqScore.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { Skeleton as Skeleton3 } from "@obsrviq/ui";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var LABEL = {
+  accessibility: "Accessibility",
+  performance: "Performance",
+  "ai-visibility": "AI Visibility"
+};
+var RATING_COLOR = {
+  good: "var(--lum-ok)",
+  "needs-improvement": "var(--lum-warn)",
+  poor: "var(--lum-error)"
+};
+function ObsrviqScore({ siteId, type, apiBaseUrl, apiKey, token, theme, size = 120 }) {
+  const cfg = { apiBaseUrl, apiKey, token };
+  const [score, setScore] = useState4(null);
+  useEffect4(() => {
+    let alive = true;
+    apiGet(cfg, `/v1/scores?siteId=${siteId}&type=${type}`).then((s) => alive && setScore(s)).catch(() => alive && setScore(null));
+    return () => {
+      alive = false;
+    };
+  }, [siteId, type]);
+  const r = size / 2 - 8;
+  const c = 2 * Math.PI * r;
+  const value = score?.value ?? 0;
+  const color = score ? RATING_COLOR[score.rating] : "var(--lum-muted)";
+  return /* @__PURE__ */ jsx5(ThemeScope, { theme, className: "lum-widget--score", children: /* @__PURE__ */ jsxs3("div", { className: "lum-w-score", style: { width: size }, children: [
+    !score ? /* @__PURE__ */ jsx5(Skeleton3, { width: size, height: size, radius: size / 2 }) : /* @__PURE__ */ jsxs3("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": `${LABEL[type]} score ${value}`, children: [
+      /* @__PURE__ */ jsx5("circle", { cx: size / 2, cy: size / 2, r, fill: "none", stroke: "var(--lum-viz-grid)", strokeWidth: 9 }),
+      /* @__PURE__ */ jsx5(
+        "circle",
+        {
+          className: "lum-w-score__arc",
+          cx: size / 2,
+          cy: size / 2,
+          r,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 9,
+          strokeLinecap: "round",
+          strokeDasharray: c,
+          strokeDashoffset: c - value / 100 * c,
+          transform: `rotate(-90 ${size / 2} ${size / 2})`,
+          style: { ["--lum-arc-c"]: c }
+        }
+      ),
+      /* @__PURE__ */ jsx5("text", { x: "50%", y: "48%", textAnchor: "middle", dominantBaseline: "middle", fontSize: size * 0.26, fill: "var(--lum-text)", fontWeight: "700", fontFamily: "var(--lum-font-display)", letterSpacing: "-0.02em", children: value }),
+      /* @__PURE__ */ jsx5("text", { x: "50%", y: "68%", textAnchor: "middle", fill: "var(--lum-muted)", fontSize: size * 0.1, children: "/ 100" })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "lum-w-score__label", children: LABEL[type] })
+  ] }) });
+}
+
+// src/ObsrviqCopilot.tsx
+import { useRef as useRef2, useState as useState5 } from "react";
+import { Send } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function ObsrviqCopilot({ siteId, apiBaseUrl, apiKey, token, theme, placeholder = "Ask about your visitors\u2026" }) {
+  const cfg = { apiBaseUrl, apiKey, token };
+  const [input, setInput] = useState5("");
+  const [turns, setTurns] = useState5([]);
+  const [busy, setBusy] = useState5(false);
+  const scrollRef = useRef2(null);
+  const ask = async () => {
+    const q = input.trim();
+    if (!q || busy) return;
+    setInput("");
+    setBusy(true);
+    const idx = turns.length;
+    setTurns((t) => [...t, { q, a: "", evidence: [], streaming: true }]);
+    try {
+      for await (const chunk of copilotStream(cfg, siteId, q)) {
+        if (chunk.kind === "token") {
+          setTurns((t) => t.map((x, i) => i === idx ? { ...x, a: x.a + chunk.text } : x));
+        } else if (chunk.kind === "evidence") {
+          setTurns((t) => t.map((x, i) => i === idx ? { ...x, evidence: chunk.evidence.map((e) => e.ref) } : x));
+        } else if (chunk.kind === "error") {
+          setTurns((t) => t.map((x, i) => i === idx ? { ...x, a: x.a + `
+[error: ${chunk.message}]` } : x));
+        }
+        scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+      }
+    } catch (e) {
+      setTurns((t) => t.map((x, i) => i === idx ? { ...x, a: x.a + `
+[connection error]` } : x));
+    } finally {
+      setTurns((t) => t.map((x, i) => i === idx ? { ...x, streaming: false } : x));
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx6(ThemeScope, { theme, className: "lum-widget--copilot", children: /* @__PURE__ */ jsxs4("div", { className: "lum-w-copilot", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "lum-w-copilot__log", ref: scrollRef, children: [
+      turns.length === 0 && /* @__PURE__ */ jsx6("div", { className: "lum-w-copilot__hint lum-muted", children: "Try \u201CWhere are users struggling?\u201D or \u201CWhat's causing errors?\u201D" }),
+      turns.map((t, i) => /* @__PURE__ */ jsxs4("div", { className: "lum-w-copilot__turn", children: [
+        /* @__PURE__ */ jsx6("div", { className: "lum-w-copilot__q", children: t.q }),
+        /* @__PURE__ */ jsxs4("div", { className: "lum-w-copilot__a", children: [
+          t.a,
+          t.streaming && /* @__PURE__ */ jsx6("span", { className: "lum-w-copilot__caret" }),
+          t.evidence.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "lum-w-copilot__ev lum-muted", children: [
+            "Evidence: ",
+            t.evidence.length,
+            " session(s)"
+          ] })
+        ] })
+      ] }, i))
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      "form",
+      {
+        className: "lum-w-copilot__bar",
+        onSubmit: (e) => {
+          e.preventDefault();
+          void ask();
+        },
+        children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              className: "lum-pl-search",
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              placeholder,
+              "aria-label": "Ask the copilot"
+            }
+          ),
+          /* @__PURE__ */ jsx6("button", { className: "lum-btn lum-btn--primary lum-btn--sm", type: "submit", disabled: busy, "aria-label": "Send", children: /* @__PURE__ */ jsx6(Send, { size: 15 }) })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  ObsrviqCopilot,
+  ObsrviqInsights,
+  ObsrviqRecommendations,
+  ObsrviqReplay,
+  ObsrviqScore
+};
+//# sourceMappingURL=index.js.map