@alivelabs/expo-orchestrator-react-client 0.1.0

package/README.md

@@ -0,0 +1,123 @@
+# @alivelabs/expo-orchestrator-react-client
+
+React client for the Expo CI Orchestrator. Renders a live build session in the browser: streaming logs, live iOS simulator video, session status, and interactive controls (tap, swipe, type, keypress).
+
+## Install
+
+```bash
+npm install @alivelabs/expo-orchestrator-react-client
+# peer deps
+npm install react react-dom
+```
+
+## Quick start
+
+```tsx
+import { SessionViewer } from "@alivelabs/expo-orchestrator-react-client";
+
+function App() {
+  return (
+    <SessionViewer
+      sessionId="abc-123"
+      apiToken="your-api-token"
+      baseUrl="https://your-orchestrator.example.com"
+    />
+  );
+}
+```
+
+## Hook usage
+
+```tsx
+import { useExpoCiSession } from "@alivelabs/expo-orchestrator-react-client";
+
+function BuildPage() {
+  const { status, logs, frame, connected, error, sendInput, reconnect } = useExpoCiSession({
+    sessionId: "abc-123",
+    apiToken: "your-api-token",
+    baseUrl: "https://your-orchestrator.example.com",
+    autoConnect: true, // default
+    maxLogs: 2000,     // default
+  });
+
+  return (
+    <div>
+      <p>Status: {status} — {connected ? "live" : "disconnected"}</p>
+      {frame && <img src={frame} alt="simulator" />}
+      <button onClick={() => sendInput({ type: "keypress", key: "home" })}>Home</button>
+      {!connected && <button onClick={reconnect}>Reconnect</button>}
+    </div>
+  );
+}
+```
+
+## Exports reference
+
+| Export | Kind | Description |
+|---|---|---|
+| `SessionViewer` | Component | All-in-one: status badge, simulator screen, log console, interaction controls |
+| `SimulatorScreen` | Component | Renders the current frame; click = tap, click-drag = swipe |
+| `LogConsole` | Component | Scrollable, color-coded, auto-scrolling log viewer |
+| `StatusBadge` | Component | Colored pill showing session status |
+| `useExpoCiSession` | Hook | React hook wrapping `ExpoCiClient` with state management |
+| `ExpoCiClient` | Class | Framework-agnostic client: REST + WebSocket with auto-reconnect |
+
+### `<SessionViewer>` props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `sessionId` | `string` | yes | — | The session to display |
+| `apiToken` | `string` | yes | — | Bearer token for the API |
+| `baseUrl` | `string` | no | `http://localhost:3000` | Orchestrator base URL |
+| `className` | `string` | no | — | CSS class applied to the root element |
+
+### `<SimulatorScreen>` props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `frame` | `string \| null` | yes | Current frame as a `data:image/jpeg;base64,...` string |
+| `onTap` | `(input: { type: "tap"; x: number; y: number }) => void` | no | Called on click |
+| `onSwipe` | `(input: { type: "swipe"; fromX: number; fromY: number; toX: number; toY: number }) => void` | no | Called on drag |
+
+### `<LogConsole>` props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `logs` | `LogEntry[]` | yes | — | Array of log entries |
+| `maxHeight` | `string \| number` | no | `400` | CSS max-height of the scroll area |
+
+### `<StatusBadge>` props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `status` | `SessionStatus \| null` | yes | Session status to display |
+
+### `useExpoCiSession` options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `sessionId` | `string` | — | Required |
+| `apiToken` | `string` | — | Required |
+| `baseUrl` | `string` | `http://localhost:3000` | Orchestrator base URL |
+| `autoConnect` | `boolean` | `true` | Open WebSocket immediately on mount |
+| `maxLogs` | `number` | `2000` | Max log lines retained in state |
+
+### `ExpoCiClient` API
+
+```ts
+const client = new ExpoCiClient({ sessionId, apiToken, baseUrl });
+
+client.getSession()              // GET /api/sessions/:id → SessionDetail
+client.getLogs()                 // GET /api/sessions/:id/logs → SessionLogs
+client.sendInput(input)          // POST /api/sessions/:id/simulator/input
+client.getScreenshotObjectUrl()  // GET /api/sessions/:id/screenshot → object URL (fetch + blob)
+
+client.connect()                 // Open WebSocket (auto-reconnect with exponential backoff)
+client.disconnect()              // Close WebSocket and remove all listeners
+
+// Typed event emitter
+const off = client.on("video-frame", (msg) => console.log(msg.data));
+off(); // unsubscribe
+```
+
+Events: `open`, `close`, `connected`, `log`, `video-frame`, `status`, `error`.

package/dist/client.d.ts

@@ -0,0 +1,37 @@
+import type { ClientEventMap, SessionDetail, SessionLogs, SimulatorInput, SimulatorInputResponse } from "./types.js";
+type Listener<T> = T extends undefined ? () => void : (data: T) => void;
+type EventMap = Record<string, any>;
+declare class TypedEventEmitter<Events extends EventMap> {
+    private readonly listeners;
+    on<K extends keyof Events & string>(event: K, listener: Listener<Events[K]>): () => void;
+    off<K extends keyof Events & string>(event: K, listener: Listener<Events[K]>): void;
+    emit<K extends keyof Events & string>(event: K, ...args: Events[K] extends undefined ? [] : [Events[K]]): void;
+    removeAllListeners(): void;
+}
+export interface ExpoCiClientOptions {
+    baseUrl?: string;
+    sessionId: string;
+    apiToken: string;
+}
+export declare class ExpoCiClient extends TypedEventEmitter<ClientEventMap> {
+    private readonly baseUrl;
+    readonly sessionId: string;
+    private readonly apiToken;
+    private ws;
+    private reconnectTimer;
+    private attemptCount;
+    private destroyed;
+    constructor({ baseUrl, sessionId, apiToken }: ExpoCiClientOptions);
+    private restFetch;
+    getSession(): Promise<SessionDetail>;
+    getLogs(): Promise<SessionLogs>;
+    sendInput(input: SimulatorInput): Promise<SimulatorInputResponse>;
+    getScreenshotObjectUrl(): Promise<string>;
+    private get wsUrl();
+    connect(): void;
+    private openSocket;
+    private scheduleReconnect;
+    disconnect(): void;
+}
+export {};
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,cAAc,EACd,sBAAsB,EAEvB,MAAM,YAAY,CAAC;AAIpB,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;AAGxE,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEpC,cAAM,iBAAiB,CAAC,MAAM,SAAS,QAAQ;IAC7C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAwD;IAElF,EAAE,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IASxF,GAAG,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;IAInF,IAAI,CAAC,CAAC,SAAS,MAAM,MAAM,GAAG,MAAM,EAClC,KAAK,EAAE,CAAC,EACR,GAAG,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,SAAS,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GACtD,IAAI;IAQP,kBAAkB,IAAI,IAAI;CAG3B;AAUD,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,qBAAa,YAAa,SAAQ,iBAAiB,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,EAAE,CAA0B;IACpC,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,SAAS,CAAS;gBAEd,EAAE,OAAiC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,mBAAmB;YAU7E,SAAS;IAgBvB,UAAU,IAAI,OAAO,CAAC,aAAa,CAAC;IAIpC,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC;IAI/B,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,sBAAsB,CAAC;IAU3D,sBAAsB,IAAI,OAAO,CAAC,MAAM,CAAC;IAc/C,OAAO,KAAK,KAAK,GAKhB;IAED,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,UAAU;IAyDlB,OAAO,CAAC,iBAAiB;IASzB,UAAU,IAAI,IAAI;CAYnB"}

package/dist/client.js

@@ -0,0 +1,172 @@
+class TypedEventEmitter {
+    constructor() {
+        this.listeners = new Map();
+    }
+    on(event, listener) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        // biome-ignore lint/style/noNonNullAssertion: just set above
+        this.listeners.get(event).add(listener);
+        return () => this.off(event, listener);
+    }
+    off(event, listener) {
+        this.listeners.get(event)?.delete(listener);
+    }
+    emit(event, ...args) {
+        const set = this.listeners.get(event);
+        if (!set)
+            return;
+        for (const listener of set) {
+            listener(...args);
+        }
+    }
+    removeAllListeners() {
+        this.listeners.clear();
+    }
+}
+// ── Reconnect config ──────────────────────────────────────────────────────────
+const INITIAL_DELAY_MS = 500;
+const MAX_DELAY_MS = 30000;
+const MAX_ATTEMPTS = 10;
+export class ExpoCiClient extends TypedEventEmitter {
+    constructor({ baseUrl = "http://localhost:3000", sessionId, apiToken }) {
+        super();
+        this.ws = null;
+        this.reconnectTimer = null;
+        this.attemptCount = 0;
+        this.destroyed = false;
+        // Normalize: strip trailing slash
+        this.baseUrl = baseUrl.replace(/\/+$/, "");
+        this.sessionId = sessionId;
+        this.apiToken = apiToken;
+    }
+    // ── REST helpers ────────────────────────────────────────────────────────────
+    async restFetch(path, init) {
+        const url = `${this.baseUrl}${path}`;
+        const res = await fetch(url, {
+            ...init,
+            headers: {
+                Authorization: `Bearer ${this.apiToken}`,
+                "Content-Type": "application/json",
+                ...(init?.headers ?? {}),
+            },
+        });
+        if (!res.ok) {
+            throw new Error(`HTTP ${res.status} ${res.statusText} — ${url}`);
+        }
+        return res.json();
+    }
+    getSession() {
+        return this.restFetch(`/api/sessions/${this.sessionId}`);
+    }
+    getLogs() {
+        return this.restFetch(`/api/sessions/${this.sessionId}/logs`);
+    }
+    sendInput(input) {
+        return this.restFetch(`/api/sessions/${this.sessionId}/simulator/input`, {
+            method: "POST",
+            body: JSON.stringify(input),
+        });
+    }
+    async getScreenshotObjectUrl() {
+        const url = `${this.baseUrl}/api/sessions/${this.sessionId}/screenshot`;
+        const res = await fetch(url, {
+            headers: { Authorization: `Bearer ${this.apiToken}` },
+        });
+        if (!res.ok) {
+            throw new Error(`HTTP ${res.status} ${res.statusText} — ${url}`);
+        }
+        const blob = await res.blob();
+        return URL.createObjectURL(blob);
+    }
+    // ── WebSocket ───────────────────────────────────────────────────────────────
+    get wsUrl() {
+        // Derive ws:// / wss:// from the baseUrl scheme
+        const httpUrl = this.baseUrl;
+        const wsBase = httpUrl.replace(/^https/, "wss").replace(/^http/, "ws");
+        return `${wsBase}/ws/sessions/${this.sessionId}?token=${encodeURIComponent(this.apiToken)}`;
+    }
+    connect() {
+        if (this.destroyed)
+            return;
+        this.attemptCount = 0;
+        this.openSocket();
+    }
+    openSocket() {
+        if (this.destroyed)
+            return;
+        const socket = new WebSocket(this.wsUrl);
+        this.ws = socket;
+        socket.addEventListener("open", () => {
+            if (this.destroyed) {
+                socket.close();
+                return;
+            }
+            this.attemptCount = 0;
+            this.emit("open");
+        });
+        socket.addEventListener("message", (event) => {
+            if (this.destroyed)
+                return;
+            let msg;
+            try {
+                msg = JSON.parse(event.data);
+            }
+            catch {
+                return;
+            }
+            switch (msg.type) {
+                case "connected":
+                    this.emit("connected", msg);
+                    break;
+                case "log":
+                    this.emit("log", msg);
+                    break;
+                case "video-frame":
+                    this.emit("video-frame", msg);
+                    break;
+                case "status":
+                    this.emit("status", msg);
+                    break;
+                case "error":
+                    this.emit("error", msg);
+                    break;
+            }
+        });
+        socket.addEventListener("close", () => {
+            if (this.destroyed) {
+                this.emit("close");
+                return;
+            }
+            this.emit("close");
+            this.scheduleReconnect();
+        });
+        socket.addEventListener("error", () => {
+            // The "close" event always follows an error event on a WebSocket,
+            // so we let "close" drive reconnection.
+        });
+    }
+    scheduleReconnect() {
+        if (this.destroyed || this.attemptCount >= MAX_ATTEMPTS)
+            return;
+        this.attemptCount++;
+        const delay = Math.min(INITIAL_DELAY_MS * 2 ** (this.attemptCount - 1), MAX_DELAY_MS);
+        this.reconnectTimer = setTimeout(() => {
+            if (!this.destroyed)
+                this.openSocket();
+        }, delay);
+    }
+    disconnect() {
+        this.destroyed = true;
+        if (this.reconnectTimer !== null) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+        this.removeAllListeners();
+    }
+}

package/dist/components/LogConsole.d.ts

@@ -0,0 +1,8 @@
+import type { LogEntry } from "../types.js";
+interface LogConsoleProps {
+    logs: LogEntry[];
+    maxHeight?: string | number;
+}
+export declare function LogConsole({ logs, maxHeight }: LogConsoleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LogConsole.d.ts.map

package/dist/components/LogConsole.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogConsole.d.ts","sourceRoot":"","sources":["../../src/components/LogConsole.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAY,MAAM,aAAa,CAAC;AAEtD,UAAU,eAAe;IACvB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAuDD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,SAAe,EAAE,EAAE,eAAe,2CA4CpE"}

package/dist/components/LogConsole.js

@@ -0,0 +1,72 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const LEVEL_COLORS = {
+    stdout: "#d1fae5",
+    stderr: "#fecaca",
+    system: "#bfdbfe",
+};
+const LEVEL_LABEL_COLORS = {
+    stdout: "#6ee7b7",
+    stderr: "#f87171",
+    system: "#93c5fd",
+};
+const containerStyle = (maxHeight) => ({
+    backgroundColor: "#0d1117",
+    borderRadius: "6px",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace',
+    fontSize: "12px",
+    lineHeight: "1.6",
+    border: "1px solid #21262d",
+    maxHeight,
+});
+const headerStyle = {
+    padding: "6px 12px",
+    backgroundColor: "#161b22",
+    color: "#8b949e",
+    fontSize: "11px",
+    fontWeight: 600,
+    letterSpacing: "0.05em",
+    textTransform: "uppercase",
+    borderBottom: "1px solid #21262d",
+    flexShrink: 0,
+    fontFamily: "system-ui, sans-serif",
+};
+const scrollAreaStyle = {
+    overflowY: "auto",
+    flex: 1,
+    padding: "8px 0",
+};
+const rowStyle = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "8px",
+    padding: "1px 12px",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+};
+export function LogConsole({ logs, maxHeight = 400 }) {
+    const bottomRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: scroll to bottom whenever log count changes; bottomRef is a ref (stable, not reactive)
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [logs.length]);
+    return (_jsxs("div", { style: containerStyle(maxHeight), children: [_jsxs("div", { style: headerStyle, children: ["Build Logs \u2014 ", logs.length, " lines"] }), _jsxs("div", { style: scrollAreaStyle, children: [logs.length === 0 && (_jsx("div", { style: { ...rowStyle, color: "#6e7681", fontStyle: "italic" }, children: "Waiting for logs\u2026" })), logs.map((entry, idx) => (_jsxs("div", { style: { ...rowStyle, color: LEVEL_COLORS[entry.level] }, children: [_jsx("span", { style: {
+                                    color: LEVEL_LABEL_COLORS[entry.level],
+                                    flexShrink: 0,
+                                    minWidth: "44px",
+                                    fontWeight: 600,
+                                    fontSize: "11px",
+                                }, children: entry.level }), _jsx("span", { style: { color: "#6e7681", flexShrink: 0, userSelect: "none" }, children: formatTime(entry.timestamp) }), _jsx("span", { style: { flex: 1 }, children: entry.message })] }, `${entry.timestamp}-${idx}`))), _jsx("div", { ref: bottomRef })] })] }));
+}
+function formatTime(iso) {
+    try {
+        const d = new Date(iso);
+        return d.toISOString().slice(11, 23); // HH:MM:SS.mmm
+    }
+    catch {
+        return iso;
+    }
+}

package/dist/components/SessionViewer.d.ts

@@ -0,0 +1,8 @@
+export interface SessionViewerProps {
+    sessionId: string;
+    apiToken: string;
+    baseUrl?: string;
+    className?: string;
+}
+export declare function SessionViewer({ sessionId, apiToken, baseUrl, className }: SessionViewerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SessionViewer.d.ts.map

package/dist/components/SessionViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.d.ts","sourceRoot":"","sources":["../../src/components/SessionViewer.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyHD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CAgJ5F"}

package/dist/components/SessionViewer.js

@@ -0,0 +1,168 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useExpoCiSession } from "../useExpoCiSession.js";
+import { LogConsole } from "./LogConsole.js";
+import { SimulatorScreen } from "./SimulatorScreen.js";
+import { StatusBadge } from "./StatusBadge.js";
+const rootStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    color: "#e6edf3",
+    backgroundColor: "#0d1117",
+    padding: "20px",
+    borderRadius: "10px",
+    minWidth: "360px",
+};
+const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px",
+    flexWrap: "wrap",
+};
+const titleStyle = {
+    fontSize: "15px",
+    fontWeight: 600,
+    color: "#e6edf3",
+    margin: 0,
+};
+const bodyStyle = {
+    display: "flex",
+    gap: "20px",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+};
+const simulatorColStyle = {
+    flexShrink: 0,
+};
+const rightColStyle = {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    minWidth: "260px",
+};
+const controlsStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    padding: "14px",
+    backgroundColor: "#161b22",
+    borderRadius: "6px",
+    border: "1px solid #21262d",
+};
+const inputRowStyle = {
+    display: "flex",
+    gap: "8px",
+};
+const textInputStyle = {
+    flex: 1,
+    padding: "6px 10px",
+    backgroundColor: "#0d1117",
+    border: "1px solid #30363d",
+    borderRadius: "6px",
+    color: "#e6edf3",
+    fontSize: "13px",
+    outline: "none",
+};
+const btnStyle = (variant) => {
+    const bg = {
+        primary: "#1f6feb",
+        secondary: "#21262d",
+        danger: "#b91c1c",
+    };
+    return {
+        padding: "6px 12px",
+        backgroundColor: bg[variant],
+        color: "#e6edf3",
+        border: "1px solid rgba(255,255,255,0.1)",
+        borderRadius: "6px",
+        cursor: "pointer",
+        fontSize: "12px",
+        fontWeight: 500,
+        fontFamily: "system-ui, sans-serif",
+        whiteSpace: "nowrap",
+    };
+};
+const keypressRowStyle = {
+    display: "flex",
+    gap: "8px",
+    flexWrap: "wrap",
+};
+const errorBannerStyle = {
+    padding: "8px 12px",
+    backgroundColor: "#450a0a",
+    border: "1px solid #7f1d1d",
+    borderRadius: "6px",
+    color: "#fca5a5",
+    fontSize: "13px",
+};
+/**
+ * Preset hardware-button / keystroke shortcuts shown in the controls row.
+ * Each entry is a ready-to-send baguette payload — the orchestrator forwards
+ * it untouched, so the labels and shapes are decoupled from the server.
+ */
+const PRESETS = [
+    { label: "Home", input: { type: "button", button: "home" } },
+    { label: "App Switcher", input: { type: "button", button: "app-switcher" } },
+    { label: "Esc", input: { type: "key", code: "Escape" } },
+    { label: "Enter", input: { type: "key", code: "Enter" } },
+];
+export function SessionViewer({ sessionId, apiToken, baseUrl, className }) {
+    const { status, logs, frame, connected, error, sendInput, reconnect } = useExpoCiSession({
+        baseUrl,
+        sessionId,
+        apiToken,
+    });
+    const [textValue, setTextValue] = useState("");
+    const [sending, setSending] = useState(false);
+    const handleSendText = useCallback(async (e) => {
+        e.preventDefault();
+        const trimmed = textValue.trim();
+        if (!trimmed)
+            return;
+        setSending(true);
+        try {
+            await sendInput({ type: "type", text: trimmed });
+            setTextValue("");
+        }
+        catch {
+            // Errors surface through WS error events; silence here
+        }
+        finally {
+            setSending(false);
+        }
+    }, [textValue, sendInput]);
+    const handlePreset = useCallback(async (input) => {
+        setSending(true);
+        try {
+            await sendInput(input);
+        }
+        catch {
+            // Same rationale as above
+        }
+        finally {
+            setSending(false);
+        }
+    }, [sendInput]);
+    const handleTap = useCallback((input) => {
+        sendInput(input).catch(() => { });
+    }, [sendInput]);
+    const handleSwipe = useCallback((input) => {
+        sendInput(input).catch(() => { });
+    }, [sendInput]);
+    return (_jsxs("div", { style: rootStyle, className: className, children: [_jsxs("div", { style: headerStyle, children: [_jsxs("h2", { style: titleStyle, children: ["Session ", sessionId] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [_jsx(StatusBadge, { status: status }), _jsx("span", { style: {
+                                    fontSize: "11px",
+                                    color: connected ? "#4ade80" : "#6b7280",
+                                    fontWeight: 500,
+                                }, children: connected ? "● live" : "○ disconnected" }), !connected && (_jsx("button", { type: "button", style: btnStyle("secondary"), onClick: reconnect, children: "Reconnect" }))] })] }), error && _jsxs("div", { style: errorBannerStyle, children: ["\u26A0 ", error] }), _jsxs("div", { style: bodyStyle, children: [_jsx("div", { style: simulatorColStyle, children: _jsx(SimulatorScreen, { frame: frame, onTap: handleTap, onSwipe: handleSwipe }) }), _jsxs("div", { style: rightColStyle, children: [_jsxs("div", { style: controlsStyle, children: [_jsx("div", { style: {
+                                            fontSize: "11px",
+                                            fontWeight: 600,
+                                            color: "#8b949e",
+                                            marginBottom: "4px",
+                                            letterSpacing: "0.05em",
+                                            textTransform: "uppercase",
+                                        }, children: "Simulator Controls" }), _jsxs("form", { onSubmit: handleSendText, style: inputRowStyle, children: [_jsx("input", { type: "text", style: textInputStyle, placeholder: "Type text to send\u2026", value: textValue, onChange: (e) => setTextValue(e.currentTarget.value), disabled: sending }), _jsx("button", { type: "submit", style: btnStyle("primary"), disabled: sending || !textValue.trim(), children: "Send" })] }), _jsx("div", { style: keypressRowStyle, children: PRESETS.map((preset) => (_jsx("button", { type: "button", style: btnStyle("secondary"), disabled: sending, onClick: () => handlePreset(preset.input), children: preset.label }, preset.label))) })] }), _jsx(LogConsole, { logs: logs, maxHeight: 480 })] })] })] }));
+}

package/dist/components/SimulatorScreen.d.ts

@@ -0,0 +1,17 @@
+import type { SimulatorInput } from "../types.js";
+interface SimulatorScreenProps {
+    frame: string | null;
+    onTap?: (input: Extract<SimulatorInput, {
+        type: "tap";
+    }>) => void;
+    onSwipe?: (input: Extract<SimulatorInput, {
+        type: "swipe";
+    }>) => void;
+    /** Cap on the rendered simulator height; the image scales down proportionally
+     *  to fit. Accepts any CSS length. Defaults to `80vh` so the device never
+     *  exceeds the viewport on a tall phone like iPhone 17 Pro Max. */
+    maxHeight?: number | string;
+}
+export declare function SimulatorScreen({ frame, onTap, onSwipe, maxHeight, }: SimulatorScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SimulatorScreen.d.ts.map

package/dist/components/SimulatorScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimulatorScreen.d.ts","sourceRoot":"","sources":["../../src/components/SimulatorScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACtE;;uEAEmE;IACnE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAgFD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,OAAO,EACP,SAAkB,GACnB,EAAE,oBAAoB,2CA2GtB"}

package/dist/components/SimulatorScreen.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+const SWIPE_THRESHOLD_PX = 5;
+// The outer titanium-style bezel that makes the screen read as a physical
+// device. The screen (wrapper) sits inside it with its own rounded corners.
+const deviceFrameStyle = {
+    display: "inline-block",
+    padding: "11px",
+    borderRadius: "46px",
+    background: "linear-gradient(150deg, #3a3a3e 0%, #1b1b1d 48%, #0a0a0c 100%)",
+    boxShadow: "0 24px 60px -18px rgba(0,0,0,0.75), 0 4px 14px rgba(0,0,0,0.4)," +
+        " inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 1.5px 1px rgba(255,255,255,0.12)",
+    lineHeight: 0,
+};
+const wrapperStyle = {
+    position: "relative",
+    display: "block",
+    backgroundColor: "#000",
+    borderRadius: "36px",
+    overflow: "hidden",
+    cursor: "crosshair",
+    userSelect: "none",
+    lineHeight: 0,
+    boxShadow: "inset 0 0 0 2px rgba(0,0,0,0.85)",
+};
+const basePlaceholderStyle = {
+    // iPhone 17 logical resolution (402×874 pt). Using aspect-ratio keeps the
+    // empty state proportionally correct at any column width — no distortion —
+    // and matches the device the orchestrator boots by default.
+    aspectRatio: "402 / 874",
+    maxWidth: "100%",
+    background: "radial-gradient(120% 80% at 50% 32%, #242428 0%, #161618 55%, #0f0f12 100%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#7c7c85",
+    fontSize: "13px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    letterSpacing: "0.01em",
+    flexDirection: "column",
+    gap: "16px",
+    // The wrapper sets line-height:0 (so the <img> has no baseline gap); reset it
+    // here or the stacked glyph + text collapse onto each other.
+    lineHeight: 1.4,
+};
+const baseImgStyle = {
+    display: "block",
+    maxWidth: "100%",
+    width: "auto",
+    height: "auto",
+    pointerEvents: "none",
+};
+/** Convert a rendered-canvas pixel position to the image's natural pixel coords */
+function toNatural(el, clientX, clientY) {
+    const rect = el.getBoundingClientRect();
+    const scaleX = el.naturalWidth / rect.width;
+    const scaleY = el.naturalHeight / rect.height;
+    return {
+        x: Math.round((clientX - rect.left) * scaleX),
+        y: Math.round((clientY - rect.top) * scaleY),
+    };
+}
+export function SimulatorScreen({ frame, onTap, onSwipe, maxHeight = "80vh", }) {
+    const imgRef = useRef(null);
+    const dragRef = useRef(null);
+    const imgStyle = { ...baseImgStyle, maxHeight };
+    // Drive the placeholder by height so its width derives from the iPhone 17
+    // aspect ratio (a block div would otherwise fill the column width and distort).
+    const placeholderStyle = { ...basePlaceholderStyle, height: maxHeight };
+    const handleMouseDown = useCallback((e) => {
+        if (!imgRef.current)
+            return;
+        const natural = toNatural(imgRef.current, e.clientX, e.clientY);
+        dragRef.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            naturalStartX: natural.x,
+            naturalStartY: natural.y,
+        };
+    }, []);
+    const [ripple, setRipple] = useState(null);
+    const rippleCounter = useRef(0);
+    const handleMouseUp = useCallback((e) => {
+        if (!dragRef.current || !imgRef.current)
+            return;
+        const drag = dragRef.current;
+        dragRef.current = null;
+        const dx = e.clientX - drag.startX;
+        const dy = e.clientY - drag.startY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < SWIPE_THRESHOLD_PX) {
+            // Tap
+            const natural = toNatural(imgRef.current, e.clientX, e.clientY);
+            onTap?.({ type: "tap", x: natural.x, y: natural.y });
+            // Show ripple at rendered coords
+            const rect = imgRef.current.getBoundingClientRect();
+            const id = ++rippleCounter.current;
+            setRipple({ x: e.clientX - rect.left, y: e.clientY - rect.top, id });
+            setTimeout(() => setRipple((r) => (r?.id === id ? null : r)), 500);
+        }
+        else {
+            // Swipe
+            const naturalEnd = toNatural(imgRef.current, e.clientX, e.clientY);
+            onSwipe?.({
+                type: "swipe",
+                startX: drag.naturalStartX,
+                startY: drag.naturalStartY,
+                endX: naturalEnd.x,
+                endY: naturalEnd.y,
+            });
+        }
+    }, [onTap, onSwipe]);
+    return (_jsx("div", { style: deviceFrameStyle, children: _jsxs("div", { style: wrapperStyle, role: "application", "aria-label": "iOS simulator \u2014 click to tap, drag to swipe", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, children: [frame ? (_jsx("img", { ref: imgRef, src: frame, alt: "iOS Simulator", style: imgStyle, draggable: false })) : (_jsxs("div", { style: placeholderStyle, children: [_jsx("span", { style: { fontWeight: 500 }, children: "Waiting for the simulator" }), _jsx("div", { style: { display: "flex", gap: "6px" }, children: [0, 1, 2].map((i) => (_jsx("span", { style: {
+                                    width: 6,
+                                    height: 6,
+                                    borderRadius: "50%",
+                                    backgroundColor: "currentColor",
+                                    animation: `expo-pulse 1.2s ease-in-out ${i * 0.2}s infinite`,
+                                } }, i))) })] })), ripple && (_jsx("span", { style: {
+                        position: "absolute",
+                        left: ripple.x - 14,
+                        top: ripple.y - 14,
+                        width: 28,
+                        height: 28,
+                        borderRadius: "50%",
+                        border: "2px solid rgba(255,255,255,0.7)",
+                        backgroundColor: "rgba(255,255,255,0.15)",
+                        pointerEvents: "none",
+                        animation: "expo-ripple 0.5s ease-out forwards",
+                    } }, ripple.id)), _jsx(RippleStyles, {})] }) }));
+}
+// Inject keyframe once
+let stylesInjected = false;
+function RippleStyles() {
+    if (typeof document === "undefined" || stylesInjected)
+        return null;
+    stylesInjected = true;
+    const style = document.createElement("style");
+    style.textContent = `
+    @keyframes expo-ripple {
+      0%   { transform: scale(0.5); opacity: 1; }
+      100% { transform: scale(2.5); opacity: 0; }
+    }
+    @keyframes expo-pulse {
+      0%, 100% { opacity: 0.35; transform: scale(0.94); }
+      50%      { opacity: 1;    transform: scale(1.05); }
+    }
+  `;
+    document.head.appendChild(style);
+    return null;
+}

package/dist/components/StatusBadge.d.ts

@@ -0,0 +1,7 @@
+import type { SessionStatus } from "../types.js";
+interface StatusBadgeProps {
+    status: SessionStatus | null;
+}
+export declare function StatusBadge({ status }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../src/components/StatusBadge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,UAAU,gBAAgB;IACxB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;CAC9B;AAgCD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAkBvD"}

package/dist/components/StatusBadge.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STATUS_COLORS = {
+    created: { bg: "#6b7280", text: "#fff" },
+    running: { bg: "#2563eb", text: "#fff" },
+    completed: { bg: "#16a34a", text: "#fff" },
+    failed: { bg: "#dc2626", text: "#fff" },
+    timeout: { bg: "#d97706", text: "#fff" },
+    deleted: { bg: "#374151", text: "#9ca3af" },
+};
+const pillStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "3px 10px",
+    borderRadius: "9999px",
+    fontSize: "12px",
+    fontWeight: 600,
+    letterSpacing: "0.04em",
+    textTransform: "uppercase",
+    fontFamily: "system-ui, sans-serif",
+};
+const dotStyle = (color) => ({
+    width: "7px",
+    height: "7px",
+    borderRadius: "50%",
+    backgroundColor: color,
+    flexShrink: 0,
+});
+export function StatusBadge({ status }) {
+    if (!status) {
+        return (_jsxs("span", { style: { ...pillStyle, backgroundColor: "#1f2937", color: "#6b7280" }, children: [_jsx("span", { style: dotStyle("#6b7280") }), "unknown"] }));
+    }
+    const { bg, text } = STATUS_COLORS[status];
+    return (_jsxs("span", { style: { ...pillStyle, backgroundColor: bg, color: text }, children: [_jsx("span", { style: dotStyle(text === "#fff" ? "rgba(255,255,255,0.6)" : text) }), status] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export type { ExpoCiClientOptions } from "./client.js";
+export { ExpoCiClient } from "./client.js";
+export { LogConsole } from "./components/LogConsole.js";
+export type { SessionViewerProps } from "./components/SessionViewer.js";
+export { SessionViewer } from "./components/SessionViewer.js";
+export { SimulatorScreen } from "./components/SimulatorScreen.js";
+export { StatusBadge } from "./components/StatusBadge.js";
+export type { ClientEventMap, ListSimulatorsResponse, LogEntry, LogLevel, SessionDetail, SessionLogs, SessionStatus, SimulatorButton, SimulatorDevice, SimulatorInput, SimulatorInputResponse, SimulatorKeyCode, SimulatorKeyModifier, UseExpoCiSessionOptions, UseExpoCiSessionResult, WsConnectedMessage, WsErrorMessage, WsLogMessage, WsMessage, WsStatusMessage, WsVideoFrameMessage, } from "./types.js";
+export { useExpoCiSession } from "./useExpoCiSession.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,YAAY,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,YAAY,EACV,cAAc,EACd,sBAAsB,EACtB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,WAAW,EACX,aAAa,EACb,eAAe,EACf,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,SAAS,EACT,eAAe,EACf,mBAAmB,GACpB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,9 @@
+// Client
+export { ExpoCiClient } from "./client.js";
+export { LogConsole } from "./components/LogConsole.js";
+// Components
+export { SessionViewer } from "./components/SessionViewer.js";
+export { SimulatorScreen } from "./components/SimulatorScreen.js";
+export { StatusBadge } from "./components/StatusBadge.js";
+// Hook
+export { useExpoCiSession } from "./useExpoCiSession.js";

package/dist/types.d.ts

@@ -0,0 +1,75 @@
+import type { Log, SessionStatus, SimulatorInput } from "@alivelabs/expo-orchestrator-schemas";
+export type { ListSimulatorsResponse, Log, LogLevel, Platform, SessionDetail, SessionStatus, SimulatorButton, SimulatorDevice, SimulatorInput, SimulatorInputResponse, SimulatorKeyCode, SimulatorKeyModifier, SourceType, } from "@alivelabs/expo-orchestrator-schemas";
+/** Alias kept for the public hook API. */
+export type LogEntry = Log;
+export interface SessionLogs {
+    sessionId: string;
+    logs: Log[];
+}
+export interface WsConnectedMessage {
+    type: "connected";
+    sessionId: string;
+    timestamp: string;
+}
+export interface WsLogMessage {
+    type: "log";
+    sessionId: string;
+    timestamp: string;
+    data: {
+        level: import("@alivelabs/expo-orchestrator-schemas").LogLevel;
+        message: string;
+    };
+}
+export interface WsVideoFrameMessage {
+    type: "video-frame";
+    sessionId: string;
+    timestamp: string;
+    /** base64 JPEG with NO data-URI prefix */
+    data: string;
+}
+export interface WsStatusMessage {
+    type: "status";
+    sessionId: string;
+    timestamp: string;
+    data: {
+        status: SessionStatus;
+    };
+}
+export interface WsErrorMessage {
+    type: "error";
+    sessionId: string;
+    timestamp: string;
+    data: {
+        message: string;
+    };
+}
+export type WsMessage = WsConnectedMessage | WsLogMessage | WsVideoFrameMessage | WsStatusMessage | WsErrorMessage;
+export interface ClientEventMap {
+    open: undefined;
+    close: undefined;
+    connected: WsConnectedMessage;
+    log: WsLogMessage;
+    "video-frame": WsVideoFrameMessage;
+    status: WsStatusMessage;
+    error: WsErrorMessage;
+}
+export interface UseExpoCiSessionOptions {
+    baseUrl?: string;
+    sessionId: string;
+    apiToken: string;
+    /** @default true */
+    autoConnect?: boolean;
+    /** Max number of log lines to retain */
+    maxLogs?: number;
+}
+export interface UseExpoCiSessionResult {
+    status: SessionStatus | null;
+    logs: LogEntry[];
+    /** Current frame as a data:image/jpeg;base64,... string, or null */
+    frame: string | null;
+    connected: boolean;
+    error: string | null;
+    sendInput: (input: SimulatorInput) => Promise<import("@alivelabs/expo-orchestrator-schemas").SimulatorInputResponse>;
+    reconnect: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE/F,YAAY,EACV,sBAAsB,EACtB,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,EACpB,UAAU,GACX,MAAM,sCAAsC,CAAC;AAE9C,0CAA0C;AAC1C,MAAM,MAAM,QAAQ,GAAG,GAAG,CAAC;AAE3B,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AAMD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,sCAAsC,EAAE,QAAQ,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3F;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE;QAAE,MAAM,EAAE,aAAa,CAAA;KAAE,CAAC;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B;AAED,MAAM,MAAM,SAAS,GACjB,kBAAkB,GAClB,YAAY,GACZ,mBAAmB,GACnB,eAAe,GACf,cAAc,CAAC;AAInB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,GAAG,EAAE,YAAY,CAAC;IAClB,aAAa,EAAE,mBAAmB,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,cAAc,CAAC;CACvB;AAID,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,oEAAoE;IACpE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,CACT,KAAK,EAAE,cAAc,KAClB,OAAO,CAAC,OAAO,sCAAsC,EAAE,sBAAsB,CAAC,CAAC;IACpF,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/dist/types.js

@@ -0,0 +1,5 @@
+// ── Domain & wire types ──────────────────────────────────────────────────────
+// Re-exported from @alivelabs/expo-orchestrator-schemas so the client and the orchestrator share a
+// single, inferred-from-Zod source of truth. The Ws* message and hook types
+// below are React-client-specific and have no schema counterpart.
+export {};

package/dist/useExpoCiSession.d.ts

@@ -0,0 +1,3 @@
+import type { UseExpoCiSessionOptions, UseExpoCiSessionResult } from "./types.js";
+export declare function useExpoCiSession({ baseUrl, sessionId, apiToken, autoConnect, maxLogs, }: UseExpoCiSessionOptions): UseExpoCiSessionResult;
+//# sourceMappingURL=useExpoCiSession.d.ts.map

package/dist/useExpoCiSession.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpoCiSession.d.ts","sourceRoot":"","sources":["../src/useExpoCiSession.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAKV,uBAAuB,EACvB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAIpB,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,WAAkB,EAClB,OAA0B,GAC3B,EAAE,uBAAuB,GAAG,sBAAsB,CA+FlD"}

package/dist/useExpoCiSession.js

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ExpoCiClient } from "./client.js";
+const DEFAULT_MAX_LOGS = 2000;
+export function useExpoCiSession({ baseUrl, sessionId, apiToken, autoConnect = true, maxLogs = DEFAULT_MAX_LOGS, }) {
+    const [status, setStatus] = useState(null);
+    const [logs, setLogs] = useState([]);
+    const [frame, setFrame] = useState(null);
+    const [connected, setConnected] = useState(false);
+    const [error, setError] = useState(null);
+    // We keep the client in a ref so reconnect() can call client.connect()
+    // without causing a re-render or stale closure issues.
+    const clientRef = useRef(null);
+    // Stable reconnect callback
+    const reconnect = useCallback(() => {
+        clientRef.current?.connect();
+    }, []);
+    // Stable sendInput callback
+    const sendInput = useCallback((input) => {
+        const client = clientRef.current;
+        if (!client) {
+            return Promise.reject(new Error("Client not initialized"));
+        }
+        return client.sendInput(input);
+    }, []);
+    useEffect(() => {
+        const client = new ExpoCiClient({ baseUrl, sessionId, apiToken });
+        clientRef.current = client;
+        // Fetch initial session status
+        client
+            .getSession()
+            .then((session) => {
+            setStatus(session.status);
+        })
+            .catch(() => {
+            // Non-fatal: WS status messages will keep state up to date
+        });
+        // Fetch initial logs
+        client
+            .getLogs()
+            .then((sessionLogs) => {
+            setLogs(sessionLogs.logs.slice(-maxLogs));
+        })
+            .catch(() => {
+            // Non-fatal
+        });
+        const offOpen = client.on("open", () => {
+            setConnected(true);
+            setError(null);
+        });
+        const offClose = client.on("close", () => {
+            setConnected(false);
+        });
+        const offLog = client.on("log", (msg) => {
+            setLogs((prev) => {
+                const next = [...prev, { timestamp: msg.timestamp, ...msg.data }];
+                return next.length > maxLogs ? next.slice(next.length - maxLogs) : next;
+            });
+        });
+        const offFrame = client.on("video-frame", (msg) => {
+            setFrame(`data:image/jpeg;base64,${msg.data}`);
+        });
+        const offStatus = client.on("status", (msg) => {
+            setStatus(msg.data.status);
+        });
+        const offError = client.on("error", (msg) => {
+            setError(msg.data.message);
+        });
+        if (autoConnect) {
+            client.connect();
+        }
+        return () => {
+            offOpen();
+            offClose();
+            offLog();
+            offFrame();
+            offStatus();
+            offError();
+            client.disconnect();
+            clientRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [baseUrl, sessionId, apiToken, autoConnect, maxLogs]);
+    return { status, logs, frame, connected, error, sendInput, reconnect };
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@alivelabs/expo-orchestrator-react-client",
+  "version": "0.1.0",
+  "description": "React client for Expo CI Orchestrator — streaming logs, live simulator video, and interactive controls.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alive-home/alive-expo-orchestrator.git",
+    "directory": "packages/react-client"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@alivelabs/expo-orchestrator-schemas": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "typescript": "^6.0.3"
+  }
+}