feat(mobile): wire session lifecycle + agent streaming across bridge

- bridge: implement session.open/hop, agent.send/interrupt/stop, agent.subscribe/unsubscribe
- workspaceApi: module-level ref so bridge drives WorkspaceView without React context
- rpc: 30s request timeout so lost replies reject instead of wedging callers
- core: fix isResponse guard for void-result frames (JSON drops undefined)
- mobile: SessionScreen tap-through from Connected list

Co-authored-by: Tempest <tempestai.dev@gmail.com>

Author: gsvprharsha

apps/mobile/lib/rpc.js

@@ -95,9 +95,18 @@ export function startRpcClient({ relayUrl, sessionId, sessionKeyB64, onState })
     reconnectTimer = setTimeout(dial, delay);
   };
 
+  // 30 s covers a slow write_to_pty on a laggy machine plus a heavy burst of
+  // agent.output crossing on the same socket; anything longer means the reply
+  // is genuinely lost, so reject instead of wedging the caller.
+  const REQUEST_TIMEOUT_MS = 30_000;
   const request = (method, params) => {
     if (!peer) return Promise.reject(new Error('rpc_not_connected'));
-    return peer.request(method, params);
+    let timer;
+    const timeout = new Promise((_, reject) => {
+      timer = setTimeout(() => reject(new Error(`rpc_timeout:${method}`)), REQUEST_TIMEOUT_MS);
+    });
+    return Promise.race([peer.request(method, params), timeout])
+      .finally(() => clearTimeout(timer));
   };
 
   const on = (event, handler) => {

apps/mobile/lib/tempest/core/index.ts

@@ -100,6 +100,8 @@ export interface RpcParams {
   "agent.send":         { sessionId: string; text: string };
   "agent.interrupt":    { sessionId: string };
   "agent.stop":         { sessionId: string };
+  "agent.subscribe":    { sessionId: string };
+  "agent.unsubscribe":  { sessionId: string };
 
   "permission.list":    Record<string, never>;
   "permission.decide":  { sessionId: string; decision: "approve" | "deny" };
@@ -126,6 +128,8 @@ export interface RpcResult {
   "agent.send":         void;
   "agent.interrupt":    void;
   "agent.stop":         void;
+  "agent.subscribe":    { replay: string[] };
+  "agent.unsubscribe":  void;
 
   "permission.list":    PermissionRequest[];
   "permission.decide":  void;
@@ -149,7 +153,9 @@ export function isRequest(f: WireFrame): f is RpcRequest {
   return "method" in f && "id" in f;
 }
 export function isResponse(f: WireFrame): f is RpcResponse {
-  return "id" in f && ("result" in f || "error" in f);
+  // Void-result replies serialize as { id } — JSON.stringify drops `result: undefined`.
+  // So the guard has to accept "id present, method absent" (event has no id).
+  return "id" in f && !("method" in f);
 }
 export function isEvent(f: WireFrame): f is RpcEvent {
   return "event" in f && !("id" in (f as object));

apps/mobile/package-lock.json

@@ -16,6 +16,7 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "~5.6.0",
+    "react-native-webview": "13.15.0",
     "three": "^0.166.1",
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1"

apps/mobile/package.json

@@ -3,6 +3,7 @@ import { View, Text, Pressable, ScrollView, ActivityIndicator, StyleSheet } from
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { StatusBar } from 'expo-status-bar';
 import { startRpcClient } from '../lib/rpc';
+import SessionScreen from './SessionScreen';
 
 const geist = { regular: 'Geist_400Regular', medium: 'Geist_500Medium', semibold: 'Geist_600SemiBold' };
 
@@ -51,6 +52,7 @@ export default function Connected({ pairing, onUnpair, onBack }) {
   // branches. Everything else defaults to expanded — sidebar parity.
   const [collapsedProjects, setCollapsedProjects] = useState(() => new Set());
   const [collapsedBranches, setCollapsedBranches] = useState(() => new Set());
+  const [selectedSessionId, setSelectedSessionId] = useState(null);
   const clientRef = useRef(null);
 
   useEffect(() => {
@@ -87,6 +89,7 @@ export default function Connected({ pairing, onUnpair, onBack }) {
       .catch((e) => { if (!cancelled) setError(e.message); });
 
     const offUpdated = client.on('session.updated', (s) => {
+      console.log(`[Connected] session.updated id=${s.id.slice(0, 8)} status=${s.status} closed=${s.closed}`);
       setSnapshot((prev) => {
         if (!prev) return prev;
         const i = prev.sessions.findIndex((x) => x.id === s.id);
@@ -228,6 +231,22 @@ export default function Connected({ pairing, onUnpair, onBack }) {
     const n = new Set(prev); n.has(key) ? n.delete(key) : n.add(key); return n;
   });
 
+  // A row was tapped — hand control to SessionScreen, sharing the live client.
+  // If the session vanishes (removed / snapshot missing), fall back to the list.
+  const selectedSession = selectedSessionId
+    ? (snapshot?.sessions || []).find((s) => s.id === selectedSessionId) || null
+    : null;
+  if (selectedSession) {
+    return (
+      <SessionScreen
+        client={clientRef.current}
+        session={selectedSession}
+        connState={connState}
+        onBack={() => setSelectedSessionId(null)}
+      />
+    );
+  }
+
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: '#09090b' }}>
       <StatusBar style="light" />
@@ -313,7 +332,7 @@ export default function Connected({ pairing, onUnpair, onBack }) {
                     {!branchCollapsed && (
                       <View style={styles.sessionList}>
                         {g.sessions.map((s) => (
-                          <SessionRow key={s.id} session={s} />
+                          <SessionRow key={s.id} session={s} onPress={() => setSelectedSessionId(s.id)} />
                         ))}
                       </View>
                     )}
@@ -374,11 +393,16 @@ function Chevron({ open, size = 'normal' }) {
   );
 }
 
-function SessionRow({ session }) {
+function SessionRow({ session, onPress }) {
   const kind = session.closed ? 'closed' : (session.status || 'idle');
   const dotColor = session.closed ? '#3a3a40' : STATUS_COLOR[kind === 'closed' ? 'done' : kind];
   return (
-    <View style={[styles.sessionRow, session.closed && { opacity: 0.5 }]}>
+    <Pressable
+      style={({ pressed }) => [styles.sessionRow, session.closed && { opacity: 0.5 }, pressed && { backgroundColor: '#18181b' }]}
+      onPress={session.closed ? undefined : onPress}
+      disabled={session.closed}
+      hitSlop={4}
+    >
       <View style={[styles.sessionDot, { backgroundColor: dotColor }]} />
       <Text style={styles.sessionName} numberOfLines={1}>
         {session.name}
@@ -392,7 +416,7 @@ function SessionRow({ session }) {
       {session.needsPermission ? (
         <View style={styles.approvalDot} />
       ) : null}
-    </View>
+    </Pressable>
   );
 }