@graineai/inapp-react-native 0.34.0 → 0.36.0

package/INTEGRATION.md

@@ -815,9 +815,9 @@ is not happening, and the table says which.
 | Wait | What it is | When it is paid | Typical |
 |---|---|---|---|
 | Page load | The voice engine is a page in a WebView | **Before the tap** — `GraineFab` mounts the engine on open; a custom bar mounts `GraineVoiceLauncher` at launch with `active={false}` and flips it on open (0.27.5) | ~4s, hidden |
-| Mint + REGISTER | A 120-second SIP credential, then registration on the SBC | **Before the tap**, re-warmed as it nears expiry | ~1.6s, hidden |
+| Mint + REGISTER | A 120-second SIP credential, then registration on the SBC | **Before the tap**, re-warmed as it nears expiry and whenever the app comes back to the foreground (0.36.0) | ~1s, hidden |
 | Microphone | The OS permission prompt, first time only | At the tap | 0 once granted |
-| INVITE → answer | The call itself | At the tap | ~0.3s |
+| INVITE → answer | The call itself, on a network path prepared before the tap | At the tap | ~0.2s |
 
 **The INVITE is bounded, not left to the browser.** WebRTC gathers network
 candidates before dialling, and Chrome does not report gathering complete

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { type ActionHandler, type AppActionResult, type AppEvent, type ScreenContext, type ScreenField, type AgentSurface } from "./protocol.js";
+import { type ConnectionQuality, type QualitySample, type ActionHandler, type AppActionResult, type AppEvent, type ScreenContext, type ScreenField, type AgentSurface } from "./protocol.js";
 import { type FrictionConfig } from "./friction.js";
 export declare const SUBPROTOCOL = "graine.embed.v1";
 export interface GraineInAppOptions {
@@ -25,6 +25,7 @@ export interface SessionConfig {
         name?: string;
     }>;
     friction?: FrictionConfig;
+    pageVersion?: string;
 }
 export interface ActionDiagnosis {
     usable: string[];
@@ -56,6 +57,16 @@ export declare class GraineInAppClient {
     private muted;
     private playoutClock;
     private identity;
+    private runtimeVariables;
+    private quality;
+    private network;
+    allVariables(): Record<string, string>;
+    getVariables(): Record<string, string>;
+    setVariables(vars: Record<string, unknown> | null): void;
+    get connectionQuality(): ConnectionQuality;
+    get networkState(): "online" | "offline" | "unknown";
+    reportQuality(sample: QualitySample | null): ConnectionQuality;
+    reportNetwork(online: boolean): void;
     private appVersion;
     private recentEvents;
     constructor(opts: GraineInAppOptions);

package/dist/client.js

@@ -1,9 +1,66 @@
-import { contextToken, ACTION_DEADLINE_MS, CONTEXT_THROTTLE_MS, } from "./protocol.js";
+import { contextToken, readAgentChunk, variablesForTicket, classifyQuality, ACTION_DEADLINE_MS, CONTEXT_THROTTLE_MS, } from "./protocol.js";
 import { maskDeep } from "./mask.js";
 import { FrictionDetector, resolveFriction } from "./friction.js";
 export const SUBPROTOCOL = "graine.embed.v1";
 const PING_MS = 25000;
 export class GraineInAppClient {
+    allVariables() {
+        return {
+            ...(this.config?.variables ?? {}),
+            ...(this.opts.variables ?? {}),
+            ...this.runtimeVariables,
+            ...this.identity,
+        };
+    }
+    getVariables() {
+        return this.allVariables();
+    }
+    setVariables(vars) {
+        if (!vars) {
+            this.runtimeVariables = {};
+        }
+        else {
+            const next = { ...this.runtimeVariables };
+            for (const [k, v] of Object.entries(vars)) {
+                if (!k)
+                    continue;
+                if (v === null || v === undefined) {
+                    delete next[k];
+                    continue;
+                }
+                if (typeof v === "object")
+                    continue;
+                next[k] = String(v);
+            }
+            this.runtimeVariables = maskDeep(next);
+        }
+        this.emit("variables", this.allVariables());
+    }
+    get connectionQuality() {
+        return this.quality;
+    }
+    get networkState() {
+        return this.network;
+    }
+    reportQuality(sample) {
+        const next = sample ? classifyQuality(sample) : "unknown";
+        if (next !== this.quality) {
+            this.quality = next;
+            this.emit("quality", { quality: next, ...(sample ?? {}) });
+        }
+        return next;
+    }
+    reportNetwork(online) {
+        const next = online ? "online" : "offline";
+        if (next === this.network)
+            return;
+        this.network = next;
+        if (!online && this.quality !== "lost") {
+            this.quality = "lost";
+            this.emit("quality", { quality: "lost" });
+        }
+        this.emit("network", { online });
+    }
     constructor(opts) {
         this.config = null;
         this.transport = null;
@@ -26,6 +83,9 @@ export class GraineInAppClient {
         this.muted = false;
         this.playoutClock = null;
         this.identity = {};
+        this.runtimeVariables = {};
+        this.quality = "unknown";
+        this.network = "unknown";
         this.appVersion = null;
         this.recentEvents = [];
         this.lastWidget = null;
@@ -161,6 +221,7 @@ export class GraineInAppClient {
                 body: JSON.stringify({
                     publishableKey: this.opts.publishableKey,
                     mode: this.socketIsVoice ? "voice" : "text",
+                    metadata: variablesForTicket(this.allVariables()),
                 }),
             });
             if (!res.ok)
@@ -200,7 +261,7 @@ export class GraineInAppClient {
             url = `${host}/chat/v1/${encodeURIComponent(agentId)}?${mode}`;
             this.transport = "direct";
         }
-        const token = contextToken({ ...(this.config.variables ?? {}), ...(this.opts.variables ?? {}), ...this.identity }, this.socketIsVoice ? "webcall" : "text_chat");
+        const token = contextToken(this.allVariables(), this.socketIsVoice ? "webcall" : "text_chat");
         if (token)
             url += `${url.includes("?") ? "&" : "?"}context_token=${encodeURIComponent(token)}`;
         const WS = this.opts.WebSocketImpl ?? globalThis.WebSocket;
@@ -227,11 +288,7 @@ export class GraineInAppClient {
             event: "start",
             meta_data: {
                 client: "graine-inapp-sdk",
-                context_data: {
-                    ...(this.config.variables ?? {}),
-                    ...(this.opts.variables ?? {}),
-                    ...this.identity,
-                },
+                context_data: this.allVariables(),
             },
         });
         this.pingTimer = setInterval(() => this.send({ type: "ping" }), PING_MS);
@@ -260,9 +317,20 @@ export class GraineInAppClient {
             return;
         }
         switch (msg.type) {
-            case "text":
-                this.emit("chunk", msg.data);
+            case "text": {
+                const chunk = readAgentChunk(msg.data);
+                if (chunk.startsTurn && !this.agentSpeaking) {
+                    this.agentSpeaking = true;
+                    this.emit("agent_speaking", true);
+                }
+                if (chunk.text)
+                    this.emit("chunk", chunk.text);
+                if (chunk.endsTurn && this.agentSpeaking) {
+                    this.agentSpeaking = false;
+                    this.emit("agent_speaking", false);
+                }
                 break;
+            }
             case "widget":
                 this.emit("widget", msg.widget);
                 break;
@@ -554,6 +622,7 @@ export class GraineInAppClient {
     identify(user) {
         if (!user) {
             this.identity = {};
+            this.emit("variables", this.allVariables());
             return;
         }
         const flat = {};
@@ -563,6 +632,7 @@ export class GraineInAppClient {
             flat[k] = typeof v === "string" ? v : JSON.stringify(v);
         }
         this.identity = maskDeep(flat);
+        this.emit("variables", this.allVariables());
         this.scheduleScreen();
     }
     noteInteraction() {

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { WIDGET_SELECTS, MAX_SELECT_DEFAULT, manySummary } from "./protocol.js";
 export { contextToken } from "./protocol.js";
 export { resolveSurface } from "./protocol.js";
 export type { AgentSurface, SurfacePolicy } from "./protocol.js";
+export { classifyQuality, variablesForTicket, TICKET_VARIABLE_LIMITS, readAgentChunk, STREAM_START, STREAM_END } from "./protocol.js";
+export type { ConnectionQuality, QualitySample, AgentChunk } from "./protocol.js";
 export type { WidgetSelect } from "./protocol.js";
 export type { WidgetSelectAction } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
@@ -21,7 +23,7 @@ export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, type Fri
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, type AudioAdapter, type VoiceSessionOptions, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, type AudioFormat, type DecodedAudio, } from "./audio.js";
 export { addMaskRule, maskDeep, maskString } from "./mask.js";
-export { GraineProvider, useGraineAgent, useGraineSurface, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index.js";
+export { GraineProvider, useGraineAgent, useGraineSurface, useGraineConnection, useGraineVariables, useKeyboardLift, liftFor, useDraggablePlacement, clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, type GraineEvent, type GraineProviderProps, type Turn, type Caption, } from "./react-native/index.js";
 export { requestMicrophonePermission } from "./react-native/permissions.js";
 export { GraineFab, GraineTouchCapture, TAP_MAX_MOVE_PX, TAP_MAX_MS, type GraineFabProps, type GraineTouchCaptureProps, } from "./react-native/fab.js";
 export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";

package/dist/index.js

@@ -5,6 +5,7 @@ export { normaliseSelectAction, fillSelectArgs, fillSelectTemplate, selectCall,
 export { WIDGET_SELECTS, MAX_SELECT_DEFAULT, manySummary } from "./protocol.js";
 export { contextToken } from "./protocol.js";
 export { resolveSurface } from "./protocol.js";
+export { classifyQuality, variablesForTicket, TICKET_VARIABLE_LIMITS, readAgentChunk, STREAM_START, STREAM_END } from "./protocol.js";
 export { GraineWidget } from "./react-native/widget.js";
 export { GraineLoader, useGraineLoader } from "./react-native/loader.js";
 export { PENDING_WIDGET_MS, AWAITING_REPLY_MS, MIN_LOADER_MS } from "./react-native/index.js";
@@ -13,7 +14,7 @@ export { FrictionDetector, resolveFriction, rulesFor, DEFAULT_FRICTION, } from "
 export { VoiceSession, liveAudioStreamAdapter, base64ToPcm16, CAPTURE_SAMPLE_RATE, } from "./voice.js";
 export { EchoGuard, decodeAgentAudio, decodeMuLaw, decodePcm16, base64ToBytes, } from "./audio.js";
 export { addMaskRule, maskDeep, maskString } from "./mask.js";
-export { GraineProvider, useGraineAgent, useGraineSurface, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, } from "./react-native/index.js";
+export { GraineProvider, useGraineAgent, useGraineSurface, useGraineConnection, useGraineVariables, useKeyboardLift, liftFor, useDraggablePlacement, clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX, useGraineScreen, useGraineAction, useGraineVoice, useGraineIdentify, useGraineEvents, useGraineField, useGraineClient, setDefaultClient, useGraineTrack, useGraineTap, useGraineHighlight, useGraineWidget, useGraineReady, useGraineInit, } from "./react-native/index.js";
 export { requestMicrophonePermission } from "./react-native/permissions.js";
 export { GraineFab, GraineTouchCapture, TAP_MAX_MOVE_PX, TAP_MAX_MS, } from "./react-native/fab.js";
 export { UNNAMED_TAP, resolveWidgetImages } from "./protocol.js";

package/dist/protocol.d.ts

@@ -187,3 +187,25 @@ export interface SurfacePolicy {
     canSwitch: boolean;
 }
 export declare function resolveSurface(appearance?: Record<string, any> | null, prefer?: AgentSurface | null): SurfacePolicy;
+export declare const STREAM_START = "<beginning_of_stream>";
+export declare const STREAM_END = "<end_of_stream>";
+export interface AgentChunk {
+    text: string;
+    startsTurn: boolean;
+    endsTurn: boolean;
+}
+export declare function readAgentChunk(raw: unknown): AgentChunk;
+export type ConnectionQuality = "excellent" | "good" | "poor" | "lost" | "unknown";
+export interface QualitySample {
+    rtt?: number | null;
+    jitter?: number | null;
+    loss?: number | null;
+}
+export declare function classifyQuality(s: QualitySample | null | undefined): ConnectionQuality;
+export declare const TICKET_VARIABLE_LIMITS: {
+    readonly keys: 12;
+    readonly keyLength: 40;
+    readonly valueLength: 200;
+    readonly totalBytes: 1024;
+};
+export declare function variablesForTicket(vars: Record<string, unknown> | null | undefined): Record<string, string> | undefined;

package/dist/protocol.js

@@ -320,3 +320,72 @@ export function resolveSurface(appearance, prefer) {
             : allowed[0];
     return { allowed, start, canSwitch: allowed.length > 1 };
 }
+export const STREAM_START = "<beginning_of_stream>";
+export const STREAM_END = "<end_of_stream>";
+export function readAgentChunk(raw) {
+    const text = raw == null ? "" : String(raw);
+    if (!text)
+        return { text: "", startsTurn: false, endsTurn: false };
+    if (text.indexOf("<") === -1)
+        return { text, startsTurn: false, endsTurn: false };
+    const lower = text.toLowerCase();
+    const startsTurn = lower.includes(STREAM_START);
+    const endsTurn = lower.includes(STREAM_END);
+    if (!startsTurn && !endsTurn)
+        return { text, startsTurn: false, endsTurn: false };
+    return {
+        text: text.replace(STREAM_START_RE, "").replace(STREAM_END_RE, ""),
+        startsTurn,
+        endsTurn,
+    };
+}
+const STREAM_START_RE = /<beginning_of_stream>/gi;
+const STREAM_END_RE = /<end_of_stream>/gi;
+export function classifyQuality(s) {
+    if (!s)
+        return "unknown";
+    const rtt = num(s.rtt), jitter = num(s.jitter), loss = num(s.loss);
+    if (rtt === null && jitter === null && loss === null)
+        return "unknown";
+    if ((rtt ?? 0) >= 400 || (jitter ?? 0) >= 80 || (loss ?? 0) >= 0.08)
+        return "poor";
+    if ((rtt ?? 0) >= 150 || (jitter ?? 0) >= 30 || (loss ?? 0) >= 0.02)
+        return "good";
+    return "excellent";
+}
+function num(v) {
+    return typeof v === "number" && Number.isFinite(v) && v >= 0 ? v : null;
+}
+export const TICKET_VARIABLE_LIMITS = { keys: 12, keyLength: 40, valueLength: 200, totalBytes: 1024 };
+export function variablesForTicket(vars) {
+    if (!vars || typeof vars !== "object" || Array.isArray(vars))
+        return undefined;
+    const out = {};
+    let n = 0;
+    for (const [k, v] of Object.entries(vars)) {
+        if (n >= TICKET_VARIABLE_LIMITS.keys)
+            break;
+        if (v === null || v === undefined || typeof v === "object")
+            continue;
+        const key = String(k).slice(0, TICKET_VARIABLE_LIMITS.keyLength);
+        const value = String(v).slice(0, TICKET_VARIABLE_LIMITS.valueLength);
+        if (!key || !value)
+            continue;
+        out[key] = value;
+        n++;
+    }
+    if (n === 0)
+        return undefined;
+    let bytes = 2;
+    for (const [k, v] of Object.entries(out))
+        bytes += utf8Length(k) + utf8Length(v) + 6;
+    return bytes > TICKET_VARIABLE_LIMITS.totalBytes ? undefined : out;
+}
+function utf8Length(s) {
+    let n = 0;
+    for (let i = 0; i < s.length; i++) {
+        const c = s.charCodeAt(i);
+        n += c < 0x80 ? 1 : c < 0x800 ? 2 : c >= 0xd800 && c <= 0xdbff ? (i++, 4) : 3;
+    }
+    return n;
+}

package/dist/react-native/index.d.ts

@@ -5,11 +5,17 @@ import type { ActionHandler, ScreenContext, ScreenField } from "../protocol.js";
 import { type WidgetStyle, type WidgetSelectAction } from "../protocol.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
 export type { GraineFabProps, GraineTouchCaptureProps } from "./fab.js";
+export { useKeyboardLift, liftFor } from "./keyboard.js";
+export { useDraggablePlacement } from "./placement.js";
+export type { DraggablePlacement, DraggablePlacementOptions } from "./placement.js";
+export { clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX } from "./placement-math.js";
+export type { PlacementBounds } from "./placement-math.js";
 export { widgetSurface } from "../protocol.js";
 export type { WidgetSurface } from "../protocol.js";
 export { resolveSurface } from "../protocol.js";
 export type { AgentSurface, SurfacePolicy } from "../protocol.js";
-import { type AgentSurface } from "../protocol.js";
+import { type AgentSurface, type ConnectionQuality } from "../protocol.js";
+export type { ConnectionQuality, QualitySample } from "../protocol.js";
 import type { FrictionConfig } from "../friction.js";
 import { type LauncherInset, type LauncherVisibility } from "./navigation.js";
 interface GraineContextValue {
@@ -38,6 +44,9 @@ interface GraineContextValue {
     surfaces: AgentSurface[];
     canSwitch: boolean;
     setSurface: (surface: AgentSurface) => void;
+    connectionQuality: ConnectionQuality;
+    network: "online" | "offline" | "unknown";
+    setVariables: (vars: Record<string, unknown> | null) => void;
 }
 export type GraineEvent = {
     type: "conversation_started";
@@ -75,6 +84,15 @@ export type GraineEvent = {
     name: string;
     screen: string;
     detail: string;
+} | {
+    type: "connection_quality";
+    quality: ConnectionQuality;
+    rtt?: number;
+    jitter?: number;
+    loss?: number;
+} | {
+    type: "network";
+    online: boolean;
 };
 export declare const PENDING_WIDGET_MS = 12000;
 export declare const AWAITING_REPLY_MS = 12000;
@@ -129,6 +147,12 @@ export declare function useGraineSurface(): {
     canSwitch: boolean;
     setSurface: (surface: AgentSurface) => void;
 };
+export declare function useGraineVariables(): (vars: Record<string, unknown> | null) => void;
+export declare function useGraineConnection(): {
+    quality: ConnectionQuality;
+    online: boolean | null;
+    network: "online" | "offline" | "unknown";
+};
 export declare function useGraineEvents(handler: (e: GraineEvent) => void): void;
 export declare function useGraineTrack(): (name: string, data?: Record<string, unknown>) => void;
 export declare function useGraineTap<T extends (...args: any[]) => any>(name: string, handler?: T, data?: Record<string, unknown>): (...args: Parameters<T>) => ReturnType<T> | undefined;

package/dist/react-native/index.js

@@ -6,6 +6,9 @@ import { VoiceSession } from "../voice.js";
 import { resolveWidgetImages, normaliseWidgetStyle, normaliseSelectAction, selectCall, fillSelectTemplate } from "../protocol.js";
 import { GraineFab, GraineTouchCapture } from "./fab.js";
 export { GraineFab, GraineTouchCapture } from "./fab.js";
+export { useKeyboardLift, liftFor } from "./keyboard.js";
+export { useDraggablePlacement } from "./placement.js";
+export { clampOffset, offsetDuringDrag, isTap, DRAG_SLOP_PX } from "./placement-math.js";
 export { widgetSurface } from "../protocol.js";
 export { resolveSurface } from "../protocol.js";
 import { resolveSurface } from "../protocol.js";
@@ -59,6 +62,8 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
     }, []);
     const [appearance, setAppearance] = useState(null);
     const [sessionReady, setSessionReady] = useState(false);
+    const [connectionQuality, setConnectionQuality] = useState("unknown");
+    const [network, setNetwork] = useState("unknown");
     const [chosenSurface, setChosenSurface] = useState(null);
     const surfacePolicy = useMemo(() => resolveSurface(appearance, chosenSurface ?? surfaceProp ?? null), [appearance, chosenSurface, surfaceProp]);
     const surface = surfacePolicy.start;
@@ -186,6 +191,15 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
             })),
             client.on("widget", (widget) => setWidgets((prev) => [...prev, widget])),
             client.on("mic_denied", (p) => emitEvent({ type: "mic_denied", reason: String(p?.reason || "NotAllowedError") })),
+            client.on("quality", (q) => {
+                const quality = (q?.quality ?? "unknown");
+                setConnectionQuality(quality);
+                emitEvent({ type: "connection_quality", quality, rtt: q?.rtt, jitter: q?.jitter, loss: q?.loss });
+            }),
+            client.on("network", (n) => {
+                setNetwork(n?.online ? "online" : "offline");
+                emitEvent({ type: "network", online: !!n?.online });
+            }),
             client.on("friction", (s) => emitEvent({ type: "friction_detected", name: String(s?.name ?? ""), screen: String(s?.screen ?? ""), detail: String(s?.detail ?? "") })),
             client.on("muted", (m) => {
                 setMutedState(m);
@@ -328,9 +342,12 @@ export function GraineProvider({ children, autoConnect = true, surface: surfaceP
         surfaces: surfacePolicy.allowed,
         canSwitch: surfacePolicy.canSwitch,
         setSurface,
+        connectionQuality,
+        network,
+        setVariables: (vars) => client.setVariables(vars),
     }), [client, connected, connecting, error, open, messages, widgets, muted, agentSpeaking, caption,
         launcherVisible, launcherInset, currentScreen, onEvent, appearance, sessionReady,
-        surface, surfacePolicy, setSurface]);
+        surface, surfacePolicy, setSurface, connectionQuality, network]);
     const wantsCapture = captureTaps ?? !!fab;
     const body = fab || wantsCapture ? (_jsxs(GraineTouchCapture, { enabled: wantsCapture, children: [children, fab ? _jsx(GraineFab, { ...fab }) : null] })) : children;
     return _jsx(Ctx.Provider, { value: value, children: body });
@@ -348,6 +365,18 @@ export function useGraineSurface() {
     const { surface, surfaces, canSwitch, setSurface } = useGraine();
     return { surface, surfaces, canSwitch, setSurface };
 }
+export function useGraineVariables() {
+    const { setVariables } = useGraine();
+    return setVariables;
+}
+export function useGraineConnection() {
+    const { connectionQuality, network } = useGraine();
+    return {
+        quality: connectionQuality,
+        online: network === "unknown" ? null : network === "online",
+        network,
+    };
+}
 export function useGraineEvents(handler) {
     const { onEvent } = useGraine();
     const ref = useRef(handler);

package/dist/react-native/keyboard-math.d.ts

@@ -0,0 +1 @@
+export declare function liftFor(keyboardHeight: number, windowShrink: number): number;

package/dist/react-native/keyboard-math.js

@@ -0,0 +1,6 @@
+export function liftFor(keyboardHeight, windowShrink) {
+    if (!(keyboardHeight > 0))
+        return 0;
+    const shrink = windowShrink > 0 ? windowShrink : 0;
+    return Math.max(0, Math.round(keyboardHeight - shrink));
+}

package/dist/react-native/keyboard.d.ts

@@ -0,0 +1,3 @@
+import { liftFor } from "./keyboard-math.js";
+export { liftFor };
+export declare function useKeyboardLift(): number;

package/dist/react-native/keyboard.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef, useState } from "react";
+import { Keyboard, Platform, useWindowDimensions } from "react-native";
+import { liftFor } from "./keyboard-math.js";
+export { liftFor };
+export function useKeyboardLift() {
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    const { height: windowHeight } = useWindowDimensions();
+    const tallestRef = useRef(windowHeight);
+    if (windowHeight > tallestRef.current)
+        tallestRef.current = windowHeight;
+    useEffect(() => {
+        const show = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+        const hide = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+        const onShow = (e) => setKeyboardHeight(Number(e?.endCoordinates?.height) || 0);
+        const onHide = () => setKeyboardHeight(0);
+        const a = Keyboard.addListener(show, onShow);
+        const b = Keyboard.addListener(hide, onHide);
+        return () => { a.remove(); b.remove(); };
+    }, []);
+    return liftFor(keyboardHeight, tallestRef.current - windowHeight);
+}

package/dist/react-native/placement-math.d.ts

@@ -0,0 +1,10 @@
+export declare const DRAG_SLOP_PX = 8;
+export interface PlacementBounds {
+    windowHeight: number;
+    baseBottom: number;
+    barHeight: number;
+    topMargin?: number;
+}
+export declare function clampOffset(offset: number, b: PlacementBounds): number;
+export declare function offsetDuringDrag(startOffset: number, dy: number, b: PlacementBounds): number;
+export declare function isTap(dx: number, dy: number): boolean;

package/dist/react-native/placement-math.js

@@ -0,0 +1,15 @@
+export const DRAG_SLOP_PX = 8;
+export function clampOffset(offset, b) {
+    if (!Number.isFinite(offset))
+        return 0;
+    const top = b.topMargin ?? 48;
+    const height = b.barHeight > 0 ? b.barHeight : 64;
+    const maxOffset = Math.max(0, b.windowHeight - top - height - b.baseBottom);
+    return Math.round(Math.min(Math.max(offset, 0), maxOffset));
+}
+export function offsetDuringDrag(startOffset, dy, b) {
+    return clampOffset(startOffset - dy, b);
+}
+export function isTap(dx, dy) {
+    return Math.abs(dx) < DRAG_SLOP_PX && Math.abs(dy) < DRAG_SLOP_PX;
+}

package/dist/react-native/placement.d.ts

@@ -0,0 +1,16 @@
+import { type GestureResponderHandlers } from "react-native";
+export interface DraggablePlacementOptions {
+    baseBottom: number;
+    enabled?: boolean;
+    initialOffset?: number;
+    onChange?: (offset: number) => void;
+    topMargin?: number;
+}
+export interface DraggablePlacement {
+    offset: number;
+    panHandlers: GestureResponderHandlers;
+    onLayout: (e: any) => void;
+    dragging: boolean;
+    reset: () => void;
+}
+export declare function useDraggablePlacement(opts: DraggablePlacementOptions): DraggablePlacement;

package/dist/react-native/placement.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { PanResponder, useWindowDimensions } from "react-native";
+import { clampOffset, isTap, offsetDuringDrag } from "./placement-math.js";
+export function useDraggablePlacement(opts) {
+    const { baseBottom, enabled = true, initialOffset, onChange, topMargin } = opts;
+    const { height: windowHeight } = useWindowDimensions();
+    const [offset, setOffset] = useState(() => initialOffset ?? 0);
+    const [barHeight, setBarHeight] = useState(0);
+    const [dragging, setDragging] = useState(false);
+    const boundsRef = useRef({ windowHeight, baseBottom, barHeight, topMargin });
+    boundsRef.current = { windowHeight, baseBottom, barHeight, topMargin };
+    const offsetRef = useRef(offset);
+    offsetRef.current = offset;
+    const changeRef = useRef(onChange);
+    changeRef.current = onChange;
+    const startRef = useRef(0);
+    useEffect(() => {
+        if (initialOffset !== undefined)
+            setOffset(clampOffset(initialOffset, boundsRef.current));
+    }, [initialOffset]);
+    useEffect(() => {
+        setOffset((cur) => clampOffset(cur, boundsRef.current));
+    }, [windowHeight, barHeight, baseBottom]);
+    const responder = useMemo(() => PanResponder.create({
+        onMoveShouldSetPanResponder: (_e, g) => enabled && !isTap(g.dx, g.dy),
+        onMoveShouldSetPanResponderCapture: (_e, g) => enabled && !isTap(g.dx, g.dy),
+        onPanResponderGrant: () => {
+            startRef.current = offsetRef.current;
+            setDragging(true);
+        },
+        onPanResponderMove: (_e, g) => {
+            setOffset(offsetDuringDrag(startRef.current, g.dy, boundsRef.current));
+        },
+        onPanResponderRelease: (_e, g) => {
+            const next = offsetDuringDrag(startRef.current, g.dy, boundsRef.current);
+            setOffset(next);
+            setDragging(false);
+            if (next !== startRef.current)
+                changeRef.current?.(next);
+        },
+        onPanResponderTerminate: () => {
+            setOffset(startRef.current);
+            setDragging(false);
+        },
+    }), [enabled]);
+    const onLayout = useCallback((e) => {
+        const h = Number(e?.nativeEvent?.layout?.height) || 0;
+        if (h > 0)
+            setBarHeight(h);
+    }, []);
+    const reset = useCallback(() => {
+        setOffset(0);
+        changeRef.current?.(0);
+    }, []);
+    return {
+        offset: enabled ? offset : 0,
+        panHandlers: enabled ? responder.panHandlers : {},
+        onLayout,
+        dragging,
+        reset,
+    };
+}

package/dist/react-native/ui.d.ts

@@ -17,7 +17,14 @@ export interface GraineAgentBarProps {
     captionsOn?: boolean;
     scheme?: "dark" | "light" | "auto";
     theme?: Partial<GraineBarTheme>;
+    draggable?: boolean;
+    placement?: {
+        bottomOffset?: number;
+    } | null;
+    onPlacementChange?: (placement: {
+        bottomOffset: number;
+    }) => void;
 }
-export declare function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset, hidden, captionsOn, scheme, theme: themeProp, }: GraineAgentBarProps): React.JSX.Element | null;
+export declare function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset, hidden, captionsOn, scheme, theme: themeProp, draggable, placement, onPlacementChange, }: GraineAgentBarProps): React.JSX.Element | null;
 export declare const GraineLauncher: typeof GraineAgentBar;
 export type GraineLauncherProps = GraineAgentBarProps;

package/dist/react-native/ui.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Image, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
+import { Image, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, useColorScheme, View, } from "react-native";
+import { useKeyboardLift } from "./keyboard.js";
+import { useDraggablePlacement } from "./placement.js";
 import { useGraineAgent } from "./index.js";
 import { GraineLoader } from "./loader.js";
 import { resolveNativeAppearance } from "./appearance.js";
@@ -22,8 +24,8 @@ const LIGHT = {
     onAccent: "#FFFFFF",
     danger: "#D32F2F",
 };
-export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset = 96, hidden = false, captionsOn = false, scheme = "auto", theme: themeProp, }) {
-    const { connected, connecting, error, messages, send, muted, setMuted, caption, agentSpeaking, launcherVisible, launcherInset, appearance, surface, canSwitch, setSurface, } = useGraineAgent();
+export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl: avatarProp, bottomInset = 96, hidden = false, captionsOn = false, scheme = "auto", theme: themeProp, draggable = true, placement, onPlacementChange, }) {
+    const { connected, connecting, error, messages, send, muted, setMuted, caption, agentSpeaking, launcherVisible, launcherInset, appearance, surface, canSwitch, setSurface, connectionQuality, network, } = useGraineAgent();
     const isChat = surface === "chat";
     const dashboard = resolveNativeAppearance(appearance, {
         accent: "#318CE7",
@@ -38,6 +40,14 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
         return makeStyles(themeProp ? { ...base, ...themeProp } : base);
     }, [scheme, deviceScheme, themeProp]);
     const [expanded, setExpanded] = useState(surface === "chat");
+    const keyboardLift = useKeyboardLift();
+    const baseBottom = launcherInset.bottom ?? bottomInset;
+    const drag = useDraggablePlacement({
+        baseBottom,
+        enabled: draggable,
+        initialOffset: placement?.bottomOffset,
+        onChange: (bottomOffset) => onPlacementChange?.({ bottomOffset }),
+    });
     const [captions, setCaptions] = useState(captionsOn);
     const [draft, setDraft] = useState("");
     const scrollRef = useRef(null);
@@ -46,11 +56,13 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
     const waitingMoment = "connecting";
     const status = error
         ? "unavailable"
-        : connecting ? "connecting…"
-            : muted ? "muted"
-                : agentSpeaking || (last?.role === "agent" && last.live) ? (isChat ? "replying" : "speaking")
-                    : connected ? (isChat ? "ready" : "listening")
-                        : "offline";
+        : network === "offline" ? "no connection"
+            : connecting ? "connecting…"
+                : muted ? "muted"
+                    : agentSpeaking || (last?.role === "agent" && last.live) ? (isChat ? "replying" : "speaking")
+                        : connected && connectionQuality === "poor" ? "weak connection"
+                            : connected ? (isChat ? "ready" : "listening")
+                                : "offline";
     useEffect(() => {
         if (expanded)
             requestAnimationFrame(() => scrollRef.current?.scrollToEnd({ animated: true }));
@@ -70,19 +82,20 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
     }, [draft, send]);
     if (hidden || error || !launcherVisible)
         return null;
-    return (_jsxs(View, { pointerEvents: "box-none", style: [
+    return (_jsxs(View, { pointerEvents: "box-none", ...drag.panHandlers, onLayout: drag.onLayout, style: [
             styles.root,
             {
-                bottom: launcherInset.bottom ?? bottomInset,
+                bottom: baseBottom + drag.offset + keyboardLift,
                 right: launcherInset.right ?? 12,
                 left: launcherInset.left ?? 12,
             },
-        ], children: [expanded && (_jsxs(View, { style: styles.panel, children: [_jsxs(ScrollView, { ref: scrollRef, style: styles.transcript, contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: isChat
+        ], children: [expanded && (_jsxs(View, { style: styles.panel, children: [_jsxs(ScrollView, { ref: scrollRef, style: [styles.transcript, keyboardLift ? styles.transcriptLifted : null], contentContainerStyle: styles.transcriptInner, showsVerticalScrollIndicator: false, children: [messages.length === 0 && (_jsx(Text, { style: styles.empty, children: isChat
                                     ? "I can see what you\u2019re working on \u2014 type a question, or I\u2019ll step in if you get stuck."
                                     : "I can see what you\u2019re working on \u2014 ask me anything, or I\u2019ll step in if you get stuck." })), messages.map((m, i) => (_jsx(View, { style: [
                                     styles.bubble,
                                     m.role === "agent" ? styles.agentBubble : [styles.customerBubble, { backgroundColor: accent }],
-                                ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, children: _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { style: styles.input, value: draft, onChangeText: setDraft, placeholder: "Type a message", placeholderTextColor: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && !isChat && caption?.text ? (_jsx(View, { style: styles.captionWrap, children: _jsx(Text, { numberOfLines: 3, style: [styles.caption, caption.live && styles.captionLive], children: caption.text }) })) : null, _jsxs(View, { style: styles.bar, children: [avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.avatarImage, accessibilityIgnoresInvertColors: true })) : (_jsx(View, { style: [styles.avatar, { backgroundColor: accent }], children: _jsx(Text, { style: styles.avatarGlyph, children: "\u2726" }) })), _jsxs(Pressable, { onPress: () => setExpanded((v) => !v), style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), canSwitch ? (_jsx(Pressable, { onPress: () => setSurface(isChat ? "voice" : "chat"), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: isChat ? "Switch to a call" : "Switch to chat", style: styles.round, children: _jsx(Text, { style: styles.glyph, children: isChat ? "📞" : "💬" }) })) : null, waiting ? null : (_jsxs(_Fragment, { children: [isChat ? null : (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, muted && styles.glyphOnAccent], children: muted ? "🔇" : "🎙" }) })] })), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] }))] })] }));
+                                ], children: _jsx(Text, { style: m.role === "agent" ? styles.agentText : styles.customerText, children: m.text }) }, i)))] }), _jsx(View, { children: _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { style: styles.input, value: draft, onChangeText: setDraft, placeholder: "Type a message", placeholderTextColor: styles.placeholder.color, onSubmitEditing: submit, returnKeyType: "send", blurOnSubmit: false }), _jsx(Pressable, { onPress: submit, disabled: !draft.trim(), accessibilityLabel: "Send", style: [styles.send, { backgroundColor: accent, opacity: draft.trim() ? 1 : 0.4 }], children: _jsx(Text, { style: styles.sendLabel, children: "\u2191" }) })] }) })] })), captions && !isChat && caption?.text ? (_jsx(View, { style: styles.captionWrap, children: _jsx(Text, { numberOfLines: 3, style: [styles.caption, caption.live && styles.captionLive], children: caption.text }) })) : null, _jsxs(View, { style: styles.bar, children: [avatarUrl ? (_jsx(Image, { source: { uri: avatarUrl }, style: styles.avatarImage, accessibilityIgnoresInvertColors: true })) : (_jsx(View, { style: [styles.avatar, { backgroundColor: accent }], children: _jsx(Text, { style: styles.avatarGlyph, children: "\u2726" }) })), _jsxs(Pressable, { onPress: () => { if (!drag.dragging)
+                            setExpanded((v) => !v); }, style: { flex: 1 }, accessibilityLabel: expanded ? "Collapse" : "Expand", children: [_jsx(Text, { style: styles.name, children: name }), waiting ? (_jsx(GraineLoader, { moment: waitingMoment, size: 15 })) : (_jsx(Text, { style: styles.status, children: status }))] }), canSwitch ? (_jsx(Pressable, { onPress: () => setSurface(isChat ? "voice" : "chat"), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: isChat ? "Switch to a call" : "Switch to chat", style: styles.round, children: _jsx(Text, { style: styles.glyph, children: isChat ? "📞" : "💬" }) })) : null, waiting ? null : (_jsxs(_Fragment, { children: [isChat ? null : (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: () => setCaptions((v) => !v), hitSlop: 8, accessibilityLabel: captions ? "Hide captions" : "Show captions", style: [styles.round, captions && { backgroundColor: accent }], children: _jsx(Text, { style: [styles.glyph, captions && styles.glyphOnAccent], children: "CC" }) }), _jsx(Pressable, { onPress: () => setMuted(!muted), disabled: !connected, hitSlop: 8, accessibilityLabel: muted ? "Unmute" : "Mute", style: [styles.round, muted && styles.muted, !connected && { opacity: 0.4 }], children: _jsx(Text, { style: [styles.glyph, muted && styles.glyphOnAccent], children: muted ? "🔇" : "🎙" }) })] })), _jsx(Pressable, { onPress: () => setExpanded((v) => !v), hitSlop: 8, accessibilityLabel: expanded ? "Collapse" : "Expand", style: styles.round, children: _jsx(Text, { style: styles.chevron, children: expanded ? "⌄" : "⌃" }) })] }))] })] }));
 }
 export const GraineLauncher = GraineAgentBar;
 const makeStyles = (t) => StyleSheet.create({
@@ -92,6 +105,7 @@ const makeStyles = (t) => StyleSheet.create({
         marginBottom: 8, overflow: "hidden",
     },
     transcript: { maxHeight: 240 },
+    transcriptLifted: { maxHeight: 150 },
     transcriptInner: { padding: 14, gap: 8 },
     empty: { color: t.sub, fontSize: 14, lineHeight: 21 },
     bubble: { maxWidth: "88%", paddingHorizontal: 12, paddingVertical: 9, borderRadius: 16 },

package/dist/react-native/voice-launcher.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { type Caption } from "./index.js";
+import type { ConnectionQuality } from "../protocol.js";
 export interface GraineVoiceLauncherProps {
     transport?: "ws" | "rtc";
     onTransport?: (info: {
@@ -26,6 +27,9 @@ export interface GraineVoiceLauncherProps {
     timing?: {
         readyTimeoutMs?: number;
         retryDelaysMs?: number[];
+        stallMs?: number;
+        bootMs?: number;
+        hardCapMs?: number;
         endWatchdogMs?: number;
     };
     children?: (api: GraineVoiceApi) => React.ReactNode;
@@ -52,6 +56,9 @@ export interface GraineVoiceApi {
     captionsOn: boolean;
     setCaptionsOn: (on: boolean) => void;
     clearCaptions: () => void;
+    quality: ConnectionQuality;
+    network: "online" | "offline" | "unknown";
+    reconnecting: boolean;
 }
 export declare const CAPTION_HISTORY = 12;
 export declare function GraineVoiceLauncher({ webView: WebView, autoStart, active: activeProp, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }: GraineVoiceLauncherProps): React.JSX.Element;

package/dist/react-native/voice-launcher.js

@@ -21,6 +21,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const [connecting, setConnecting] = useState(false);
     const [muted, setMutedState] = useState(false);
     const [ready, setReady] = useState(false);
+    const readyRef = useRef(false);
+    readyRef.current = ready;
     const [captions, setCaptions] = useState([]);
     const [awaitingAgent, setAwaitingAgent] = useState(false);
     const [captionsOn, setCaptionsOn] = useState(true);
@@ -45,9 +47,15 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const onErrorRef = useRef(onError);
     onErrorRef.current = onError;
     const READY_TIMEOUT_MS = timing?.readyTimeoutMs ?? 15000;
+    const STALL_TIMEOUT_MS = timing?.stallMs ?? READY_TIMEOUT_MS;
+    const BOOT_TIMEOUT_MS = timing?.bootMs ?? READY_TIMEOUT_MS;
+    const HARD_CAP_MS = timing?.hardCapMs ?? 120000;
     const RETRY_DELAYS_MS = timing?.retryDelaysMs ?? [1000, 2000, 4000, 8000, 15000, 15000];
     const END_WATCHDOG_MS = timing?.endWatchdogMs ?? 4000;
     const [connectivity, setConnectivity] = useState({ state: "loading", attempt: 0 });
+    const [quality, setQuality] = useState("unknown");
+    const [network, setNetwork] = useState("unknown");
+    const [reconnecting, setReconnecting] = useState(false);
     const attemptRef = useRef(0);
     const retryTimerRef = useRef(null);
     const readyTimerRef = useRef(null);
@@ -89,13 +97,48 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
             catch { }
         }, delay);
     }, []);
+    const progressRef = useRef(0);
+    const movedAtRef = useRef(0);
+    const loadStartedAtRef = useRef(0);
+    const downloadedRef = useRef(false);
+    const noteDownloaded = useCallback(() => {
+        downloadedRef.current = true;
+        movedAtRef.current = Date.now();
+    }, []);
+    const noteProgress = useCallback((p) => {
+        if (p <= progressRef.current)
+            return;
+        progressRef.current = p;
+        movedAtRef.current = Date.now();
+        if (p >= 1)
+            downloadedRef.current = true;
+    }, []);
     const armReadyTimer = useCallback(() => {
         clearTimer(readyTimerRef);
-        readyTimerRef.current = setTimeout(() => {
-            readyTimerRef.current = null;
-            scheduleRetry("ready-timeout");
-        }, READY_TIMEOUT_MS);
-    }, [scheduleRetry]);
+        progressRef.current = 0;
+        downloadedRef.current = false;
+        const now = Date.now();
+        loadStartedAtRef.current = now;
+        movedAtRef.current = now;
+        const tick = () => {
+            const since = Date.now() - movedAtRef.current;
+            const total = Date.now() - loadStartedAtRef.current;
+            const limit = downloadedRef.current ? BOOT_TIMEOUT_MS : STALL_TIMEOUT_MS;
+            if (since >= limit) {
+                readyTimerRef.current = null;
+                scheduleRetry(downloadedRef.current ? "boot-timeout" : "stalled");
+                return;
+            }
+            if (total >= HARD_CAP_MS) {
+                readyTimerRef.current = null;
+                scheduleRetry("load-cap");
+                return;
+            }
+            const floor = Math.min(250, limit / 4);
+            readyTimerRef.current = setTimeout(tick, Math.max(floor, Math.min(limit - since, HARD_CAP_MS - total)));
+        };
+        readyTimerRef.current = setTimeout(tick, Math.min(STALL_TIMEOUT_MS, 1000));
+    }, [scheduleRetry, STALL_TIMEOUT_MS, BOOT_TIMEOUT_MS, HARD_CAP_MS]);
     const restartLoad = useCallback(() => {
         clearTimer(retryTimerRef);
         attemptRef.current = 0;
@@ -223,7 +266,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
             case "graine:ready":
                 post({
                     type: "graine:variables",
-                    variables: { ...(client.opts.variables ?? {}), ...client.getIdentity() },
+                    variables: client.getVariables(),
                 });
                 clearTimer(readyTimerRef);
                 clearTimer(retryTimerRef);
@@ -241,8 +284,10 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 }
                 return;
             case "graine:call":
-                if (msg.connected)
+                if (msg.connected) {
                     endedNotifiedRef.current = false;
+                    setReconnecting(false);
+                }
                 setConnected(!!msg.connected);
                 setConnecting(!!msg.connecting);
                 client.emit?.("call_state", { connected: !!msg.connected, connecting: !!msg.connecting });
@@ -278,12 +323,27 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 clearTimer(endWatchdogRef);
                 setConnected(false);
                 setConnecting(false);
+                setReconnecting(false);
+                setQuality(client.reportQuality(null));
                 connectedRef.current = false;
                 if (!endedNotifiedRef.current) {
                     endedNotifiedRef.current = true;
                     onEnded?.();
                 }
                 return;
+            case "graine:quality":
+                setQuality(client.reportQuality(msg.sample && typeof msg.sample === "object" ? msg.sample : null));
+                return;
+            case "graine:network":
+                setNetwork(msg.online ? "online" : "offline");
+                client.reportNetwork(!!msg.online);
+                setQuality(client.connectionQuality);
+                return;
+            case "graine:reconnecting":
+                setReconnecting(!!msg.active);
+                if (msg.active)
+                    setConnecting(true);
+                return;
             case "graine:mic-denied":
                 client.emit("mic_denied", { reason: String(msg.reason || "NotAllowedError") });
                 onMicDenied?.(String(msg.reason || "denied"));
@@ -308,7 +368,7 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     }, [autoStart, beginCall, client, onCaption, onCallState, onMicDenied, onTransport, onError, onEnded, post, pushContext, foldCaption]);
     const pendingStartRef = useRef(false);
     const lastCaption = captions.length ? captions[captions.length - 1] : null;
-    const phase = connectivity.state === "failed" || connectivity.state === "retrying" ? "reconnecting"
+    const phase = reconnecting || connectivity.state === "failed" || connectivity.state === "retrying" ? "reconnecting"
         : connecting || (!ready && !!voiceAgentId) ? "connecting"
             : !connected ? "idle"
                 : lastCaption?.role === "agent" && lastCaption.live ? "speaking"
@@ -339,11 +399,21 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         end: useCallback(() => { post({ type: "graine:end-call" }); armEndWatchdog(); }, [post, armEndWatchdog]),
         connectivity,
         retry: restartLoad,
+        quality,
+        network,
+        reconnecting,
         setMuted: useCallback((m) => {
             setMutedState(m);
             post({ type: "graine:set-muted", muted: m });
         }, [post]),
     };
+    useEffect(() => {
+        if (!ready)
+            return;
+        return client.on("variables", (vars) => {
+            post({ type: "graine:variables", variables: vars });
+        });
+    }, [client, ready, post]);
     useEffect(() => () => { post({ type: "graine:end-call" }); }, [post]);
     const activeSeenRef = useRef(null);
     useEffect(() => {
@@ -395,6 +465,8 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                     pending = null;
                 }
                 pushContext();
+                if (readyRef.current && !startedRef.current && !connectedRef.current)
+                    post({ type: "graine:warm" });
                 return;
             }
             if (next === "background" && wasActive && !pending) {
@@ -413,9 +485,9 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
     const effectiveTransport = transport ?? (appearance?.audioTransport === "rtc" ? "rtc" : "ws");
     const src = `${client.opts.baseUrl.replace(/\/$/, "")}/embed/${voiceAgentId}` +
         `?mode=voice&branding=0&embed=1&transport=${effectiveTransport}` +
-        `&b=${mountStampRef.current}` +
+        `&b=${client.config?.pageVersion ?? mountStampRef.current}` +
         (mountedIdleRef.current ? "&idle=1" : "") +
         `&pk=${encodeURIComponent(client.opts.publishableKey)}` +
         (appearance?.accent ? `&accent=${encodeURIComponent(String(appearance.accent).replace("#", ""))}` : "");
-    return (_jsxs(_Fragment, { children: [_jsx(View, { style: { position: "absolute", width: 1, height: 1, opacity: 0, bottom: 0, left: 0 }, pointerEvents: "none", children: _jsx(WebView, { ref: ref, source: { uri: src }, originWhitelist: ["*"], javaScriptEnabled: true, domStorageEnabled: true, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, mediaCapturePermissionGrantType: "grant", onMessage: onMessage, onLoadStart: armReadyTimer, onError: (e) => scheduleRetry(`load-error:${e?.nativeEvent?.code ?? ""}`), onHttpError: (e) => scheduleRetry(`http-${e?.nativeEvent?.statusCode ?? ""}`), onRenderProcessGone: () => scheduleRetry("render-process-gone"), style: { width: 1, height: 1, backgroundColor: "transparent" } }) }), children?.(api)] }));
+    return (_jsxs(_Fragment, { children: [_jsx(View, { style: { position: "absolute", width: 1, height: 1, opacity: 0, bottom: 0, left: 0 }, pointerEvents: "none", children: _jsx(WebView, { ref: ref, source: { uri: src }, originWhitelist: ["*"], javaScriptEnabled: true, domStorageEnabled: true, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, mediaCapturePermissionGrantType: "grant", onMessage: onMessage, onLoadStart: armReadyTimer, onLoadProgress: (e) => noteProgress(Number(e?.nativeEvent?.progress) || 0), onLoadEnd: noteDownloaded, onError: (e) => scheduleRetry(`load-error:${e?.nativeEvent?.code ?? ""}`), onHttpError: (e) => scheduleRetry(`http-${e?.nativeEvent?.statusCode ?? ""}`), onRenderProcessGone: () => scheduleRetry("render-process-gone"), style: { width: 1, height: 1, backgroundColor: "transparent" } }) }), children?.(api)] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "type": "module",
   "description": "Graine in-app agent for React Native — an agent that sees the screen your customer is on and can act on it.",
   "license": "MIT",