From 47a99f5668b39dda45446a572bf7f5bd80c907e8 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sun, 23 Nov 2025 14:12:53 +0100
Subject: [PATCH] Fix reasoning timeline UI and type errors

---
 codex-patch.txt                               |    1 +
 packages/app/src/app/+html.tsx                |   30 +-
 .../app/src/components/agent-input-area.tsx   |  143 +-
 packages/app/src/components/agent-list.tsx    |   13 +-
 .../app/src/components/agent-stream-view.tsx  |   28 +-
 .../app/src/components/create-agent-modal.tsx | 1478 +++++++++++++----
 packages/app/src/components/message.tsx       |  868 ++++++----
 .../components/orchestrator-messages-view.tsx |   58 +-
 .../src/components/tool-call-bottom-sheet.tsx |  389 -----
 packages/app/src/contexts/session-context.tsx |   74 +
 packages/app/src/types/shared.ts              |    9 -
 packages/app/src/types/stream.ts              |   49 +-
 .../server/src/server/agent/agent-manager.ts  |   31 +-
 .../src/server/agent/agent-sdk-types.ts       |   10 +
 .../server/agent/model-catalog.e2e.test.ts    |   32 +
 .../server/src/server/agent/model-catalog.ts  |  248 +++
 .../agent/providers/claude-agent.test.ts      |   96 ++
 .../server/agent/providers/claude-agent.ts    |    9 +
 .../agent/providers/codex-agent.test.ts       |   99 ++
 .../src/server/agent/providers/codex-agent.ts |   39 +-
 packages/server/src/server/messages.ts        |   36 +
 packages/server/src/server/session.ts         |   65 +-
 test-codex.txt                                |    1 +
 23 files changed, 2569 insertions(+), 1237 deletions(-)
 create mode 100644 codex-patch.txt
 delete mode 100644 packages/app/src/components/tool-call-bottom-sheet.tsx
 create mode 100644 packages/server/src/server/agent/model-catalog.e2e.test.ts
 create mode 100644 packages/server/src/server/agent/model-catalog.ts
 create mode 100644 test-codex.txt

diff --git a/codex-patch.txt b/codex-patch.txt
new file mode 100644
index 000000000..9eb7b90ed
--- /dev/null
+++ b/codex-patch.txt
@@ -0,0 +1 @@
+patch
diff --git a/packages/app/src/app/+html.tsx b/packages/app/src/app/+html.tsx
index b83239ef7..a5cd89c5a 100644
--- a/packages/app/src/app/+html.tsx
+++ b/packages/app/src/app/+html.tsx
@@ -4,6 +4,33 @@ import type { PropsWithChildren } from "react";
 // Ensure Unistyles runs before Expo Router statically renders each page.
 import "../styles/unistyles";
 
+const webEcosystemStyles = /* css */ `
+  html {
+    touch-action: auto;
+  }
+
+  body {
+    overflow: auto;
+    overscroll-behavior: contain;
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  body * {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+`;
+
+function WebRespectfulStyleReset() {
+  return (
+    <style
+      id="paseo-web-ecosystem"
+      dangerouslySetInnerHTML={{ __html: webEcosystemStyles }}
+    />
+  );
+}
+
 export default function Root({ children }: PropsWithChildren) {
   return (
     <html lang="en">
@@ -12,10 +39,11 @@ export default function Root({ children }: PropsWithChildren) {
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=yes, minimum-scale=1, maximum-scale=5"
         />
         {/* Reset scroll styles so React Native Web views behave like native. */}
         <ScrollViewStyleReset />
+        <WebRespectfulStyleReset />
       </head>
       <body>{children}</body>
     </html>
diff --git a/packages/app/src/components/agent-input-area.tsx b/packages/app/src/components/agent-input-area.tsx
index 54014b8ca..cba4b1e71 100644
--- a/packages/app/src/components/agent-input-area.tsx
+++ b/packages/app/src/components/agent-input-area.tsx
@@ -34,7 +34,7 @@ interface AgentInputAreaProps {
   agentId: string;
 }
 
-const MIN_INPUT_HEIGHT = 32;
+const MIN_INPUT_HEIGHT = 50;
 const MAX_INPUT_HEIGHT = 160;
 const MAX_INPUT_WIDTH = 960;
 const BASE_VERTICAL_PADDING = (FOOTER_HEIGHT - MIN_INPUT_HEIGHT) / 2;
@@ -87,6 +87,8 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
   
   const recordingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const textInputRef = useRef<TextInput | (TextInput & { getNativeRef?: () => unknown }) | null>(null);
+  const inputHeightRef = useRef(MIN_INPUT_HEIGHT);
+  const baselineInputHeightRef = useRef<number | null>(null);
   const overlayTransition = useSharedValue(0);
   const { pickImages } = useImageAttachmentPicker();
   
@@ -102,6 +104,9 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
     }
     console.log(`[AgentInput][InputHeight] ${label}`, payload);
   };
+  useEffect(() => {
+    inputHeightRef.current = inputHeight;
+  }, [inputHeight]);
 
   async function handleSendMessage() {
     if (!userInput.trim() || !ws.isConnected) return;
@@ -298,6 +303,32 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
     return null;
   }
 
+  function focusWebTextInput(): void {
+    if (!IS_WEB) {
+      return;
+    }
+    const node = textInputRef.current;
+    if (!node) {
+      return;
+    }
+
+    const target: unknown =
+      typeof (node as { focus?: () => void }).focus === "function"
+        ? node
+        : typeof (node as { getNativeRef?: () => unknown }).getNativeRef === "function"
+          ? (node as { getNativeRef?: () => unknown }).getNativeRef?.()
+          : null;
+
+    if (target && typeof (target as { focus?: () => void }).focus === "function") {
+      const exec = () => (target as { focus: () => void }).focus();
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(exec);
+      } else {
+        setTimeout(exec, 0);
+      }
+    }
+  }
+
   function measureWebInputHeight(source: string): boolean {
     if (!IS_WEB) {
       return false;
@@ -311,37 +342,59 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
     element.style.height = "auto";
     const measuredHeight = element.scrollHeight;
     element.style.height = previousHeight ?? "";
-    const bounded = Math.min(
-      MAX_INPUT_HEIGHT,
-      Math.max(MIN_INPUT_HEIGHT, measuredHeight),
-    );
-    debugInputHeight(source, {
-      measuredHeight,
-      bounded,
+    const bounded = applyMeasuredHeight(measuredHeight, source, {
       scrollHeight: element.scrollHeight,
       inlineHeight: previousHeight,
     });
-    setBoundedInputHeight(bounded);
+    element.style.height = `${bounded}px`;
+    element.style.minHeight = `${MIN_INPUT_HEIGHT}px`;
+    element.style.maxHeight = `${MAX_INPUT_HEIGHT}px`;
+    element.style.overflowY = bounded >= MAX_INPUT_HEIGHT ? "auto" : "hidden";
     return true;
   }
 
+  function applyMeasuredHeight(
+    measuredHeight: number,
+    source: string,
+    details: Record<string, unknown> = {},
+  ): number {
+    const existingBaseline = baselineInputHeightRef.current;
+    if (existingBaseline === null) {
+      baselineInputHeightRef.current = measuredHeight;
+    }
+    const baseline = baselineInputHeightRef.current ?? measuredHeight;
+    const normalizedHeight = measuredHeight - baseline + MIN_INPUT_HEIGHT;
+    const bounded = Math.min(
+      MAX_INPUT_HEIGHT,
+      Math.max(MIN_INPUT_HEIGHT, normalizedHeight),
+    );
+    debugInputHeight(source, {
+      measuredHeight,
+      normalizedHeight,
+      bounded,
+      baseline,
+      ...details,
+    });
+    setBoundedInputHeight(bounded);
+    return bounded;
+  }
+
   function setBoundedInputHeight(nextHeight: number) {
     const boundedHeight = Math.min(
       MAX_INPUT_HEIGHT,
       Math.max(MIN_INPUT_HEIGHT, nextHeight),
     );
 
-    setInputHeight((currentHeight) => {
-      if (Math.abs(currentHeight - boundedHeight) < 1) {
-        return currentHeight;
-      }
-      debugInputHeight("set-state", {
-        nextHeight,
-        boundedHeight,
-        previousHeight: currentHeight,
-      });
-      return boundedHeight;
+    if (Math.abs(inputHeightRef.current - boundedHeight) < 1) {
+      return;
+    }
+
+    debugInputHeight("set-state", {
+      nextHeight,
+      boundedHeight,
+      previousHeight: inputHeightRef.current,
     });
+    setInputHeight(boundedHeight);
   }
 
   function handleContentSizeChange(
@@ -351,11 +404,9 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
       return;
     }
 
-    debugInputHeight("native-measure", {
-      height: event.nativeEvent.contentSize.height,
+    applyMeasuredHeight(event.nativeEvent.contentSize.height, "native-measure", {
       width: event.nativeEvent.contentSize.width,
     });
-    setBoundedInputHeight(event.nativeEvent.contentSize.height);
   }
 
   const agent = agents.get(agentId);
@@ -387,6 +438,13 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
       return;
     }
     event.preventDefault();
+    if (isAgentRunning) {
+      if (!hasSendableContent || !ws.isConnected) {
+        return;
+      }
+      handleQueueCurrentInput();
+      return;
+    }
     if (!shouldShowSendButton || isProcessing || !ws.isConnected) {
       return;
     }
@@ -399,6 +457,10 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
     }
   }, [isAgentRunning, ws.isConnected]);
 
+  useEffect(() => {
+    focusWebTextInput();
+  }, [agentId]);
+
   // Hydrate draft only when switching agents
   useEffect(() => {
     const draft = draftInputs.get(agentId);
@@ -522,9 +584,9 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
       onPress={handleRealtimePress}
       disabled={!ws.isConnected && !isRealtimeMode}
       style={[
-        styles.realtimeButton,
-        isRealtimeMode && styles.realtimeButtonActive,
-        (!ws.isConnected && !isRealtimeMode) && styles.buttonDisabled,
+        styles.realtimeButton as any,
+        (isRealtimeMode ? styles.realtimeButtonActive : undefined) as any,
+        (!ws.isConnected && !isRealtimeMode ? styles.buttonDisabled : undefined) as any,
       ]}
     >
       {isRealtimeMode ? (
@@ -620,8 +682,8 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
                 onPress={handlePickImage}
                 disabled={!ws.isConnected}
                 style={[
-                  styles.attachButton,
-                  !ws.isConnected && styles.buttonDisabled,
+                  styles.attachButton as any,
+                  (!ws.isConnected ? styles.buttonDisabled : undefined) as any,
                 ]}
               >
                 <Paperclip size={20} color={theme.colors.foreground} />
@@ -639,7 +701,10 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
                       disabled={!ws.isConnected}
                       accessibilityLabel="Queue message while agent is running"
                       accessibilityRole="button"
-                      style={[styles.queueButton, !ws.isConnected && styles.buttonDisabled]}
+                      style={[
+                        styles.queueButton as any,
+                        (!ws.isConnected ? styles.buttonDisabled : undefined) as any,
+                      ]}
                     >
                       <ArrowUp size={20} color="white" />
                     </Pressable>
@@ -651,8 +716,8 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
                     accessibilityLabel={isCancellingAgent ? "Canceling agent" : "Stop agent"}
                     accessibilityRole="button"
                     style={[
-                      styles.cancelButton,
-                      (!ws.isConnected || isCancellingAgent) && styles.buttonDisabled,
+                      styles.cancelButton as any,
+                      (!ws.isConnected || isCancellingAgent ? styles.buttonDisabled : undefined) as any,
                     ]}
                   >
                     {isCancellingAgent ? (
@@ -666,10 +731,10 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
                 <Pressable
                   onPress={handleSendMessage}
                   disabled={!ws.isConnected || isProcessing}
-                  style={[
-                    styles.sendButton,
-                    (!ws.isConnected || isProcessing) && styles.buttonDisabled,
-                  ]}
+                style={[
+                  styles.sendButton as any,
+                  (!ws.isConnected || isProcessing ? styles.buttonDisabled : undefined) as any,
+                ]}
                 >
                   <ArrowUp size={20} color="white" />
                 </Pressable>
@@ -679,9 +744,9 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
                     onPress={handleVoicePress}
                     disabled={!ws.isConnected || isRealtimeMode}
                     style={[
-                      styles.voiceButton,
-                      (!ws.isConnected || isRealtimeMode) && styles.buttonDisabled,
-                      isRecording && styles.voiceButtonRecording,
+                      styles.voiceButton as any,
+                      (!ws.isConnected || isRealtimeMode ? styles.buttonDisabled : undefined) as any,
+                      (isRecording ? styles.voiceButtonRecording : undefined) as any,
                     ]}
                   >
                     {isRecording ? (
@@ -715,7 +780,7 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
+const styles = StyleSheet.create(((theme: any) => ({
   container: {
     flexDirection: "column",
   },
@@ -900,4 +965,4 @@ const styles = StyleSheet.create((theme) => ({
   queueSendButton: {
     backgroundColor: theme.colors.palette.blue[600],
   },
-}));
+})) as any) as Record<string, any>;
diff --git a/packages/app/src/components/agent-list.tsx b/packages/app/src/components/agent-list.tsx
index 3e5ba5aa4..428330906 100644
--- a/packages/app/src/components/agent-list.tsx
+++ b/packages/app/src/components/agent-list.tsx
@@ -18,9 +18,20 @@ export function AgentList({ agents }: AgentListProps) {
   const [actionAgent, setActionAgent] = useState<Agent | null>(null);
   const isActionSheetVisible = actionAgent !== null;
   
-  // Sort agents by the persisted timestamp of the last user message, falling back to last activity
+  // Sort agents by status so running agents stay at the top, then fall back to the
+  // persisted timestamp of the last user message, and finally their last activity
   const agentArray = useMemo(() => {
     return Array.from(agents.values()).sort((a, b) => {
+      const aIsRunning = a.status === "running";
+      const bIsRunning = b.status === "running";
+
+      if (aIsRunning && !bIsRunning) {
+        return -1;
+      }
+      if (!aIsRunning && bIsRunning) {
+        return 1;
+      }
+
       const sortA = (a.lastUserMessageAt ?? a.lastActivityAt).getTime();
       const sortB = (b.lastUserMessageAt ?? b.lastActivityAt).getTime();
       return sortB - sortA;
diff --git a/packages/app/src/components/agent-stream-view.tsx b/packages/app/src/components/agent-stream-view.tsx
index 41befd361..4d88a58d7 100644
--- a/packages/app/src/components/agent-stream-view.tsx
+++ b/packages/app/src/components/agent-stream-view.tsx
@@ -14,7 +14,6 @@ import {
 import Markdown from "react-native-markdown-display";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
 import Animated, { FadeIn, FadeOut, cancelAnimation, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from "react-native-reanimated";
 import { ChevronDown } from "lucide-react-native";
 import { useRouter } from "expo-router";
@@ -27,10 +26,9 @@ import {
   TodoListCard,
   type InlinePathTarget,
 } from "./message";
-import { ToolCallBottomSheet } from "./tool-call-bottom-sheet";
 import { DiffViewer } from "./diff-viewer";
 import type { StreamItem } from "@/types/stream";
-import type { SelectedToolCall, PendingPermission } from "@/types/shared";
+import type { PendingPermission } from "@/types/shared";
 import type { AgentPermissionResponse } from "@server/server/agent/agent-sdk-types";
 import type { Agent } from "@/contexts/session-context";
 import { useSession } from "@/contexts/session-context";
@@ -57,10 +55,7 @@ export function AgentStreamView({
   onPermissionResponse,
 }: AgentStreamViewProps) {
   const flatListRef = useRef<FlatList<StreamItem>>(null);
-  const bottomSheetRef = useRef<BottomSheetModal | null>(null);
   const insets = useSafeAreaInsets();
-  const [selectedToolCall, setSelectedToolCall] =
-    useState<SelectedToolCall | null>(null);
   const [isNearBottom, setIsNearBottom] = useState(true);
   const hasScrolledInitially = useRef(false);
   const hasAutoScrolledOnce = useRef(false);
@@ -81,18 +76,6 @@ export function AgentStreamView({
     isNearBottomRef.current = true;
   }, [agentId]);
 
-  function handleOpenToolCallDetails(toolCall: SelectedToolCall) {
-    setSelectedToolCall(toolCall);
-    // Delay present to next frame to ensure component is mounted
-    setTimeout(() => {
-      bottomSheetRef.current?.present();
-    }, 0);
-  }
-
-  function handleBottomSheetDismiss() {
-    setSelectedToolCall(null);
-  }
-
   const handleInlinePathPress = useCallback(
     (target: InlinePathTarget) => {
       if (!target.path) {
@@ -244,7 +227,7 @@ export function AgentStreamView({
         break;
 
       case "thought":
-        content = <AgentThoughtMessage message={item.text} />;
+        content = <AgentThoughtMessage message={item.text} status={item.status} />;
         break;
 
       case "tool_call": {
@@ -264,7 +247,6 @@ export function AgentStreamView({
               parsedEditEntries={data.parsedEdits}
               parsedReadEntries={data.parsedReads}
               parsedCommandDetails={data.parsedCommand ?? null}
-              onOpenDetails={() => handleOpenToolCallDetails({ payload })}
             />
           );
         } else {
@@ -275,7 +257,6 @@ export function AgentStreamView({
               args={data.arguments}
               result={data.result}
               status={data.status}
-              onOpenDetails={() => handleOpenToolCallDetails({ payload })}
             />
           );
         }
@@ -423,11 +404,6 @@ export function AgentStreamView({
         </Animated.View>
       )}
 
-      <ToolCallBottomSheet
-        bottomSheetRef={bottomSheetRef}
-        selectedToolCall={selectedToolCall}
-        onDismiss={handleBottomSheetDismiss}
-      />
     </View>
   );
 }
diff --git a/packages/app/src/components/create-agent-modal.tsx b/packages/app/src/components/create-agent-modal.tsx
index 0f7236026..401fd194a 100644
--- a/packages/app/src/components/create-agent-modal.tsx
+++ b/packages/app/src/components/create-agent-modal.tsx
@@ -1,5 +1,12 @@
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import type { ReactElement } from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+  useLayoutEffect,
+} from "react";
+import type { ReactElement, RefObject, ReactNode } from "react";
 import {
   View,
   Text,
@@ -13,7 +20,12 @@ import {
   useWindowDimensions,
   type LayoutChangeEvent,
   type ListRenderItem,
+  Platform,
+  NativeSyntheticEvent,
+  TextInputContentSizeChangeEventData,
+  TextInputKeyPressEventData,
 } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
 import Animated, {
@@ -24,7 +36,7 @@ import Animated, {
   runOnJS,
 } from "react-native-reanimated";
 import { StyleSheet } from "react-native-unistyles";
-import { X } from "lucide-react-native";
+import { X, ChevronDown } from "lucide-react-native";
 import { theme as defaultTheme } from "@/styles/theme";
 import { useRecentPaths } from "@/hooks/use-recent-paths";
 import { useSession } from "@/contexts/session-context";
@@ -40,6 +52,7 @@ import type {
   AgentSessionConfig,
   AgentPersistenceHandle,
   AgentTimelineItem,
+  AgentModelDefinition,
 } from "@server/server/agent/agent-sdk-types";
 import type { WSInboundMessage } from "@server/server/messages";
 
@@ -59,6 +72,42 @@ const DEFAULT_MODE_FOR_DEFAULT_PROVIDER =
   fallbackDefinition?.defaultModeId ?? "";
 const BACKDROP_OPACITY = 0.55;
 const RESUME_PAGE_SIZE = 20;
+const PROMPT_MIN_HEIGHT = 64;
+const PROMPT_MAX_HEIGHT = 200;
+const FORM_PREFERENCES_STORAGE_KEY = "@paseo:create-agent-preferences";
+const IS_WEB = Platform.OS === "web";
+
+type WebTextInputKeyPressEvent = NativeSyntheticEvent<
+  TextInputKeyPressEventData & {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+  }
+>;
+
+type TextAreaHandle = {
+  scrollHeight?: number;
+  style?: {
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    overflowY?: string;
+  } & Record<string, unknown>;
+};
+
+const isTextAreaLike = (node: unknown): node is TextAreaHandle => {
+  if (!node || typeof node !== "object") {
+    return false;
+  }
+  if (!("scrollHeight" in node) || !("style" in node)) {
+    return false;
+  }
+  const style = (node as { style?: unknown }).style;
+  if (!style || typeof style !== "object") {
+    return false;
+  }
+  return true;
+};
 
 type ResumeCandidate = {
   provider: AgentProvider;
@@ -72,6 +121,7 @@ type ResumeCandidate = {
 
 type ResumeTab = "new" | "resume";
 type ProviderFilter = "all" | AgentProvider;
+type DropdownKey = "assistant" | "permissions" | "model" | "workingDir" | "baseBranch";
 
 type RepoInfoState = {
   cwd: string;
@@ -124,19 +174,30 @@ export function CreateAgentModal({
   const backdropOpacity = useSharedValue(0);
   const { height: keyboardHeight } = useReanimatedKeyboardAnimation();
   const isCompactLayout = screenWidth < 720;
+  const shouldHandlePromptDesktopSubmit = IS_WEB;
+  const shouldAutoFocusPrompt = IS_WEB;
 
   const { recentPaths, addRecentPath } = useRecentPaths();
-  const { ws, createAgent, resumeAgent, agents } = useSession();
+  const {
+    ws,
+    createAgent,
+    resumeAgent,
+    agents,
+    providerModels,
+    requestProviderModels,
+  } = useSession();
   const router = useRouter();
 
   const [isMounted, setIsMounted] = useState(isVisible);
   const [workingDir, setWorkingDir] = useState("");
   const [initialPrompt, setInitialPrompt] = useState("");
+  const [promptInputHeight, setPromptInputHeight] = useState(PROMPT_MIN_HEIGHT);
   const [selectedProvider, setSelectedProvider] =
     useState<AgentProvider>(DEFAULT_PROVIDER);
   const [selectedMode, setSelectedMode] = useState(
     DEFAULT_MODE_FOR_DEFAULT_PROVIDER
   );
+  const [selectedModel, setSelectedModel] = useState("");
   const [baseBranch, setBaseBranch] = useState("");
   const [createNewBranch, setCreateNewBranch] = useState(false);
   const [branchName, setBranchName] = useState("");
@@ -155,6 +216,7 @@ export function CreateAgentModal({
   );
   const [isResumeLoading, setIsResumeLoading] = useState(false);
   const [resumeError, setResumeError] = useState<string | null>(null);
+  const [openDropdown, setOpenDropdown] = useState<DropdownKey | null>(null);
   const [repoInfo, setRepoInfo] = useState<RepoInfoState | null>(null);
   const [repoInfoStatus, setRepoInfoStatus] = useState<
     "idle" | "loading" | "ready" | "error"
@@ -162,8 +224,154 @@ export function CreateAgentModal({
   const [repoInfoError, setRepoInfoError] = useState<string | null>(null);
   const pendingRequestIdRef = useRef<string | null>(null);
   const repoInfoRequestIdRef = useRef<string | null>(null);
+  const shouldSyncBaseBranchRef = useRef(true);
+  const promptInputRef = useRef<
+    TextInput | (TextInput & { getNativeRef?: () => unknown }) | null
+  >(null);
+  const promptInputHeightRef = useRef(PROMPT_MIN_HEIGHT);
+  const promptBaselineHeightRef = useRef<number | null>(null);
+  const formPreferencesHydratedRef = useRef(false);
+  const userEditedPreferencesRef = useRef({
+    provider: false,
+    mode: false,
+    model: false,
+    workingDir: false,
+  });
 
   const pendingNavigationAgentIdRef = useRef<string | null>(null);
+  const openDropdownSheet = useCallback((key: DropdownKey) => {
+    setOpenDropdown(key);
+  }, []);
+  const closeDropdown = useCallback(() => {
+    setOpenDropdown(null);
+  }, []);
+
+  const setProviderFromUser = useCallback((provider: AgentProvider) => {
+    userEditedPreferencesRef.current.provider = true;
+    setSelectedProvider(provider);
+    userEditedPreferencesRef.current.model = true;
+    setSelectedModel("");
+  }, []);
+
+  const setModeFromUser = useCallback((modeId: string) => {
+    userEditedPreferencesRef.current.mode = true;
+    setSelectedMode(modeId);
+  }, []);
+
+  const setModelFromUser = useCallback((modelId: string) => {
+    userEditedPreferencesRef.current.model = true;
+    setSelectedModel(modelId);
+  }, []);
+
+  const setWorkingDirFromUser = useCallback((value: string) => {
+    userEditedPreferencesRef.current.workingDir = true;
+    setWorkingDir(value);
+  }, []);
+
+  const handleUserWorkingDirChange = useCallback(
+    (value: string) => {
+      setWorkingDirFromUser(value);
+      setErrorMessage("");
+    },
+    [setWorkingDirFromUser]
+  );
+
+  const refreshProviderModels = useCallback(() => {
+    const trimmed = workingDir.trim();
+    requestProviderModels(selectedProvider, {
+      cwd: trimmed.length > 0 ? trimmed : undefined,
+    });
+  }, [requestProviderModels, selectedProvider, workingDir]);
+
+  const handleBaseBranchChange = useCallback(
+    (value: string) => {
+      shouldSyncBaseBranchRef.current = false;
+      setBaseBranch(value);
+      setErrorMessage("");
+    },
+    [setErrorMessage]
+  );
+
+  useEffect(() => {
+    let isActive = true;
+    const hydratePreferences = async () => {
+      try {
+        const stored = await AsyncStorage.getItem(FORM_PREFERENCES_STORAGE_KEY);
+        if (!stored || !isActive) {
+          return;
+        }
+        const parsed = JSON.parse(stored) as {
+          workingDir?: string;
+          provider?: AgentProvider;
+          mode?: string;
+          model?: string;
+        };
+        if (
+          parsed.provider &&
+          providerDefinitionMap.has(parsed.provider) &&
+          !userEditedPreferencesRef.current.provider
+        ) {
+          setSelectedProvider(parsed.provider);
+        }
+        if (
+          typeof parsed.mode === "string" &&
+          !userEditedPreferencesRef.current.mode
+        ) {
+          setSelectedMode(parsed.mode);
+        }
+        if (
+          typeof parsed.workingDir === "string" &&
+          !userEditedPreferencesRef.current.workingDir
+        ) {
+          setWorkingDir(parsed.workingDir);
+        }
+        if (
+          typeof parsed.model === "string" &&
+          !userEditedPreferencesRef.current.model
+        ) {
+          setSelectedModel(parsed.model);
+        }
+      } catch (error) {
+        console.error(
+          "[CreateAgentModal] Failed to hydrate form preferences:",
+          error
+        );
+      } finally {
+        if (isActive) {
+          formPreferencesHydratedRef.current = true;
+        }
+      }
+    };
+    void hydratePreferences();
+    return () => {
+      isActive = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!formPreferencesHydratedRef.current) {
+      return;
+    }
+    const persist = async () => {
+      try {
+        await AsyncStorage.setItem(
+          FORM_PREFERENCES_STORAGE_KEY,
+          JSON.stringify({
+            workingDir,
+            provider: selectedProvider,
+            mode: selectedMode,
+            model: selectedModel,
+          })
+        );
+      } catch (error) {
+        console.error(
+          "[CreateAgentModal] Failed to persist form preferences:",
+          error
+        );
+      }
+    };
+    void persist();
+  }, [selectedMode, selectedProvider, workingDir]);
 
   const tabOptions = useMemo(
     () => [
@@ -189,6 +397,134 @@ export function CreateAgentModal({
   );
   const agentDefinition = providerDefinitionMap.get(selectedProvider);
   const modeOptions = agentDefinition?.modes ?? [];
+  const modelState = providerModels.get(selectedProvider);
+  const availableModels = modelState?.models ?? [];
+  const isModelLoading = modelState?.isLoading ?? false;
+  const modelError = modelState?.error ?? null;
+
+  useEffect(() => {
+    const trimmed = workingDir.trim();
+    const currentState = providerModels.get(selectedProvider);
+    if (currentState?.models?.length || currentState?.isLoading) {
+      return;
+    }
+    requestProviderModels(selectedProvider, {
+      cwd: trimmed.length > 0 ? trimmed : undefined,
+    });
+  }, [providerModels, requestProviderModels, selectedProvider, workingDir]);
+  const setPromptHeight = useCallback((nextHeight: number) => {
+    const bounded = Math.min(
+      PROMPT_MAX_HEIGHT,
+      Math.max(PROMPT_MIN_HEIGHT, nextHeight)
+    );
+    if (Math.abs(promptInputHeightRef.current - bounded) < 1) {
+      return;
+    }
+    promptInputHeightRef.current = bounded;
+    setPromptInputHeight(bounded);
+  }, []);
+
+  const applyPromptMeasuredHeight = useCallback(
+    (measuredHeight: number) => {
+      if (promptBaselineHeightRef.current === null) {
+        promptBaselineHeightRef.current = measuredHeight;
+      }
+      const baseline = promptBaselineHeightRef.current ?? measuredHeight;
+      const normalized = measuredHeight - baseline + PROMPT_MIN_HEIGHT;
+      const bounded = Math.min(
+        PROMPT_MAX_HEIGHT,
+        Math.max(PROMPT_MIN_HEIGHT, normalized)
+      );
+      setPromptHeight(bounded);
+      return bounded;
+    },
+    [setPromptHeight]
+  );
+
+  const getPromptWebTextArea = useCallback((): TextAreaHandle | null => {
+    if (!IS_WEB) {
+      return null;
+    }
+    const node = promptInputRef.current;
+    if (!node) {
+      return null;
+    }
+    if (isTextAreaLike(node)) {
+      return node;
+    }
+    if (
+      typeof (node as { getNativeRef?: () => unknown }).getNativeRef ===
+      "function"
+    ) {
+      const native = (
+        node as { getNativeRef?: () => unknown }
+      ).getNativeRef?.();
+      if (isTextAreaLike(native)) {
+        return native;
+      }
+    }
+    return null;
+  }, []);
+
+  const measurePromptWebInputHeight = useCallback(() => {
+    if (!IS_WEB) {
+      return false;
+    }
+    const element = getPromptWebTextArea();
+    if (!element?.style || typeof element.scrollHeight !== "number") {
+      return false;
+    }
+    const previousHeight = element.style.height;
+    element.style.height = "auto";
+    const measuredHeight = element.scrollHeight;
+    element.style.height = previousHeight ?? "";
+    const bounded = applyPromptMeasuredHeight(measuredHeight);
+    element.style.height = `${bounded}px`;
+    element.style.minHeight = `${PROMPT_MIN_HEIGHT}px`;
+    element.style.maxHeight = `${PROMPT_MAX_HEIGHT}px`;
+    element.style.overflowY = bounded >= PROMPT_MAX_HEIGHT ? "auto" : "hidden";
+    return true;
+  }, [applyPromptMeasuredHeight, getPromptWebTextArea]);
+
+  const handlePromptContentSizeChange = useCallback(
+    (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      if (IS_WEB && measurePromptWebInputHeight()) {
+        return;
+      }
+      applyPromptMeasuredHeight(event.nativeEvent.contentSize.height);
+    },
+    [applyPromptMeasuredHeight, measurePromptWebInputHeight]
+  );
+
+  const focusPromptInput = useCallback(() => {
+    if (!shouldAutoFocusPrompt) {
+      return;
+    }
+    const node = promptInputRef.current;
+    if (!node) {
+      return;
+    }
+    const target:
+      | (TextInput & { focus?: () => void })
+      | { focus?: () => void }
+      | null =
+      typeof (node as { focus?: () => void }).focus === "function"
+        ? node
+        : typeof (node as { getNativeRef?: () => unknown }).getNativeRef ===
+          "function"
+        ? ((node as { getNativeRef?: () => unknown }).getNativeRef?.() as {
+            focus?: () => void;
+          } | null)
+        : null;
+    if (target && typeof target.focus === "function") {
+      const exec = () => target.focus?.();
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(exec);
+      } else {
+        setTimeout(exec, 0);
+      }
+    }
+  }, [shouldAutoFocusPrompt]);
   const activeSessionIds = useMemo(() => {
     const ids = new Set<string>();
     agents.forEach((agent) => {
@@ -248,11 +584,28 @@ export function CreateAgentModal({
     }
   }, [agentDefinition, selectedMode, modeOptions]);
 
+  useLayoutEffect(() => {
+    if (!IS_WEB) {
+      return;
+    }
+    measurePromptWebInputHeight();
+  }, [initialPrompt, measurePromptWebInputHeight]);
+
+  useEffect(() => {
+    if (!shouldAutoFocusPrompt) {
+      return;
+    }
+    if (!isVisible || activeTab !== "new") {
+      return;
+    }
+    focusPromptInput();
+  }, [activeTab, focusPromptInput, isVisible, shouldAutoFocusPrompt]);
+
   const resetFormState = useCallback(() => {
-    setWorkingDir("");
     setInitialPrompt("");
-    setSelectedProvider(DEFAULT_PROVIDER);
-    setSelectedMode(DEFAULT_MODE_FOR_DEFAULT_PROVIDER);
+    promptBaselineHeightRef.current = null;
+    promptInputHeightRef.current = PROMPT_MIN_HEIGHT;
+    setPromptHeight(PROMPT_MIN_HEIGHT);
     setBaseBranch("");
     setCreateNewBranch(false);
     setBranchName("");
@@ -265,9 +618,11 @@ export function CreateAgentModal({
     setRepoInfo(null);
     setRepoInfoStatus("idle");
     setRepoInfoError(null);
+    setOpenDropdown(null);
     pendingRequestIdRef.current = null;
     repoInfoRequestIdRef.current = null;
-  }, []);
+    shouldSyncBaseBranchRef.current = true;
+  }, [setPromptHeight]);
 
   const navigateToAgentIfNeeded = useCallback(() => {
     const agentId = pendingNavigationAgentIdRef.current;
@@ -456,7 +811,12 @@ export function CreateAgentModal({
     if (!worktreeSlugEdited) {
       setWorktreeSlug(slug);
     }
-  }, [initialPrompt, branchNameEdited, worktreeSlugEdited, slugifyWorktreeName]);
+  }, [
+    initialPrompt,
+    branchNameEdited,
+    worktreeSlugEdited,
+    slugifyWorktreeName,
+  ]);
 
   const requestRepoInfo = useCallback(
     (path: string) => {
@@ -486,6 +846,10 @@ export function CreateAgentModal({
     [ws]
   );
 
+  useEffect(() => {
+    shouldSyncBaseBranchRef.current = true;
+  }, [workingDir]);
+
   useEffect(() => {
     requestRepoInfo(workingDir);
   }, [requestRepoInfo, workingDir]);
@@ -520,7 +884,16 @@ export function CreateAgentModal({
       });
       setRepoInfoStatus("ready");
       setRepoInfoError(null);
-      setBaseBranch((prev) => prev || message.payload.currentBranch || "");
+      setBaseBranch((prev) => {
+        if (
+          shouldSyncBaseBranchRef.current ||
+          prev.trim().length === 0
+        ) {
+          shouldSyncBaseBranchRef.current = false;
+          return message.payload.currentBranch ?? "";
+        }
+        return prev;
+      });
     });
 
     return () => {
@@ -566,28 +939,35 @@ export function CreateAgentModal({
 
     const modeId =
       modeOptions.length > 0 && selectedMode !== "" ? selectedMode : undefined;
+    const trimmedModel = selectedModel.trim();
 
     const config: AgentSessionConfig = {
       provider: selectedProvider,
       cwd: trimmedPath,
       ...(modeId ? { modeId } : {}),
+      ...(trimmedModel ? { model: trimmedModel } : {}),
     };
 
-    const gitOptions =
-      createNewBranch || createWorktree || trimmedBaseBranch
-        ? {
-            ...(trimmedBaseBranch ? { baseBranch: trimmedBaseBranch } : {}),
-            ...(createNewBranch
-              ? { createNewBranch: true, newBranchName: branchName.trim() }
-              : {}),
-            ...(createWorktree
-              ? {
-                  createWorktree: true,
-                  worktreeSlug: (worktreeSlug || branchName).trim(),
-                }
-              : {}),
-          }
-        : undefined;
+    const currentBranch = repoInfo?.currentBranch ?? "";
+    const shouldIncludeBase =
+      createNewBranch ||
+      createWorktree ||
+      (trimmedBaseBranch.length > 0 && trimmedBaseBranch !== currentBranch);
+
+    const gitOptions = shouldIncludeBase
+      ? {
+          ...(trimmedBaseBranch ? { baseBranch: trimmedBaseBranch } : {}),
+          ...(createNewBranch
+            ? { createNewBranch: true, newBranchName: branchName.trim() }
+            : {}),
+          ...(createWorktree
+            ? {
+                createWorktree: true,
+                worktreeSlug: (worktreeSlug || branchName).trim(),
+              }
+            : {}),
+        }
+      : undefined;
 
     try {
       createAgent({
@@ -763,8 +1143,11 @@ export function CreateAgentModal({
 
   const gitBlockingError = useMemo(() => {
     const trimmedBase = baseBranch.trim();
-    const requiresBase =
-      createNewBranch || createWorktree || trimmedBase.length > 0;
+    const currentBranch = repoInfo?.currentBranch ?? "";
+    const isCustomBase =
+      trimmedBase.length > 0 &&
+      (currentBranch.length === 0 || trimmedBase !== currentBranch);
+    const requiresBase = createNewBranch || createWorktree || isCustomBase;
 
     if (requiresBase && !trimmedBase) {
       return "Select a base branch before launching the agent";
@@ -774,7 +1157,9 @@ export function CreateAgentModal({
       const slug = branchName.trim();
       const validation = validateWorktreeName(slug);
       if (!slug || !validation.valid) {
-        return `Invalid branch name: ${validation.error ?? "Must use lowercase letters, numbers, or hyphens"}`;
+        return `Invalid branch name: ${
+          validation.error ?? "Must use lowercase letters, numbers, or hyphens"
+        }`;
       }
     }
 
@@ -782,7 +1167,9 @@ export function CreateAgentModal({
       const slug = (worktreeSlug || branchName).trim();
       const validation = validateWorktreeName(slug);
       if (!slug || !validation.valid) {
-        return `Invalid worktree name: ${validation.error ?? "Must use lowercase letters, numbers, or hyphens"}`;
+        return `Invalid worktree name: ${
+          validation.error ?? "Must use lowercase letters, numbers, or hyphens"
+        }`;
       }
     }
 
@@ -809,7 +1196,30 @@ export function CreateAgentModal({
   const workingDirIsEmpty = !workingDir.trim();
   const promptIsEmpty = !initialPrompt.trim();
   const createDisabled =
-    workingDirIsEmpty || promptIsEmpty || Boolean(gitBlockingError) || isLoading;
+    workingDirIsEmpty ||
+    promptIsEmpty ||
+    Boolean(gitBlockingError) ||
+    isLoading;
+  const handlePromptDesktopSubmitKeyPress = useCallback(
+    (event: WebTextInputKeyPressEvent) => {
+      if (!shouldHandlePromptDesktopSubmit) {
+        return;
+      }
+      if (event.nativeEvent.key !== "Enter") {
+        return;
+      }
+      const { shiftKey, metaKey, ctrlKey } = event.nativeEvent;
+      if (shiftKey || metaKey || ctrlKey) {
+        return;
+      }
+      if (createDisabled) {
+        return;
+      }
+      event.preventDefault();
+      void handleCreate();
+    },
+    [createDisabled, handleCreate, shouldHandlePromptDesktopSubmit]
+  );
   const headerPaddingTop = useMemo(
     () => insets.top + defaultTheme.spacing[4],
     [insets.top]
@@ -915,15 +1325,19 @@ export function CreateAgentModal({
                   keyboardShouldPersistTaps="handled"
                   showsVerticalScrollIndicator={false}
                 >
-                  <WorkingDirectorySection
-                    errorMessage={errorMessage}
+                  <PromptSection
+                    value={initialPrompt}
                     isLoading={isLoading}
-                    recentPaths={recentPaths}
-                    workingDir={workingDir}
-                    onChangeWorkingDir={(value) => {
-                      setWorkingDir(value);
+                    onChange={(text) => {
+                      setInitialPrompt(text);
                       setErrorMessage("");
                     }}
+                    inputRef={promptInputRef}
+                    inputHeight={promptInputHeight}
+                    onContentSizeChange={handlePromptContentSizeChange}
+                    onDesktopSubmit={handlePromptDesktopSubmitKeyPress}
+                    autoFocus={shouldAutoFocusPrompt}
+                    scrollEnabled={promptInputHeight >= PROMPT_MAX_HEIGHT}
                   />
 
                   <View
@@ -932,45 +1346,80 @@ export function CreateAgentModal({
                       isCompactLayout && styles.selectorRowStacked,
                     ]}
                   >
-                    <AssistantSelector
+                    <AssistantDropdown
                       providerDefinitions={providerDefinitions}
                       disabled={isLoading}
-                      isStacked={isCompactLayout}
                       selectedProvider={selectedProvider}
-                      onSelect={setSelectedProvider}
+                      isOpen={openDropdown === "assistant"}
+                      onOpen={() => openDropdownSheet("assistant")}
+                      onClose={closeDropdown}
+                      onSelect={setProviderFromUser}
                     />
-                    <ModeSelector
+                    <PermissionsDropdown
                       disabled={isLoading}
-                      isStacked={isCompactLayout}
                       modeOptions={modeOptions}
                       selectedMode={selectedMode}
-                      onSelect={setSelectedMode}
+                      isOpen={openDropdown === "permissions"}
+                      onOpen={() => openDropdownSheet("permissions")}
+                      onClose={closeDropdown}
+                      onSelect={setModeFromUser}
+                    />
+                    <ModelDropdown
+                      models={availableModels}
+                      selectedModel={selectedModel}
+                      isLoading={isModelLoading}
+                      error={modelError}
+                      isOpen={openDropdown === "model"}
+                      onOpen={() => {
+                        refreshProviderModels();
+                        openDropdownSheet("model");
+                      }}
+                      onClose={closeDropdown}
+                      onSelect={(modelId) => {
+                        setModelFromUser(modelId);
+                        setErrorMessage("");
+                      }}
+                      onClear={() => {
+                        setModelFromUser("");
+                        setErrorMessage("");
+                      }}
+                      onRefresh={refreshProviderModels}
                     />
                   </View>
 
-                  <PromptSection
-                    value={initialPrompt}
-                    isLoading={isLoading}
-                    onChange={(text) => {
-                      setInitialPrompt(text);
-                      setErrorMessage("");
-                    }}
+                  <WorkingDirectoryDropdown
+                    workingDir={workingDir}
+                    errorMessage={errorMessage}
+                    isOpen={openDropdown === "workingDir"}
+                    onOpen={() => openDropdownSheet("workingDir")}
+                    onClose={closeDropdown}
+                    disabled={isLoading}
+                    recentPaths={recentPaths}
+                    onSelectPath={handleUserWorkingDirChange}
                   />
 
                   <GitOptionsSection
                     baseBranch={baseBranch}
-                    onBaseBranchChange={(value) => {
-                      setBaseBranch(value);
-                      setErrorMessage("");
-                    }}
+                    onBaseBranchChange={handleBaseBranchChange}
                     branches={repoInfo?.branches ?? []}
                     status={repoInfoStatus}
                     repoError={repoInfoError}
-                    warning={!createWorktree && repoInfo?.isDirty ? "Working directory has uncommitted changes" : null}
+                    warning={
+                      !createWorktree && repoInfo?.isDirty
+                        ? "Working directory has uncommitted changes"
+                        : null
+                    }
                     createNewBranch={createNewBranch}
                     onToggleCreateNewBranch={(next) => {
                       setCreateNewBranch(next);
-                      if (!next) {
+                      if (next) {
+                        if (!branchNameEdited) {
+                          const slug = slugifyWorktreeName(
+                            initialPrompt || baseBranch || ""
+                          );
+                          setBranchName(slug);
+                        }
+                      } else {
                         setBranchName("");
                         setBranchNameEdited(false);
                       }
@@ -983,7 +1432,14 @@ export function CreateAgentModal({
                     createWorktree={createWorktree}
                     onToggleCreateWorktree={(next) => {
                       setCreateWorktree(next);
-                      if (!next) {
+                      if (next) {
+                        if (!worktreeSlugEdited) {
+                          const slug = slugifyWorktreeName(
+                            initialPrompt || branchName || baseBranch || ""
+                          );
+                          setWorktreeSlug(slug);
+                        }
+                      } else {
                         setWorktreeSlug("");
                         setWorktreeSlugEdited(false);
                       }
@@ -994,6 +1450,9 @@ export function CreateAgentModal({
                       setWorktreeSlugEdited(true);
                     }}
                     gitValidationError={gitBlockingError}
+                    isBaseDropdownOpen={openDropdown === "baseBranch"}
+                    onToggleBaseDropdown={() => openDropdownSheet("baseBranch")}
+                    onCloseDropdown={closeDropdown}
                   />
                 </ScrollView>
 
@@ -1156,180 +1615,451 @@ function ModalHeader({
   );
 }
 
-interface WorkingDirectorySectionProps {
-  workingDir: string;
-  isLoading: boolean;
-  errorMessage: string;
-  recentPaths: string[];
-  onChangeWorkingDir: (value: string) => void;
+interface DropdownFieldProps {
+  label: string;
+  value: string;
+  placeholder: string;
+  onPress: () => void;
+  disabled?: boolean;
+  errorMessage?: string | null;
+  warningMessage?: string | null;
+  helperText?: string | null;
 }
 
-function WorkingDirectorySection({
-  workingDir,
-  isLoading,
+function DropdownField({
+  label,
+  value,
+  placeholder,
+  onPress,
+  disabled,
   errorMessage,
-  recentPaths,
-  onChangeWorkingDir,
-}: WorkingDirectorySectionProps): ReactElement {
+  warningMessage,
+  helperText,
+}: DropdownFieldProps): ReactElement {
   return (
     <View style={styles.formSection}>
-      <Text style={styles.label}>Working Directory</Text>
-      <TextInput
-        style={[styles.input, isLoading && styles.inputDisabled]}
-        placeholder="/path/to/project"
-        placeholderTextColor={defaultTheme.colors.mutedForeground}
-        value={workingDir}
-        onChangeText={onChangeWorkingDir}
-        autoCapitalize="none"
-        autoCorrect={false}
-        editable={!isLoading}
-      />
+      <Text style={styles.label}>{label}</Text>
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        style={[styles.dropdownControl, disabled && styles.dropdownControlDisabled]}
+      >
+        <Text
+          style={value ? styles.dropdownValue : styles.dropdownPlaceholder}
+          numberOfLines={1}
+        >
+          {value || placeholder}
+        </Text>
+        <ChevronDown size={16} color={defaultTheme.colors.mutedForeground} />
+      </Pressable>
       {errorMessage ? (
         <Text style={styles.errorText}>{errorMessage}</Text>
       ) : null}
-      {recentPaths.length > 0 ? (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.recentPathsContainer}
-          keyboardShouldPersistTaps="handled"
-        >
-          {recentPaths.map((path) => (
-            <Pressable
-              key={path}
-              style={styles.recentPathChip}
-              onPress={() => onChangeWorkingDir(path)}
-            >
-              <Text style={styles.recentPathChipText} numberOfLines={1}>
-                {path}
-              </Text>
-            </Pressable>
-          ))}
-        </ScrollView>
+      {warningMessage ? (
+        <Text style={styles.warningText}>{warningMessage}</Text>
+      ) : null}
+      {!errorMessage && helperText ? (
+        <Text style={styles.helperText}>{helperText}</Text>
       ) : null}
     </View>
   );
 }
 
-interface AssistantSelectorProps {
+interface DropdownSheetProps {
+  title: string;
+  visible: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+function DropdownSheet({ title, visible, onClose, children }: DropdownSheetProps): ReactElement {
+  return (
+    <Modal
+      transparent
+      animationType="fade"
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <View style={styles.dropdownSheetOverlay}>
+        <Pressable style={styles.dropdownSheetBackdrop} onPress={onClose} />
+        <View style={styles.dropdownSheetContainer}>
+          <View style={styles.dropdownSheetHandle} />
+          <Text style={styles.dropdownSheetTitle}>{title}</Text>
+          <ScrollView
+            contentContainerStyle={styles.dropdownSheetScrollContent}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+          >
+            {children}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+interface AssistantDropdownProps {
   providerDefinitions: AgentProviderDefinition[];
   selectedProvider: AgentProvider;
   disabled: boolean;
-  isStacked: boolean;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
   onSelect: (provider: AgentProvider) => void;
 }
 
-function AssistantSelector({
+function AssistantDropdown({
   providerDefinitions,
   selectedProvider,
   disabled,
-  isStacked,
+  isOpen,
+  onOpen,
+  onClose,
   onSelect,
-}: AssistantSelectorProps): ReactElement {
+}: AssistantDropdownProps): ReactElement {
+  const selectedDefinition = providerDefinitions.find(
+    (definition) => definition.id === selectedProvider
+  );
   return (
-    <View
-      style={[styles.selectorColumn, isStacked && styles.selectorColumnFull]}
-    >
-      <Text style={styles.label}>Assistant</Text>
-      <View style={styles.optionGroup}>
+    <View style={styles.selectorColumn}>
+      <DropdownField
+        label="Assistant"
+        value={selectedDefinition?.label ?? ""}
+        placeholder="Select assistant"
+        onPress={onOpen}
+        disabled={disabled}
+      />
+      <DropdownSheet title="Choose Assistant" visible={isOpen} onClose={onClose}>
         {providerDefinitions.map((definition) => {
-          const isSelected = selectedProvider === definition.id;
+          const isSelected = definition.id === selectedProvider;
           return (
             <Pressable
               key={definition.id}
-              onPress={() => onSelect(definition.id)}
-              disabled={disabled}
               style={[
-                styles.optionCard,
-                isSelected && styles.optionCardSelected,
-                disabled && styles.optionCardDisabled,
+                styles.dropdownSheetOption,
+                isSelected && styles.dropdownSheetOptionSelected,
               ]}
+              onPress={() => {
+                onSelect(definition.id);
+                onClose();
+              }}
             >
-              <View style={styles.optionContent}>
-                <View
-                  style={[
-                    styles.radioOuter,
-                    isSelected
-                      ? styles.radioOuterSelected
-                      : styles.radioOuterUnselected,
-                  ]}
-                >
-                  {isSelected ? <View style={styles.radioInner} /> : null}
-                </View>
-                <Text style={styles.optionLabel}>{definition.label}</Text>
-              </View>
+              <Text style={styles.dropdownSheetOptionLabel}>{definition.label}</Text>
+              {definition.description ? (
+                <Text style={styles.dropdownSheetOptionDescription}>
+                  {definition.description}
+                </Text>
+              ) : null}
             </Pressable>
           );
         })}
-      </View>
+      </DropdownSheet>
     </View>
   );
 }
 
-interface ModeSelectorProps {
+interface PermissionsDropdownProps {
   modeOptions: AgentMode[];
   selectedMode: string;
   disabled: boolean;
-  isStacked: boolean;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
   onSelect: (modeId: string) => void;
 }
 
-function ModeSelector({
+function PermissionsDropdown({
   modeOptions,
   selectedMode,
   disabled,
-  isStacked,
+  isOpen,
+  onOpen,
+  onClose,
   onSelect,
-}: ModeSelectorProps): ReactElement {
+}: PermissionsDropdownProps): ReactElement {
+  const hasOptions = modeOptions.length > 0;
+  const selectedModeLabel = hasOptions
+    ? modeOptions.find((mode) => mode.id === selectedMode)?.label ??
+      modeOptions[0]?.label ??
+      "Default"
+    : "Automatic";
   return (
-    <View
-      style={[styles.selectorColumn, isStacked && styles.selectorColumnFull]}
-    >
-      <Text style={styles.label}>Permissions</Text>
-      {modeOptions.length === 0 ? (
-        <Text style={styles.helperText}>
-          This assistant does not expose selectable permissions.
-        </Text>
-      ) : (
-        <View style={styles.optionGroup}>
+    <View style={[styles.selectorColumn, styles.selectorColumnFull]}>
+      <DropdownField
+        label="Permissions"
+        value={selectedModeLabel}
+        placeholder={hasOptions ? "Select permissions" : "Automatic"}
+        onPress={hasOptions ? onOpen : () => {}}
+        disabled={disabled || !hasOptions}
+        helperText={
+          hasOptions
+            ? undefined
+            : "This assistant does not expose selectable permissions."
+        }
+      />
+      {hasOptions ? (
+        <DropdownSheet title="Permissions" visible={isOpen} onClose={onClose}>
           {modeOptions.map((mode) => {
-            const isSelected = selectedMode === mode.id;
+            const isSelected = mode.id === selectedMode;
             return (
               <Pressable
                 key={mode.id}
-                onPress={() => onSelect(mode.id)}
-                disabled={disabled}
                 style={[
-                  styles.optionCard,
-                  isSelected && styles.optionCardSelected,
-                  disabled && styles.optionCardDisabled,
+                  styles.dropdownSheetOption,
+                  isSelected && styles.dropdownSheetOptionSelected,
                 ]}
+                onPress={() => {
+                  onSelect(mode.id);
+                  onClose();
+                }}
               >
-                <View style={styles.optionContent}>
-                  <View
-                    style={[
-                      styles.radioOuter,
-                      isSelected
-                        ? styles.radioOuterSelected
-                        : styles.radioOuterUnselected,
-                    ]}
-                  >
-                    {isSelected ? <View style={styles.radioInner} /> : null}
-                  </View>
-                  <View style={styles.modeTextContainer}>
-                    <Text style={styles.optionLabel}>{mode.label}</Text>
-                    {mode.description ? (
-                      <Text style={styles.modeDescription}>
-                        {mode.description}
-                      </Text>
-                    ) : null}
-                  </View>
-                </View>
+                <Text style={styles.dropdownSheetOptionLabel}>{mode.label}</Text>
+                {mode.description ? (
+                  <Text style={styles.dropdownSheetOptionDescription}>
+                    {mode.description}
+                  </Text>
+                ) : null}
               </Pressable>
             );
           })}
-        </View>
-      )}
+        </DropdownSheet>
+      ) : null}
+    </View>
+  );
+}
+
+interface ModelDropdownProps {
+  models: AgentModelDefinition[];
+  selectedModel: string;
+  isLoading: boolean;
+  error: string | null;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  onSelect: (modelId: string) => void;
+  onClear: () => void;
+  onRefresh: () => void;
+}
+
+function ModelDropdown({
+  models,
+  selectedModel,
+  isLoading,
+  error,
+  isOpen,
+  onOpen,
+  onClose,
+  onSelect,
+  onClear,
+  onRefresh,
+}: ModelDropdownProps): ReactElement {
+  const selectedLabel = selectedModel
+    ? models.find((model) => model.id === selectedModel)?.label ?? selectedModel
+    : "Automatic";
+  const placeholder = isLoading && models.length === 0 ? "Loading..." : "Automatic";
+  const helperText = error
+    ? undefined
+    : isLoading
+      ? "Fetching available models..."
+      : models.length === 0
+        ? "This assistant did not expose selectable models."
+        : undefined;
+
+  return (
+    <View style={styles.selectorColumn}>
+      <DropdownField
+        label="Model"
+        value={selectedLabel}
+        placeholder={placeholder}
+        onPress={onOpen}
+        disabled={false}
+        errorMessage={error ?? undefined}
+        helperText={helperText}
+      />
+      <DropdownSheet title="Model" visible={isOpen} onClose={onClose}>
+        <Pressable
+          style={styles.dropdownSheetOption}
+          onPress={() => {
+            onClear();
+            onClose();
+          }}
+        >
+          <Text style={styles.dropdownSheetOptionLabel}>Automatic (provider default)</Text>
+          <Text style={styles.dropdownSheetOptionDescription}>
+            Let the assistant pick the recommended model.
+          </Text>
+        </Pressable>
+        {models.map((model) => {
+          const isSelected = model.id === selectedModel;
+          return (
+            <Pressable
+              key={model.id}
+              style={[
+                styles.dropdownSheetOption,
+                isSelected && styles.dropdownSheetOptionSelected,
+              ]}
+              onPress={() => {
+                onSelect(model.id);
+                onClose();
+              }}
+            >
+              <Text style={styles.dropdownSheetOptionLabel}>{model.label}</Text>
+              {model.description ? (
+                <Text style={styles.dropdownSheetOptionDescription}>
+                  {model.description}
+                </Text>
+              ) : null}
+            </Pressable>
+          );
+        })}
+        <Pressable
+          style={styles.dropdownSheetOption}
+          onPress={() => {
+            onRefresh();
+          }}
+        >
+          <Text style={styles.dropdownSheetOptionLabel}>Refresh models</Text>
+          <Text style={styles.dropdownSheetOptionDescription}>
+            Request the latest catalog from the provider.
+          </Text>
+        </Pressable>
+        {isLoading ? (
+          <View style={styles.dropdownSheetLoading}>
+            <ActivityIndicator size="small" color={defaultTheme.colors.foreground} />
+          </View>
+        ) : null}
+      </DropdownSheet>
+    </View>
+  );
+}
+
+interface WorkingDirectoryDropdownProps {
+  workingDir: string;
+  errorMessage: string;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  disabled: boolean;
+  recentPaths: string[];
+  onSelectPath: (value: string) => void;
+}
+
+function WorkingDirectoryDropdown({
+  workingDir,
+  errorMessage,
+  isOpen,
+  onOpen,
+  onClose,
+  disabled,
+  recentPaths,
+  onSelectPath,
+}: WorkingDirectoryDropdownProps): ReactElement {
+  const inputRef = useRef<TextInput | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    if (isOpen) {
+      setSearchQuery("");
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  const normalizedSearch = searchQuery.trim().toLowerCase();
+  const filteredPaths = useMemo(() => {
+    if (!normalizedSearch) {
+      return recentPaths;
+    }
+    return recentPaths.filter((path) =>
+      path.toLowerCase().includes(normalizedSearch)
+    );
+  }, [recentPaths, normalizedSearch]);
+
+  const hasRecentPaths = recentPaths.length > 0;
+  const hasMatches = filteredPaths.length > 0;
+  const sanitizedSearchValue = searchQuery.trim();
+  const showCustomOption = sanitizedSearchValue.length > 0;
+
+  const handleSelect = useCallback(
+    (path: string) => {
+      onSelectPath(path);
+      onClose();
+    },
+    [onClose, onSelectPath]
+  );
+
+  return (
+    <View style={styles.formSection}>
+      <DropdownField
+        label="Working Directory"
+        value={workingDir}
+        placeholder="/path/to/project"
+        onPress={onOpen}
+        disabled={disabled}
+        errorMessage={errorMessage || undefined}
+        helperText={
+          hasRecentPaths
+            ? "Search saved directories or paste a new path."
+            : "No saved directories yet - search to add one."
+        }
+      />
+      <DropdownSheet title="Working Directory" visible={isOpen} onClose={onClose}>
+        <TextInput
+          ref={inputRef}
+          style={styles.dropdownSearchInput}
+          placeholder="/path/to/project"
+          placeholderTextColor={defaultTheme.colors.mutedForeground}
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+        {!hasRecentPaths && !showCustomOption ? (
+          <Text style={styles.helperText}>
+            We'll remember the directories you use most often.
+          </Text>
+        ) : null}
+        {showCustomOption ? (
+          <View style={styles.dropdownSheetList}>
+            <Pressable
+              key="working-dir-custom-option"
+              style={styles.dropdownSheetOption}
+              onPress={() => handleSelect(sanitizedSearchValue)}
+            >
+              <Text style={styles.dropdownSheetOptionLabel} numberOfLines={1}>
+                {`Use "${sanitizedSearchValue}"`}
+              </Text>
+              <Text style={styles.dropdownSheetOptionDescription}>
+                Launch the agent in this directory
+              </Text>
+            </Pressable>
+          </View>
+        ) : null}
+        {hasMatches ? (
+          <View style={styles.dropdownSheetList}>
+            {filteredPaths.map((path) => {
+              const isActive = path === workingDir;
+              return (
+                <Pressable
+                  key={path}
+                  style={[
+                    styles.dropdownSheetOption,
+                    isActive && styles.dropdownSheetOptionSelected,
+                  ]}
+                  onPress={() => handleSelect(path)}
+                >
+                  <Text style={styles.dropdownSheetOptionLabel} numberOfLines={1}>
+                    {path}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        ) : hasRecentPaths ? (
+          <Text style={styles.helperText}>
+            No recent paths match your search.
+          </Text>
+        ) : null}
+      </DropdownSheet>
     </View>
   );
 }
@@ -1338,14 +2068,44 @@ interface PromptSectionProps {
   value: string;
   isLoading: boolean;
   onChange: (value: string) => void;
+  inputRef: RefObject<
+    TextInput | (TextInput & { getNativeRef?: () => unknown }) | null
+  >;
+  inputHeight: number;
+  onContentSizeChange: (
+    event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>
+  ) => void;
+  onDesktopSubmit?: (event: WebTextInputKeyPressEvent) => void;
+  autoFocus?: boolean;
+  scrollEnabled: boolean;
 }
 
-function PromptSection({ value, isLoading, onChange }: PromptSectionProps): ReactElement {
+function PromptSection({
+  value,
+  isLoading,
+  onChange,
+  inputRef,
+  inputHeight,
+  onContentSizeChange,
+  onDesktopSubmit,
+  autoFocus,
+  scrollEnabled,
+}: PromptSectionProps): ReactElement {
   return (
     <View style={styles.formSection}>
       <Text style={styles.label}>Initial Prompt</Text>
       <TextInput
-        style={[styles.input, styles.promptInput, isLoading && styles.inputDisabled]}
+        ref={inputRef}
+        style={[
+          styles.input,
+          styles.promptInput,
+          isLoading && styles.inputDisabled,
+          {
+            height: inputHeight,
+            minHeight: PROMPT_MIN_HEIGHT,
+            maxHeight: PROMPT_MAX_HEIGHT,
+          },
+        ]}
         placeholder="Describe what you want the agent to do"
         placeholderTextColor={defaultTheme.colors.mutedForeground}
         value={value}
@@ -1353,7 +2113,12 @@ function PromptSection({ value, isLoading, onChange }: PromptSectionProps): Reac
         autoCapitalize="sentences"
         autoCorrect
         multiline
+        scrollEnabled={scrollEnabled}
+        onContentSizeChange={onContentSizeChange}
         editable={!isLoading}
+        autoFocus={autoFocus}
+        blurOnSubmit={false}
+        onKeyPress={onDesktopSubmit}
       />
     </View>
   );
@@ -1375,6 +2140,9 @@ interface GitOptionsSectionProps {
   worktreeSlug: string;
   onWorktreeSlugChange: (value: string) => void;
   gitValidationError: string | null;
+  isBaseDropdownOpen: boolean;
+  onToggleBaseDropdown: () => void;
+  onCloseDropdown: () => void;
 }
 
 function GitOptionsSection({
@@ -1393,65 +2161,109 @@ function GitOptionsSection({
   worktreeSlug,
   onWorktreeSlugChange,
   gitValidationError,
+  isBaseDropdownOpen,
+  onToggleBaseDropdown,
+  onCloseDropdown,
 }: GitOptionsSectionProps): ReactElement {
-  const suggestedBranches = branches.slice(0, 6);
-  const currentBranchLabel = branches.find((branch) => branch.isCurrent)?.name;
+  const [branchSearch, setBranchSearch] = useState("");
+  const branchFilter = branchSearch.trim().toLowerCase();
+  const filteredBranches =
+    branchFilter.length === 0
+      ? branches
+      : branches.filter((branch) =>
+          branch.name.toLowerCase().includes(branchFilter)
+        );
+  const maxVisible = 30;
+  const currentBranchLabel =
+    branches.find((branch) => branch.isCurrent)?.name ?? "";
+  const baseInputRef = useRef<TextInput | null>(null);
+
+  useEffect(() => {
+    if (isBaseDropdownOpen) {
+      setBranchSearch("");
+      baseInputRef.current?.focus();
+    }
+  }, [isBaseDropdownOpen]);
 
   return (
     <View style={styles.formSection}>
       <Text style={styles.label}>Git Setup</Text>
       <Text style={styles.helperText}>
-        Choose a base branch, then optionally create a feature branch or isolated worktree.
+        Choose a base branch, then optionally create a feature branch or
+        isolated worktree.
       </Text>
 
-      <TextInput
-        style={styles.input}
-        placeholder={currentBranchLabel || "main"}
-        placeholderTextColor={defaultTheme.colors.mutedForeground}
+      <DropdownField
+        label="Base Branch"
         value={baseBranch}
-        onChangeText={onBaseBranchChange}
-        autoCapitalize="none"
-        autoCorrect={false}
+        placeholder={currentBranchLabel || "main"}
+        onPress={onToggleBaseDropdown}
+        disabled={status === "loading"}
+        errorMessage={repoError}
+        warningMessage={!gitValidationError ? warning : null}
+        helperText={
+          status === "loading"
+            ? "Inspecting repository…"
+            : "Search existing branches, then tap to select."
+        }
       />
-
-      {status === "loading" ? (
-        <Text style={styles.helperText}>Inspecting repository…</Text>
-      ) : null}
-      {repoError ? <Text style={styles.errorText}>{repoError}</Text> : null}
-      {warning && !gitValidationError ? (
-        <Text style={styles.warningText}>{warning}</Text>
-      ) : null}
-
-      {suggestedBranches.length > 0 ? (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.branchChipRow}
-        >
-          {suggestedBranches.map((branch) => {
-            const isActive = branch.name === baseBranch;
-            return (
-              <Pressable
-                key={branch.name}
-                style={[
-                  styles.branchChip,
-                  isActive && styles.branchChipActive,
-                ]}
-                onPress={() => onBaseBranchChange(branch.name)}
-              >
-                <Text
+      <DropdownSheet
+        title="Base Branch"
+        visible={isBaseDropdownOpen}
+        onClose={onCloseDropdown}
+      >
+        <TextInput
+          ref={baseInputRef}
+          style={styles.dropdownSearchInput}
+          placeholder={currentBranchLabel || "main"}
+          placeholderTextColor={defaultTheme.colors.mutedForeground}
+          value={branchSearch}
+          onChangeText={setBranchSearch}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+        {status === "loading" ? (
+          <View style={styles.dropdownLoading}>
+            <ActivityIndicator color={defaultTheme.colors.mutedForeground} />
+            <Text style={styles.helperText}>Inspecting repository…</Text>
+          </View>
+        ) : filteredBranches.length === 0 ? (
+          <Text style={styles.helperText}>
+            {branchFilter.length === 0
+              ? "No branches detected yet."
+              : "No branches match your search."}
+          </Text>
+        ) : (
+          <View style={styles.dropdownSheetList}>
+            {filteredBranches.slice(0, maxVisible).map((branch) => {
+              const isActive = branch.name === baseBranch;
+              return (
+                <Pressable
+                  key={branch.name}
                   style={[
-                    styles.branchChipText,
-                    isActive && styles.branchChipTextActive,
+                    styles.dropdownSheetOption,
+                    isActive && styles.dropdownSheetOptionSelected,
                   ]}
+                  onPress={() => {
+                    onBaseBranchChange(branch.name);
+                    onCloseDropdown();
+                  }}
                 >
-                  {branch.name}
-                </Text>
-              </Pressable>
-            );
-          })}
-        </ScrollView>
-      ) : null}
+                  <Text style={styles.dropdownSheetOptionLabel}>
+                    {branch.name}
+                    {branch.isCurrent ? "  (current)" : ""}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        )}
+        {filteredBranches.length > maxVisible ? (
+          <Text style={styles.helperText}>
+            Showing first {maxVisible} matches. Keep typing to narrow it down.
+          </Text>
+        ) : null}
+      </DropdownSheet>
 
       <ToggleRow
         label="New Branch"
@@ -1504,7 +2316,13 @@ interface ToggleRowProps {
   disabled?: boolean;
 }
 
-function ToggleRow({ label, description, value, onToggle, disabled }: ToggleRowProps): ReactElement {
+function ToggleRow({
+  label,
+  description,
+  value,
+  onToggle,
+  disabled,
+}: ToggleRowProps): ReactElement {
   return (
     <Pressable
       onPress={() => {
@@ -1525,13 +2343,15 @@ function ToggleRow({ label, description, value, onToggle, disabled }: ToggleRowP
       </View>
       <View style={styles.toggleTextContainer}>
         <Text style={styles.toggleLabel}>{label}</Text>
-        {description ? <Text style={styles.helperText}>{description}</Text> : null}
+        {description ? (
+          <Text style={styles.helperText}>{description}</Text>
+        ) : null}
       </View>
     </Pressable>
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
+const styles = StyleSheet.create(((theme: any) => ({
   overlay: {
     flex: 1,
     justifyContent: "flex-end",
@@ -1636,9 +2456,121 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
     fontSize: theme.fontSize.base,
   },
+  dropdownControl: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+    backgroundColor: theme.colors.background,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.lg,
+    paddingVertical: theme.spacing[3],
+    paddingHorizontal: theme.spacing[4],
+  },
+  dropdownControlDisabled: {
+    opacity: theme.opacity[50],
+  },
+  dropdownValue: {
+    flex: 1,
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+  },
+  dropdownPlaceholder: {
+    flex: 1,
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.base,
+  },
+  dropdownSearchInput: {
+    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+    color: theme.colors.foreground,
+  },
+  dropdownLoading: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  dropdownSheetOverlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  dropdownSheetBackdrop: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: theme.colors.palette.gray[900],
+    opacity: 0.45,
+  },
+  dropdownSheetContainer: {
+    backgroundColor: theme.colors.card,
+    borderTopLeftRadius: theme.borderRadius["2xl"],
+    borderTopRightRadius: theme.borderRadius["2xl"],
+    paddingTop: theme.spacing[4],
+    paddingHorizontal: theme.spacing[5],
+    paddingBottom: theme.spacing[6] + theme.spacing[2],
+    maxHeight: 560,
+    width: "100%",
+  },
+  dropdownSheetHandle: {
+    width: 56,
+    height: 4,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.border,
+    alignSelf: "center",
+    marginBottom: theme.spacing[3],
+  },
+  dropdownSheetTitle: {
+    fontSize: theme.fontSize.lg,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.colors.foreground,
+    textAlign: "center",
+    marginBottom: theme.spacing[4],
+  },
+  dropdownSheetScrollContent: {
+    paddingBottom: theme.spacing[8],
+    paddingHorizontal: theme.spacing[1],
+  },
+  dropdownSheetList: {
+    marginTop: theme.spacing[3],
+  },
+  dropdownSheetOption: {
+    paddingVertical: theme.spacing[3],
+    paddingHorizontal: theme.spacing[4],
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
+    marginBottom: theme.spacing[2],
+  },
+  dropdownSheetOptionSelected: {
+    borderColor: theme.colors.palette.blue[400],
+    backgroundColor: "rgba(59, 130, 246, 0.18)",
+  },
+  dropdownSheetOptionLabel: {
+    color: theme.colors.foreground,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  dropdownSheetOptionDescription: {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.sm,
+    marginTop: theme.spacing[1],
+  },
+  dropdownSheetLoading: {
+    alignItems: "center",
+    paddingVertical: theme.spacing[4],
+  },
   promptInput: {
     minHeight: theme.spacing[24],
     textAlignVertical: "top",
+    outlineWidth: 0,
+    outlineColor: "transparent",
+    outlineStyle: "none",
   },
   inputDisabled: {
     opacity: theme.opacity[50],
@@ -1655,50 +2587,6 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
   },
-  recentPathsContainer: {
-    flexDirection: "row",
-    gap: theme.spacing[2],
-    paddingVertical: theme.spacing[2],
-  },
-  recentPathChip: {
-    backgroundColor: theme.colors.muted,
-    borderRadius: theme.borderRadius.full,
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[2],
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    maxWidth: 200,
-  },
-  recentPathChipText: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.semibold,
-  },
-  branchChipRow: {
-    flexDirection: "row",
-    gap: theme.spacing[2],
-    paddingVertical: theme.spacing[2],
-  },
-  branchChip: {
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.full,
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[1],
-    backgroundColor: theme.colors.muted,
-  },
-  branchChipActive: {
-    borderColor: theme.colors.palette.blue[500],
-    backgroundColor: theme.colors.palette.blue[500],
-  },
-  branchChipText: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-  },
-  branchChipTextActive: {
-    color: theme.colors.palette.white,
-    fontWeight: theme.fontWeight.semibold,
-  },
   selectorRow: {
     flexDirection: "row",
     gap: theme.spacing[4],
@@ -1713,42 +2601,6 @@ const styles = StyleSheet.create((theme) => ({
   selectorColumnFull: {
     width: "100%",
   },
-  optionGroup: {
-    gap: theme.spacing[3],
-  },
-  optionCard: {
-    backgroundColor: theme.colors.background,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[3],
-  },
-  optionCardSelected: {
-    borderColor: theme.colors.palette.blue[500],
-    backgroundColor: theme.colors.muted,
-  },
-  optionCardDisabled: {
-    opacity: theme.opacity[50],
-  },
-  optionContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[3],
-  },
-  optionLabel: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.semibold,
-  },
-  radioOuter: {
-    width: 20,
-    height: 20,
-    borderRadius: theme.borderRadius.full,
-    borderWidth: theme.borderWidth[2],
-    alignItems: "center",
-    justifyContent: "center",
-  },
   toggleRow: {
     flexDirection: "row",
     alignItems: "center",
@@ -1789,26 +2641,6 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.semibold,
   },
-  radioOuterSelected: {
-    borderColor: theme.colors.palette.blue[500],
-  },
-  radioOuterUnselected: {
-    borderColor: theme.colors.border,
-  },
-  radioInner: {
-    width: 12,
-    height: 12,
-    borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.colors.palette.blue[500],
-  },
-  modeTextContainer: {
-    flex: 1,
-    gap: theme.spacing[1],
-  },
-  modeDescription: {
-    color: theme.colors.mutedForeground,
-    fontSize: theme.fontSize.sm,
-  },
   footer: {
     borderTopWidth: theme.borderWidth[1],
     borderTopColor: theme.colors.border,
@@ -1992,4 +2824,4 @@ const styles = StyleSheet.create((theme) => ({
   resumeItemSeparator: {
     height: theme.spacing[2],
   },
-}));
+})) as any) as Record<string, any>;
diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx
index 792e3c6ae..2efc78b84 100644
--- a/packages/app/src/components/message.tsx
+++ b/packages/app/src/components/message.tsx
@@ -1,5 +1,6 @@
-import { View, Text, Pressable, Animated } from "react-native";
+import { View, Text, Pressable, Animated, ScrollView } from "react-native";
 import { useState, useEffect, useRef, memo, useMemo, useCallback } from "react";
+import type { ReactNode, ComponentType } from "react";
 import type { AgentProvider } from "@server/server/agent/agent-sdk-types";
 import { getAgentProviderDefinition } from "@server/server/agent/provider-manifest";
 import Markdown from "react-native-markdown-display";
@@ -18,14 +19,14 @@ import {
   Pencil,
   Eye,
   SquareTerminal,
-  Brain,
   Search,
+  Brain,
 } from "lucide-react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { baseColors, theme } from "@/styles/theme";
 import { Colors } from "@/constants/theme";
 import * as Clipboard from "expo-clipboard";
-import type { TodoEntry } from "@/types/stream";
+import type { TodoEntry, ThoughtStatus } from "@/types/stream";
 import type { CommandDetails, EditEntry, ReadEntry } from "@/utils/tool-call-parsers";
 import { DiffViewer } from "./diff-viewer";
 import { resolveToolCallPreview } from "./tool-call-preview";
@@ -246,6 +247,55 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
   },
 }));
 
+const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
+  container: {
+    marginHorizontal: theme.spacing[2],
+    marginBottom: theme.spacing[2],
+  },
+  pressable: {
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.secondary,
+    paddingHorizontal: theme.spacing[2],
+    paddingVertical: theme.spacing[1],
+  },
+  pressablePressed: {
+    opacity: 0.9,
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconBadge: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: theme.spacing[2],
+    backgroundColor: "transparent",
+  },
+  label: {
+    flex: 1,
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.normal,
+  },
+  chevron: {
+    marginLeft: theme.spacing[1],
+  },
+  detailWrapper: {
+    marginTop: theme.spacing[2],
+    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
+    padding: theme.spacing[2],
+    gap: theme.spacing[2],
+  },
+}));
+
 function isLikelyPathToken(value: string): boolean {
   if (!value || value.length > 300) {
     return false;
@@ -848,74 +898,187 @@ export const TodoListCard = memo(function TodoListCard({
 
 interface AgentThoughtMessageProps {
   message: string;
+  status?: ThoughtStatus;
 }
 
+interface ExpandableBadgeProps {
+  label: string;
+  icon?: ComponentType<{ size?: number; color?: string }>;
+  isExpanded: boolean;
+  onToggle: () => void;
+  renderDetails?: () => ReactNode;
+  isLoading?: boolean;
+  isError?: boolean;
+}
+
+const ExpandableBadge = memo(function ExpandableBadge({
+  label,
+  icon,
+  isExpanded,
+  onToggle,
+  renderDetails,
+  isLoading = false,
+  isError = false,
+}: ExpandableBadgeProps) {
+  const { theme } = useUnistyles();
+  const hasDetails = Boolean(renderDetails);
+  const detailContent = hasDetails && isExpanded ? renderDetails?.() : null;
+
+  const spinAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    let loop: Animated.CompositeAnimation | null = null;
+    if (isLoading) {
+      spinAnim.setValue(0);
+      loop = Animated.loop(
+        Animated.timing(spinAnim, {
+          toValue: 1,
+          duration: 1400,
+          useNativeDriver: true,
+          easing: (t) => t,
+        })
+      );
+      loop.start();
+    } else {
+      spinAnim.stopAnimation();
+    }
+
+    return () => {
+      loop?.stop();
+    };
+  }, [isLoading, spinAnim]);
+
+  const spin = spinAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"],
+  });
+
+  const IconComponent = icon;
+  const iconColor = isError
+    ? theme.colors.destructive
+    : theme.colors.foreground;
+
+  let iconNode: ReactNode = null;
+  if (isLoading) {
+    iconNode = (
+      <Animated.View style={{ transform: [{ rotate: spin }] }}>
+        <Loader2 size={12} color={iconColor} />
+      </Animated.View>
+    );
+  } else if (isError) {
+    iconNode = <X size={12} color={iconColor} />;
+  } else if (IconComponent) {
+    iconNode = <IconComponent size={12} color={iconColor} />;
+  }
+
+  return (
+    <View style={expandableBadgeStylesheet.container}>
+      <Pressable
+        onPress={hasDetails ? onToggle : undefined}
+        disabled={!hasDetails}
+        accessibilityRole={hasDetails ? "button" : undefined}
+        accessibilityState={hasDetails ? { expanded: isExpanded } : undefined}
+        style={({ pressed }) => [
+          expandableBadgeStylesheet.pressable,
+          pressed && hasDetails ? expandableBadgeStylesheet.pressablePressed : null,
+        ]}
+      >
+        <View style={expandableBadgeStylesheet.headerRow}>
+          <View style={expandableBadgeStylesheet.iconBadge}>{iconNode}</View>
+          <Text style={expandableBadgeStylesheet.label} numberOfLines={1}>
+            {label}
+          </Text>
+          {hasDetails ? (
+            <ChevronRight
+              size={14}
+              color={theme.colors.mutedForeground}
+              style={[
+                expandableBadgeStylesheet.chevron,
+                { transform: [{ rotate: isExpanded ? "90deg" : "0deg" }] },
+              ]}
+            />
+          ) : null}
+        </View>
+        {detailContent ? (
+          <View style={expandableBadgeStylesheet.detailWrapper}>{detailContent}</View>
+        ) : null}
+      </Pressable>
+    </View>
+  );
+});
+
 const agentThoughtStylesheet = StyleSheet.create((theme) => ({
-  container: {
-    marginHorizontal: theme.spacing[2],
-    marginBottom: theme.spacing[2],
-  },
-  card: {
-    backgroundColor: theme.colors.card,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    paddingVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[3],
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: theme.spacing[3],
-  },
-  iconContainer: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    paddingTop: theme.spacing[1],
-  },
-  icon: {
-    color: theme.colors.mutedForeground,
-    opacity: 0.8,
-  },
-  textContainer: {
-    flex: 1,
-    paddingVertical: theme.spacing[1],
-  },
-  label: {
+  emptyText: {
     color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.semibold,
-    textTransform: "uppercase",
-    marginBottom: theme.spacing[1],
-  },
-  text: {
-    color: theme.colors.mutedForeground,
-    fontSize: theme.fontSize.base,
-    lineHeight: 20,
+    fontStyle: "italic" as const,
   },
 }));
 
-export function AgentThoughtMessage({ message }: AgentThoughtMessageProps) {
-  const messageText = useMemo(() => {
-    return message
-      .trim()
-      .replace(/^\*\*|\*\*$/g, "")
-      .trim();
-  }, [message]);
+export function AgentThoughtMessage({ message, status = "ready" }: AgentThoughtMessageProps) {
+  const { theme } = useUnistyles();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const markdownContent = useMemo(() => message?.trim() ?? "", [message]);
+  const markdownStyles = useMemo(
+    () => ({
+      body: {
+        color: theme.colors.foreground,
+        fontSize: theme.fontSize.sm,
+        lineHeight: 20,
+      },
+      text: {
+        color: theme.colors.foreground,
+      },
+      paragraph: {
+        marginBottom: theme.spacing[2],
+      },
+      strong: {
+        fontWeight: theme.fontWeight.semibold,
+      },
+      em: {
+        fontStyle: "italic" as const,
+      },
+      code_inline: {
+        backgroundColor: theme.colors.secondary,
+        color: theme.colors.secondaryForeground,
+        paddingHorizontal: theme.spacing[1],
+        paddingVertical: 2,
+        borderRadius: theme.borderRadius.sm,
+        fontFamily: "monospace",
+        fontSize: theme.fontSize.xs,
+      },
+      code_block: {
+        backgroundColor: theme.colors.secondary,
+        color: theme.colors.secondaryForeground,
+        padding: theme.spacing[3],
+        borderRadius: theme.borderRadius.md,
+        fontFamily: "monospace",
+        fontSize: theme.fontSize.sm,
+      },
+    }),
+    [theme]
+  );
+
+  const toggle = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const renderDetails = useCallback(() => {
+    if (!markdownContent) {
+      return <Text style={agentThoughtStylesheet.emptyText}>No captured thinking</Text>;
+    }
+    return <Markdown style={markdownStyles}>{markdownContent}</Markdown>;
+  }, [markdownContent, markdownStyles]);
 
   return (
-    <View style={agentThoughtStylesheet.container}>
-      <View style={agentThoughtStylesheet.card}>
-        <View style={agentThoughtStylesheet.iconContainer}>
-          <Brain size={18} style={agentThoughtStylesheet.icon} />
-        </View>
-        <View style={agentThoughtStylesheet.textContainer}>
-          <Text style={agentThoughtStylesheet.text}>{messageText}</Text>
-        </View>
-      </View>
-    </View>
+    <ExpandableBadge
+      label="Thinking"
+      icon={status === "ready" ? Brain : undefined}
+      isExpanded={isExpanded}
+      onToggle={toggle}
+      renderDetails={renderDetails}
+      isLoading={status !== "ready"}
+    />
   );
 }
 
@@ -929,77 +1092,14 @@ interface ToolCallProps {
   parsedEditEntries?: EditEntry[];
   parsedReadEntries?: ReadEntry[];
   parsedCommandDetails?: CommandDetails | null;
-  onOpenDetails?: () => void;
 }
 
 const toolCallStylesheet = StyleSheet.create((theme) => ({
-  pressable: {
-    marginHorizontal: theme.spacing[2],
-    marginBottom: theme.spacing[2],
-    backgroundColor: theme.colors.secondary,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: theme.borderWidth[1],
-    borderColor: "transparent",
-    overflow: "hidden",
-    shadowColor: theme.colors.palette.black,
-    shadowOpacity: 0.2,
-    shadowOffset: { width: 0, height: 8 },
-    shadowRadius: 16,
-    elevation: 4,
-  },
-  pressableActive: {
-    opacity: 0.8,
-  },
-  executingBorder: {
-    borderColor: theme.colors.primary,
-  },
-  completedBorder: {
-    borderColor: theme.colors.border,
-  },
-  failedBorder: {
-    borderColor: theme.colors.destructive,
-  },
-  content: {
-    padding: theme.spacing[3],
-  },
-  headerRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-  },
-  chevronContainer: {
-    marginRight: theme.spacing[2],
-  },
-  toolName: {
-    color: theme.colors.foreground,
-    fontFamily: "monospace",
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize.sm,
-    flex: 1,
-  },
-  statusBadge: {
-    alignItems: "center",
-    justifyContent: "center",
-    padding: theme.spacing[1],
-    borderRadius: theme.borderRadius.base,
-    width: 28,
-    height: 28,
-  },
-  executingBadgeBg: {
-    backgroundColor: theme.colors.accent,
-  },
-  completedBadgeBg: {
-    backgroundColor: "transparent",
-  },
-  failedBadgeBg: {
-    backgroundColor: "rgba(239, 68, 68, 0.2)",
-  },
-  expandedContent: {
-    marginTop: theme.spacing[3],
-    gap: theme.spacing[2],
+  detailContent: {
+    gap: theme.spacing[3],
   },
   section: {
-    // empty - just for grouping
+    gap: theme.spacing[1],
   },
   sectionTitle: {
     color: theme.colors.mutedForeground,
@@ -1007,26 +1107,78 @@ const toolCallStylesheet = StyleSheet.create((theme) => ({
     fontWeight: theme.fontWeight.semibold,
     textTransform: "uppercase",
     letterSpacing: 0.5,
-    marginBottom: 6,
   },
-  errorSectionTitle: {
-    color: theme.colors.palette.red[300],
-  },
-  sectionContent: {
-    backgroundColor: theme.colors.background,
+  fileBadge: {
+    alignSelf: "flex-start",
+    paddingHorizontal: theme.spacing[2],
+    paddingVertical: theme.spacing[1],
     borderRadius: theme.borderRadius.base,
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.border,
+    backgroundColor: theme.colors.card,
+  },
+  fileBadgeText: {
+    color: theme.colors.foreground,
+    fontFamily: "monospace",
+    fontSize: theme.fontSize.xs,
+  },
+  diffContainer: {
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.base,
+    overflow: "hidden",
+    backgroundColor: theme.colors.card,
+  },
+  scrollArea: {
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.base,
+    maxHeight: 260,
+  },
+  scrollContent: {
     padding: theme.spacing[2],
   },
-  errorSectionContent: {
-    borderColor: theme.colors.palette.red[800],
-  },
-  sectionText: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.xs,
+  scrollText: {
     fontFamily: "monospace",
-    lineHeight: 16,
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foreground,
+    lineHeight: 18,
+  },
+  jsonScroll: {
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.base,
+  },
+  jsonScrollError: {
+    borderColor: theme.colors.destructive,
+  },
+  jsonContent: {
+    padding: theme.spacing[2],
+  },
+  errorText: {
+    color: theme.colors.destructive,
+  },
+  emptyStateText: {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.sm,
+    fontStyle: "italic",
+  },
+  metaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  metaLabel: {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.xs,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  metaValue: {
+    color: theme.colors.foreground,
+    fontFamily: "monospace",
+    fontSize: theme.fontSize.xs,
+    flex: 1,
   },
 }));
 
@@ -1039,24 +1191,18 @@ const toolKindIcons: Record<string, any> = {
   // Add more mappings as needed
 };
 
-function formatPreviewValue(value: unknown, limit = 800): string {
-  if (value === undefined || value === null) {
+function formatFullValue(value: unknown): string {
+  if (value === undefined) {
     return "";
   }
-  let text: string;
   if (typeof value === "string") {
-    text = value.trim();
-  } else {
-    try {
-      text = JSON.stringify(value, null, 2);
-    } catch {
-      text = String(value);
-    }
+    return value;
   }
-  if (text.length <= limit) {
-    return text;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
   }
-  return `${text.slice(0, limit)}…`;
 }
 
 export const ToolCall = memo(function ToolCall({
@@ -1069,7 +1215,6 @@ export const ToolCall = memo(function ToolCall({
   parsedEditEntries,
   parsedReadEntries,
   parsedCommandDetails,
-  onOpenDetails,
 }: ToolCallProps) {
   const { editEntries, readEntries, commandDetails } = useMemo(
     () =>
@@ -1083,227 +1228,216 @@ export const ToolCall = memo(function ToolCall({
     [args, result, parsedEditEntries, parsedReadEntries, parsedCommandDetails]
   );
 
-  const primaryEditEntry = editEntries[0];
-  const primaryReadEntry = readEntries[0];
-  const genericResult =
-    result !== undefined &&
-    !commandDetails?.output &&
-    !primaryReadEntry &&
-    !primaryEditEntry
-      ? formatPreviewValue(result)
-      : null;
-  const formattedError =
-    error !== undefined ? formatPreviewValue(error ?? null, 600) : null;
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const spinAnim = useRef(new Animated.Value(0)).current;
+  const IconComponent = kind
+    ? toolKindIcons[kind.toLowerCase()] || Wrench
+    : Wrench;
 
-  useEffect(() => {
-    if (status === "executing") {
-      // Reset to 0 before starting
-      spinAnim.setValue(0);
-      Animated.loop(
-        Animated.timing(spinAnim, {
-          toValue: 1,
-          duration: 1500,
-          useNativeDriver: true,
-          easing: (t) => t, // Linear easing for smooth continuous rotation
-        })
-      ).start();
-    } else {
-      spinAnim.stopAnimation();
+  const serializedArgs = useMemo(
+    () => (args !== undefined ? formatFullValue(args) : ""),
+    [args]
+  );
+  const serializedResult = useMemo(
+    () => (result !== undefined ? formatFullValue(result) : ""),
+    [result]
+  );
+  const serializedError = useMemo(
+    () => (error !== undefined ? formatFullValue(error) : ""),
+    [error]
+  );
+
+  const handleToggle = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const hasCommandDetails = Boolean(
+    commandDetails &&
+      (commandDetails.command ||
+        commandDetails.cwd ||
+        commandDetails.exitCode !== undefined ||
+        commandDetails.output)
+  );
+
+  function renderJsonSection(
+    label: string,
+    text: string,
+    isError = false
+  ): ReactNode {
+    const displayText = text.length ? text : "(empty)";
+
+    return (
+      <View key={label} style={toolCallStylesheet.section}>
+        <Text style={toolCallStylesheet.sectionTitle}>{label}</Text>
+        <ScrollView
+          horizontal
+          nestedScrollEnabled
+          style={[
+            toolCallStylesheet.jsonScroll,
+            isError ? toolCallStylesheet.jsonScrollError : null,
+          ]}
+          contentContainerStyle={toolCallStylesheet.jsonContent}
+          showsHorizontalScrollIndicator={true}
+        >
+          <Text
+            style={[
+              toolCallStylesheet.scrollText,
+              isError ? toolCallStylesheet.errorText : null,
+            ]}
+          >
+            {displayText}
+          </Text>
+        </ScrollView>
+      </View>
+    );
+  }
+
+  const commandSection = useMemo(() => {
+    if (!hasCommandDetails || !commandDetails) {
+      return null;
     }
-  }, [status, spinAnim]);
+    return (
+      <View style={toolCallStylesheet.section}>
+        <Text style={toolCallStylesheet.sectionTitle}>Command</Text>
+        {commandDetails.command ? (
+          <ScrollView
+            horizontal
+            nestedScrollEnabled
+            style={toolCallStylesheet.jsonScroll}
+            contentContainerStyle={toolCallStylesheet.jsonContent}
+            showsHorizontalScrollIndicator={true}
+          >
+            <Text style={toolCallStylesheet.scrollText}>
+              {commandDetails.command}
+            </Text>
+          </ScrollView>
+        ) : null}
+        {commandDetails.cwd ? (
+          <View style={toolCallStylesheet.metaRow}>
+            <Text style={toolCallStylesheet.metaLabel}>Directory</Text>
+            <Text style={toolCallStylesheet.metaValue}>{commandDetails.cwd}</Text>
+          </View>
+        ) : null}
+        {commandDetails.exitCode !== undefined ? (
+          <View style={toolCallStylesheet.metaRow}>
+            <Text style={toolCallStylesheet.metaLabel}>Exit Code</Text>
+            <Text style={toolCallStylesheet.metaValue}>
+              {commandDetails.exitCode === null
+                ? "Unknown"
+                : commandDetails.exitCode}
+            </Text>
+          </View>
+        ) : null}
+        {commandDetails.output ? (
+          <ScrollView
+            style={toolCallStylesheet.scrollArea}
+            contentContainerStyle={toolCallStylesheet.scrollContent}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator={true}
+          >
+            <Text style={toolCallStylesheet.scrollText}>
+              {commandDetails.output}
+            </Text>
+          </ScrollView>
+        ) : null}
+      </View>
+    );
+  }, [commandDetails, hasCommandDetails]);
 
-  const spin = spinAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"],
-  });
+  const editSections = useMemo(
+    () =>
+      editEntries.map((entry, index) => (
+        <View
+          key={`${entry.filePath ?? "diff"}-${index}`}
+          style={toolCallStylesheet.section}
+        >
+          <Text style={toolCallStylesheet.sectionTitle}>Diff</Text>
+          {entry.filePath ? (
+            <View style={toolCallStylesheet.fileBadge}>
+              <Text style={toolCallStylesheet.fileBadgeText}>{entry.filePath}</Text>
+            </View>
+          ) : null}
+          <View style={toolCallStylesheet.diffContainer}>
+            <DiffViewer diffLines={entry.diffLines} maxHeight={240} />
+          </View>
+        </View>
+      )),
+    [editEntries]
+  );
 
-  const statusConfig = {
-    executing: {
-      border: toolCallStylesheet.executingBorder,
-      badgeBg: toolCallStylesheet.executingBadgeBg,
-      color: "#fff",
-    },
-    completed: {
-      border: toolCallStylesheet.completedBorder,
-      badgeBg: toolCallStylesheet.completedBadgeBg,
-      color: "#71717a",
-    },
-    failed: {
-      border: toolCallStylesheet.failedBorder,
-      badgeBg: toolCallStylesheet.failedBadgeBg,
-      color: "#fca5a5",
-    },
-  };
+  const readSections = useMemo(
+    () =>
+      readEntries.map((entry, index) => (
+        <View
+          key={`${entry.filePath ?? "read"}-${index}`}
+          style={toolCallStylesheet.section}
+        >
+          <Text style={toolCallStylesheet.sectionTitle}>Read Result</Text>
+          {entry.filePath ? (
+            <View style={toolCallStylesheet.fileBadge}>
+              <Text style={toolCallStylesheet.fileBadgeText}>{entry.filePath}</Text>
+            </View>
+          ) : null}
+          <ScrollView
+            style={toolCallStylesheet.scrollArea}
+            contentContainerStyle={toolCallStylesheet.scrollContent}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator={true}
+          >
+            <Text style={toolCallStylesheet.scrollText}>{entry.content}</Text>
+          </ScrollView>
+        </View>
+      )),
+    [readEntries]
+  );
 
-  const config = statusConfig[status];
-
-  // Get the appropriate icon for the tool kind
-  const getToolIcon = () => {
-    if (kind) {
-      const IconComponent = toolKindIcons[kind.toLowerCase()] || Wrench;
-      return IconComponent;
+  const jsonSections = useMemo(() => {
+    const sections: ReactNode[] = [];
+    if (args !== undefined) {
+      sections.push(renderJsonSection("Arguments", serializedArgs));
     }
-    return Wrench; // Default icon
-  };
+    if (result !== undefined) {
+      sections.push(renderJsonSection("Result", serializedResult));
+    }
+    if (error !== undefined) {
+      sections.push(renderJsonSection("Error", serializedError, true));
+    }
+    return sections;
+  }, [args, serializedArgs, result, serializedResult, error, serializedError]);
+
+  const renderDetails = useCallback(() => {
+    if (
+      !commandSection &&
+      editSections.length === 0 &&
+      readSections.length === 0 &&
+      jsonSections.length === 0
+    ) {
+      return (
+        <Text style={toolCallStylesheet.emptyStateText}>
+          No additional details available
+        </Text>
+      );
+    }
+
+    return (
+      <View style={toolCallStylesheet.detailContent}>
+        {commandSection}
+        {editSections}
+        {readSections}
+        {jsonSections}
+      </View>
+    );
+  }, [commandSection, editSections, readSections, jsonSections]);
 
   return (
-    <Pressable
-      onPress={onOpenDetails}
-      style={[
-        toolCallStylesheet.pressable,
-        toolCallStylesheet.pressableActive,
-        config.border,
-      ]}
-    >
-      <View style={toolCallStylesheet.content}>
-        <View style={toolCallStylesheet.headerRow}>
-          <View style={[toolCallStylesheet.statusBadge, config.badgeBg]}>
-            {status === "executing" ? (
-              <Animated.View style={{ transform: [{ rotate: spin }] }}>
-                <Loader2 size={16} color={config.color} />
-              </Animated.View>
-            ) : status === "completed" ? (
-              (() => {
-                const IconComponent = getToolIcon();
-                return <IconComponent size={16} color={config.color} />;
-              })()
-            ) : (
-              <X size={16} color={config.color} />
-            )}
-          </View>
-          <Text
-            style={toolCallStylesheet.toolName}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {toolName}
-          </Text>
-        </View>
-        {(commandDetails ||
-          primaryEditEntry ||
-          primaryReadEntry ||
-          genericResult ||
-          formattedError) && (
-          <View style={toolCallStylesheet.expandedContent}>
-            {commandDetails &&
-              (commandDetails.command ||
-                commandDetails.cwd ||
-                commandDetails.exitCode !== undefined ||
-                commandDetails.output) && (
-                <View style={toolCallStylesheet.section}>
-                  <Text style={toolCallStylesheet.sectionTitle}>Command</Text>
-                  <View style={toolCallStylesheet.sectionContent}>
-                    {commandDetails.command && (
-                      <Text
-                        style={toolCallStylesheet.sectionText}
-                        numberOfLines={2}
-                      >
-                        {commandDetails.command}
-                      </Text>
-                    )}
-                    {commandDetails.cwd && (
-                      <Text
-                        style={toolCallStylesheet.sectionText}
-                        numberOfLines={1}
-                      >
-                        {commandDetails.cwd}
-                      </Text>
-                    )}
-                    {commandDetails.exitCode !== undefined && (
-                      <Text style={toolCallStylesheet.sectionText}>
-                        Exit code:{" "}
-                        {commandDetails.exitCode === null
-                          ? "Unknown"
-                          : commandDetails.exitCode}
-                      </Text>
-                    )}
-                    {commandDetails.output && (
-                      <Text
-                        style={toolCallStylesheet.sectionText}
-                        numberOfLines={6}
-                      >
-                        {formatPreviewValue(commandDetails.output)}
-                      </Text>
-                    )}
-                  </View>
-                </View>
-              )}
-
-            {primaryReadEntry && (
-              <View style={toolCallStylesheet.section}>
-                <Text style={toolCallStylesheet.sectionTitle}>
-                  {primaryReadEntry.filePath
-                    ? `Read: ${primaryReadEntry.filePath}`
-                    : "Read Output"}
-                </Text>
-                <View style={toolCallStylesheet.sectionContent}>
-                  <Text
-                    style={toolCallStylesheet.sectionText}
-                    numberOfLines={6}
-                  >
-                    {formatPreviewValue(primaryReadEntry.content)}
-                  </Text>
-                </View>
-              </View>
-            )}
-
-            {primaryEditEntry && (
-              <View style={toolCallStylesheet.section}>
-                <Text style={toolCallStylesheet.sectionTitle}>
-                  {primaryEditEntry.filePath
-                    ? `Diff: ${primaryEditEntry.filePath}`
-                    : "Diff"}
-                </Text>
-                <View style={toolCallStylesheet.sectionContent}>
-                  <DiffViewer diffLines={primaryEditEntry.diffLines} maxHeight={160} />
-                </View>
-              </View>
-            )}
-
-            {genericResult && (
-              <View style={toolCallStylesheet.section}>
-                <Text style={toolCallStylesheet.sectionTitle}>Result</Text>
-                <View style={toolCallStylesheet.sectionContent}>
-                  <Text style={toolCallStylesheet.sectionText} numberOfLines={6}>
-                    {genericResult}
-                  </Text>
-                </View>
-              </View>
-            )}
-
-            {formattedError && (
-              <View style={toolCallStylesheet.section}>
-                <Text
-                  style={[
-                    toolCallStylesheet.sectionTitle,
-                    toolCallStylesheet.errorSectionTitle,
-                  ]}
-                >
-                  Error
-                </Text>
-                <View
-                  style={[
-                    toolCallStylesheet.sectionContent,
-                    toolCallStylesheet.errorSectionContent,
-                  ]}
-                >
-                  <Text
-                    style={[
-                      toolCallStylesheet.sectionText,
-                      toolCallStylesheet.errorSectionTitle,
-                    ]}
-                    numberOfLines={6}
-                  >
-                    {formattedError}
-                  </Text>
-                </View>
-              </View>
-            )}
-          </View>
-        )}
-      </View>
-    </Pressable>
+    <ExpandableBadge
+      label={toolName}
+      icon={IconComponent}
+      isExpanded={isExpanded}
+      onToggle={handleToggle}
+      renderDetails={renderDetails}
+      isLoading={status === "executing"}
+      isError={status === "failed"}
+    />
   );
 });
diff --git a/packages/app/src/components/orchestrator-messages-view.tsx b/packages/app/src/components/orchestrator-messages-view.tsx
index e8c9a8ba9..d6385525e 100644
--- a/packages/app/src/components/orchestrator-messages-view.tsx
+++ b/packages/app/src/components/orchestrator-messages-view.tsx
@@ -1,16 +1,13 @@
 import { View, ScrollView } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { forwardRef, useRef, useState } from "react";
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
+import { StyleSheet } from "react-native-unistyles";
+import { forwardRef } from "react";
 import {
   UserMessage,
   AssistantMessage,
   ActivityLog,
   ToolCall,
 } from "@/components/message";
-import { ToolCallBottomSheet } from "./tool-call-bottom-sheet";
 import type { MessageEntry } from "@/contexts/session-context";
-import type { SelectedToolCall } from "@/types/shared";
 
 interface OrchestratorMessagesViewProps {
   messages: MessageEntry[];
@@ -20,43 +17,6 @@ interface OrchestratorMessagesViewProps {
 
 export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessagesViewProps>(
   function OrchestratorMessagesView({ messages, currentAssistantMessage, onArtifactClick }, ref) {
-    const { theme } = useUnistyles();
-    const bottomSheetRef = useRef<BottomSheetModal | null>(null);
-    const [selectedToolCall, setSelectedToolCall] = useState<SelectedToolCall | null>(null);
-    const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
-
-    function handleOpenToolCallDetails(toolCall: {
-      toolName: string;
-      status: 'executing' | 'completed' | 'failed';
-      args: any;
-      result?: any;
-      error?: any;
-    }) {
-      // Wrap orchestrator tool call in payload structure
-      setSelectedToolCall({
-        payload: {
-          source: 'orchestrator',
-          data: {
-            toolCallId: `orchestrator_${Date.now()}`, // Generate a simple ID
-            toolName: toolCall.toolName,
-            arguments: toolCall.args,
-            result: toolCall.result,
-            error: toolCall.error,
-            status: toolCall.status,
-          },
-        },
-      });
-      setIsBottomSheetVisible(true);
-      // Delay present to next frame to ensure component is mounted
-      setTimeout(() => {
-        bottomSheetRef.current?.present();
-      }, 0);
-    }
-
-    function handleBottomSheetDismiss() {
-      setIsBottomSheetVisible(false);
-      setSelectedToolCall(null);
-    }
 
     return (
       <>
@@ -125,13 +85,6 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
                 result={msg.result}
                 error={msg.error}
                 status={msg.status}
-                onOpenDetails={() => handleOpenToolCallDetails({
-                  toolName: msg.toolName,
-                  status: msg.status,
-                  args: msg.args,
-                  result: msg.result,
-                  error: msg.error,
-                })}
               />
             );
           }
@@ -149,13 +102,6 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
         )}
       </ScrollView>
 
-      {isBottomSheetVisible && (
-        <ToolCallBottomSheet
-          bottomSheetRef={bottomSheetRef}
-          selectedToolCall={selectedToolCall}
-          onDismiss={handleBottomSheetDismiss}
-        />
-      )}
     </>
     );
   }
diff --git a/packages/app/src/components/tool-call-bottom-sheet.tsx b/packages/app/src/components/tool-call-bottom-sheet.tsx
deleted file mode 100644
index 73c9863f9..000000000
--- a/packages/app/src/components/tool-call-bottom-sheet.tsx
+++ /dev/null
@@ -1,389 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import { View, Text } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ScrollView } from "react-native-gesture-handler";
-import { StyleSheet } from "react-native-unistyles";
-import {
-  BottomSheetModal,
-  BottomSheetScrollView,
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-} from "@gorhom/bottom-sheet";
-import type { SelectedToolCall } from "@/types/shared";
-import {
-  extractCommandDetails,
-  extractEditEntries,
-  extractReadEntries,
-  type CommandDetails,
-  type EditEntry,
-  type ReadEntry,
-} from "@/utils/tool-call-parsers";
-import { DiffViewer } from "./diff-viewer";
-
-interface ToolCallBottomSheetProps {
-  bottomSheetRef: React.RefObject<BottomSheetModal | null>;
-  selectedToolCall: SelectedToolCall | null;
-  onDismiss: () => void;
-}
-
-export function ToolCallBottomSheet({
-  bottomSheetRef,
-  selectedToolCall,
-  onDismiss,
-}: ToolCallBottomSheetProps) {
-  const insets = useSafeAreaInsets();
-  const snapPoints = useMemo(() => ["80%"], []);
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-        opacity={0.5}
-      />
-    ),
-    []
-  );
-
-  // Extract data based on source
-  const { toolName, args, result, error, parsedEdits, parsedReads, parsedCommand } = useMemo(() => {
-    if (!selectedToolCall) {
-      return {
-        toolName: "Tool Call",
-        args: undefined,
-        result: undefined,
-        error: undefined,
-        parsedEdits: undefined,
-        parsedReads: undefined,
-        parsedCommand: undefined,
-      };
-    }
-
-    const { payload } = selectedToolCall;
-
-    if (payload.source === "agent") {
-      const data = payload.data;
-      return {
-        toolName: data.displayName ?? `${data.server}/${data.tool}`,
-        args: data.raw,
-        result: data.result,
-        error: data.error,
-        parsedEdits: data.parsedEdits,
-        parsedReads: data.parsedReads,
-        parsedCommand: data.parsedCommand,
-      };
-    }
-
-    const data = payload.data;
-    return {
-      toolName: data.toolName,
-      args: data.arguments,
-      result: data.result,
-      error: data.error,
-      parsedEdits: undefined,
-      parsedReads: undefined,
-      parsedCommand: undefined,
-    };
-  }, [selectedToolCall]);
-
-  const fallbackEditEntries = useMemo(() => extractEditEntries(args, result), [
-    args,
-    result,
-  ]);
-  const editEntries: EditEntry[] = parsedEdits ?? fallbackEditEntries;
-
-  const fallbackReadEntries = useMemo(() => extractReadEntries(result, args), [
-    args,
-    result,
-  ]);
-  const readEntries: ReadEntry[] = parsedReads ?? fallbackReadEntries;
-
-  const fallbackCommandDetails = useMemo(
-    () => extractCommandDetails(args, result),
-    [args, result]
-  );
-  const commandDetails: CommandDetails | null =
-    parsedCommand ?? fallbackCommandDetails;
-
-  return (
-    <BottomSheetModal
-      ref={bottomSheetRef}
-      snapPoints={snapPoints}
-      backdropComponent={renderBackdrop}
-      enablePanDownToClose={true}
-      handleIndicatorStyle={styles.handleIndicator}
-      backgroundStyle={styles.background}
-      topInset={insets.top}
-      onDismiss={onDismiss}
-    >
-      {/* Header */}
-      <View style={styles.header}>
-        <Text style={styles.toolName}>{toolName || "Tool Call"}</Text>
-      </View>
-
-      {/* Scrollable content */}
-      <BottomSheetScrollView
-        contentContainerStyle={styles.sheetContent}
-        showsVerticalScrollIndicator={true}
-      >
-        {editEntries.length > 0 &&
-          editEntries.map((entry, index) => (
-            <View key={`${entry.filePath ?? "file"}-${index}`} style={styles.section}>
-              <Text style={styles.sectionTitle}>File</Text>
-              <View style={styles.fileInfoContainer}>
-                <Text style={styles.fileInfoText}>
-                  {entry.filePath ?? "Unknown file"}
-                </Text>
-              </View>
-
-              <Text style={styles.sectionTitle}>Diff</Text>
-              <View style={styles.diffContainer}>
-                <DiffViewer diffLines={entry.diffLines} />
-              </View>
-            </View>
-          ))}
-
-        {readEntries.length > 0 &&
-          readEntries.map((entry, index) => (
-            <View key={`${entry.filePath ?? "read"}-${index}`} style={styles.section}>
-              <Text style={styles.sectionTitle}>Read Result</Text>
-              {entry.filePath && (
-                <View style={styles.fileInfoContainer}>
-                  <Text style={styles.fileInfoText}>{entry.filePath}</Text>
-                </View>
-              )}
-              <ScrollView
-                style={styles.contentScroll}
-                contentContainerStyle={styles.contentContainer}
-                nestedScrollEnabled={true}
-                showsVerticalScrollIndicator={true}
-              >
-                <Text style={styles.contentText}>{entry.content}</Text>
-              </ScrollView>
-            </View>
-          ))}
-
-        {commandDetails && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Command Output</Text>
-            {commandDetails.command && (
-              <View style={styles.commandMetaContainer}>
-                <Text style={styles.commandMetaLabel}>Command</Text>
-                <ScrollView horizontal nestedScrollEnabled={true} showsHorizontalScrollIndicator={true}>
-                  <Text style={styles.commandMetaValue}>{commandDetails.command}</Text>
-                </ScrollView>
-              </View>
-            )}
-            {commandDetails.cwd && (
-              <View style={styles.commandMetaContainer}>
-                <Text style={styles.commandMetaLabel}>Directory</Text>
-                <ScrollView horizontal nestedScrollEnabled={true} showsHorizontalScrollIndicator={true}>
-                  <Text style={styles.commandMetaValue}>{commandDetails.cwd}</Text>
-                </ScrollView>
-              </View>
-            )}
-            {commandDetails.exitCode !== undefined && (
-              <View style={styles.commandMetaContainer}>
-                <Text style={styles.commandMetaLabel}>Exit Code</Text>
-                <Text style={styles.commandMetaValue}>
-                  {commandDetails.exitCode === null ? "Unknown" : commandDetails.exitCode}
-                </Text>
-              </View>
-            )}
-            {commandDetails.output && (
-              <View style={styles.commandOutputContainer}>
-                <Text style={styles.commandOutputLabel}>Output</Text>
-                <ScrollView
-                  style={styles.contentScroll}
-                  contentContainerStyle={styles.contentContainer}
-                  nestedScrollEnabled={true}
-                  showsVerticalScrollIndicator={true}
-                >
-                  <Text style={styles.contentText}>{commandDetails.output}</Text>
-                </ScrollView>
-              </View>
-            )}
-          </View>
-        )}
-
-        {/* Content sections */}
-        {args !== undefined && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Arguments</Text>
-            <ScrollView
-              horizontal
-              style={styles.jsonContainer}
-              contentContainerStyle={styles.jsonContent}
-              showsHorizontalScrollIndicator={true}
-              nestedScrollEnabled={true}
-            >
-              <Text style={styles.jsonText}>
-                {JSON.stringify(args, null, 2)}
-              </Text>
-            </ScrollView>
-          </View>
-        )}
-
-        {result !== undefined && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Result</Text>
-            <ScrollView
-              horizontal
-              style={styles.jsonContainer}
-              contentContainerStyle={styles.jsonContent}
-              showsHorizontalScrollIndicator={true}
-              nestedScrollEnabled={true}
-            >
-              <Text style={styles.jsonText}>
-                {typeof result === "string"
-                  ? result
-                  : JSON.stringify(result, null, 2)}
-              </Text>
-            </ScrollView>
-          </View>
-        )}
-
-        {error !== undefined && (
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Error</Text>
-            <ScrollView
-              horizontal
-              style={[styles.jsonContainer, styles.errorContainer]}
-              contentContainerStyle={styles.jsonContent}
-              showsHorizontalScrollIndicator={true}
-              nestedScrollEnabled={true}
-            >
-              <Text style={[styles.jsonText, styles.errorText]}>
-                {JSON.stringify(error, null, 2)}
-              </Text>
-            </ScrollView>
-          </View>
-        )}
-      </BottomSheetScrollView>
-    </BottomSheetModal>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  handleIndicator: {
-    backgroundColor: theme.colors.border,
-  },
-  background: {
-    backgroundColor: theme.colors.popover,
-  },
-  header: {
-    paddingHorizontal: theme.spacing[6],
-    paddingTop: theme.spacing[1],
-    paddingBottom: theme.spacing[4],
-    borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.border,
-    backgroundColor: theme.colors.popover,
-  },
-  toolName: {
-    fontSize: theme.fontSize.xl,
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.colors.popoverForeground,
-  },
-  sheetContent: {
-    paddingTop: theme.spacing[6],
-    paddingBottom: theme.spacing[6],
-  },
-  section: {
-    marginBottom: theme.spacing[6],
-    paddingHorizontal: theme.spacing[6],
-  },
-  sectionTitle: {
-    fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.colors.mutedForeground,
-    marginBottom: theme.spacing[2],
-    textTransform: "uppercase" as const,
-    letterSpacing: 0.5,
-  },
-  fileInfoContainer: {
-    backgroundColor: theme.colors.background,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    padding: theme.spacing[3],
-    marginBottom: theme.spacing[4],
-  },
-  fileInfoText: {
-    fontFamily: "monospace",
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.foreground,
-  },
-  diffContainer: {
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.card,
-    overflow: "hidden",
-  },
-  jsonContainer: {
-    backgroundColor: theme.colors.background,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    // Natural height based on content
-  },
-  jsonContent: {
-    padding: theme.spacing[3],
-  },
-  jsonText: {
-    fontFamily: "monospace",
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.foreground,
-    lineHeight: 20,
-    // Text maintains whitespace and formatting
-  },
-  contentScroll: {
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.background,
-    maxHeight: 280,
-  },
-  contentContainer: {
-    padding: theme.spacing[3],
-  },
-  contentText: {
-    fontFamily: "monospace",
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.foreground,
-    lineHeight: 20,
-  },
-  errorContainer: {
-    borderColor: theme.colors.destructive,
-    backgroundColor: theme.colors.background,
-  },
-  errorText: {
-    color: theme.colors.destructive,
-  },
-  commandMetaContainer: {
-    marginBottom: theme.spacing[2],
-  },
-  commandMetaLabel: {
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.mutedForeground,
-    marginBottom: theme.spacing[1],
-    textTransform: "uppercase" as const,
-    letterSpacing: 0.5,
-  },
-  commandMetaValue: {
-    fontFamily: "monospace",
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.foreground,
-  },
-  commandOutputContainer: {
-    marginTop: theme.spacing[3],
-  },
-  commandOutputLabel: {
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.mutedForeground,
-    marginBottom: theme.spacing[1],
-    textTransform: "uppercase" as const,
-    letterSpacing: 0.5,
-  },
-}));
diff --git a/packages/app/src/contexts/session-context.tsx b/packages/app/src/contexts/session-context.tsx
index 2d967494a..6205c9eb3 100644
--- a/packages/app/src/contexts/session-context.tsx
+++ b/packages/app/src/contexts/session-context.tsx
@@ -21,6 +21,7 @@ import type {
   AgentPermissionRequest,
   AgentMode,
   AgentCapabilityFlags,
+  AgentModelDefinition,
   AgentUsage,
   AgentPersistenceHandle,
 } from "@server/server/agent/agent-sdk-types";
@@ -78,6 +79,13 @@ export type MessageEntry =
       status: "executing" | "completed" | "failed";
     };
 
+type ProviderModelState = {
+  models: AgentModelDefinition[] | null;
+  fetchedAt: Date | null;
+  error: string | null;
+  isLoading: boolean;
+};
+
 export interface Agent {
   id: string;
   provider: AgentProvider;
@@ -245,6 +253,9 @@ interface SessionContextValue {
   requestFilePreview: (agentId: string, path: string) => void;
   navigateExplorerBack: (agentId: string) => string | null;
 
+  providerModels: Map<AgentProvider, ProviderModelState>;
+  requestProviderModels: (provider: AgentProvider, options?: { cwd?: string }) => void;
+
   // Helpers
   restartServer: (reason?: string) => void;
   initializeAgent: (params: { agentId: string; requestId?: string }) => void;
@@ -305,10 +316,12 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
   const [pendingPermissions, setPendingPermissions] = useState<Map<string, PendingPermission>>(new Map());
   const [gitDiffs, setGitDiffs] = useState<Map<string, string>>(new Map());
   const [fileExplorer, setFileExplorer] = useState<Map<string, AgentFileExplorerState>>(new Map());
+  const [providerModels, setProviderModels] = useState<Map<AgentProvider, ProviderModelState>>(new Map());
   const [draftInputs, setDraftInputs] = useState<SessionContextValue["draftInputs"]>(new Map());
   const [queuedMessages, setQueuedMessages] = useState<SessionContextValue["queuedMessages"]>(new Map());
   const activeAudioGroupsRef = useRef<Set<string>>(new Set());
   const previousAgentStatusRef = useRef<Map<string, AgentLifecycleStatus>>(new Map());
+  const providerModelRequestIdsRef = useRef<Map<AgentProvider, string>>(new Map());
 
   // Buffer for streaming audio chunks
   interface AudioChunk {
@@ -879,6 +892,33 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
       });
     });
 
+    const unsubProviderModels = ws.on(
+      "list_provider_models_response",
+      (message) => {
+        if (message.type !== "list_provider_models_response") {
+          return;
+        }
+        const { provider, models, error, fetchedAt, requestId } = message.payload;
+        const latestRequestId = providerModelRequestIdsRef.current.get(provider);
+        if (latestRequestId && requestId && requestId !== latestRequestId) {
+          return;
+        }
+        if (requestId) {
+          providerModelRequestIdsRef.current.delete(provider);
+        }
+        setProviderModels((prev) => {
+          const next = new Map(prev);
+          next.set(provider, {
+            models: models ?? null,
+            error: error ?? null,
+            fetchedAt: new Date(fetchedAt),
+            isLoading: false,
+          });
+          return next;
+        });
+      }
+    );
+
     const unsubAgentDeleted = ws.on("agent_deleted", (message) => {
       if (message.type !== "agent_deleted") {
         return;
@@ -958,6 +998,7 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
       unsubTranscription();
       unsubGitDiff();
       unsubFileExplorer();
+      unsubProviderModels();
       unsubAgentDeleted();
     };
   }, [ws, audioPlayer, setIsPlayingAudio, updateExplorerState]);
@@ -1010,6 +1051,37 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
     ws.send(msg);
   }, [ws]);
 
+  const requestProviderModels = useCallback((provider: AgentProvider, options?: { cwd?: string }) => {
+    const requestId = generateMessageId();
+    providerModelRequestIdsRef.current.set(provider, requestId);
+    setProviderModels((prev) => {
+      const next = new Map(prev);
+      const current =
+        prev.get(provider) ?? {
+          models: null,
+          fetchedAt: null,
+          error: null,
+          isLoading: false,
+        };
+      next.set(provider, {
+        ...current,
+        isLoading: true,
+        error: null,
+      });
+      return next;
+    });
+    const msg: WSInboundMessage = {
+      type: "session",
+      message: {
+        type: "list_provider_models_request",
+        provider,
+        ...(options?.cwd ? { cwd: options.cwd } : {}),
+        requestId,
+      },
+    };
+    ws.send(msg);
+  }, [ws]);
+
   const sendAgentMessage = useCallback(async (agentId: string, message: string, imageUris?: string[]) => {
     // Generate unique message ID for deduplication
     const messageId = generateMessageId();
@@ -1333,6 +1405,8 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
     gitDiffs,
     requestGitDiff,
     fileExplorer,
+    providerModels,
+    requestProviderModels,
     draftInputs,
     setDraftInputs,
     queuedMessages,
diff --git a/packages/app/src/types/shared.ts b/packages/app/src/types/shared.ts
index 1fe9fb352..b385103c3 100644
--- a/packages/app/src/types/shared.ts
+++ b/packages/app/src/types/shared.ts
@@ -1,13 +1,4 @@
 import type { AgentPermissionRequest } from "@server/server/agent/agent-sdk-types";
-import type { ToolCallPayload } from "./stream";
-
-/**
- * Generic tool call selection for bottom sheet
- * Reuses ToolCallPayload so we don't duplicate shapes
- */
-export interface SelectedToolCall {
-  payload: ToolCallPayload;
-}
 
 /**
  * Pending permission structure
diff --git a/packages/app/src/types/stream.ts b/packages/app/src/types/stream.ts
index 3b808c9ec..1363298ed 100644
--- a/packages/app/src/types/stream.ts
+++ b/packages/app/src/types/stream.ts
@@ -83,11 +83,14 @@ export interface AssistantMessageItem {
   timestamp: Date;
 }
 
+export type ThoughtStatus = "loading" | "ready";
+
 export interface ThoughtItem {
   kind: "thought";
   id: string;
   text: string;
   timestamp: Date;
+  status: ThoughtStatus;
 }
 
 export type ToolCallStatus = "executing" | "completed" | "failed";
@@ -418,6 +421,7 @@ function appendThought(state: StreamItem[], text: string, timestamp: Date): Stre
       ...last,
       text: `${last.text}${chunk}`,
       timestamp,
+      status: "loading",
     };
     return [...state.slice(0, -1), updated];
   }
@@ -432,10 +436,24 @@ function appendThought(state: StreamItem[], text: string, timestamp: Date): Stre
     id: createUniqueTimelineId(state, "thought", idSeed, timestamp),
     text: chunk,
     timestamp,
+    status: "loading",
   };
   return [...state, item];
 }
 
+function finalizeActiveThoughts(state: StreamItem[]): StreamItem[] {
+  let mutated = false;
+  const nextState = state.map((entry) => {
+    if (entry.kind === "thought" && entry.status !== "ready") {
+      mutated = true;
+      return { ...entry, status: "ready" as ThoughtStatus };
+    }
+    return entry;
+  });
+
+  return mutated ? nextState : state;
+}
+
 function mergeToolCallRaw(existingRaw: unknown, nextRaw: unknown): unknown {
   if (existingRaw === undefined || existingRaw === null) {
     return nextRaw;
@@ -922,11 +940,14 @@ export function reduceStreamUpdate(
   switch (event.type) {
     case "timeline": {
       const item = event.item;
+      let nextState = state;
       switch (item.type) {
         case "user_message":
-          return appendUserMessage(state, item.text, timestamp, item.messageId);
+          nextState = appendUserMessage(state, item.text, timestamp, item.messageId);
+          break;
         case "assistant_message":
-          return appendAssistantMessage(state, item.text, timestamp);
+          nextState = appendAssistantMessage(state, item.text, timestamp);
+          break;
         case "reasoning":
           return appendThought(state, item.text, timestamp);
         case "tool_call": {
@@ -935,7 +956,7 @@ export function reduceStreamUpdate(
           }
           const rawPayload =
             item.raw ?? { input: item.input, output: item.output, error: item.error };
-          return appendAgentToolCall(
+          nextState = appendAgentToolCall(
             state,
             {
               provider: event.provider,
@@ -951,10 +972,12 @@ export function reduceStreamUpdate(
             },
             timestamp
           );
+          break;
         }
         case "todo": {
           const items = (item.items ?? []) as TodoEntry[];
-          return appendTodoList(state, event.provider, items, timestamp, item.raw);
+          nextState = appendTodoList(state, event.provider, items, timestamp, item.raw);
+          break;
         }
         case "error": {
           const activity: ActivityLogItem = {
@@ -965,19 +988,29 @@ export function reduceStreamUpdate(
             message: formatErrorMessage(item.message ?? "Unknown error"),
             metadata: item.raw ? { raw: item.raw } : undefined,
           };
-          return appendActivityLog(state, activity);
+          nextState = appendActivityLog(state, activity);
+          break;
         }
         default:
           return state;
       }
+
+      return finalizeActiveThoughts(nextState);
     }
     case "provider_event": {
       const converted = convertCodexProviderEvent(event.provider, event.raw);
       if (!converted) {
         return state;
       }
-      return appendAgentToolCall(state, converted, timestamp);
+      return finalizeActiveThoughts(appendAgentToolCall(state, converted, timestamp));
     }
+    case "thread_started":
+    case "turn_started":
+    case "turn_completed":
+    case "turn_failed":
+    case "permission_requested":
+    case "permission_resolved":
+      return finalizeActiveThoughts(state);
     default:
       return state;
   }
@@ -989,7 +1022,9 @@ export function reduceStreamUpdate(
 export function hydrateStreamState(
   events: Array<{ event: AgentStreamEventPayload; timestamp: Date }>
 ): StreamItem[] {
-  return events.reduce<StreamItem[]>((state, { event, timestamp }) => {
+  const hydrated = events.reduce<StreamItem[]>((state, { event, timestamp }) => {
     return reduceStreamUpdate(state, event, timestamp);
   }, []);
+
+  return finalizeActiveThoughts(hydrated);
 }
diff --git a/packages/server/src/server/agent/agent-manager.ts b/packages/server/src/server/agent/agent-manager.ts
index b66d3bc27..2db7ee7e1 100644
--- a/packages/server/src/server/agent/agent-manager.ts
+++ b/packages/server/src/server/agent/agent-manager.ts
@@ -354,6 +354,14 @@ export class AgentManager {
         return;
       }
       finalized = true;
+
+      if (agent.pendingRun !== iterator) {
+        if (error) {
+          agent.lastError = error;
+        }
+        return;
+      }
+
       agent.pendingRun = null;
       agent.status = error ? "error" : "idle";
       agent.lastError = error;
@@ -396,11 +404,30 @@ export class AgentManager {
 
   async cancelAgentRun(agentId: string): Promise<boolean> {
     const agent = this.requireAgent(agentId);
-    if (!agent.pendingRun || typeof agent.pendingRun.return !== "function") {
+    const pendingRun = agent.pendingRun;
+    if (!pendingRun || typeof pendingRun.return !== "function") {
       return false;
     }
+
     try {
-      await agent.pendingRun.return(undefined as unknown as AgentStreamEvent);
+      await agent.session.interrupt();
+    } catch (error) {
+      console.error(
+        `[AgentManager] Failed to interrupt session for agent ${agentId}:`,
+        error
+      );
+    }
+
+    try {
+      const cancellation = pendingRun.return(
+        undefined as unknown as AgentStreamEvent
+      );
+      void cancellation.catch((error) => {
+        console.error(
+          `[AgentManager] Failed to cancel run for agent ${agentId}:`,
+          error
+        );
+      });
       return true;
     } catch (error) {
       console.error(
diff --git a/packages/server/src/server/agent/agent-sdk-types.ts b/packages/server/src/server/agent/agent-sdk-types.ts
index 48ff8c0f8..80959938e 100644
--- a/packages/server/src/server/agent/agent-sdk-types.ts
+++ b/packages/server/src/server/agent/agent-sdk-types.ts
@@ -12,6 +12,15 @@ export type AgentMode = {
   description?: string;
 };
 
+export type AgentModelDefinition = {
+  provider: AgentProvider;
+  id: string;
+  label: string;
+  description?: string;
+  isDefault?: boolean;
+  metadata?: Record<string, unknown>;
+};
+
 export type AgentCapabilityFlags = {
   supportsStreaming: boolean;
   supportsSessionPersistence: boolean;
@@ -159,6 +168,7 @@ export interface AgentSession {
   getPendingPermissions(): AgentPermissionRequest[];
   respondToPermission(requestId: string, response: AgentPermissionResponse): Promise<void>;
   describePersistence(): AgentPersistenceHandle | null;
+  interrupt(): Promise<void>;
   close(): Promise<void>;
 }
 
diff --git a/packages/server/src/server/agent/model-catalog.e2e.test.ts b/packages/server/src/server/agent/model-catalog.e2e.test.ts
new file mode 100644
index 000000000..d0bbe7f92
--- /dev/null
+++ b/packages/server/src/server/agent/model-catalog.e2e.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, test } from "vitest";
+
+import {
+  fetchClaudeModelCatalog,
+  fetchCodexModelCatalog,
+} from "./model-catalog.js";
+
+describe("provider model catalogs", () => {
+  test(
+    "Claude catalog exposes Sonnet and Haiku variants",
+    async () => {
+      const models = await fetchClaudeModelCatalog();
+      expect(models.length).toBeGreaterThan(0);
+
+      const descriptions = models
+        .map((model) => `${model.label} ${model.description ?? ""}`.toLowerCase());
+      expect(descriptions.some((text) => text.includes("sonnet 4.5"))).toBe(true);
+      expect(descriptions.some((text) => text.includes("haiku"))).toBe(true);
+    },
+    180_000
+  );
+
+  test(
+    "Codex catalog exposes gpt-5.1-codex",
+    async () => {
+      const models = await fetchCodexModelCatalog();
+      const ids = models.map((model) => model.id);
+      expect(ids).toContain("gpt-5.1-codex");
+    },
+    180_000
+  );
+});
diff --git a/packages/server/src/server/agent/model-catalog.ts b/packages/server/src/server/agent/model-catalog.ts
new file mode 100644
index 000000000..1772ea938
--- /dev/null
+++ b/packages/server/src/server/agent/model-catalog.ts
@@ -0,0 +1,248 @@
+import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
+import path from "node:path";
+import readline from "node:readline";
+import { fileURLToPath } from "node:url";
+
+import {
+  query,
+  type ModelInfo as ClaudeModelInfo,
+  type Options as ClaudeOptions,
+  type SDKUserMessage,
+} from "@anthropic-ai/claude-agent-sdk";
+
+import type {
+  AgentModelDefinition,
+  AgentProvider,
+} from "./agent-sdk-types.js";
+
+type ProviderModelCatalogOptions = {
+  cwd?: string;
+};
+
+export async function fetchProviderModelCatalog(
+  provider: AgentProvider,
+  options?: ProviderModelCatalogOptions
+): Promise<AgentModelDefinition[]> {
+  if (provider === "claude") {
+    return fetchClaudeModelCatalog(options);
+  }
+  if (provider === "codex") {
+    return fetchCodexModelCatalog();
+  }
+  throw new Error(`Unsupported provider '${provider}'`);
+}
+
+export async function fetchClaudeModelCatalog(
+  options?: ProviderModelCatalogOptions
+): Promise<AgentModelDefinition[]> {
+  const prompt = emptySdkMessageStream();
+  const claudeOptions: ClaudeOptions = {
+    cwd: options?.cwd ?? process.cwd(),
+    permissionMode: "plan",
+    includePartialMessages: false,
+  };
+
+  const claudeQuery = query({ prompt, options: claudeOptions });
+  try {
+    const models: ClaudeModelInfo[] = await claudeQuery.supportedModels();
+    return models.map((model) => ({
+      provider: "claude",
+      id: model.value,
+      label: model.displayName,
+      description: model.description,
+      metadata: {
+        description: model.description,
+      },
+    }));
+  } finally {
+    if (typeof claudeQuery.return === "function") {
+      try {
+        await claudeQuery.return();
+      } catch {
+        // ignore shutdown errors
+      }
+    }
+  }
+}
+
+export async function fetchCodexModelCatalog(): Promise<AgentModelDefinition[]> {
+  const binaryPath = resolveCodexBinary();
+  const child = spawn(binaryPath, ["app-server"], {
+    stdio: ["pipe", "pipe", "pipe"],
+  }) as ChildProcessWithoutNullStreams;
+
+  const client = new CodexAppServerClient(child);
+
+  try {
+    await client.request("initialize", {
+      clientInfo: {
+        name: "voice-dev",
+        title: "Voice Dev",
+        version: "0.0.0",
+      },
+    });
+
+    const response = (await client.request("model/list", {})) as CodexModelListResponse;
+    return response.data.map((model) => ({
+      provider: "codex",
+      id: model.id,
+      label: model.displayName,
+      description: model.description,
+      isDefault: model.isDefault,
+      metadata: {
+        model: model.model,
+        defaultReasoningEffort: model.defaultReasoningEffort,
+        supportedReasoningEfforts: model.supportedReasoningEfforts,
+      },
+    }));
+  } finally {
+    await client.dispose();
+  }
+}
+
+function emptySdkMessageStream(): AsyncIterable<SDKUserMessage> {
+  return (async function* empty() {})();
+}
+
+function resolveCodexBinary(): string {
+  const repoRoot = path.resolve(fileURLToPath(new URL("../../../../..", import.meta.url)));
+  const packageRoot = path.join(repoRoot, "node_modules", "@openai", "codex-sdk");
+  const vendorDir = path.join(packageRoot, "vendor");
+
+  const { platform, arch } = process;
+  const triples: Record<string, string> = {
+    "darwin:x64": "x86_64-apple-darwin",
+    "darwin:arm64": "aarch64-apple-darwin",
+    "linux:x64": "x86_64-unknown-linux-musl",
+    "linux:arm64": "aarch64-unknown-linux-musl",
+    "win32:x64": "x86_64-pc-windows-msvc",
+    "win32:arm64": "aarch64-pc-windows-msvc",
+  };
+  const triple = triples[`${platform}:${arch}`];
+  if (!triple) {
+    throw new Error(`Unsupported Codex platform: ${platform} (${arch})`);
+  }
+  const binary = platform === "win32" ? "codex.exe" : "codex";
+  return path.join(vendorDir, triple, "codex", binary);
+}
+
+type CodexModelListResponse = {
+  data: CodexModelInfo[];
+  nextCursor: string | null;
+};
+
+type CodexModelInfo = {
+  id: string;
+  model: string;
+  displayName: string;
+  description: string;
+  supportedReasoningEfforts: Array<{ reasoningEffort: string; description: string }>;
+  defaultReasoningEffort: string;
+  isDefault: boolean;
+};
+
+type PendingRequest = {
+  resolve: (value: unknown) => void;
+  reject: (error: Error) => void;
+  timer: NodeJS.Timeout;
+};
+
+class CodexAppServerClient {
+  private readonly rl: readline.Interface;
+  private readonly pending = new Map<number, PendingRequest>();
+  private nextId = 1;
+  private stderrBuffer = "";
+  private disposed = false;
+
+  constructor(private readonly child: ChildProcessWithoutNullStreams) {
+    this.rl = readline.createInterface({ input: child.stdout });
+    this.rl.on("line", (line) => this.handleLine(line));
+
+    child.stderr.setEncoding("utf8");
+    child.stderr.on("data", (chunk) => {
+      this.stderrBuffer += chunk;
+    });
+
+    child.on("exit", (code, signal) => {
+      if (this.disposed) {
+        return;
+      }
+      const message = code === 0
+        ? "Codex app-server exited"
+        : `Codex app-server exited with code ${code ?? "null"} and signal ${signal ?? "null"}`;
+      const error = new Error(this.stderrBuffer || message);
+      this.rejectAll(error);
+    });
+  }
+
+  async request(method: string, params: Record<string, unknown>): Promise<unknown> {
+    if (this.disposed) {
+      throw new Error("Codex app-server client is closed");
+    }
+    const id = this.nextId++;
+    const payload = JSON.stringify({ jsonrpc: "2.0", id, method, params }) + "\n";
+    this.child.stdin.write(payload);
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        if (!this.pending.has(id)) {
+          return;
+        }
+        this.pending.delete(id);
+        reject(new Error(`Timeout waiting for '${method}' response`));
+      }, 60_000);
+      this.pending.set(id, { resolve, reject, timer });
+    });
+  }
+
+  async dispose(): Promise<void> {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
+    this.rl.close();
+    if (this.child.stdin && !this.child.killed) {
+      this.child.stdin.end();
+      setTimeout(() => {
+        if (this.child.exitCode === null && !this.child.killed) {
+          this.child.kill("SIGINT");
+        }
+      }, 100);
+    }
+  }
+
+  private handleLine(line: string) {
+    const trimmed = line.trim();
+    if (!trimmed) {
+      return;
+    }
+    let message: any;
+    try {
+      message = JSON.parse(trimmed);
+    } catch {
+      this.stderrBuffer += `\n[stdout] ${trimmed}`;
+      return;
+    }
+
+    if (message.id && this.pending.has(message.id)) {
+      const pending = this.pending.get(message.id)!;
+      this.pending.delete(message.id);
+      clearTimeout(pending.timer);
+      if (message.error) {
+        const error = new Error(message.error.message ?? "Codex RPC error");
+        pending.reject(error);
+      } else {
+        pending.resolve(message.result);
+      }
+      return;
+    }
+    // ignore notifications
+  }
+
+  private rejectAll(error: Error) {
+    for (const [, pending] of this.pending) {
+      clearTimeout(pending.timer);
+      pending.reject(error);
+    }
+    this.pending.clear();
+  }
+}
diff --git a/packages/server/src/server/agent/providers/claude-agent.test.ts b/packages/server/src/server/agent/providers/claude-agent.test.ts
index be0442afd..2a20f6c81 100644
--- a/packages/server/src/server/agent/providers/claude-agent.test.ts
+++ b/packages/server/src/server/agent/providers/claude-agent.test.ts
@@ -28,6 +28,40 @@ async function autoApprove(session: Awaited<ReturnType<ClaudeAgentClient["create
   }
 }
 
+type ToolCallItem = Extract<AgentTimelineItem, { type: "tool_call" }>;
+
+function extractCommandText(input: unknown): string | null {
+  if (!input || typeof input !== "object") {
+    return null;
+  }
+  const command = (input as { command?: unknown }).command;
+  if (typeof command === "string" && command.length > 0) {
+    return command;
+  }
+  if (Array.isArray(command)) {
+    const tokens = command.filter((value): value is string => typeof value === "string");
+    if (tokens.length > 0) {
+      return tokens.join(" ");
+    }
+  }
+  if (typeof (input as { description?: string }).description === "string") {
+    const description = (input as { description?: string }).description as string;
+    if (description.length > 0) {
+      return description;
+    }
+  }
+  return null;
+}
+
+function isSleepCommandToolCall(item: ToolCallItem): boolean {
+  const display = typeof item.displayName === "string" ? item.displayName.toLowerCase() : "";
+  if (display.includes("sleep 60")) {
+    return true;
+  }
+  const inputCommand = extractCommandText(item.input)?.toLowerCase() ?? "";
+  return inputCommand.includes("sleep 60");
+}
+
 describe("ClaudeAgentClient (SDK integration)", () => {
   test(
     "responds with text",
@@ -242,6 +276,68 @@ describe("ClaudeAgentClient (SDK integration)", () => {
     180_000
   );
 
+  test(
+    "interrupts a long-running bash command before it finishes",
+    async () => {
+      const cwd = tmpCwd();
+      const client = new ClaudeAgentClient();
+      const config: AgentSessionConfig = {
+        provider: "claude",
+        cwd,
+        extra: { claude: { maxThinkingTokens: 2048 } },
+      };
+      let session: Awaited<ReturnType<typeof client.createSession>> | null = null;
+      let runStartedAt: number | null = null;
+      let durationMs = 0;
+      let sawSleepCommand = false;
+      let interruptIssued = false;
+
+      try {
+        session = await client.createSession(config);
+        const prompt = [
+          "Use your Bash command tool to run the exact command `sleep 60`.",
+          "Do not run any other commands or respond until that command finishes.",
+        ].join(" ");
+
+        runStartedAt = Date.now();
+        const events = session.stream(prompt);
+
+        for await (const event of events) {
+          await autoApprove(session, event);
+
+          if (event.type === "timeline" && event.item.type === "tool_call" && isSleepCommandToolCall(event.item)) {
+            sawSleepCommand = true;
+            if (!interruptIssued) {
+              interruptIssued = true;
+              await session.interrupt();
+            }
+          }
+
+          if (event.type === "turn_completed" || event.type === "turn_failed") {
+            break;
+          }
+        }
+
+        if (runStartedAt === null) {
+          throw new Error("Claude run never started");
+        }
+        durationMs = Date.now() - runStartedAt;
+      } finally {
+        if (durationMs === 0 && runStartedAt !== null) {
+          durationMs = Date.now() - runStartedAt;
+        }
+        await session?.close();
+        rmSync(cwd, { recursive: true, force: true });
+      }
+
+      expect(sawSleepCommand).toBe(true);
+      expect(interruptIssued).toBe(true);
+      expect(durationMs).toBeGreaterThan(0);
+      expect(durationMs).toBeLessThan(60_000);
+    },
+    120_000
+  );
+
   test(
     "supports multi-turn conversations",
     async () => {
diff --git a/packages/server/src/server/agent/providers/claude-agent.ts b/packages/server/src/server/agent/providers/claude-agent.ts
index f5fe1027e..b5961b8a7 100644
--- a/packages/server/src/server/agent/providers/claude-agent.ts
+++ b/packages/server/src/server/agent/providers/claude-agent.ts
@@ -216,6 +216,7 @@ class ClaudeAgentSession implements AgentSession {
   private turnCancelRequested = false;
   private streamedAssistantTextThisTurn = false;
   private streamedReasoningThisTurn = false;
+  private cancelCurrentTurn: (() => void) | null = null;
 
   constructor(
     config: ClaudeAgentConfig,
@@ -282,6 +283,7 @@ class ClaudeAgentSession implements AgentSession {
       void this.interruptActiveTurn();
       queue.end();
     };
+    this.cancelCurrentTurn = requestCancel;
     if (this.historyPending && this.persistedHistory.length > 0) {
       for (const item of this.persistedHistory) {
         queue.push({ type: "timeline", item, provider: "claude" });
@@ -306,9 +308,16 @@ class ClaudeAgentSession implements AgentSession {
       if (this.eventQueue === queue) {
         this.eventQueue = null;
       }
+      if (this.cancelCurrentTurn === requestCancel) {
+        this.cancelCurrentTurn = null;
+      }
     }
   }
 
+  async interrupt(): Promise<void> {
+    this.cancelCurrentTurn?.();
+  }
+
   async *streamHistory(): AsyncGenerator<AgentStreamEvent> {
     if (!this.historyPending || this.persistedHistory.length === 0) {
       return;
diff --git a/packages/server/src/server/agent/providers/codex-agent.test.ts b/packages/server/src/server/agent/providers/codex-agent.test.ts
index 60650216b..a4d8654a5 100644
--- a/packages/server/src/server/agent/providers/codex-agent.test.ts
+++ b/packages/server/src/server/agent/providers/codex-agent.test.ts
@@ -21,6 +21,7 @@ import type {
   AgentStreamEvent,
   AgentPermissionRequest,
   AgentPersistenceHandle,
+  AgentTimelineItem,
 } from "../agent-sdk-types.js";
 
 function tmpCwd(): string {
@@ -48,6 +49,34 @@ function log(message: string): void {
   console.info(`[CodexAgentTest] ${message}`);
 }
 
+type ToolCallItem = Extract<AgentTimelineItem, { type: "tool_call" }>;
+
+function commandTextFromInput(input: unknown): string | null {
+  if (!input || typeof input !== "object") {
+    return null;
+  }
+  const command = (input as { command?: unknown }).command;
+  if (typeof command === "string" && command.length > 0) {
+    return command;
+  }
+  if (Array.isArray(command)) {
+    const tokens = command.filter((value): value is string => typeof value === "string");
+    if (tokens.length > 0) {
+      return tokens.join(" ");
+    }
+  }
+  return null;
+}
+
+function isSleepCommandToolCall(item: ToolCallItem): boolean {
+  const display = typeof item.displayName === "string" ? item.displayName.toLowerCase() : "";
+  if (display.includes("sleep 60")) {
+    return true;
+  }
+  const inputText = commandTextFromInput(item.input)?.toLowerCase() ?? "";
+  return inputText.includes("sleep 60");
+}
+
 describe("CodexAgentClient (SDK integration)", () => {
   test(
     "responds with text",
@@ -392,6 +421,76 @@ describe("CodexAgentClient (SDK integration)", () => {
     180_000
   );
 
+  test(
+    "interrupts a long-running shell command before it completes",
+    async () => {
+      const cwd = tmpCwd();
+      const restoreSessionDir = useTempCodexSessionDir();
+      const client = new CodexAgentClient();
+      const config: AgentSessionConfig = { provider: "codex", cwd, modeId: "full-access" };
+      let session: Awaited<ReturnType<typeof client.createSession>> | null = null;
+      let runStartedAt: number | null = null;
+      let durationMs = 0;
+      let sawSleepCommand = false;
+      let interruptIssued = false;
+
+      try {
+        session = await client.createSession(config);
+        log("Launching sleep command interrupt test");
+
+        const prompt = [
+          "Run the exact shell command `sleep 60` using your shell tool.",
+          "Do not run any additional commands or send a response until that command finishes.",
+        ].join(" ");
+
+        runStartedAt = Date.now();
+        const stream = session.stream(prompt);
+
+        for await (const event of stream) {
+          if (event.type === "permission_requested" && session) {
+            await session.respondToPermission(event.request.id, { behavior: "allow" });
+          }
+
+          if (
+            event.type === "timeline" &&
+            event.provider === "codex" &&
+            event.item.type === "tool_call" &&
+            event.item.server === "command" &&
+            isSleepCommandToolCall(event.item)
+          ) {
+            sawSleepCommand = true;
+            if (!interruptIssued) {
+              interruptIssued = true;
+              await session.interrupt();
+            }
+          }
+
+          if (event.type === "turn_completed" || event.type === "turn_failed") {
+            break;
+          }
+        }
+
+        if (runStartedAt === null) {
+          throw new Error("Codex run never started");
+        }
+        durationMs = Date.now() - runStartedAt;
+      } finally {
+        if (durationMs === 0 && runStartedAt !== null) {
+          durationMs = Date.now() - runStartedAt;
+        }
+        await session?.close();
+        rmSync(cwd, { recursive: true, force: true });
+        restoreSessionDir();
+      }
+
+      expect(sawSleepCommand).toBe(true);
+      expect(interruptIssued).toBe(true);
+      expect(durationMs).toBeGreaterThan(0);
+      expect(durationMs).toBeLessThan(60_000);
+    },
+    90_000
+  );
+
   // Codex CLI currently doesn't emit approval request events even when approvalPolicy is set to on-request,
   // so we keep this test skipped until upstream support lands.
   test.skip(
diff --git a/packages/server/src/server/agent/providers/codex-agent.ts b/packages/server/src/server/agent/providers/codex-agent.ts
index 15ea0522f..e59ab477b 100644
--- a/packages/server/src/server/agent/providers/codex-agent.ts
+++ b/packages/server/src/server/agent/providers/codex-agent.ts
@@ -271,6 +271,7 @@ class CodexAgentSession implements AgentSession {
   private rolloutPath: string | null;
   private historyEvents: AgentStreamEvent[] = [];
   private pendingPermissions = new Map<string, AgentPermissionRequest>();
+  private cancelCurrentTurn: (() => void) | null = null;
 
   constructor(codex: Codex, config: CodexAgentConfig, handle?: AgentPersistenceHandle) {
     this.codex = codex;
@@ -337,6 +338,29 @@ class CodexAgentSession implements AgentSession {
     const { events } = await thread.runStreamed(input, turnOptions);
 
     let finishedNaturally = false;
+    let cancelIssued = false;
+    const requestCancel = () => {
+      if (cancelIssued) {
+        return;
+      }
+      cancelIssued = true;
+      if (typeof events.return !== "function") {
+        return;
+      }
+      try {
+        const cancellation = events.return({
+          type: "turn.completed",
+        } as ThreadEvent);
+        void cancellation.catch((error) => {
+          console.warn("[CodexAgentSession] Failed to stop Codex stream:", error);
+        });
+      } catch (error) {
+        console.warn("[CodexAgentSession] Failed to stop Codex stream:", error);
+      }
+    };
+
+    this.cancelCurrentTurn = requestCancel;
+
     try {
       for await (const rawEvent of events) {
         yield* this.translateEvent(rawEvent);
@@ -350,16 +374,19 @@ class CodexAgentSession implements AgentSession {
         }
       }
     } finally {
-      if (!finishedNaturally && typeof events.return === "function") {
-        try {
-          await events.return({ type: "turn.completed" } as ThreadEvent);
-        } catch (error) {
-          console.warn("[CodexAgentSession] Failed to stop Codex stream:", error);
-        }
+      if (!finishedNaturally) {
+        requestCancel();
+      }
+      if (this.cancelCurrentTurn === requestCancel) {
+        this.cancelCurrentTurn = null;
       }
     }
   }
 
+  async interrupt(): Promise<void> {
+    this.cancelCurrentTurn?.();
+  }
+
   async *streamHistory(): AsyncGenerator<AgentStreamEvent> {
     const replayEvents = this.drainHistoryEvents();
     for (const event of replayEvents) {
diff --git a/packages/server/src/server/messages.ts b/packages/server/src/server/messages.ts
index 38dc1ddc7..ae5fcc55b 100644
--- a/packages/server/src/server/messages.ts
+++ b/packages/server/src/server/messages.ts
@@ -2,6 +2,7 @@ import { z } from "zod";
 import type { AgentSnapshot } from "./agent/agent-manager.js";
 import type {
   AgentCapabilityFlags,
+  AgentModelDefinition,
   AgentMode,
   AgentPermissionRequest,
   AgentPermissionResponse,
@@ -45,6 +46,15 @@ const AgentModeSchema: z.ZodType<AgentMode> = z.object({
   description: z.string().optional(),
 });
 
+const AgentModelDefinitionSchema: z.ZodType<AgentModelDefinition> = z.object({
+  provider: AgentProviderSchema,
+  id: z.string(),
+  label: z.string(),
+  description: z.string().optional(),
+  isDefault: z.boolean().optional(),
+  metadata: z.record(z.unknown()).optional(),
+});
+
 const AgentCapabilityFlagsSchema: z.ZodType<AgentCapabilityFlags> = z.object({
   supportsStreaming: z.boolean(),
   supportsSessionPersistence: z.boolean(),
@@ -345,6 +355,13 @@ export const CreateAgentRequestMessageSchema = z.object({
   requestId: z.string().optional(),
 });
 
+export const ListProviderModelsRequestMessageSchema = z.object({
+  type: z.literal("list_provider_models_request"),
+  provider: AgentProviderSchema,
+  cwd: z.string().optional(),
+  requestId: z.string().optional(),
+});
+
 export const GitRepoInfoRequestMessageSchema = z.object({
   type: z.literal("git_repo_info_request"),
   cwd: z.string(),
@@ -447,6 +464,7 @@ export const SessionInboundMessageSchema = z.discriminatedUnion("type", [
   SendAgentMessageSchema,
   SendAgentAudioSchema,
   CreateAgentRequestMessageSchema,
+  ListProviderModelsRequestMessageSchema,
   ResumeAgentRequestMessageSchema,
   RefreshAgentRequestMessageSchema,
   CancelAgentRequestMessageSchema,
@@ -701,6 +719,17 @@ export const GitRepoInfoResponseSchema = z.object({
   }),
 });
 
+export const ListProviderModelsResponseMessageSchema = z.object({
+  type: z.literal("list_provider_models_response"),
+  payload: z.object({
+    provider: AgentProviderSchema,
+    models: z.array(AgentModelDefinitionSchema).optional(),
+    error: z.string().optional(),
+    fetchedAt: z.string(),
+    requestId: z.string().optional(),
+  }),
+});
+
 export const SessionOutboundMessageSchema = z.discriminatedUnion("type", [
   ActivityLogMessageSchema,
   AssistantChunkMessageSchema,
@@ -723,6 +752,7 @@ export const SessionOutboundMessageSchema = z.discriminatedUnion("type", [
   GitDiffResponseSchema,
   FileExplorerResponseSchema,
   GitRepoInfoResponseSchema,
+  ListProviderModelsResponseMessageSchema,
 ]);
 
 export type SessionOutboundMessage = z.infer<
@@ -750,6 +780,9 @@ export type AgentPermissionRequestMessage = z.infer<typeof AgentPermissionReques
 export type AgentPermissionResolvedMessage = z.infer<typeof AgentPermissionResolvedMessageSchema>;
 export type AgentDeletedMessage = z.infer<typeof AgentDeletedMessageSchema>;
 export type ListPersistedAgentsResponseMessage = z.infer<typeof ListPersistedAgentsResponseSchema>;
+export type ListProviderModelsResponseMessage = z.infer<
+  typeof ListProviderModelsResponseMessageSchema
+>;
 
 // Type exports for payload types
 export type ActivityLogPayload = z.infer<typeof ActivityLogPayloadSchema>;
@@ -760,6 +793,9 @@ export type RealtimeAudioChunkMessage = z.infer<typeof RealtimeAudioChunkMessage
 export type SendAgentMessage = z.infer<typeof SendAgentMessageSchema>;
 export type SendAgentAudio = z.infer<typeof SendAgentAudioSchema>;
 export type CreateAgentRequestMessage = z.infer<typeof CreateAgentRequestMessageSchema>;
+export type ListProviderModelsRequestMessage = z.infer<
+  typeof ListProviderModelsRequestMessageSchema
+>;
 export type ResumeAgentRequestMessage = z.infer<typeof ResumeAgentRequestMessageSchema>;
 export type DeleteAgentRequestMessage = z.infer<typeof DeleteAgentRequestMessageSchema>;
 export type ListPersistedAgentsRequestMessage = z.infer<typeof ListPersistedAgentsRequestMessageSchema>;
diff --git a/packages/server/src/server/session.ts b/packages/server/src/server/session.ts
index 76fdc9aaf..76b0bb68c 100644
--- a/packages/server/src/server/session.ts
+++ b/packages/server/src/server/session.ts
@@ -37,6 +37,7 @@ import { experimental_createMCPClient } from "ai";
 import { InMemoryTransport } from "@modelcontextprotocol/sdk/inMemory.js";
 import { createTerminalMcpServer } from "./terminal-mcp/index.js";
 import { createAgentMcpServer } from "./agent/mcp-server.js";
+import { fetchProviderModelCatalog } from "./agent/model-catalog.js";
 import { AgentManager } from "./agent/agent-manager.js";
 import type { AgentSnapshot } from "./agent/agent-manager.js";
 import type {
@@ -748,6 +749,10 @@ export class Session {
         case "git_repo_info_request":
           await this.handleGitRepoInfoRequest(msg);
           break;
+
+        case "list_provider_models_request":
+          await this.handleListProviderModelsRequest(msg);
+          break;
       }
     } catch (error: any) {
       console.error(
@@ -1167,24 +1172,27 @@ export class Session {
       await this.forwardAgentState(snapshot);
 
       const trimmedPrompt = initialPrompt?.trim();
-      if (trimmedPrompt && trimmedPrompt.length > 0) {
+      if (trimmedPrompt) {
         try {
-          this.agentManager.recordUserMessage(snapshot.id, trimmedPrompt);
-        } catch (recordError) {
-          console.error(
-            `[Session ${this.clientId}] Failed to record initial prompt for agent ${snapshot.id}:`,
-            recordError
+          await this.handleSendAgentMessage(
+            snapshot.id,
+            trimmedPrompt,
+            uuidv4()
           );
-        }
-
-        try {
-          const normalizedPrompt = this.buildAgentPrompt(trimmedPrompt);
-          this.startAgentStream(snapshot.id, normalizedPrompt);
         } catch (promptError) {
           console.error(
             `[Session ${this.clientId}] Failed to run initial prompt for agent ${snapshot.id}:`,
             promptError
           );
+          this.emit({
+            type: "activity_log",
+            payload: {
+              id: uuidv4(),
+              timestamp: new Date(),
+              type: "error",
+              content: `Initial prompt failed: ${(promptError as Error)?.message ?? promptError}`,
+            },
+          });
         }
       }
 
@@ -1297,6 +1305,7 @@ export class Session {
       let snapshot: AgentSnapshot;
       const existing = this.agentManager.getAgent(agentId);
       if (existing) {
+        await this.interruptAgentIfRunning(agentId);
         snapshot = await this.agentManager.refreshAgentFromPersistence(
           agentId
         );
@@ -1478,6 +1487,40 @@ export class Session {
     }
   }
 
+  private async handleListProviderModelsRequest(
+    msg: Extract<SessionInboundMessage, { type: "list_provider_models_request" }>
+  ): Promise<void> {
+    const fetchedAt = new Date().toISOString();
+    try {
+      const models = await fetchProviderModelCatalog(msg.provider, {
+        cwd: msg.cwd ? expandTilde(msg.cwd) : undefined,
+      });
+      this.emit({
+        type: "list_provider_models_response",
+        payload: {
+          provider: msg.provider,
+          models,
+          fetchedAt,
+          ...(msg.requestId ? { requestId: msg.requestId } : {}),
+        },
+      });
+    } catch (error) {
+      console.error(
+        `[Session ${this.clientId}] Failed to list models for ${msg.provider}:`,
+        error
+      );
+      this.emit({
+        type: "list_provider_models_response",
+        payload: {
+          provider: msg.provider,
+          error: (error as Error)?.message ?? String(error),
+          fetchedAt,
+          ...(msg.requestId ? { requestId: msg.requestId } : {}),
+        },
+      });
+    }
+  }
+
   private normalizeGitOptions(
     gitOptions?: GitSetupOptions,
     legacyWorktreeName?: string
diff --git a/test-codex.txt b/test-codex.txt
new file mode 100644
index 000000000..9766475a4
--- /dev/null
+++ b/test-codex.txt
@@ -0,0 +1 @@
+ok