@agent-analytics/paperclip-live-analytics-plugin 0.1.0 → 0.1.1

package/dist/manifest.js

@@ -0,0 +1,51 @@
+// src/paperclip/manifest.js
+var manifest = {
+  id: "agent-analytics.paperclip-live-analytics-plugin",
+  apiVersion: 1,
+  version: "0.1.0",
+  displayName: "Agent Analytics Live",
+  description: "Thin live monitor for Paperclip companies using Agent Analytics.",
+  author: "@agent-analytics",
+  categories: ["automation", "ui"],
+  capabilities: [
+    "http.outbound",
+    "plugin.state.read",
+    "plugin.state.write",
+    "companies.read",
+    "projects.read",
+    "ui.page.register",
+    "ui.dashboardWidget.register",
+    "instance.settings.register"
+  ],
+  entrypoints: {
+    worker: "./dist/worker.js",
+    ui: "./dist/ui"
+  },
+  ui: {
+    slots: [
+      {
+        type: "page",
+        id: "agent-analytics-live-page",
+        displayName: "Agent Analytics Live",
+        exportName: "LivePage",
+        routePath: "agent-analytics-live"
+      },
+      {
+        type: "dashboardWidget",
+        id: "agent-analytics-live-widget",
+        displayName: "Agent Analytics Live",
+        exportName: "LiveDashboardWidget"
+      },
+      {
+        type: "settingsPage",
+        id: "agent-analytics-live-settings",
+        displayName: "Agent Analytics Live Settings",
+        exportName: "LiveSettingsPage"
+      }
+    ]
+  }
+};
+var manifest_default = manifest;
+export {
+  manifest_default as default
+};

package/dist/ui/index.js

@@ -0,0 +1,578 @@
+// src/paperclip/ui-entry.jsx
+import React, { useEffect, useMemo, useState as useState2 } from "react";
+import { useHostContext, usePluginAction, usePluginData, usePluginStream, usePluginToast } from "@paperclipai/plugin-sdk/ui";
+
+// src/shared/constants.js
+var LIVE_STREAM_CHANNEL = "agent-analytics-live";
+var DATA_KEYS = {
+  livePageLoad: "live.page.load",
+  liveWidgetLoad: "live.widget.load",
+  settingsLoad: "settings.load"
+};
+var ACTION_KEYS = {
+  authStart: "auth.start",
+  authComplete: "auth.complete",
+  authDisconnect: "auth.disconnect",
+  authReconnect: "auth.reconnect",
+  settingsSave: "settings.save",
+  mappingUpsert: "mapping.upsert",
+  mappingRemove: "mapping.remove",
+  assetSnooze: "asset.snooze",
+  assetUnsnooze: "asset.unsnooze"
+};
+
+// src/ui/surfaces/PageSurface.jsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatRelativeTime(timestamp) {
+  if (!timestamp) return "No updates yet";
+  const seconds = Math.max(0, Math.round((Date.now() - timestamp) / 1e3));
+  if (seconds < 5) return "Updated just now";
+  if (seconds < 60) return `Updated ${seconds}s ago`;
+  const minutes = Math.round(seconds / 60);
+  return `Updated ${minutes}m ago`;
+}
+function CountryPulse({ liveState }) {
+  const hotCountry = liveState.world.hotCountry || "World";
+  return /* @__PURE__ */ jsxs("section", { className: "aa-panel aa-world-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "aa-panel-header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "aa-kicker", children: "World / Country View" }),
+        /* @__PURE__ */ jsx("h2", { children: "Supporting geography, not dashboard wallpaper." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "aa-world-hot", children: hotCountry })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "aa-world-grid", children: [
+      /* @__PURE__ */ jsxs("div", { className: "aa-globe", children: [
+        /* @__PURE__ */ jsx("div", { className: "aa-globe-ring aa-globe-ring-one" }),
+        /* @__PURE__ */ jsx("div", { className: "aa-globe-ring aa-globe-ring-two" }),
+        /* @__PURE__ */ jsx("div", { className: "aa-globe-ring aa-globe-ring-three" }),
+        /* @__PURE__ */ jsx("div", { className: "aa-globe-core", children: /* @__PURE__ */ jsx("span", { children: "Live" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "aa-country-list", children: liveState.world.countries.map((country) => /* @__PURE__ */ jsxs("div", { className: "aa-country-row", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("strong", { children: country.country }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            country.visitors,
+            " visitors"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "aa-country-bar", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "aa-country-bar-fill",
+            style: { width: `${Math.min(100, country.events / Math.max(1, liveState.metrics.eventsPerMinute) * 100)}%` }
+          }
+        ) })
+      ] }, country.country)) })
+    ] })
+  ] });
+}
+function EvidenceColumn({ liveState }) {
+  return /* @__PURE__ */ jsxs("section", { className: "aa-panel", children: [
+    /* @__PURE__ */ jsx("div", { className: "aa-panel-header", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "aa-kicker", children: "Operator Evidence" }),
+      /* @__PURE__ */ jsx("h2", { children: "Fast feed, top pages, and why the pulse changed." })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "aa-evidence-grid", children: [
+      /* @__PURE__ */ jsxs("div", { className: "aa-mini-panel", children: [
+        /* @__PURE__ */ jsx("h3", { children: "Top Pages" }),
+        liveState.evidence.topPages.map((page) => /* @__PURE__ */ jsxs("div", { className: "aa-mini-row", children: [
+          /* @__PURE__ */ jsx("span", { children: page.path }),
+          /* @__PURE__ */ jsx("strong", { children: page.visitors })
+        ] }, page.path))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "aa-mini-panel", children: [
+        /* @__PURE__ */ jsx("h3", { children: "Top Events" }),
+        liveState.evidence.topEvents.map((event) => /* @__PURE__ */ jsxs("div", { className: "aa-mini-row", children: [
+          /* @__PURE__ */ jsx("span", { children: event.event }),
+          /* @__PURE__ */ jsx("strong", { children: event.count })
+        ] }, event.event))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "aa-feed", children: liveState.evidence.recentEvents.map((event) => /* @__PURE__ */ jsxs("div", { className: "aa-feed-row", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("strong", { children: event.event }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          event.assetLabel || "Unmapped asset",
+          " \xB7 ",
+          event.path || "no path",
+          " \xB7 ",
+          event.country || "??"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("time", { children: formatRelativeTime(event.timestamp) })
+    ] }, event.id)) })
+  ] });
+}
+function AssetCard({ asset, onSnooze, basePath }) {
+  return /* @__PURE__ */ jsxs("article", { className: `aa-asset-card aa-asset-card-${asset.kind}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "aa-asset-topline", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "aa-kicker", children: asset.kind }),
+        /* @__PURE__ */ jsx("h3", { children: asset.label })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: `aa-status-pill aa-status-${asset.status}`, children: asset.status })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "aa-asset-metrics", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { children: "Visitors" }),
+        /* @__PURE__ */ jsx("strong", { children: asset.activeVisitors })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { children: "Sessions" }),
+        /* @__PURE__ */ jsx("strong", { children: asset.activeSessions })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { children: "Events / min" }),
+        /* @__PURE__ */ jsx("strong", { children: asset.eventsPerMinute })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "aa-asset-details", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "aa-label", children: "Project" }),
+        /* @__PURE__ */ jsx("strong", { children: asset.agentAnalyticsProject })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "aa-label", children: "Hot country" }),
+        /* @__PURE__ */ jsx("strong", { children: asset.lastHotCountry || "Waiting for stream" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "aa-label", children: "Updated" }),
+        /* @__PURE__ */ jsx("strong", { children: formatRelativeTime(asset.lastUpdatedAt) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "aa-asset-evidence", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "aa-label", children: "Top page" }),
+        /* @__PURE__ */ jsx("strong", { children: asset.topPages[0]?.path || "No pages yet" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "aa-label", children: "Top event" }),
+        /* @__PURE__ */ jsx("strong", { children: asset.topEvents[0]?.event || "No events yet" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "aa-asset-actions", children: [
+      asset.paperclipProjectId ? /* @__PURE__ */ jsx("a", { className: "aa-button aa-button-secondary", href: `${basePath || ""}/projects/${asset.paperclipProjectId}`, children: "Open mapped project" }) : /* @__PURE__ */ jsx("span", { className: "aa-muted-note", children: "No Paperclip project linked yet" }),
+      /* @__PURE__ */ jsx("button", { className: "aa-button aa-button-ghost", onClick: () => onSnooze(asset.assetKey), children: "Snooze 30m" })
+    ] })
+  ] });
+}
+function PageSurface({ liveState, onSnooze, basePath = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "aa-page-shell", children: [
+    /* @__PURE__ */ jsxs("header", { className: "aa-hero", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "aa-kicker", children: "Agent Analytics Live" }),
+        /* @__PURE__ */ jsx("h1", { children: "Ambient pulse for the company, backed by raw evidence." }),
+        /* @__PURE__ */ jsx("p", { className: "aa-hero-copy", children: liveState.connection.detail })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "aa-hero-status", children: [
+        /* @__PURE__ */ jsx("span", { className: `aa-status-pill aa-status-${liveState.connection.status}`, children: liveState.connection.label }),
+        /* @__PURE__ */ jsx("p", { children: liveState.account?.email || "No connected account" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "aa-metric-grid", children: [
+      /* @__PURE__ */ jsxs("div", { className: "aa-metric-card", children: [
+        /* @__PURE__ */ jsx("span", { children: "Active visitors" }),
+        /* @__PURE__ */ jsx("strong", { children: liveState.metrics.activeVisitors })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "aa-metric-card", children: [
+        /* @__PURE__ */ jsx("span", { children: "Active sessions" }),
+        /* @__PURE__ */ jsx("strong", { children: liveState.metrics.activeSessions })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "aa-metric-card", children: [
+        /* @__PURE__ */ jsx("span", { children: "Events / min" }),
+        /* @__PURE__ */ jsx("strong", { children: liveState.metrics.eventsPerMinute })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "aa-metric-card", children: [
+        /* @__PURE__ */ jsx("span", { children: "Visible assets" }),
+        /* @__PURE__ */ jsx("strong", { children: liveState.metrics.assetsVisible })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "aa-main-grid", children: [
+      /* @__PURE__ */ jsx(CountryPulse, { liveState }),
+      /* @__PURE__ */ jsx(EvidenceColumn, { liveState })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "aa-assets-section", children: [
+      /* @__PURE__ */ jsx("div", { className: "aa-panel-header", children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "aa-kicker", children: "Mapped Assets" }),
+        /* @__PURE__ */ jsx("h2", { children: "Each card ties live movement back to an owned company asset." })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "aa-asset-grid", children: liveState.assets.map((asset) => /* @__PURE__ */ jsx(AssetCard, { asset, onSnooze, basePath }, asset.assetKey)) })
+    ] })
+  ] });
+}
+
+// src/ui/surfaces/SettingsSurface.jsx
+import { useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EMPTY_MAPPING = {
+  assetKey: "",
+  label: "",
+  kind: "website",
+  paperclipProjectId: "",
+  agentAnalyticsProject: "",
+  primaryHostname: "",
+  enabled: true
+};
+function MappingRow({ mapping, onRemove }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "aa-settings-row", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("strong", { children: mapping.label }),
+      /* @__PURE__ */ jsxs2("span", { children: [
+        mapping.kind,
+        " \xB7 ",
+        mapping.agentAnalyticsProject
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("button", { className: "aa-button aa-button-ghost", onClick: () => onRemove(mapping.assetKey), children: "Remove" })
+  ] });
+}
+function SettingsSurface({
+  settingsData,
+  onStartAuth,
+  onCompleteAuth,
+  onReconnect,
+  onDisconnect,
+  onSaveSettings,
+  onUpsertMapping,
+  onRemoveMapping
+}) {
+  const [formState, setFormState] = useState(() => ({
+    agentAnalyticsBaseUrl: settingsData.settings.agentAnalyticsBaseUrl,
+    liveWindowSeconds: settingsData.settings.liveWindowSeconds,
+    pollIntervalSeconds: settingsData.settings.pollIntervalSeconds,
+    pluginEnabled: settingsData.settings.pluginEnabled
+  }));
+  const [mappingForm, setMappingForm] = useState(EMPTY_MAPPING);
+  const [exchangeCode, setExchangeCode] = useState("");
+  return /* @__PURE__ */ jsxs2("div", { className: "aa-settings-shell", children: [
+    /* @__PURE__ */ jsxs2("section", { className: "aa-panel", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "aa-panel-header", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("p", { className: "aa-kicker", children: "Connection" }),
+          /* @__PURE__ */ jsx2("h2", { children: "Login-first auth, worker-held tokens." })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: `aa-status-pill aa-status-${settingsData.auth.status}`, children: settingsData.auth.status })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "aa-settings-grid", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "aa-settings-stack", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "aa-settings-row", children: [
+            /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx2("strong", { children: "Connected account" }),
+              /* @__PURE__ */ jsx2("span", { children: settingsData.auth.accountSummary?.email || "Not connected" })
+            ] }),
+            settingsData.auth.connected ? /* @__PURE__ */ jsx2("button", { className: "aa-button aa-button-secondary", onClick: onDisconnect, children: "Disconnect" }) : /* @__PURE__ */ jsx2("button", { className: "aa-button aa-button-primary", onClick: onStartAuth, children: "Start login" })
+          ] }),
+          settingsData.auth.pendingAuthRequest ? /* @__PURE__ */ jsxs2("div", { className: "aa-auth-box", children: [
+            /* @__PURE__ */ jsxs2("label", { children: [
+              "Approval URL",
+              /* @__PURE__ */ jsx2("a", { href: settingsData.auth.pendingAuthRequest.authorizeUrl, target: "_blank", rel: "noreferrer", children: settingsData.auth.pendingAuthRequest.authorizeUrl })
+            ] }),
+            /* @__PURE__ */ jsxs2("label", { children: [
+              "Finish code",
+              /* @__PURE__ */ jsx2("input", { value: exchangeCode, onChange: (event) => setExchangeCode(event.target.value), placeholder: "Paste finish code" })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "aa-inline-actions", children: [
+              /* @__PURE__ */ jsx2("button", { className: "aa-button aa-button-primary", onClick: () => onCompleteAuth(settingsData.auth.pendingAuthRequest.authRequestId, exchangeCode), children: "Complete login" }),
+              /* @__PURE__ */ jsx2("button", { className: "aa-button aa-button-ghost", onClick: onReconnect, children: "Refresh session" })
+            ] })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "aa-mini-panel", children: [
+          /* @__PURE__ */ jsx2("h3", { children: "Discovered projects" }),
+          (settingsData.discoveredProjects || []).map((project) => /* @__PURE__ */ jsxs2("div", { className: "aa-mini-row", children: [
+            /* @__PURE__ */ jsx2("span", { children: project.name }),
+            /* @__PURE__ */ jsx2("strong", { children: project.allowed_origins || "*" })
+          ] }, project.id || project.name))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("section", { className: "aa-panel", children: [
+      /* @__PURE__ */ jsx2("div", { className: "aa-panel-header", children: /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("p", { className: "aa-kicker", children: "Rollout Controls" }),
+        /* @__PURE__ */ jsx2("h2", { children: "Keep the live window short and the poll cadence explicit." })
+      ] }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "aa-form-grid", children: [
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Agent Analytics base URL",
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              value: formState.agentAnalyticsBaseUrl,
+              onChange: (event) => setFormState((current) => ({ ...current, agentAnalyticsBaseUrl: event.target.value }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Live window seconds",
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "number",
+              value: formState.liveWindowSeconds,
+              onChange: (event) => setFormState((current) => ({ ...current, liveWindowSeconds: Number(event.target.value) }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Poll interval seconds",
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "number",
+              value: formState.pollIntervalSeconds,
+              onChange: (event) => setFormState((current) => ({ ...current, pollIntervalSeconds: Number(event.target.value) }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { className: "aa-checkbox", children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "checkbox",
+              checked: formState.pluginEnabled,
+              onChange: (event) => setFormState((current) => ({ ...current, pluginEnabled: event.target.checked }))
+            }
+          ),
+          "Plugin enabled"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "aa-inline-actions", children: [
+        /* @__PURE__ */ jsx2("button", { className: "aa-button aa-button-primary", onClick: () => onSaveSettings(formState), children: "Save controls" }),
+        /* @__PURE__ */ jsx2("button", { className: "aa-button aa-button-ghost", onClick: onReconnect, children: "Revalidate connection" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("section", { className: "aa-panel", children: [
+      /* @__PURE__ */ jsx2("div", { className: "aa-panel-header", children: /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2("p", { className: "aa-kicker", children: "Asset Mapping" }),
+        /* @__PURE__ */ jsx2("h2", { children: "Explicit Paperclip asset to Agent Analytics project links." })
+      ] }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "aa-form-grid", children: [
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Asset key",
+          /* @__PURE__ */ jsx2("input", { value: mappingForm.assetKey, onChange: (event) => setMappingForm((current) => ({ ...current, assetKey: event.target.value })) })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Label",
+          /* @__PURE__ */ jsx2("input", { value: mappingForm.label, onChange: (event) => setMappingForm((current) => ({ ...current, label: event.target.value })) })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Kind",
+          /* @__PURE__ */ jsxs2("select", { value: mappingForm.kind, onChange: (event) => setMappingForm((current) => ({ ...current, kind: event.target.value })), children: [
+            /* @__PURE__ */ jsx2("option", { value: "website", children: "website" }),
+            /* @__PURE__ */ jsx2("option", { value: "docs", children: "docs" }),
+            /* @__PURE__ */ jsx2("option", { value: "app", children: "app" }),
+            /* @__PURE__ */ jsx2("option", { value: "api", children: "api" }),
+            /* @__PURE__ */ jsx2("option", { value: "other", children: "other" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Paperclip project ID",
+          /* @__PURE__ */ jsx2("input", { value: mappingForm.paperclipProjectId, onChange: (event) => setMappingForm((current) => ({ ...current, paperclipProjectId: event.target.value })) })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Agent Analytics project",
+          /* @__PURE__ */ jsx2("input", { value: mappingForm.agentAnalyticsProject, onChange: (event) => setMappingForm((current) => ({ ...current, agentAnalyticsProject: event.target.value })) })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Primary hostname",
+          /* @__PURE__ */ jsx2("input", { value: mappingForm.primaryHostname, onChange: (event) => setMappingForm((current) => ({ ...current, primaryHostname: event.target.value })) })
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { className: "aa-checkbox", children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "checkbox",
+              checked: mappingForm.enabled,
+              onChange: (event) => setMappingForm((current) => ({ ...current, enabled: event.target.checked }))
+            }
+          ),
+          "Enabled"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "aa-inline-actions", children: /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: "aa-button aa-button-primary",
+          onClick: () => {
+            onUpsertMapping(mappingForm);
+            setMappingForm(EMPTY_MAPPING);
+          },
+          children: "Save mapping"
+        }
+      ) }),
+      /* @__PURE__ */ jsx2("div", { className: "aa-settings-stack", children: settingsData.settings.monitoredAssets.map((mapping) => /* @__PURE__ */ jsx2(MappingRow, { mapping, onRemove: onRemoveMapping }, mapping.assetKey)) })
+    ] }),
+    settingsData.validation.warnings.length > 0 ? /* @__PURE__ */ jsxs2("section", { className: "aa-panel aa-panel-warning", children: [
+      /* @__PURE__ */ jsx2("h3", { children: "Warnings" }),
+      settingsData.validation.warnings.map((warning) => /* @__PURE__ */ jsx2("p", { children: warning }, warning))
+    ] }) : null
+  ] });
+}
+
+// src/ui/surfaces/WidgetSurface.jsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function WidgetSurface({ widget, fullPageHref = "?surface=page" }) {
+  return /* @__PURE__ */ jsxs3("section", { className: "aa-widget", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "aa-widget-header", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("p", { className: "aa-kicker", children: "Live Status" }),
+        /* @__PURE__ */ jsx3("h2", { children: widget.connection.label })
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: `aa-status-pill aa-status-${widget.connection.status}`, children: widget.tier || "tier unknown" })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "aa-widget-metrics", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("span", { children: "Visitors" }),
+        /* @__PURE__ */ jsx3("strong", { children: widget.metrics.activeVisitors })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("span", { children: "Sessions" }),
+        /* @__PURE__ */ jsx3("strong", { children: widget.metrics.activeSessions })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("span", { children: "EPM" }),
+        /* @__PURE__ */ jsx3("strong", { children: widget.metrics.eventsPerMinute })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "aa-widget-footer", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("span", { className: "aa-label", children: "Top asset" }),
+        /* @__PURE__ */ jsx3("strong", { children: widget.topAsset?.label || "No live assets yet" })
+      ] }),
+      /* @__PURE__ */ jsx3("a", { className: "aa-button aa-button-secondary", href: fullPageHref, children: "Open full live page" })
+    ] })
+  ] });
+}
+
+// src/ui/styles.css
+var styles_default = ':root {\n  --aa-bg: #f0e8dc;\n  --aa-bg-deep: #e4d6c0;\n  --aa-ink: #1f2a2a;\n  --aa-muted: #576665;\n  --aa-panel: rgba(255, 250, 242, 0.78);\n  --aa-panel-stroke: rgba(31, 42, 42, 0.11);\n  --aa-accent: #0f8b8d;\n  --aa-accent-warm: #dc6f36;\n  --aa-accent-cool: #265f88;\n  --aa-live: #1a9a63;\n  --aa-error: #b24a2f;\n  --aa-shadow: 0 18px 50px rgba(31, 42, 42, 0.08);\n  --aa-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;\n  --aa-sans: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;\n  --aa-mono: "IBM Plex Mono", "SFMono-Regular", monospace;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: var(--aa-sans);\n  color: var(--aa-ink);\n  background:\n    radial-gradient(circle at top left, rgba(15, 139, 141, 0.16), transparent 28%),\n    radial-gradient(circle at top right, rgba(220, 111, 54, 0.16), transparent 22%),\n    linear-gradient(180deg, #f8f3eb 0%, var(--aa-bg) 45%, var(--aa-bg-deep) 100%);\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\nbutton,\ninput,\nselect {\n  font: inherit;\n}\n\n.aa-app {\n  min-height: 100vh;\n  padding: 24px;\n}\n\n.aa-page-shell,\n.aa-settings-shell {\n  max-width: 1400px;\n  margin: 0 auto;\n}\n\n.aa-hero,\n.aa-panel,\n.aa-widget,\n.aa-metric-card,\n.aa-asset-card {\n  background: var(--aa-panel);\n  border: 1px solid var(--aa-panel-stroke);\n  box-shadow: var(--aa-shadow);\n  backdrop-filter: blur(18px);\n}\n\n.aa-hero {\n  display: flex;\n  justify-content: space-between;\n  gap: 24px;\n  padding: 28px;\n  border-radius: 28px;\n}\n\n.aa-kicker {\n  margin: 0 0 8px;\n  font-family: var(--aa-mono);\n  font-size: 11px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--aa-muted);\n}\n\n.aa-hero h1,\n.aa-panel h2,\n.aa-widget h2 {\n  margin: 0;\n  font-family: var(--aa-serif);\n  line-height: 1;\n}\n\n.aa-hero h1 {\n  font-size: clamp(2.6rem, 5vw, 4.3rem);\n  max-width: 12ch;\n}\n\n.aa-hero-copy {\n  max-width: 58ch;\n  color: var(--aa-muted);\n}\n\n.aa-hero-status {\n  min-width: 220px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 12px;\n}\n\n.aa-metric-grid,\n.aa-main-grid,\n.aa-evidence-grid,\n.aa-asset-grid,\n.aa-settings-grid,\n.aa-form-grid {\n  display: grid;\n  gap: 18px;\n}\n\n.aa-metric-grid {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 18px 0;\n}\n\n.aa-metric-card {\n  border-radius: 22px;\n  padding: 20px;\n}\n\n.aa-metric-card span,\n.aa-label {\n  display: block;\n  font-size: 0.82rem;\n  color: var(--aa-muted);\n}\n\n.aa-metric-card strong {\n  display: block;\n  margin-top: 10px;\n  font-size: 2.3rem;\n  font-family: var(--aa-serif);\n}\n\n.aa-main-grid {\n  grid-template-columns: 1.25fr 1fr;\n  align-items: start;\n}\n\n.aa-panel,\n.aa-widget,\n.aa-asset-card {\n  border-radius: 26px;\n  padding: 22px;\n}\n\n.aa-panel-header,\n.aa-widget-header,\n.aa-asset-topline,\n.aa-widget-footer,\n.aa-inline-actions,\n.aa-settings-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 14px;\n  align-items: flex-start;\n}\n\n.aa-world-grid {\n  display: grid;\n  grid-template-columns: minmax(260px, 0.9fr) 1.1fr;\n  gap: 20px;\n  align-items: center;\n}\n\n.aa-globe {\n  position: relative;\n  aspect-ratio: 1;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 30% 30%, rgba(15, 139, 141, 0.45), transparent 44%),\n    radial-gradient(circle at 70% 65%, rgba(220, 111, 54, 0.24), transparent 32%),\n    linear-gradient(180deg, #173838 0%, #0f6465 100%);\n  overflow: hidden;\n  box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.15);\n}\n\n.aa-globe-ring {\n  position: absolute;\n  inset: 18%;\n  border: 1px solid rgba(255, 255, 255, 0.22);\n  border-radius: 999px;\n}\n\n.aa-globe-ring-two {\n  inset: 8%;\n}\n\n.aa-globe-ring-three {\n  inset: 32%;\n}\n\n.aa-globe-core {\n  position: absolute;\n  inset: 38%;\n  display: grid;\n  place-items: center;\n  border-radius: 999px;\n  background: rgba(255, 250, 242, 0.92);\n  color: var(--aa-ink);\n  font-family: var(--aa-mono);\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  font-size: 0.75rem;\n}\n\n.aa-country-list,\n.aa-feed,\n.aa-settings-stack {\n  display: grid;\n  gap: 12px;\n}\n\n.aa-country-row,\n.aa-feed-row,\n.aa-mini-row,\n.aa-settings-row {\n  padding: 12px 0;\n  border-top: 1px solid rgba(31, 42, 42, 0.08);\n}\n\n.aa-country-row:first-child,\n.aa-feed-row:first-child,\n.aa-mini-row:first-child,\n.aa-settings-row:first-child {\n  border-top: 0;\n  padding-top: 0;\n}\n\n.aa-country-row strong,\n.aa-mini-row strong,\n.aa-feed-row strong,\n.aa-settings-row strong {\n  display: block;\n}\n\n.aa-country-row span,\n.aa-feed-row span,\n.aa-settings-row span {\n  color: var(--aa-muted);\n  font-size: 0.92rem;\n}\n\n.aa-country-bar {\n  width: 100%;\n  height: 8px;\n  margin-top: 8px;\n  border-radius: 999px;\n  background: rgba(38, 95, 136, 0.12);\n  overflow: hidden;\n}\n\n.aa-country-bar-fill {\n  height: 100%;\n  border-radius: 999px;\n  background: linear-gradient(90deg, var(--aa-accent) 0%, var(--aa-accent-warm) 100%);\n}\n\n.aa-world-hot,\n.aa-status-pill {\n  padding: 7px 12px;\n  border-radius: 999px;\n  font-size: 0.78rem;\n  font-family: var(--aa-mono);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.aa-world-hot,\n.aa-status-live,\n.aa-status-connected,\n.aa-status-streaming {\n  background: rgba(26, 154, 99, 0.14);\n  color: var(--aa-live);\n}\n\n.aa-status-error,\n.aa-status-attention {\n  background: rgba(178, 74, 47, 0.14);\n  color: var(--aa-error);\n}\n\n.aa-status-idle,\n.aa-status-pending,\n.aa-status-disconnected {\n  background: rgba(38, 95, 136, 0.12);\n  color: var(--aa-accent-cool);\n}\n\n.aa-mini-panel {\n  background: rgba(255, 255, 255, 0.42);\n  border-radius: 20px;\n  padding: 18px;\n  border: 1px solid rgba(31, 42, 42, 0.08);\n}\n\n.aa-mini-panel h3,\n.aa-assets-section h2 {\n  margin: 0 0 12px;\n  font-family: var(--aa-serif);\n}\n\n.aa-feed-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.aa-feed-row time {\n  white-space: nowrap;\n  font-size: 0.85rem;\n  color: var(--aa-muted);\n}\n\n.aa-assets-section {\n  margin-top: 18px;\n}\n\n.aa-asset-grid {\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  margin-top: 18px;\n}\n\n.aa-asset-card {\n  display: grid;\n  gap: 16px;\n}\n\n.aa-asset-metrics,\n.aa-asset-details,\n.aa-asset-evidence,\n.aa-widget-metrics {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.aa-asset-metrics strong,\n.aa-widget-metrics strong {\n  display: block;\n  margin-top: 8px;\n  font-family: var(--aa-serif);\n  font-size: 1.6rem;\n}\n\n.aa-button {\n  border: 0;\n  border-radius: 999px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: transform 120ms ease, opacity 120ms ease;\n}\n\n.aa-button:hover {\n  transform: translateY(-1px);\n}\n\n.aa-button-primary {\n  background: var(--aa-ink);\n  color: #fff;\n}\n\n.aa-button-secondary {\n  background: rgba(15, 139, 141, 0.12);\n  color: var(--aa-accent);\n}\n\n.aa-button-ghost {\n  background: transparent;\n  color: var(--aa-muted);\n  border: 1px solid rgba(31, 42, 42, 0.12);\n}\n\n.aa-widget {\n  max-width: 520px;\n  margin: 0 auto;\n}\n\n.aa-widget-metrics {\n  margin: 18px 0;\n}\n\n.aa-settings-grid {\n  grid-template-columns: 1.15fr 0.85fr;\n}\n\n.aa-form-grid {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  margin-top: 14px;\n}\n\n.aa-form-grid label,\n.aa-auth-box label {\n  display: grid;\n  gap: 8px;\n  font-size: 0.92rem;\n  color: var(--aa-muted);\n}\n\n.aa-form-grid input,\n.aa-form-grid select,\n.aa-auth-box input {\n  border-radius: 14px;\n  border: 1px solid rgba(31, 42, 42, 0.12);\n  padding: 12px 14px;\n  background: rgba(255, 255, 255, 0.72);\n}\n\n.aa-auth-box {\n  display: grid;\n  gap: 12px;\n  margin-top: 16px;\n  padding: 16px;\n  border-radius: 18px;\n  background: rgba(255, 255, 255, 0.48);\n}\n\n.aa-checkbox {\n  display: flex !important;\n  align-items: center;\n  gap: 10px;\n}\n\n.aa-muted-note {\n  color: var(--aa-muted);\n  font-size: 0.92rem;\n  display: inline-flex;\n  align-items: center;\n}\n\n.aa-panel-warning {\n  border-color: rgba(220, 111, 54, 0.28);\n}\n\n@media (max-width: 1100px) {\n  .aa-metric-grid,\n  .aa-main-grid,\n  .aa-settings-grid,\n  .aa-world-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .aa-hero {\n    flex-direction: column;\n  }\n\n  .aa-hero-status {\n    align-items: flex-start;\n  }\n}\n\n@media (max-width: 720px) {\n  .aa-app {\n    padding: 14px;\n  }\n\n  .aa-metric-grid,\n  .aa-form-grid,\n  .aa-asset-metrics,\n  .aa-asset-details,\n  .aa-asset-evidence,\n  .aa-widget-metrics {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .aa-feed-row,\n  .aa-panel-header,\n  .aa-widget-header,\n  .aa-widget-footer,\n  .aa-settings-row,\n  .aa-inline-actions {\n    flex-direction: column;\n  }\n}\n\n';
+
+// src/paperclip/ui-entry.jsx
+function useInjectedStyles() {
+  useEffect(() => {
+    const styleId = "agent-analytics-live-plugin-styles";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = styles_default;
+    document.head.appendChild(style);
+    return () => {
+    };
+  }, []);
+}
+function useCompanyId(explicitContext) {
+  const hostContext = useHostContext();
+  return explicitContext?.companyId || hostContext.companyId;
+}
+function PageInner({ context }) {
+  const companyId = useCompanyId(context);
+  const toast = usePluginToast();
+  const { data, loading, error, refresh } = usePluginData(DATA_KEYS.livePageLoad, { companyId });
+  const snoozeAsset = usePluginAction(ACTION_KEYS.assetSnooze);
+  const unsnoozeAsset = usePluginAction(ACTION_KEYS.assetUnsnooze);
+  const stream = usePluginStream(LIVE_STREAM_CHANNEL, { companyId });
+  const [liveState, setLiveState] = useState2(data);
+  useEffect(() => {
+    if (data) setLiveState(data);
+  }, [data]);
+  useEffect(() => {
+    if (stream.lastEvent) setLiveState(stream.lastEvent);
+  }, [stream.lastEvent]);
+  const content = useMemo(() => liveState || data, [liveState, data]);
+  if (loading && !content) return React.createElement("div", { className: "aa-panel" }, "Loading live data\u2026");
+  if (error && !content) return React.createElement("div", { className: "aa-panel" }, `Live page failed: ${error.message}`);
+  if (!content) return React.createElement("div", { className: "aa-panel" }, "No live data yet.");
+  return React.createElement(PageSurface, {
+    liveState: content,
+    onSnooze: async (assetKey) => {
+      await snoozeAsset({ companyId, assetKey });
+      toast({ title: "Asset snoozed", body: assetKey, tone: "success" });
+      refresh();
+    },
+    onUnsnooze: async (assetKey) => {
+      await unsnoozeAsset({ companyId, assetKey });
+      toast({ title: "Asset unsnoozed", body: assetKey, tone: "success" });
+      refresh();
+    },
+    basePath: context?.companyPrefix || ""
+  });
+}
+function WidgetInner({ context }) {
+  const companyId = useCompanyId(context);
+  const { data, loading, error } = usePluginData(DATA_KEYS.liveWidgetLoad, { companyId });
+  if (loading && !data) return React.createElement("div", { className: "aa-widget" }, "Loading\u2026");
+  if (error && !data) return React.createElement("div", { className: "aa-widget" }, `Widget failed: ${error.message}`);
+  if (!data) return React.createElement("div", { className: "aa-widget" }, "No live summary yet.");
+  return React.createElement(WidgetSurface, {
+    widget: data,
+    fullPageHref: `${context?.companyPrefix || ""}/plugins/agent-analytics.paperclip-live-analytics-plugin`
+  });
+}
+function SettingsInner({ context }) {
+  const companyId = useCompanyId(context);
+  const toast = usePluginToast();
+  const { data, loading, error, refresh } = usePluginData(DATA_KEYS.settingsLoad, { companyId });
+  const authStart = usePluginAction(ACTION_KEYS.authStart);
+  const authComplete = usePluginAction(ACTION_KEYS.authComplete);
+  const authReconnect = usePluginAction(ACTION_KEYS.authReconnect);
+  const authDisconnect = usePluginAction(ACTION_KEYS.authDisconnect);
+  const settingsSave = usePluginAction(ACTION_KEYS.settingsSave);
+  const mappingUpsert = usePluginAction(ACTION_KEYS.mappingUpsert);
+  const mappingRemove = usePluginAction(ACTION_KEYS.mappingRemove);
+  if (loading && !data) return React.createElement("div", { className: "aa-panel" }, "Loading settings\u2026");
+  if (error && !data) return React.createElement("div", { className: "aa-panel" }, `Settings failed: ${error.message}`);
+  if (!data) return React.createElement("div", { className: "aa-panel" }, "No settings data yet.");
+  return React.createElement(SettingsSurface, {
+    settingsData: data,
+    onStartAuth: async () => {
+      await authStart({ companyId });
+      refresh();
+    },
+    onCompleteAuth: async (authRequestId, exchangeCode) => {
+      await authComplete({ companyId, authRequestId, exchangeCode });
+      toast({ title: "Agent Analytics connected", tone: "success" });
+      refresh();
+    },
+    onReconnect: async () => {
+      await authReconnect({ companyId });
+      refresh();
+    },
+    onDisconnect: async () => {
+      await authDisconnect({ companyId });
+      refresh();
+    },
+    onSaveSettings: async (settings) => {
+      await settingsSave({ companyId, settings });
+      toast({ title: "Settings saved", tone: "success" });
+      refresh();
+    },
+    onUpsertMapping: async (mapping) => {
+      await mappingUpsert({ companyId, mapping });
+      toast({ title: "Mapping saved", tone: "success" });
+      refresh();
+    },
+    onRemoveMapping: async (assetKey) => {
+      await mappingRemove({ companyId, assetKey });
+      toast({ title: "Mapping removed", body: assetKey, tone: "info" });
+      refresh();
+    }
+  });
+}
+function LivePage(props) {
+  useInjectedStyles();
+  return React.createElement(PageInner, props);
+}
+function LiveDashboardWidget(props) {
+  useInjectedStyles();
+  return React.createElement(WidgetInner, props);
+}
+function LiveSettingsPage(props) {
+  useInjectedStyles();
+  return React.createElement(SettingsInner, props);
+}
+export {
+  LiveDashboardWidget,
+  LivePage,
+  LiveSettingsPage
+};