wip: tool call structure investigation and e2e tests

- Add debug logging for tool call payloads in agent-stream-view
- Add e2e tests to verify tool call structure for Claude and Codex agents
- Include sidebar toggle and horizontal scroll improvements from previous work

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

packages/app/src/components/headers/menu-header.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { Pressable, Text } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { Menu } from "lucide-react-native";
+import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { Menu, PanelLeft } from "lucide-react-native";
 import { ScreenHeader } from "./screen-header";
 import { useSidebarStore } from "@/stores/sidebar-store";
 
@@ -12,14 +12,21 @@ interface MenuHeaderProps {
 
 export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
   const { theme } = useUnistyles();
-  const { toggle } = useSidebarStore();
+  const { isOpen, toggle } = useSidebarStore();
+  const isMobile =
+    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+
+  const MenuIcon = isMobile ? Menu : PanelLeft;
+  const menuIconColor = !isMobile && isOpen
+    ? theme.colors.foreground
+    : theme.colors.mutedForeground;
 
   return (
     <ScreenHeader
       left={
         <>
           <Pressable onPress={toggle} style={styles.menuButton}>
-            <Menu size={20} color={theme.colors.mutedForeground} />
+            <MenuIcon size={16} color={menuIconColor} />
           </Pressable>
           {title && (
             <Text style={styles.title} numberOfLines={1}>

packages/app/src/components/headers/screen-header.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, UnistylesRuntime } from "react-native-unistyles";
+import { HEADER_INNER_HEIGHT } from "@/constants/layout";
 
 interface ScreenHeaderProps {
   left?: ReactNode;
@@ -16,8 +17,9 @@ interface ScreenHeaderProps {
  */
 export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeaderProps) {
   const insets = useSafeAreaInsets();
-  const { theme } = useUnistyles();
-  const topPadding = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm" ? 8 : 4;
+  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  // Only add extra padding on mobile for better touch targets; on desktop, only use safe area insets
+  const topPadding = isMobile ? 8 : 0;
 
   return (
     <View style={styles.header}>
@@ -37,17 +39,11 @@ const styles = StyleSheet.create((theme) => ({
   },
   inner: {},
   row: {
+    height: HEADER_INNER_HEIGHT,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: {
-      xs: theme.spacing[2],
-      md: theme.spacing[1],
-    },
-    paddingBottom: {
-      xs: theme.spacing[2],
-      md: theme.spacing[1],
-    },
+    paddingHorizontal: theme.spacing[2],
     borderBottomWidth: theme.borderWidth[1],
     borderBottomColor: theme.colors.border,
   },