@pluno/product-agent-web 0.1.66 → 0.1.68

package/INTEGRATION.md

@@ -57,8 +57,10 @@ const agent = await PlunoProductAgent.init({
 });
 ```
 
-Network capture is always enabled. The SDK sends captured request/response metadata and bodies using the built-in
-redaction pipeline before data leaves the browser.
+Network capture is always enabled. The SDK passively observes resource URL/timing metadata and adds richer fetch/XHR
+metadata only when it can do so without delaying or consuming host traffic. Small declared-length textual bodies are
+read in a detached, capped task; streaming, unknown-length, large, upload, token, Pluno, and internal bodies are skipped.
+Captured values use the built-in limits and redaction pipeline before data leaves the browser.
 
 ## Default Widget
 
@@ -84,14 +86,50 @@ Supported widget script-tag attributes:
 - optional `data-pluno-accent-color`
 - optional `data-pluno-color-scheme`
 - optional `data-pluno-font-family`
+- optional `data-pluno-scribble-style="false"` to disable the default scribble appearance
 - optional `data-pluno-position`
 - optional `data-pluno-auto-mount="false"`
 
+### Advanced programmatic widget
+
+Keep the script-tag integration as the default. When the customer token endpoint requires bearer auth, CSRF, tenant
+headers, or other custom request logic, import the same hosted ES module and pass a `tokenProvider`:
+
+```ts
+const { mountPlunoProductAgentWidget } = await import(
+  "https://app.pluno.ai/product-agent/product-agent-widget.js"
+);
+
+const widget = await mountPlunoProductAgentWidget({
+  tokenProvider: async () => {
+    const response = await fetch("/api/pluno-product-agent-token", {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        Authorization: `Bearer ${customerAccessToken}`,
+        "X-CSRF-Token": csrfToken,
+        "X-Tenant-ID": tenantId,
+      },
+    });
+    if (!response.ok) throw new Error("Could not create Pluno session token");
+    return (await response.json()).token;
+  },
+});
+
+widget.openPanel();
+function removeProductAgentWidget() {
+  widget.destroy();
+}
+```
+
+A programmatic import does not auto-mount. Only a widget script tag with Pluno data attributes auto-mounts; callers of
+the hosted module explicitly own the returned widget handle and should call `destroy()` when removing the integration.
+
 ## Security Decisions
 
 - Integration secrets are backend-only.
 - Embed tokens are short-lived Pluno-signed JWTs.
 - The runtime validates the token origin against the integration allowlist.
 - The runtime validates the browser WebSocket `Origin` header against the token origin.
-- Network capture is always installed by the SDK/widget. There is intentionally no configuration or opt-out for now.
+- Network capture is always installed by the SDK/widget, shared across instances, and removed after final teardown. There is intentionally no configuration or opt-out for now.
 - Browser-side redaction runs before network events and tool results are sent to Pluno.

package/README.md

@@ -33,7 +33,7 @@ agent.on("state", (state) => {
 agent.sendMessage("Update my settings");
 ```
 
-The SDK always captures product network activity by patching `fetch` and `XMLHttpRequest`. There is intentionally no opt-out for now.
+The SDK captures passive resource URL/timing metadata with `PerformanceObserver` and adds bounded method, header, status, and small textual body metadata through shared `fetch`/`XMLHttpRequest` instrumentation. Capture is best effort and detached from host requests: streaming, unknown-length, large, upload, token, Pluno, and internal bodies are not read, captured values are capped and redacted, and the instrumentation is removed after the final SDK instance is destroyed.
 
 ## Drop-In Widget
 
@@ -45,9 +45,45 @@ The SDK always captures product network activity by patching `fetch` and `XMLHtt
   data-pluno-launcher-label="Ask for anything..."
   data-pluno-accent-color="#7c3aed"
   data-pluno-font-family='Inter, system-ui, sans-serif'
+  data-pluno-scribble-style="false"
 ></script>
 ```
 
+Scribble style is enabled by default. Set `data-pluno-scribble-style="false"` in the snippet, or `scribbleStyle: false`
+for programmatic mounts, to use the standard widget appearance.
+
+This script-tag setup is the recommended integration. If your token endpoint needs custom browser-side authentication,
+import the same hosted widget module and provide the request logic programmatically:
+
+```ts
+const { mountPlunoProductAgentWidget } = await import(
+  "https://app.pluno.ai/product-agent/product-agent-widget.js"
+);
+
+const widget = await mountPlunoProductAgentWidget({
+  tokenProvider: async () => {
+    const response = await fetch("/api/pluno-product-agent-token", {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        Authorization: `Bearer ${customerAccessToken}`,
+        "X-CSRF-Token": csrfToken,
+        "X-Tenant-ID": tenantId,
+      },
+    });
+    if (!response.ok) throw new Error("Could not create Pluno session token");
+    return (await response.json()).token;
+  },
+});
+
+function removeProductAgentWidget() {
+  widget.destroy();
+}
+```
+
+Importing the hosted module does not mount anything by itself. `mountPlunoProductAgentWidget` returns a handle containing
+the underlying `agent`, `openPanel()`, appearance/auth update methods, and `destroy()`.
+
 The token endpoint must be implemented by the customer backend. It should authenticate the current user, then call Pluno&apos;s `/api/product-agent/embed/token` endpoint with:
 
 - `public_key`

package/dist/index.d.ts

@@ -130,19 +130,45 @@ export type ProductAgentEventMap = {
 };
 type EventName = keyof ProductAgentEventMap;
 type Listener<T extends EventName> = (payload: ProductAgentEventMap[T]) => void;
+type CapturedRequest = {
+    requestId: string;
+    url: string;
+    method: string;
+    requestHeaders?: Record<string, string>;
+    requestBody?: string;
+    resourceType: "fetch" | "xhr" | "resource";
+    responseStatus?: number;
+    responseHeaders?: Record<string, string>;
+    responseBody?: unknown;
+    errorText?: string;
+    startedAt: string;
+    durationMs?: number;
+};
+type NetworkCaptureSubscriber = (event: CapturedRequest) => void;
+type NetworkCaptureManager = {
+    subscribers: Set<NetworkCaptureSubscriber>;
+    destroy: () => void;
+};
+export declare function calculateReconnectDelay(attempt: number, random?: () => number): number;
 export declare class PlunoProductAgent {
     private readonly options;
     private readonly listeners;
     private socket;
     private reconnectTimer;
     private heartbeatTimer;
+    private heartbeatAckTimer;
+    private socketConnectTimer;
+    private socketAuthTimer;
+    private reconnectAttempts;
+    private connectionAttemptId;
+    private connectionInProgress;
     private token;
     private networkCaptureCleanup;
     private networkBatchTimer;
     private queuedNetworkEvents;
     private queuedClientEvents;
     private pendingSessionHistoryRequests;
-    private readonly transportId;
+    private readonly transportIdentity;
     private retryAttemptsByClientMessageId;
     private retryTimersByClientMessageId;
     private thinkingWatchdogTimer;
@@ -158,6 +184,8 @@ export declare class PlunoProductAgent {
     private readonly attachmentFiles;
     private readonly attachmentBlobCache;
     private sessionUserFilesApiCleanup;
+    private readonly activeBrowserToolCalls;
+    private pageLifecycleCleanup;
     private transientStarterPromptsRequestInFlight;
     private transientStarterPromptsRequestAttempted;
     private locationChangeCleanup;
@@ -214,6 +242,7 @@ export declare class PlunoProductAgent {
     private recoverStuckThinking;
     private resyncThinkingSession;
     private executeToolCall;
+    private startPageLifecycleRecovery;
     private installSessionUserFilesApi;
     private cleanupSessionUserFilesApi;
     private executeRuntimeHelper;
@@ -222,12 +251,17 @@ export declare class PlunoProductAgent {
     private scheduleReconnect;
     private startHeartbeat;
     private stopHeartbeat;
+    private clearHeartbeatAckTimer;
+    private clearSocketConnectTimer;
+    private clearSocketAuthTimer;
+    private clearSocketPhaseTimers;
+    private replaceTimedOutSocket;
     private setState;
     private emit;
 }
 declare global {
     interface Window {
-        __plunoProductAgentInstance?: PlunoProductAgent;
+        __plunoProductAgentNetworkCapture?: NetworkCaptureManager;
     }
 }
 export declare function getProductAgentOriginAccessErrorMessage(message: string, runtimeOrigin?: string): string | null;