Update files

packages/app/src/components/agent-status-bar.tsx

@@ -1,6 +1,6 @@
 import { View, Text, Platform, Pressable } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { ChevronDown, SlidersHorizontal } from "lucide-react-native";
+import { Brain, ChevronDown, SlidersHorizontal } from "lucide-react-native";
 import { useSessionStore } from "@/stores/session-store";
 import {
   DropdownMenu,
@@ -83,9 +83,10 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
       {agent.availableModes && agent.availableModes.length > 0 && (
         <DropdownMenu>
           <DropdownMenuTrigger
-            style={({ pressed }) => [
+            style={({ pressed, hovered, open }) => [
               styles.modeBadge,
-              pressed && styles.modeBadgePressed,
+              hovered && styles.modeBadgeHovered,
+              (pressed || open) && styles.modeBadgePressed,
             ]}
             accessibilityRole="button"
             accessibilityLabel="Select agent mode"
@@ -129,9 +130,10 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
         <>
           <DropdownMenu>
             <DropdownMenuTrigger
-              style={({ pressed }) => [
+              style={({ pressed, hovered, open }) => [
                 styles.modeBadge,
-                pressed && styles.modeBadgePressed,
+                hovered && styles.modeBadgeHovered,
+                (pressed || open) && styles.modeBadgePressed,
               ]}
               accessibilityRole="button"
               accessibilityLabel="Select agent model"
@@ -174,14 +176,16 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
           {thinkingOptions && thinkingOptions.length > 1 && (
             <DropdownMenu>
               <DropdownMenuTrigger
-                style={({ pressed }) => [
+                style={({ pressed, hovered, open }) => [
                   styles.modeBadge,
-                  pressed && styles.modeBadgePressed,
+                  hovered && styles.modeBadgeHovered,
+                  (pressed || open) && styles.modeBadgePressed,
                 ]}
                 accessibilityRole="button"
                 accessibilityLabel="Select thinking option"
                 testID="agent-thinking-selector"
               >
+                <Brain size={12} color={theme.colors.foregroundMuted} />
                 <Text style={styles.modeBadgeText}>{displayThinking}</Text>
                 <ChevronDown size={14} color={theme.colors.foregroundMuted} />
               </DropdownMenuTrigger>
@@ -344,6 +348,7 @@ const styles = StyleSheet.create((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[1],
+    marginBottom: -theme.spacing[1],
   },
   modeBadge: {
     flexDirection: "row",
@@ -354,6 +359,9 @@ const styles = StyleSheet.create((theme) => ({
     paddingVertical: theme.spacing[1],
     borderRadius: theme.borderRadius["2xl"],
   },
+  modeBadgeHovered: {
+    backgroundColor: theme.colors.surface1,
+  },
   modeBadgePressed: {
     backgroundColor: theme.colors.surface0,
   },

packages/app/src/components/message-input.tsx

@@ -766,12 +766,12 @@ const styles = StyleSheet.create(((theme: any) => ({
   },
   buttonRow: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-end",
     justifyContent: "space-between",
   },
   leftButtonGroup: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-end",
     gap: theme.spacing[2],
   },
   rightButtonGroup: {

packages/app/src/components/ui/dropdown-menu.tsx

@@ -21,6 +21,7 @@ import {
   StatusBar,
   type PressableProps,
   type ViewStyle,
+  type StyleProp,
 } from "react-native";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -178,11 +179,21 @@ export function DropdownMenu({
   return <DropdownMenuContext.Provider value={value}>{children}</DropdownMenuContext.Provider>;
 }
 
+type TriggerState = { pressed: boolean; hovered: boolean; open: boolean };
+type TriggerStyleProp =
+  | StyleProp<ViewStyle>
+  | ((state: TriggerState) => StyleProp<ViewStyle>);
+
+interface DropdownMenuTriggerProps extends Omit<PressableProps, "style"> {
+  style?: TriggerStyleProp;
+}
+
 export function DropdownMenuTrigger({
   children,
   disabled,
+  style,
   ...props
-}: PropsWithChildren<PressableProps>): ReactElement {
+}: PropsWithChildren<DropdownMenuTriggerProps>): ReactElement {
   const { setOpen, open, triggerRef } = useDropdownMenuContext("DropdownMenuTrigger");
 
   const handlePress = useCallback(() => {
@@ -197,6 +208,12 @@ export function DropdownMenuTrigger({
       collapsable={false}
       disabled={disabled}
       onPress={handlePress}
+      style={({ pressed, hovered }) => {
+        if (typeof style === "function") {
+          return style({ pressed, hovered, open });
+        }
+        return style;
+      }}
     >
       {children}
     </Pressable>

packages/server/src/server/agent/provider-manifest.ts

@@ -27,7 +27,7 @@ const CLAUDE_MODES: AgentMode[] = [
   },
   {
     id: "bypassPermissions",
-    label: "Bypass Permissions",
+    label: "Bypass",
     description: "Skip all permission prompts (use with caution)",
   },
 ];

packages/server/src/server/agent/providers/claude-agent.ts

@@ -90,7 +90,7 @@ const DEFAULT_MODES: AgentMode[] = [
   },
   {
     id: "bypassPermissions",
-    label: "Bypass Permissions",
+    label: "Bypass",
     description: "Skip all permission prompts (use with caution)",
   },
 ];
@@ -364,8 +364,8 @@ export class ClaudeAgentClient implements AgentClient {
         label: model.displayName,
         description: model.description,
         thinkingOptions: [
-          { id: "off", label: "Thinking Off", isDefault: true },
+          { id: "off", label: "Off", isDefault: true },
-          { id: "on", label: "Thinking On" },
+          { id: "on", label: "On" },
         ],
         defaultThinkingOptionId: "off",
         metadata: {