@graineai/inapp-react-native 0.33.6 → 0.35.0

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { type ActionHandler, type AppActionResult, type AppEvent, type ScreenContext, type ScreenField } 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);
@@ -66,6 +77,12 @@ export declare class GraineInAppClient {
     private lastWidget;
     get pendingWidget(): any;
     clearPendingWidget(): void;
+    private voiceHost;
+    get hasVoiceHost(): boolean;
+    setVoiceHost(on: boolean): void;
+    private currentSurface;
+    get surface(): AgentSurface;
+    setSurface(next: AgentSurface): void;
     emit(event: string, payload?: any): void;
     private get fetch();
     session(): Promise<SessionConfig>;
@@ -73,6 +90,7 @@ export declare class GraineInAppClient {
     private reportActionMismatch;
     private ticket;
     connect(): Promise<void>;
+    private get socketIsVoice();
     private openSocket;
     private send;
     private onFrame;

package/dist/client.js

@@ -1,9 +1,66 @@
-import { 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,9 +83,14 @@ 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;
+        this.voiceHost = false;
+        this.currentSurface = "voice";
         if (!opts?.publishableKey)
             throw new Error("[Graine] publishableKey is required.");
         if (!opts?.baseUrl)
@@ -64,6 +126,26 @@ export class GraineInAppClient {
     clearPendingWidget() {
         this.lastWidget = null;
     }
+    get hasVoiceHost() {
+        return this.voiceHost;
+    }
+    setVoiceHost(on) {
+        if (this.voiceHost === on)
+            return;
+        this.voiceHost = on;
+        this.emit("voice_host", { present: on });
+    }
+    get surface() {
+        return this.currentSurface;
+    }
+    setSurface(next) {
+        if (next !== "voice" && next !== "chat")
+            return;
+        if (this.currentSurface === next)
+            return;
+        this.currentSurface = next;
+        this.emit("surface", { surface: next });
+    }
     emit(event, payload) {
         if (event === "widget")
             this.lastWidget = payload ?? null;
@@ -138,7 +220,8 @@ export class GraineInAppClient {
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
                     publishableKey: this.opts.publishableKey,
-                    mode: this.opts.voice ? "voice" : "text",
+                    mode: this.socketIsVoice ? "voice" : "text",
+                    metadata: variablesForTicket(this.allVariables()),
                 }),
             });
             if (!res.ok)
@@ -157,6 +240,9 @@ export class GraineInAppClient {
         this.connecting = this.openSocket().finally(() => { this.connecting = null; });
         return this.connecting;
     }
+    get socketIsVoice() {
+        return !!this.opts.voice && this.currentSurface !== "chat";
+    }
     async openSocket() {
         if (!this.config)
             await this.session();
@@ -171,10 +257,13 @@ export class GraineInAppClient {
         }
         else {
             const host = (this.config.wsHost || "wss://ws.graine.ai").replace(/\/$/, "");
-            const mode = this.opts.voice ? "webcall=1" : "text_chat=1";
+            const mode = this.socketIsVoice ? "webcall=1" : "text_chat=1";
             url = `${host}/chat/v1/${encodeURIComponent(agentId)}?${mode}`;
             this.transport = "direct";
         }
+        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;
         const ws = new WS(url, protocols);
         this.ws = ws;
@@ -199,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);
@@ -232,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;
@@ -526,6 +622,7 @@ export class GraineInAppClient {
     identify(user) {
         if (!user) {
             this.identity = {};
+            this.emit("variables", this.allVariables());
             return;
         }
         const flat = {};
@@ -535,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

@@ -6,6 +6,11 @@ export { LOADER_KINDS, LOADER_SIZES, LOADER_SPEEDS, LOADER_MOMENTS, DEFAULT_LOAD
 export type { LoaderKind, LoaderSize, LoaderSpeed, LoaderMoment, LoaderText, LoaderStyle, LoaderLook } from "./protocol.js";
 export { normaliseSelectAction, fillSelectArgs, fillSelectTemplate, selectCall, NAVIGATE_ACTION, SELECT_ARG_MAX, SELECT_VALUE_MAX } from "./protocol.js";
 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";
@@ -18,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, 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

@@ -3,6 +3,9 @@ export { WIDGET_PRESETS, WIDGET_IMAGE_SIZES, WIDGET_DENSITIES, WIDGET_BUTTONS, W
 export { LOADER_KINDS, LOADER_SIZES, LOADER_SPEEDS, LOADER_MOMENTS, DEFAULT_LOADER_KIND, DEFAULT_LOADER_TEXT, LOADER_TEXT_MAX, normaliseLoaderStyle, resolveLoader, } from "./protocol.js";
 export { normaliseSelectAction, fillSelectArgs, fillSelectTemplate, selectCall, NAVIGATE_ACTION, SELECT_ARG_MAX, SELECT_VALUE_MAX } from "./protocol.js";
 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";
@@ -11,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, 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

@@ -179,3 +179,33 @@ export declare function selectCall(onSelect: WidgetSelectAction | undefined | nu
     args: Record<string, string>;
 } | null;
 export declare function fillSelectArgs(args: Record<string, string> | undefined, item: Record<string, unknown>): Record<string, string>;
+export declare function contextToken(variables: Record<string, unknown> | null | undefined, callType?: string): string | null;
+export type AgentSurface = "voice" | "chat";
+export interface SurfacePolicy {
+    allowed: AgentSurface[];
+    start: AgentSurface;
+    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

@@ -261,3 +261,131 @@ export function fillSelectArgs(args, item) {
         out[k] = fillSelectTemplate(v, item);
     return out;
 }
+export function contextToken(variables, callType = "webcall") {
+    const vals = {};
+    for (const [k, v] of Object.entries(variables ?? {})) {
+        if (v === null || v === undefined || typeof v === "object")
+            continue;
+        const key = String(k).trim();
+        if (key)
+            vals[key] = typeof v === "string" ? v : String(v);
+    }
+    if (!Object.keys(vals).length)
+        return null;
+    const payload = { ...vals, call_type: callType, recipient_data: { ...vals, call_type: callType } };
+    try {
+        return base64(JSON.stringify(payload));
+    }
+    catch {
+        return null;
+    }
+}
+const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+function base64(text) {
+    const bytes = [];
+    for (let i = 0; i < text.length; i++) {
+        let c = text.charCodeAt(i);
+        if (c < 0x80)
+            bytes.push(c);
+        else if (c < 0x800)
+            bytes.push(0xc0 | (c >> 6), 0x80 | (c & 0x3f));
+        else if (c >= 0xd800 && c <= 0xdbff && i + 1 < text.length) {
+            const lo = text.charCodeAt(++i);
+            c = 0x10000 + ((c - 0xd800) << 10) + (lo - 0xdc00);
+            bytes.push(0xf0 | (c >> 18), 0x80 | ((c >> 12) & 0x3f), 0x80 | ((c >> 6) & 0x3f), 0x80 | (c & 0x3f));
+        }
+        else
+            bytes.push(0xe0 | (c >> 12), 0x80 | ((c >> 6) & 0x3f), 0x80 | (c & 0x3f));
+    }
+    let out = "";
+    for (let i = 0; i < bytes.length; i += 3) {
+        const b0 = bytes[i], b1 = bytes[i + 1], b2 = bytes[i + 2];
+        out += B64[b0 >> 2];
+        out += B64[((b0 & 3) << 4) | ((b1 ?? 0) >> 4)];
+        out += b1 === undefined ? "=" : B64[((b1 & 15) << 2) | ((b2 ?? 0) >> 6)];
+        out += b2 === undefined ? "=" : B64[b2 & 63];
+    }
+    return out;
+}
+export function resolveSurface(appearance, prefer) {
+    const mode = String(appearance?.mode ?? "both").toLowerCase();
+    const allowed = mode === "voice" ? ["voice"] : mode === "chat" ? ["chat"] : ["voice", "chat"];
+    const configured = String(appearance?.start ?? "").toLowerCase();
+    const start = prefer && allowed.includes(prefer)
+        ? prefer
+        : configured === "chat" || configured === "voice"
+            ? allowed.includes(configured)
+                ? configured
+                : allowed[0]
+            : 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,8 +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, 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 {
@@ -31,6 +40,13 @@ interface GraineContextValue {
     onEvent: (fn: (e: GraineEvent) => void) => () => void;
     track: (name: string, data?: Record<string, unknown>) => void;
     identify: (user: Record<string, unknown> | null) => void;
+    surface: AgentSurface;
+    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";
@@ -68,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;
@@ -97,6 +122,8 @@ export interface GraineProviderProps extends Partial<GraineInAppOptions> {
     children: React.ReactNode;
     client?: GraineInAppClient;
     autoConnect?: boolean;
+    surface?: AgentSurface;
+    onSurfaceChange?: (surface: AgentSurface) => void;
     onProactive?: (text: string) => void;
     endOnBackground?: boolean;
     navigationRef?: {
@@ -112,8 +139,20 @@ export interface GraineProviderProps extends Partial<GraineInAppOptions> {
     launcherDelayMs?: number;
     visibility?: LauncherVisibility;
 }
-export declare function GraineProvider({ children, autoConnect, onProactive, endOnBackground, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs, visibility, client: providedClient, ...options }: GraineProviderProps): React.JSX.Element;
+export declare function GraineProvider({ children, autoConnect, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs, visibility, client: providedClient, ...options }: GraineProviderProps): React.JSX.Element;
 export declare function useGraineAgent(): GraineContextValue;
+export declare function useGraineSurface(): {
+    surface: AgentSurface;
+    surfaces: AgentSurface[];
+    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,7 +6,12 @@ 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";
 import { LauncherVisibilityTracker, activeRouteName, } from "./navigation.js";
 export const PENDING_WIDGET_MS = 12000;
 export const AWAITING_REPLY_MS = 12000;
@@ -24,7 +29,7 @@ export function useGraineClient() {
     }
     return client;
 }
-export function GraineProvider({ children, autoConnect = true, onProactive, endOnBackground = true, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs = 0, visibility, client: providedClient, ...options }) {
+export function GraineProvider({ children, autoConnect = true, surface: surfaceProp, onSurfaceChange, onProactive, endOnBackground = true, navigationRef, fab, captureTaps, appVersion, friction, includeScreens, launcherDelayMs = 0, visibility, client: providedClient, ...options }) {
     const clientRef = useRef(null);
     if (!clientRef.current) {
         clientRef.current =
@@ -57,6 +62,30 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
     }, []);
     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;
+    const surfaceRef = useRef(surface);
+    surfaceRef.current = surface;
+    const surfaceChangeRef = useRef(onSurfaceChange);
+    surfaceChangeRef.current = onSurfaceChange;
+    const setSurface = useCallback((next) => {
+        if (next !== "voice" && next !== "chat")
+            return;
+        setChosenSurface((cur) => (cur === next ? cur : next));
+    }, []);
+    const announcedSurfaceRef = useRef(null);
+    useEffect(() => { client.setSurface(surface); }, [client, surface]);
+    useEffect(() => {
+        if (announcedSurfaceRef.current === surface)
+            return;
+        const first = announcedSurfaceRef.current === null;
+        announcedSurfaceRef.current = surface;
+        if (!first)
+            surfaceChangeRef.current?.(surface);
+    }, [surface]);
     const [currentScreen, setCurrentScreen] = useState(null);
     const [launcherVisible, setLauncherVisible] = useState(false);
     const [launcherInset, setLauncherInset] = useState({ right: 16, bottom: 20 });
@@ -162,6 +191,15 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
             })),
             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);
@@ -212,7 +250,7 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
             client.highlight(name, Number(args?.ttl_ms) || 6000);
             return { status: "ok", message: `Highlighted ${name} for the customer.` };
         }));
-        if (autoConnect) {
+        if (autoConnect && !(client.hasVoiceHost && surfaceRef.current !== "chat")) {
             setConnecting(true);
             client.connect().catch((err) => {
                 setConnecting(false);
@@ -225,6 +263,27 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
             client.close();
         };
     }, [client, autoConnect]);
+    useEffect(() => {
+        const apply = () => {
+            if (!client.hasVoiceHost)
+                return;
+            if (surface === "chat") {
+                if (client.isConnected)
+                    return;
+                setConnecting(true);
+                client.connect().catch((err) => {
+                    setConnecting(false);
+                    console.error("[Graine]", err?.message ?? err);
+                    setError(err?.message ?? "Could not start the chat.");
+                });
+                return;
+            }
+            client.close();
+            setConnecting(false);
+        };
+        apply();
+        return client.on("voice_host", apply);
+    }, [client, surface]);
     useEffect(() => {
         if (!endOnBackground)
             return;
@@ -279,8 +338,16 @@ export function GraineProvider({ children, autoConnect = true, onProactive, endO
         onEvent,
         track: (name, data) => client.track(name, data),
         identify: (user) => client.identify(user),
+        surface,
+        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]);
+        launcherVisible, launcherInset, currentScreen, onEvent, appearance, sessionReady,
+        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 });
@@ -294,6 +361,22 @@ function useGraine() {
 export function useGraineAgent() {
     return useGraine();
 }
+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,9 @@ 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, } = 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",
         heading: "Assistant",
@@ -36,7 +39,15 @@ export function GraineAgentBar({ accent: accentProp, name: nameProp, avatarUrl:
         const base = (scheme === "auto" ? deviceScheme === "light" : scheme === "light") ? LIGHT : DARK;
         return makeStyles(themeProp ? { ...base, ...themeProp } : base);
     }, [scheme, deviceScheme, themeProp]);
-    const [expanded, setExpanded] = useState(false);
+    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);
@@ -45,15 +56,19 @@ 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) ? "speaking"
-                    : connected ? "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 }));
     }, [messages, expanded]);
+    useEffect(() => { if (surface === "chat")
+        setExpanded(true); }, [surface]);
     useEffect(() => {
         if (!expanded && last?.role === "agent")
             setExpanded(true);
@@ -67,17 +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: "I can see what you're working on \u2014 ask me anything, or I'll step in if you get stuck." })), messages.map((m, i) => (_jsx(View, { style: [
+        ], 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 && 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 }))] }), waiting ? 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({
@@ -87,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, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }: GraineVoiceLauncherProps): React.JSX.Element;
+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

@@ -4,9 +4,14 @@ import { AppState, View } from "react-native";
 import { useGraineAgent } from "./index.js";
 import { requestMicrophonePermission } from "./permissions.js";
 export const CAPTION_HISTORY = 12;
-export function GraineVoiceLauncher({ webView: WebView, autoStart = false, active = true, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }) {
-    const { client, appearance } = useGraineAgent();
+export function GraineVoiceLauncher({ webView: WebView, autoStart = false, active: activeProp = true, transport, onTransport, onCaption, onCallState, onMicDenied, onError, timing, onEnded, children, }) {
+    const { client, appearance, surface, surfaces } = useGraineAgent();
+    const active = activeProp && surface !== "chat";
     const ref = useRef(null);
+    useEffect(() => {
+        client.setVoiceHost(true);
+        return () => client.setVoiceHost(false);
+    }, [client]);
     const startedRef = useRef(false);
     const activeRef = useRef(active);
     activeRef.current = active;
@@ -40,9 +45,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);
@@ -84,13 +95,47 @@ 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;
+            }
+            readyTimerRef.current = setTimeout(tick, Math.max(250, 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;
@@ -216,6 +261,10 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
                 }
                 return;
             case "graine:ready":
+                post({
+                    type: "graine:variables",
+                    variables: client.getVariables(),
+                });
                 clearTimer(readyTimerRef);
                 clearTimer(retryTimerRef);
                 attemptRef.current = 0;
@@ -232,8 +281,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 });
@@ -269,12 +320,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"));
@@ -299,7 +365,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"
@@ -330,11 +396,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(() => {
@@ -399,14 +475,14 @@ export function GraineVoiceLauncher({ webView: WebView, autoStart = false, activ
         return () => { if (pending)
             clearTimeout(pending); sub.remove(); };
     }, [post]);
-    if (!voiceAgentId)
+    if (!voiceAgentId || !surfaces.includes("voice"))
         return _jsx(_Fragment, { children: children?.(api) });
     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,8 +1,8 @@
 {
   "name": "@graineai/inapp-react-native",
-  "version": "0.33.6",
+  "version": "0.35.0",
   "type": "module",
-  "description": "Graine in-app agent for React Native \u2014 an agent that sees the screen your customer is on and can act on it.",
+  "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",
   "private": false,
   "main": "dist/index.js",