diff --git a/python/extensions/agent_init/_10_initial_message.py b/python/extensions/agent_init/_10_initial_message.py
index f64a3fce44..65b5010fdb 100644
--- a/python/extensions/agent_init/_10_initial_message.py
+++ b/python/extensions/agent_init/_10_initial_message.py
@@ -35,7 +35,6 @@ async def execute(self, **kwargs):
         # Add to log (green bubble) for immediate UI display
         self.agent.context.log.log(
             type="response",
-            heading=f"{self.agent.agent_name}: Welcome",
             content=initial_message_text,
             finished=True,
             update_progress="none",
diff --git a/python/extensions/before_main_llm_call/_10_log_for_stream.py b/python/extensions/before_main_llm_call/_10_log_for_stream.py
index 49b04b7b7b..6618a0a47f 100644
--- a/python/extensions/before_main_llm_call/_10_log_for_stream.py
+++ b/python/extensions/before_main_llm_call/_10_log_for_stream.py
@@ -19,8 +19,10 @@ async def execute(self, loop_data: LoopData = LoopData(), text: str = "", **kwar
                 )
             )
 
-def build_heading(agent, text: str):
-    return f"icon://network_intelligence {agent.agent_name}: {text}"
+def build_heading(agent, text: str, icon: str = "network_intelligence"):
+    # Include agent identifier for all agents (A0:, A1:, A2:, etc.)
+    agent_prefix = f"{agent.agent_name}: "
+    return f"icon://{icon} {agent_prefix}{text}"
 
 def build_default_heading(agent):
     return build_heading(agent, "Generating...") 
\ No newline at end of file
diff --git a/python/extensions/response_stream/_10_log_from_stream.py b/python/extensions/response_stream/_10_log_from_stream.py
index ace6baf547..375b96c032 100644
--- a/python/extensions/response_stream/_10_log_from_stream.py
+++ b/python/extensions/response_stream/_10_log_from_stream.py
@@ -22,12 +22,9 @@ async def execute(
         if "headline" in parsed:
             heading = build_heading(self.agent, parsed['headline'])
         elif "tool_name" in parsed:
-            heading = build_heading(self.agent, f"Using tool {parsed['tool_name']}") # if the llm skipped headline
+            heading = build_heading(self.agent, f"Using {parsed['tool_name']}") # if the llm skipped headline
         elif "thoughts" in parsed:
-            # thought length indicator
-            thoughts = "\n".join(parsed["thoughts"])
-            pipes = "|" * math.ceil(math.sqrt(len(thoughts)))
-            heading = build_heading(self.agent, f"Thinking... {pipes}")
+            heading = build_default_heading(self.agent)
         
         # create log message and store it in loop data temporary params
         if "log_item_generating" not in loop_data.params_temporary:
diff --git a/python/helpers/log.py b/python/helpers/log.py
index a799666588..d231810d25 100644
--- a/python/helpers/log.py
+++ b/python/helpers/log.py
@@ -1,5 +1,6 @@
 from dataclasses import dataclass, field
 import json
+import time
 from typing import Any, Literal, Optional, Dict, TypeVar, TYPE_CHECKING
 
 T = TypeVar("T")
@@ -131,9 +132,13 @@ class LogItem:
     kvps: Optional[OrderedDict] = None  # Use OrderedDict for kvps
     id: Optional[str] = None  # Add id field
     guid: str = ""
+    timestamp: float = 0.0
+    duration_ms: Optional[int] = None
+    agent_number: int = 0
 
     def __post_init__(self):
         self.guid = self.log.guid
+        self.timestamp = self.timestamp or time.time()
 
     def update(
         self,
@@ -181,6 +186,9 @@ def output(self):
             "content": self.content,
             "temp": self.temp,
             "kvps": self.kvps,
+            "timestamp": self.timestamp,
+            "duration_ms": self.duration_ms,
+            "agent_number": self.agent_number,
         }
 
 
@@ -206,11 +214,22 @@ def log(
     ) -> LogItem:
 
         # add a minimal item to the log
+        # Determine agent number from streaming agent
+        agent_number = 0
+        if self.context and self.context.streaming_agent:
+            agent_number = self.context.streaming_agent.number
+        
         item = LogItem(
             log=self,
             no=len(self.logs),
             type=type,
+            agent_number=agent_number,
         )
+        # Set duration on previous item and mark it as updated
+        if self.logs:
+            prev = self.logs[-1]
+            prev.duration_ms = int((item.timestamp - prev.timestamp) * 1000)
+            self.updates += [prev.no]
         self.logs.append(item)
 
         # and update it (to have just one implementation)
diff --git a/python/helpers/persist_chat.py b/python/helpers/persist_chat.py
index 55867e6fe5..9e4c20b6c7 100644
--- a/python/helpers/persist_chat.py
+++ b/python/helpers/persist_chat.py
@@ -262,17 +262,19 @@ def _deserialize_log(data: dict[str, Any]) -> "Log":
     # Deserialize the list of LogItem objects
     i = 0
     for item_data in data.get("logs", []):
-        log.logs.append(
-            LogItem(
-                log=log,  # restore the log reference
-                no=i,  # item_data["no"],
-                type=item_data["type"],
-                heading=item_data.get("heading", ""),
-                content=item_data.get("content", ""),
-                kvps=OrderedDict(item_data["kvps"]) if item_data["kvps"] else None,
-                temp=item_data.get("temp", False),
-            )
-        )
+        log.logs.append(LogItem(
+            log=log,  # restore the log reference
+            no=i,  # item_data["no"],
+            type=item_data["type"],
+            heading=item_data.get("heading", ""),
+            content=item_data.get("content", ""),
+            kvps=OrderedDict(item_data["kvps"]) if item_data["kvps"] else None,
+            temp=item_data.get("temp", False),
+            # Pass metrics directly to constructor
+            timestamp=item_data.get("timestamp", 0.0),
+            duration_ms=item_data.get("duration_ms"),
+            agent_number=item_data.get("agent_number", 0),
+        ))
         log.updates.append(i)
         i += 1
 
diff --git a/webui/components/messages/process-group/process-group-store.js b/webui/components/messages/process-group/process-group-store.js
new file mode 100644
index 0000000000..89a2f77ecc
--- /dev/null
+++ b/webui/components/messages/process-group/process-group-store.js
@@ -0,0 +1,181 @@
+import { createStore } from "/js/AlpineStore.js";
+
+// Process Group Store - manages collapsible process groups in chat
+
+// Unified mapping for both Tool Names and Step Types
+// Specific tool names (keys) take precedence over generic types
+const DISPLAY_CODES = {
+  // --- Specific Tools ---
+  'call_subordinate': 'SUB',
+  'search_engine': 'WEB',
+  'a2a_chat': 'A2A',
+  'behaviour_adjustment': 'ADJ',
+  'document_query': 'DOC',
+  'vision_load': 'EYE',
+  'notify_user': 'NTF',
+  'scheduler': 'SCH',
+  'unknown': 'UNK',
+  // Memory operations group
+  'memory_save': 'MEM',
+  'memory_load': 'MEM',
+  'memory_forget': 'MEM',
+  'memory_delete': 'MEM',
+
+  // --- Step Types ---
+  'agent': 'GEN',
+  'response': 'END',
+  'tool': 'USE',       // Generic fallback for tools
+  'code_exe': 'EXE',
+  'browser': 'BRW',
+  'progress': 'HLD',
+  'subagent': 'SUB',   // Type fallback if tool name missing
+  'mcp': 'MCP',
+  'info': 'INF',
+  'hint': 'HNT',
+  'warning': 'WRN',
+  'error': 'ERR',
+  'util': 'UTL',
+  'done': 'END'
+};
+
+const model = {
+  // Track which process groups are expanded (by group ID)
+  expandedGroups: {},
+  
+  // Track which individual steps are expanded within a group
+  expandedSteps: {},
+  
+  // Default collapsed state for new process groups
+  defaultCollapsed: true,
+
+  init() {
+    try {
+      // Load persisted state
+      const stored = localStorage.getItem("processGroupState");
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        this.expandedGroups = parsed.expandedGroups || {};
+        this.expandedSteps = parsed.expandedSteps || {};
+        this.defaultCollapsed = parsed.defaultCollapsed ?? true;
+      }
+    } catch (e) {
+      console.error("Failed to load process group state", e);
+    }
+  },
+
+  _persist() {
+    try {
+      localStorage.setItem("processGroupState", JSON.stringify({
+        expandedGroups: this.expandedGroups,
+        expandedSteps: this.expandedSteps,
+        defaultCollapsed: this.defaultCollapsed
+      }));
+    } catch (e) {
+      console.error("Failed to persist process group state", e);
+    }
+  },
+
+  // Check if a process group is expanded
+  isGroupExpanded(groupId) {
+    if (groupId in this.expandedGroups) {
+      return this.expandedGroups[groupId];
+    }
+    return !this.defaultCollapsed;
+  },
+
+  // Toggle process group expansion
+  toggleGroup(groupId) {
+    const current = this.isGroupExpanded(groupId);
+    this.expandedGroups[groupId] = !current;
+    this._persist();
+  },
+
+  // Expand a specific group
+  expandGroup(groupId) {
+    this.expandedGroups[groupId] = true;
+    this._persist();
+  },
+
+  // Collapse a specific group
+  collapseGroup(groupId) {
+    this.expandedGroups[groupId] = false;
+    this._persist();
+  },
+
+  // Check if a step within a group is expanded
+  isStepExpanded(groupId, stepId) {
+    const key = `${groupId}:${stepId}`;
+    return this.expandedSteps[key] || false;
+  },
+
+  // Toggle step expansion
+  toggleStep(groupId, stepId) {
+    const key = `${groupId}:${stepId}`;
+    const currentState = this.expandedSteps[key] || false;
+    this.expandedSteps[key] = !currentState;
+    this._persist();
+  },
+
+  // Status code (3-4 letter) for backend log types
+  // Looks up tool name first (specific), then falls back to type (generic)
+  getStepCode(type, toolName = null) {
+    // Specific tool codes only apply to generic 'tool' steps
+    if (type === 'tool' && toolName && DISPLAY_CODES[toolName]) {
+      return DISPLAY_CODES[toolName];
+    }
+
+    return DISPLAY_CODES[type] || 
+           type?.toUpperCase()?.slice(0, 4) || 
+           'GEN';
+  },
+
+  // CSS color class for backend log types
+  // Looks up tool name first (specific), then falls back to type (generic)
+  getStatusColorClass(type, toolName = null) {
+    // Specific tool name mappings for 'tool' steps
+    if (type === 'tool' && toolName) {
+      // call_subordinate gets teal (SUB color)
+      if (toolName === 'call_subordinate') {
+        return 'status-sub';
+      }
+      // Add other specific tool mappings here if needed in the future
+    }
+    
+    const colors = {
+      'agent': 'status-gen',
+      'response': 'status-end',
+      'tool': 'status-tool',
+      'mcp': 'status-mcp',
+      'subagent': 'status-sub',
+      'code_exe': 'status-exe',
+      'browser': 'status-brw',
+      'progress': 'status-wait',
+      'info': 'status-inf',
+      'hint': 'status-hnt',
+      'warning': 'status-wrn',
+      'error': 'status-err',
+      'util': 'status-utl',
+      'done': 'status-end'
+    };
+    return colors[type] || 'status-gen';
+  },
+
+  // Clear state for a specific context (when chat is reset)
+  clearContext(contextPrefix) {
+    // Clear groups matching the context
+    for (const key of Object.keys(this.expandedGroups)) {
+      if (key.startsWith(contextPrefix)) {
+        delete this.expandedGroups[key];
+      }
+    }
+    // Clear steps matching the context
+    for (const key of Object.keys(this.expandedSteps)) {
+      if (key.startsWith(contextPrefix)) {
+        delete this.expandedSteps[key];
+      }
+    }
+    this._persist();
+  }
+};
+
+export const store = createStore("processGroup", model);
diff --git a/webui/components/messages/process-group/process-group.css b/webui/components/messages/process-group/process-group.css
new file mode 100644
index 0000000000..ba3641998b
--- /dev/null
+++ b/webui/components/messages/process-group/process-group.css
@@ -0,0 +1,894 @@
+.process-group {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+  margin: var(--spacing-xs) 0;
+  padding: var(--spacing-xs) 0;
+  min-width: 200px;
+  max-width: 100%;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+/* Embedded Process Group inside Response */
+.process-group.embedded {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: transparent;
+}
+
+/* Message container with embedded process group */
+.message-container.has-process-group {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  min-width: 200px;
+  max-width: 100%;
+}
+
+.message-container.has-process-group > .message {
+  border: none;
+  background: transparent;
+  margin: 0;
+}
+
+/* Process Group Header */
+.process-group-header {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: opacity 0.15s ease;
+  min-height: 22px;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.process-group-header:hover {
+  opacity: 0.85;
+}
+
+/* Expand/collapse triangle - CSS-only (no Material Icons) */
+.process-group-header .expand-icon {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 4px 0 4px 6px;
+  border-color: transparent transparent transparent var(--color-text);
+  opacity: 0.5;
+  transition: transform 0.2s ease, opacity 0.15s ease;
+  flex-shrink: 0;
+  font-size: 0; /* Hide any text content */
+  margin-right: 2px;
+}
+
+.process-group-header:hover .expand-icon {
+  opacity: 0.8;
+}
+
+.process-group.expanded .process-group-header .expand-icon {
+  transform: rotate(90deg);
+}
+
+/* Group icon removed - using status badges */
+.process-group-header .group-icon {
+  display: none;
+}
+
+/* Group title - prominent display */
+.process-group-header .group-title {
+  flex: 0 1 auto;
+  font-size: var(--font-size-smaller);
+  font-weight: 500;
+  color: var(--color-text);
+  opacity: 0.9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+}
+
+/* Step count badge */
+.process-group-header .step-count {
+  font-size: 0.65rem;
+  color: var(--color-text);
+  opacity: 0.5;
+  flex-shrink: 0;
+  padding: 1px 6px;
+  font-family: var(--font-family-code);
+}
+
+/* ===========================================
+   3-Letter Status Code Badges
+   =========================================== */
+
+/* Base status badge */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  font-family: var(--font-family-code);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+/* Status badge with icon */
+.status-badge .material-symbols-outlined {
+  font-size: 0.8rem;
+  line-height: 1;
+}
+
+/* Badge icon styling */
+.status-badge .badge-icon {
+  font-size: 0.7rem;
+  margin-right: 2px;
+  opacity: 0.9;
+}
+
+/* Status colors - mapped from backend types via store */
+/* Each status defines --step-accent for cascading to internal icons */
+
+/* GEN - agent type (blue/cyan) */
+.status-gen {
+  --step-accent: #38bdf8;
+  color: var(--step-accent);
+}
+
+/* END - response/done type (green) */
+.status-end {
+  --step-accent: #22c55e;
+  color: var(--step-accent);
+}
+
+/* USE - tool usage (amber/yellow) */
+.status-tool {
+  --step-accent: #fbbf24;
+  color: var(--step-accent);
+}
+
+/* MCP - mcp type (amber/yellow) */
+.status-mcp {
+  --step-accent: #fbbf24;
+  color: var(--step-accent);
+}
+
+/* SUB - subagent type (teal) */
+.status-sub {
+  --step-accent: #14b8a6;
+  color: var(--step-accent);
+}
+
+/* EXE - code_exe type (magenta/purple) */
+.status-exe {
+  --step-accent: #ba68c8;
+  color: var(--step-accent);
+}
+
+/* BRW - browser type (indigo) */
+.status-brw {
+  --step-accent: #818cf8;
+  color: var(--step-accent);
+}
+
+/* WAIT - progress type (slate) */
+.status-wait {
+  --step-accent: #94a3b8;
+  color: var(--step-accent);
+}
+
+/* INF - info type (gray) */
+.status-inf {
+  --step-accent: #94a3b8;
+  color: var(--step-accent);
+}
+
+/* HNT - hint type (yellow-green) */
+.status-hnt {
+  --step-accent: #a3e635;
+  color: var(--step-accent);
+}
+
+/* WRN - warning type (orange) */
+.status-wrn {
+  --step-accent: #f97316;
+  color: var(--step-accent);
+}
+
+/* ERR - error type (red) */
+.status-err {
+  --step-accent: #ef4444;
+  color: var(--step-accent);
+}
+
+/* UTL - util type (gray-blue) */
+.status-utl {
+  --step-accent: #64748b;
+  color: var(--step-accent);
+}
+
+/* USR - user type (sky) */
+.status-usr {
+  --step-accent: #38bdf8;
+  color: var(--step-accent);
+}
+
+/* Animated spinner for active status (CSS-only, no Material Icons) */
+.status-badge.status-active::after {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Don't show spinner pseudo-element on END/ERR (they have their own indicators) */
+.status-badge.status-end::after,
+.status-badge.status-err::after {
+  display: none;
+}
+
+/* END status with checkmark icon (icon added via JS, no ::before needed) */
+
+/* Completed process group styling */
+.process-group-completed {
+  opacity: 0.95;
+}
+
+.process-group-completed .group-status {
+  font-weight: 700;
+}
+
+/* Subtle completion indicator on the expand icon */
+.process-group-completed .expand-icon {
+  color: #22c55e;
+}
+
+/* Group status badge in header */
+.process-group-header .group-status {
+  margin-left: var(--spacing-xs);
+}
+
+/* Metrics row */
+.process-group-header .group-metrics {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-left: auto;
+  font-size: 0.65rem;
+  font-family: var(--font-family-code);
+  color: var(--color-text);
+  opacity: 0.8;
+}
+
+.process-group-header .group-metrics .material-symbols-outlined {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+.process-group-header .group-metrics span[class^="metric-"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* Legacy timestamp/duration (for backwards compatibility) */
+.process-group-header .group-timestamp {
+  font-size: 0.65rem;
+  color: rgba(255, 255, 255, 0.65);
+  flex-shrink: 0;
+  font-family: var(--font-family-code);
+  display: none; /* Hidden, replaced by metrics */
+}
+
+.process-group-header .group-duration {
+  font-size: 0.7rem;
+  color: #81c784;
+  flex-shrink: 0;
+  font-family: var(--font-family-code);
+  min-width: 40px;
+  text-align: right;
+  display: none; /* Hidden, replaced by metrics */
+}
+
+/* Process Group Content - Animated expand/collapse */
+.process-group-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 1px solid transparent;
+  transition: grid-template-rows 0.25s ease-out, 
+              opacity 0.2s ease-out,
+              margin-top 0.25s ease-out,
+              padding-top 0.25s ease-out,
+              border-color 0.2s ease-out;
+  overflow: hidden;
+}
+
+.process-group-content > .process-steps {
+  min-height: 0;
+}
+
+.process-group.expanded .process-group-content {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  margin-top: var(--spacing-xs);
+  padding-top: var(--spacing-xs);
+  border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+/* Process Steps List */
+.process-steps {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* Individual Process Step */
+.process-step {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+  transition: background-color 0.15s ease;
+}
+
+.step-expanded {
+  padding: var(--spacing-xs) 0;
+}
+
+/* Utility/Info/Hint steps have subtle background tint */
+.process-step[data-type="util"],
+.process-step[data-type="info"],
+.process-step[data-type="hint"] {
+  background-color: rgba(120, 115, 100, 0);
+}
+
+.process-step[data-type="util"]:hover,
+.process-step[data-type="info"]:hover,
+.process-step[data-type="hint"]:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+
+.light-mode .process-step[data-type="util"]:hover,
+.light-mode .process-step[data-type="info"]:hover,
+.light-mode .process-step[data-type="hint"]:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+/* Step Header (clickable) */
+.process-step-header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  gap: 4px;
+  min-height: 18px;
+}
+
+/* Step icon removed - using status badges instead */
+.process-step-header .step-icon {
+  display: none;
+}
+
+/* Step type label removed - using status badges instead */
+.process-step-header .step-type {
+  display: none;
+}
+
+/* Step title */
+.process-step-header .step-title {
+  flex: 1;
+  font-size: 0.8rem;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: var(--spacing-xs);
+}
+
+/* Step expand icon - CSS triangle (no Material Icons) */
+.process-step-header .step-expand-icon {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 3px 0 3px 5px;
+  border-color: transparent transparent transparent var(--color-text);
+  opacity: 0.4;
+  transition: transform 0.2s ease, opacity 0.15s ease;
+  flex-shrink: 0;
+  font-size: 0; /* Hide any text content */
+  margin-right: 2px;
+}
+
+.process-step-header:hover .step-expand-icon {
+  opacity: 0.7;
+}
+
+/* Use direct child selector to prevent affecting nested steps */
+.process-step.step-expanded > .process-step-header > .step-expand-icon {
+  transform: rotate(90deg);
+}
+
+/* Step Detail Content - Animated expand/collapse */
+.process-step-detail {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out;
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  overscroll-behavior: contain; /* avoid scroll chaining */
+}
+  /* Hide scrollbar for Chrome/Safari/Webkit */
+.process-step-detail::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.process-step-detail-content::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.process-step-detail > .process-step-detail-content {
+  min-height: 0;
+}
+
+/* Use direct child selector (>) to prevent cascading to nested steps */
+.process-step.step-expanded > .process-step-detail {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  overflow: visible;
+  margin-top: var(--spacing-xs);
+}
+
+.process-step-detail-content {
+  padding: var(--spacing-xs) 0;
+  margin-top: var(--spacing-xxs);
+  margin-left: 28px; /* Align with icon */
+  background-color: transparent;
+  font-size: 0.7rem;
+  line-height: 1.5;
+  max-height: 300px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  overscroll-behavior: contain; /* avoid scroll chaining */
+}
+
+.process-step-detail-content pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-family-code);
+  font-size: 0.7rem;
+  color: var(--color-text);
+  opacity: 0.8;
+}
+
+/* KVPs in step detail - CSS Grid for aligned columns */
+.process-step-detail-content .step-kvps {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--spacing-xs) var(--spacing-sm);
+  align-items: start;
+}
+
+.process-step-detail-content .step-kvp {
+  display: contents; /* Children participate in parent grid */
+}
+
+.process-step-detail-content .step-kvp-key {
+  color: var(--step-accent, var(--color-primary));
+  font-weight: 500;
+  opacity: 0.8;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+
+.process-step-detail-content .step-kvp-key .material-symbols-outlined {
+  font-size: 0.9rem;
+  color: var(--step-accent, var(--color-primary)) !important;
+}
+
+.process-step-detail-content .step-kvp-value {
+  color: var(--color-text);
+  opacity: 0.85;
+  word-break: break-word;
+  white-space: pre-wrap;
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+/* Thoughts styling - single icon with plain text */
+.process-step-detail-content .step-thoughts {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  margin: var(--spacing-xs) 0;
+}
+
+.process-step-detail-content .thought-icon {
+  font-size: 0.85rem;
+  color: var(--step-accent, #38bdf8);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.process-step-detail-content .thought-text {
+  font-size: 0.7rem;
+  font-weight: 300;
+  color: var(--color-text);
+  opacity: 0.65;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Light mode thoughts - uses step accent if available */
+.light-mode .process-step-detail-content .thought-icon {
+  color: var(--step-accent, #b45309);
+}
+
+/* Tool arguments - CSS Grid for aligned columns */
+.process-step-detail-content .step-tool-args {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 8px;
+  margin: var(--spacing-xs) 0;
+  align-items: baseline;
+}
+
+.process-step-detail-content .tool-arg-row {
+  display: contents; /* Children participate in parent grid */
+}
+
+.process-step-detail-content .tool-arg-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--step-accent, var(--color-primary));
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+
+.process-step-detail-content .tool-arg-label .material-symbols-outlined {
+  font-size: 0.9rem;
+  opacity: 0.85;
+  color: var(--step-accent, var(--color-primary));
+}
+
+.process-step-detail-content .tool-arg-value {
+  font-size: 0.7rem;
+  color: var(--color-text);
+  opacity: 0.85;
+  word-break: break-word;
+  font-family: var(--font-family-code);
+}
+
+/* Light mode tool args - transparent like dark mode */
+.light-mode .process-step-detail-content .step-tool-args {
+  background: transparent;
+  border-left-color: transparent;
+}
+
+.process-step-detail-content .step-tool-header .tool-icon {
+  font-size: 0.85rem;
+  color: var(--step-accent, var(--color-warning));
+  opacity: 0.85;
+}
+
+.process-step-detail-content .step-tool-header .tool-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--step-accent, var(--color-warning));
+  opacity: 0.85;
+}
+
+.process-step-detail-content .step-tool-header .tool-name {
+  font-size: 0.72rem;
+  color: var(--color-text);
+  opacity: 0.85;
+}
+
+/* Terminal-style output for code_exe */
+.process-step-detail-content .step-terminal {
+  margin: var(--spacing-xs) 0;
+  font-family: var(--font-family-code);
+  font-size: 0.72rem;
+}
+
+.process-step-detail-content .terminal-output {
+  margin: var(--spacing-xs) 0 0 0;
+  padding: var(--spacing-xs);
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  color: #c9d1d9;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 200px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  overscroll-behavior: contain; /* avoid scroll chaining */
+}
+
+.process-step-detail-content .terminal-output::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* Light mode terminal */
+.light-mode .process-step-detail-content .terminal-output {
+  background: rgba(0, 0, 0, 0.05);
+  color: #24292f;
+}
+
+/* Light mode adjustments */
+.light-mode .process-group.expanded .process-group-content {
+  border-top-color: rgba(0, 0, 0, 0.06);
+}
+
+.light-mode .process-step-detail-content {
+  background-color: transparent;
+}
+
+/* Light mode text colors for process group */
+.light-mode .process-group-header .group-title,
+.light-mode .process-step-header .step-title {
+  color: var(--color-text);
+}
+
+/* Light mode status badge adjustments for better contrast */
+/* Override --step-accent for cascading to internal icons */
+.light-mode .status-gen {
+  --step-accent: #0284c7;
+  color: var(--step-accent);
+}
+
+.light-mode .status-end {
+  --step-accent: #15803d;
+  color: var(--step-accent);
+}
+
+.light-mode .status-tool {
+  --step-accent: #b45309;
+  color: var(--step-accent);
+}
+
+.light-mode .status-mcp {
+  --step-accent: #b45309;
+  color: var(--step-accent);
+}
+
+.light-mode .status-sub {
+  --step-accent: #0f766e;
+  color: var(--step-accent);
+}
+
+.light-mode .status-exe {
+  --step-accent: #7c3aed;
+  color: var(--step-accent);
+}
+
+.light-mode .status-brw {
+  --step-accent: #4f46e5;
+  color: var(--step-accent);
+}
+
+.light-mode .status-wait {
+  --step-accent: #475569;
+  color: var(--step-accent);
+}
+
+.light-mode .status-inf {
+  --step-accent: #475569;
+  color: var(--step-accent);
+}
+
+.light-mode .status-hnt {
+  --step-accent: #65a30d;
+  color: var(--step-accent);
+}
+
+.light-mode .status-wrn {
+  --step-accent: #c2410c;
+  color: var(--step-accent);
+}
+
+.light-mode .status-err {
+  --step-accent: #b91c1c;
+  color: var(--step-accent);
+}
+
+.light-mode .status-utl {
+  --step-accent: #334155;
+  color: var(--step-accent);
+}
+
+.light-mode .status-usr {
+  --step-accent: #0284c7;
+  color: var(--step-accent);
+}
+
+/* Animation for loading state */
+@keyframes pulse-step {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.8; }
+}
+
+.process-step.loading .step-icon {
+  animation: pulse-step 1.2s ease-in-out infinite;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .process-group {
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+  
+  .process-step-header .step-type {
+    display: none;
+  }
+  
+  .process-step-header .step-title {
+    font-size: 0.7rem;
+  }
+  
+  .process-step-detail-content {
+    margin-left: 16px;
+  }
+}
+
+/* ===========================================
+   Preferences Visibility Controls
+   These rules work with preferences-store toggles
+   =========================================== */
+
+/* Utility steps - default hidden (controlled by showUtils) */
+.process-step.message-util {
+  display: none;
+}
+
+.process-step.message-util.show-util {
+  display: flex;
+}
+
+/* Thoughts KVP row */
+.step-kvp.msg-thoughts {
+  display: none;
+}
+
+/* JSON pre content - default hidden */
+.process-step-detail-content pre.msg-json {
+  display: none;
+}
+
+/* Nested Process Steps (Subordinate Agents) */
+
+.process-nested-container {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  overflow: hidden;
+  transition: grid-template-rows 0.25s ease-out, opacity 0.2s ease-out;
+  gap: 2px;
+}
+
+/* Only show nested container when parent step is expanded */
+.process-step.step-expanded > .process-nested-container {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  margin-top: 2px;
+  /* Keep overflow hidden to allow nested steps to control their own expansion */
+}
+
+/* Inner wrapper to handle grid transition content */
+.process-nested-inner {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* All nested containers have same indentation (no cascading) */
+.nested-step .process-nested-container {
+  margin-left: 0;
+}
+
+/* Response content in process steps */
+.process-step-detail-content .step-response-content {
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--color-text);
+  opacity: 0.9;
+  margin: var(--spacing-xs) 0;
+}
+
+.process-step-detail-content .step-response-content p {
+  margin: 0.5em 0;
+}
+
+.process-step-detail-content .step-response-content ul,
+.process-step-detail-content .step-response-content ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+/* Warning/error content in process steps */
+.process-step-detail-content .step-warning-content {
+  font-size: 0.72rem;
+  line-height: 1.5;
+  color: var(--color-warning);
+  opacity: 0.9;
+  margin: var(--spacing-xs) 0;
+  padding: var(--spacing-xs);
+  background: rgba(255, 165, 0, 0.08);
+  border-left: 2px solid var(--color-warning);
+  border-radius: 3px;
+}
+
+/* Browser screenshot content in process steps */
+.process-step-detail-content .screenshot-img {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  object-fit: contain;
+}
+
+.process-step-detail-content .screenshot-img:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Light mode screenshot border */
+.light-mode .process-step-detail-content .screenshot-img {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.light-mode .process-step-detail-content .screenshot-img:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
diff --git a/webui/components/sidebar/bottom/preferences/preferences-panel.html b/webui/components/sidebar/bottom/preferences/preferences-panel.html
index 516585f76d..a03bcf9832 100644
--- a/webui/components/sidebar/bottom/preferences/preferences-panel.html
+++ b/webui/components/sidebar/bottom/preferences/preferences-panel.html
@@ -41,20 +41,6 @@
                 <span class="slider"></span>
               </label>
             </li>
-            <li x-data>
-              <span>Show thoughts</span>
-              <label class="switch">
-                <input type="checkbox" x-model="$store.preferences.showThoughts">
-                <span class="slider"></span>
-              </label>
-            </li>
-            <li x-data>
-              <span>Show JSON</span>
-              <label class="switch">
-                <input type="checkbox" x-model="$store.preferences.showJson">
-                <span class="slider"></span>
-              </label>
-            </li>
             <li x-data>
               <span>Show utility messages</span>
               <label class="switch">
diff --git a/webui/components/sidebar/bottom/preferences/preferences-store.js b/webui/components/sidebar/bottom/preferences/preferences-store.js
index c34e3980d0..e75e43e16d 100644
--- a/webui/components/sidebar/bottom/preferences/preferences-store.js
+++ b/webui/components/sidebar/bottom/preferences/preferences-store.js
@@ -32,24 +32,6 @@ const model = {
   },
   _speech: false,
 
-  get showThoughts() {
-    return this._showThoughts;
-  },
-  set showThoughts(value) {
-    this._showThoughts = value;
-    this._applyShowThoughts(value);
-  },
-  _showThoughts: true,
-
-  get showJson() {
-    return this._showJson;
-  },
-  set showJson(value) {
-    this._showJson = value;
-    this._applyShowJson(value);
-  },
-  _showJson: false,
-
   get showUtils() {
     return this._showUtils;
   },
@@ -59,6 +41,16 @@ const model = {
   },
   _showUtils: false,
 
+  // Process group collapse preference
+  get collapseProcessGroups() {
+    return this._collapseProcessGroups;
+  },
+  set collapseProcessGroups(value) {
+    this._collapseProcessGroups = value;
+    this._applyCollapseProcessGroups(value);
+  },
+  _collapseProcessGroups: true, // Default to collapsed
+
   // Initialize preferences and apply current state
   init() {
     try {
@@ -77,13 +69,20 @@ const model = {
         this._speech = false; // Default to speech off if localStorage is unavailable
       }
 
+      // Load collapse process groups preference
+      try {
+        const storedCollapse = localStorage.getItem("collapseProcessGroups");
+        this._collapseProcessGroups = storedCollapse !== "false"; // Default true
+      } catch {
+        this._collapseProcessGroups = true;
+      }
+
       // Apply all preferences
       this._applyDarkMode(this._darkMode);
       this._applyAutoScroll(this._autoScroll);
       this._applySpeech(this._speech);
-      this._applyShowThoughts(this._showThoughts);
-      this._applyShowJson(this._showJson);
       this._applyShowUtils(this._showUtils);
+      this._applyCollapseProcessGroups(this._collapseProcessGroups);
     } catch (e) {
       console.error("Failed to initialize preferences store", e);
     }
@@ -109,24 +108,31 @@ const model = {
     if (!value) speechStore.stopAudio();
   },
 
-  _applyShowThoughts(value) {
-    css.toggleCssProperty(
-      ".msg-thoughts",
-      "display",
-      value ? undefined : "none"
-    );
-  },
-
-  _applyShowJson(value) {
-    css.toggleCssProperty(".msg-json", "display", value ? "block" : "none");
-  },
 
   _applyShowUtils(value) {
+    // For original messages
     css.toggleCssProperty(
       ".message-util",
       "display",
       value ? undefined : "none"
     );
+    // For process steps - toggle class on all existing elements
+    document.querySelectorAll(".process-step.message-util").forEach((el) => {
+      el.classList.toggle("show-util", value);
+    });
+  },
+
+  _applyCollapseProcessGroups(value) {
+    localStorage.setItem("collapseProcessGroups", value);
+    // Update process group store default
+    try {
+      const processGroupStore = window.Alpine?.store("processGroup");
+      if (processGroupStore) {
+        processGroupStore.defaultCollapsed = value;
+      }
+    } catch (e) {
+      // Store may not be initialized yet
+    }
   },
 };
 
diff --git a/webui/components/sidebar/left-sidebar.html b/webui/components/sidebar/left-sidebar.html
index 38290e0c42..f4d555d1df 100644
--- a/webui/components/sidebar/left-sidebar.html
+++ b/webui/components/sidebar/left-sidebar.html
@@ -168,6 +168,10 @@
       cursor: pointer;
     }
 
+    .light-mode #left-panel {
+      box-shadow: 1px 0 10px rgba(0, 0, 0, 0.1);
+    }
+
     @media (max-width: 768px) {
       #left-panel {
         position: fixed;
diff --git a/webui/css/messages.css b/webui/css/messages.css
index 2ee0dd3e6c..ae80e611c5 100644
--- a/webui/css/messages.css
+++ b/webui/css/messages.css
@@ -9,7 +9,7 @@
   overflow-y: scroll;
   overflow-x: hidden;
   scroll-behavior: auto !important; /* avoid infinite scrolling! */
-  padding: var(--spacing-md) var(--spacing-sm) 0;
+  padding: var(--spacing-md) 10em 0 !important;  
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
   scrollbar-width: thin;
@@ -49,13 +49,11 @@
 /* Message Styles */
 
 .user-container {
-  align-self: flex-end;
-  /* margin: var(--spacing-sm) var(--spacing-md); */
-  /* margin-bottom: var(--spacing-lg); */
-  /* margin-top: var(--spacing-sm); */
   display: flex;
   justify-content: flex-end;
+  position: relative;
   width: 100%;
+  padding-left: 5%;
 }
 
 .ai-container {
@@ -78,10 +76,8 @@
 }
 
 .message-user {
-  background-color: #4a4a4a;
-  /* border-bottom-right-radius: var(--spacing-xxs); */
-  /* min-width: 195px; */
   text-align: end;
+  margin-bottom: var(--spacing-md);
 }
 
 .message-user > div {
@@ -99,6 +95,13 @@
 
 .message-user .message-text pre {
   font-family: var(--font-family-main);
+  font-weight: 500;
+  font-size: medium;
+  color: azure;
+}
+
+.light-mode .message-user .message-text pre {
+  color: #2e2e2e;
 }
 
 .message-ai {
@@ -116,7 +119,7 @@
 }
 
 .message-followup .message {
-  border-radius: 1.125em; /* 18px */
+  border-radius: 0;
   /* border-top-left-radius: var(--spacing-xxs); */
 }
 
@@ -134,34 +137,111 @@
 .message-browser,
 .message-info,
 .message-util,
-.message-warning,
-.message-error {
+.message-warning {
   color: #e0e0e0;
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .message-default {
-  background-color: #1a242f;
+  background-color: transparent;
 }
 
 .message-agent {
-  background-color: #34506b;
+  background-color: transparent;
 }
 
 .message-agent-response {
   min-width: 255px;
-  background-color: #1f3c1e;
+  background-color: transparent;
+  opacity: 0.85;
 }
 
 .message-agent-delegation {
-  background-color: #12685e;
+  background-color: transparent;
 }
 
 .message-tool {
-  background-color: #2a4170;
+  background-color: transparent;
 }
 
 .message-code-exe {
-  background-color: #4b3a69;
+  background-color: transparent;
+}
+
+/* Terminal-style code execution block */
+.message-code-exe .message-body {
+  background: #0d1117;
+  border: 1px solid rgba(48, 54, 61, 0.8);
+  border-radius: 6px;
+  padding: 0;
+  margin-top: 0.5em;
+  overflow: hidden;
+}
+
+.message-code-exe .msg-heading {
+  background: linear-gradient(180deg, #21262d 0%, #161b22 100%);
+  padding: 6px 12px;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.8);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.message-code-exe .msg-heading h4 {
+  font-family: var(--font-family-code);
+  font-size: 0.75rem;
+  color: #8b949e;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.message-code-exe .msg-heading h4::before {
+  content: "$";
+  color: #7ee787;
+  font-weight: 600;
+}
+
+.message-code-exe .msg-content {
+  padding: 12px;
+  font-family: var(--font-family-code);
+  font-size: 0.72rem;
+  color: #c9d1d9;
+  line-height: 1.5;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.message-code-exe .msg-content pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Light mode terminal */
+.light-mode .message-code-exe .message-body {
+  background: #f6f8fa;
+  border-color: #d0d7de;
+}
+
+.light-mode .message-code-exe .msg-heading {
+  background: linear-gradient(180deg, #f6f8fa 0%, #eaeef2 100%);
+  border-bottom-color: #d0d7de;
+}
+
+.light-mode .message-code-exe .msg-heading h4 {
+  color: #57606a;
+}
+
+.light-mode .message-code-exe .msg-heading h4::before {
+  color: #1a7f37;
+}
+
+.light-mode .message-code-exe .msg-content {
+  color: #24292f;
 }
 
 .message-body .message-markdown-table-wrap {
@@ -181,40 +261,33 @@
   white-space: break-spaces;
 }
 
-.light-mode .message-code-exe .message-body {
-  border: 1px solid var(--color-border);
-}
+/* Light mode code-exe styling moved to main terminal block above */
 
 .message-browser {
-  background-color: #4b3a69;
+  background-color: transparent;
 }
 
 .message-info {
-  background-color: var(--color-panel);
+  background-color: transparent;
 }
 
 .message-util {
-  background-color: #23211a;
+  background-color: transparent;
   display: none;
 }
 
 .message-warning {
-  background-color: #bc8036;
+  background-color: transparent;
 }
 
 .message-error {
-  background-color: #af2222;
+  background-color: rgba(180, 40, 40, 0.25);
+  border: 1px solid rgba(220, 60, 60, 0.5);
+  border-radius: 8px !important;
+  padding: 12px !important;
 }
 
-.message-code-exe .message-body {
-  min-height: 5em;
-  width: 100%;
-  background-color: var(--color-panel);
-  border-radius: 0.5em;
-  margin-top: 0.5em;
-  padding: 0.3em;
-  font-family: var(--font-family-code);
-}
+/* Terminal styling moved to new terminal block above */
 
 /* Agent and AI Info */
 .agent-start {
@@ -254,7 +327,7 @@
 }
 
 .msg-kvps tr {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  border-bottom: none;
 }
 
 .msg-heading {
@@ -369,6 +442,12 @@
 }
 
 /* Media Queries */
+@media (max-width: 1024px) {
+  #chat-history {
+    padding: var(--spacing-md) var(--spacing-sm) 0 !important;
+  }
+}
+
 @media (max-width: 640px) {
   /* New styles for mobile messages */
 
@@ -415,66 +494,16 @@
 }
 
 .light-mode .msg-kvps tr {
-  border-bottom: 1px solid rgb(192 192 192 / 50%);
-}
-
-.light-mode .message-default {
-  background-color: var(--color-panel);
-  color: #1a242f;
-}
-
-.light-mode .message-agent {
-  background-color: var(--color-panel);
-  color: #356ca3;
-}
-
-.light-mode .message-agent-response {
-  background-color: var(--color-panel);
-  color: #188216;
-}
-
-.light-mode .message-agent-delegation {
-  background-color: var(--color-panel);
-  color: #12685e;
-}
-
-.light-mode .message-tool {
-  background-color: var(--color-panel);
-  color: #1c3c88;
-}
-
-.light-mode .message-code-exe {
-  background-color: var(--color-panel);
-  color: #6c43b0;
-}
-
-.light-mode .message-browser {
-  background-color: var(--color-panel);
-  color: #6c43b0;
-}
-
-.light-mode .message-info {
-  background-color: var(--color-panel);
-  color: #3f3f3f;
-}
-
-.light-mode .message-util {
-  background-color: var(--color-panel);
-  color: #5b5540;
-}
-
-.light-mode .message-warning {
-  background-color: var(--color-panel);
-  color: #8f4800;
+  border-bottom: none;
 }
 
 .light-mode .message-error {
-  background-color: var(--color-panel);
+  background-color: rgba(220, 60, 60, 0.15);
+  border: 1px solid rgba(180, 40, 40, 0.4);
   color: #8f1010;
 }
 
 .light-mode .message-user {
-  background-color: var(--color-panel);
   color: #4e4e4e;
 }
 
@@ -583,10 +612,9 @@
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   display: inline-grid;
-  grid-template-columns: minmax(0, max-content);
+  grid-template-columns: minmax(0, 100%);
   grid-auto-rows: auto;
   max-width: 100%;
-  width: fit-content;
   gap: var(--spacing-xs);
 }
 
@@ -603,23 +631,6 @@
   margin-left: 2em;
 }
 
-/* 1. FIRST child’s .message – clear ONLY bottom corners          */
-.message-group > *:first-child:not(:last-child) > .message {
-  border-bottom-left-radius: var(--spacing-xxs);
-  border-bottom-right-radius: var(--spacing-xxs);
-}
-
-/* 2. MIDDLE children’s .message – clear ALL corners              */
-.message-group > *:not(:first-child):not(:last-child) > .message {
-  border-radius: var(--spacing-xxs);
-}
-
-/* 3. LAST child’s .message – clear ONLY top corners              */
-.message-group > *:last-child:not(:first-child) > .message {
-  border-top-left-radius: var(--spacing-xxs);
-  border-top-right-radius: var(--spacing-xxs);
-}
-
 .message-container {
   animation: fadeIn 0.5s;
   -webkit-animation: fadeIn 0.5s;
@@ -630,7 +641,7 @@
 
 .message {
   /* background-color: var(--color-message-bg); */
-  border-radius: var(--border-radius);
+  border-radius: 0;
   padding: 0.9rem var(--spacing-sm) 0.7rem var(--spacing-sm);
   overflow-x: auto;
   width: auto;
@@ -639,10 +650,10 @@
   /* display: block; */
   word-break: break-word;
   overflow-wrap: anywhere;
+  box-shadow: none;
 }
 
 /* shades */
 .dark-mode .message {
-  box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.3),
-    inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1);
+  box-shadow: none;
 }
diff --git a/webui/index.css b/webui/index.css
index 341954dce9..d20745f70d 100644
--- a/webui/index.css
+++ b/webui/index.css
@@ -23,7 +23,7 @@
   --color-input-focus-dark: #101010;
 
   /* Light mode */
-  --color-background-light: #dbdbdb;
+  --color-background-light: #f6f6f6;
   --color-text-light: #333333;
   --color-primary-light: #384653;
   --color-secondary-light: #e8eaf6;
@@ -126,7 +126,7 @@ body,
 .switch-label {
   -webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-  color: var(--color-text);
+  color: var(--color-text) !important;
 }
 
 img {
@@ -196,14 +196,16 @@ div#right-panel::-webkit-scrollbar-thumb:hover {
 
 #time-date {
   color: var(--color-text);
-  font-size: var(--font-size-normal);
   text-align: right;
-  line-height: 1.1;
+  line-height: 1.2;
 }
 
 #user-date {
-  font-size: var(--font-size-small);
-  opacity: 0.6;
+  font-size: 0.7rem;
+  opacity: 0.5;
+  font-weight: 400;
+  display: block;
+  margin-top: 2px;
 }
 
 /* Typography */
@@ -1297,47 +1299,35 @@ nav ul li a img {
 }
 
 .scheduler-status-idle {
-  background-color: rgba(0, 100, 0, 0.2);
   color: #2a9d8f; /* Dark green that works with both light and dark themes */
-  border: 1px solid rgba(42, 157, 143, 0.3);
 }
 
 .scheduler-status-running {
-  background-color: rgba(0, 60, 120, 0.2);
   color: #4361ee; /* Dark blue that works with both light and dark themes */
-  border: 1px solid rgba(67, 97, 238, 0.3);
 }
 
 .scheduler-status-disabled {
-  background-color: rgba(70, 70, 70, 0.2);
   color: #6c757d; /* Dark grey that works with both light and dark themes */
-  border: 1px solid rgba(108, 117, 125, 0.3);
 }
 
 .scheduler-status-error {
-  background-color: rgba(120, 0, 0, 0.2);
   color: #e63946; /* Dark red that works with both light and dark themes */
-  border: 1px solid rgba(230, 57, 70, 0.3);
 }
 
 /* Light mode adjustments */
 .light-mode .scheduler-status-idle {
-  background-color: rgba(42, 157, 143, 0.1);
   color: #1a6f65; /* Darker green for light mode */
 }
 
 .light-mode .scheduler-status-running {
-  background-color: rgba(67, 97, 238, 0.1);
   color: #2540b3; /* Darker blue for light mode */
 }
 
 .light-mode .scheduler-status-disabled {
-  background-color: rgba(108, 117, 125, 0.1);
   color: #495057; /* Darker grey for light mode */
 }
 
 .light-mode .scheduler-status-error {
-  background-color: rgba(230, 57, 70, 0.1);
   color: #c5283d; /* Darker red for light mode */
 }
 
diff --git a/webui/index.html b/webui/index.html
index 82abf4b591..75ee3a5c49 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="css/messages.css">
     <link rel="stylesheet" href="components/messages/action-buttons/simple-action-buttons.css">
+    <link rel="stylesheet" href="components/messages/process-group/process-group.css">
     <link rel="stylesheet" href="css/toast.css">
     <link rel="stylesheet" href="css/settings.css">
     <link rel="stylesheet" href="css/modals.css">
diff --git a/webui/index.js b/webui/index.js
index d7db5fc6af..e6b62735cf 100644
--- a/webui/index.js
+++ b/webui/index.js
@@ -184,8 +184,8 @@ async function updateUserTime() {
 updateUserTime();
 setInterval(updateUserTime, 1000);
 
-function setMessage(id, type, heading, content, temp, kvps = null) {
-  const result = msgs.setMessage(id, type, heading, content, temp, kvps);
+function setMessage(id, type, heading, content, temp, kvps = null, timestamp = null, durationMs = null, /* tokensIn = 0, tokensOut = 0, */ agentNumber = 0) {
+  const result = msgs.setMessage(id, type, heading, content, temp, kvps, timestamp, durationMs, /* tokensIn, tokensOut, */ agentNumber);
   const chatHistoryEl = document.getElementById("chat-history");
   if (preferencesStore.autoScroll && chatHistoryEl) {
     chatHistoryEl.scrollTop = chatHistoryEl.scrollHeight;
@@ -292,6 +292,7 @@ export async function poll() {
     if (lastLogGuid != response.log_guid) {
       const chatHistoryEl = document.getElementById("chat-history");
       if (chatHistoryEl) chatHistoryEl.innerHTML = "";
+      msgs.resetProcessGroups(); // Reset process groups on chat reset
       lastLogVersion = 0;
       lastLogGuid = response.log_guid;
       await poll();
@@ -308,7 +309,12 @@ export async function poll() {
           log.heading,
           log.content,
           log.temp,
-          log.kvps
+          log.kvps,
+          log.timestamp,
+          log.duration_ms,
+          // log.tokens_in,
+          // log.tokens_out,
+          log.agent_number || 0  // Agent number for identifying main/subordinate agents
         );
       }
       afterMessagesUpdate(response.logs);
@@ -482,6 +488,9 @@ export const setContext = function (id) {
   // Stop speech when switching chats
   speechStore.stopAudio();
 
+  // Reset process groups for new context
+  msgs.resetProcessGroups();
+
   // Clear the chat history immediately to avoid showing stale content
   const chatHistoryEl = document.getElementById("chat-history");
   if (chatHistoryEl) chatHistoryEl.innerHTML = "";
diff --git a/webui/js/messages.js b/webui/js/messages.js
index 70c46bf098..7e34dc73c0 100644
--- a/webui/js/messages.js
+++ b/webui/js/messages.js
@@ -4,22 +4,133 @@ import { marked } from "../vendor/marked/marked.esm.js";
 import { store as _messageResizeStore } from "/components/messages/resize/message-resize-store.js"; // keep here, required in html
 import { store as attachmentsStore } from "/components/chat/attachments/attachmentsStore.js";
 import { addActionButtonsToElement } from "/components/messages/action-buttons/simple-action-buttons.js";
+import { store as processGroupStore } from "/components/messages/process-group/process-group-store.js";
+import { store as preferencesStore } from "/components/sidebar/bottom/preferences/preferences-store.js";
+import { formatDuration } from "./time-utils.js";
 
 const chatHistory = document.getElementById("chat-history");
 
 let messageGroup = null;
+let currentProcessGroup = null; // Track current process group for collapsible UI
+let currentDelegationSteps = {}; // Track delegation steps by agent number for nesting
+
+/**
+ * Resolve tool name from kvps, existing attribute, or previous siblings
+ * For 'tool' type steps, inherits from preceding step if not directly available
+ */
+function resolveToolName(type, kvps, stepElement) {
+  // Direct from kvps
+  if (kvps?.tool_name) return kvps.tool_name;
+  
+  // Keep existing if present (for non-tool types during updates)
+  if (type !== 'tool' && stepElement?.hasAttribute('data-tool-name')) {
+    return stepElement.getAttribute('data-tool-name');
+  }
+  
+  // Inherit from previous sibling (for tool steps)
+  if (type === 'tool' && stepElement) {
+    let prev = stepElement.previousElementSibling;
+    while (prev) {
+      if (prev.hasAttribute('data-tool-name')) {
+        return prev.getAttribute('data-tool-name');
+      }
+      prev = prev.previousElementSibling;
+    }
+  }
+  
+  return null;
+}
 
-// Simplified implementation - no complex interactions needed
+/**
+ * Update status badge text content
+ */
+function updateBadgeText(badge, newCode) {
+  if (!badge) return;
+  badge.textContent = newCode;
+}
+
+// Process types that should be grouped into collapsible sections
+const PROCESS_TYPES = ['agent', 'tool', 'code_exe', 'browser', 'progress', 'info', 'hint', 'util', 'warning'];
+// Main types that should always be visible (not collapsed)
+const MAIN_TYPES = ['user', 'response', 'error', 'rate_limit'];
 
-export function setMessage(id, type, heading, content, temp, kvps = null) {
+export function setMessage(id, type, heading, content, temp, kvps = null, timestamp = null, durationMs = null, agentNumber = 0) {
+  // Check if this is a process type message
+  const isProcessType = PROCESS_TYPES.includes(type);
+  const isMainType = MAIN_TYPES.includes(type);
+  
   // Search for the existing message container by id
   let messageContainer = document.getElementById(`message-${id}`);
+  let processStepElement = document.getElementById(`process-step-${id}`);
   let isNewMessage = false;
 
-  if (messageContainer) {
-    // Don't clear innerHTML - we'll do incremental updates
-    // messageContainer.innerHTML = "";
-  } else {
+  // For user messages, close current process group FIRST (start fresh for next interaction)
+  if (type === "user") {
+    currentProcessGroup = null;
+    currentDelegationSteps = {}; // Clear delegation tracking
+  }
+
+  // For process types, check if we should add to process group
+  if (isProcessType) {
+    if (processStepElement) {
+      // Update existing process step
+      updateProcessStep(processStepElement, id, type, heading, content, kvps, durationMs, agentNumber);
+      return processStepElement;
+    }
+    
+    // Create or get process group for current interaction
+    if (!currentProcessGroup || !document.getElementById(currentProcessGroup.id)) {
+      currentProcessGroup = createProcessGroup(id);
+      chatHistory.appendChild(currentProcessGroup);
+    }
+    
+    // Add step to current process group
+    processStepElement = addProcessStep(currentProcessGroup, id, type, heading, content, kvps, timestamp, durationMs, agentNumber);
+    return processStepElement;
+  }
+
+  // For subordinate agent responses (A1, A2, ...), treat as a process step instead of main response
+  // agentNumber: 0 = main agent, 1+ = subordinate agents
+  // Note: subordinate "response" is a completion marker with content
+  if (type === "response" && agentNumber !== 0) {
+    if (processStepElement) {
+      updateProcessStep(processStepElement, id, "response", heading, content, kvps, durationMs, agentNumber);
+      return processStepElement;
+    }
+    
+    // Create or get process group for current interaction
+    if (!currentProcessGroup || !document.getElementById(currentProcessGroup.id)) {
+      currentProcessGroup = createProcessGroup(id);
+      chatHistory.appendChild(currentProcessGroup);
+    }
+    
+    // Add subordinate response as a response step (special type to show content)
+    processStepElement = addProcessStep(currentProcessGroup, id, "response", heading, content, kvps, timestamp, durationMs, agentNumber);
+    return processStepElement;
+  }
+
+  // For main agent (A0) response, embed the current process group and mark as complete
+  if (type === "response" && currentProcessGroup) {
+    const processGroupToEmbed = currentProcessGroup;
+    // Keep currentProcessGroup reference - subsequent process messages go to same group
+    
+    // Mark process group as complete (END state)
+    markProcessGroupComplete(processGroupToEmbed, heading);
+    
+    if (!messageContainer) {
+      // Create new container with embedded process group
+      messageContainer = createResponseContainerWithProcessGroup(id, processGroupToEmbed);
+      isNewMessage = true;
+    } else {
+      // Check if already embedded
+      const existingEmbedded = messageContainer.querySelector(".process-group");
+      if (!existingEmbedded && processGroupToEmbed) {
+        embedProcessGroup(messageContainer, processGroupToEmbed);
+      }
+    }
+  }
+
+  if (!messageContainer) {
     // Create a new container if not found
     isNewMessage = true;
     const sender = type === "user" ? "user" : "ai";
@@ -46,7 +157,8 @@ export function setMessage(id, type, heading, content, temp, kvps = null) {
     };
     //force new group on these types
     const groupStart = {
-      agent: true,
+      response: true, // response starts a new group
+      user: true, // user message starts a new group (each user message should be separate)
       // anything else is false
     };
 
@@ -134,7 +246,7 @@ export function _drawMessage(
   // Update message classes
   messageDiv.className = `message ${mainClass} ${messageClasses.join(" ")}`;
 
-  // Handle heading
+  // Handle heading (important for error/rate_limit messages that show context)
   if (heading) {
     let headingElement = messageDiv.querySelector(".msg-heading");
     if (!headingElement) {
@@ -150,19 +262,6 @@ export function _drawMessage(
     }
     headingH4.innerHTML = convertIcons(escapeHTML(heading));
 
-    if (resizeBtns) {
-      let minMaxBtn = headingElement.querySelector(".msg-min-max-btns");
-      if (!minMaxBtn) {
-        minMaxBtn = document.createElement("div");
-        minMaxBtn.classList.add("msg-min-max-btns");
-        minMaxBtn.innerHTML = `
-          <a href="#" class="msg-min-max-btn" @click.prevent="$store.messageResize.minimizeMessageClass('${mainClass}', $event)"><span class="material-symbols-outlined" x-text="$store.messageResize.getSetting('${mainClass}').minimized ? 'expand_content' : 'minimize'"></span></a>
-          <a href="#" class="msg-min-max-btn" x-show="!$store.messageResize.getSetting('${mainClass}').minimized" @click.prevent="$store.messageResize.maximizeMessageClass('${mainClass}', $event)"><span class="material-symbols-outlined" x-text="$store.messageResize.getSetting('${mainClass}').maximized ? 'expand' : 'expand_all'"></span></a>
-        `;
-        headingElement.appendChild(minMaxBtn);
-      }
-    }
-  } else {
     // Remove heading if it exists but heading is null
     const existingHeading = messageDiv.querySelector(".msg-heading");
     if (existingHeading) {
@@ -413,14 +512,11 @@ export function drawMessageUser(
     messageDiv.className = "message message-user";
   }
 
-  // Handle heading
+  // Remove heading element if it exists (user messages no longer show label per target design)
   let headingElement = messageDiv.querySelector(".msg-heading");
-  if (!headingElement) {
-    headingElement = document.createElement("h4");
-    headingElement.classList.add("msg-heading");
-    messageDiv.insertBefore(headingElement, messageDiv.firstChild);
+  if (headingElement) {
+    headingElement.remove();
   }
-  headingElement.innerHTML = `${heading} <span class='icon material-symbols-outlined'>person</span>`;
 
   // Handle content
   let textDiv = messageDiv.querySelector(".message-text");
@@ -695,7 +791,9 @@ function drawKvps(container, kvps, latex) {
     for (let [key, value] of Object.entries(kvps)) {
       const row = table.insertRow();
       row.classList.add("kvps-row");
-      if (key === "thoughts" || key === "reasoning")
+      // Skip reasoning
+      if (key === "reasoning") continue;
+      if (key === "thoughts")
         // TODO: find a better way to determine special class assignment
         row.classList.add("msg-thoughts");
 
@@ -773,7 +871,8 @@ function drawKvpsIncremental(container, kvps, latex) {
 
     // Get all current rows for comparison
     let existingRows = table.querySelectorAll(".kvps-row");
-    const kvpEntries = Object.entries(kvps);
+    // Filter out reasoning
+    const kvpEntries = Object.entries(kvps).filter(([key]) => key !== "reasoning");
 
     // Update or create rows as needed
     kvpEntries.forEach(([key, value], index) => {
@@ -787,7 +886,7 @@ function drawKvpsIncremental(container, kvps, latex) {
 
       // Update row classes
       row.className = "kvps-row";
-      if (key === "thoughts" || key === "reasoning") {
+      if (key === "thoughts") {
         row.classList.add("msg-thoughts");
       }
 
@@ -895,6 +994,22 @@ function convertToTitleCase(str) {
     });
 }
 
+/**
+ * Clean text value by removing standalone bracket lines and trimming
+ * Handles both strings and arrays (filters out bracket-only items)
+ */
+function cleanTextValue(value) {
+  if (Array.isArray(value)) {
+    return value
+      .filter(item => item && String(item).trim() && !/^[\[\]]$/.test(String(item).trim()))
+      .join("\n");
+  }
+  if (typeof value === "object" && value !== null) {
+    return JSON.stringify(value, null, 2);
+  }
+  return String(value).replace(/^\s*[\[\]]\s*$/gm, "").trim();
+}
+
 function convertImageTags(content) {
   // Regular expression to match <image> tags and extract base64 content
   const imageTagRegex = /<image>(.*?)<\/image>/g;
@@ -1007,4 +1122,841 @@ class Scroller {
   reApplyScroll() {
     if (this.wasAtBottom) this.element.scrollTop = this.element.scrollHeight;
   }
-}
\ No newline at end of file
+}
+
+// ============================================
+// Process Group Embedding Functions
+// ============================================
+
+/**
+ * Create a response container with an embedded process group
+ */
+function createResponseContainerWithProcessGroup(id, processGroup) {
+  const messageContainer = document.createElement("div");
+  messageContainer.id = `message-${id}`;
+  messageContainer.classList.add("message-container", "ai-container", "has-process-group");
+  
+  // Move process group from chatHistory into the container
+  if (processGroup && processGroup.parentNode) {
+    processGroup.parentNode.removeChild(processGroup);
+  }
+  
+  // Process group will be the first child
+  if (processGroup) {
+    processGroup.classList.add("embedded");
+    messageContainer.appendChild(processGroup);
+  }
+  
+  return messageContainer;
+}
+
+/**
+ * Embed a process group into an existing message container
+ */
+function embedProcessGroup(messageContainer, processGroup) {
+  if (!messageContainer || !processGroup) return;
+  
+  // Remove from current parent
+  if (processGroup.parentNode) {
+    processGroup.parentNode.removeChild(processGroup);
+  }
+  
+  // Add embedded class
+  processGroup.classList.add("embedded");
+  messageContainer.classList.add("has-process-group");
+  
+  // Insert at the beginning of the container
+  const firstChild = messageContainer.firstChild;
+  if (firstChild) {
+    messageContainer.insertBefore(processGroup, firstChild);
+  } else {
+    messageContainer.appendChild(processGroup);
+  }
+}
+
+// ============================================
+// Process Group Functions
+// ============================================
+
+/**
+ * Create a new collapsible process group
+ */
+function createProcessGroup(id) {
+  const groupId = `process-group-${id}`;
+  const group = document.createElement("div");
+  group.id = groupId;
+  group.classList.add("process-group");
+  group.setAttribute("data-group-id", groupId);
+  
+  // Check initial expansion state from store (respects user preference)
+  const initiallyExpanded = processGroupStore.isGroupExpanded(groupId);
+  if (initiallyExpanded) {
+    group.classList.add('expanded');
+  }
+  
+  // Create header
+  const header = document.createElement("div");
+  header.classList.add("process-group-header");
+  header.innerHTML = `
+    <span class="expand-icon"></span>
+    <span class="group-title">Processing...</span>
+    <span class="status-badge status-gen status-active group-status">GEN</span>
+    <span class="group-metrics">
+      <span class="metric-time" title="Start time"><span class="material-symbols-outlined">schedule</span><span class="metric-value">--:--</span></span>
+      <span class="metric-steps" title="Steps"><span class="material-symbols-outlined">list_alt</span><span class="metric-value">0</span></span>
+      <span class="metric-duration" title="Duration"><span class="material-symbols-outlined">timer</span><span class="metric-value">0s</span></span>
+    </span>
+  `;
+  
+  // Add click handler for expansion
+  header.addEventListener("click", (e) => {
+    processGroupStore.toggleGroup(groupId);
+    const newState = processGroupStore.isGroupExpanded(groupId);
+    group.classList.toggle("expanded", newState);
+  });
+  
+  group.appendChild(header);
+  
+  // Create content container
+  const content = document.createElement("div");
+  content.classList.add("process-group-content");
+  
+  // Create steps container
+  const steps = document.createElement("div");
+  steps.classList.add("process-steps");
+  content.appendChild(steps);
+  
+  group.appendChild(content);
+  
+  return group;
+}
+
+/**
+ * Create or get nested container within a parent step
+ */
+function getNestedContainer(parentStep) {
+  let nestedContainer = parentStep.querySelector(".process-nested-container");
+  
+  if (!nestedContainer) {
+    // Create new container
+    nestedContainer = document.createElement("div");
+    nestedContainer.classList.add("process-nested-container");
+    
+    // Create inner wrapper for animation support
+    const innerWrapper = document.createElement("div");
+    innerWrapper.classList.add("process-nested-inner");
+    nestedContainer.appendChild(innerWrapper);
+    
+    parentStep.appendChild(nestedContainer);
+    parentStep.classList.add("has-nested-steps");
+  }
+  
+  // Return the inner wrapper for appending steps
+  const innerWrapper = nestedContainer.querySelector(".process-nested-inner");
+  return innerWrapper || nestedContainer; // Fallback to container if wrapper missing
+}
+
+/**
+ * Add a step to a process group
+ */
+function addProcessStep(group, id, type, heading, content, kvps, timestamp = null, durationMs = null, agentNumber = 0) {
+  const groupId = group.getAttribute("data-group-id");
+  let stepsContainer = group.querySelector(".process-steps");
+  const isGroupCompleted = group.classList.contains("process-group-completed");
+  
+  // Create step element
+  const step = document.createElement("div");
+  step.id = `process-step-${id}`;
+  step.classList.add("process-step");
+  step.setAttribute("data-type", type);
+  step.setAttribute("data-step-id", id);
+  step.setAttribute("data-agent-number", agentNumber);
+  
+  // Resolve tool name (direct, inherited, or null)
+  // For new steps, pass null as stepElement - inheritance uses stepsContainer query
+  let toolNameToUse = kvps?.tool_name;
+  if (type === 'tool' && !toolNameToUse) {
+    const existingSteps = stepsContainer.querySelectorAll('.process-step[data-tool-name]');
+    if (existingSteps.length > 0) {
+      toolNameToUse = existingSteps[existingSteps.length - 1].getAttribute("data-tool-name");
+    }
+  }
+  if (toolNameToUse) {
+    step.setAttribute("data-tool-name", toolNameToUse);
+  }
+  
+  // Store timestamp for duration calculation
+  if (timestamp) {
+    step.setAttribute("data-timestamp", timestamp);
+    
+    // Set group start time from first step
+    if (!group.getAttribute("data-start-timestamp")) {
+      group.setAttribute("data-start-timestamp", timestamp);
+      // Update header with formatted datetime
+      const timestampEl = group.querySelector(".group-timestamp");
+      if (timestampEl) {
+        timestampEl.textContent = formatDateTime(timestamp);
+      }
+    }
+  }
+  
+  // Store duration from backend (used for final duration calculation)
+  if (durationMs != null) {
+    step.setAttribute("data-duration-ms", durationMs);
+  }
+  
+  // Add message-util class for utility/info types (controlled by showUtils preference)
+  if (type === "util" || type === "info" || type === "hint") {
+    step.classList.add("message-util");
+    // Apply current preference state
+    if (preferencesStore.showUtils) {
+      step.classList.add("show-util");
+    }
+  }
+  
+  // Get step info from heading (single source of truth: backend)
+  const title = getStepTitle(heading, kvps, type);
+  
+  // Check if step should be expanded
+  // Warning/error steps auto-expand to show content
+  const isStepExpanded = processGroupStore.isStepExpanded(groupId, id) || 
+                         (type === "warning" || type === "error");
+  if (isStepExpanded) {
+    step.classList.add("step-expanded");
+  }
+  
+  // Create step header
+  const stepHeader = document.createElement("div");
+  stepHeader.classList.add("process-step-header");
+  
+  // Status code and color class from store (maps backend types)
+  const statusCode = processGroupStore.getStepCode(type, toolNameToUse);
+  const statusColorClass = processGroupStore.getStatusColorClass(type, toolNameToUse);
+  
+  // Add status color class to step for cascading --step-accent to internal icons
+  step.classList.add(statusColorClass);
+  
+  const activeClass = isGroupCompleted ? "" : " status-active";
+  stepHeader.innerHTML = `
+    <span class="step-expand-icon"></span>
+    <span class="status-badge ${statusColorClass}${activeClass}">${statusCode}</span>
+    <span class="step-title">${escapeHTML(title)}</span>
+  `;
+  
+  // Add click handler for step expansion
+  stepHeader.addEventListener("click", (e) => {
+    e.stopPropagation();
+    processGroupStore.toggleStep(groupId, id);
+    const newState = processGroupStore.isStepExpanded(groupId, id);
+    // Explicitly add or remove the class based on state
+    if (newState) {
+      step.classList.add("step-expanded");
+    } else {
+      step.classList.remove("step-expanded");
+    }
+  });
+  
+  step.appendChild(stepHeader);
+  
+  // Create step detail container
+  const detail = document.createElement("div");
+  detail.classList.add("process-step-detail");
+  
+  const detailContent = document.createElement("div");
+  detailContent.classList.add("process-step-detail-content");
+  
+  // Add content to detail
+  renderStepDetailContent(detailContent, content, kvps, type);
+  
+  detail.appendChild(detailContent);
+  step.appendChild(detail);
+  
+  // Track delegation steps for nesting
+  if (toolNameToUse === "call_subordinate") {
+    currentDelegationSteps[agentNumber] = step;
+  }
+  
+  // Determine where to append the step (main list or nested in parent)
+  let appendTarget = stepsContainer;
+  
+  // Check if this step belongs to a subordinate agent
+  if (agentNumber > 0 && currentDelegationSteps[agentNumber - 1]) {
+    const parentStep = currentDelegationSteps[agentNumber - 1];
+    appendTarget = getNestedContainer(parentStep);
+    step.classList.add("nested-step");
+    
+    // Auto-expand parent if this nested step is a warning/error
+    if (type === "warning" || type === "error") {
+      parentStep.classList.add("step-expanded");
+    }
+  }
+  
+  // Remove status-active from all previous steps (only the current step is active)
+  const prevSteps = stepsContainer.querySelectorAll(".process-step .status-badge.status-active");
+  prevSteps.forEach(badge => badge.classList.remove("status-active"));
+  
+  appendTarget.appendChild(step);
+  
+  // Update group header
+  updateProcessGroupHeader(group);
+  
+  return step;
+}
+
+/**
+ * Update an existing process step
+ */
+function updateProcessStep(stepElement, id, type, heading, content, kvps, durationMs = null, agentNumber = 0) {
+  // Update title
+  const titleEl = stepElement.querySelector(".step-title");
+  if (titleEl) {
+    const title = getStepTitle(heading, kvps, type);
+    titleEl.textContent = title;
+  }
+  
+  // Update duration from backend
+  if (durationMs != null) {
+    stepElement.setAttribute("data-duration-ms", durationMs);
+  }
+  
+  // Update agent number if provided
+  if (agentNumber !== undefined) {
+    stepElement.setAttribute("data-agent-number", agentNumber);
+  }
+  
+  // Resolve and update tool name + badge
+  const toolNameToUse = resolveToolName(type, kvps, stepElement);
+  if (toolNameToUse) {
+    stepElement.setAttribute("data-tool-name", toolNameToUse);
+    const newCode = processGroupStore.getStepCode(type, toolNameToUse);
+    updateBadgeText(stepElement.querySelector(".status-badge"), newCode);
+  }
+  
+  // Update detail content
+  const detailContent = stepElement.querySelector(".process-step-detail-content");
+  let skipFullRender = false;
+  
+  if (detailContent) {
+    // For browser, update image src incrementally to avoid flashing
+    if (type === "browser" && kvps?.screenshot) {
+      const existingImg = detailContent.querySelector(".screenshot-img");
+      const newSrc = kvps.screenshot.replace("img://", "/image_get?path=");
+      if (existingImg) {
+        // Only update if src actually changed
+        if (!existingImg.src.endsWith(newSrc.split("?path=")[1])) {
+          existingImg.src = newSrc;
+        }
+        // Skip full re-render to avoid flashing, but still update group header
+        skipFullRender = true;
+      }
+    }
+    
+    if (!skipFullRender) {
+      renderStepDetailContent(detailContent, content, kvps, type);
+    }
+  }
+  
+  // Update parent group header
+  const group = stepElement.closest(".process-group");
+  if (group) {
+    updateProcessGroupHeader(group);
+  }
+}
+
+/**
+ * Get a concise title for a process step
+ */
+function getStepTitle(heading, kvps, type) {
+  // Try to get a meaningful title from heading or kvps
+  if (heading && heading.trim()) {
+    return cleanStepTitle(heading, 80);
+  }
+  
+  // For warnings/errors without heading, use content preview as title
+  if ((type === "warning" || type === "error")) {
+    // We'll show full content in detail, so just use type as title
+    return type === "warning" ? "Warning" : "Error";
+  }
+  
+  if (kvps) {
+    // Try common fields for title
+    if (kvps.tool_name) {
+      const headline = kvps.headline ? cleanStepTitle(kvps.headline, 60) : '';
+      return `${kvps.tool_name}${headline ? ': ' + headline : ''}`;
+    }
+    if (kvps.headline) {
+      return cleanStepTitle(kvps.headline, 80);
+    }
+    if (kvps.query) {
+      return truncateText(kvps.query, 80);
+    }
+    if (kvps.thoughts) {
+      return truncateText(String(kvps.thoughts), 80);
+    }
+  }
+  
+  // Fallback: capitalize type (backend is source of truth)
+  return type ? type.charAt(0).toUpperCase() + type.slice(1).replace(/_/g, ' ') : 'Process';
+}
+
+/**
+ * Extract icon name from heading with icon:// prefix
+ * Returns the icon name (e.g., "terminal") or null if no prefix found
+ */
+function extractIconFromHeading(heading) {
+  if (!heading) return null;
+  const match = String(heading).match(/^icon:\/\/([a-zA-Z0-9_]+)/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Clean step title by removing icon:// prefixes and status phrases
+ * Preserves agent markers (A1:, A2:, etc.) so users can see which subordinate agent is executing
+ */
+function cleanStepTitle(text, maxLength) {
+  if (!text) return "";
+  let cleaned = String(text);
+  
+  // Remove icon:// patterns (e.g., "icon://network_intelligence")
+  cleaned = cleaned.replace(/icon:\/\/[a-zA-Z0-9_]+\s*/g, "");
+  
+  // Trim whitespace
+  cleaned = cleaned.trim();
+  
+  return truncateText(cleaned, maxLength);
+}
+
+/**
+ * Render content for step detail panel
+ */
+function renderStepDetailContent(container, content, kvps, type = null) {
+  container.innerHTML = "";
+  
+  // Special handling for response type - show content as markdown (for subordinate responses)
+  if (type === "response" && content && content.trim()) {
+    const responseDiv = document.createElement("div");
+    responseDiv.classList.add("step-response-content");
+    
+    // Parse markdown
+    let processedContent = content;
+    processedContent = convertImageTags(processedContent);
+    processedContent = convertImgFilePaths(processedContent);
+    processedContent = marked.parse(processedContent, { breaks: true });
+    processedContent = convertPathsToLinks(processedContent);
+    processedContent = addBlankTargetsToLinks(processedContent);
+    
+    responseDiv.innerHTML = processedContent;
+    container.appendChild(responseDiv);
+    return;
+  }
+  
+  // Special handling for warning/error types - always show content prominently
+  if ((type === "warning" || type === "error") && content && content.trim()) {
+    const warningDiv = document.createElement("div");
+    warningDiv.classList.add("step-warning-content");
+    warningDiv.textContent = content;
+    container.appendChild(warningDiv);
+    // Don't return - also show kvps if present
+  }
+  
+  // Special handling for code_exe type - render as terminal-style output
+  if (type === "code_exe" && kvps) {
+    const runtime = kvps.runtime || kvps.Runtime || "bash";
+    const code = kvps.code || kvps.Code || "";
+    const output = content || "";
+    
+    if (code || output) {
+      const terminalDiv = document.createElement("div");
+      terminalDiv.classList.add("step-terminal");
+  
+      // Show output if present
+      if (output && output.trim()) {
+        const outputPre = document.createElement("pre");
+        outputPre.classList.add("terminal-output");
+        outputPre.textContent = truncateText(output, 1000);
+        terminalDiv.appendChild(outputPre);
+      }
+      
+      container.appendChild(terminalDiv);
+    }
+    
+    // Still render thoughts if present (but not reasoning - that's native model thinking, not structured output)
+    if (kvps.thoughts || kvps.thinking) {
+      const thoughtKey = kvps.thoughts ? "thoughts" : "thinking";
+      const thoughtValue = kvps[thoughtKey];
+      renderThoughts(container, thoughtValue);
+    }
+    
+    return;
+  }
+  
+  // Add KVPs if present
+  if (kvps && Object.keys(kvps).length > 0) {
+    const kvpsDiv = document.createElement("div");
+    kvpsDiv.classList.add("step-kvps");
+    
+    for (const [key, value] of Object.entries(kvps)) {
+      // Skip internal/display keys
+      if (key === "finished" || key === "attachments") continue;
+      
+      // Skip code_exe specific keys that we handle specially above
+      if (type === "code_exe" && (key.toLowerCase() === "runtime" || key.toLowerCase() === "session" || key.toLowerCase() === "code")) {
+        continue;
+      }
+      
+      const lowerKey = key.toLowerCase();
+      
+      // Skip headline and tool_name - they're shown elsewhere
+      if (lowerKey === "headline" || lowerKey === "tool_name") continue;
+      
+      // Skip query in agent steps - it's shown in the tool call step
+      if (type === "agent" && lowerKey === "query") continue;
+      
+      // Special handling for thoughts - render with single lightbulb icon
+      // Skip reasoning
+      if (lowerKey === "reasoning") continue;
+      if (lowerKey === "thoughts" || lowerKey === "thinking" || lowerKey === "reflection") {
+        renderThoughts(kvpsDiv, value);
+        continue;
+      }
+      
+      // Special handling for tool_args - render only for tool/mcp types (skip for agent)
+      if (lowerKey === "tool_args") {
+        // Skip tool_args for agent steps - it's shown in the tool call step
+        if (type === "agent") continue;
+        
+        if (typeof value !== "object" || value === null) continue;
+        const argsDiv = document.createElement("div");
+        argsDiv.classList.add("step-tool-args");
+        
+        // Icon mapping for common tool arguments
+        const argIcons = {
+          'query': 'search',
+          'url': 'link',
+          'path': 'folder',
+          'file': 'description',
+          'code': 'code',
+          'command': 'terminal',
+          'message': 'chat',
+          'text': 'notes',
+          'content': 'article',
+          'name': 'label',
+          'id': 'tag',
+          'type': 'category',
+          'document': 'description',
+          'documents': 'folder_open',
+          'queries': 'search'
+        };
+        
+        for (const [argKey, argValue] of Object.entries(value)) {
+          const argRow = document.createElement("div");
+          argRow.classList.add("tool-arg-row");
+          
+          const argLabel = document.createElement("span");
+          argLabel.classList.add("tool-arg-label");
+          
+          // Use icon if available, otherwise use text label
+          const lowerArgKey = argKey.toLowerCase();
+          if (argIcons[lowerArgKey]) {
+            argLabel.innerHTML = `<span class="material-symbols-outlined">${argIcons[lowerArgKey]}</span>`;
+          } else {
+            argLabel.textContent = convertToTitleCase(argKey) + ":";
+          }
+          
+          const argVal = document.createElement("span");
+          argVal.classList.add("tool-arg-value");
+          
+          const argText = cleanTextValue(argValue);
+          
+          argVal.textContent = truncateText(argText, 300);
+          
+          argRow.appendChild(argLabel);
+          argRow.appendChild(argVal);
+          argsDiv.appendChild(argRow);
+        }
+        
+        kvpsDiv.appendChild(argsDiv);
+        continue;
+      }
+      
+      const kvpDiv = document.createElement("div");
+      kvpDiv.classList.add("step-kvp");
+      
+      const keySpan = document.createElement("span");
+      keySpan.classList.add("step-kvp-key");
+      
+      // Icon mapping for common kvp keys
+      const kvpIcons = {
+        'query': 'search',
+        'url': 'link',
+        'path': 'folder',
+        'file': 'description',
+        'code': 'code',
+        'command': 'terminal',
+        'message': 'chat',
+        'text': 'notes',
+        'content': 'article',
+        'name': 'label',
+        'id': 'tag',
+        'type': 'category',
+        'runtime': 'memory',
+        'result': 'output',
+        'progress': 'pending',
+        'document': 'description',
+        'documents': 'folder_open',
+        'queries': 'search',
+        'screenshot': 'image'
+      };
+      
+      // lowerKey already defined above
+      if (kvpIcons[lowerKey]) {
+        keySpan.innerHTML = `<span class="material-symbols-outlined">${kvpIcons[lowerKey]}</span>`;
+      } else {
+        keySpan.textContent = convertToTitleCase(key) + ":";
+      }
+      
+      const valueSpan = document.createElement("div");
+      valueSpan.classList.add("step-kvp-value");
+      
+      if (typeof value === "string" && value.startsWith("img://")) {
+        const imgElement = document.createElement("img");
+        imgElement.classList.add("screenshot-img");
+        imgElement.src = value.replace("img://", "/image_get?path=");
+        imgElement.alt = "Image Attachment";
+        imgElement.style.cursor = "pointer";
+        imgElement.style.maxWidth = "100%";
+        imgElement.style.display = "block";
+        imgElement.style.marginTop = "4px";
+        
+        // Add click handler and cursor change
+        imgElement.addEventListener("click", () => {
+          imageViewerStore.open(imgElement.src, { name: "Image Attachment" });
+        });
+        
+        valueSpan.appendChild(imgElement);
+      } else {
+        const valueText = cleanTextValue(value);
+        valueSpan.textContent = truncateText(valueText, 1000);
+      }
+      
+      kvpDiv.appendChild(keySpan);
+      kvpDiv.appendChild(valueSpan);
+      kvpsDiv.appendChild(kvpDiv);
+    }
+    
+    container.appendChild(kvpsDiv);
+  }
+  
+  // Add main content if present (JSON content)
+  if (content && content.trim()) {
+    const pre = document.createElement("pre");
+    pre.classList.add("msg-json");
+    pre.textContent = truncateText(content, 1000);
+    container.appendChild(pre);
+  }
+}
+
+/**
+ * Helper to render thoughts/reasoning with lightbulb icon
+ */
+function renderThoughts(container, value) {
+  const thoughtsDiv = document.createElement("div");
+  thoughtsDiv.classList.add("step-thoughts", "msg-thoughts");
+  
+  const thoughtText = cleanTextValue(value);
+  
+  if (thoughtText) {
+    thoughtsDiv.innerHTML = `<span class="thought-icon material-symbols-outlined">lightbulb</span><span class="thought-text">${escapeHTML(thoughtText)}</span>`;
+    container.appendChild(thoughtsDiv);
+  }
+}
+
+/**
+ * Update process group header with step count, status, and metrics
+ */
+function updateProcessGroupHeader(group) {
+  const steps = group.querySelectorAll(".process-step");
+  const titleEl = group.querySelector(".group-title");
+  const statusEl = group.querySelector(".group-status");
+  const metricsEl = group.querySelector(".group-metrics");
+  const isCompleted = group.classList.contains("process-group-completed");
+  
+  // If completed, only remove active badges and exit early (don't update metrics)
+  if (isCompleted) {
+    const activeBadges = group.querySelectorAll(".status-badge.status-active");
+    activeBadges.forEach(badge => badge.classList.remove("status-active"));
+    return;
+  }
+  
+  // Update group title with the latest agent step heading
+  if (titleEl) {
+    // Find the last "agent" type step
+    const agentSteps = Array.from(steps).filter(step => step.getAttribute("data-type") === "agent");
+    if (agentSteps.length > 0) {
+      const lastAgentStep = agentSteps[agentSteps.length - 1];
+      const lastHeading = lastAgentStep.querySelector(".step-title")?.textContent;
+      if (lastHeading) {
+        const cleanTitle = cleanStepTitle(lastHeading, 50);
+        if (cleanTitle) {
+          titleEl.textContent = cleanTitle;
+        }
+      }
+    }
+  }
+  
+  // Update step count in metrics
+  const stepsMetricEl = metricsEl?.querySelector(".metric-steps .metric-value");
+  if (stepsMetricEl) {
+    stepsMetricEl.textContent = steps.length.toString();
+  }
+  
+  // Update time metric
+  const timeMetricEl = metricsEl?.querySelector(".metric-time .metric-value");
+  const startTimestamp = group.getAttribute("data-start-timestamp");
+  if (timeMetricEl && startTimestamp) {
+    const date = new Date(parseFloat(startTimestamp) * 1000);
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    timeMetricEl.textContent = `${hours}:${minutes}`;
+  }
+  
+  // Update duration metric
+  const durationMetricEl = metricsEl?.querySelector(".metric-duration .metric-value");
+  if (durationMetricEl && steps.length > 0) {
+    // Calculate accumulated duration from backend data
+    let accumulatedMs = 0;
+    steps.forEach(step => {
+      accumulatedMs += parseInt(step.getAttribute("data-duration-ms") || "0", 10);
+    });
+    
+    // Check if last step is still in progress (no duration_ms set yet)
+    const lastStep = steps[steps.length - 1];
+    const lastStepDuration = lastStep.getAttribute("data-duration-ms");
+    const lastStepTimestamp = lastStep.getAttribute("data-timestamp");
+    
+    if (lastStepDuration == null && lastStepTimestamp) {
+      // Last step is in progress - add live elapsed time for this step only
+      const lastStepStartMs = parseFloat(lastStepTimestamp) * 1000;
+      const liveElapsedMs = Math.max(0, Date.now() - lastStepStartMs);
+      accumulatedMs += liveElapsedMs;
+    }
+    
+    durationMetricEl.textContent = formatDuration(accumulatedMs);
+  }
+  
+  if (steps.length > 0) {
+    // Get the last step's type for status
+    const lastStep = steps[steps.length - 1];
+    const lastType = lastStep.getAttribute("data-type");
+    const lastToolName = lastStep.getAttribute("data-tool-name");
+    const lastTitle = lastStep.querySelector(".step-title")?.textContent || "";
+    
+    // Update status badge (keep status-active during execution)
+    if (statusEl) {
+      // Status code and color class from store (maps backend types)
+      const statusCode = processGroupStore.getStepCode(lastType, lastToolName);
+      const statusColorClass = processGroupStore.getStatusColorClass(lastType, lastToolName);
+      
+      statusEl.textContent = statusCode;
+      statusEl.className = `status-badge ${statusColorClass} status-active group-status`;
+    }
+    
+    // Update title
+    if (titleEl) {
+      // Prefer agent type steps for the group title as they contain thinking/planning info
+      if (lastType === "agent" && lastTitle) {
+        titleEl.textContent = cleanStepTitle(lastTitle, 50);
+      } else {
+        // Try to find the most recent agent step for a better title
+        const agentSteps = group.querySelectorAll('.process-step[data-type="agent"]');
+        if (agentSteps.length > 0) {
+          const lastAgentStep = agentSteps[agentSteps.length - 1];
+          const agentTitle = lastAgentStep.querySelector(".step-title")?.textContent || "";
+          if (agentTitle) {
+            titleEl.textContent = cleanStepTitle(agentTitle, 50);
+            return;
+          }
+        }
+        titleEl.textContent = cleanStepTitle(lastTitle, 50) || `Processing...`;
+      }
+    }
+  }
+}
+
+/**
+ * Truncate text to a maximum length
+ */
+function truncateText(text, maxLength) {
+  if (!text) return "";
+  text = String(text).trim();
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength - 3) + "...";
+}
+
+/**
+ * Mark a process group as complete (END state)
+ */
+function markProcessGroupComplete(group, responseTitle) {
+  if (!group) return;
+  
+  // Update status badge to END (remove status-active)
+  const statusEl = group.querySelector(".group-status");
+  if (statusEl) {
+    statusEl.innerHTML = '<span class="badge-icon material-symbols-outlined">check</span>END';
+    statusEl.className = "status-badge status-end group-status"; // No status-active
+  }
+  
+  // Remove status-active from all step badges (stop spinners)
+  const stepBadges = group.querySelectorAll(".process-step .status-badge.status-active");
+  stepBadges.forEach(badge => badge.classList.remove("status-active"));
+  
+  // Update title if response title is available
+  const titleEl = group.querySelector(".group-title");
+  if (titleEl && responseTitle) {
+    const cleanTitle = cleanStepTitle(responseTitle, 50);
+    if (cleanTitle) {
+      titleEl.textContent = cleanTitle;
+    }
+  }
+  
+  // Add completed class to group
+  group.classList.add("process-group-completed");
+  
+  // Calculate final duration from backend data (sum of all step durations)
+  const steps = group.querySelectorAll(".process-step");
+  let totalDurationMs = 0;
+  steps.forEach(step => {
+    const durationMs = parseInt(step.getAttribute("data-duration-ms") || "0", 10);
+    totalDurationMs += durationMs;
+  });
+  
+  // Update duration metric with final value from backend
+  const metricsEl = group.querySelector(".group-metrics");
+  const durationMetricEl = metricsEl?.querySelector(".metric-duration .metric-value");
+  if (durationMetricEl && totalDurationMs > 0) {
+    durationMetricEl.textContent = formatDuration(totalDurationMs);
+  }
+}
+
+/**
+ * Reset process group state (called on context switch)
+ */
+export function resetProcessGroups() {
+  currentProcessGroup = null;
+  currentDelegationSteps = {};
+  messageGroup = null;
+}
+
+/**
+ * Format Unix timestamp as date-time string (YYYY-MM-DD HH:MM:SS)
+ */
+function formatDateTime(timestamp) {
+  const date = new Date(timestamp * 1000); // Convert seconds to milliseconds
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
diff --git a/webui/js/time-utils.js b/webui/js/time-utils.js
index 9baba7fa69..0850ff04f2 100644
--- a/webui/js/time-utils.js
+++ b/webui/js/time-utils.js
@@ -69,3 +69,23 @@ export function formatDateTime(utcIsoString, format = 'full') {
 export function getUserTimezone() {
   return Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
+
+/**
+ * Format a duration in milliseconds to a human-readable string
+ * @param {number} durationMs - Duration in milliseconds
+ * @returns {string} Formatted duration (e.g., '45s', '2m30s')
+ */
+export function formatDuration(durationMs) {
+  if (durationMs == null || durationMs < 0) return '0s';
+
+  // Round total seconds first to avoid "1m60s" when seconds round up to 60
+  const totalSecs = Math.round(durationMs / 1000);
+
+  if (totalSecs < 60) {
+    return `${totalSecs}s`;
+  }
+
+  const mins = Math.floor(totalSecs / 60);
+  const secs = totalSecs % 60;
+  return `${mins}m${secs}s`;
+}