Update files

packages/app/src/components/code-insets.ts

@@ -1,7 +1,10 @@
 export function getCodeInsets(theme: any) {
-  const currentHorizontal = theme.spacing[3] + theme.spacing[2];
   const padding =
-    typeof theme.spacing?.[4] === "number" ? theme.spacing[4] : currentHorizontal;
+    typeof theme.spacing?.[3] === "number"
+      ? theme.spacing[3]
+      : typeof theme.spacing?.[4] === "number"
+        ? theme.spacing[4]
+        : 12;
   const extraRight = theme.spacing[4];
   const extraBottom = theme.spacing[3];
 

packages/app/src/components/diff-viewer.tsx

@@ -102,11 +102,12 @@ const styles = StyleSheet.create((theme) => {
     },
     linesContainer: {
       alignSelf: "flex-start",
+      padding: insets.padding,
     },
     line: {
       minWidth: "100%",
-      paddingHorizontal: insets.padding,
+      paddingHorizontal: 0,
-      paddingVertical: insets.padding,
+      paddingVertical: theme.spacing[1],
     },
     lineText: {
       fontFamily: Fonts.mono,

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

@@ -161,7 +161,7 @@ export function ToolCallDetailsContent({
   const isFullBleed = display.type === "edit" || display.type === "shell";
 
   if (display.type === "shell") {
-    const combinedText = `$ ${display.command}${display.output ? `\n${display.output}` : ""}`;
+    const hasOutput = Boolean(display.output);
     sections.push(
       <View key="shell" style={styles.section}>
         <View style={styles.diffContainer}>
@@ -178,7 +178,11 @@ export function ToolCallDetailsContent({
               contentContainerStyle={styles.codeHorizontalContent}
             >
               <View style={styles.codeLine}>
-                <Text selectable style={styles.scrollText}>{combinedText}</Text>
+                <Text selectable style={styles.scrollText}>
+                  <Text style={styles.shellPrompt}>$ </Text>
+                  {display.command}
+                  {hasOutput ? `\n\n${display.output}` : ""}
+                </Text>
               </View>
             </ScrollView>
           </ScrollView>
@@ -424,16 +428,19 @@ const styles = StyleSheet.create((theme) => {
   scrollContent: {
     padding: insets.padding,
   },
-  scrollText: {
+    scrollText: {
-    fontFamily: Fonts.mono,
+      fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.xs,
-    color: theme.colors.foreground,
+      color: theme.colors.foreground,
-    lineHeight: 18,
+      lineHeight: 18,
-  },
+    },
-  jsonScroll: {
+    shellPrompt: {
-    borderWidth: theme.borderWidth[1],
+      color: theme.colors.foregroundMuted,
-    borderColor: theme.colors.border,
+    },
-    borderRadius: theme.borderRadius.base,
+    jsonScroll: {
+      borderWidth: theme.borderWidth[1],
+      borderColor: theme.colors.border,
+      borderRadius: theme.borderRadius.base,
     backgroundColor: theme.colors.surface2,
   },
   jsonScrollError: {