feat(mobile): align task detail with desktop

Generated-By: PostHog Code
Task-Id: 11daf8d3-7830-436a-ab8f-99123586070d

Author: richardsolomou

apps/mobile/src/app/task/[id].tsx

@@ -849,6 +849,7 @@ export default function TaskDetailScreen() {
             />
           ) : null}
           <TaskChatComposer
+            key={taskId}
             adapter={composerAdapter}
             canChangeAdapter={!!session?.terminalStatus}
             onSend={handleSendPrompt}

apps/mobile/src/features/tasks/components/FloatingTaskHeader.tsx

@@ -1,11 +1,10 @@
 import { Text } from "@components/text";
-import { LinearGradient } from "expo-linear-gradient";
 import { useRouter } from "expo-router";
 import { CaretLeft } from "phosphor-react-native";
 import type { ReactNode } from "react";
 import { Platform, Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toRgba, useThemeColors } from "@/lib/theme";
+import { useThemeColors } from "@/lib/theme";
 
 interface FloatingTaskHeaderProps {
   title: string;
@@ -14,12 +13,7 @@ interface FloatingTaskHeaderProps {
   rightSlot?: ReactNode;
 }
 
-/**
- * Floating header for the task detail screen — back arrow on the left,
- * centered title + repo subtitle, optional right slot for actions. Sits over
- * the content with a top-to-bottom fade so the scroll list disappears
- * gracefully behind it rather than getting clipped by a hard edge.
- */
+/** Task detail toolbar with navigation, task identity, and run actions. */
 export function FloatingTaskHeader({
   title,
   subtitle,
@@ -38,30 +32,14 @@ export function FloatingTaskHeader({
   // on iOS and fall back to the real inset on Android.
   const topInset = Platform.OS === "ios" ? 6 : insets.top;
 
-  // Fade height extends well past the title row so content scrolling up
-  // behind the header gets a long, gentle transition instead of crashing
-  // into the subtitle. Header row content sits in roughly the first
-  // (topInset + 44)pt; the rest is pure fade.
-  const fadeHeight = topInset + 96;
+  const headerHeight = topInset + 52;
 
   return (
     <View
       pointerEvents="box-none"
-      className="absolute inset-x-0 top-0 z-10"
-      style={{ height: fadeHeight }}
+      className="absolute inset-x-0 top-0 z-10 border-gray-4 border-b bg-background"
+      style={{ height: headerHeight }}
     >
-      <LinearGradient
-        pointerEvents="none"
-        colors={[
-          toRgba(themeColors.background, 1),
-          toRgba(themeColors.background, 1),
-          toRgba(themeColors.background, 0.85),
-          toRgba(themeColors.background, 0),
-        ]}
-        locations={[0, 0.5, 0.75, 1]}
-        style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
-      />
-
       <View
         className="flex-row items-center px-3"
         style={{ paddingTop: topInset, paddingBottom: 4 }}
@@ -74,7 +52,7 @@ export function FloatingTaskHeader({
           <CaretLeft size={22} color={themeColors.gray[12]} weight="bold" />
         </Pressable>
 
-        <View className="min-w-0 flex-1 items-center px-2">
+        <View className="min-w-0 flex-1 items-start px-2">
           <Text
             className="font-semibold text-[15px] text-gray-12"
             numberOfLines={1}

apps/mobile/src/features/tasks/composer/TaskChatComposer.tsx

@@ -34,17 +34,9 @@ import {
   Stack,
   Stop,
 } from "phosphor-react-native";
-import {
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
 import {
   ActivityIndicator,
-  Animated,
-  Easing,
   Keyboard,
   Pressable,
   ScrollView,
@@ -115,60 +107,6 @@ function modeIcon(mode: ExecutionMode, color: string, size = 14): ReactNode {
   }
 }
 
-function PulsingBorder({ active, color }: { active: boolean; color: string }) {
-  const opacity = useRef(new Animated.Value(0)).current;
-  const animRef = useRef<Animated.CompositeAnimation | null>(null);
-
-  useEffect(() => {
-    if (active) {
-      opacity.setValue(0);
-      animRef.current = Animated.loop(
-        Animated.sequence([
-          Animated.timing(opacity, {
-            toValue: 1,
-            duration: 1500,
-            easing: Easing.inOut(Easing.ease),
-            useNativeDriver: true,
-          }),
-          Animated.timing(opacity, {
-            toValue: 0,
-            duration: 1500,
-            easing: Easing.inOut(Easing.ease),
-            useNativeDriver: true,
-          }),
-        ]),
-      );
-      animRef.current.start();
-    } else {
-      animRef.current?.stop();
-      animRef.current = null;
-      opacity.setValue(0);
-    }
-    return () => {
-      animRef.current?.stop();
-    };
-  }, [active, opacity]);
-
-  if (!active) return null;
-
-  return (
-    <Animated.View
-      pointerEvents="none"
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        opacity,
-        borderWidth: 2,
-        borderColor: color,
-        borderRadius: 16,
-      }}
-    />
-  );
-}
-
 export function TaskChatComposer({
   onSend,
   onStop,
@@ -318,10 +256,9 @@ export function TaskChatComposer({
 
   return (
     <>
-      <View className="px-3">
-        <View className="relative">
-          <PulsingBorder active={isUserTurn} color={themeColors.accent[9]} />
-          <View className="overflow-hidden rounded-2xl border border-gray-6 bg-card">
+      <View className="px-4">
+        <View style={{ width: "100%", maxWidth: 600, alignSelf: "center" }}>
+          <View className="overflow-hidden rounded-lg border border-gray-6 bg-card">
             {editing ? (
               <View className="flex-row items-center gap-2 border-gray-6 border-b bg-accent-2 px-3 py-2">
                 <PencilIcon size={14} color={themeColors.accent[11]} />
@@ -347,7 +284,7 @@ export function TaskChatComposer({
             />
             <TextInput
               className="px-4 pt-3.5 pb-3 text-[15px] text-gray-12"
-              style={{ minHeight: 56, maxHeight: 200 }}
+              style={{ minHeight: 64, maxHeight: 200 }}
               placeholder={
                 isRecording
                   ? "Recording..."
@@ -394,23 +331,6 @@ export function TaskChatComposer({
                   paddingRight: 4,
                 }}
               >
-                <Pill
-                  icon={
-                    isSteer ? (
-                      <Lightning
-                        size={14}
-                        color={themeColors.accent[11]}
-                        weight="fill"
-                      />
-                    ) : (
-                      <Stack size={14} color={themeColors.gray[11]} />
-                    )
-                  }
-                  label={messagingModeLabel}
-                  accent={isSteer}
-                  onPress={handleToggleMessagingMode}
-                />
-
                 <Pill
                   icon={modeIcon(
                     mode,
@@ -452,6 +372,23 @@ export function TaskChatComposer({
                     onPress={() => setReasoningSheetOpen(true)}
                   />
                 ) : null}
+
+                <Pill
+                  icon={
+                    isSteer ? (
+                      <Lightning
+                        size={14}
+                        color={themeColors.accent[11]}
+                        weight="fill"
+                      />
+                    ) : (
+                      <Stack size={14} color={themeColors.gray[11]} />
+                    )
+                  }
+                  label={messagingModeLabel}
+                  accent={isSteer}
+                  onPress={handleToggleMessagingMode}
+                />
               </ScrollView>
 
               <Pressable