clawdex-mobile 1.0.0

package/STATUS.md

@@ -0,0 +1,115 @@
+# Project Status & Assessment
+
+> Last reviewed: 2026-02-20
+
+## Verdict
+
+The foundation is solid. The Codex integration protocol, the bridge architecture, and the real-time streaming pipeline are all correctly implemented. What we have is a working prototype that needs hardening and polish to become production-ready.
+
+## Open Source License Requirements
+
+- Apply the checklist in `docs/open-source-license-requirements.md` for all distributed builds.
+- Include third-party notices in release artifacts before submission/distribution.
+
+## Delivery Order (Working Plan)
+
+1. **Phase 1 (in progress)**: Security + approvals
+   - [x] Bridge token auth (REST + WS)
+   - [x] Replace auto-accept with explicit approval queue and decision API
+   - [x] Mobile approval surface for allow/decline decisions
+2. **Phase 2 (next)**: Thread UX polish (drawer navigation, smoother mobile interactions)
+3. **Phase 3**: Worktree/mode metadata and archive/filter flows
+4. **Phase 4**: Reliability (WS reconnect, app-server recovery) + production hardening
+
+## Architecture
+
+```
+Mobile App (Expo/RN)  ──HTTP REST + WS──▶  mac-bridge (Fastify)  ──JSON-RPC 2.0 over stdio──▶  codex app-server
+```
+
+Two-layer design — the phone talks to the bridge over the network, and the bridge speaks the Codex `app-server` protocol.
+
+## What's Working
+
+- **Full end-to-end loop** — list threads, create threads, send messages, stream responses via WebSocket deltas
+- **Codex `app-server` integration** — proper JSON-RPC 2.0 handshake, request correlation, notification dispatch, explicit approval routing
+- **Real-time streaming** — `thread.message.delta` events flow from Codex → bridge → WS → mobile UI
+- **4 functional screens** — Threads, Terminal, Git, Settings with state management, loading states, error handling
+- **Zod validation** on the bridge API, proper error codes (409 for busy threads), typed clients on both sides
+- **Thread management** — list, create, open, reply, status tracking (idle/running/error/complete), run event log
+- **Terminal** — execute shell commands, view stdout/stderr/exit code/duration
+- **Git** — view branch, status, diff, commit with custom message
+- **Settings** — health check, live WS connection indicator
+
+## Tech Stack
+
+| Component | Stack |
+|-----------|-------|
+| Mobile | Expo 54, React Native 0.81, React 19, React Navigation v7 |
+| Bridge | Fastify v5, @fastify/websocket v11, Zod v3, tsx |
+| Codex IPC | JSON-RPC 2.0 over stdio (`codex app-server --listen stdio://`) |
+| Monorepo | npm workspaces |
+| Language | TypeScript (ES2022) throughout |
+
+## What Needs Work (priority order)
+
+### P0 — Security
+
+- [x] **Bridge auth token support added** — REST + WS now support bearer token auth (`BRIDGE_AUTH_TOKEN` / `EXPO_PUBLIC_HOST_BRIDGE_TOKEN`).
+- [ ] **Pairing flow not added yet** — auth still depends on manual token setup rather than QR/one-time pairing.
+
+### P1 — Reliability
+
+- [ ] **No WebSocket reconnection** — if the WS drops, it stays dead. Add auto-reconnect with exponential backoff in `HostBridgeWsClient`.
+- [ ] **No Codex process recovery** — if `codex app-server` crashes, the bridge is stuck. Add auto-restart with a health check loop.
+- [ ] **No error recovery** — the bridge doesn't handle the Codex process dying mid-turn.
+
+### P2 — Functionality Gaps
+
+- [ ] **Git staging missing** — `GitService.commit()` only runs `git commit -m`, not `git add` first. No staging area management. Users will get "nothing to commit" errors.
+- [ ] **No markdown rendering** — assistant messages are plain `Text` blocks. Codex responses are markdown-heavy.
+- [ ] **No dedicated thread detail view** — message content is inline in the thread list; will get cramped with longer conversations.
+- [ ] **No push notifications** — can't be alerted when a long-running Codex task finishes.
+
+### P3 — Polish & Production
+
+- [ ] **No tests** — zero test coverage (unit, integration, e2e).
+- [ ] **No EAS build configuration** — needed for distributing to real devices.
+- [ ] **No CI/CD pipeline** — no GitHub Actions or equivalent.
+- [ ] **Bleeding-edge dependencies** — Expo 54 + RN 0.81 + React 19 may have ecosystem compat issues.
+
+## Design Decisions Worth Noting
+
+- **Explicit approval flow** — thread runs now use `approvalPolicy: 'on-request'` and surface command/file approvals to the mobile client (`/approvals` + `/approvals/:id/decision`) rather than auto-accepting.
+- **In-memory thread cache** — the `CodexCliAdapter` caches threads in a `Map`. If the bridge restarts, it re-fetches from Codex's persisted sessions on next access.
+- **Bridge binds to 0.0.0.0** — accessible from the LAN by default, which is required for physical device testing; keep auth enabled for non-local use.
+
+## File Map
+
+```
+apps/mobile/
+  App.tsx                          Root — navigation + tab setup
+  src/
+    config.ts                      Bridge URL from env
+    api/
+      client.ts                    HostBridgeApiClient (REST)
+      ws.ts                        HostBridgeWsClient (WebSocket)
+      types.ts                     Shared TypeScript types
+    screens/
+      ThreadsScreen.tsx            Chat UI — list + create + reply + streaming
+      TerminalScreen.tsx           Command execution UI
+      GitScreen.tsx                Git status/diff/commit
+      SettingsScreen.tsx           Health + connection status
+
+services/mac-bridge/
+  src/
+    index.ts                       Entry — port/host config, buildServer()
+    server.ts                      Fastify routes + dependency wiring
+    types.ts                       Shared types
+    services/
+      codexAppServerClient.ts      JSON-RPC over stdio client
+      codexCliAdapter.ts           High-level Codex adapter
+      realtimeHub.ts               WS broadcast hub
+      terminalService.ts           Shell execution via spawn
+      gitService.ts                Git ops via terminalService
+```

package/apps/mobile/.env.example

@@ -0,0 +1,7 @@
+EXPO_PUBLIC_HOST_BRIDGE_URL=http://127.0.0.1:8787
+EXPO_PUBLIC_HOST_BRIDGE_TOKEN=change-me
+EXPO_PUBLIC_ALLOW_QUERY_TOKEN_AUTH=false
+EXPO_PUBLIC_ALLOW_INSECURE_REMOTE_BRIDGE=false
+EXPO_PUBLIC_EXTERNAL_STATUS_FULL_SYNC_DEBOUNCE_MS=450
+EXPO_PUBLIC_PRIVACY_POLICY_URL=https://example.com/privacy
+EXPO_PUBLIC_TERMS_OF_SERVICE_URL=https://example.com/terms

package/apps/mobile/App.tsx

@@ -0,0 +1,589 @@
+import 'react-native-gesture-handler';
+
+import * as FileSystem from 'expo-file-system/legacy';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  Keyboard,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+
+import { HostBridgeApiClient } from './src/api/client';
+import type { ApprovalMode, Chat, ReasoningEffort } from './src/api/types';
+import { HostBridgeWsClient } from './src/api/ws';
+import { env } from './src/config';
+import { DrawerContent } from './src/navigation/DrawerContent';
+import { GitScreen } from './src/screens/GitScreen';
+import { MainScreen, type MainScreenHandle } from './src/screens/MainScreen';
+import { PrivacyScreen } from './src/screens/PrivacyScreen';
+import { SettingsScreen } from './src/screens/SettingsScreen';
+import { TerminalScreen } from './src/screens/TerminalScreen';
+import { TermsScreen } from './src/screens/TermsScreen';
+import { colors } from './src/theme';
+
+type Screen = 'Main' | 'ChatGit' | 'Terminal' | 'Settings' | 'Privacy' | 'Terms';
+
+const DRAWER_WIDTH = 280;
+const EDGE_SWIPE_WIDTH = 24;
+const SWIPE_OPEN_DISTANCE = 56;
+const SWIPE_CLOSE_DISTANCE = 56;
+const SWIPE_OPEN_VELOCITY = 0.4;
+const SWIPE_CLOSE_VELOCITY = -0.4;
+const APP_SETTINGS_FILE = 'clawdex-app-settings.json';
+const APP_SETTINGS_VERSION = 1;
+
+export default function App() {
+  const ws = useMemo(
+    () =>
+      new HostBridgeWsClient(env.hostBridgeUrl, {
+        authToken: env.hostBridgeToken,
+        allowQueryTokenAuth: env.allowWsQueryTokenAuth
+      }),
+    []
+  );
+  const api = useMemo(
+    () =>
+      new HostBridgeApiClient({
+        ws,
+      }),
+    [ws]
+  );
+  const mainRef = useRef<MainScreenHandle>(null);
+  const [currentScreen, setCurrentScreen] = useState<Screen>('Main');
+  const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
+  const [activeChat, setActiveChat] = useState<Chat | null>(null);
+  const [gitChat, setGitChat] = useState<Chat | null>(null);
+  const [pendingMainChatId, setPendingMainChatId] = useState<string | null>(null);
+  const [pendingMainChatSnapshot, setPendingMainChatSnapshot] = useState<Chat | null>(null);
+  const [defaultStartCwd, setDefaultStartCwd] = useState<string | null>(null);
+  const [defaultModelId, setDefaultModelId] = useState<string | null>(null);
+  const [defaultReasoningEffort, setDefaultReasoningEffort] =
+    useState<ReasoningEffort | null>(null);
+  const [approvalMode, setApprovalMode] = useState<ApprovalMode>('normal');
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const drawerAnim = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
+  const overlayAnim = useRef(new Animated.Value(0)).current;
+  const { width: screenWidth } = useWindowDimensions();
+
+  useEffect(() => {
+    ws.connect();
+    return () => ws.disconnect();
+  }, [ws]);
+
+  const saveAppSettings = useCallback(
+    async (
+      nextModelId: string | null,
+      nextEffort: ReasoningEffort | null,
+      nextApprovalMode: ApprovalMode
+    ) => {
+      const settingsPath = getAppSettingsPath();
+      if (!settingsPath) {
+        return;
+      }
+
+      const payload = JSON.stringify({
+        version: APP_SETTINGS_VERSION,
+        defaultModelId: nextModelId,
+        defaultReasoningEffort: nextEffort,
+        approvalMode: nextApprovalMode,
+      });
+
+      try {
+        await FileSystem.writeAsStringAsync(settingsPath, payload);
+      } catch {
+        // Best effort persistence only.
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadSettings = async () => {
+      const settingsPath = getAppSettingsPath();
+      if (!settingsPath) {
+        return;
+      }
+
+      try {
+        const raw = await FileSystem.readAsStringAsync(settingsPath);
+        if (cancelled) {
+          return;
+        }
+        const parsed = parseAppSettings(raw);
+        setDefaultModelId(parsed.defaultModelId);
+        setDefaultReasoningEffort(parsed.defaultReasoningEffort);
+        setApprovalMode(parsed.approvalMode);
+      } catch {
+        if (!cancelled) {
+          setDefaultModelId(null);
+          setDefaultReasoningEffort(null);
+          setApprovalMode('normal');
+        }
+      }
+    };
+
+    void loadSettings();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const openDrawer = useCallback(() => {
+    Keyboard.dismiss();
+    setDrawerOpen(true);
+    Animated.parallel([
+      Animated.spring(drawerAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        bounciness: 0,
+        speed: 20,
+      }),
+      Animated.timing(overlayAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [drawerAnim, overlayAnim]);
+
+  const closeDrawer = useCallback(() => {
+    setDrawerOpen(false);
+    Animated.parallel([
+      Animated.spring(drawerAnim, {
+        toValue: -DRAWER_WIDTH,
+        useNativeDriver: true,
+        bounciness: 0,
+        speed: 20,
+      }),
+      Animated.timing(overlayAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [drawerAnim, overlayAnim]);
+
+  const openSwipeResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gesture) => {
+          if (drawerOpen) {
+            return false;
+          }
+
+          if (gesture.dx <= 0) {
+            return false;
+          }
+
+          const isMostlyHorizontal = Math.abs(gesture.dx) > Math.abs(gesture.dy);
+          const isFromEdge = gesture.moveX <= EDGE_SWIPE_WIDTH + 12;
+
+          return isMostlyHorizontal && isFromEdge && gesture.dx > 8;
+        },
+        onPanResponderRelease: (_, gesture) => {
+          if (
+            gesture.dx > SWIPE_OPEN_DISTANCE ||
+            gesture.vx > SWIPE_OPEN_VELOCITY
+          ) {
+            if (currentScreen === 'ChatGit') {
+              const chatId = gitChat?.id ?? activeChat?.id ?? selectedChatId;
+              const resumeChat =
+                gitChat && gitChat.id === chatId
+                  ? gitChat
+                  : activeChat && activeChat.id === chatId
+                    ? activeChat
+                    : null;
+              setCurrentScreen('Main');
+              setGitChat(null);
+              if (chatId) {
+                setSelectedChatId(chatId);
+                setPendingMainChatId(chatId);
+                setPendingMainChatSnapshot(resumeChat);
+              }
+              return;
+            }
+
+            openDrawer();
+          }
+        },
+      }),
+    [activeChat, currentScreen, drawerOpen, gitChat, openDrawer, selectedChatId]
+  );
+
+  const closeSwipeResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gesture) => {
+          if (!drawerOpen) {
+            return false;
+          }
+
+          if (gesture.dx >= 0) {
+            return false;
+          }
+
+          const isMostlyHorizontal = Math.abs(gesture.dx) > Math.abs(gesture.dy);
+          return isMostlyHorizontal && gesture.dx < -8;
+        },
+        onPanResponderRelease: (_, gesture) => {
+          if (
+            gesture.dx < -SWIPE_CLOSE_DISTANCE ||
+            gesture.vx < SWIPE_CLOSE_VELOCITY
+          ) {
+            closeDrawer();
+          }
+        },
+      }),
+    [closeDrawer, drawerOpen]
+  );
+
+  const navigate = useCallback(
+    (screen: Screen) => {
+      setCurrentScreen(screen);
+      closeDrawer();
+    },
+    [closeDrawer]
+  );
+
+  const handleSelectChat = useCallback(
+    (id: string) => {
+      setSelectedChatId(id);
+      setGitChat(null);
+      setCurrentScreen('Main');
+      setPendingMainChatId(id);
+      setPendingMainChatSnapshot(null);
+      closeDrawer();
+    },
+    [closeDrawer]
+  );
+
+  const handleNewChat = useCallback(() => {
+    setPendingMainChatId(null);
+    setPendingMainChatSnapshot(null);
+    setSelectedChatId(null);
+    setActiveChat(null);
+    setGitChat(null);
+    setCurrentScreen('Main');
+    mainRef.current?.startNewChat();
+    closeDrawer();
+  }, [closeDrawer]);
+
+  const handleDefaultModelSettingsChange = useCallback(
+    (modelId: string | null, effort: ReasoningEffort | null) => {
+      const normalizedModelId = normalizeModelId(modelId);
+      const normalizedEffort = normalizeReasoningEffort(effort);
+      setDefaultModelId(normalizedModelId);
+      setDefaultReasoningEffort(normalizedEffort);
+      void saveAppSettings(normalizedModelId, normalizedEffort, approvalMode);
+    },
+    [approvalMode, saveAppSettings]
+  );
+
+  const handleApprovalModeChange = useCallback(
+    (nextMode: ApprovalMode) => {
+      const normalizedMode = normalizeApprovalMode(nextMode);
+      setApprovalMode(normalizedMode);
+      void saveAppSettings(defaultModelId, defaultReasoningEffort, normalizedMode);
+    },
+    [defaultModelId, defaultReasoningEffort, saveAppSettings]
+  );
+
+  const handleOpenChatGit = useCallback((chat: Chat) => {
+    setGitChat(chat);
+    setSelectedChatId(chat.id);
+    setCurrentScreen('ChatGit');
+  }, []);
+
+  const handleChatContextChange = useCallback((chat: Chat | null) => {
+    setActiveChat(chat);
+    setSelectedChatId(chat?.id ?? null);
+  }, []);
+
+  const handleGitChatUpdated = useCallback((chat: Chat) => {
+    setGitChat(chat);
+    setActiveChat((prev) => (prev?.id === chat.id ? chat : prev));
+  }, []);
+
+  const handleCloseGit = useCallback(() => {
+    const chatId = gitChat?.id ?? activeChat?.id ?? selectedChatId;
+    const resumeChat =
+      gitChat && gitChat.id === chatId
+        ? gitChat
+        : activeChat && activeChat.id === chatId
+          ? activeChat
+          : null;
+    setCurrentScreen('Main');
+    setGitChat(null);
+    if (chatId) {
+      setSelectedChatId(chatId);
+      setPendingMainChatId(chatId);
+      setPendingMainChatSnapshot(resumeChat);
+    }
+  }, [activeChat, gitChat, selectedChatId]);
+
+  const openPrivacy = useCallback(() => {
+    setCurrentScreen('Privacy');
+  }, []);
+
+  const openTerms = useCallback(() => {
+    setCurrentScreen('Terms');
+  }, []);
+
+  const renderScreen = () => {
+    switch (currentScreen) {
+      case 'Terminal':
+        return <TerminalScreen api={api} ws={ws} onOpenDrawer={openDrawer} />;
+      case 'ChatGit':
+        return gitChat ? (
+          <GitScreen
+            api={api}
+            chat={gitChat}
+            onBack={handleCloseGit}
+            onChatUpdated={handleGitChatUpdated}
+          />
+        ) : (
+          <MainScreen
+            ref={mainRef}
+            api={api}
+            ws={ws}
+            onOpenDrawer={openDrawer}
+            onOpenGit={handleOpenChatGit}
+            defaultStartCwd={defaultStartCwd}
+            defaultModelId={defaultModelId}
+            defaultReasoningEffort={defaultReasoningEffort}
+            approvalMode={approvalMode}
+            onDefaultStartCwdChange={setDefaultStartCwd}
+            onChatContextChange={handleChatContextChange}
+            pendingOpenChatId={pendingMainChatId}
+            pendingOpenChatSnapshot={pendingMainChatSnapshot}
+            onPendingOpenChatHandled={() => {
+              setPendingMainChatId(null);
+              setPendingMainChatSnapshot(null);
+            }}
+          />
+        );
+      case 'Settings':
+        return (
+          <SettingsScreen
+            api={api}
+            ws={ws}
+            bridgeUrl={env.hostBridgeUrl}
+            defaultModelId={defaultModelId}
+            defaultReasoningEffort={defaultReasoningEffort}
+            onDefaultModelSettingsChange={handleDefaultModelSettingsChange}
+            approvalMode={approvalMode}
+            onApprovalModeChange={handleApprovalModeChange}
+            onOpenDrawer={openDrawer}
+            onOpenPrivacy={openPrivacy}
+            onOpenTerms={openTerms}
+          />
+        );
+      case 'Privacy':
+        return (
+          <PrivacyScreen
+            policyUrl={env.privacyPolicyUrl}
+            onOpenDrawer={openDrawer}
+          />
+        );
+      case 'Terms':
+        return (
+          <TermsScreen
+            termsUrl={env.termsOfServiceUrl}
+            onOpenDrawer={openDrawer}
+          />
+        );
+      default:
+        return (
+          <MainScreen
+            ref={mainRef}
+            api={api}
+            ws={ws}
+            onOpenDrawer={openDrawer}
+            onOpenGit={handleOpenChatGit}
+            defaultStartCwd={defaultStartCwd}
+            defaultModelId={defaultModelId}
+            defaultReasoningEffort={defaultReasoningEffort}
+            approvalMode={approvalMode}
+            onDefaultStartCwdChange={setDefaultStartCwd}
+            onChatContextChange={handleChatContextChange}
+            pendingOpenChatId={pendingMainChatId}
+            pendingOpenChatSnapshot={pendingMainChatSnapshot}
+            onPendingOpenChatHandled={() => {
+              setPendingMainChatId(null);
+              setPendingMainChatSnapshot(null);
+            }}
+          />
+        );
+    }
+  };
+
+  return (
+    <View style={styles.root}>
+      {/* Main content */}
+      <View style={[styles.screen, { width: screenWidth }]}>
+        {renderScreen()}
+      </View>
+
+      {/* Overlay */}
+      <Animated.View
+        pointerEvents={drawerOpen ? 'auto' : 'none'}
+        {...closeSwipeResponder.panHandlers}
+        style={[styles.overlay, { opacity: overlayAnim }]}
+      >
+        <Pressable style={StyleSheet.absoluteFill} onPress={closeDrawer} />
+      </Animated.View>
+
+      {/* Drawer */}
+      <Animated.View
+        {...closeSwipeResponder.panHandlers}
+        style={[
+          styles.drawer,
+          { transform: [{ translateX: drawerAnim }] },
+        ]}
+      >
+        <DrawerContent
+          api={api}
+          ws={ws}
+          selectedChatId={selectedChatId}
+          selectedDefaultCwd={defaultStartCwd}
+          onSelectDefaultCwd={setDefaultStartCwd}
+          onSelectChat={handleSelectChat}
+          onNewChat={handleNewChat}
+          onNavigate={navigate}
+        />
+      </Animated.View>
+
+      <View
+        pointerEvents={drawerOpen ? 'none' : 'auto'}
+        style={styles.edgeSwipeZone}
+        {...openSwipeResponder.panHandlers}
+      />
+    </View>
+  );
+}
+
+function getAppSettingsPath(): string | null {
+  const base = FileSystem.documentDirectory;
+  if (typeof base !== 'string' || base.trim().length === 0) {
+    return null;
+  }
+
+  return `${base}${APP_SETTINGS_FILE}`;
+}
+
+function parseAppSettings(raw: string): {
+  defaultModelId: string | null;
+  defaultReasoningEffort: ReasoningEffort | null;
+  approvalMode: ApprovalMode;
+} {
+  if (typeof raw !== 'string' || raw.trim().length === 0) {
+    return {
+      defaultModelId: null,
+      defaultReasoningEffort: null,
+      approvalMode: 'normal',
+    };
+  }
+
+  try {
+    const parsed = JSON.parse(raw);
+    if (
+      !parsed ||
+      typeof parsed !== 'object' ||
+      parsed.version !== APP_SETTINGS_VERSION
+    ) {
+      return {
+        defaultModelId: null,
+        defaultReasoningEffort: null,
+        approvalMode: 'normal',
+      };
+    }
+
+    return {
+      defaultModelId: normalizeModelId(
+        (parsed as { defaultModelId?: unknown }).defaultModelId
+      ),
+      defaultReasoningEffort: normalizeReasoningEffort(
+        (parsed as { defaultReasoningEffort?: unknown }).defaultReasoningEffort
+      ),
+      approvalMode: normalizeApprovalMode(
+        (parsed as { approvalMode?: unknown }).approvalMode
+      ),
+    };
+  } catch {
+    return {
+      defaultModelId: null,
+      defaultReasoningEffort: null,
+      approvalMode: 'normal',
+    };
+  }
+}
+
+function normalizeModelId(value: unknown): string | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+function normalizeReasoningEffort(value: unknown): ReasoningEffort | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+
+  const normalized = value.trim().toLowerCase();
+  if (
+    normalized === 'none' ||
+    normalized === 'minimal' ||
+    normalized === 'low' ||
+    normalized === 'medium' ||
+    normalized === 'high' ||
+    normalized === 'xhigh'
+  ) {
+    return normalized;
+  }
+
+  return null;
+}
+
+function normalizeApprovalMode(value: unknown): ApprovalMode {
+  return value === 'yolo' ? 'yolo' : 'normal';
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: colors.bgMain,
+  },
+  screen: {
+    flex: 1,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    zIndex: 10,
+  },
+  drawer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: DRAWER_WIDTH,
+    zIndex: 20,
+  },
+  edgeSwipeZone: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: EDGE_SWIPE_WIDTH,
+    zIndex: 30,
+  },
+});