diff --git a/src/components/chat/tools/ToolRenderer.tsx b/src/components/chat/tools/ToolRenderer.tsx
index 33fbc2b..2839622 100644
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/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';
 }
diff --git a/src/components/chat/tools/components/CollapsibleDisplay.tsx b/src/components/chat/tools/components/CollapsibleDisplay.tsx
index 41556c3..9d833df 100644
--- a/src/components/chat/tools/components/CollapsibleDisplay.tsx
+++ b/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',
 };
diff --git a/src/components/chat/tools/components/OneLineDisplay.tsx b/src/components/chat/tools/components/OneLineDisplay.tsx
index a0707ac..c9e3355 100644
--- a/src/components/chat/tools/components/OneLineDisplay.tsx
+++ b/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>
   );
-};
+};
\ No newline at end of file
diff --git a/src/components/chat/tools/configs/toolConfigs.ts b/src/components/chat/tools/configs/toolConfigs.ts
index 799e027..49b623e 100644
--- a/src/components/chat/tools/configs/toolConfigs.ts
+++ b/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
   // ============================================================================