feat: Improve long command display and auto-collapse plan edits (#1168)

Closes #1140

1. Wrap long commands in permission dialog with scrollable container and word-break
2. Truncate command text in ExecuteToolView to 120 chars for cleaner inline display
3. Auto-collapse EditToolView for plan file edits via useEffect

Author: charlesvien

apps/code/src/renderer/components/permissions/ExecutePermission.tsx

@@ -1,5 +1,5 @@
 import { ActionSelector } from "@components/ActionSelector";
-import { Code } from "@radix-ui/themes";
+import { Box, Code } from "@radix-ui/themes";
 import { compactHomePath } from "@utils/path";
 import {
   type BasePermissionProps,
@@ -20,9 +20,16 @@ export function ExecutePermission({
       title={toolCall.title ?? "Execute command"}
       pendingAction={
         command ? (
-          <Code variant="ghost" size="1" title={command}>
-            {compactHomePath(command)}
-          </Code>
+          <Box className="max-h-[30vh] overflow-auto">
+            <Code
+              variant="ghost"
+              size="1"
+              title={command}
+              className="whitespace-pre-wrap break-all"
+            >
+              {compactHomePath(command)}
+            </Code>
+          </Box>
         ) : undefined
       }
       question="Do you want to proceed?"

apps/code/src/renderer/features/sessions/components/session-update/EditToolView.tsx

@@ -4,7 +4,7 @@ import {
   PencilSimple,
 } from "@phosphor-icons/react";
 import { Box, Flex, IconButton, Text } from "@radix-ui/themes";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { CodePreview } from "./CodePreview";
 import { FileMentionChip } from "./FileMentionChip";
 import {
@@ -74,6 +74,12 @@ export function EditToolView({
   const isPlanFile = filePath.includes("claude/plans/");
   const [isExpanded, setIsExpanded] = useState(!isPlanFile);
 
+  useEffect(() => {
+    if (isPlanFile) {
+      setIsExpanded(false);
+    }
+  }, [isPlanFile]);
+
   return (
     <Box className="max-w-4xl overflow-hidden rounded-lg border border-gray-6">
       <button

apps/code/src/renderer/features/sessions/components/session-update/ExecuteToolView.tsx

@@ -9,10 +9,12 @@ import {
   StatusIndicators,
   ToolTitle,
   type ToolViewProps,
+  truncateText,
   useToolCallStatus,
 } from "./toolCallUtils";
 
 const ANSI_REGEX = new RegExp(`${String.fromCharCode(0x1b)}\\[[0-9;]*m`, "g");
+const MAX_COMMAND_LENGTH = 120;
 
 interface ExecuteRawInput {
   command?: string;
@@ -65,9 +67,9 @@ export function ExecuteToolView({
         <Flex align="center" gap="2" wrap="wrap">
           {description && <ToolTitle>{description}</ToolTitle>}
           {command && (
-            <ToolTitle>
+            <ToolTitle className="truncate">
               <span className="font-mono text-accent-11" title={command}>
-                {compactHomePath(command)}
+                {truncateText(compactHomePath(command), MAX_COMMAND_LENGTH)}
               </span>
             </ToolTitle>
           )}