From f1ef10dfeefba3068a66c8ccf1c0db4d486ccf4b Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Wed, 4 Feb 2026 13:31:30 +0700
Subject: [PATCH] Update files

---
 packages/app/src/components/message.tsx       |  3 +-
 .../app/src/components/tool-call-details.tsx  | 33 ++++++++++++-------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx
index 3989990a2..1b87e0380 100644
--- a/packages/app/src/components/message.tsx
+++ b/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,
diff --git a/packages/app/src/components/tool-call-details.tsx b/packages/app/src/components/tool-call-details.tsx
index e32d82b03..46d005e13 100644
--- a/packages/app/src/components/tool-call-details.tsx
+++ b/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}
-                  {hasOutput ? `\n${display.output}` : ""}
+                  {command}
+                  {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: {
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.base,
-    overflow: "hidden",
-    backgroundColor: theme.colors.surface2,
-  },
+    diffContainer: {
+      borderWidth: theme.borderWidth[1],
+      borderColor: theme.colors.border,
+      borderRadius: theme.borderRadius.base,
+      overflow: "hidden",
+      backgroundColor: theme.colors.surface2,
+    },
+    fullBleedBlock: {
+      borderWidth: 0,
+      borderRadius: 0,
+      overflow: "hidden",
+      backgroundColor: theme.colors.surface2,
+    },
   codeVerticalScroll: {},
   codeVerticalContent: {
     flexGrow: 1,