Update files

packages/app/src/components/message.tsx

@@ -388,11 +388,12 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
     borderWidth: theme.borderWidth[1],
     borderTopWidth: 0,
     borderColor: theme.colors.borderAccent,
-    backgroundColor: theme.colors.surface0,
+    backgroundColor: theme.colors.surface1,
     padding: 0,
     gap: 0,
     flexShrink: 1,
     minWidth: 0,
+    overflow: "hidden",
   },
   pressableExpanded: {
     borderBottomLeftRadius: 0,

packages/app/src/components/tool-call-details.tsx

@@ -159,12 +159,15 @@ export function ToolCallDetailsContent({
 
   const sections: ReactNode[] = [];
   const isFullBleed = display.type === "edit" || display.type === "shell";
+  const codeBlockStyle = isFullBleed ? styles.fullBleedBlock : styles.diffContainer;
 
   if (display.type === "shell") {
-    const hasOutput = Boolean(display.output);
+    const command = display.command.replace(/\n+$/, "");
+    const output = display.output.replace(/^\n+/, "");
+    const hasOutput = output.length > 0;
     sections.push(
       <View key="shell" style={styles.section}>
-        <View style={styles.diffContainer}>
+        <View style={codeBlockStyle}>
           <ScrollView
             style={[styles.codeVerticalScroll, { maxHeight }]}
             contentContainerStyle={styles.codeVerticalContent}
@@ -180,8 +183,8 @@ export function ToolCallDetailsContent({
               <View style={styles.codeLine}>
                 <Text selectable style={styles.scrollText}>
                   <Text style={styles.shellPrompt}>$ </Text>
-                  {display.command}
+                  {command}
-                  {hasOutput ? `\n${display.output}` : ""}
+                  {hasOutput ? `\n\n${output}` : ""}
                 </Text>
               </View>
             </ScrollView>
@@ -193,7 +196,7 @@ export function ToolCallDetailsContent({
     sections.push(
       <View key="edit" style={styles.section}>
         {diffLines ? (
-          <View style={styles.diffContainer}>
+          <View style={codeBlockStyle}>
             <DiffViewer diffLines={diffLines} maxHeight={maxHeight} />
           </View>
         ) : null}
@@ -399,13 +402,19 @@ const styles = StyleSheet.create((theme) => {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
   },
-  diffContainer: {
+    diffContainer: {
-    borderWidth: theme.borderWidth[1],
+      borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
+      borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.base,
+      borderRadius: theme.borderRadius.base,
-    overflow: "hidden",
+      overflow: "hidden",
-    backgroundColor: theme.colors.surface2,
+      backgroundColor: theme.colors.surface2,
-  },
+    },
+    fullBleedBlock: {
+      borderWidth: 0,
+      borderRadius: 0,
+      overflow: "hidden",
+      backgroundColor: theme.colors.surface2,
+    },
   codeVerticalScroll: {},
   codeVerticalContent: {
     flexGrow: 1,