Feat: subagent tool grouping (#398)

* fix(mobile): prevent bottom padding removal on input focus

* fix: change subagent rendering

* fix: subagent task name

src/components/chat/tools/ToolRenderer.tsx

@@ -1,7 +1,8 @@
 import React, { memo, useMemo, useCallback } from 'react';
 import { getToolConfig } from './configs/toolConfigs';
-import { OneLineDisplay, CollapsibleDisplay, DiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent } from './components';
+import { OneLineDisplay, CollapsibleDisplay, DiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
 import type { Project } from '../../../types/app';
+import type { SubagentChildTool } from '../types/types';
 
 type DiffLine = {
   type: string;
@@ -21,6 +22,12 @@ interface ToolRendererProps {
   autoExpandTools?: boolean;
   showRawParameters?: boolean;
   rawToolInput?: string;
+  isSubagentContainer?: boolean;
+  subagentState?: {
+    childTools: SubagentChildTool[];
+    currentToolIndex: number;
+    isComplete: boolean;
+  };
 }
 
 function getToolCategory(toolName: string): string {
@@ -50,8 +57,24 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
   selectedProject,
   autoExpandTools = false,
   showRawParameters = false,
-  rawToolInput
+  rawToolInput,
+  isSubagentContainer,
+  subagentState
 }) => {
+  // Route subagent containers to dedicated component
+  if (isSubagentContainer && subagentState) {
+    if (mode === 'result') {
+      return null;
+    }
+    return (
+      <SubagentContainer
+        toolInput={toolInput}
+        toolResult={toolResult}
+        subagentState={subagentState}
+      />
+    );
+  }
+
   const config = getToolConfig(toolName);
   const displayConfig: any = mode === 'input' ? config.input : config.result;
 

src/components/chat/tools/components/CollapsibleSection.tsx

@@ -24,7 +24,7 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
 }) => {
   return (
     <details className={`relative group/details ${className}`} open={open}>
-      <summary className="flex items-center gap-1.5 text-xs cursor-pointer py-0.5 select-none">
+      <summary className="flex items-center gap-1.5 text-xs cursor-pointer py-0.5 select-none group-open/details:sticky group-open/details:top-0 group-open/details:z-10 group-open/details:bg-background group-open/details:-mx-1 group-open/details:px-1">
         <svg
           className="w-3 h-3 text-gray-400 dark:text-gray-500 transition-transform duration-150 group-open/details:rotate-90 flex-shrink-0"
           fill="none"

src/components/chat/tools/components/SubagentContainer.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { CollapsibleSection } from './CollapsibleSection';
+import type { SubagentChildTool } from '../../types/types';
+
+interface SubagentContainerProps {
+  toolInput: unknown;
+  toolResult?: { content?: unknown; isError?: boolean } | null;
+  subagentState: {
+    childTools: SubagentChildTool[];
+    currentToolIndex: number;
+    isComplete: boolean;
+  };
+}
+
+const getCompactToolDisplay = (toolName: string, toolInput: unknown): string => {
+  const input = typeof toolInput === 'string' ? (() => {
+    try { return JSON.parse(toolInput); } catch { return {}; }
+  })() : (toolInput || {});
+
+  switch (toolName) {
+    case 'Read':
+    case 'Write':
+    case 'Edit':
+    case 'ApplyPatch':
+      return input.file_path?.split('/').pop() || input.file_path || '';
+    case 'Grep':
+    case 'Glob':
+      return input.pattern || '';
+    case 'Bash':
+      const cmd = input.command || '';
+      return cmd.length > 40 ? `${cmd.slice(0, 40)}...` : cmd;
+    case 'Task':
+      return input.description || input.subagent_type || '';
+    case 'WebFetch':
+    case 'WebSearch':
+      return input.url || input.query || '';
+    default:
+      return '';
+  }
+};
+
+export const SubagentContainer: React.FC<SubagentContainerProps> = ({
+  toolInput,
+  toolResult,
+  subagentState,
+}) => {
+  const parsedInput = typeof toolInput === 'string' ? (() => {
+    try { return JSON.parse(toolInput); } catch { return {}; }
+  })() : (toolInput || {});
+
+  const subagentType = parsedInput?.subagent_type || 'Agent';
+  const description = parsedInput?.description || 'Running task';
+  const prompt = parsedInput?.prompt || '';
+  const { childTools, currentToolIndex, isComplete } = subagentState;
+  const currentTool = currentToolIndex >= 0 ? childTools[currentToolIndex] : null;
+
+  const title = `Subagent / ${subagentType}: ${description}`;
+
+  return (
+    <div className="border-l-2 border-l-purple-500 dark:border-l-purple-400 pl-3 py-0.5 my-1">
+      <CollapsibleSection
+        title={title}
+        toolName="Task"
+        open={false}
+      >
+        {/* Prompt/request to the subagent */}
+        {prompt && (
+          <div className="text-xs text-gray-600 dark:text-gray-400 mb-2 whitespace-pre-wrap break-words line-clamp-4">
+            {prompt}
+          </div>
+        )}
+
+        {/* Current tool indicator (while running) */}
+        {currentTool && !isComplete && (
+          <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 mt-1">
+            <span className="animate-pulse w-1.5 h-1.5 rounded-full bg-purple-500 dark:bg-purple-400 flex-shrink-0" />
+            <span className="text-gray-400 dark:text-gray-500">Currently:</span>
+            <span className="font-medium text-gray-600 dark:text-gray-300">{currentTool.toolName}</span>
+            {getCompactToolDisplay(currentTool.toolName, currentTool.toolInput) && (
+              <>
+                <span className="text-gray-300 dark:text-gray-600">/</span>
+                <span className="font-mono truncate text-gray-500 dark:text-gray-400">
+                  {getCompactToolDisplay(currentTool.toolName, currentTool.toolInput)}
+                </span>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Completion status */}
+        {isComplete && (
+          <div className="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 mt-1">
+            <svg className="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            <span>Completed ({childTools.length} {childTools.length === 1 ? 'tool' : 'tools'})</span>
+          </div>
+        )}
+
+        {/* Tool history (collapsed) */}
+        {childTools.length > 0 && (
+          <details className="mt-2 group/history">
+            <summary className="cursor-pointer text-[11px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 flex items-center gap-1">
+              <svg
+                className="w-2.5 h-2.5 transition-transform duration-150 group-open/history:rotate-90 flex-shrink-0"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+              <span>View tool history ({childTools.length})</span>
+            </summary>
+            <div className="mt-1 pl-3 border-l border-gray-200 dark:border-gray-700 space-y-0.5">
+              {childTools.map((child, index) => (
+                <div key={child.toolId} className="flex items-center gap-1.5 text-[11px] text-gray-500 dark:text-gray-400">
+                  <span className="text-gray-400 dark:text-gray-500 w-4 text-right flex-shrink-0">{index + 1}.</span>
+                  <span className="font-medium">{child.toolName}</span>
+                  {getCompactToolDisplay(child.toolName, child.toolInput) && (
+                    <span className="font-mono truncate text-gray-400 dark:text-gray-500">
+                      {getCompactToolDisplay(child.toolName, child.toolInput)}
+                    </span>
+                  )}
+                  {child.toolResult?.isError && (
+                    <span className="text-red-500 flex-shrink-0">(error)</span>
+                  )}
+                </div>
+              ))}
+            </div>
+          </details>
+        )}
+
+        {/* Final result */}
+        {isComplete && toolResult && (
+          <div className="mt-2 text-xs text-gray-600 dark:text-gray-400">
+            {(() => {
+              let content = toolResult.content;
+
+              // Handle JSON string that needs parsing
+              if (typeof content === 'string') {
+                try {
+                  const parsed = JSON.parse(content);
+                  if (Array.isArray(parsed)) {
+                    // Extract text from array format like [{"type":"text","text":"..."}]
+                    const textParts = parsed
+                      .filter((p: any) => p.type === 'text' && p.text)
+                      .map((p: any) => p.text);
+                    if (textParts.length > 0) {
+                      content = textParts.join('\n');
+                    }
+                  }
+                } catch {
+                  // Not JSON, use as-is
+                }
+              } else if (Array.isArray(content)) {
+                // Direct array format
+                const textParts = content
+                  .filter((p: any) => p.type === 'text' && p.text)
+                  .map((p: any) => p.text);
+                if (textParts.length > 0) {
+                  content = textParts.join('\n');
+                }
+              }
+
+              return typeof content === 'string' ? (
+                <div className="whitespace-pre-wrap break-words line-clamp-6">
+                  {content}
+                </div>
+              ) : content ? (
+                <pre className="whitespace-pre-wrap break-words line-clamp-6 font-mono text-[11px]">
+                  {JSON.stringify(content, null, 2)}
+                </pre>
+              ) : null;
+            })()}
+          </div>
+        )}
+      </CollapsibleSection>
+    </div>
+  );
+};

src/components/chat/tools/components/index.ts

@@ -2,5 +2,6 @@ export { CollapsibleSection } from './CollapsibleSection';
 export { DiffViewer } from './DiffViewer';
 export { OneLineDisplay } from './OneLineDisplay';
 export { CollapsibleDisplay } from './CollapsibleDisplay';
+export { SubagentContainer } from './SubagentContainer';
 export * from './ContentRenderers';
 export * from './InteractiveRenderers';

src/components/chat/tools/configs/toolConfigs.ts

@@ -383,7 +383,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
         const description = input.description || 'Running task';
         return `Subagent / ${subagentType}: ${description}`;
       },
-      defaultOpen: true,
+      defaultOpen: false,
       contentType: 'markdown',
       getContentProps: (input) => {
         // If only prompt exists (and required fields), show just the prompt
@@ -424,14 +424,8 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
     },
     result: {
       type: 'collapsible',
-      title: (result) => {
-        // Check if result has content with type array (agent results often have this structure)
-        if (result && result.content && Array.isArray(result.content)) {
-          return 'Subagent Response';
-        }
-        return 'Subagent Result';
-      },
-      defaultOpen: true,
+      title: 'Subagent result',
+      defaultOpen: false,
       contentType: 'markdown',
       getContentProps: (result) => {
         // Handle agent results which may have complex structure