refactor(tools): add agent category for Task tool

Add visual distinction for the Task tool (subagent invocation) by
introducing a new 'agent' category with purple border styling. This
separates subagent tasks from regular task management tools
(TaskCreate, TaskUpdate, etc.) for clearer user feedback.

Also refactor terminal command layout in OneLineDisplay to properly
nest flex containers, fixing copy button alignment issues.

src/components/chat/tools/ToolRenderer.tsx

@@ -29,6 +29,7 @@ function getToolCategory(toolName: string): string {
   if (toolName === 'Bash') return 'bash';
   if (['TodoWrite', 'TodoRead'].includes(toolName)) return 'todo';
   if (['TaskCreate', 'TaskUpdate', 'TaskList', 'TaskGet'].includes(toolName)) return 'task';
+  if (toolName === 'Task') return 'agent';  // Subagent task
   if (toolName === 'exit_plan_mode' || toolName === 'ExitPlanMode') return 'plan';
   return 'default';
 }

src/components/chat/tools/components/CollapsibleDisplay.tsx

@@ -21,6 +21,7 @@ const borderColorMap: Record<string, string> = {
   bash: 'border-l-green-500 dark:border-l-green-400',
   todo: 'border-l-violet-500 dark:border-l-violet-400',
   task: 'border-l-violet-500 dark:border-l-violet-400',
+  agent: 'border-l-purple-500 dark:border-l-purple-400',
   plan: 'border-l-indigo-500 dark:border-l-indigo-400',
   default: 'border-l-gray-300 dark:border-l-gray-600',
 };

src/components/chat/tools/components/OneLineDisplay.tsx

@@ -85,24 +85,28 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
   // Terminal style: dark pill only around the command
   if (isTerminal) {
     return (
-      <div className="group flex items-start gap-2 my-1">
-        <div className="flex items-center gap-1.5 flex-shrink-0 pt-0.5">
-          <svg className="w-3 h-3 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
-        </div>
-        <div className="flex-1 min-w-0 flex items-start gap-2">
-          <div className="bg-gray-900 dark:bg-black rounded px-2.5 py-1 flex-1 min-w-0">
-            <code className={`text-xs text-green-400 font-mono ${wrapText ? 'whitespace-pre-wrap break-all' : 'block truncate'}`}>
-              <span className="text-green-600 dark:text-green-500 select-none">$ </span>{value}
-            </code>
+      <div className="group my-1">
+        <div className="flex items-start gap-2">
+          <div className="flex items-center gap-1.5 flex-shrink-0 pt-0.5">
+            <svg className="w-3 h-3 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <div className="flex-1 min-w-0 flex items-start gap-2">
+            <div className="bg-gray-900 dark:bg-black rounded px-2.5 py-1 flex-1 min-w-0">
+              <code className={`text-xs text-green-400 font-mono ${wrapText ? 'whitespace-pre-wrap break-all' : 'block truncate'}`}>
+                <span className="text-green-600 dark:text-green-500 select-none">$ </span>{value}
+              </code>
+            </div>
+            {action === 'copy' && renderCopyButton()}
           </div>
-          {action === 'copy' && renderCopyButton()}
         </div>
         {secondary && (
-          <span className="text-[11px] text-gray-400 dark:text-gray-500 italic flex-shrink-0 pt-1">
-            {secondary}
-          </span>
+          <div className="ml-7 mt-1">
+            <span className="text-[11px] text-gray-400 dark:text-gray-500 italic">
+              {secondary}
+            </span>
+          </div>
         )}
       </div>
     );
@@ -177,4 +181,4 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
       {action === 'copy' && renderCopyButton()}
     </div>
   );
-};
+};

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

@@ -1,6 +1,6 @@
 /**
  * Centralized tool configuration registry
- * Defines display behavior for all tool types using config-driven architecture
+ * Defines display behavior for all tool types 
  */
 
 export interface ToolDisplayConfig {
@@ -371,6 +371,64 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
     }
   },
 
+  // ============================================================================
+  // SUBAGENT TASK TOOL
+  // ============================================================================
+
+  Task: {
+    input: {
+      type: 'collapsible',
+      title: (input) => {
+        const subagentType = input.subagent_type || 'Agent';
+        const description = input.description || 'Running task';
+        return `${subagentType}: ${description}`;
+      },
+      defaultOpen: true,
+      contentType: 'markdown',
+      getContentProps: (input) => {
+        // Format the subagent task details in a readable way
+        const parts = [];
+
+        if (input.subagent_type) {
+          parts.push(`**Agent Type:** ${input.subagent_type}`);
+        }
+
+        if (input.description) {
+          parts.push(`**Description:** ${input.description}`);
+        }
+
+        if (input.model) {
+          parts.push(`**Model:** ${input.model}`);
+        }
+
+        if (input.prompt) {
+          parts.push(`**Prompt:**\n\`\`\`\n${input.prompt}\n\`\`\``);
+        }
+
+        if (input.resume) {
+          parts.push(`**Resuming from:** ${input.resume}`);
+        }
+
+        return {
+          content: parts.join('\n\n')
+        };
+      },
+      colorScheme: {
+        border: 'border-purple-500 dark:border-purple-400',
+        icon: 'text-purple-500 dark:text-purple-400'
+      }
+    },
+    result: {
+      type: 'collapsible',
+      title: 'Agent Response',
+      defaultOpen: true,
+      contentType: 'markdown',
+      getContentProps: (result) => ({
+        content: String(result.content || result || '')
+      })
+    }
+  },
+
   // ============================================================================
   // PLAN TOOLS
   // ============================================================================