Update files

packages/app/src/components/agent-stream-view.tsx

@@ -362,8 +362,6 @@ export function AgentStreamView({
             return (
               <ToolCall
                 toolName={data.name}
-                args={data.input}
-                result={data.result}
                 error={data.error}
                 status={data.status}
                 detail={data.detail}
@@ -1123,8 +1121,11 @@ function PermissionRequestCard({
 
       {!isPlanRequest ? (
         <ToolCallDetailsContent
-          input={request.input ?? null}
-          output={null}
+          detail={{
+            type: "unknown",
+            rawInput: request.input ?? null,
+            rawOutput: null,
+          }}
           maxHeight={200}
         />
       ) : null}

packages/app/src/components/message.tsx

@@ -1151,7 +1151,7 @@ const ExpandableBadge = memo(function ExpandableBadge({
 
 interface ToolCallProps {
   toolName: string;
-  args: unknown | null;
+  args?: unknown | null;
   result?: unknown | null;
   error?: unknown | null;
   status: "executing" | "running" | "completed" | "failed" | "canceled";
@@ -1191,29 +1191,53 @@ export const ToolCall = memo(function ToolCall({
     UnistylesRuntime.breakpoint === "xs" ||
     UnistylesRuntime.breakpoint === "sm";
 
+  const effectiveDetail = useMemo<ToolCallDetail | undefined>(() => {
+    if (detail) {
+      return detail;
+    }
+    if (args !== undefined || result !== undefined) {
+      return {
+        type: "unknown",
+        rawInput: args ?? null,
+        rawOutput: result ?? null,
+      };
+    }
+    return undefined;
+  }, [detail, args, result]);
+
+  const displayDetail =
+    effectiveDetail ?? {
+      type: "unknown",
+      rawInput: null,
+      rawOutput: null,
+    };
+
   const displayModel = useMemo(
     () =>
       buildToolCallDisplayModel({
         name: toolName,
         status: status === "executing" ? "running" : status,
-        input: args ?? null,
-        output: result ?? null,
         error: error ?? null,
-        detail,
+        detail: displayDetail,
         metadata,
         cwd,
       }),
-    [toolName, status, args, result, error, detail, metadata, cwd]
+    [toolName, status, error, displayDetail, metadata, cwd]
   );
   const displayName = displayModel.displayName;
   const summary = displayModel.summary;
   const errorText = displayModel.errorText;
-  const iconCategory = detail?.type ?? toolName.trim().toLowerCase();
-  const IconComponent = resolveToolCallIcon(toolName, detail);
+  const iconCategory = effectiveDetail?.type ?? toolName.trim().toLowerCase();
+  const IconComponent = resolveToolCallIcon(toolName, effectiveDetail);
 
   // Check if there's any content to display
   const hasDetails =
-    args !== undefined || result !== undefined || error !== undefined;
+    Boolean(error) ||
+    (effectiveDetail
+      ? effectiveDetail.type !== "unknown" ||
+        effectiveDetail.rawInput !== null ||
+        effectiveDetail.rawOutput !== null
+      : false);
 
   const handleToggle = useCallback(() => {
     if (!isMobile && isPerfLoggingEnabled()) {
@@ -1224,15 +1248,13 @@ export const ToolCall = memo(function ToolCall({
         toolName,
         displayName,
         summary,
-        detail,
-        input: args,
-        output: result,
+        detail: effectiveDetail,
         errorText,
       });
     } else {
       setIsExpanded((prev) => !prev);
     }
-  }, [isMobile, openToolCall, toolName, displayName, summary, detail, args, result, errorText]);
+  }, [isMobile, openToolCall, toolName, displayName, summary, effectiveDetail, errorText]);
 
   useEffect(() => {
     if (isMobile || !isPerfLoggingEnabled()) {
@@ -1293,14 +1315,12 @@ export const ToolCall = memo(function ToolCall({
     if (isMobile) return null;
     return (
       <ToolCallDetailsContent
-        detail={detail}
-        input={args}
-        output={result}
+        detail={effectiveDetail}
         errorText={errorText}
         maxHeight={400}
       />
     );
-  }, [isMobile, detail, args, result, errorText]);
+  }, [isMobile, effectiveDetail, errorText]);
 
   return (
     <ExpandableBadge

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

@@ -17,16 +17,12 @@ const ScrollView = Platform.OS === "web" ? RNScrollView : GHScrollView;
 
 interface ToolCallDetailsContentProps {
   detail?: ToolCallDetail;
-  input?: unknown | null;
-  output?: unknown | null;
   errorText?: string;
   maxHeight?: number;
 }
 
 export function ToolCallDetailsContent({
   detail,
-  input,
-  output,
   errorText,
   maxHeight = 300,
 }: ToolCallDetailsContentProps) {
@@ -141,10 +137,10 @@ export function ToolCallDetailsContent({
         <Text selectable style={styles.scrollText}>{detail.query}</Text>
       </View>
     );
-  } else {
+  } else if (detail?.type === "unknown") {
     const sectionsFromTopLevel = [
-      { title: "Input", value: input },
-      { title: "Output", value: output },
+      { title: "Input", value: detail.rawInput },
+      { title: "Output", value: detail.rawOutput },
     ].filter((entry) => entry.value !== null && entry.value !== undefined);
 
     for (const section of sectionsFromTopLevel) {

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

@@ -27,8 +27,6 @@ export type ToolCallSheetData = {
   displayName: string;
   summary?: string;
   detail?: ToolCallDetail;
-  input?: unknown | null;
-  output?: unknown | null;
   errorText?: string;
 };
 
@@ -132,7 +130,7 @@ interface ToolCallSheetContentProps {
 }
 
 function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
-  const { toolName, displayName, detail, input, output, errorText } = data;
+  const { toolName, displayName, detail, errorText } = data;
 
   const IconComponent = resolveToolCallIcon(toolName, detail);
 
@@ -158,8 +156,6 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
       >
         <ToolCallDetailsContent
           detail={detail}
-          input={input}
-          output={output}
           errorText={errorText}
         />
       </BottomSheetScrollView>