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

package/src/shared/live-state.js

@@ -0,0 +1,384 @@
+import {
+  ASSET_KINDS,
+  DEFAULT_POLL_INTERVAL_SECONDS,
+  DEFAULT_SNOOZE_MINUTES,
+  DEFAULT_LIVE_WINDOW_SECONDS,
+  MAX_ENABLED_ASSET_STREAMS,
+  MAX_LIVE_WINDOW_SECONDS,
+  MAX_POLL_INTERVAL_SECONDS,
+  MIN_LIVE_WINDOW_SECONDS,
+  MIN_POLL_INTERVAL_SECONDS,
+} from './constants.js';
+import { createEmptyCompanyLiveState } from './defaults.js';
+
+function clampNumber(value, min, max, fallback) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) return fallback;
+  return Math.min(max, Math.max(min, Math.round(parsed)));
+}
+
+function sortCountRows(rows, countKey) {
+  return [...rows].sort((left, right) => {
+    if ((right[countKey] || 0) !== (left[countKey] || 0)) {
+      return (right[countKey] || 0) - (left[countKey] || 0);
+    }
+    return String(left.label || left.path || left.event || '').localeCompare(
+      String(right.label || right.path || right.event || '')
+    );
+  });
+}
+
+function sortCountries(rows) {
+  return [...rows].sort((left, right) => {
+    if ((right.visitors || 0) !== (left.visitors || 0)) return (right.visitors || 0) - (left.visitors || 0);
+    if ((right.sessions || 0) !== (left.sessions || 0)) return (right.sessions || 0) - (left.sessions || 0);
+    if ((right.events || 0) !== (left.events || 0)) return (right.events || 0) - (left.events || 0);
+    return String(left.country || '').localeCompare(String(right.country || ''));
+  });
+}
+
+export function clampLiveWindowSeconds(value) {
+  return clampNumber(value, MIN_LIVE_WINDOW_SECONDS, MAX_LIVE_WINDOW_SECONDS, DEFAULT_LIVE_WINDOW_SECONDS);
+}
+
+export function clampPollIntervalSeconds(value) {
+  return clampNumber(value, MIN_POLL_INTERVAL_SECONDS, MAX_POLL_INTERVAL_SECONDS, DEFAULT_POLL_INTERVAL_SECONDS);
+}
+
+export function slugifyAssetKey(value) {
+  return String(value || '')
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 64);
+}
+
+export function normalizeAssetMapping(input = {}) {
+  const label = String(input.label || '').trim();
+  const assetKey = slugifyAssetKey(input.assetKey || label || 'asset');
+  const kind = ASSET_KINDS.includes(input.kind) ? input.kind : 'other';
+  const project = String(input.agentAnalyticsProject || '').trim();
+  return {
+    assetKey,
+    label: label || assetKey,
+    kind,
+    paperclipProjectId: input.paperclipProjectId ? String(input.paperclipProjectId).trim() : '',
+    agentAnalyticsProject: project,
+    primaryHostname: input.primaryHostname ? String(input.primaryHostname).trim() : '',
+    allowedOrigins: Array.isArray(input.allowedOrigins)
+      ? input.allowedOrigins.map((value) => String(value).trim()).filter(Boolean)
+      : [],
+    enabled: input.enabled !== false,
+  };
+}
+
+export function buildStreamFilter(mapping) {
+  const clauses = [];
+  if (mapping.primaryHostname) clauses.push(`hostname:${mapping.primaryHostname}`);
+  return clauses.join(';') || null;
+}
+
+export function mappingSignature(mapping) {
+  return JSON.stringify({
+    project: mapping.agentAnalyticsProject,
+    filter: buildStreamFilter(mapping),
+  });
+}
+
+export function createEmptyAssetState(mapping, now = Date.now()) {
+  return {
+    assetKey: mapping.assetKey,
+    label: mapping.label,
+    kind: mapping.kind,
+    paperclipProjectId: mapping.paperclipProjectId || '',
+    agentAnalyticsProject: mapping.agentAnalyticsProject,
+    primaryHostname: mapping.primaryHostname || '',
+    allowedOrigins: mapping.allowedOrigins || [],
+    enabled: mapping.enabled !== false,
+    status: 'idle',
+    lastUpdatedAt: now,
+    lastSnapshotAt: null,
+    lastPolledAt: null,
+    lastHotCountry: null,
+    activeVisitors: 0,
+    activeSessions: 0,
+    eventsPerMinute: 0,
+    topPages: [],
+    topEvents: [],
+    countries: [],
+    recentEvents: [],
+    warnings: [],
+    errors: [],
+  };
+}
+
+export function normalizeLiveSnapshot(snapshot = {}) {
+  return {
+    project: snapshot.project || '',
+    windowSeconds: clampLiveWindowSeconds(snapshot.window_seconds),
+    timestamp: snapshot.timestamp || Date.now(),
+    activeVisitors: Number(snapshot.active_visitors || 0),
+    activeSessions: Number(snapshot.active_sessions || 0),
+    eventsPerMinute: Number(snapshot.events_per_minute || 0),
+    topPages: (snapshot.top_pages || []).map((row) => ({
+      path: String(row.path || ''),
+      visitors: Number(row.visitors || 0),
+    })),
+    topEvents: (snapshot.top_events || []).map((row) => ({
+      event: String(row.event || ''),
+      count: Number(row.count || 0),
+    })),
+    countries: sortCountries(
+      (snapshot.countries || []).map((row) => ({
+        country: String(row.country || ''),
+        visitors: Number(row.visitors || 0),
+        sessions: Number(row.sessions || 0),
+        events: Number(row.events || 0),
+      }))
+    ),
+    recentEvents: (snapshot.recent_events || []).map((row, index) => ({
+      id: `${row.session_id || row.user_id || row.timestamp || 'event'}-${index}`,
+      event: String(row.event || ''),
+      properties: row.properties || {},
+      userId: row.user_id || null,
+      sessionId: row.session_id || null,
+      timestamp: Number(row.timestamp || Date.now()),
+      country: row.country || null,
+      path: row.properties?.path || null,
+      assetKey: null,
+      assetLabel: null,
+    })),
+  };
+}
+
+export function normalizeTrackEvent(track = {}, mapping) {
+  return {
+    id: `${track.session_id || track.user_id || track.timestamp || Date.now()}-${track.event || 'track'}`,
+    event: String(track.event || ''),
+    properties: track.properties || {},
+    userId: track.user_id || null,
+    sessionId: track.session_id || null,
+    timestamp: Number(track.timestamp || Date.now()),
+    country: track.country || null,
+    path: track.properties?.path || null,
+    assetKey: mapping.assetKey,
+    assetLabel: mapping.label,
+  };
+}
+
+export function applySnapshotToAssetState(currentState, snapshot, mapping, now = Date.now()) {
+  const normalized = normalizeLiveSnapshot(snapshot);
+  return {
+    ...createEmptyAssetState(mapping, now),
+    ...currentState,
+    ...mapping,
+    status: 'live',
+    lastUpdatedAt: now,
+    lastSnapshotAt: normalized.timestamp,
+    lastPolledAt: now,
+    activeVisitors: normalized.activeVisitors,
+    activeSessions: normalized.activeSessions,
+    eventsPerMinute: normalized.eventsPerMinute,
+    topPages: normalized.topPages,
+    topEvents: normalized.topEvents,
+    countries: normalized.countries,
+    recentEvents: normalized.recentEvents.map((event) => ({
+      ...event,
+      assetKey: mapping.assetKey,
+      assetLabel: mapping.label,
+    })),
+    errors: [],
+  };
+}
+
+export function applyTrackEventToAssetState(currentState, rawTrackEvent, mapping, now = Date.now()) {
+  const state = currentState || createEmptyAssetState(mapping, now);
+  const trackEvent = normalizeTrackEvent(rawTrackEvent, mapping);
+  const next = {
+    ...state,
+    ...mapping,
+    status: state.status === 'idle' ? 'streaming' : state.status,
+    lastUpdatedAt: now,
+    lastHotCountry: trackEvent.country || state.lastHotCountry,
+    recentEvents: [trackEvent, ...state.recentEvents].slice(0, 12),
+  };
+
+  if (trackEvent.path) {
+    const topPages = [...next.topPages];
+    const existing = topPages.find((row) => row.path === trackEvent.path);
+    if (existing) existing.visitors += 1;
+    else topPages.push({ path: trackEvent.path, visitors: 1 });
+    next.topPages = sortCountRows(topPages, 'visitors').slice(0, 10);
+  }
+
+  if (trackEvent.event) {
+    const topEvents = [...next.topEvents];
+    const existing = topEvents.find((row) => row.event === trackEvent.event);
+    if (existing) existing.count += 1;
+    else topEvents.push({ event: trackEvent.event, count: 1 });
+    next.topEvents = sortCountRows(topEvents, 'count').slice(0, 10);
+  }
+
+  if (trackEvent.country) {
+    const countries = [...next.countries];
+    const existing = countries.find((row) => row.country === trackEvent.country);
+    if (existing) {
+      existing.events += 1;
+      if (trackEvent.userId && existing.visitors === 0) existing.visitors = 1;
+      if (trackEvent.sessionId && existing.sessions === 0) existing.sessions = 1;
+    } else {
+      countries.push({
+        country: trackEvent.country,
+        visitors: trackEvent.userId ? 1 : 0,
+        sessions: trackEvent.sessionId ? 1 : 0,
+        events: 1,
+      });
+    }
+    next.countries = sortCountries(countries).slice(0, 12);
+  }
+
+  next.eventsPerMinute = Math.max(next.eventsPerMinute, next.topEvents.reduce((sum, row) => sum + row.count, 0));
+  return next;
+}
+
+export function createSnoozeExpiry(minutes = DEFAULT_SNOOZE_MINUTES, now = Date.now()) {
+  return now + clampNumber(minutes, 1, 240, DEFAULT_SNOOZE_MINUTES) * 60_000;
+}
+
+export function isSnoozed(assetKey, snoozes = {}, now = Date.now()) {
+  const snoozeUntil = Number(snoozes[assetKey] || 0);
+  return Number.isFinite(snoozeUntil) && snoozeUntil > now;
+}
+
+export function validateEnabledMappings(mappings = []) {
+  const enabled = mappings.filter((mapping) => mapping.enabled !== false);
+  const warnings = [];
+  const errors = [];
+
+  if (enabled.length > MAX_ENABLED_ASSET_STREAMS) {
+    errors.push(`Enable at most ${MAX_ENABLED_ASSET_STREAMS} assets at once because Agent Analytics live streams are capped per account.`);
+  }
+
+  const byProject = new Map();
+  for (const mapping of enabled) {
+    if (!mapping.agentAnalyticsProject) {
+      errors.push(`Asset "${mapping.label}" is missing an Agent Analytics project.`);
+      continue;
+    }
+    const count = byProject.get(mapping.agentAnalyticsProject) || 0;
+    byProject.set(mapping.agentAnalyticsProject, count + 1);
+  }
+
+  for (const [project, count] of byProject.entries()) {
+    if (count > 1) {
+      warnings.push(`Project "${project}" is mapped multiple times. /live snapshots are project-scoped, so duplicate mappings can mirror the same activity.`);
+    }
+  }
+
+  return { warnings, errors };
+}
+
+export function buildCompanyLiveState({ settings, auth, assets, snoozes = {}, now = Date.now() }) {
+  const liveState = createEmptyCompanyLiveState();
+  const visibleAssets = [];
+  const topPagesMap = new Map();
+  const topEventsMap = new Map();
+  const countryMap = new Map();
+  const recentEvents = [];
+
+  let activeVisitors = 0;
+  let activeSessions = 0;
+  let eventsPerMinute = 0;
+
+  for (const asset of assets) {
+    if (isSnoozed(asset.assetKey, snoozes, now)) continue;
+    visibleAssets.push(asset);
+    activeVisitors += asset.activeVisitors || 0;
+    activeSessions += asset.activeSessions || 0;
+    eventsPerMinute += asset.eventsPerMinute || 0;
+
+    for (const page of asset.topPages || []) {
+      const current = topPagesMap.get(page.path) || 0;
+      topPagesMap.set(page.path, current + (page.visitors || 0));
+    }
+
+    for (const event of asset.topEvents || []) {
+      const current = topEventsMap.get(event.event) || 0;
+      topEventsMap.set(event.event, current + (event.count || 0));
+    }
+
+    for (const country of asset.countries || []) {
+      const current = countryMap.get(country.country) || { country: country.country, visitors: 0, sessions: 0, events: 0 };
+      current.visitors += country.visitors || 0;
+      current.sessions += country.sessions || 0;
+      current.events += country.events || 0;
+      countryMap.set(country.country, current);
+    }
+
+    for (const event of asset.recentEvents || []) {
+      recentEvents.push(event);
+    }
+  }
+
+  const warnings = validateEnabledMappings(settings.monitoredAssets).warnings;
+  const countries = sortCountries(Array.from(countryMap.values())).slice(0, 12);
+  const sortedAssets = [...visibleAssets].sort((left, right) => {
+    if ((right.eventsPerMinute || 0) !== (left.eventsPerMinute || 0)) return (right.eventsPerMinute || 0) - (left.eventsPerMinute || 0);
+    if ((right.activeVisitors || 0) !== (left.activeVisitors || 0)) return (right.activeVisitors || 0) - (left.activeVisitors || 0);
+    return String(left.label || '').localeCompare(String(right.label || ''));
+  });
+
+  liveState.generatedAt = now;
+  liveState.pluginEnabled = settings.pluginEnabled !== false;
+  liveState.authStatus = auth.status;
+  liveState.tier = auth.tier;
+  liveState.account = auth.accountSummary;
+  liveState.connection = {
+    status: auth.status === 'connected' ? 'live' : auth.status === 'error' ? 'error' : 'idle',
+    label: auth.status === 'connected' ? 'Connected' : auth.status === 'error' ? 'Attention needed' : 'Not connected',
+    detail: auth.status === 'connected'
+      ? `Showing ${sortedAssets.length} visible asset${sortedAssets.length === 1 ? '' : 's'} from the current live window.`
+      : auth.lastError || 'Connect Agent Analytics from settings to start the live feed.',
+  };
+  liveState.metrics = {
+    activeVisitors,
+    activeSessions,
+    eventsPerMinute,
+    assetsConfigured: settings.monitoredAssets.length,
+    assetsVisible: sortedAssets.length,
+    countriesTracked: countries.length,
+  };
+  liveState.world = {
+    hotCountry: sortedAssets.find((asset) => asset.lastHotCountry)?.lastHotCountry || countries[0]?.country || null,
+    countries,
+  };
+  liveState.evidence = {
+    topPages: sortCountRows(
+      Array.from(topPagesMap.entries()).map(([path, visitors]) => ({ path, visitors })),
+      'visitors'
+    ).slice(0, 10),
+    topEvents: sortCountRows(
+      Array.from(topEventsMap.entries()).map(([event, count]) => ({ event, count })),
+      'count'
+    ).slice(0, 10),
+    recentEvents: recentEvents.sort((left, right) => (right.timestamp || 0) - (left.timestamp || 0)).slice(0, 20),
+    countries,
+  };
+  liveState.assets = sortedAssets;
+  liveState.snoozedAssets = Object.keys(snoozes).filter((assetKey) => isSnoozed(assetKey, snoozes, now));
+  liveState.warnings = warnings;
+  return liveState;
+}
+
+export function deriveWidgetSummary(companyLiveState) {
+  return {
+    connection: companyLiveState.connection,
+    tier: companyLiveState.tier,
+    metrics: companyLiveState.metrics,
+    topAsset: companyLiveState.assets[0] || null,
+    hotCountry: companyLiveState.world.hotCountry,
+    warnings: companyLiveState.warnings,
+  };
+}
+

package/src/ui/App.jsx

@@ -0,0 +1,87 @@
+import { startTransition, useEffect, useState } from 'react';
+import { ACTION_KEYS, DATA_KEYS, LIVE_STREAM_CHANNEL } from '../shared/constants.js';
+import { demoLiveState } from './demo-data.js';
+import { useHostContext, usePluginAction, usePluginData, usePluginStream } from './paperclip-bridge.js';
+import { PageSurface } from './surfaces/PageSurface.jsx';
+import { SettingsSurface } from './surfaces/SettingsSurface.jsx';
+import { WidgetSurface } from './surfaces/WidgetSurface.jsx';
+
+function SurfaceFrame({ surface, children }) {
+  return (
+    <main className={`aa-app aa-surface-${surface}`}>
+      {children}
+    </main>
+  );
+}
+
+export function App() {
+  const host = useHostContext();
+  const surface = host.surface || 'page';
+  const companyId = host.companyId;
+
+  const livePage = usePluginData(DATA_KEYS.livePageLoad, { companyId }, { enabled: surface === 'page' });
+  const liveWidget = usePluginData(DATA_KEYS.liveWidgetLoad, { companyId }, { enabled: surface === 'dashboardWidget' });
+  const settings = usePluginData(DATA_KEYS.settingsLoad, { companyId }, { enabled: surface === 'settingsPage' });
+
+  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);
+  const snoozeAsset = usePluginAction(ACTION_KEYS.assetSnooze);
+  const unsnoozeAsset = usePluginAction(ACTION_KEYS.assetUnsnooze);
+
+  const [streamState, setStreamState] = useState(demoLiveState);
+
+  useEffect(() => {
+    if (surface === 'page' && livePage.data) setStreamState(livePage.data);
+  }, [surface, livePage.data]);
+
+  usePluginStream(LIVE_STREAM_CHANNEL, {
+    companyId,
+    onEvent: (payload) => {
+      startTransition(() => {
+        setStreamState(payload);
+      });
+    },
+  });
+
+  if (surface === 'dashboardWidget') {
+    return (
+      <SurfaceFrame surface={surface}>
+        <WidgetSurface widget={liveWidget.data || liveWidget.data || { connection: { status: 'idle', label: 'Idle' }, metrics: {}, warnings: [] }} fullPageHref="?surface=page" />
+      </SurfaceFrame>
+    );
+  }
+
+  if (surface === 'settingsPage') {
+    return (
+      <SurfaceFrame surface={surface}>
+        <SettingsSurface
+          settingsData={settings.data}
+          onStartAuth={() => authStart.run({ companyId })}
+          onCompleteAuth={(authRequestId, exchangeCode) => authComplete.run({ companyId, authRequestId, exchangeCode })}
+          onReconnect={() => authReconnect.run({ companyId })}
+          onDisconnect={() => authDisconnect.run({ companyId })}
+          onSaveSettings={(nextSettings) => settingsSave.run({ companyId, settings: nextSettings })}
+          onUpsertMapping={(mapping) => mappingUpsert.run({ companyId, mapping })}
+          onRemoveMapping={(assetKey) => mappingRemove.run({ companyId, assetKey })}
+        />
+      </SurfaceFrame>
+    );
+  }
+
+  return (
+    <SurfaceFrame surface={surface}>
+      <PageSurface
+        liveState={streamState}
+        basePath={host.basePath}
+        onSnooze={(assetKey) => snoozeAsset.run({ companyId, assetKey })}
+        onUnsnooze={(assetKey) => unsnoozeAsset.run({ companyId, assetKey })}
+      />
+    </SurfaceFrame>
+  );
+}
+

package/src/ui/demo-data.js

@@ -0,0 +1,238 @@
+import {
+  DEFAULT_BASE_URL,
+  DEFAULT_LIVE_WINDOW_SECONDS,
+  DEFAULT_POLL_INTERVAL_SECONDS,
+} from '../shared/constants.js';
+
+const now = Date.now();
+
+export const demoLiveState = {
+  type: 'live_state',
+  generatedAt: now,
+  pluginEnabled: true,
+  authStatus: 'connected',
+  tier: 'pro',
+  account: {
+    id: 'acct_demo',
+    email: 'operator@example.com',
+    githubLogin: 'operator',
+    googleName: 'Operator Demo',
+  },
+  connection: {
+    status: 'live',
+    label: 'Connected',
+    detail: 'Showing 3 visible assets from the current live window.',
+  },
+  metrics: {
+    activeVisitors: 29,
+    activeSessions: 34,
+    eventsPerMinute: 71,
+    assetsConfigured: 3,
+    assetsVisible: 3,
+    countriesTracked: 5,
+  },
+  world: {
+    hotCountry: 'US',
+    countries: [
+      { country: 'US', visitors: 12, sessions: 13, events: 31 },
+      { country: 'DE', visitors: 5, sessions: 6, events: 13 },
+      { country: 'GB', visitors: 4, sessions: 5, events: 11 },
+      { country: 'IN', visitors: 4, sessions: 5, events: 10 },
+      { country: 'IL', visitors: 4, sessions: 5, events: 6 },
+    ],
+  },
+  evidence: {
+    topPages: [
+      { path: '/pricing', visitors: 12 },
+      { path: '/docs/installation', visitors: 8 },
+      { path: '/signup', visitors: 5 },
+    ],
+    topEvents: [
+      { event: 'page_view', count: 44 },
+      { event: 'signup', count: 12 },
+      { event: 'api_key_created', count: 5 },
+    ],
+    recentEvents: [
+      {
+        id: 'evt_1',
+        event: 'signup',
+        path: '/signup',
+        country: 'US',
+        userId: 'anon_a12',
+        sessionId: 'sess_1',
+        timestamp: now - 15_000,
+        assetKey: 'marketing-site',
+        assetLabel: 'Marketing Site',
+      },
+      {
+        id: 'evt_2',
+        event: 'page_view',
+        path: '/docs/installation',
+        country: 'DE',
+        userId: 'anon_a18',
+        sessionId: 'sess_2',
+        timestamp: now - 32_000,
+        assetKey: 'docs',
+        assetLabel: 'Docs',
+      },
+      {
+        id: 'evt_3',
+        event: 'api_key_created',
+        path: '/settings/api',
+        country: 'GB',
+        userId: 'anon_a20',
+        sessionId: 'sess_3',
+        timestamp: now - 44_000,
+        assetKey: 'dashboard-app',
+        assetLabel: 'Dashboard App',
+      },
+    ],
+    countries: [
+      { country: 'US', visitors: 12, sessions: 13, events: 31 },
+      { country: 'DE', visitors: 5, sessions: 6, events: 13 },
+      { country: 'GB', visitors: 4, sessions: 5, events: 11 },
+    ],
+  },
+  assets: [
+    {
+      assetKey: 'marketing-site',
+      label: 'Marketing Site',
+      kind: 'website',
+      paperclipProjectId: 'proj_marketing',
+      agentAnalyticsProject: 'agentanalytics-sh',
+      primaryHostname: 'agentanalytics.sh',
+      enabled: true,
+      status: 'live',
+      lastUpdatedAt: now,
+      lastSnapshotAt: now - 15_000,
+      lastPolledAt: now - 9_000,
+      lastHotCountry: 'US',
+      activeVisitors: 12,
+      activeSessions: 14,
+      eventsPerMinute: 30,
+      topPages: [
+        { path: '/pricing', visitors: 8 },
+        { path: '/', visitors: 4 },
+      ],
+      topEvents: [
+        { event: 'page_view', count: 21 },
+        { event: 'signup', count: 6 },
+      ],
+      countries: [
+        { country: 'US', visitors: 6, sessions: 7, events: 15 },
+        { country: 'IN', visitors: 3, sessions: 4, events: 7 },
+      ],
+      recentEvents: [],
+      warnings: [],
+      errors: [],
+    },
+    {
+      assetKey: 'docs',
+      label: 'Docs',
+      kind: 'docs',
+      paperclipProjectId: 'proj_docs',
+      agentAnalyticsProject: 'docs-agentanalytics-sh',
+      primaryHostname: 'docs.agentanalytics.sh',
+      enabled: true,
+      status: 'live',
+      lastUpdatedAt: now,
+      lastSnapshotAt: now - 12_000,
+      lastPolledAt: now - 8_000,
+      lastHotCountry: 'DE',
+      activeVisitors: 9,
+      activeSessions: 10,
+      eventsPerMinute: 24,
+      topPages: [
+        { path: '/guides/paperclip/', visitors: 7 },
+        { path: '/installation/claude-code/', visitors: 4 },
+      ],
+      topEvents: [
+        { event: 'page_view', count: 17 },
+        { event: 'copy_command', count: 3 },
+      ],
+      countries: [
+        { country: 'DE', visitors: 4, sessions: 4, events: 8 },
+        { country: 'GB', visitors: 2, sessions: 3, events: 6 },
+      ],
+      recentEvents: [],
+      warnings: [],
+      errors: [],
+    },
+    {
+      assetKey: 'dashboard-app',
+      label: 'Dashboard App',
+      kind: 'app',
+      paperclipProjectId: 'proj_dashboard',
+      agentAnalyticsProject: 'app-agentanalytics-sh',
+      primaryHostname: 'app.agentanalytics.sh',
+      enabled: true,
+      status: 'live',
+      lastUpdatedAt: now,
+      lastSnapshotAt: now - 7_000,
+      lastPolledAt: now - 4_000,
+      lastHotCountry: 'GB',
+      activeVisitors: 8,
+      activeSessions: 10,
+      eventsPerMinute: 17,
+      topPages: [
+        { path: '/settings/api', visitors: 3 },
+        { path: '/projects', visitors: 2 },
+      ],
+      topEvents: [
+        { event: 'api_key_created', count: 5 },
+        { event: 'project_created', count: 2 },
+      ],
+      countries: [
+        { country: 'GB', visitors: 2, sessions: 2, events: 5 },
+        { country: 'IL', visitors: 3, sessions: 3, events: 4 },
+      ],
+      recentEvents: [],
+      warnings: [],
+      errors: [],
+    },
+  ],
+  snoozedAssets: [],
+  warnings: [],
+};
+
+export const demoSettingsData = {
+  settings: {
+    agentAnalyticsBaseUrl: DEFAULT_BASE_URL,
+    liveWindowSeconds: DEFAULT_LIVE_WINDOW_SECONDS,
+    pollIntervalSeconds: DEFAULT_POLL_INTERVAL_SECONDS,
+    pluginEnabled: true,
+    monitoredAssets: demoLiveState.assets.map((asset) => ({
+      assetKey: asset.assetKey,
+      label: asset.label,
+      kind: asset.kind,
+      paperclipProjectId: asset.paperclipProjectId,
+      agentAnalyticsProject: asset.agentAnalyticsProject,
+      primaryHostname: asset.primaryHostname,
+      allowedOrigins: [],
+      enabled: asset.enabled,
+    })),
+  },
+  auth: {
+    status: 'connected',
+    mode: 'agent_session',
+    tier: 'pro',
+    accountSummary: demoLiveState.account,
+    accessExpiresAt: now + 3_600_000,
+    refreshExpiresAt: now + 7_200_000,
+    pendingAuthRequest: null,
+    lastValidatedAt: now,
+    lastError: null,
+    connected: true,
+  },
+  discoveredProjects: [
+    { id: 'aa_marketing', name: 'agentanalytics-sh', allowed_origins: '*' },
+    { id: 'aa_docs', name: 'docs-agentanalytics-sh', allowed_origins: '*' },
+    { id: 'aa_app', name: 'app-agentanalytics-sh', allowed_origins: '*' },
+  ],
+  validation: {
+    warnings: [],
+    errors: [],
+  },
+  projectListError: null,
+};
+