feat: copy all files from Opencode-Cli

Dockerfile

@@ -0,0 +1,35 @@
+FROM debian:bookworm-slim
+
+# /data is mounted as a persistent HF dataset bucket (Jishnupg/Opencode-Cli-storage)
+# All opencode data (sessions, DB, config) goes here so it survives container restarts
+ENV XDG_DATA_HOME=/data/share
+ENV XDG_CONFIG_HOME=/data/config
+ENV XDG_CACHE_HOME=/data/cache
+ENV XDG_STATE_HOME=/data/state
+
+ARG OPENCODE_VERSION=1.18.3
+
+# Install dependencies (including git for project initialization and python3 for DB self-healing)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl \
+    ca-certificates \
+    git \
+    python3 \
+ && rm -rf /var/lib/apt/lists/*
+
+# Download opencode binary
+RUN curl -fsSL "https://github.com/anomalyco/opencode/releases/download/v${OPENCODE_VERSION}/opencode-linux-x64.tar.gz" \
+    | tar -xz -C /usr/local/bin opencode
+
+# Working directory for projects
+RUN mkdir -p /projects/default
+
+COPY cleaner.py /cleaner.py
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+WORKDIR /projects/default
+
+EXPOSE 4096
+
+ENTRYPOINT ["/entrypoint.sh"]

README.md

@@ -0,0 +1,21 @@
+---
+title: Opencode CLI
+emoji: 🖥️
+colorFrom: green
+colorTo: blue
+sdk: docker
+app_port: 4096
+pinned: false
+---
+
+# Opencode CLI Server
+
+This Hugging Face Space hosts the backend `opencode serve` API server on port 4096.
+
+## Connection Setup for Mobile App
+
+To connect your OpenCode mobile client to this server:
+1. Open the mobile app and go to **Settings**.
+2. Under **Server URL**, enter the Space's direct domain:
+   `https://jishnupg-opencode-cli.hf.space` (or your corresponding Space URL)
+3. Set your **Auth Type** and credentials if you configured `OPENCODE_SERVER_USERNAME`/`OPENCODE_SERVER_PASSWORD` secrets.

cleaner.py

@@ -0,0 +1,88 @@
+import sqlite3
+import time
+import os
+from datetime import datetime
+
+def log(msg):
+    print(f"[{datetime.now().strftime('%H:%M:%S')}] {msg}", flush=True)
+
+log("OpenCode Self-Healing Daemon: started")
+
+# Priority order: /data is the persistent HF bucket mount
+DB_PATHS = [
+    "/data/share/opencode/opencode.db",
+    "/projects/.opencode/share/opencode/opencode.db",
+    "/root/.local/share/opencode/opencode.db",
+    "/home/opencode/.local/share/opencode/opencode.db",
+]
+
+def is_corrupted(s):
+    """Check if a string contains Unicode replacement characters from bad base64 decoding."""
+    return s and ("\ufffd" in s or "??#y" in s or "\xef\xbf\xbd" in s)
+
+cycle = 0
+while True:
+    time.sleep(3)
+    cycle += 1
+
+    for db_path in DB_PATHS:
+        if not os.path.exists(db_path):
+            continue
+        try:
+            conn = sqlite3.connect(db_path, timeout=5)
+            cursor = conn.cursor()
+
+            # Check if session table exists
+            cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='session'")
+            if not cursor.fetchone():
+                conn.close()
+                continue
+
+
+            # Log session count periodically
+            if cycle % 20 == 0:  # Every ~60 seconds
+                cursor.execute("SELECT COUNT(*) FROM session")
+                count = cursor.fetchone()[0]
+                log(f"DB {db_path}: {count} sessions")
+
+            # Fix corrupted directory/path in session table
+            cursor.execute("SELECT id, directory, path FROM session")
+            for row_id, directory, path in cursor.fetchall():
+                need_update = False
+                new_directory = directory
+                new_path = path
+
+                if is_corrupted(directory):
+                    new_directory = "/projects/default"
+                    need_update = True
+
+                if is_corrupted(path):
+                    new_path = None
+                    need_update = True
+
+                if need_update:
+                    log(f"[Healed] Session '{row_id}': dir={directory!r} -> {new_directory!r}, path={path!r} -> {new_path!r}")
+                    cursor.execute(
+                        "UPDATE session SET directory = ?, path = ? WHERE id = ?",
+                        (new_directory, new_path, row_id)
+                    )
+                    conn.commit()
+
+            # Fix corrupted entries in project_directory table
+            cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='project_directory'")
+            if cursor.fetchone():
+                cursor.execute("SELECT project_id, directory FROM project_directory")
+                for p_id, directory in cursor.fetchall():
+                    if is_corrupted(directory):
+                        log(f"[Healed] project_directory '{p_id}': deleting corrupted dir={directory!r}")
+                        cursor.execute(
+                            "DELETE FROM project_directory WHERE project_id = ? AND directory = ?",
+                            (p_id, directory)
+                        )
+                        conn.commit()
+
+            conn.close()
+        except sqlite3.OperationalError:
+            pass  # DB locked by opencode, retry next cycle
+        except Exception as e:
+            log(f"[Healer Error] {db_path}: {e}")

docker-compose.yml

@@ -0,0 +1,26 @@
+version: "3.8"
+
+services:
+  opencode:
+    build: .
+    ports:
+      - "4096:4096"
+    environment:
+      # Set your API keys here
+      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY:-}
+      - OPENAI_API_KEY=${OPENAI_API_KEY:-}
+      # Optional: enable HTTP basic auth
+      - OPENCODE_SERVER_USERNAME=${OPENCODE_SERVER_USERNAME:-}
+      - OPENCODE_SERVER_PASSWORD=${OPENCODE_SERVER_PASSWORD:-}
+    volumes:
+      # Mount a directory for projects to persist data
+      - opencode-data:/projects
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:4096/api/health"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+
+volumes:
+  opencode-data:

entrypoint.sh

@@ -0,0 +1,155 @@
+#!/bin/sh
+
+echo "============================================"
+echo "=== OpenCode Space starting up ==="
+echo "Time: $(date)"
+echo "============================================"
+
+# Configure Git to trust all directories to prevent ownership errors
+git config --global --add safe.directory '*' 2>/dev/null || true
+
+# /data is the persistent HF dataset bucket mount
+echo "[INIT] Setting up /data directories..."
+mkdir -p /data/share/opencode 2>/dev/null || echo "[WARN] Could not create /data/share/opencode"
+mkdir -p /data/config/opencode 2>/dev/null || echo "[WARN] Could not create /data/config/opencode"
+mkdir -p /data/cache/opencode 2>/dev/null || echo "[WARN] Could not create /data/cache/opencode"
+mkdir -p /data/state/opencode 2>/dev/null || echo "[WARN] Could not create /data/state/opencode"
+
+# Ensure config exists with correct model setting
+# Model IDs MUST use "provider/model" format per OpenCode docs (e.g. "opencode/big-pickle")
+echo "[CONFIG] Setting up default configuration..."
+
+# Remove stale config that may have wrong model format
+python3 -c "
+import json, os
+p = '/data/config/opencode/opencode.json'
+stale_models = ['big-pickle', 'mimo-v2.5-free', 'opencode/mimo-v2.5-free']
+try:
+    d = json.load(open(p)) if os.path.exists(p) else {}
+    if d.get('model') in stale_models:
+        print(f'[CONFIG] Removing stale model {d[\"model\"]!r}, will regenerate')
+        del d['model']
+        json.dump(d, open(p, 'w'), indent=2)
+except Exception as e:
+    print(f'[CONFIG] Error normalizing: {e}')
+" 2>/dev/null || true
+
+python3 -c "
+import json, os
+p = '/data/config/opencode/opencode.json'
+try:
+    d = json.load(open(p)) if os.path.exists(p) else {}
+except Exception:
+    d = {}
+d['\$schema'] = 'https://opencode.ai/config.json'
+d['server'] = d.get('server', {'port': 4096, 'hostname': '0.0.0.0'})
+# Model IDs require provider/model format: 'opencode/big-pickle' for Zen free models
+if not os.environ.get('ANTHROPIC_API_KEY') and not os.environ.get('OPENAI_API_KEY'):
+    # Use opencode Zen free model with correct provider prefix
+    d['model'] = 'opencode/big-pickle'
+elif not d.get('model'):
+    d['model'] = 'opencode/big-pickle'
+json.dump(d, open(p, 'w'), indent=2)
+print('[CONFIG] Wrote config with model:', d.get('model'))
+" 2>/dev/null || true
+echo "[CONFIG] Current configuration:"
+cat /data/config/opencode/opencode.json 2>/dev/null || echo "{}"
+
+# Log disk space
+echo "[DISK] /data usage:"
+df -h /data 2>/dev/null || echo "[WARN] Could not check /data disk space"
+
+# Check existing database
+echo "[DB] Checking database..."
+DB_PATH="/data/share/opencode/opencode.db"
+if [ -f "$DB_PATH" ]; then
+    echo "[DB] Found database at $DB_PATH ($(du -h "$DB_PATH" | cut -f1))"
+    # Count sessions
+    python3 -c "
+import sqlite3
+try:
+    conn = sqlite3.connect('$DB_PATH', timeout=5)
+    c = conn.cursor()
+    # List all tables
+    c.execute(\"SELECT name FROM sqlite_master WHERE type='table'\")
+    tables = [r[0] for r in c.fetchall()]
+    print(f'[DB] Tables: {tables}')
+    if 'session' in tables:
+        c.execute('PRAGMA table_info(session)')
+        cols = [r[1] for r in c.fetchall()]
+        print(f'[DB] Session columns: {cols}')
+        c.execute('SELECT COUNT(*) FROM session')
+        count = c.fetchone()[0]
+        print(f'[DB] Total sessions: {count}')
+        c.execute('SELECT id, title, directory FROM session LIMIT 5')
+        for row in c.fetchall():
+            print(f'[DB]   Session: {row[0]} title={row[1]!r} dir={row[2]!r}')
+    conn.close()
+except Exception as e:
+    print(f'[DB] Error: {e}')
+" 2>/dev/null || echo "[DB] Could not read database"
+else
+    echo "[DB] No database found"
+fi
+
+# Start the SQLite self-healing daemon in the background
+echo "[INIT] Starting self-healing daemon..."
+python3 /cleaner.py &
+
+# Always ensure /projects/default exists
+mkdir -p /projects/default
+
+# Navigate to the default projects directory
+cd /projects/default
+
+# If GITHUB_REPO is not set, use the default OpenCode Drive repo
+GITHUB_REPO="${GITHUB_REPO:-https://github.com/JishnuPG-tech/OpenCode-Drive.git}"
+
+# Check current state
+HAS_GIT=$(test -d ".git" && echo "yes" || echo "no")
+HAS_REMOTE=$(git remote -v 2>/dev/null | grep -c origin || echo "0")
+IS_EMPTY=$(test -z "$(ls -A . 2>/dev/null | grep -v '^\.')" && echo "yes" || echo "no")
+
+echo "[GIT] State: has_git=$HAS_GIT has_remote=$HAS_REMOTE is_empty=$IS_EMPTY"
+
+if [ "$HAS_GIT" = "no" ] && [ "$IS_EMPTY" = "yes" ]; then
+    echo "[GIT] Empty directory. Cloning $GITHUB_REPO ..."
+    git clone "$GITHUB_REPO" . 2>&1 || echo "[GIT] Clone FAILED"
+elif [ "$HAS_GIT" = "yes" ] && [ "$HAS_REMOTE" -gt "0" ]; then
+    echo "[GIT] Repo exists. Pulling latest..."
+    git pull origin HEAD 2>/dev/null || echo "[GIT] Pull failed"
+else
+    echo "[GIT] Using existing files."
+fi
+
+# Final safety: ensure a git repo exists
+if [ ! -d .git ]; then
+    echo "[GIT] No .git found. Initializing..."
+    git init
+    git config user.email 'opencode@local.com'
+    git config user.name 'OpenCode'
+    git commit --allow-empty -m 'Initial commit'
+fi
+
+echo "[GIT] Files: $(ls -1 . 2>/dev/null | grep -v '^\.git$' | tr '\n' ', ')"
+
+# Log key env vars
+echo "[ENV] API keys: ANTHROPIC=$(if [ -n \"$ANTHROPIC_API_KEY\" ]; then echo SET; else echo NOT_SET; fi) OPENAI=$(if [ -n \"$OPENAI_API_KEY\" ]; then echo SET; else echo NOT_SET; fi)"
+echo "[ENV] Auth: USER=$(if [ -n \"$OPENCODE_SERVER_USERNAME\" ]; then echo SET; else echo NOT_SET; fi) PASS=$(if [ -n \"$OPENCODE_SERVER_PASSWORD\" ]; then echo SET; else echo NOT_SET; fi)"
+
+# Test connectivity to OpenCode Zen API
+echo "[NET] Testing connectivity to opencode.ai/zen..."
+ZEN_STATUS=$(curl -s -o /dev/null -w "%{http_code}" --connect-timeout 5 "https://opencode.ai/zen/v1/models" 2>/dev/null || echo "000")
+echo "[NET] OpenCode Zen API status: $ZEN_STATUS"
+
+if [ "$ZEN_STATUS" = "200" ]; then
+    echo "[NET] OpenCode Zen API is reachable"
+else
+    echo "[NET] WARNING: OpenCode Zen API may not be reachable from this container"
+    echo "[NET] This means free models may not work - AI responses will fail silently"
+fi
+
+echo "============================================"
+echo "=== Launching OpenCode server ==="
+echo "============================================"
+exec opencode serve --port 4096 --hostname 0.0.0.0

mobile/app.json

@@ -0,0 +1,22 @@
+{
+  "expo": {
+    "name": "OpenCode Mobile",
+    "slug": "opencode-mobile",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "scheme": "opencode",
+    "platforms": ["android"],
+    "android": {
+      "package": "com.opencode.mobile",
+      "adaptiveIcon": {
+        "backgroundColor": "#1a1b26"
+      }
+    },
+    "plugins": [
+      "expo-asset",
+      "expo-font",
+      "expo-router",
+      "expo-secure-store"
+    ]
+  }
+}

mobile/app/(tabs)/_layout.tsx

@@ -0,0 +1,69 @@
+import { Tabs } from "expo-router";
+import { Home, MessageSquare, FolderOpen, Search, Terminal } from "lucide-react-native";
+import { getTheme } from "../../lib/storage";
+import { themes } from "../../constants/themes";
+
+export default function TabLayout() {
+  const theme = themes[getTheme()];
+
+  const icons = {
+    index: Home,
+    sessions: MessageSquare,
+    files: FolderOpen,
+    search: Search,
+    terminal: Terminal,
+  };
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: theme.colors.bgSecondary,
+          borderTopColor: theme.colors.border,
+          height: 60,
+          paddingBottom: 8,
+          paddingTop: 8,
+        },
+        tabBarActiveTintColor: theme.colors.primary,
+        tabBarInactiveTintColor: theme.colors.textMuted,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color, size }) => <icons.index size={size} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="sessions"
+        options={{
+          title: "Sessions",
+          tabBarIcon: ({ color, size }) => <icons.sessions size={size} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="files"
+        options={{
+          title: "Files",
+          tabBarIcon: ({ color, size }) => <icons.files size={size} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="search"
+        options={{
+          title: "Search",
+          tabBarIcon: ({ color, size }) => <icons.search size={size} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="terminal"
+        options={{
+          title: "Terminal",
+          tabBarIcon: ({ color, size }) => <icons.terminal size={size} color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

mobile/app/(tabs)/files.tsx

@@ -0,0 +1,153 @@
+import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from "react-native";
+import { useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Search, ChevronRight, Folder, File, ArrowLeft } from "lucide-react-native";
+import { useListFiles } from "../../hooks/useApi";
+import { getTheme } from "../../lib/storage";
+import { themes } from "../../constants/themes";
+
+export default function FilesScreen() {
+  const insets = useSafeAreaInsets();
+  const theme = themes[getTheme()];
+  const [currentDir, setCurrentDir] = useState(".");
+  const [search, setSearch] = useState("");
+  const { data: files, isLoading } = useListFiles(currentDir);
+
+  const filtered = (files || []).filter(
+    (f) => !search || f.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const dirs = currentDir === "." ? [] : currentDir.split("/");
+  const goBack = () => {
+    if (dirs.length <= 1) {
+      setCurrentDir(".");
+    } else {
+      setCurrentDir(dirs.slice(0, -1).join("/"));
+    }
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.bg }]}>
+      <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
+        {currentDir !== "." && (
+          <TouchableOpacity onPress={goBack} style={styles.backBtn}>
+            <ArrowLeft size={20} color={theme.colors.text} />
+          </TouchableOpacity>
+        )}
+        <Text style={[styles.title, { color: theme.colors.text }]} numberOfLines={1}>
+          {currentDir === "." ? "Files" : dirs[dirs.length - 1]}
+        </Text>
+      </View>
+
+      <View style={styles.breadcrumb}>
+        {dirs.map((d, i) => (
+          <TouchableOpacity
+            key={i}
+            onPress={() => setCurrentDir(dirs.slice(0, i + 1).join("/"))}
+            style={styles.breadcrumbItem}
+          >
+            <Text style={[styles.breadcrumbText, { color: theme.colors.primary }]}>{d}</Text>
+            <ChevronRight size={12} color={theme.colors.textMuted} />
+          </TouchableOpacity>
+        ))}
+        {dirs.length === 0 && (
+          <Text style={[styles.breadcrumbText, { color: theme.colors.textMuted }]}>root</Text>
+        )}
+      </View>
+
+      <View style={[styles.searchBar, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
+        <Search size={16} color={theme.colors.textMuted} />
+        <TextInput
+          style={[styles.searchInput, { color: theme.colors.text }]}
+          placeholder="Filter files..."
+          placeholderTextColor={theme.colors.textMuted}
+          value={search}
+          onChangeText={setSearch}
+        />
+      </View>
+
+      <FlatList
+        data={filtered}
+        keyExtractor={(item) => item.path}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 100, paddingHorizontal: 20 }}
+        showsVerticalScrollIndicator={false}
+        ListEmptyComponent={
+          <View style={styles.empty}>
+            <Folder size={40} color={theme.colors.textMuted} />
+            <Text style={[styles.emptyText, { color: theme.colors.textMuted }]}>
+              {isLoading ? "Loading..." : "Empty"}
+            </Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            style={[styles.fileItem, { backgroundColor: theme.colors.surface }]}
+            onPress={() => {
+              if (item.type === "directory") {
+                setCurrentDir(item.path);
+              }
+            }}
+          >
+            {item.type === "directory" ? (
+              <Folder size={18} color={theme.colors.warning} />
+            ) : (
+              <File size={18} color={theme.colors.textMuted} />
+            )}
+            <Text style={[styles.fileName, { color: theme.colors.text }]} numberOfLines={1}>
+              {item.name}
+            </Text>
+            {item.type === "directory" && (
+              <ChevronRight size={16} color={theme.colors.textMuted} />
+            )}
+          </TouchableOpacity>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+  },
+  backBtn: { padding: 4 },
+  title: { fontSize: 28, fontWeight: "700", letterSpacing: -0.5, flex: 1 },
+  breadcrumb: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    paddingHorizontal: 20,
+    marginBottom: 12,
+    gap: 4,
+  },
+  breadcrumbItem: { flexDirection: "row", alignItems: "center", gap: 4 },
+  breadcrumbText: { fontSize: 13 },
+  searchBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginHorizontal: 20,
+    marginBottom: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+  },
+  searchInput: { flex: 1, fontSize: 14, padding: 0 },
+  fileItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: 12,
+    borderRadius: 10,
+    marginBottom: 4,
+  },
+  fileName: { flex: 1, fontSize: 14 },
+  empty: { alignItems: "center", marginTop: 80, gap: 12 },
+  emptyText: { fontSize: 14 },
+});

mobile/app/(tabs)/index.tsx

@@ -0,0 +1,140 @@
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
+import { useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Plus, Wifi, WifiOff, Settings } from "lucide-react-native";
+import { useSessions, useCreateSession } from "../../hooks/useApi";
+import { useConnection } from "../../hooks/useConnection";
+import { getTheme } from "../../lib/storage";
+import { themes } from "../../constants/themes";
+
+export default function HomeScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const theme = themes[getTheme()];
+  const { isConnected, state: connState } = useConnection();
+  const { data: sessions } = useSessions();
+  const createSession = useCreateSession();
+
+  const handleNewSession = async () => {
+    try {
+      const session = await createSession.mutateAsync({ title: "New Chat", directory: "default" });
+      router.push(`/session/${session.id}`);
+    } catch {}
+  };
+
+  const recentSessions = (sessions || []).slice(0, 5);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.bg }]}>
+      <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
+        <Text style={[styles.title, { color: theme.colors.text }]}>OpenCode</Text>
+        <TouchableOpacity onPress={() => router.push("/settings")}>
+          <Settings size={22} color={theme.colors.textMuted} />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 100 }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View
+          style={[
+            styles.statusCard,
+            {
+              backgroundColor: isConnected ? theme.colors.bgTertiary : theme.colors.surface,
+              borderColor: isConnected ? theme.colors.success : theme.colors.danger,
+            },
+          ]}
+        >
+          {isConnected ? (
+            <Wifi size={18} color={theme.colors.success} />
+          ) : (
+            <WifiOff size={18} color={theme.colors.danger} />
+          )}
+          <Text style={[styles.statusText, { color: theme.colors.text }]}>
+            {isConnected ? "Connected" : connState === "reconnecting" ? "Reconnecting..." : "Disconnected"}
+          </Text>
+        </View>
+
+        <TouchableOpacity
+          style={[styles.newSessionBtn, { backgroundColor: theme.colors.primary }]}
+          onPress={handleNewSession}
+          activeOpacity={0.8}
+        >
+          <Plus size={20} color={theme.colors.primaryText} />
+          <Text style={[styles.newSessionText, { color: theme.colors.primaryText }]}>
+            New Session
+          </Text>
+        </TouchableOpacity>
+
+        {recentSessions.length > 0 && (
+          <View style={styles.section}>
+            <Text style={[styles.sectionTitle, { color: theme.colors.textSecondary }]}>
+              Recent Sessions
+            </Text>
+            {recentSessions.map((s) => (
+              <TouchableOpacity
+                key={s.id}
+                style={[styles.sessionItem, { backgroundColor: theme.colors.surface }]}
+                onPress={() => router.push(`/session/${s.id}`)}
+              >
+                <Text style={[styles.sessionTitle, { color: theme.colors.text }]} numberOfLines={1}>
+                  {s.title || "Untitled"}
+                </Text>
+                <Text style={[styles.sessionTime, { color: theme.colors.textMuted }]}>
+                  {new Date(s.updatedAt).toLocaleDateString()}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+  },
+  title: { fontSize: 28, fontWeight: "700", letterSpacing: -0.5 },
+  scroll: { flex: 1, paddingHorizontal: 20 },
+  statusCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: 14,
+    borderRadius: 12,
+    marginBottom: 20,
+    borderWidth: 1,
+  },
+  statusText: { fontSize: 14, fontWeight: "500" },
+  newSessionBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    padding: 16,
+    borderRadius: 14,
+    marginBottom: 28,
+  },
+  newSessionText: { fontSize: 16, fontWeight: "600" },
+  section: { marginBottom: 24 },
+  sectionTitle: { fontSize: 13, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 10 },
+  sessionItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 14,
+    borderRadius: 10,
+    marginBottom: 6,
+  },
+  sessionTitle: { fontSize: 15, fontWeight: "500", flex: 1, marginRight: 10 },
+  sessionTime: { fontSize: 12 },
+});

mobile/app/(tabs)/search.tsx

@@ -0,0 +1,105 @@
+import { View, Text, TextInput, FlatList, StyleSheet } from "react-native";
+import { useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Search as SearchIcon } from "lucide-react-native";
+import { useFindFiles } from "../../hooks/useApi";
+import { getTheme } from "../../lib/storage";
+import { themes } from "../../constants/themes";
+
+export default function SearchScreen() {
+  const insets = useSafeAreaInsets();
+  const theme = themes[getTheme()];
+  const [query, setQuery] = useState("");
+  const { data: results, isLoading } = useFindFiles(query);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.bg }]}>
+      <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
+        <Text style={[styles.title, { color: theme.colors.text }]}>Search</Text>
+      </View>
+
+      <View style={[styles.searchBar, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
+        <SearchIcon size={16} color={theme.colors.textMuted} />
+        <TextInput
+          style={[styles.searchInput, { color: theme.colors.text }]}
+          placeholder="Search files, code, text..."
+          placeholderTextColor={theme.colors.textMuted}
+          value={query}
+          onChangeText={setQuery}
+          autoFocus
+        />
+      </View>
+
+      <FlatList
+        data={results || []}
+        keyExtractor={(_, i) => String(i)}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 100, paddingHorizontal: 20 }}
+        showsVerticalScrollIndicator={false}
+        ListEmptyComponent={
+          <View style={styles.empty}>
+            <SearchIcon size={40} color={theme.colors.textMuted} />
+            <Text style={[styles.emptyText, { color: theme.colors.textMuted }]}>
+              {query.length === 0
+                ? "Type to search"
+                : isLoading
+                ? "Searching..."
+                : "No results"}
+            </Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <View style={[styles.resultCard, { backgroundColor: theme.colors.surface }]}>
+            <View style={styles.resultHeader}>
+              <Text style={[styles.resultFile, { color: theme.colors.primary }]} numberOfLines={1}>
+                {item.file}
+              </Text>
+              <Text style={[styles.resultLine, { color: theme.colors.textMuted }]}>
+                L{item.line}
+              </Text>
+            </View>
+            <Text style={[styles.resultMatch, { color: theme.colors.text }]} numberOfLines={2}>
+              {item.context}
+            </Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+  },
+  title: { fontSize: 28, fontWeight: "700", letterSpacing: -0.5 },
+  searchBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginHorizontal: 20,
+    marginBottom: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+  },
+  searchInput: { flex: 1, fontSize: 14, padding: 0 },
+  resultCard: {
+    padding: 12,
+    borderRadius: 10,
+    marginBottom: 6,
+  },
+  resultHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  resultFile: { fontSize: 13, fontWeight: "500", flex: 1, marginRight: 8 },
+  resultLine: { fontSize: 12 },
+  resultMatch: { fontSize: 13 },
+  empty: { alignItems: "center", marginTop: 80, gap: 12 },
+  emptyText: { fontSize: 14 },
+});

mobile/app/(tabs)/sessions.tsx

@@ -0,0 +1,128 @@
+import { View, Text, TextInput, TouchableOpacity, FlatList, Alert, StyleSheet } from "react-native";
+import { useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Plus, Search, Trash2, MessageSquare } from "lucide-react-native";
+import { useState } from "react";
+import { useSessions, useCreateSession, useDeleteSession } from "../../hooks/useApi";
+import { getTheme } from "../../lib/storage";
+import { themes } from "../../constants/themes";
+
+export default function SessionsScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const theme = themes[getTheme()];
+  const { data: sessions, isLoading } = useSessions();
+  const createSession = useCreateSession();
+  const deleteSession = useDeleteSession();
+  const [search, setSearch] = useState("");
+
+  const filtered = (sessions || []).filter(
+    (s) => !search || (s.title || "").toLowerCase().includes(search.toLowerCase())
+  );
+
+  const handleCreate = async () => {
+    try {
+      const session = await createSession.mutateAsync({ title: "New Chat", directory: "default" });
+      router.push(`/session/${session.id}`);
+    } catch {}
+  };
+
+  const handleDelete = (id: string, title: string) => {
+    Alert.alert("Delete Session", `Delete "${title || "Untitled"}"?`, [
+      { text: "Cancel", style: "cancel" },
+      { text: "Delete", style: "destructive", onPress: () => deleteSession.mutateAsync(id) },
+    ]);
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.bg }]}>
+      <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
+        <Text style={[styles.title, { color: theme.colors.text }]}>Sessions</Text>
+        <TouchableOpacity onPress={handleCreate}>
+          <Plus size={22} color={theme.colors.primary} />
+        </TouchableOpacity>
+      </View>
+
+      <View style={[styles.searchBar, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
+        <Search size={16} color={theme.colors.textMuted} />
+        <TextInput
+          style={[styles.searchInput, { color: theme.colors.text }]}
+          placeholder="Search sessions..."
+          placeholderTextColor={theme.colors.textMuted}
+          value={search}
+          onChangeText={setSearch}
+        />
+      </View>
+
+      <FlatList
+        data={filtered}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 100, paddingHorizontal: 20 }}
+        showsVerticalScrollIndicator={false}
+        ListEmptyComponent={
+          <View style={styles.empty}>
+            <MessageSquare size={40} color={theme.colors.textMuted} />
+            <Text style={[styles.emptyText, { color: theme.colors.textMuted }]}>
+              {isLoading ? "Loading..." : "No sessions yet"}
+            </Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            style={[styles.sessionCard, { backgroundColor: theme.colors.surface }]}
+            onPress={() => router.push(`/session/${item.id}`)}
+          >
+            <View style={styles.sessionInfo}>
+              <Text style={[styles.sessionTitle, { color: theme.colors.text }]} numberOfLines={1}>
+                {item.title || "Untitled"}
+              </Text>
+              <Text style={[styles.sessionDate, { color: theme.colors.textMuted }]}>
+                {new Date(item.updatedAt).toLocaleString()}
+              </Text>
+            </View>
+            <TouchableOpacity onPress={() => handleDelete(item.id, item.title)}>
+              <Trash2 size={16} color={theme.colors.textMuted} />
+            </TouchableOpacity>
+          </TouchableOpacity>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+  },
+  title: { fontSize: 28, fontWeight: "700", letterSpacing: -0.5 },
+  searchBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginHorizontal: 20,
+    marginBottom: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+  },
+  searchInput: { flex: 1, fontSize: 14, padding: 0 },
+  sessionCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 14,
+    borderRadius: 10,
+    marginBottom: 6,
+  },
+  sessionInfo: { flex: 1, marginRight: 12 },
+  sessionTitle: { fontSize: 15, fontWeight: "500" },
+  sessionDate: { fontSize: 12, marginTop: 2 },
+  empty: { alignItems: "center", marginTop: 80, gap: 12 },
+  emptyText: { fontSize: 14 },
+});

mobile/app/(tabs)/terminal.tsx

@@ -0,0 +1,37 @@
+import { View, Text, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Terminal } from "lucide-react-native";
+import { getTheme } from "../../lib/storage";
+import { themes } from "../../constants/themes";
+
+export default function TerminalScreen() {
+  const insets = useSafeAreaInsets();
+  const theme = themes[getTheme()];
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.bg }]}>
+      <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
+        <Text style={[styles.title, { color: theme.colors.text }]}>Terminal</Text>
+      </View>
+      <View style={styles.empty}>
+        <Terminal size={48} color={theme.colors.textMuted} />
+        <Text style={[styles.emptyTitle, { color: theme.colors.text }]}>Terminal</Text>
+        <Text style={[styles.emptyText, { color: theme.colors.textMuted }]}>
+          Terminal sessions will appear here.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+  },
+  title: { fontSize: 28, fontWeight: "700", letterSpacing: -0.5 },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", gap: 12 },
+  emptyTitle: { fontSize: 18, fontWeight: "600" },
+  emptyText: { fontSize: 14 },
+});

mobile/app/_layout.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { QueryProvider } from "../lib/query-provider";
+import { getTheme } from "../lib/storage";
+import { themes } from "../constants/themes";
+
+export default function RootLayout() {
+  const theme = themes[getTheme()];
+
+  useEffect(() => {
+    const { SystemUI } = require("expo-system-ui");
+    SystemUI.setBackgroundColorAsync(theme.colors.bg);
+  }, []);
+
+  return (
+    <QueryProvider>
+      <StatusBar style="light" />
+      <Stack
+        screenOptions={{
+          headerShown: false,
+          contentStyle: { backgroundColor: theme.colors.bg },
+        }}
+      />
+    </QueryProvider>
+  );
+}

mobile/app/session/[id].tsx

@@ -0,0 +1,271 @@
+import { View, Text, TextInput, TouchableOpacity, FlatList, KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useState, useEffect, useRef } from "react";
+import { ArrowLeft, Send, Loader, AlertTriangle } from "lucide-react-native";
+import { useMessages, useSession, useSendMessage, useReplyPermission, useReplyQuestion } from "../../hooks/useApi";
+import { useSSE, getMessagesFromEvents } from "../../hooks/useSSE";
+import { MarkdownRenderer } from "../../components/MarkdownRenderer";
+import { ToolTimeline } from "../../components/ToolTimeline";
+import { PermissionCard } from "../../components/PermissionCard";
+import { QuestionCard } from "../../components/QuestionCard";
+import { Message, MessagePart, ToolPart, PermissionRequest, QuestionRequest } from "../../constants/types";
+import { getTheme } from "../../lib/storage";
+import { themes } from "../../constants/themes";
+
+export default function ChatScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const theme = themes[getTheme()];
+  const [input, setInput] = useState("");
+  const flatListRef = useRef<FlatList>(null);
+
+  const { data: session } = useSession(id || "");
+  const { data: serverMessages } = useMessages(id || "");
+  const { connect, disconnect, streaming, events, error } = useSSE(id);
+  const sendMessage = useSendMessage();
+  const replyPermission = useReplyPermission();
+  const replyQuestion = useReplyQuestion();
+
+  // Build messages from server + SSE events
+  const sseMessages = getMessagesFromEvents(events);
+  const allMessages: Message[] = [...(serverMessages || []), ...sseMessages];
+
+  // Deduplicate by id
+  const seen = new Set<string>();
+  const uniqueMessages = allMessages.filter((m) => {
+    if (seen.has(m.id)) return false;
+    seen.add(m.id);
+    return true;
+  });
+
+  // Collect pending permissions and questions
+  const pendingPermissions: PermissionRequest[] = [];
+  const pendingQuestions: QuestionRequest[] = [];
+  for (const ev of events) {
+    if (ev.type === "permission.requested") {
+      const perm = ev.properties as PermissionRequest;
+      if (perm.state === "pending") pendingPermissions.push(perm);
+    }
+    if (ev.type === "question.asked") {
+      const q = ev.properties as QuestionRequest;
+      if (q.state === "pending") pendingQuestions.push(q);
+    }
+  }
+
+  useEffect(() => {
+    connect();
+    return () => disconnect();
+  }, [id]);
+
+  const handleSend = () => {
+    if (!input.trim() || !id) return;
+    sendMessage.mutate({ sessionId: id, content: input.trim() });
+    setInput("");
+  };
+
+  useEffect(() => {
+    if (uniqueMessages.length > 0 || events.length > 0) {
+      setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 100);
+    }
+  }, [uniqueMessages.length, events.length]);
+
+  const renderPart = (part: MessagePart, index: number) => {
+    if (part.type === "text" && part.text) {
+      return <MarkdownRenderer key={index} content={part.text} />;
+    }
+    if (part.type === "tool") {
+      const toolPart = part as ToolPart;
+      return (
+        <ToolTimeline
+          key={toolPart.callID || index}
+          parts={[toolPart]}
+        />
+      );
+    }
+    if (part.type === "reasoning") {
+      return (
+        <View key={index} style={[styles.reasoning, { backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border }]}>
+          <Text style={[styles.reasoningLabel, { color: theme.colors.textMuted }]}>Thinking...</Text>
+          <Text style={[styles.reasoningText, { color: theme.colors.textMuted }]} numberOfLines={3}>
+            {part.text}
+          </Text>
+        </View>
+      );
+    }
+    return null;
+  };
+
+  const renderMessage = (item: Message) => {
+    const isUser = item.role === "user";
+
+    // Group consecutive tool parts
+    const toolParts: ToolPart[] = [];
+    const otherParts: MessagePart[] = [];
+    for (const part of item.parts) {
+      if (part.type === "tool") toolParts.push(part as ToolPart);
+      else otherParts.push(part);
+    }
+
+    return (
+      <View
+        style={[
+          styles.bubble,
+          isUser
+            ? { backgroundColor: theme.colors.primary, alignSelf: "flex-end", maxWidth: "85%" }
+            : { backgroundColor: theme.colors.surface, alignSelf: "flex-start", maxWidth: "90%" },
+        ]}
+      >
+        {otherParts.map((part, i) => renderPart(part, i))}
+        {toolParts.length > 0 && <ToolTimeline parts={toolParts} />}
+      </View>
+    );
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.container, { backgroundColor: theme.colors.bg }]}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 0}
+    >
+      <View style={[styles.header, { paddingTop: insets.top + 8, backgroundColor: theme.colors.bgSecondary, borderBottomColor: theme.colors.border }]}>
+        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
+          <ArrowLeft size={20} color={theme.colors.text} />
+        </TouchableOpacity>
+        <Text style={[styles.headerTitle, { color: theme.colors.text }]} numberOfLines={1}>
+          {session?.title || "Chat"}
+        </Text>
+      </View>
+
+      <FlatList
+        ref={flatListRef}
+        data={uniqueMessages}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={{ padding: 20, paddingBottom: 20, gap: 12 }}
+        showsVerticalScrollIndicator={false}
+        onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
+        renderItem={({ item }) => renderMessage(item)}
+        ListFooterComponent={
+          <>
+            {/* Pending permissions */}
+            {pendingPermissions.map((perm) => (
+              <PermissionCard
+                key={perm.id}
+                request={perm}
+                onAllow={() => replyPermission.mutate({ sessionId: id!, requestId: perm.id, allow: true })}
+                onDeny={() => replyPermission.mutate({ sessionId: id!, requestId: perm.id, allow: false })}
+              />
+            ))}
+
+            {/* Pending questions */}
+            {pendingQuestions.map((q) => (
+              <QuestionCard
+                key={q.id}
+                request={q}
+                onReply={(answer) => replyQuestion.mutate({ sessionId: id!, requestId: q.id, answer })}
+              />
+            ))}
+
+            {/* Streaming indicator */}
+            {streaming && (
+              <View style={[styles.bubble, { backgroundColor: theme.colors.surface, alignSelf: "flex-start" }]}>
+                <View style={styles.typing}>
+                  <Loader size={14} color={theme.colors.textMuted} />
+                  <Text style={[styles.typingText, { color: theme.colors.textMuted }]}>Thinking...</Text>
+                </View>
+              </View>
+            )}
+          </>
+        }
+      />
+
+      {error && (
+        <View style={[styles.errorBar, { backgroundColor: theme.colors.danger }]}>
+          <AlertTriangle size={14} color="#fff" />
+          <Text style={[styles.errorText, { color: "#fff" }]}>{error}</Text>
+        </View>
+      )}
+
+      <View style={[styles.inputBar, { borderTopColor: theme.colors.border, backgroundColor: theme.colors.bgSecondary, paddingBottom: insets.bottom + 8 }]}>
+        <TextInput
+          style={[styles.textInput, { color: theme.colors.text, backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}
+          placeholder="Type a message..."
+          placeholderTextColor={theme.colors.textMuted}
+          value={input}
+          onChangeText={setInput}
+          onSubmitEditing={handleSend}
+          multiline
+          maxLength={4000}
+        />
+        <TouchableOpacity
+          style={[styles.sendBtn, { backgroundColor: input.trim() ? theme.colors.primary : theme.colors.surface }]}
+          onPress={handleSend}
+          disabled={!input.trim() || streaming}
+        >
+          <Send size={18} color={input.trim() ? theme.colors.primaryText : theme.colors.textMuted} />
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingBottom: 10,
+    borderBottomWidth: 1,
+  },
+  backBtn: { padding: 4 },
+  headerTitle: { fontSize: 17, fontWeight: "600", flex: 1 },
+  bubble: {
+    padding: 14,
+    borderRadius: 14,
+  },
+  reasoning: {
+    padding: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    marginTop: 4,
+  },
+  reasoningLabel: { fontSize: 11, fontWeight: "600", textTransform: "uppercase", marginBottom: 4 },
+  reasoningText: { fontSize: 12, lineHeight: 18, fontStyle: "italic" },
+  typing: { flexDirection: "row", alignItems: "center", gap: 6 },
+  typingText: { fontSize: 14 },
+  errorBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  errorText: { fontSize: 13, flex: 1 },
+  inputBar: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    borderTopWidth: 1,
+  },
+  textInput: {
+    flex: 1,
+    fontSize: 15,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 12,
+    borderWidth: 1,
+    maxHeight: 120,
+  },
+  sendBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

mobile/app/settings.tsx

@@ -0,0 +1,281 @@
+import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
+import { useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useState, useEffect } from "react";
+import { ArrowLeft, Check, Shield, Globe, Key, Lock } from "lucide-react-native";
+import { getHealth } from "../lib/api";
+import {
+  getServerUrl,
+  setServerUrl as persistUrl,
+  getAuthType,
+  setAuthType,
+  getAuthValue,
+  setAuthValue,
+  clearAuth,
+  getTheme,
+  setTheme as persistTheme,
+} from "../lib/storage";
+import type { AuthType } from "../lib/storage";
+import { themes } from "../constants/themes";
+import { ThemeName } from "../constants/types";
+
+const themeNames = Object.keys(themes) as ThemeName[];
+
+const authTypes: { type: AuthType; label: string; description: string; icon: typeof Shield }[] = [
+  { type: "none", label: "None", description: "No authentication", icon: Globe },
+  { type: "basic", label: "Basic Auth", description: "Username & password", icon: Lock },
+  { type: "bearer", label: "Bearer Token", description: "Authorization header", icon: Key },
+  { type: "apikey", label: "API Key", description: "X-API-Key header", icon: Shield },
+];
+
+export default function SettingsScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const currentTheme = getTheme();
+  const theme = themes[currentTheme];
+
+  const [serverInput, setServerInput] = useState(getServerUrl());
+  const [authType, setAuthTypeState] = useState<AuthType>(getAuthType());
+  const [authValue, setAuthValueState] = useState(getAuthValue());
+  const [connected, setConnected] = useState<boolean | null>(null);
+  const [serverVersion, setServerVersion] = useState<string | null>(null);
+
+  // Basic auth split
+  const [basicUser, setBasicUser] = useState(() => {
+    const val = getAuthValue();
+    return getAuthType() === "basic" && val.includes(":") ? val.split(":")[0] : "";
+  });
+  const [basicPass, setBasicPass] = useState(() => {
+    const val = getAuthValue();
+    return getAuthType() === "basic" && val.includes(":") ? val.split(":").slice(1).join(":") : "";
+  });
+
+  const testConnection = async () => {
+    persistUrl(serverInput);
+
+    // Save auth
+    if (authType === "basic") {
+      setAuthValue(`${basicUser}:${basicPass}`);
+    } else {
+      setAuthValue(authValue);
+    }
+    setAuthType(authType);
+
+    try {
+      const health = await getHealth();
+      setConnected(health.healthy);
+      setServerVersion(health.version || null);
+    } catch {
+      setConnected(false);
+      setServerVersion(null);
+    }
+  };
+
+  const handleThemeSelect = (name: ThemeName) => {
+    persistTheme(name);
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.bg }]}>
+      <View style={[styles.header, { paddingTop: insets.top + 12, borderBottomColor: theme.colors.border }]}>
+        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
+          <ArrowLeft size={20} color={theme.colors.text} />
+        </TouchableOpacity>
+        <Text style={[styles.title, { color: theme.colors.text }]}>Settings</Text>
+      </View>
+
+      <ScrollView
+        contentContainerStyle={{ padding: 20, paddingBottom: insets.bottom + 40 }}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Server */}
+        <Text style={[styles.sectionLabel, { color: theme.colors.textSecondary }]}>Server</Text>
+        <View style={[styles.card, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
+          <Text style={[styles.label, { color: theme.colors.textMuted }]}>Server URL</Text>
+          <TextInput
+            style={[styles.input, { color: theme.colors.text, backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border }]}
+            value={serverInput}
+            onChangeText={setServerInput}
+            placeholder="http://127.0.0.1:4096"
+            placeholderTextColor={theme.colors.textMuted}
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+
+          {/* Auth Type */}
+          <Text style={[styles.label, { color: theme.colors.textMuted, marginTop: 8 }]}>Authentication</Text>
+          <View style={styles.authGrid}>
+            {authTypes.map((a) => {
+              const Icon = a.icon;
+              const selected = authType === a.type;
+              return (
+                <TouchableOpacity
+                  key={a.type}
+                  style={[
+                    styles.authCard,
+                    {
+                      backgroundColor: selected ? theme.colors.bgTertiary : theme.colors.bg,
+                      borderColor: selected ? theme.colors.primary : theme.colors.border,
+                    },
+                  ]}
+                  onPress={() => setAuthTypeState(a.type)}
+                >
+                  <Icon size={16} color={selected ? theme.colors.primary : theme.colors.textMuted} />
+                  <Text style={[styles.authLabel, { color: selected ? theme.colors.text : theme.colors.textMuted }]}>
+                    {a.label}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+
+          {/* Auth Value Input */}
+          {authType === "basic" && (
+            <View style={{ gap: 8, marginTop: 8 }}>
+              <TextInput
+                style={[styles.input, { color: theme.colors.text, backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border }]}
+                value={basicUser}
+                onChangeText={setBasicUser}
+                placeholder="Username"
+                placeholderTextColor={theme.colors.textMuted}
+                autoCapitalize="none"
+              />
+              <TextInput
+                style={[styles.input, { color: theme.colors.text, backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border }]}
+                value={basicPass}
+                onChangeText={setBasicPass}
+                placeholder="Password"
+                placeholderTextColor={theme.colors.textMuted}
+                secureTextEntry
+              />
+            </View>
+          )}
+          {authType === "bearer" && (
+            <TextInput
+              style={[styles.input, { color: theme.colors.text, backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border, marginTop: 8 }]}
+              value={authValue}
+              onChangeText={setAuthValueState}
+              placeholder="Bearer token"
+              placeholderTextColor={theme.colors.textMuted}
+              autoCapitalize="none"
+              secureTextEntry
+            />
+          )}
+          {authType === "apikey" && (
+            <TextInput
+              style={[styles.input, { color: theme.colors.text, backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border, marginTop: 8 }]}
+              value={authValue}
+              onChangeText={setAuthValueState}
+              placeholder="API key"
+              placeholderTextColor={theme.colors.textMuted}
+              autoCapitalize="none"
+              secureTextEntry
+            />
+          )}
+
+          <TouchableOpacity style={[styles.btn, { backgroundColor: theme.colors.primary }]} onPress={testConnection}>
+            <Text style={[styles.btnText, { color: theme.colors.primaryText }]}>Test Connection</Text>
+          </TouchableOpacity>
+          {connected !== null && (
+            <Text style={[styles.status, { color: connected ? theme.colors.success : theme.colors.danger }]}>
+              {connected ? `Connected${serverVersion ? ` (v${serverVersion})` : ""}` : "Failed to connect"}
+            </Text>
+          )}
+        </View>
+
+        {/* Theme */}
+        <Text style={[styles.sectionLabel, { color: theme.colors.textSecondary, marginTop: 28 }]}>Theme</Text>
+        <View style={styles.themeGrid}>
+          {themeNames.map((name) => {
+            const t = themes[name];
+            const selected = currentTheme === name;
+            return (
+              <TouchableOpacity
+                key={name}
+                style={[
+                  styles.themeCard,
+                  {
+                    backgroundColor: t.colors.bg,
+                    borderColor: selected ? theme.colors.primary : t.colors.border,
+                    borderWidth: selected ? 2 : 1,
+                  },
+                ]}
+                onPress={() => handleThemeSelect(name)}
+              >
+                <View style={styles.themePreview}>
+                  <View style={[styles.dot, { backgroundColor: t.colors.primary }]} />
+                  <View style={[styles.dot, { backgroundColor: t.colors.secondary }]} />
+                  <View style={[styles.dot, { backgroundColor: t.colors.danger }]} />
+                </View>
+                <Text style={[styles.themeName, { color: t.colors.text }]}>{t.label}</Text>
+                {selected && <Check size={14} color={theme.colors.primary} />}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+        {/* About */}
+        <Text style={[styles.sectionLabel, { color: theme.colors.textSecondary, marginTop: 28 }]}>About</Text>
+        <View style={[styles.card, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
+          <Text style={[styles.aboutText, { color: theme.colors.text }]}>OpenCode Mobile</Text>
+          <Text style={[styles.aboutVersion, { color: theme.colors.textMuted }]}>v1.0.0</Text>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+  },
+  backBtn: { padding: 4 },
+  title: { fontSize: 28, fontWeight: "700", letterSpacing: -0.5 },
+  sectionLabel: { fontSize: 13, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 10 },
+  card: { padding: 16, borderRadius: 12, borderWidth: 1, gap: 10 },
+  label: { fontSize: 13, fontWeight: "500" },
+  input: {
+    fontSize: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  btn: { paddingVertical: 12, borderRadius: 10, alignItems: "center", marginTop: 4 },
+  btnText: { fontSize: 14, fontWeight: "600" },
+  status: { fontSize: 13, textAlign: "center" },
+  authGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+  },
+  authCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  authLabel: { fontSize: 13, fontWeight: "500" },
+  themeGrid: { gap: 8 },
+  themeCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    padding: 14,
+    borderRadius: 10,
+  },
+  themePreview: { flexDirection: "row", gap: 4 },
+  dot: { width: 10, height: 10, borderRadius: 5 },
+  themeName: { flex: 1, fontSize: 14, fontWeight: "500" },
+  aboutText: { fontSize: 15, fontWeight: "600" },
+  aboutVersion: { fontSize: 13 },
+});

mobile/components/MarkdownRenderer.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import Markdown from "react-native-markdown-display";
+import { themes } from "../constants/themes";
+import { getTheme } from "../lib/storage";
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+const codeStyle = (theme: { colors: Record<string, string> }) =>
+  StyleSheet.create({
+    body: {},
+    heading1: { fontSize: 22, fontWeight: "700", color: theme.colors.text, marginTop: 16, marginBottom: 8 },
+    heading2: { fontSize: 19, fontWeight: "700", color: theme.colors.text, marginTop: 14, marginBottom: 6 },
+    heading3: { fontSize: 16, fontWeight: "600", color: theme.colors.text, marginTop: 12, marginBottom: 4 },
+    paragraph: { fontSize: 15, lineHeight: 22, color: theme.colors.text, marginBottom: 8 },
+    link: { color: theme.colors.primary, textDecorationLine: "none" },
+    blockquote: {
+      borderLeftWidth: 3,
+      borderLeftColor: theme.colors.primary,
+      paddingLeft: 12,
+      marginLeft: 0,
+      marginVertical: 8,
+      opacity: 0.8,
+    },
+    code_inline: {
+      fontFamily: "monospace",
+      fontSize: 13,
+      color: theme.colors.accent,
+      backgroundColor: theme.colors.bgTertiary,
+      paddingHorizontal: 5,
+      paddingVertical: 2,
+      borderRadius: 4,
+    },
+    code_block: {
+      fontFamily: "monospace",
+      fontSize: 13,
+      color: theme.colors.text,
+      backgroundColor: theme.colors.bgTertiary,
+      padding: 12,
+      borderRadius: 8,
+      marginVertical: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    fence: {
+      fontFamily: "monospace",
+      fontSize: 13,
+      color: theme.colors.text,
+      backgroundColor: theme.colors.bgTertiary,
+      padding: 12,
+      borderRadius: 8,
+      marginVertical: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    list_item: { fontSize: 15, lineHeight: 22, color: theme.colors.text, marginBottom: 4 },
+    bullet_list: { marginVertical: 8 },
+    ordered_list: { marginVertical: 8 },
+    table: { borderWidth: 1, borderColor: theme.colors.border, marginVertical: 8 },
+    table_header_cell: {
+      backgroundColor: theme.colors.bgTertiary,
+      padding: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.border,
+    },
+    table_cell: { padding: 8, borderBottomWidth: 1, borderBottomColor: theme.colors.border },
+    strong: { fontWeight: "700" },
+    em: { fontStyle: "italic" },
+    hr: { height: 1, backgroundColor: theme.colors.border, marginVertical: 16 },
+    image: { marginVertical: 8 },
+  });
+
+export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  const theme = themes[getTheme()];
+  const styles = codeStyle(theme);
+
+  return (
+    <Markdown style={styles}>{content}</Markdown>
+  );
+}
+
+// ── Code block with language label ──
+
+interface CodeBlockProps {
+  language?: string;
+  children: string;
+}
+
+export function CodeBlock({ language, children }: CodeBlockProps) {
+  const theme = themes[getTheme()];
+
+  return (
+    <View style={[codeStyles.container, { backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border }]}>
+      {language ? (
+        <View style={[codeStyles.header, { borderBottomColor: theme.colors.border }]}>
+          <Text style={[codeStyles.language, { color: theme.colors.textMuted }]}>{language}</Text>
+        </View>
+      ) : null}
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <Text style={[codeStyles.code, { color: theme.colors.text }]} selectable>
+          {children}
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}
+
+const codeStyles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    borderWidth: 1,
+    marginVertical: 8,
+    overflow: "hidden",
+  },
+  header: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+  },
+  language: {
+    fontSize: 11,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  code: {
+    fontFamily: "monospace",
+    fontSize: 13,
+    lineHeight: 20,
+    padding: 12,
+  },
+});

mobile/components/PermissionCard.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { Shield, Check, X } from "lucide-react-native";
+import { themes } from "../constants/themes";
+import { getTheme } from "../lib/storage";
+import type { PermissionRequest } from "../constants/types";
+
+interface PermissionCardProps {
+  request: PermissionRequest;
+  onAllow: () => void;
+  onDeny: () => void;
+}
+
+export function PermissionCard({ request, onAllow, onDeny }: PermissionCardProps) {
+  const theme = themes[getTheme()];
+
+  return (
+    <View style={[styles.card, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
+      <View style={styles.header}>
+        <Shield size={16} color={theme.colors.warning} />
+        <Text style={[styles.title, { color: theme.colors.text }]}>Permission Required</Text>
+      </View>
+
+      <Text style={[styles.permission, { color: theme.colors.textSecondary }]}>
+        {request.permission}
+      </Text>
+
+      {request.description ? (
+        <Text style={[styles.description, { color: theme.colors.textMuted }]}>
+          {request.description}
+        </Text>
+      ) : null}
+
+      <View style={styles.actions}>
+        <TouchableOpacity
+          style={[styles.denyBtn, { backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border }]}
+          onPress={onDeny}
+          activeOpacity={0.7}
+        >
+          <X size={16} color={theme.colors.danger} />
+          <Text style={[styles.denyText, { color: theme.colors.danger }]}>Deny</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.allowBtn, { backgroundColor: theme.colors.success }]}
+          onPress={onAllow}
+          activeOpacity={0.7}
+        >
+          <Check size={16} color="#fff" />
+          <Text style={[styles.allowText, { color: "#fff" }]}>Allow</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 10,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  permission: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  description: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 10,
+    marginTop: 4,
+  },
+  denyBtn: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  denyText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  allowBtn: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 10,
+    borderRadius: 8,
+  },
+  allowText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+});

mobile/components/QuestionCard.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native";
+import { HelpCircle, Send } from "lucide-react-native";
+import { themes } from "../constants/themes";
+import { getTheme } from "../lib/storage";
+import type { QuestionRequest } from "../constants/types";
+
+interface QuestionCardProps {
+  request: QuestionRequest;
+  onReply: (answer: string) => void;
+  onReject?: () => void;
+}
+
+export function QuestionCard({ request, onReply, onReject }: QuestionCardProps) {
+  const theme = themes[getTheme()];
+  const [selected, setSelected] = useState<string | null>(null);
+  const [customAnswer, setCustomAnswer] = useState("");
+
+  const handleSubmit = () => {
+    if (selected) {
+      onReply(selected);
+    } else if (customAnswer.trim()) {
+      onReply(customAnswer.trim());
+    }
+  };
+
+  const hasOptions = request.options && request.options.length > 0;
+
+  return (
+    <View style={[styles.card, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border }]}>
+      <View style={styles.header}>
+        <HelpCircle size={16} color={theme.colors.primary} />
+        <Text style={[styles.title, { color: theme.colors.text }]}>Question</Text>
+      </View>
+
+      <Text style={[styles.question, { color: theme.colors.textSecondary }]}>
+        {request.question}
+      </Text>
+
+      {hasOptions ? (
+        <View style={styles.options}>
+          {request.options!.map((option) => {
+            const isSelected = selected === option;
+            return (
+              <TouchableOpacity
+                key={option}
+                style={[
+                  styles.option,
+                  {
+                    backgroundColor: isSelected ? theme.colors.bgTertiary : theme.colors.bg,
+                    borderColor: isSelected ? theme.colors.primary : theme.colors.border,
+                  },
+                ]}
+                onPress={() => setSelected(option)}
+                activeOpacity={0.7}
+              >
+                <View
+                  style={[
+                    styles.radio,
+                    {
+                      borderColor: isSelected ? theme.colors.primary : theme.colors.textMuted,
+                      backgroundColor: isSelected ? theme.colors.primary : "transparent",
+                    },
+                  ]}
+                />
+                <Text
+                  style={[
+                    styles.optionText,
+                    { color: isSelected ? theme.colors.text : theme.colors.textSecondary },
+                  ]}
+                >
+                  {option}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      ) : (
+        <TextInput
+          style={[styles.input, { color: theme.colors.text, backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border }]}
+          value={customAnswer}
+          onChangeText={setCustomAnswer}
+          placeholder="Type your answer..."
+          placeholderTextColor={theme.colors.textMuted}
+          multiline
+        />
+      )}
+
+      <TouchableOpacity
+        style={[
+          styles.submitBtn,
+          {
+            backgroundColor: selected || customAnswer.trim() ? theme.colors.primary : theme.colors.bgTertiary,
+          },
+        ]}
+        onPress={handleSubmit}
+        disabled={!selected && !customAnswer.trim()}
+        activeOpacity={0.7}
+      >
+        <Send size={14} color={selected || customAnswer.trim() ? theme.colors.primaryText : theme.colors.textMuted} />
+        <Text
+          style={[
+            styles.submitText,
+            { color: selected || customAnswer.trim() ? theme.colors.primaryText : theme.colors.textMuted },
+          ]}
+        >
+          Submit
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 10,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  question: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  options: {
+    gap: 6,
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  radio: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderWidth: 2,
+  },
+  optionText: {
+    fontSize: 14,
+    flex: 1,
+  },
+  input: {
+    fontSize: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    minHeight: 44,
+  },
+  submitBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 10,
+    borderRadius: 8,
+    marginTop: 4,
+  },
+  submitText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+});

mobile/components/ToolTimeline.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { Loader, Check, X, FileText, Search, Terminal, Globe, Wrench } from "lucide-react-native";
+import { themes } from "../constants/themes";
+import { getTheme } from "../lib/storage";
+import type { ToolPart } from "../constants/types";
+
+interface ToolTimelineProps {
+  parts: ToolPart[];
+}
+
+const toolIcons: Record<string, typeof Wrench> = {
+  read: FileText,
+  write: FileText,
+  edit: FileText,
+  glob: Search,
+  grep: Search,
+  bash: Terminal,
+  webfetch: Globe,
+  websearch: Globe,
+};
+
+const toolLabels: Record<string, string> = {
+  read: "Reading file",
+  write: "Writing file",
+  edit: "Editing file",
+  glob: "Searching files",
+  grep: "Searching content",
+  bash: "Running command",
+  webfetch: "Fetching URL",
+  websearch: "Searching web",
+};
+
+export function ToolTimeline({ parts }: ToolTimelineProps) {
+  const theme = themes[getTheme()];
+
+  if (parts.length === 0) return null;
+
+  return (
+    <View style={styles.container}>
+      {parts.map((part, index) => {
+        const Icon = toolIcons[part.tool] || Wrench;
+        const label = toolLabels[part.tool] || part.tool;
+        const isRunning = part.state === "call";
+        const isError = part.state === "error";
+        const isDone = part.state === "result";
+
+        return (
+          <View key={part.callID || index} style={styles.row}>
+            {/* Status indicator */}
+            <View
+              style={[
+                styles.indicator,
+                {
+                  backgroundColor: isRunning
+                    ? theme.colors.warning
+                    : isError
+                    ? theme.colors.danger
+                    : theme.colors.success,
+                },
+              ]}
+            />
+
+            {/* Content */}
+            <View style={styles.content}>
+              <View style={styles.header}>
+                <Icon
+                  size={14}
+                  color={
+                    isRunning
+                      ? theme.colors.warning
+                      : isError
+                      ? theme.colors.danger
+                      : theme.colors.success
+                  }
+                />
+                <Text
+                  style={[
+                    styles.label,
+                    {
+                      color: isRunning
+                        ? theme.colors.text
+                        : theme.colors.textMuted,
+                    },
+                  ]}
+                  numberOfLines={1}
+                >
+                  {label}
+                </Text>
+
+                {isRunning && <Loader size={12} color={theme.colors.warning} />}
+                {isDone && <Check size={12} color={theme.colors.success} />}
+                {isError && <X size={12} color={theme.colors.danger} />}
+              </View>
+
+              {/* Tool title (if provided) */}
+              {part.title ? (
+                <Text
+                  style={[styles.title, { color: theme.colors.textSecondary }]}
+                  numberOfLines={1}
+                >
+                  {part.title}
+                </Text>
+              ) : null}
+
+              {/* Show truncated input for certain tools */}
+              {part.input && (part.tool === "bash" || part.tool === "webfetch") && (
+                <Text
+                  style={[styles.detail, { color: theme.colors.textMuted }]}
+                  numberOfLines={1}
+                >
+                  {part.tool === "bash"
+                    ? `$ ${part.input.command || JSON.stringify(part.input).slice(0, 60)}`
+                    : String(part.input.url || "").slice(0, 80)}
+                </Text>
+              )}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 2,
+    marginVertical: 4,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
+  },
+  indicator: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginTop: 6,
+  },
+  content: {
+    flex: 1,
+    gap: 2,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "500",
+    flex: 1,
+  },
+  title: {
+    fontSize: 12,
+    marginLeft: 20,
+  },
+  detail: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    marginLeft: 20,
+    opacity: 0.7,
+  },
+});

mobile/constants/themes.ts

@@ -0,0 +1,132 @@
+import { Theme, ThemeName } from "./types";
+
+export const themes: Record<ThemeName, Theme> = {
+  tokyo: {
+    name: "tokyo",
+    label: "Tokyo Night",
+    colors: {
+      bg: "#1a1b26",
+      bgSecondary: "#16161e",
+      bgTertiary: "#24283b",
+      surface: "#292e42",
+      border: "#3b4261",
+      text: "#c0caf5",
+      textSecondary: "#a9b1d6",
+      textMuted: "#565f89",
+      primary: "#7aa2f7",
+      primaryText: "#1a1b26",
+      secondary: "#bb9af7",
+      danger: "#f7768e",
+      success: "#9ece6a",
+      warning: "#e0af68",
+      accent: "#7dcfff",
+    },
+  },
+  dracula: {
+    name: "dracula",
+    label: "Dracula",
+    colors: {
+      bg: "#282a36",
+      bgSecondary: "#21222c",
+      bgTertiary: "#343746",
+      surface: "#44475a",
+      border: "#6272a4",
+      text: "#f8f8f2",
+      textSecondary: "#bd93f9",
+      textMuted: "#6272a4",
+      primary: "#bd93f9",
+      primaryText: "#282a36",
+      secondary: "#ff79c6",
+      danger: "#ff5555",
+      success: "#50fa7b",
+      warning: "#f1fa8c",
+      accent: "#8be9fd",
+    },
+  },
+  nord: {
+    name: "nord",
+    label: "Nord",
+    colors: {
+      bg: "#2e3440",
+      bgSecondary: "#3b4252",
+      bgTertiary: "#434c5e",
+      surface: "#4c566a",
+      border: "#4c566a",
+      text: "#eceff4",
+      textSecondary: "#d8dee9",
+      textMuted: "#7b88a1",
+      primary: "#88c0d0",
+      primaryText: "#2e3440",
+      secondary: "#b48ead",
+      danger: "#bf616a",
+      success: "#a3be8c",
+      warning: "#ebcb8b",
+      accent: "#8fbcbb",
+    },
+  },
+  gruvbox: {
+    name: "gruvbox",
+    label: "Gruvbox",
+    colors: {
+      bg: "#282828",
+      bgSecondary: "#1d2021",
+      bgTertiary: "#3c3836",
+      surface: "#504945",
+      border: "#665c54",
+      text: "#ebdbb2",
+      textSecondary: "#d5c4a1",
+      textMuted: "#928374",
+      primary: "#d79921",
+      primaryText: "#282828",
+      secondary: "#b8bb26",
+      danger: "#cc241d",
+      success: "#98971a",
+      warning: "#d65d0e",
+      accent: "#83a598",
+    },
+  },
+  onedark: {
+    name: "onedark",
+    label: "One Dark",
+    colors: {
+      bg: "#282c34",
+      bgSecondary: "#21252b",
+      bgTertiary: "#333842",
+      surface: "#3e4451",
+      border: "#4b5263",
+      text: "#abb2bf",
+      textSecondary: "#c8ccd4",
+      textMuted: "#636d83",
+      primary: "#61afef",
+      primaryText: "#282c34",
+      secondary: "#c678dd",
+      danger: "#e06c75",
+      success: "#98c379",
+      warning: "#e5c07b",
+      accent: "#56b6c2",
+    },
+  },
+  catppuccin: {
+    name: "catppuccin",
+    label: "Catppuccin Mocha",
+    colors: {
+      bg: "#1e1e2e",
+      bgSecondary: "#181825",
+      bgTertiary: "#313244",
+      surface: "#45475a",
+      border: "#585b70",
+      text: "#cdd6f4",
+      textSecondary: "#bac2de",
+      textMuted: "#6c7086",
+      primary: "#89b4fa",
+      primaryText: "#1e1e2e",
+      secondary: "#cba6f7",
+      danger: "#f38ba8",
+      success: "#a6e3a1",
+      warning: "#f9e2af",
+      accent: "#94e2d5",
+    },
+  },
+};
+
+export const defaultTheme: ThemeName = "tokyo";

mobile/constants/types.ts

@@ -0,0 +1,404 @@
+// Types derived from real OpenCode serve OpenAPI spec (v1.18.3)
+// Endpoint prefix: /api/
+
+// ── Health ──
+export interface HealthResponse {
+  healthy: boolean;
+  version: string;
+}
+
+// ── Config ──
+export interface OpenCodeConfig {
+  $schema?: string;
+  theme?: string;
+  provider?: Record<string, ProviderConfig>;
+  model?: Record<string, string>;
+  command?: Record<string, string>;
+  plugin?: Record<string, unknown>;
+  mcp?: Record<string, unknown>;
+  share?: unknown;
+  experimental?: unknown;
+}
+
+export interface ProviderConfig {
+  api?: string;
+  apiKey?: string;
+  models?: Record<string, unknown>;
+  options?: Record<string, unknown>;
+}
+
+// ── Provider ──
+export interface Provider {
+  id: string;
+  name: string;
+  api?: string;
+  auth?: ProviderAuth;
+  models?: Model[];
+  env?: Record<string, string>;
+}
+
+export interface ProviderAuth {
+  type: "api_key" | "oauth";
+  api_key?: { env?: string; header?: string };
+  oauth?: { authorize_url: string; token_url: string; scopes: string[] };
+}
+
+// ── Model ──
+export interface Model {
+  id: string;
+  name: string;
+  providerID: string;
+  context?: number;
+  maxTokens?: number;
+  reasoning?: boolean;
+  config?: Record<string, unknown>;
+}
+
+// ── Session ──
+export interface Session {
+  id: string;
+  parentID?: string;
+  title: string;
+  agent?: string;
+  model?: string;
+  status: "idle" | "busy" | "error";
+  directory: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface SessionStatus {
+  busy: boolean;
+}
+
+/** Paginated list response from /api/session */
+export interface SessionListResponse {
+  data: Session[];
+  cursor?: {
+    previous?: string;
+    next?: string;
+  };
+}
+
+/** Model list response from /api/model */
+export interface ModelListResponse {
+  location?: {
+    directory?: string;
+    project?: { id: string; directory: string };
+  };
+  data: Model[];
+}
+
+// ── Message ──
+export interface Message {
+  id: string;
+  sessionID: string;
+  role: "user" | "assistant" | "tool" | "system";
+  parts: MessagePart[];
+  createdAt: string;
+}
+
+export type MessagePart =
+  | TextPart
+  | ToolPart
+  | StepPart
+  | ReasoningPart
+  | SourcePart;
+
+export interface TextPart {
+  type: "text";
+  text: string;
+}
+
+export interface ToolPart {
+  type: "tool";
+  tool: string;
+  state: "call" | "result" | "error";
+  callID: string;
+  input?: Record<string, unknown>;
+  output?: string;
+  title?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface StepPart {
+  type: "step";
+  name: string;
+  state: "pending" | "running" | "completed" | "error";
+}
+
+export interface ReasoningPart {
+  type: "reasoning";
+  text: string;
+}
+
+export interface SourcePart {
+  type: "source";
+  source: string;
+  title?: string;
+}
+
+// ── Events (SSE) ──
+export type ServerEvent =
+  | SessionCreatedEvent
+  | SessionUpdatedEvent
+  | SessionDeletedEvent
+  | MessageCreatedEvent
+  | MessageUpdatedEvent
+  | MessagePartUpdatedEvent
+  | MessagePartDeletedEvent
+  | PermissionRequestedEvent
+  | PermissionUpdatedEvent
+  | QuestionAskedEvent
+  | QuestionAnsweredEvent
+  | FileChangedEvent
+  | TodoUpdatedEvent
+  | SyncEvent
+  | ErrorEvent;
+
+export interface SessionCreatedEvent {
+  type: "session.created";
+  properties: Session;
+}
+
+export interface SessionUpdatedEvent {
+  type: "session.updated";
+  properties: Partial<Session> & { id: string };
+}
+
+export interface SessionDeletedEvent {
+  type: "session.deleted";
+  properties: { id: string };
+}
+
+export interface MessageCreatedEvent {
+  type: "message.created";
+  properties: Message;
+}
+
+export interface MessageUpdatedEvent {
+  type: "message.updated";
+  properties: Partial<Message> & { id: string };
+}
+
+export interface MessagePartUpdatedEvent {
+  type: "message.part.updated";
+  properties: {
+    messageID: string;
+    part: MessagePart;
+    sessionID: string;
+  };
+}
+
+export interface MessagePartDeletedEvent {
+  type: "message.part.deleted";
+  properties: {
+    messageID: string;
+    partID: string;
+    sessionID: string;
+  };
+}
+
+export interface PermissionRequestedEvent {
+  type: "permission.requested";
+  properties: PermissionRequest;
+}
+
+export interface PermissionUpdatedEvent {
+  type: "permission.updated";
+  properties: PermissionRequest;
+}
+
+export interface QuestionAskedEvent {
+  type: "question.asked";
+  properties: QuestionRequest;
+}
+
+export interface QuestionAnsweredEvent {
+  type: "question.answered";
+  properties: QuestionRequest;
+}
+
+export interface FileChangedEvent {
+  type: "file.changed";
+  properties: { path: string; status: string };
+}
+
+export interface TodoUpdatedEvent {
+  type: "todo.updated";
+  properties: { sessionID: string; todos: Todo[] };
+}
+
+export interface SyncEvent {
+  type: "sync";
+  properties: Record<string, unknown>;
+}
+
+export interface ErrorEvent {
+  type: "error";
+  properties: { message: string; code?: string };
+}
+
+// ── Permission ──
+export interface PermissionRequest {
+  id: string;
+  sessionID: string;
+  messageID?: string;
+  partID?: string;
+  permission: string;
+  description?: string;
+  state: "pending" | "approved" | "denied";
+  createdAt: string;
+}
+
+export interface SavedPermission {
+  id: string;
+  permission: string;
+  pattern?: string;
+  allow: boolean;
+}
+
+// ── Question ──
+export interface QuestionRequest {
+  id: string;
+  sessionID: string;
+  question: string;
+  options?: string[];
+  state: "pending" | "answered" | "rejected";
+  answer?: string;
+  createdAt: string;
+}
+
+// ── Todo ──
+export interface Todo {
+  id: string;
+  content: string;
+  status: "pending" | "in_progress" | "completed";
+  metadata?: Record<string, unknown>;
+}
+
+// ── File ──
+export interface FileEntry {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  size?: number;
+  modified?: string;
+}
+
+export interface FileContent {
+  content: string;
+  encoding?: string;
+}
+
+export interface FileStatus {
+  path: string;
+  status: string;
+}
+
+// ── Find/Search ──
+export interface FindResult {
+  file: string;
+  line: number;
+  column: number;
+  match: string;
+  context: string;
+}
+
+export interface SymbolResult {
+  name: string;
+  kind: string;
+  file: string;
+  line: number;
+  column: number;
+}
+
+// ── PTY ──
+export interface PTY {
+  id: string;
+  shell: string;
+  cwd: string;
+  pid?: number;
+  createdAt: string;
+}
+
+// ── Command ──
+export interface Command {
+  name: string;
+  description?: string;
+  category?: string;
+}
+
+// ── Skill ──
+export interface Skill {
+  name: string;
+  description?: string;
+  location?: string;
+}
+
+// ── Agent ──
+export interface Agent {
+  name: string;
+  description?: string;
+  tools?: string[];
+}
+
+// ── Diff ──
+export interface DiffEntry {
+  path: string;
+  status: string;
+  additions: number;
+  deletions: number;
+  hunks?: DiffHunk[];
+}
+
+export interface DiffHunk {
+  oldStart: number;
+  newStart: number;
+  oldLines: number;
+  newLines: number;
+  content: string;
+}
+
+// ── VCS ──
+export interface VCSStatus {
+  branch: string;
+  dirty: boolean;
+  ahead: number;
+  behind: number;
+}
+
+// ── Context helpers ──
+export interface SessionContext {
+  files: string[];
+  capabilities: string[];
+}
+
+export interface SessionHistory {
+  messages: Message[];
+}
+
+// ── Theme ──
+export type ThemeName = "tokyo" | "dracula" | "nord" | "gruvbox" | "onedark" | "catppuccin";
+
+export interface Theme {
+  name: ThemeName;
+  label: string;
+  colors: {
+    bg: string;
+    bgSecondary: string;
+    bgTertiary: string;
+    surface: string;
+    border: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    primary: string;
+    primaryText: string;
+    secondary: string;
+    danger: string;
+    success: string;
+    warning: string;
+    accent: string;
+  };
+}

mobile/hooks/useApi.ts

@@ -0,0 +1,322 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import * as api from "../lib/api";
+
+// ── Health ──
+
+export function useHealth() {
+  return useQuery({
+    queryKey: ["health"],
+    queryFn: api.getHealth,
+    refetchInterval: 10000,
+    retry: 3,
+  });
+}
+
+// ── Config ──
+
+export function useConfig() {
+  return useQuery({
+    queryKey: ["config"],
+    queryFn: api.getConfig,
+  });
+}
+
+export function usePatchConfig() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: api.patchConfig,
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["config"] }),
+  });
+}
+
+// ── Sessions ──
+
+export function useSessions() {
+  return useQuery({
+    queryKey: ["sessions"],
+    queryFn: api.getSessions,
+  });
+}
+
+export function useActiveSessions() {
+  return useQuery({
+    queryKey: ["sessions", "active"],
+    queryFn: api.getActiveSessions,
+  });
+}
+
+export function useSession(id: string) {
+  return useQuery({
+    queryKey: ["session", id],
+    queryFn: () => api.getSession(id),
+    enabled: !!id,
+  });
+}
+
+export function useCreateSession() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (options?: { title?: string; agent?: string; model?: string; directory?: string }) =>
+      api.createSession(options),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["sessions"] }),
+  });
+}
+
+export function useDeleteSession() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.deleteSession(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["sessions"] }),
+  });
+}
+
+export function usePatchSession() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: { title?: string; agent?: string; model?: string } }) =>
+      api.patchSession(id, data),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["sessions"] }),
+  });
+}
+
+export function useSessionTodos(sessionId: string) {
+  return useQuery({
+    queryKey: ["todos", sessionId],
+    queryFn: () => api.getSessionTodos(sessionId),
+    enabled: !!sessionId,
+  });
+}
+
+// ── Messages ──
+
+export function useMessages(sessionId: string) {
+  return useQuery({
+    queryKey: ["messages", sessionId],
+    queryFn: () => api.getMessages(sessionId),
+    enabled: !!sessionId,
+  });
+}
+
+export function useSendMessage() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ sessionId, content }: { sessionId: string; content: string }) =>
+      api.sendMessage(sessionId, content),
+    onSuccess: (_, vars) => {
+      qc.invalidateQueries({ queryKey: ["messages", vars.sessionId] });
+      qc.invalidateQueries({ queryKey: ["sessions"] });
+    },
+  });
+}
+
+export function useAbortSession() {
+  return useMutation({
+    mutationFn: (sessionId: string) => api.abortSession(sessionId),
+  });
+}
+
+export function useCompactSession() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (sessionId: string) => api.compactSession(sessionId),
+    onSuccess: (_, sessionId) => {
+      qc.invalidateQueries({ queryKey: ["messages", sessionId] });
+    },
+  });
+}
+
+export function useShareSession() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (sessionId: string) => api.shareSession(sessionId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["sessions"] }),
+  });
+}
+
+export function useForkSession() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (sessionId: string) => api.forkSession(sessionId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["sessions"] }),
+  });
+}
+
+// ── Session diff / revert ──
+
+export function useSessionDiff(sessionId: string) {
+  return useQuery({
+    queryKey: ["diff", sessionId],
+    queryFn: () => api.getSessionDiff(sessionId),
+    enabled: !!sessionId,
+  });
+}
+
+// ── Permissions ──
+
+export function usePermissionRequests() {
+  return useQuery({
+    queryKey: ["permissions", "requests"],
+    queryFn: api.getPermissionRequests,
+    refetchInterval: 5000,
+  });
+}
+
+export function useSavedPermissions() {
+  return useQuery({
+    queryKey: ["permissions", "saved"],
+    queryFn: api.getSavedPermissions,
+  });
+}
+
+export function useReplyPermission() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      sessionId,
+      requestId,
+      allow,
+    }: {
+      sessionId: string;
+      requestId: string;
+      allow: boolean;
+    }) => api.replyPermission(sessionId, requestId, allow),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["permissions"] });
+    },
+  });
+}
+
+// ── Questions ──
+
+export function useQuestionRequests() {
+  return useQuery({
+    queryKey: ["questions", "requests"],
+    queryFn: api.getQuestionRequests,
+    refetchInterval: 5000,
+  });
+}
+
+export function useReplyQuestion() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      sessionId,
+      requestId,
+      answer,
+    }: {
+      sessionId: string;
+      requestId: string;
+      answer: string;
+    }) => api.replyQuestion(sessionId, requestId, answer),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["questions"] });
+    },
+  });
+}
+
+// ── Providers / Models ──
+
+export function useProviders() {
+  return useQuery({
+    queryKey: ["providers"],
+    queryFn: api.getProviders,
+  });
+}
+
+export function useModels() {
+  return useQuery({
+    queryKey: ["models"],
+    queryFn: api.getModels,
+  });
+}
+
+// ── Agent / Command / Skill ──
+
+export function useAgents() {
+  return useQuery({
+    queryKey: ["agents"],
+    queryFn: api.getAgents,
+  });
+}
+
+export function useCommands() {
+  return useQuery({
+    queryKey: ["commands"],
+    queryFn: api.getCommands,
+  });
+}
+
+export function useSkills() {
+  return useQuery({
+    queryKey: ["skills"],
+    queryFn: api.getSkills,
+  });
+}
+
+// ── Files ──
+
+export function useListFiles(dir: string = ".") {
+  return useQuery({
+    queryKey: ["files", dir],
+    queryFn: () => api.listFiles(dir),
+  });
+}
+
+export function useFileContent(path: string) {
+  return useQuery({
+    queryKey: ["fileContent", path],
+    queryFn: () => api.readFile(path),
+    enabled: !!path,
+  });
+}
+
+export function useFindFiles(query: string, dir?: string) {
+  return useQuery({
+    queryKey: ["findFiles", query, dir],
+    queryFn: () => api.findFiles(query, dir),
+    enabled: query.length > 0,
+  });
+}
+
+export function useFindSymbols(query: string) {
+  return useQuery({
+    queryKey: ["findSymbols", query],
+    queryFn: () => api.findSymbols(query),
+    enabled: query.length > 0,
+  });
+}
+
+// ── VCS ──
+
+export function useVCSStatus() {
+  return useQuery({
+    queryKey: ["vcs"],
+    queryFn: api.getVCSStatus,
+    refetchInterval: 15000,
+  });
+}
+
+// ── PTY ──
+
+export function usePTYs() {
+  return useQuery({
+    queryKey: ["pty"],
+    queryFn: api.getPTYs,
+  });
+}
+
+export function useCreatePTY() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (shell?: string) => api.createPTY(shell),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["pty"] }),
+  });
+}
+
+export function useDeletePTY() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.deletePTY(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["pty"] }),
+  });
+}

mobile/hooks/useConnection.ts

@@ -0,0 +1,65 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  getConnectionManager,
+  type ConnectionState,
+} from "../lib/connection-manager";
+import type { ServerEvent } from "../constants/types";
+
+export interface UseConnectionReturn {
+  state: ConnectionState;
+  connect: (sessionId?: string) => void;
+  disconnect: () => void;
+  switchSession: (sessionId: string | null) => void;
+  isConnected: boolean;
+}
+
+export function useConnection(sessionId?: string): UseConnectionReturn {
+  const [state, setState] = useState<ConnectionState>("disconnected");
+  const manager = useRef(getConnectionManager());
+
+  useEffect(() => {
+    const unsub = manager.current.onStateChange(setState);
+    return unsub;
+  }, []);
+
+  // Auto-connect on mount
+  useEffect(() => {
+    manager.current.connect(sessionId);
+    return () => {
+      // Don't disconnect on unmount — keep connection alive
+    };
+  }, [sessionId]);
+
+  const connect = useCallback(
+    (sid?: string) => manager.current.connect(sid ?? sessionId),
+    [sessionId]
+  );
+
+  const disconnect = useCallback(() => manager.current.disconnect(), []);
+
+  const switchSession = useCallback(
+    (sid: string | null) => manager.current.switchSession(sid),
+    []
+  );
+
+  return {
+    state,
+    connect,
+    disconnect,
+    switchSession,
+    isConnected: state === "connected",
+  };
+}
+
+export function useConnectionEvents(
+  onEvent: (event: ServerEvent) => void
+) {
+  const callbackRef = useRef(onEvent);
+  callbackRef.current = onEvent;
+
+  useEffect(() => {
+    const manager = getConnectionManager();
+    const unsub = manager.onEvent((event) => callbackRef.current(event));
+    return unsub;
+  }, []);
+}

mobile/hooks/useSSE.ts

@@ -0,0 +1,156 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { subscribeEvents, parseSSELines } from "../lib/api";
+import type { ServerEvent, Message, MessagePart } from "../constants/types";
+
+export interface SSEState {
+  connected: boolean;
+  streaming: boolean;
+  error: string | null;
+  events: ServerEvent[];
+}
+
+export function useSSE(sessionId?: string) {
+  const [state, setState] = useState<SSEState>({
+    connected: false,
+    streaming: false,
+    error: null,
+    events: [],
+  });
+
+  const abortRef = useRef<AbortController | null>(null);
+  const bufferRef = useRef("");
+  const reconnectTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const connect = useCallback(async () => {
+    setState((s) => ({ ...s, error: null }));
+
+    try {
+      const response = await subscribeEvents(sessionId);
+      abortRef.current = new AbortController();
+      setState((s) => ({ ...s, connected: true, streaming: true }));
+
+      const reader = response.body?.getReader();
+      if (!reader) throw new Error("No readable stream");
+
+      const decoder = new TextDecoder();
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        bufferRef.current += decoder.decode(value, { stream: true });
+        const { events, remaining } = parseSSELines(bufferRef.current);
+        bufferRef.current = remaining;
+
+        if (events.length > 0) {
+          setState((s) => ({
+            ...s,
+            events: [...s.events, ...events],
+          }));
+        }
+      }
+
+      setState((s) => ({ ...s, connected: false, streaming: false }));
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name !== "AbortError") {
+        setState((s) => ({
+          ...s,
+          connected: false,
+          streaming: false,
+          error: err.message,
+        }));
+      }
+    }
+  }, [sessionId]);
+
+  const disconnect = useCallback(() => {
+    abortRef.current?.abort();
+    if (reconnectTimer.current) {
+      clearTimeout(reconnectTimer.current);
+    }
+    setState({ connected: false, streaming: false, error: null, events: [] });
+  }, []);
+
+  const clearEvents = useCallback(() => {
+    setState((s) => ({ ...s, events: [] }));
+  }, []);
+
+  // Auto-reconnect on disconnect
+  useEffect(() => {
+    if (!state.connected && !state.streaming && sessionId) {
+      reconnectTimer.current = setTimeout(() => {
+        connect();
+      }, 3000);
+    }
+    return () => {
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+    };
+  }, [state.connected, state.streaming, sessionId, connect]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, []);
+
+  return {
+    ...state,
+    connect,
+    disconnect,
+    clearEvents,
+  };
+}
+
+// ── Derived helpers ──
+
+/** Extract the latest assistant message from events */
+export function getLatestAssistantMessage(events: ServerEvent[]): Message | null {
+  for (let i = events.length - 1; i >= 0; i--) {
+    const ev = events[i];
+    if (ev.type === "message.created" || ev.type === "message.updated") {
+      const msg = ev.properties as Message;
+      if (msg.role === "assistant") return msg;
+    }
+  }
+  return null;
+}
+
+/** Extract all messages from events in order */
+export function getMessagesFromEvents(events: ServerEvent[]): Message[] {
+  const map = new Map<string, Message>();
+
+  for (const ev of events) {
+    if (ev.type === "message.created") {
+      const msg = ev.properties as Message;
+      map.set(msg.id, msg);
+    } else if (ev.type === "message.updated") {
+      const partial = ev.properties as Partial<Message> & { id: string };
+      const existing = map.get(partial.id);
+      if (existing) {
+        map.set(partial.id, { ...existing, ...partial });
+      }
+    } else if (ev.type === "message.part.updated") {
+      const { messageID, part } = ev.properties as {
+        messageID: string;
+        part: MessagePart;
+        sessionID: string;
+      };
+      const existing = map.get(messageID);
+      if (existing) {
+        const partIdx = existing.parts.findIndex(
+          (p) => JSON.stringify(p) === JSON.stringify(part)
+        );
+        const newParts = [...existing.parts];
+        if (partIdx >= 0) {
+          newParts[partIdx] = part;
+        } else {
+          newParts.push(part);
+        }
+        map.set(messageID, { ...existing, parts: newParts });
+      }
+    }
+  }
+
+  return Array.from(map.values());
+}

mobile/lib/api.ts

@@ -0,0 +1,434 @@
+import { getServerUrl, getAuthHeader, setServerUrl as persistServerUrl, setCredentials, clearAuth, setAuthType, setAuthValue } from "./storage";
+import type { AuthType } from "./storage";
+import type {
+  HealthResponse,
+  Session,
+  SessionStatus,
+  SessionListResponse,
+  Message,
+  MessagePart,
+  OpenCodeConfig,
+  Provider,
+  Model,
+  ModelListResponse,
+  FileEntry,
+  FileContent,
+  FindResult,
+  SymbolResult,
+  PTY,
+  Command,
+  Skill,
+  Agent,
+  DiffEntry,
+  VCSStatus,
+  PermissionRequest,
+  SavedPermission,
+  QuestionRequest,
+  Todo,
+  ServerEvent,
+} from "../constants/types";
+
+// ── Base request helper ──
+
+async function request<T>(
+  path: string,
+  options?: RequestInit
+): Promise<T> {
+  const base = getServerUrl();
+  const authHeaders = getAuthHeader();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...authHeaders,
+    ...((options?.headers as Record<string, string>) || {}),
+  };
+
+  const res = await fetch(`${base}${path}`, {
+    ...options,
+    headers,
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || `HTTP ${res.status} ${res.statusText}`);
+  }
+
+  const contentType = res.headers.get("content-type") || "";
+  if (contentType.includes("application/json")) {
+    return res.json();
+  }
+  return res.text() as unknown as T;
+}
+
+/** Extract data array from { location, data } or { data } response */
+function extractData<T>(response: { data?: T[] } | T[]): T[] {
+  if (Array.isArray(response)) return response;
+  return response.data || [];
+}
+
+// ── Server URL / Credentials ──
+
+export function setServerUrl(url: string) {
+  persistServerUrl(url);
+}
+
+export function setServerCredentials(username: string, password: string) {
+  setCredentials(username, password);
+}
+
+// ── Health ──
+
+export function getHealth(): Promise<HealthResponse> {
+  return request("/api/health");
+}
+
+// ── Config ── (root endpoint, not /api/)
+
+export function getConfig(): Promise<OpenCodeConfig> {
+  return request("/config");
+}
+
+export function patchConfig(config: Partial<OpenCodeConfig>): Promise<void> {
+  return request("/config", { method: "PATCH", body: JSON.stringify(config) });
+}
+
+// ── Sessions ──
+
+export function getSessions(): Promise<Session[]> {
+  return request("/session");
+}
+
+export function getActiveSessions(): Promise<Session[]> {
+  return request("/session/active");
+}
+
+export function getSession(id: string): Promise<Session> {
+  return request(`/session/${id}`);
+}
+
+/** Get session via /api/ — returns {data: Session} */
+export function getSessionApi(id: string): Promise<Session> {
+  return request<{ data: Session }>(`/api/session/${id}`).then((r) => r.data);
+}
+
+export function createSession(options?: {
+  title?: string;
+  agent?: string;
+  model?: string;
+  directory?: string;
+}): Promise<Session> {
+  return request("/session", {
+    method: "POST",
+    body: JSON.stringify(options || {}),
+  });
+}
+
+export function deleteSession(id: string): Promise<void> {
+  return request(`/session/${id}`, { method: "DELETE" });
+}
+
+export function patchSession(
+  id: string,
+  data: { title?: string; agent?: string; model?: string }
+): Promise<Session> {
+  return request(`/session/${id}`, {
+    method: "PATCH",
+    body: JSON.stringify(data),
+  });
+}
+
+export function getSessionStatus(id: string): Promise<SessionStatus> {
+  return request(`/session/${id}`);
+}
+
+export function getSessionChildren(id: string): Promise<Session[]> {
+  return request<Session[]>(`/session/${id}/children`).catch(() => []);
+}
+
+export function getSessionTodos(id: string): Promise<Todo[]> {
+  return request(`/session/${id}/todo`);
+}
+
+// ── Messages ──
+
+export function getMessages(sessionId: string): Promise<Message[]> {
+  return request(`/session/${sessionId}/message`);
+}
+
+export function getMessage(sessionId: string, messageId: string): Promise<Message> {
+  return request(`/session/${sessionId}/message/${messageId}`);
+}
+
+export function deleteMessage(sessionId: string, messageId: string): Promise<void> {
+  return request(`/session/${sessionId}/message/${messageId}`, {
+    method: "DELETE",
+  });
+}
+
+// ── Send message (triggers SSE response) ──
+
+export interface MessageResponse {
+  info: {
+    id: string;
+    parentID?: string;
+    role: string;
+    sessionID: string;
+    modelID?: string;
+    providerID?: string;
+    time?: { created: number; completed?: number };
+    finish?: string;
+  };
+  parts: MessagePart[];
+}
+
+export function sendMessage(
+  sessionId: string,
+  content: string
+): Promise<MessageResponse> {
+  return request(`/session/${sessionId}/message`, {
+    method: "POST",
+    body: JSON.stringify({
+      parts: [{ type: "text", text: content }],
+    }),
+  });
+}
+
+// ── Session actions ──
+
+export function abortSession(sessionId: string): Promise<void> {
+  return request(`/session/${sessionId}/abort`, { method: "POST" });
+}
+
+export function initSession(sessionId: string): Promise<void> {
+  return request(`/session/${sessionId}/init`, { method: "POST" });
+}
+
+export function compactSession(sessionId: string): Promise<void> {
+  return request(`/session/${sessionId}/compact`, { method: "POST" });
+}
+
+export function summarizeSession(sessionId: string): Promise<void> {
+  return request(`/session/${sessionId}/summarize`, { method: "POST" });
+}
+
+export function shareSession(sessionId: string): Promise<{ url?: string }> {
+  return request(`/session/${sessionId}/share`, { method: "POST" });
+}
+
+export function forkSession(sessionId: string): Promise<Session> {
+  return request(`/session/${sessionId}/fork`, { method: "POST" });
+}
+
+// ── Session diff / revert ──
+
+export function getSessionDiff(sessionId: string): Promise<DiffEntry[]> {
+  return request(`/session/${sessionId}/diff`);
+}
+
+export function revertSessionStage(sessionId: string): Promise<void> {
+  return request(`/session/${sessionId}/revert`, { method: "POST" });
+}
+
+export function revertSessionClear(sessionId: string): Promise<void> {
+  return request(`/session/${sessionId}/unrevert`, { method: "POST" });
+}
+
+// ── Session history / context ──
+
+export function getSessionHistory(sessionId: string): Promise<{ messages: Message[] }> {
+  return request(`/session/${sessionId}/history`);
+}
+
+export function getSessionContext(sessionId: string): Promise<{ files: string[]; capabilities: string[] }> {
+  return request(`/session/${sessionId}/context`);
+}
+
+// ── Permissions ──
+
+export function getPermissionRequests(): Promise<PermissionRequest[]> {
+  return request("/permission");
+}
+
+export function getSavedPermissions(): Promise<SavedPermission[]> {
+  return request("/permission/saved");
+}
+
+export function deleteSavedPermission(id: string): Promise<void> {
+  return request(`/permission/saved/${id}`, { method: "DELETE" });
+}
+
+export function replyPermission(
+  sessionId: string,
+  requestId: string,
+  allow: boolean
+): Promise<void> {
+  return request(`/session/${sessionId}/permissions/${requestId}`, {
+    method: "POST",
+    body: JSON.stringify({ allow }),
+  });
+}
+
+// ── Questions ──
+
+export function getQuestionRequests(): Promise<QuestionRequest[]> {
+  return request("/question");
+}
+
+export function getSessionQuestions(sessionId: string): Promise<QuestionRequest[]> {
+  return request(`/session/${sessionId}/question`);
+}
+
+export function replyQuestion(
+  sessionId: string,
+  requestId: string,
+  answer: string
+): Promise<void> {
+  return request(`/question/${requestId}/reply`, {
+    method: "POST",
+    body: JSON.stringify({ answer }),
+  });
+}
+
+export function rejectQuestion(
+  sessionId: string,
+  requestId: string
+): Promise<void> {
+  return request(`/question/${requestId}/reject`, {
+    method: "POST",
+  });
+}
+
+// ── Providers ──
+
+export function getProviders(): Promise<Provider[]> {
+  return request<{ data: Provider[] }>("/api/provider").then((r) => r.data);
+}
+
+export function getProvider(id: string): Promise<Provider> {
+  return request(`/api/provider/${id}`);
+}
+
+// ── Models ──
+
+export function getModels(): Promise<Model[]> {
+  return request<{ data: Model[] }>("/api/model").then((r) => r.data);
+}
+
+// ── Agent / Command / Skill ──
+
+export function getAgents(): Promise<Agent[]> {
+  return request<{ data: Agent[] }>("/api/agent").then((r) => r.data);
+}
+
+export function getCommands(): Promise<Command[]> {
+  return request<{ data: Command[] }>("/api/command").then((r) => r.data);
+}
+
+export function getSkills(): Promise<Skill[]> {
+  return request<{ data: Skill[] }>("/api/skill").then((r) => r.data);
+}
+
+// ── Files ──
+
+export function listFiles(dir: string = "."): Promise<FileEntry[]> {
+  return request<{ data: FileEntry[] }>(`/api/fs/list?path=${encodeURIComponent(dir)}`).then((r) => r.data);
+}
+
+export function readFile(filePath: string): Promise<FileContent> {
+  return request(`/file/content?path=${encodeURIComponent(filePath)}`);
+}
+
+export function findFiles(query: string, dir?: string): Promise<FindResult[]> {
+  const params = new URLSearchParams({ query });
+  if (dir) params.set("path", dir);
+  return request(`/find/file?${params.toString()}`);
+}
+
+export function findSymbols(query: string): Promise<SymbolResult[]> {
+  return request(`/find/symbol?query=${encodeURIComponent(query)}`);
+}
+
+// ── VCS ──
+
+export function getVCSStatus(): Promise<VCSStatus> {
+  return request("/api/vcs/status");
+}
+
+// ── PTY ──
+
+export function getPTYs(): Promise<PTY[]> {
+  return request<{ data: PTY[] }>("/api/pty").then((r) => r.data);
+}
+
+export function createPTY(shell?: string): Promise<PTY> {
+  return request("/api/pty", {
+    method: "POST",
+    body: JSON.stringify({ shell }),
+  });
+}
+
+export function getPTY(id: string): Promise<PTY> {
+  return request(`/api/pty/${id}`);
+}
+
+export function deletePTY(id: string): Promise<void> {
+  return request(`/api/pty/${id}`, { method: "DELETE" });
+}
+
+export function getPTYConnectToken(id: string): Promise<{ token: string }> {
+  return request(`/api/pty/${id}/connect-token`, { method: "POST" });
+}
+
+// ── SSE Event Stream (returns raw Response for manual parsing) ──
+
+export async function subscribeEvents(
+  sessionId?: string
+): Promise<Response> {
+  const base = getServerUrl();
+  const authHeaders = getAuthHeader();
+  const url = sessionId
+    ? `${base}/session/${sessionId}/event`
+    : `${base}/event`;
+
+  const res = await fetch(url, {
+    headers: { Accept: "text/event-stream", ...authHeaders },
+  });
+
+  if (!res.ok) {
+    throw new Error(`SSE connection failed: ${res.status}`);
+  }
+
+  return res;
+}
+
+// ── SSE Parser helper ──
+
+export function parseSSELines(
+  buffer: string
+): { events: ServerEvent[]; remaining: string } {
+  const events: ServerEvent[] = [];
+  const lines = buffer.split("\n");
+  const remaining = lines.pop() || "";
+
+  let eventType = "";
+  let eventData = "";
+
+  for (const line of lines) {
+    if (line.startsWith("event: ")) {
+      eventType = line.slice(7).trim();
+    } else if (line.startsWith("data: ")) {
+      eventData = line.slice(6);
+    } else if (line === "") {
+      if (eventType && eventData) {
+        try {
+          events.push(JSON.parse(eventData) as ServerEvent);
+        } catch {
+          // skip malformed
+        }
+      }
+      eventType = "";
+      eventData = "";
+    }
+  }
+
+  return { events, remaining };
+}

mobile/lib/connection-manager.ts

@@ -0,0 +1,285 @@
+import { getHealth, subscribeEvents, parseSSELines } from "./api";
+import { getServerUrl, getCredentials } from "./storage";
+import type { ServerEvent } from "../constants/types";
+
+export type ConnectionState =
+  | "disconnected"
+  | "connecting"
+  | "connected"
+  | "reconnecting"
+  | "error";
+
+export type ConnectionListener = (state: ConnectionState) => void;
+export type EventListener = (event: ServerEvent) => void;
+
+interface ConnectionManagerOptions {
+  /** Max reconnect attempts before giving up (default: Infinity) */
+  maxRetries?: number;
+  /** Base delay in ms for exponential backoff (default: 1000) */
+  baseDelay?: number;
+  /** Max delay in ms (default: 30000) */
+  maxDelay?: number;
+  /** Health check interval in ms (default: 15000) */
+  heartbeatInterval?: number;
+  /** Timeout for health check in ms (default: 5000) */
+  healthTimeout?: number;
+}
+
+export class ConnectionManager {
+  private state: ConnectionState = "disconnected";
+  private retryCount = 0;
+  private maxRetries: number;
+  private baseDelay: number;
+  private maxDelay: number;
+  private heartbeatMs: number;
+  private healthTimeout: number;
+
+  private stateListeners: Set<ConnectionListener> = new Set();
+  private eventListeners: Set<EventListener> = new Set();
+
+  private heartbeatTimer: ReturnType<typeof setTimeout> | null = null;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private abortController: AbortController | null = null;
+  private sseBuffer = "";
+
+  /** Currently active SSE session subscription (null = global events) */
+  private activeSessionId: string | null = null;
+
+  constructor(options?: ConnectionManagerOptions) {
+    this.maxRetries = options?.maxRetries ?? Infinity;
+    this.baseDelay = options?.baseDelay ?? 1000;
+    this.maxDelay = options?.maxDelay ?? 30000;
+    this.heartbeatMs = options?.heartbeatInterval ?? 15000;
+    this.healthTimeout = options?.healthTimeout ?? 5000;
+  }
+
+  // ── State ──
+
+  getState(): ConnectionState {
+    return this.state;
+  }
+
+  isConnected(): boolean {
+    return this.state === "connected";
+  }
+
+  // ── Listeners ──
+
+  onStateChange(listener: ConnectionListener): () => void {
+    this.stateListeners.add(listener);
+    return () => this.stateListeners.delete(listener);
+  }
+
+  onEvent(listener: EventListener): () => void {
+    this.eventListeners.add(listener);
+    return () => this.eventListeners.delete(listener);
+  }
+
+  private setState(newState: ConnectionState) {
+    if (this.state === newState) return;
+    this.state = newState;
+    this.stateListeners.forEach((fn) => fn(newState));
+  }
+
+  private emitEvent(event: ServerEvent) {
+    this.eventListeners.forEach((fn) => fn(event));
+  }
+
+  // ── Connect ──
+
+  async connect(sessionId?: string) {
+    if (this.state === "connected" || this.state === "connecting") return;
+
+    this.activeSessionId = sessionId ?? null;
+    this.setState("connecting");
+
+    try {
+      await this.checkHealth();
+      this.retryCount = 0;
+      this.setState("connected");
+      this.startHeartbeat();
+      this.connectSSE();
+    } catch {
+      this.setState("error");
+      this.scheduleReconnect();
+    }
+  }
+
+  disconnect() {
+    this.stopHeartbeat();
+    this.stopReconnect();
+    this.abortController?.abort();
+    this.abortController = null;
+    this.sseBuffer = "";
+    this.retryCount = 0;
+    this.setState("disconnected");
+  }
+
+  // ── Health check ──
+
+  private async checkHealth(): Promise<void> {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), this.healthTimeout);
+
+    try {
+      const result = await Promise.race([
+        getHealth(),
+        new Promise<never>((_, reject) => {
+          controller.signal.addEventListener("abort", () =>
+            reject(new Error("Health check timeout"))
+          );
+        }),
+      ]);
+
+      clearTimeout(timeout);
+
+      if (!result.healthy) {
+        throw new Error("Server reports unhealthy");
+      }
+    } catch (err) {
+      clearTimeout(timeout);
+      throw err;
+    }
+  }
+
+  // ── Heartbeat ──
+
+  private startHeartbeat() {
+    this.stopHeartbeat();
+    this.heartbeatTimer = setInterval(async () => {
+      try {
+        await this.checkHealth();
+        // If we were in error state, recover
+        if (this.state === "error") {
+          this.retryCount = 0;
+          this.setState("connected");
+          this.connectSSE();
+        }
+      } catch {
+        if (this.state === "connected") {
+          this.setState("error");
+          this.scheduleReconnect();
+        }
+      }
+    }, this.heartbeatMs);
+  }
+
+  private stopHeartbeat() {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = null;
+    }
+  }
+
+  // ── SSE ──
+
+  private connectSSE() {
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    this.sseBuffer = "";
+
+    const doConnect = async () => {
+      try {
+        const response = await subscribeEvents(this.activeSessionId ?? undefined);
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error("No readable stream");
+
+        const decoder = new TextDecoder();
+
+        while (true) {
+          if (this.abortController?.signal.aborted) break;
+
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          this.sseBuffer += decoder.decode(value, { stream: true });
+          const { events, remaining } = parseSSELines(this.sseBuffer);
+          this.sseBuffer = remaining;
+
+          for (const event of events) {
+            this.emitEvent(event);
+          }
+        }
+
+        // SSE ended normally — try reconnect
+        if (this.state === "connected") {
+          this.setState("error");
+          this.scheduleReconnect();
+        }
+      } catch (err) {
+        if (
+          this.abortController?.signal.aborted ||
+          this.state === "disconnected"
+        ) {
+          return;
+        }
+
+        console.warn("[ConnectionManager] SSE error:", err);
+        if (this.state === "connected") {
+          this.setState("error");
+          this.scheduleReconnect();
+        }
+      }
+    };
+
+    doConnect();
+  }
+
+  // ── Reconnect with exponential backoff ──
+
+  private scheduleReconnect() {
+    if (this.retryCount >= this.maxRetries) {
+      this.setState("disconnected");
+      return;
+    }
+
+    this.setState("reconnecting");
+
+    const delay = Math.min(
+      this.baseDelay * Math.pow(2, this.retryCount),
+      this.maxDelay
+    );
+    this.retryCount++;
+
+    this.reconnectTimer = setTimeout(() => {
+      this.connectSSE();
+      // Also check health
+      this.checkHealth()
+        .then(() => {
+          this.retryCount = 0;
+          this.setState("connected");
+        })
+        .catch(() => {
+          // Will retry again
+        });
+    }, delay);
+  }
+
+  private stopReconnect() {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+  }
+
+  // ── Switch session subscription ──
+
+  switchSession(sessionId: string | null) {
+    if (this.activeSessionId === sessionId) return;
+    this.activeSessionId = sessionId;
+    if (this.state === "connected") {
+      this.connectSSE();
+    }
+  }
+}
+
+// ── Singleton ──
+
+let instance: ConnectionManager | null = null;
+
+export function getConnectionManager(options?: ConnectionManagerOptions): ConnectionManager {
+  if (!instance) {
+    instance = new ConnectionManager(options);
+  }
+  return instance;
+}

mobile/lib/query-provider.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

mobile/lib/storage.ts

@@ -0,0 +1,134 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ThemeName } from "../constants/types";
+
+export const storageKeys = {
+  serverUrl: "opencode_server_url",
+  authType: "opencode_auth_type",
+  authValue: "opencode_auth_value",
+  theme: "opencode_theme",
+  lastSessionId: "opencode_last_session_id",
+} as const;
+
+export type AuthType = "none" | "basic" | "bearer" | "apikey";
+
+const cache: Record<string, string | null> = {};
+
+async function get(key: string): Promise<string | null> {
+  if (cache[key] !== undefined) return cache[key];
+  const val = await AsyncStorage.getItem(key);
+  cache[key] = val;
+  return val;
+}
+
+async function set(key: string, value: string): Promise<void> {
+  cache[key] = value;
+  await AsyncStorage.setItem(key, value);
+}
+
+async function del(key: string): Promise<void> {
+  cache[key] = null;
+  await AsyncStorage.removeItem(key);
+}
+
+function getSync(key: string): string | null {
+  if (cache[key] !== undefined) return cache[key];
+  return null;
+}
+
+// Preload all keys on module load
+const _loaded = (async () => {
+  const entries = await AsyncStorage.multiGet(Object.values(storageKeys));
+  for (const [k, v] of entries) {
+    cache[k] = v;
+  }
+})();
+
+// ── Server URL ──
+
+export function getServerUrl(): string {
+  return getSync(storageKeys.serverUrl) || "http://127.0.0.1:4096";
+}
+
+export async function setServerUrl(url: string): Promise<void> {
+  await set(storageKeys.serverUrl, url);
+}
+
+// ── Auth ──
+
+export function getAuthType(): AuthType {
+  return (getSync(storageKeys.authType) as AuthType) || "none";
+}
+
+export async function setAuthType(type: AuthType): Promise<void> {
+  await set(storageKeys.authType, type);
+}
+
+export function getAuthValue(): string {
+  return getSync(storageKeys.authValue) || "";
+}
+
+export async function setAuthValue(value: string): Promise<void> {
+  await set(storageKeys.authValue, value);
+}
+
+export function getCredentials(): { username: string; password: string } {
+  const val = getAuthValue();
+  if (getAuthType() === "basic" && val.includes(":")) {
+    const [username, ...rest] = val.split(":");
+    return { username, password: rest.join(":") };
+  }
+  return { username: "", password: "" };
+}
+
+export async function setCredentials(username: string, password: string): Promise<void> {
+  await setAuthType("basic");
+  await setAuthValue(`${username}:${password}`);
+}
+
+export async function clearAuth(): Promise<void> {
+  await del(storageKeys.authType);
+  await del(storageKeys.authValue);
+}
+
+export function getAuthHeader(): Record<string, string> {
+  const type = getAuthType();
+  const value = getAuthValue();
+
+  if (!value) return {};
+
+  switch (type) {
+    case "basic": {
+      const creds = getCredentials();
+      if (creds.username) {
+        return { Authorization: `Basic ${btoa(`${creds.username}:${creds.password}`)}` };
+      }
+      return {};
+    }
+    case "bearer":
+      return { Authorization: `Bearer ${value}` };
+    case "apikey":
+      return { "X-API-Key": value };
+    default:
+      return {};
+  }
+}
+
+// ── Theme ──
+
+export function getTheme(): ThemeName {
+  return (getSync(storageKeys.theme) as ThemeName) || "tokyo";
+}
+
+export async function setTheme(theme: ThemeName): Promise<void> {
+  await set(storageKeys.theme, theme);
+}
+
+// ── Last session ──
+
+export function getLastSessionId(): string | undefined {
+  return getSync(storageKeys.lastSessionId) || undefined;
+}
+
+export async function setLastSessionId(id: string): Promise<void> {
+  await set(storageKeys.lastSessionId, id);
+}

mobile/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "opencode-mobile",
+  "version": "1.0.0",
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@tanstack/react-query": "^5.60.6",
+    "expo": "~53.0.27",
+    "expo-asset": "~11.1.7",
+    "expo-constants": "~17.1.8",
+    "expo-font": "~13.3.2",
+    "expo-linking": "~7.1.7",
+    "expo-router": "~5.1.11",
+    "expo-secure-store": "~14.2.4",
+    "expo-splash-screen": "~0.30.10",
+    "expo-status-bar": "~2.2.3",
+    "expo-system-ui": "~5.0.11",
+    "lucide-react-native": "^0.460.0",
+    "react": "19.0.0",
+    "react-native": "0.79.6",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-markdown-display": "^7.0.2",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
+    "react-native-svg": "15.11.2"
+  },
+  "devDependencies": {
+    "@types/react": "~19.0.10",
+    "typescript": "~5.8.3"
+  }
+}

mobile/tests/integration.test.ts

@@ -0,0 +1,251 @@
+/**
+ * End-to-end integration test for OpenCode Mobile client
+ * Run against a live opencode serve instance
+ *
+ * Usage: npx tsx mobile/tests/integration.test.ts
+ */
+
+const BASE = "http://127.0.0.1:4096";
+
+interface TestResult {
+  name: string;
+  passed: boolean;
+  error?: string;
+  duration: number;
+}
+
+const results: TestResult[] = [];
+
+async function test(name: string, fn: () => Promise<void>) {
+  const start = Date.now();
+  try {
+    await fn();
+    results.push({ name, passed: true, duration: Date.now() - start });
+    console.log(`  ✓ ${name} (${Date.now() - start}ms)`);
+  } catch (err: any) {
+    results.push({
+      name,
+      passed: false,
+      error: err.message,
+      duration: Date.now() - start,
+    });
+    console.log(`  ✗ ${name}: ${err.message}`);
+  }
+}
+
+function assert(condition: boolean, msg: string) {
+  if (!condition) throw new Error(msg);
+}
+
+async function api<T = any>(path: string, opts?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    headers: { "Content-Type": "application/json", ...opts?.headers },
+    ...opts,
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+// ── Tests ──
+
+async function run() {
+  console.log("\n=== OpenCode Integration Tests ===\n");
+
+  let sessionId: string;
+
+  // 1. Health
+  await test("GET /api/health", async () => {
+    const data = await api("/api/health");
+    assert(data.healthy === true, "not healthy");
+  });
+
+  // 2. Config (root endpoint — /api/config returns HTML)
+  await test("GET /config", async () => {
+    const data = await api("/config");
+    assert(typeof data === "object", "config is not object");
+  });
+
+  // 3. List sessions (root returns array)
+  await test("GET /session (list)", async () => {
+    const data = await api("/session");
+    assert(Array.isArray(data), "not array");
+  });
+
+  // 4. List sessions via /api/ (returns {data, cursor})
+  await test("GET /api/session (list)", async () => {
+    const data = await api("/api/session");
+    assert(Array.isArray(data.data), "data is not array");
+  });
+
+  // 5. Create session
+  await test("POST /session (create)", async () => {
+    const data = await api("/session", {
+      method: "POST",
+      body: JSON.stringify({ title: "Integration Test" }),
+    });
+    assert(data.id, "no id returned");
+    sessionId = data.id;
+  });
+
+  // 6. Get session (root)
+  await test("GET /session/{id}", async () => {
+    const data = await api(`/session/${sessionId}`);
+    assert(data.id === sessionId, "id mismatch");
+  });
+
+  // 7. Get session via /api/ (returns {data: Session})
+  await test("GET /api/session/{id}", async () => {
+    const data = await api(`/api/session/${sessionId}`);
+    assert(data.data?.id === sessionId, "id mismatch in data");
+  });
+
+  // 8. List messages (empty)
+  await test("GET /session/{id}/message (empty)", async () => {
+    const data = await api(`/session/${sessionId}/message`);
+    assert(Array.isArray(data), "not array");
+  });
+
+  // 9. Send message (requires {parts: [{type:'text', text:'...'}]})
+  await test("POST /session/{id}/message (send)", async () => {
+    const data = await api(`/session/${sessionId}/message`, {
+      method: "POST",
+      body: JSON.stringify({
+        parts: [{ type: "text", text: "Say exactly: integration test ok" }],
+      }),
+    });
+    assert(data.info || data.parts, "unexpected response shape");
+  });
+
+  // 10. SSE event stream (global endpoint)
+  await test("GET /event (SSE)", async () => {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 4000);
+
+    const res = await fetch(`${BASE}/event`, {
+      headers: { Accept: "text/event-stream" },
+      signal: controller.signal,
+    });
+
+    clearTimeout(timeout);
+    assert(res.ok, `HTTP ${res.status}`);
+
+    const reader = res.body!.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let eventCount = 0;
+
+    const readTimeout = setTimeout(() => reader.cancel(), 3000);
+
+    while (eventCount < 1) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        if (line.startsWith("data: ") || line.startsWith("event: ")) eventCount++;
+      }
+    }
+
+    clearTimeout(readTimeout);
+    reader.cancel();
+    assert(eventCount > 0, `no events (got ${eventCount})`);
+  });
+
+  // 11. Providers
+  await test("GET /api/provider", async () => {
+    const data = await api("/api/provider");
+    assert(Array.isArray(data.data), "data is not array");
+  });
+
+  // 12. Models
+  await test("GET /api/model", async () => {
+    const data = await api("/api/model");
+    assert(Array.isArray(data.data), "data is not array");
+  });
+
+  // 13. Agents
+  await test("GET /api/agent", async () => {
+    const data = await api("/api/agent");
+    assert(Array.isArray(data.data), "data is not array");
+  });
+
+  // 14. Commands
+  await test("GET /api/command", async () => {
+    const data = await api("/api/command");
+    assert(Array.isArray(data.data), "data is not array");
+  });
+
+  // 15. Skills
+  await test("GET /api/skill", async () => {
+    const data = await api("/api/skill");
+    assert(Array.isArray(data.data), "data is not array");
+  });
+
+  // 16. File list
+  await test("GET /api/fs/list", async () => {
+    const data = await api("/api/fs/list?path=.");
+    assert(Array.isArray(data.data), "data is not array");
+    assert(data.data.length > 0, "empty file list");
+  });
+
+  // 17. File content (root endpoint)
+  await test("GET /file/content", async () => {
+    const data = await api("/file/content?path=package.json");
+    assert(data.content || typeof data === "string", "no content");
+  });
+
+  // 18. Find files (root endpoint)
+  await test("GET /find/file", async () => {
+    const data = await api("/find/file?query=package");
+    assert(Array.isArray(data), "not array");
+  });
+
+  // 19. PTY list
+  await test("GET /api/pty", async () => {
+    const data = await api("/api/pty");
+    assert(Array.isArray(data.data), "data is not array");
+  });
+
+  // 20. VCS status
+  await test("GET /vcs/status", async () => {
+    const data = await api("/vcs/status");
+    assert(typeof data === "object", "not object");
+  });
+
+  // 21. Delete session
+  await test("DELETE /session/{id}", async () => {
+    await api(`/session/${sessionId}`, { method: "DELETE" });
+  });
+
+  // 22. Verify deleted
+  await test("GET /session/{id} after delete", async () => {
+    try {
+      await api(`/session/${sessionId}`);
+      assert(false, "should have thrown");
+    } catch {
+      // Expected
+    }
+  });
+
+  // Summary
+  console.log("\n=== Results ===\n");
+  const passed = results.filter((r) => r.passed).length;
+  const failed = results.filter((r) => !r.passed).length;
+  console.log(`  ${passed} passed, ${failed} failed out of ${results.length} tests`);
+
+  if (failed > 0) {
+    console.log("\n  Failed tests:");
+    results
+      .filter((r) => !r.passed)
+      .forEach((r) => console.log(`    - ${r.name}: ${r.error}`));
+  }
+
+  console.log("");
+  process.exit(failed > 0 ? 1 : 0);
+}
+
+run().catch((err) => {
+  console.error("Fatal:", err);
+  process.exit(1);
+});

mobile/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}