@columenlabs/lumen-ui 0.1.79 → 0.1.81

package/dist/api-fetch.js

@@ -2,10 +2,12 @@
  * One JSON fetch for the assistant, workspaces and joins. A failure throws `ApiError` with the
  * method, address, status and the server's `error` and `code`, so a caller shows what failed and
  * Workers Logs keep it: a server fault (5xx) or a network failure is reported to
- * `/api/client-error` with `where` naming the caller. A 4xx is the server saying why it refused,
+ * `/api/client-error` with `where` naming the caller. Every failure is also a `fetch_fail`
+ * telemetry point (its route with ids folded, status and request id) once `useLumenTelemetry` runs. A 4xx is the server saying why it refused,
  * shown to the person and not logged as a fault.
  */
 import { reportError } from './route-error.js';
+import { apiRoute, reportFailedFetch } from './telemetry.js';
 export class ApiError extends Error {
     method;
     url;
@@ -39,6 +41,7 @@ export async function apiJson(url, init = {}, where = 'api') {
             throw err;
         const e = new ApiError(`Couldn't reach the server (${method} ${url})`, method, url, 0);
         reportError(e, 'shown', where);
+        reportFailedFetch(apiRoute(url), 0);
         throw e;
     }
     const text = await res.text();
@@ -54,6 +57,7 @@ export async function apiJson(url, init = {}, where = 'api') {
         const e = new ApiError(b.error ?? `${method} ${url} answered ${res.status}`, method, url, res.status, b.code);
         if (res.status >= 500)
             reportError(e, 'shown', where);
+        reportFailedFetch(apiRoute(url), res.status, res.headers.get('x-request-id'));
         throw e;
     }
     return body;

package/dist/assistant/index.d.ts

@@ -1,5 +1,5 @@
 export { type AssistantAdapter, assistantClient } from './client.js';
 export { type AssistantCommand, type ComposerExtra, LumenAssistant, type LumenAssistantProps, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
-export { assistantSettingsSections } from './settings.js';
+export { assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { type AssistantSource, type AssistantSourceItem, type ComposeRequest, type PageSelection, composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';
 export { type AssistantChatState, type LiveItem, applyEvent, useAssistantChat, } from './use-assistant-chat.js';

package/dist/assistant/index.js

@@ -3,6 +3,6 @@
 // `@columenlabs/lumen-ui-types/assistant`.
 export { assistantClient } from './client.js';
 export { LumenAssistant, LumenComposer, assistantStatusKey, useAssistantStatus, useLumenAssistantDock, } from './lumen-assistant.js';
-export { assistantSettingsSections } from './settings.js';
+export { assistantAdminSections, assistantSettingsSections } from './settings.js';
 export { composeAssistant, selectionRef, useAssistantSource, usePageSelection, useShownAssistantSources, } from './sources.js';
 export { applyEvent, useAssistantChat, } from './use-assistant-chat.js';

package/dist/assistant/settings.d.ts

@@ -1,5 +1,12 @@
 import type { SettingsSectionDef } from '../settings.js';
 import type { AssistantAdapter } from './client.js';
+/**
+ * The admin's section: the app's shared keys and each person's monthly allowance on them. Put it
+ * where the app keeps its admin settings, shown only to admins.
+ */
+export declare function assistantAdminSections({ client, }: {
+    client: AssistantAdapter;
+}): SettingsSectionDef[];
 /**
  * The assistant's Settings sections: the assistant, then Model providers, Models, Tools, Web and
  * Spend under it. Pass them to LumenShell's `shared` (or an app's own `settings`).

package/dist/assistant/settings.js

@@ -173,28 +173,31 @@ function ChatgptSignin({ client, p }) {
 function SigninPaste({ id, redirect, pasted, setPasted, issues, busy, finish, }) {
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: id, children: _jsx(InfoLabel, { info: `The sign-in ends on ${redirect}, a page that does not load. That is expected: copy the whole address from that tab's address bar.`, children: "Paste the address the sign-in ended on" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: id, autoComplete: "off", placeholder: `${redirect}?code=…`, className: "font-code text-xs", value: pasted, onChange: (e) => setPasted(e.target.value) }), _jsx(SaveButton, { issues: issues, busy: busy, disabled: !pasted.trim(), label: "Finish", onSave: finish })] })] }));
 }
-/** One provider, collapsed to a row: where to make a key (a new tab), the app's key and the person's. */
-function ProviderKeys({ client, p, admin, }) {
+const ready = (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Ready"] }));
+const notSet = _jsx(Badge, { variant: "outline", children: "Not set" });
+/** One provider, collapsed to a row: the person's own key (or their ChatGPT plan sign-in). */
+function OwnProviderKey({ client, p }) {
     const { apply, refresh } = useApply(client);
-    const appOn = p.app.set || !!p.app.from_env;
     const plan = p.own.via === 'chatgpt';
-    const meta = [
-        appOn ? 'Shared key set' : 'No shared key',
-        plan ? 'your ChatGPT plan' : p.own.set ? 'your own key' : null,
-    ]
-        .filter(Boolean)
-        .join(' · ');
-    const failed = [p.app, p.own].some((k) => k.set && k.test && !k.test.ok);
-    const badge = failed ? (_jsx(TestBadge, { test: { ok: false } })) : appOn || p.own.set ? (_jsxs(Badge, { variant: "outline", className: "text-gain", children: [_jsx(CheckIcon, {}), "Ready"] })) : (_jsx(Badge, { variant: "outline", children: "Not set" }));
-    const ownKey = (_jsx(KeyBlock, { label: p.signin && !p.own.set ? 'Or your own API key' : 'Your own key', prefix: p.prefix, provider: p.label, state: p.own, canEdit: true, keysUrl: p.keys_url, onSave: (k) => apply(`own:${p.id}`, () => client.ownKey(p.id, k), 'Key saved'), onRemove: () => apply(`own:${p.id}`, () => client.ownKey(p.id, null), 'Key removed'), onTest: () => client.testOwnKey(p.id).finally(refresh) }));
-    return (_jsx(LumenExpandRow, { id: p.id, name: p.label, meta: meta, badge: badge, children: _jsxs("div", { className: "flex flex-col", children: [_jsx(KeyBlock, { label: "Shared key", info: "An admin sets it once; everyone uses it, within each person's monthly cap.", prefix: p.prefix, provider: p.label, state: p.app, canEdit: admin, keysUrl: p.keys_url, onSave: (k) => apply(`app:${p.id}`, () => client.appKey(p.id, k), 'Key saved'), onRemove: () => apply(`app:${p.id}`, () => client.appKey(p.id, null), 'Key removed'), onTest: () => client.testAppKey(p.id).finally(refresh) }), p.signin === 'chatgpt' && (!p.own.set || plan) && _jsx(ChatgptSignin, { client: client, p: p }), !plan && ownKey] }) }));
+    const badge = p.own.set && p.own.test && !p.own.test.ok ? (_jsx(TestBadge, { test: { ok: false } })) : p.own.set ? (ready) : (notSet);
+    return (_jsx(LumenExpandRow, { id: p.id, name: p.label, meta: plan ? 'Your ChatGPT plan' : p.own.set ? 'Your key' : 'No key', badge: badge, children: _jsxs("div", { className: "flex flex-col", children: [p.signin === 'chatgpt' && (!p.own.set || plan) && _jsx(ChatgptSignin, { client: client, p: p }), !plan && (_jsx(KeyBlock, { label: p.signin && !p.own.set ? 'Or your API key' : 'Your key', prefix: p.prefix, provider: p.label, state: p.own, canEdit: true, keysUrl: p.keys_url, onSave: (k) => apply(`own:${p.id}`, () => client.ownKey(p.id, k), 'Key saved'), onRemove: () => apply(`own:${p.id}`, () => client.ownKey(p.id, null), 'Key removed'), onTest: () => client.testOwnKey(p.id).finally(refresh) }))] }) }));
 }
+/** A person's own keys, one row a provider, and what they may spend on them. */
 function Providers({ client }) {
     const { apply } = useApply(client);
-    return (_jsx(WithStatus, { client: client, children: (s) => {
-            const ownSet = s.providers.some((p) => p.own.set);
-            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(ProviderKeys, { client: client, p: p, admin: s.admin }, p.id))) }), s.admin && (_jsx(Row, { label: "Each person may spend", info: "On the shared keys, every provider together.", children: _jsx(CapInput, { label: "Cap per person", value: s.caps.app, onSave: (n) => void apply('cap', () => client.appCap(n)) }) })), ownSet && (_jsx(Row, { label: "Your keys may spend", info: "On your own keys, every provider together.", children: _jsx(CapInput, { label: "Your monthly cap", value: s.caps.own, onSave: (n) => void apply('own', () => client.ownCap(n)) }) })), _jsx(Row, { label: "Pay with first", info: "When it reaches its cap this month, or has no key for the tier's provider, the other pays.", children: _jsxs(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: s.pay, "aria-label": "Pay with", onValueChange: (v) => v && void apply('pay', () => client.settings({ pay: v })), children: [_jsx(ToggleGroupItem, { value: "app", children: "Shared keys" }), _jsx(ToggleGroupItem, { value: "own", disabled: !ownSet, children: "Your keys" })] }) })] }));
-        } }));
+    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), s.providers.some((p) => p.own.set) && (_jsx(Row, { label: "Your keys may spend", info: "On your keys, every provider together.", children: _jsx(CapInput, { label: "Your monthly cap", value: s.caps.own, onSave: (n) => void apply('own', () => client.ownCap(n)) }) }))] })) }));
+}
+/** One provider's shared key, which an admin sets for everyone. */
+function SharedProviderKey({ client, p }) {
+    const { apply, refresh } = useApply(client);
+    const on = p.app.set || !!p.app.from_env;
+    const badge = p.app.set && p.app.test && !p.app.test.ok ? (_jsx(TestBadge, { test: { ok: false } })) : on ? (ready) : (notSet);
+    return (_jsx(LumenExpandRow, { id: p.id, name: p.label, meta: p.app.from_env ? 'From the server' : on ? 'Shared key' : 'No key', badge: badge, children: _jsx(KeyBlock, { label: "Shared key", info: "Everyone's answers run on it, within the monthly allowance below.", prefix: p.prefix, provider: p.label, state: p.app, canEdit: true, keysUrl: p.keys_url, onSave: (k) => apply(`app:${p.id}`, () => client.appKey(p.id, k), 'Key saved'), onRemove: () => apply(`app:${p.id}`, () => client.appKey(p.id, null), 'Key removed'), onTest: () => client.testAppKey(p.id).finally(refresh) }) }));
+}
+/** Admins only: the app's shared keys and what each person may spend on them. */
+function SharedKeys({ client }) {
+    const { apply } = useApply(client);
+    return (_jsx(WithStatus, { client: client, children: (s) => s.admin ? (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: s.providers.map((p) => (_jsx(SharedProviderKey, { client: client, p: p }, p.id))) }), _jsx(Row, { label: "Each person may spend", info: "A month on the shared keys, every provider together. Past it, a person's own key pays.", children: _jsx(CapInput, { label: "Allowance per person", value: s.caps.app, onSave: (n) => void apply('cap', () => client.appCap(n)) }) })] })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Only an admin can change these." })) }));
 }
 // ---------------------------------------------------------------- models
 function Models({ client }) {
@@ -261,6 +264,21 @@ function Spend({ client }) {
                                         ` · ${usd(sp.cap)} cap on ${sp.payer === 'app' ? 'the app key' : 'your key'}`] })] }), sp.rows.length ? (_jsx("div", { className: "flex flex-col text-sm", children: sp.rows.map((r) => (_jsxs("div", { className: "flex items-center gap-2 border-b py-2 last:border-b-0", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: r.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: r.payer === 'app' ? 'Shared key' : 'Your key' }), _jsxs("span", { className: "w-16 text-right text-muted-foreground text-xs tabular-nums", children: [r.calls, " calls"] }), _jsx("span", { className: "w-16 text-right tabular-nums", children: usd(r.usd) })] }, `${r.label}:${r.payer}`))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing spent this month." }))] }));
         } }));
 }
+/**
+ * The admin's section: the app's shared keys and each person's monthly allowance on them. Put it
+ * where the app keeps its admin settings, shown only to admins.
+ */
+export function assistantAdminSections({ client, }) {
+    return [
+        {
+            id: 'assistant-shared-keys',
+            title: 'Shared model keys',
+            icon: KeyRoundIcon,
+            description: "Keys everyone's answers run on, and the allowance",
+            content: _jsx(SharedKeys, { client: client }),
+        },
+    ];
+}
 /**
  * The assistant's Settings sections: the assistant, then Model providers, Models, Tools, Web and
  * Spend under it. Pass them to LumenShell's `shared` (or an app's own `settings`).
@@ -279,7 +297,7 @@ export function assistantSettingsSections({ client, name, web = true, }) {
             title: 'Model providers',
             icon: KeyRoundIcon,
             sub: true,
-            description: 'Keys for each provider, and who pays',
+            description: 'Your own key for each provider',
             content: _jsx(Providers, { client: client }),
         },
         {

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestRe
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';
+export { type ClientPoint, type ClientPointKind, type LumenTelemetryOptions, apiRoute, reportClient, reportClientError, reportFailedFetch, stackFingerprint, useLumenTelemetry, } from './telemetry.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';
 export { type LumenLoad, LumenError, LumenLazy, LumenLoadFooter, LumenLoadTime, LumenProgress, LumenRefresh, LumenSkeleton, LumenStates, marketTrades, useLumenLoad, useLumenSource, useLiveLoad, } from './lumen-source.js';
 export { LumenBoundary } from './lumen-boundary.js';

package/dist/index.js

@@ -59,6 +59,7 @@ export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, err
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
 export { LumenPager } from './pager.js';
 export { createDeskQueryClient } from './query-client.js';
+export { apiRoute, reportClient, reportClientError, reportFailedFetch, stackFingerprint, useLumenTelemetry, } from './telemetry.js';
 export { refreshHeaders, withRefreshToken } from './refresh.js';
 export { LumenError, LumenLazy, LumenLoadFooter, LumenLoadTime, LumenProgress, LumenRefresh, LumenSkeleton, LumenStates, marketTrades, useLumenLoad, useLumenSource, useLiveLoad, } from './lumen-source.js';
 export { LumenBoundary } from './lumen-boundary.js';

package/dist/route-error.js

@@ -16,6 +16,7 @@ import { useRouter } from '@tanstack/react-router';
 import { ChevronRight, RefreshCw, RotateCcw, TriangleAlert } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
+import { reportClientError } from './telemetry.js';
 import { Button } from './ui/button.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from './ui/empty.js';
@@ -166,6 +167,7 @@ export function reportError(error, outcome, where) {
     if (Date.now() - (sent.get(key) ?? 0) < GAP_MS)
         return;
     sent.set(key, Date.now());
+    reportClientError(err);
     const body = JSON.stringify({
         message: err.message.slice(0, 500),
         stack: (err.stack ?? '').slice(0, 2000),

package/dist/telemetry.d.ts

@@ -0,0 +1,40 @@
+export type ClientPointKind = 'view' | 'error' | 'fetch_fail' | 'vital';
+export interface ClientPoint {
+    kind: ClientPointKind;
+    /** The screen's route template (`/connections/$id`), never the address with its ids. */
+    route: string;
+    /** An error's class, an API route, or a vital's name (LCP, INP, CLS). */
+    name?: string;
+    /** A hash of the error's stack frames. */
+    fingerprint?: string;
+    /** The `X-Request-Id` of the failed answer, to find its server side. */
+    requestId?: string;
+    /** ms, or a vital's score. */
+    value?: number;
+    status?: number;
+    device?: 'phone' | 'desktop';
+}
+/** The stack's frames only (a message can carry anything), with each file's query dropped. */
+export declare function stackFingerprint(error: unknown): string;
+/** An API address as a route: no host or query, and id-like segments as `:id`. */
+export declare function apiRoute(url: string): string;
+/** Queues one point (nothing is kept until `useLumenTelemetry` has named the app); the batch goes out every 15 s, at 50 points, or when the tab is hidden. */
+export declare function reportClient(p: Omit<ClientPoint, 'device' | 'route'> & {
+    route?: string;
+}): void;
+/** A request that failed: its API route template, status (0 when it never answered) and id. */
+export declare function reportFailedFetch(apiRoute: string, status: number, requestId?: string | null): void;
+/** An error the page caught or didn't: its class and stack hash only. */
+export declare function reportClientError(error: unknown): void;
+export interface LumenTelemetryOptions {
+    /** The app's name in the points (`console`, `admin`). */
+    app: string;
+    /** The current screen's route template, from the app's router. */
+    route: string;
+    /** The build or deploy the page runs. */
+    version?: string;
+    /** Where batches go; `/api/t` by default. */
+    endpoint?: string;
+}
+/** Mount once at the app's root: every screen change is a view, and errors and vitals follow. */
+export declare function useLumenTelemetry(opts: LumenTelemetryOptions): void;

package/dist/telemetry.js

@@ -0,0 +1,135 @@
+/**
+ * The app's own telemetry from the browser: screens opened, uncaught errors, failed requests and
+ * Web Vitals, sent in batches to the app's Worker (by default `POST /api/t`), which checks each
+ * point and writes it with `meterClientBatch` from `@columenlabs/lumen-ops/client`.
+ *
+ * It is first party and keeps nothing in the browser: no cookie, no storage, no third party. A
+ * point holds a route template, an error's class and a hash of its stack, a status and a number.
+ * Never an error's message, a URL's query, page text or anything typed.
+ */
+import { useEffect } from 'react';
+import { onCLS, onINP, onLCP } from 'web-vitals';
+const MAX_BATCH = 50;
+const FLUSH_MS = 15_000;
+const CODE = /^[A-Za-z0-9_.:/$-]{1,64}$/;
+let endpoint = '/api/t';
+let app = '';
+let version = '';
+let route = '';
+const queue = [];
+let started = false;
+const fnv = (s) => {
+    let h = 2166136261;
+    for (let i = 0; i < s.length; i++)
+        h = Math.imul(h ^ s.charCodeAt(i), 16777619) >>> 0;
+    return h.toString(16).padStart(8, '0');
+};
+/** The stack's frames only (a message can carry anything), with each file's query dropped. */
+export function stackFingerprint(error) {
+    const stack = error instanceof Error ? (error.stack ?? '') : '';
+    const frames = stack
+        .split('\n')
+        .filter((l) => /^\s*at\s|@/.test(l))
+        .slice(0, 8)
+        .map((l) => l.replace(/\?[^:)\s]*/g, '').trim());
+    return fnv(frames.join('\n'));
+}
+const device = () => typeof window !== 'undefined' && window.matchMedia?.('(max-width: 767px)').matches
+    ? 'phone'
+    : 'desktop';
+const code = (s) => (s && CODE.test(s) ? s : undefined);
+/** An API address as a route: no host or query, and id-like segments as `:id`. */
+export function apiRoute(url) {
+    let path = url;
+    try {
+        path = new URL(url, 'http://x').pathname;
+    }
+    catch { }
+    return path
+        .split('/')
+        .map((seg) => /^[a-z]{1,4}_[A-Za-z0-9]+$/.test(seg) ||
+        seg.length >= 20 ||
+        (seg.length >= 8 && /\d/.test(seg)) ||
+        /[^A-Za-z0-9_.-]/.test(seg)
+        ? ':id'
+        : seg)
+        .join('/')
+        .slice(0, 64);
+}
+function flush() {
+    if (!app || queue.length === 0)
+        return;
+    const points = queue.splice(0, MAX_BATCH);
+    const body = JSON.stringify({ app, version: code(version), points });
+    try {
+        const sent = navigator.sendBeacon?.(endpoint, new Blob([body], { type: 'application/json' }));
+        if (!sent)
+            fetch(endpoint, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body,
+                keepalive: true,
+            }).catch(() => { });
+    }
+    catch {
+        // Telemetry must never break the page.
+    }
+    if (queue.length)
+        flush();
+}
+/** Queues one point (nothing is kept until `useLumenTelemetry` has named the app); the batch goes out every 15 s, at 50 points, or when the tab is hidden. */
+export function reportClient(p) {
+    if (!started)
+        return;
+    queue.push({
+        ...p,
+        route: p.route ?? route,
+        name: code(p.name),
+        requestId: code(p.requestId),
+        device: device(),
+    });
+    if (queue.length >= MAX_BATCH)
+        flush();
+}
+/** A request that failed: its API route template, status (0 when it never answered) and id. */
+export function reportFailedFetch(apiRoute, status, requestId) {
+    reportClient({ kind: 'fetch_fail', name: apiRoute, status, requestId: requestId ?? undefined });
+}
+/** An error the page caught or didn't: its class and stack hash only. */
+export function reportClientError(error) {
+    reportClient({
+        kind: 'error',
+        name: error instanceof Error ? error.name : 'Error',
+        fingerprint: stackFingerprint(error),
+    });
+}
+const vital = (m) => reportClient({ kind: 'vital', name: m.name, value: m.value });
+function start() {
+    if (started || typeof window === 'undefined')
+        return;
+    started = true;
+    window.addEventListener('error', (e) => reportClientError(e.error ?? new Error('script')));
+    window.addEventListener('unhandledrejection', (e) => reportClientError(e.reason));
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden')
+            flush();
+    });
+    window.addEventListener('pagehide', flush);
+    setInterval(flush, FLUSH_MS);
+    onLCP(vital);
+    onINP(vital);
+    onCLS(vital);
+}
+/** Mount once at the app's root: every screen change is a view, and errors and vitals follow. */
+export function useLumenTelemetry(opts) {
+    useEffect(() => {
+        app = opts.app;
+        version = opts.version ?? '';
+        endpoint = opts.endpoint ?? '/api/t';
+        start();
+    }, [opts.app, opts.version, opts.endpoint]);
+    useEffect(() => {
+        route = opts.route;
+        reportClient({ kind: 'view', route: opts.route });
+    }, [opts.route]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.79",
+  "version": "0.1.81",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.79",
+    "@columenlabs/lumen-ui-types": "0.1.81",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -83,6 +83,7 @@
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
     "topojson-client": "3.1.0",
+    "web-vitals": "6.2.3",
     "world-atlas": "2.0.2"
   },
   "peerDependencies": {