@concavejs/devtools 0.0.1-alpha.10

package/dist/overlay/LogsPanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Logs Panel - Shows console logs from function executions
+ */
+import type { EventStore } from "../store/event-store";
+interface LogsPanelProps {
+    eventStore: EventStore;
+    onNavigate?: (tab: "activity" | "subscriptions" | "performance" | "logs" | "settings") => void;
+}
+export declare function LogsPanel({ eventStore, onNavigate }: LogsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/NetworkPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Network Panel - Shows all client-server communication
+ */
+import type { EventStore } from "../store/event-store";
+interface NetworkPanelProps {
+    eventStore: EventStore;
+}
+export declare function NetworkPanel({ eventStore }: NetworkPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/PerformancePanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Performance Panel - Shows performance metrics with sparkline trends
+ */
+import type { EventStore } from "../store/event-store";
+interface PerformancePanelProps {
+    eventStore: EventStore;
+    onNavigate?: (tab: "activity" | "subscriptions" | "performance" | "logs" | "settings") => void;
+}
+export declare function PerformancePanel({ eventStore, onNavigate }: PerformancePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/SearchField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
+    value: string;
+    onValueChange: (value: string) => void;
+    onClear?: () => void;
+    className?: string;
+}
+export declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/overlay/SettingsPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Settings Panel - Configure devtools behavior
+ */
+import type { EventStore } from "../store/event-store";
+interface SettingsPanelProps {
+    eventStore: EventStore;
+}
+export declare function SettingsPanel({ eventStore }: SettingsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/SubscriptionsPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Subscriptions Panel - Shows active query subscriptions
+ */
+import type { EventStore } from "../store/event-store";
+interface SubscriptionsPanelProps {
+    eventStore: EventStore;
+}
+export declare function SubscriptionsPanel({ eventStore }: SubscriptionsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/TimelinePanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Timeline Panel - Visual timeline of all events
+ */
+import type { EventStore } from "../store/event-store";
+interface TimelinePanelProps {
+    eventStore: EventStore;
+}
+export declare function TimelinePanel({ eventStore }: TimelinePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/TraceViewer.d.ts

@@ -0,0 +1,7 @@
+import type { UdfTrace } from "../types";
+interface TraceViewerProps {
+    trace: UdfTrace;
+    maxHeight?: number;
+}
+export declare function TraceViewer({ trace, maxHeight }: TraceViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/utils.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copy text to clipboard with fallback for restricted contexts (e.g. Chrome
+ * DevTools panels where the Clipboard API is blocked by permissions policy).
+ * Shows a brief "Copied!" toast on success.
+ */
+export declare function copyToClipboard(text: string): void;
+/**
+ * Check if the devtools overlay currently has keyboard focus.
+ * The devtools renders inside a Shadow DOM under #concave-devtools-host.
+ * When any element inside the shadow is focused, document.activeElement
+ * returns the shadow host element.
+ */
+export declare function isDevToolsFocused(): boolean;
+/**
+ * Returns the currently focused element inside the devtools shadow DOM,
+ * or null if nothing inside the devtools is focused.
+ * Use this instead of document.activeElement when comparing against refs
+ * to elements inside the shadow tree.
+ */
+export declare function getDevToolsActiveElement(): Element | null;
+export declare function unwrapArgs<T>(args: T): T;
+export type InlinePreviewOptions = {
+    maxStringLength?: number;
+    stringTailLength?: number;
+    maxArrayItems?: number;
+    maxObjectEntries?: number;
+    maxDepth?: number;
+};
+export declare function formatInlinePreview(value: any, options?: InlinePreviewOptions, depth?: number): string;
+export declare function formatJsonSnippet(value: any, maxLength?: number): string;

package/dist/standalone.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Standalone DevTools Entry Point
+ *
+ * Self-contained bundle that can be loaded via <script> on any page.
+ * Renders inside a Shadow DOM for complete CSS/DOM isolation from the host page.
+ *
+ * When the Chrome extension's page-agent is already intercepting WebSockets,
+ * this skips installing its own interceptor and instead consumes events from
+ * page-agent via postMessage. This enables overlay + panel coexistence.
+ */
+export {};

package/dist/store/event-store.d.ts

@@ -0,0 +1,191 @@
+/**
+ * Client-side Event Store
+ *
+ * Maintains a circular buffer of events captured from WebSocket interception
+ * with persistence, export/import, and time-travel capabilities
+ */
+import type { DevToolsEvent, ActiveSubscription, PerformanceMetrics } from "../types";
+export type EventListener = (event: DevToolsEvent) => void;
+export type FocusListener = (eventId: string | null) => void;
+export type SettingsListener = (settings: DevToolsSettings) => void;
+export interface DevToolsSettings {
+    persistEvents: boolean;
+    maxEvents: number;
+    captureLogLines: boolean;
+    autoPauseOnError: boolean;
+    wsLatencyMs: number;
+    wsJitterMs: number;
+}
+export interface StoreSnapshot {
+    timestamp: number;
+    events: DevToolsEvent[];
+    subscriptions: Array<[number, ActiveSubscription]>;
+}
+export interface ExportedSession {
+    version: string;
+    exportedAt: number;
+    events: DevToolsEvent[];
+    subscriptions: Array<[number, ActiveSubscription]>;
+    metadata: {
+        userAgent: string;
+        url: string;
+    };
+}
+export interface EventStoreOptions {
+    maxEvents?: number;
+    storageScope?: string;
+    enablePersistence?: boolean;
+}
+export declare class EventStore {
+    private events;
+    private maxEvents;
+    private listeners;
+    private focusListeners;
+    private settingsListeners;
+    private subscriptions;
+    private snapshots;
+    private maxSnapshots;
+    private isPaused;
+    private focusedEventId;
+    private readonly storageKey;
+    private readonly settingsKey;
+    private readonly persistenceEnabled;
+    private recentEventIds;
+    private persistTimer;
+    private settings;
+    private static readonly MIN_EVENTS;
+    private static readonly MAX_EVENTS;
+    private static readonly MAX_SIMULATED_LATENCY_MS;
+    constructor(options?: number | EventStoreOptions, legacyStorageScope?: string);
+    /**
+     * Add an event to the store
+     */
+    addEvent(event: DevToolsEvent): void;
+    /**
+     * Subscribe to new events
+     */
+    subscribe(listener: EventListener): () => void;
+    /**
+     * Subscribe to focus/navigation changes across panels
+     */
+    subscribeFocus(listener: FocusListener): () => void;
+    /**
+     * Subscribe to settings changes
+     */
+    subscribeSettings(listener: SettingsListener): () => void;
+    /**
+     * Set the currently focused event (for cross-panel navigation)
+     */
+    setFocusedEventId(eventId: string | null): void;
+    /**
+     * Get focused event id
+     */
+    getFocusedEventId(): string | null;
+    /**
+     * Get all events
+     */
+    getAllEvents(): DevToolsEvent[];
+    /**
+     * Get events by type
+     */
+    getEventsByType<T extends DevToolsEvent>(type: T["type"]): T[];
+    /**
+     * Get recent events
+     */
+    getRecentEvents(count: number): DevToolsEvent[];
+    /**
+     * Get events for a specific function
+     */
+    getEventsByFunction(udfPath: string): DevToolsEvent[];
+    /**
+     * Get active subscriptions
+     */
+    getActiveSubscriptions(): ActiveSubscription[];
+    /**
+     * Get subscription by query ID
+     */
+    getSubscription(queryId: number): ActiveSubscription | undefined;
+    /**
+     * Calculate performance metrics
+     */
+    getPerformanceMetrics(): PerformanceMetrics;
+    /**
+     * Clear all events
+     */
+    clear(): void;
+    /**
+     * Pause event capture
+     */
+    pause(): void;
+    /**
+     * Resume event capture
+     */
+    resume(): void;
+    /**
+     * Check if paused
+     */
+    isPausedState(): boolean;
+    /**
+     * Create a snapshot of current state (for time-travel)
+     */
+    createSnapshot(): void;
+    /**
+     * Restore from a snapshot
+     */
+    restoreSnapshot(timestamp: number): boolean;
+    /**
+     * Get all snapshots
+     */
+    getSnapshots(): StoreSnapshot[];
+    /**
+     * Export session data
+     */
+    exportSession(): ExportedSession;
+    /**
+     * Import session data
+     */
+    importSession(session: ExportedSession): boolean;
+    /**
+     * Save settings
+     */
+    saveSettings(settings: Partial<typeof this.settings>): void;
+    /**
+     * Get settings
+     */
+    getSettings(): typeof this.settings;
+    /**
+     * Whether this store supports local persistence
+     */
+    isPersistenceEnabled(): boolean;
+    /**
+     * Load settings from localStorage
+     */
+    private loadSettings;
+    /**
+     * Push latency settings to the shared window config object
+     * that the WebSocket interceptors read on every send/receive.
+     */
+    private syncLatencyConfig;
+    private notifySettingsChanged;
+    /**
+     * Persist events to localStorage
+     */
+    private persistEvents;
+    /**
+     * Load persisted events from localStorage
+     */
+    private loadPersistedEvents;
+    /**
+     * Update subscription tracking
+     */
+    private updateSubscription;
+    private sanitizeEvents;
+    private isEventLike;
+    private normalizeMaxEvents;
+    private normalizeLatencySettings;
+    private isOperationEvent;
+    private isTerminalOperationEvent;
+    private isMatchingPendingOperation;
+    private reconcilePendingOperation;
+}
+export declare function getGlobalEventStore(): EventStore;

package/dist/store/safe-storage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Safe localStorage wrapper that gracefully handles sandboxed iframes,
+ * restrictive CSP, and other environments where localStorage is unavailable.
+ */
+export declare function getItem(key: string): string | null;
+export declare function setItem(key: string, value: string): void;
+export declare function removeItem(key: string): void;

package/dist/types.d.ts

@@ -0,0 +1,211 @@
+/**
+ * Devtools Event Types
+ *
+ * These types represent the telemetry data captured from the Convex sync protocol
+ */
+export type JSONValue = null | boolean | number | string | JSONValue[] | {
+    [key: string]: JSONValue;
+};
+export interface TraceEvent {
+    name: string;
+    atMs: number;
+    attributes?: Record<string, JSONValue>;
+}
+export interface TraceSpan {
+    id: string;
+    parentId: string | null;
+    name: string;
+    kind: string;
+    startMs: number;
+    endMs: number;
+    durationMs: number;
+    status: "ok" | "error";
+    attributes?: Record<string, JSONValue>;
+    events?: TraceEvent[];
+}
+export interface UdfTrace {
+    version: number;
+    requestId?: string;
+    rootSpanId: string;
+    generatedAtMs: number;
+    spans: TraceSpan[];
+    summary: {
+        spanCount: number;
+        eventCount: number;
+        totalDurationMs: number;
+    };
+}
+export type EventType = "query" | "mutation" | "action" | "subscription" | "log" | "auth";
+export type EventStatus = "pending" | "success" | "error";
+export type SubscriptionStatus = "added" | "updated" | "removed";
+/**
+ * Base event interface
+ */
+export interface BaseEvent {
+    id: string;
+    timestamp: number;
+    type: EventType;
+}
+/**
+ * Query execution event (captured from AddQuery + QueryUpdated/QueryFailed)
+ */
+export interface QueryEvent extends BaseEvent {
+    type: "query";
+    queryId: number;
+    udfPath: string;
+    args: JSONValue[];
+    componentPath?: string;
+    status: EventStatus;
+    result?: JSONValue;
+    error?: string;
+    logLines?: string[];
+    /**
+     * Backend/network round-trip time measured when the WS frame is received.
+     */
+    duration?: number;
+    /**
+     * Simulated client-side delivery delay applied by devtools latency settings.
+     */
+    simulatedDelayMs?: number;
+    /**
+     * End-to-end perceived latency = duration + simulatedDelayMs.
+     */
+    endToEndDurationMs?: number;
+    /** ID of the mutation that likely triggered this query update */
+    triggeredBy?: string;
+    trace?: UdfTrace;
+}
+/**
+ * Mutation execution event (captured from MutationRequest + MutationResponse)
+ */
+export interface MutationEvent extends BaseEvent {
+    type: "mutation";
+    requestId: number;
+    udfPath: string;
+    args: JSONValue[];
+    componentPath?: string;
+    status: EventStatus;
+    result?: JSONValue;
+    error?: string;
+    logLines?: string[];
+    /**
+     * Backend/network round-trip time measured when the WS frame is received.
+     */
+    duration?: number;
+    /**
+     * Simulated client-side delivery delay applied by devtools latency settings.
+     */
+    simulatedDelayMs?: number;
+    /**
+     * End-to-end perceived latency = duration + simulatedDelayMs.
+     */
+    endToEndDurationMs?: number;
+    trace?: UdfTrace;
+}
+/**
+ * Action execution event (captured from ActionRequest + ActionResponse)
+ */
+export interface ActionEvent extends BaseEvent {
+    type: "action";
+    requestId: number;
+    udfPath: string;
+    args: JSONValue[];
+    componentPath?: string;
+    status: EventStatus;
+    result?: JSONValue;
+    error?: string;
+    logLines?: string[];
+    /**
+     * Backend/network round-trip time measured when the WS frame is received.
+     */
+    duration?: number;
+    /**
+     * Simulated client-side delivery delay applied by devtools latency settings.
+     */
+    simulatedDelayMs?: number;
+    /**
+     * End-to-end perceived latency = duration + simulatedDelayMs.
+     */
+    endToEndDurationMs?: number;
+    trace?: UdfTrace;
+}
+/**
+ * Subscription event (captured from ModifyQuerySet)
+ */
+export interface SubscriptionEvent extends BaseEvent {
+    type: "subscription";
+    queryId: number;
+    udfPath: string;
+    args: JSONValue[];
+    componentPath?: string;
+    status: SubscriptionStatus;
+    updateCount?: number;
+}
+/**
+ * Log event (extracted from logLines in responses)
+ */
+export interface LogEvent extends BaseEvent {
+    type: "log";
+    level: "log" | "info" | "warn" | "error";
+    message: string;
+    relatedEventId?: string;
+}
+/**
+ * Authentication protocol event (Connect / Authenticate / AuthError / Authenticated)
+ */
+export interface AuthEvent extends BaseEvent {
+    type: "auth";
+    direction: "client" | "server";
+    messageType: string;
+    status: EventStatus;
+    tokenType?: string;
+    error?: string;
+    details?: JSONValue;
+}
+export type DevToolsEvent = QueryEvent | MutationEvent | ActionEvent | SubscriptionEvent | LogEvent | AuthEvent;
+/**
+ * Active subscription tracking
+ */
+export interface ActiveSubscription {
+    queryId: number;
+    udfPath: string;
+    args: JSONValue[];
+    componentPath?: string;
+    addedAt: number;
+    updateCount: number;
+    lastUpdate: number;
+    currentValue?: JSONValue;
+    previousValue?: JSONValue;
+    status: "active" | "error";
+    error?: string;
+}
+/**
+ * Performance metrics
+ */
+export interface PerformanceMetrics {
+    totalQueries: number;
+    totalMutations: number;
+    totalActions: number;
+    avgQueryDuration: number;
+    avgMutationDuration: number;
+    avgActionDuration: number;
+    p50QueryDuration: number;
+    p50MutationDuration: number;
+    p50ActionDuration: number;
+    p90QueryDuration: number;
+    p90MutationDuration: number;
+    p90ActionDuration: number;
+    p95QueryDuration: number;
+    p95MutationDuration: number;
+    p95ActionDuration: number;
+    p99QueryDuration: number;
+    p99MutationDuration: number;
+    p99ActionDuration: number;
+    slowestOperations: Array<{
+        type: "query" | "mutation" | "action";
+        eventId: string;
+        udfPath: string;
+        duration: number;
+        timestamp: number;
+    }>;
+}

package/dist/version.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DevTools package semantic version (source of truth: package.json).
+ */
+export declare const DEVTOOLS_VERSION: string;
+/**
+ * Chrome extension public version.
+ *
+ * Chrome Web Store requires numeric dot-separated version strings.
+ */
+export declare const CHROME_EXTENSION_VERSION: string;

package/dist/vite-plugin/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Vite Plugin for injecting Concave DevTools
+ */
+import type { Plugin } from "vite";
+export interface DevToolsOptions {
+    /**
+     * Enable devtools (default: true in dev mode)
+     */
+    enabled?: boolean;
+    /**
+     * Position of the devtools overlay
+     */
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+}
+export declare function concaveDevTools(options?: DevToolsOptions): Plugin;
+export default concaveDevTools;