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 fa86e1e18..60063dd5c 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
@@ -25,4 +25,4 @@ def build_heading(agent, text: str, icon: str = "network_intelligence"):
     return f"{agent_prefix}{text}"
 
 def build_default_heading(agent):
-    return build_heading(agent, "Generating...") 
\ No newline at end of file
+    return build_heading(agent, "Calling LLM...") 
\ No newline at end of file
diff --git a/python/extensions/reasoning_stream/_10_log_from_stream.py b/python/extensions/reasoning_stream/_10_log_from_stream.py
index b98da8374..eb954e5a8 100644
--- a/python/extensions/reasoning_stream/_10_log_from_stream.py
+++ b/python/extensions/reasoning_stream/_10_log_from_stream.py
@@ -13,7 +13,7 @@ class LogFromStream(Extension):
 
         # thought length indicator
         pipes = "|" * math.ceil(math.sqrt(len(text)))
-        heading = build_heading(self.agent, f"Reasoning.. {pipes}")
+        heading = build_heading(self.agent, f"Reasoning... {pipes}")
 
         # create log message and store it in loop data temporary params
         if "log_item_generating" not in loop_data.params_temporary:
@@ -21,9 +21,10 @@ class LogFromStream(Extension):
                 self.agent.context.log.log(
                     type="agent",
                     heading=heading,
+                    step="Reasoning..."
                 )
             )
 
         # update log message
         log_item = loop_data.params_temporary["log_item_generating"]
-        log_item.update(heading=heading, reasoning=text)
+        log_item.update(heading=heading, reasoning=text, step="Reasoning...")
diff --git a/python/extensions/response_stream/_10_log_from_stream.py b/python/extensions/response_stream/_10_log_from_stream.py
index 308263bbc..d9bb1170d 100644
--- a/python/extensions/response_stream/_10_log_from_stream.py
+++ b/python/extensions/response_stream/_10_log_from_stream.py
@@ -24,7 +24,11 @@ class LogFromStream(Extension):
         elif "tool_name" in parsed:
             heading = build_heading(self.agent, f"Using {parsed['tool_name']}") # if the llm skipped headline
         elif "thoughts" in parsed:
-            heading = build_default_heading(self.agent)
+            # thought length indicator
+            pipes = "|" * math.ceil(math.sqrt(len(text)))
+            heading = build_heading(self.agent, f"Thinking... {pipes}")
+        else:
+            heading = build_heading(self.agent, "Receiving...")
         
         # create log message and store it in loop data temporary params
         if "log_item_generating" not in loop_data.params_temporary:
@@ -48,12 +52,16 @@ class LogFromStream(Extension):
             kvps["step"] = f"Using {parsed['tool_name']}..." # using tool XY
             if parsed["tool_name"]=="code_execution_tool":
                 if "tool_args" in parsed and "runtime" in parsed["tool_args"]:
+                    pipes = ""
+                    if "code" in parsed["tool_args"]:
+                        pipes = "|" * math.ceil(math.sqrt(len(parsed["tool_args"]["code"]))) 
+                        kvps["step"] = f"Writing code... {pipes}"
                     if parsed["tool_args"]["runtime"] == "python":
-                        kvps["step"] = "Writing Python code..."
+                        kvps["step"] = f"Writing Python code... {pipes}"
                     elif parsed["tool_args"]["runtime"] == "nodejs":
-                        kvps["step"] = "Writing Node.js code..."
+                        kvps["step"] = f"Writing Node.js code... {pipes}"
                     elif parsed["tool_args"]["runtime"] == "terminal":
-                        kvps["step"] = "Writing terminal command..."
+                        kvps["step"] = f"Writing terminal command... {pipes}"
         kvps.update(parsed)
 
 
diff --git a/webui/components/messages/action-buttons/simple-action-buttons.css b/webui/components/messages/action-buttons/simple-action-buttons.css
index f914ef8ba..682ece1a6 100644
--- a/webui/components/messages/action-buttons/simple-action-buttons.css
+++ b/webui/components/messages/action-buttons/simple-action-buttons.css
@@ -14,6 +14,24 @@
   pointer-events: none;
 }
 
+.step-action-buttons .expand-btn {
+  display: none;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--color-text-muted);
+  font-family: "Rubik", Arial, Helvetica, sans-serif;
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  padding: var(--spacing-xs) 0;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+
+.step-action-buttons .expand-btn:hover {
+  opacity: 1;
+}
+
 .step-action-buttons .action-button,
 .action-button {
   display: flex;
@@ -53,6 +71,55 @@
   font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
 }
 
+.show-more-btn,
+.show-less-btn {
+  display: none;
+}
+
+.message.message-collapsible.has-overflow:not(.expanded) > .step-action-buttons {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.message.message-collapsible.has-overflow:not(.expanded)
+  > .step-action-buttons
+  .show-more-btn {
+  display: inline-flex;
+  pointer-events: auto;
+}
+
+.device-pointer
+  .message.message-collapsible.has-overflow:not(.expanded)
+  > .step-action-buttons
+  .action-button {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.device-pointer
+  .message.message-collapsible.has-overflow:not(.expanded):hover
+  > .step-action-buttons
+  .action-button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.device-pointer
+  .message.message-collapsible.has-overflow.expanded:hover
+  > .step-action-buttons
+  .show-less-btn {
+  display: inline-flex;
+  pointer-events: auto;
+}
+
+.device-touch
+  .message.message-collapsible.has-overflow.expanded
+  > .step-action-buttons
+  .show-less-btn {
+  display: inline-flex;
+  pointer-events: auto;
+}
+
 /* User messages: right-aligned */
 .message-user .step-action-buttons {
   justify-content: flex-end;
@@ -70,6 +137,7 @@
 
 .device-pointer .message-user:hover > .step-action-buttons,
 .device-pointer .message-agent-response:hover > .step-action-buttons,
+.device-pointer .message.message-collapsible.expanded:hover > .step-action-buttons,
 .device-pointer .process-step:hover > .process-step-detail .step-action-buttons {
   opacity: 1;
   pointer-events: auto;
diff --git a/webui/components/messages/action-buttons/simple-action-buttons.js b/webui/components/messages/action-buttons/simple-action-buttons.js
index ea46a2ee3..59cb35cbe 100644
--- a/webui/components/messages/action-buttons/simple-action-buttons.js
+++ b/webui/components/messages/action-buttons/simple-action-buttons.js
@@ -54,7 +54,7 @@ export function showButtonFeedback(button, success, originalIcon) {
   setTimeout(() => {
     icon.textContent = originalIcon;
     button.classList.remove("success", "error");
-  }, 2000);
+  }, 1000);
 }
 
 /**
@@ -77,7 +77,7 @@ export function createActionButton(icon, text = "", handler = null) {
   if (typeof handler === "function") {
     button.addEventListener("click", async (event) => {
       event.stopPropagation();
-      const shouldShowFeedback = icon === "copy" || icon === "speak";
+      const shouldShowFeedback = true; // icon === "copy" || icon === "speak";
       try {
         await handler();
         if (shouldShowFeedback) {
diff --git a/webui/components/messages/process-group/process-group.css b/webui/components/messages/process-group/process-group.css
index 93d973f29..78064ba0f 100644
--- a/webui/components/messages/process-group/process-group.css
+++ b/webui/components/messages/process-group/process-group.css
@@ -346,6 +346,7 @@
               border-color 0.2s ease-out;
   overflow: hidden;
   color: var(--color-text-muted);
+  max-width: 100%;
 }
 
 .process-group-content > .process-steps {
@@ -366,6 +367,8 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 /* Individual Process Step */
@@ -374,6 +377,8 @@
   flex-direction: column;
   padding: 0.1em;
   transition: background-color 0.15s ease;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 /* Utility/Info/Hint steps have subtle background tint */
@@ -404,6 +409,8 @@
   user-select: none;
   gap: 4px;
   min-height: 18px;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 /* Step title */
@@ -415,6 +422,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   margin-left: var(--spacing-xs);
+  min-width: 0;
 }
 
 /* Step expand icon - CSS triangle (no Material Icons) */
@@ -453,6 +461,7 @@
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE/Edge */
   overscroll-behavior: contain; /* avoid scroll chaining */
+  max-width: 100%;
 }
 
 .process-step:not(.expanded) > .process-step-detail {
@@ -486,13 +495,17 @@
 .process-step.expanded > .process-step-detail {
   /* grid-template-rows: 1fr; */
   opacity: 1;
-  overflow: visible;
+  overflow: hidden;
   margin-top: var(--spacing-xs);
+  max-width: 100%;
 }
 
 .process-step.expanded > .process-step-detail > .process-step-detail-scroll {
   max-height: 40em;
   overflow-y: auto;
+  max-width: 100%;
+  width: fit-content;
+  box-sizing: content-box;
   border-radius: var(--border-radius-sm);
 }
 
@@ -508,6 +521,8 @@
   font-size: var(--font-size-xs);
   line-height: 1.5;
   overflow-y: auto;
+  overflow-x: hidden;
+  max-width: 100%;
   -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE/Edge */
@@ -527,7 +542,7 @@
 /* KVPs in step detail - CSS Grid for aligned columns */
 .process-step-detail-scroll .step-kvps {
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr);
   gap: var(--spacing-xs) var(--spacing-sm);
   align-items: start;
 }
@@ -543,6 +558,7 @@
   display: flex;
   align-items: center;
   justify-content: end;
+  white-space: nowrap;
 }
 
 .process-step-detail-scroll .step-kvp-key .material-symbols-outlined {
@@ -554,9 +570,17 @@
   /* color: var(--color-text); */
   opacity: 0.85;
   word-break: break-word;
+  overflow-wrap: anywhere;
   white-space: pre-wrap;
   font-size: 0.75rem;
   line-height: 1.5;
+  min-width: 0;
+}
+
+.process-step-detail-scroll .step-kvp-value p {
+  margin: 0;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 
@@ -622,6 +646,7 @@
 } */
 
 
+/* Terminal output - self-contained scrollable block */
 .process-step-detail .terminal-output {
   margin: var(--spacing-xs) 0 0 0;
   padding: var(--spacing-xs);
@@ -631,12 +656,11 @@
   white-space: pre;
   font-family: monospace;
   max-width: fit-content;
-  /* max-height: 300px; */
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: thin;
   scrollbar-color: rgba(255,255,255,0.2) transparent;
-  overscroll-behavior-x: contain;
+  overscroll-behavior: contain;
 }
 
 .process-step-detail .terminal-output::-webkit-scrollbar {
@@ -739,6 +763,7 @@
   overflow: hidden;
   transition: grid-template-rows 0.25s ease-out, opacity 0.2s ease-out;
   gap: 2px;
+  max-width: 100%;
 }
 
 /* Only show nested container when parent step is expanded */
@@ -755,6 +780,8 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 /* All nested containers have same indentation (no cascading) */
@@ -769,6 +796,8 @@
   color: var(--color-text);
   opacity: 0.9;
   margin: var(--spacing-xs) 0;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .process-step-detail-scroll .step-response-content p {
diff --git a/webui/components/modals/memory/memory-detail-modal.html b/webui/components/modals/memory/memory-detail-modal.html
index 44723c935..619459d14 100644
--- a/webui/components/modals/memory/memory-detail-modal.html
+++ b/webui/components/modals/memory/memory-detail-modal.html
@@ -139,10 +139,8 @@
         </template>
         <style>
             .modal-header-compact {
-                background: linear-gradient(135deg, var(--color-panel) 0%, var(--color-background) 100%);
                 position: sticky;
                 padding-left: 0.8rem;
-                border-radius: 6px;
                 top: 0;
                 z-index: 100;
             }
diff --git a/webui/components/modals/process-step-detail/process-step-detail.html b/webui/components/modals/process-step-detail/process-step-detail.html
index 6d6d11ec0..9e25446c9 100644
--- a/webui/components/modals/process-step-detail/process-step-detail.html
+++ b/webui/components/modals/process-step-detail/process-step-detail.html
@@ -15,9 +15,6 @@
                 <!-- Compact Modal Header -->
                 <div class="modal-header modal-header-compact">
                     <div class="header-info">
-                        <span class="status-badge"
-                              :class="$store.stepDetail.selectedStepForDetail?.statusClass || ''"
-                              x-text="$store.stepDetail.selectedStepForDetail?.statusCode || ''"></span>
                         <span class="step-type-label" x-text="$store.stepDetail.formatStepType($store.stepDetail.selectedStepForDetail?.type)"></span>
                         <template x-if="$store.stepDetail.selectedStepForDetail?.headerLabels">
                             <template x-for="(label, index) in $store.stepDetail.selectedStepForDetail?.headerLabels || []" :key="index">
@@ -27,12 +24,12 @@
                     </div>
                     <div class="header-actions">
                         <button class="btn btn-action-header copy-all" 
-                                @click.stop="$store.stepDetail.copyToClipboard($store.stepDetail.formatStepForCopy($store.stepDetail.selectedStepForDetail)).then(() => { $el.classList.add('copied'); setTimeout(() => $el.classList.remove('copied'), 1500) })"
+                                @click.stop="$store.stepDetail.copyToClipboard($store.stepDetail.formatStepForCopy($store.stepDetail.selectedStepForDetail))"
                                 title="Copy Complete Step with Metadata">
                             <span class="material-symbols-outlined">copy_all</span> All
                         </button>
                         <button class="btn btn-action-header copy-content" 
-                                @click.stop="$store.stepDetail.copyToClipboard($store.stepDetail.getStepPrimaryContent($store.stepDetail.selectedStepForDetail)).then(() => { $el.classList.add('copied'); setTimeout(() => $el.classList.remove('copied'), 1500) })"
+                                @click.stop="$store.stepDetail.copyToClipboard($store.stepDetail.getStepPrimaryContent($store.stepDetail.selectedStepForDetail))"
                                 title="Copy Raw LLM Response">
                             <span class="material-symbols-outlined">content_copy</span> Content
                         </button>
@@ -53,27 +50,26 @@
                     </div>
 
                     <!-- Formatted View -->
-                    <div class="formatted-content" x-show="!showRaw">
+                    <div class="formatted-content" x-show="!showRaw" x-init="$nextTick(() => $store.stepDetail.renderSegmentButtons())">
                         <!-- Heading/Title Section -->
                         <template x-if="$store.stepDetail.selectedStepForDetail?.heading">
                             <div class="content-block">
                                 <h4>Heading</h4>
                                 <div class="content-text" x-text="$store.stepDetail.cleanHeading($store.stepDetail.selectedStepForDetail?.heading)"></div>
+                                <div class="step-action-buttons" data-segment="heading"></div>
                             </div>
                         </template>
 
-                        <!-- Generic KVPs for all types -->
+                        <!-- Flattened KVPs -->
                         <template x-if="$store.stepDetail.selectedStepForDetail?.kvps">
-                            <div class="content-block">
-                                <h4>Details</h4>
-                                <div class="kvps-display">
-                                    <template x-for="[key, value] in Object.entries($store.stepDetail.selectedStepForDetail?.kvps || {})" :key="key">
-                                        <div class="kvp-item">
-                                            <span class="kvp-key" x-text="$store.stepDetail.formatKey(key)"></span>
-                                            <span class="kvp-value" x-text="$store.stepDetail.formatValue(value)"></span>
-                                        </div>
-                                    </template>
-                                </div>
+                            <div class="kvp-boxes">
+                                <template x-for="[key, value] in Object.entries($store.stepDetail.flattenKvps($store.stepDetail.selectedStepForDetail?.kvps) || {})" :key="key">
+                                    <div class="content-block kvp-box">
+                                        <h4 x-text="key"></h4>
+                                        <pre class="kvp-value-content" x-text="$store.stepDetail.formatFlatValue(value)"></pre>
+                                        <div class="step-action-buttons kvp-box-actions" x-init="$store.stepDetail.renderKvpCopyButton($el, key, value)"></div>
+                                    </div>
+                                </template>
                             </div>
                         </template>
 
@@ -82,6 +78,7 @@
                             <div class="content-block">
                                 <h4>Content</h4>
                                 <pre class="result-content" x-text="$store.stepDetail.selectedStepForDetail?.content"></pre>
+                                <div class="step-action-buttons" data-segment="content"></div>
                             </div>
                         </template>
                     </div>
@@ -99,10 +96,8 @@
         }
 
         .modal-header-compact {
-            background: linear-gradient(135deg, var(--color-panel) 0%, var(--color-background) 100%);
             position: sticky;
             padding: 0.75rem 1rem;
-            border-radius: 6px 6px 0 0;
             top: 0;
             z-index: 100;
             display: flex;
@@ -170,11 +165,6 @@
             border-color: var(--color-primary);
         }
 
-        .btn-action-header.copied {
-            background: var(--color-success, #22c55e);
-            border-color: var(--color-success, #22c55e);
-            color: white;
-        }
 
         .modal-body {
             flex: 1;
@@ -211,10 +201,7 @@
         }
 
         .content-block {
-            background: var(--color-panel);
-            border: 1px solid var(--color-border);
-            border-radius: 6px;
-            padding: 1rem;
+            padding: var(--spacing-xs) 0;
         }
 
         .content-block h4 {
@@ -233,10 +220,7 @@
         }
 
         .result-content {
-            background: var(--color-background);
-            padding: 1rem;
-            border-radius: 8px;
-            font-family: var(--font-mono);
+            font-family: monospace !important;
             font-size: 0.85rem;
             margin: 0;
             max-height: 40vh;
@@ -245,35 +229,33 @@
             word-break: break-word;
         }
 
-        .kvps-display {
+        .kvp-boxes {
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
+            gap: 1rem;
         }
 
-        .kvp-item {
-            display: flex;
-            flex-direction: column;
-            gap: 0.25rem;
-            padding: 0.5rem;
-            background: var(--color-background);
-            border-radius: 8px;
-            border: 1px solid var(--color-border);
-        }
-
-        .kvp-key {
-            font-weight: 600;
+        .kvp-value-content {
             color: var(--color-text);
-            opacity: 0.7;
-            font-size: 0.8rem;
-            text-transform: uppercase;
-        }
-
-        .kvp-value {
-            color: var(--color-text);
-            font-size: 0.9rem;
             white-space: pre-wrap;
             word-break: break-word;
+            margin: 0;
+            font-size: 0.85rem;
+        }
+
+        .kvp-box-actions {
+            margin-top: 0.5rem;
+        }
+
+        .step-action-buttons {
+            display: flex;
+            gap: 0.5rem;
+            justify-content: flex-start;
+            margin-top: 0.75rem;
+            padding-top: 0.5rem;
+            border-top: 1px solid var(--color-border);
+            opacity: 1;
+            pointer-events: auto;
         }
 
         .modal-scroll::-webkit-scrollbar {
diff --git a/webui/components/modals/process-step-detail/step-detail-store.js b/webui/components/modals/process-step-detail/step-detail-store.js
index 604d9bae7..cc3618475 100644
--- a/webui/components/modals/process-step-detail/step-detail-store.js
+++ b/webui/components/modals/process-step-detail/step-detail-store.js
@@ -1,4 +1,6 @@
 import { createStore } from "/js/AlpineStore.js";
+import { createActionButton, copyToClipboard } from "/components/messages/action-buttons/simple-action-buttons.js";
+import { store as notificationStore } from "/components/notifications/notification-store.js";
 
 // Step Detail Store - manages the step detail modal
 
@@ -16,22 +18,39 @@ const model = {
     window.openModal("modals/process-step-detail/process-step-detail.html");
   },
 
+  // render copy buttons for each segment (called via x-init)
+  renderSegmentButtons() {
+    const step = this.selectedStepForDetail;
+
+    [
+      { segment: "heading", value: this.cleanHeading(step?.heading) },
+      { segment: "content", value: step?.content ?? "" }
+    ].forEach(({ segment, value }) => {
+      document.querySelector(`[data-segment="${segment}"]`)?.replaceChildren(
+        createActionButton("copy", "", () => copyToClipboard(value))
+      );
+    });
+  },
+
+  // render copy buttons for individual kvp boxes
+  renderKvpCopyButton(container, key, value) {
+    const copyText = this.formatFlatValue(value);
+    container?.replaceChildren(
+      createActionButton("copy", "", () => copyToClipboard(copyText))
+    );
+  },
+
   // Close step detail modal
   closeStepDetail() {
     this.selectedStepForDetail = null;
     window.closeModal();
   },
 
-  // Copy text to clipboard
-  async copyToClipboard(text) {
-    if (!text) return false;
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch (err) {
-      console.error("Failed to copy to clipboard:", err);
-      return false;
-    }
+  // Copy text to clipboard with toast feedback
+  copyToClipboard(text) {
+    navigator.clipboard.writeText(text)
+      .then(() => notificationStore.addFrontendToastOnly("success", "Copied to clipboard!", "", 3))
+      .catch((err) => console.error("Clipboard copy failed:", err));
   },
 
   // Format step data for full copy (all metadata + content)
@@ -39,7 +58,8 @@ const model = {
     if (!step) return "";
     const lines = [];
     lines.push(`Type: ${step.type || "unknown"}`);
-    if (step.heading) lines.push(`Heading: ${step.heading}`);
+    const heading = this.cleanHeading(step.heading);
+    if (heading) lines.push(`Heading: ${heading}`);
     if (step.timestamp) {
       const date = new Date(parseFloat(step.timestamp) * 1000);
       lines.push(`Timestamp: ${date.toISOString()}`);
@@ -48,9 +68,9 @@ const model = {
     if (step.kvps) {
       lines.push("");
       lines.push("--- Data ---");
-      for (const [key, value] of Object.entries(step.kvps)) {
-        const formattedValue = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
-        lines.push(`${key}: ${formattedValue}`);
+      const flattenedKvps = this.flattenKvps(step.kvps);
+      for (const [key, value] of Object.entries(flattenedKvps)) {
+        lines.push(this.buildKvpCopyText(key, value));
       }
     }
     if (step.content) {
@@ -163,9 +183,9 @@ const model = {
 
   // Format value for display (handles objects)
   formatValue(value) {
-    if (value === null || value === undefined) return '';
-    if (typeof value === 'object') return JSON.stringify(value, null, 2);
-    return String(value);
+    return value == null
+      ? ''
+      : (typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value));
   },
 
   // Format key for display (title case)
@@ -173,17 +193,33 @@ const model = {
     return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
   },
 
-  // Clean text value (handle arrays, remove brackets)
-  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();
+  // flatten nested kvps into top-level entries
+  flattenKvps(kvps, parentKey = "") {
+    const isPlainObject = value => value && typeof value === "object" && !Array.isArray(value);
+    return Object.entries(kvps || {}).reduce((acc, [key, value]) => {
+      const fullKey = [parentKey, this.formatKey(key)].filter(Boolean).join(" / ");
+      return {
+        ...acc,
+        ...(isPlainObject(value) ? this.flattenKvps(value, fullKey) : { [fullKey]: value })
+      };
+    }, {});
+  },
+
+  // format values
+  formatFlatValue(value) {
+    return Array.isArray(value)
+      ? value
+        .map(item => this.formatValue(item))
+        .filter(item => item.trim())
+        .join('\n')
+      : this.formatValue(value);
+  },
+
+  // build copy text
+  buildKvpCopyText(key, value) {
+    const formattedValue = this.formatFlatValue(value);
+    const separator = formattedValue.includes("\n") ? ":\n" : ": ";
+    return `${key}${separator}${formattedValue}`;
   },
 
   // Clean heading by removing icon:// prefixes
diff --git a/webui/components/sidebar/bottom/preferences/preferences-panel.html b/webui/components/sidebar/bottom/preferences/preferences-panel.html
index a41c64c25..9987c2e63 100644
--- a/webui/components/sidebar/bottom/preferences/preferences-panel.html
+++ b/webui/components/sidebar/bottom/preferences/preferences-panel.html
@@ -142,7 +142,7 @@
       font-size: 0.7rem;
       font-weight: 500;
       letter-spacing: 0.02em;
-      padding: 0.15rem 0.25rem;
+      padding: 0.15rem 0.1rem;
       cursor: pointer;
       opacity: 0.7;
       transition: opacity 0.15s ease, color 0.15s ease;
@@ -184,7 +184,7 @@
       font-size: 0.7rem;
       font-weight: 500;
       letter-spacing: 0.02em;
-      padding: 0.15rem 0.25rem;
+      padding: 0.15rem 0.1rem;
       cursor: pointer;
       opacity: 0.7;
       transition: opacity 0.15s ease;
diff --git a/webui/components/sidebar/bottom/preferences/preferences-store.js b/webui/components/sidebar/bottom/preferences/preferences-store.js
index f1329cb77..3970ef799 100644
--- a/webui/components/sidebar/bottom/preferences/preferences-store.js
+++ b/webui/components/sidebar/bottom/preferences/preferences-store.js
@@ -57,7 +57,7 @@ const model = {
     { label: "MIN", value: "40" },
     { label: "WIDE", value: "55" },
     { label: "2X", value: "80" },
-    { label: "<>", value: "full" },
+    { label: "FULL", value: "full" },
   ],
 
   // Detail mode for process groups/steps expansion
@@ -72,7 +72,8 @@ const model = {
 
   // Detail mode options for UI sidebar
   detailModeOptions: [
-    { label: "NONE", value: "collapsed", title: "All collapsed" },
+    { label: "NO", value: "collapsed", title: "All collapsed" },
+    { label: "LIST", value: "list", title: "Steps collapsed" },
     { label: "STEP", value: "current", title: "Current step only" },
     { label: "ALL", value: "expanded", title: "All expanded" },
   ],
diff --git a/webui/css/messages.css b/webui/css/messages.css
index 1509bb7bf..e0baa1e0f 100644
--- a/webui/css/messages.css
+++ b/webui/css/messages.css
@@ -11,7 +11,7 @@
   overflow-x: hidden;
   scroll-behavior: auto !important; /* avoid infinite scrolling! */
   padding-left: var(--spacing-sm) !important;
-  padding-right: var(--spacing-md)   !important;
+  padding-right: var(--spacing-md) !important;
   padding-top: 4rem !important;
   padding-bottom: 4rem !important;
   -webkit-transition: all 0.3s ease;
@@ -109,7 +109,6 @@
   color: var(--color-text);
 }
 
-
 /* .light-mode .message-user .message-text pre {
   color: #2e2e2e;
 } */
@@ -281,136 +280,22 @@
   background-color: transparent;
 }
 
-/* Collapsible Error Group */
-
-.message-error-group {
-  background: transparent;
-  border: none !important;
-  padding: 0 !important;
-}
-
-.error-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;
-}
-
-/* Error Group Header */
-.error-group-header {
+/* Error messages styled like process groups */
+.message-error .msg-heading {
   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;
+  margin-bottom: var(--spacing-xs);
 }
 
-.error-group-header:hover {
-  opacity: 0.85;
-}
-
-/* Expand/collapse triangle */
-.error-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 #ef4444;
-  opacity: 0.7;
-  transition:
-    transform 0.2s ease,
-    opacity 0.15s ease;
-  flex-shrink: 0;
-  font-size: 0;
-  margin-right: 2px;
-}
-
-.error-group-header:hover .expand-icon {
-  opacity: 1;
-}
-
-.error-group.expanded .error-group-header .expand-icon {
-  transform: rotate(90deg);
-}
-
-/* Error title */
-.error-group-header .error-title {
-  flex: 0 0 auto;
+.message-error .msg-heading h4 {
+  display: flex;
+  align-items: center;
   font-size: var(--font-size-medium);
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-error-text);
-}
-
-/* Error subtitle (short description) */
-.error-group-header .error-subtitle {
-  flex: 1 1 auto;
-  font-size: 0.75rem;
-  color: var(--color-text);
-  opacity: 0.7;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: var(--spacing-xs);
-  font-family: var(--font-family-code);
-}
-
-/* Error Group Content - Animated expand/collapse */
-.error-group-content {
-  display: grid;
-  grid-template-rows: 0fr;
-  opacity: 0;
-  margin-top: 0;
-  padding-top: 0;
-  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;
-  overflow: hidden;
-}
-
-.error-group-content > .error-content-inner {
-  min-height: 0;
-}
-
-.error-group.expanded .error-group-content {
-  grid-template-rows: 1fr;
-  opacity: 1;
-  margin-top: var(--spacing-xs);
-  padding-top: var(--spacing-xs);
-}
-
-.error-content-inner {
-  padding: var(--spacing-md);
-  border-radius: 8px;
-  /* border: 1px solid var(--color-error-text); */
-  margin-left: var(--spacing-md);
-}
-
-/* Callstack styling */
-.error-callstack {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: var(--font-family-code);
-  font-size: 0.72rem;
-  line-height: 1.5;
-  color: var(--color-error-text);
-  max-height: 30vh;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-error-text) transparent;
+  opacity: 0.9;
+  margin-bottom: var(--spacing-sm);
 }
 
 /* Terminal styling moved to new terminal block above */
@@ -430,12 +315,12 @@
   width: 100%;
 }
 
-.kvps-val{
+.kvps-val {
   font-size: 0.75rem;
 }
 
-.kvps-val p{
-  margin:0;
+.kvps-val p {
+  margin: 0;
 }
 
 .kvps-val pre {
@@ -519,7 +404,7 @@
   text-align: right;
 }
 
-.kvps-key .material-symbols-outlined{
+.kvps-key .material-symbols-outlined {
   font-size: var(--font-size-smaller);
 }
 
@@ -542,14 +427,12 @@
   width: 100%;
 }
 
-
 .msg-content {
   margin-bottom: 0;
   padding: 0;
   overflow: hidden;
 }
 
-
 /* Math (KaTeX) */
 .katex {
   line-height: 1.2 !important;
@@ -573,11 +456,11 @@
 
 @media (max-width: 1024px) {
   #chat-history {
-  padding-left: var(--spacing-sm) !important;
-  padding-right: var(--spacing-md)   !important;
-  padding-top: 4rem !important;
-  padding-bottom: 2rem !important;  
-}
+    padding-left: var(--spacing-sm) !important;
+    padding-right: var(--spacing-md) !important;
+    padding-top: 4rem !important;
+    padding-bottom: 3rem !important;
+  }
 }
 
 @media (max-width: 640px) {
@@ -700,25 +583,25 @@
   margin: 1em 0;
   font-size: 0.98em;
   background: transparent;
-  border-radius: 8px;
+  border-radius: var(--border-radius-sm);
   overflow: hidden;
 }
 
 .msg-content th,
 .msg-content td {
   padding: 0.55em 1em;
-  border: 1px solid rgba(142, 142, 142, 0.1);
+  border: 1px solid var(--color-border);
   text-align: left;
   background: transparent;
 }
 
 .msg-content th {
   font-weight: 600;
-  background: rgba(142, 142, 142, 0.1);
+  background: var(--color-table-row);
 }
 
 .msg-content tr:nth-child(even) {
-  background: rgba(142, 142, 142, 0.1);
+  background: var(--color-table-row);
 }
 
 .msg-content tr:nth-child(odd) {
@@ -731,8 +614,8 @@
 
 .msg-content pre:has(code) {
   padding: 0.5em;
-  border: 1px solid rgba(142, 142, 142, 0.1);
-  border-radius: 0.3em;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-sm);
 }
 
 .msg-content hr {
@@ -846,24 +729,40 @@
   opacity: 0;
 }
 
-/* Expand button - hidden by default, shown when overflow */
-.message.message-collapsible .expand-btn {
-  display: none;
-  background: transparent;
-  border: none;
-  color: var(--color-text-muted);
-  font-family: "Rubik", Arial, Helvetica, sans-serif;
-  font-size: var(--font-size-xs);
-  cursor: pointer;
-  padding: var(--spacing-xs) 0;
-  opacity: 0.7;
-  transition: opacity 0.15s ease;
+/* Smooth Render */
+.smooth-render-visible,
+.smooth-render-invisible {
+  position: absolute;
+  width:100%;
+  inset: 0;
+  opacity: 0;
 }
 
-.message.message-collapsible .expand-btn:hover {
+.smooth-render-visible {
+  z-index: 2;
+  animation: smoothFadeIn 200ms ease-out forwards;
+}
+
+.smooth-render-invisible {
+  z-index: 1;
   opacity: 1;
+  animation: smoothFadeOut 70ms ease-out forwards;
+  animation-delay: 100ms;
 }
 
-.message.message-collapsible.has-overflow .expand-btn {
-  display: block;
+@keyframes smoothFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes smoothFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
diff --git a/webui/index.css b/webui/index.css
index 2c453324b..e3286b9a3 100644
--- a/webui/index.css
+++ b/webui/index.css
@@ -24,6 +24,7 @@
   --color-input-focus-dark: #101010;
   --color-chat-background-dark: #212121;
   --color-error-text-dark:#e72323;
+  --color-table-row-dark: #272727;
 
   /* Light mode */
   --color-background-light: #fafafa;
@@ -39,8 +40,9 @@
   --color-border-light: #bdbdbdcf;
   --color-input-light: #e4e4e4;
   --color-input-focus-light: #dadada;
-  --color-chat-background-light: #fafafaf3;
+  --color-chat-background-light: #fafafa;
   --color-error-text-light:#920000;
+  --color-table-row-light: #edededf3;
 
 
   /* Default to dark mode */
@@ -60,6 +62,7 @@
   --color-background-hover: color-mix(in srgb, var(--color-border) 50%, transparent);
   --color-chat-background: var(--color-chat-background-dark);
   --color-error-text:var(--color-error-text-dark);
+  --color-table-row: var(--color-table-row-dark);
 
   /* Spacing variables */
   --spacing-xxs: 0.15rem;
@@ -105,7 +108,8 @@
   --color-background-hover: color-mix(in srgb, var(--color-border) 50%, transparent);
   --color-chat-background: var(--color-chat-background-light);
   --color-error-text:var(--color-error-text-light);
-  } 
+  --color-table-row: var(--color-table-row-light);
+} 
 
 
 /* Reset and Base Styles */
diff --git a/webui/index.js b/webui/index.js
index 046a45d1e..0218c072f 100644
--- a/webui/index.js
+++ b/webui/index.js
@@ -218,14 +218,7 @@ updateUserTime();
 setInterval(updateUserTime, 1000);
 
 function setMessages(...params) {
-  const chatHistoryEl = document.getElementById("chat-history");
-  let scroller;
-
-  if (preferencesStore.autoScroll && chatHistoryEl) scroller = new msgs.Scroller(chatHistoryEl)
-  const result = msgs.setMessages(...params);
-  if (scroller) scroller.reApplyScroll();
-
-  return result;
+  return msgs.setMessages(...params);
 }
 
 globalThis.loadKnowledge = async function () {
@@ -337,7 +330,6 @@ export async function poll() {
       updated = true;
       setMessages(response.logs);
       afterMessagesUpdate(response.logs);
-      applyModeSteps(preferencesStore.detailMode, preferencesStore.showUtils);
     }
 
     lastLogVersion = response.log_version;
diff --git a/webui/js/messages.js b/webui/js/messages.js
index 401ed57d4..134e0b105 100644
--- a/webui/js/messages.js
+++ b/webui/js/messages.js
@@ -4,13 +4,17 @@ 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 { store as speechStore } from "/components/chat/speech/speech-store.js";
-import { createActionButton, copyToClipboard } from "/components/messages/action-buttons/simple-action-buttons.js";
+import {
+  createActionButton,
+  copyToClipboard,
+} from "/components/messages/action-buttons/simple-action-buttons.js";
 import { store as stepDetailStore } from "/components/modals/process-step-detail/step-detail-store.js";
 import { store as preferencesStore } from "/components/sidebar/bottom/preferences/preferences-store.js";
 import { formatDuration } from "./time-utils.js";
 
 // Delay before collapsing previous steps when a new step is added
 const STEP_COLLAPSE_DELAY_MS = 3000;
+const STEP_COLLAPSE_HOVER_DELAY_MS = 5000;
 // Delay before collapsing the last step when processing completes
 const FINAL_STEP_COLLAPSE_DELAY_MS = 3000;
 
@@ -58,111 +62,6 @@ export function getMessageHandler(type) {
   }
 }
 
-/**
- * Mark a process group as the active one (via .active class)
- */
-function setActiveProcessGroup(group) {
-  // if (!group) return;
-
-  // // Already active? Nothing to do
-  // if (group.classList.contains("active")) return;
-
-  // // Clear active + shiny from all other groups
-  // getChatHistoryEl()
-  //   .querySelectorAll(".process-group.active")
-  //   .forEach((g) => {
-  //     if (g !== group) {
-  //       g.classList.remove("active");
-  //       g.querySelectorAll(".step-title.shiny-text").forEach((el) =>
-  //         el.classList.remove("shiny-text"),
-  //       );
-  //     }
-  //   });
-
-  // // Mark this group as active
-  // group.classList.add("active");
-}
-
-function getChatHistoryEl() {
-  if (!_chatHistory) _chatHistory = document.getElementById("chat-history");
-  return _chatHistory;
-}
-
-function getLastMessageGroup() {
-  return getChatHistoryEl()?.lastElementChild;
-}
-
-// function getLastMessageContainer() {
-//   const chatHistoryEl = getChatHistoryEl();
-//   if (!chatHistoryEl) return null;
-//   const lastGroup = chatHistoryEl.lastElementChild;
-//   if (!lastGroup) return null;
-//   return lastGroup.lastElementChild;
-// }
-
-function appendToMessageGroup(
-  messageContainer,
-  position,
-  forceNewGroup = false,
-) {
-  const chatHistoryEl = getChatHistoryEl();
-  if (!chatHistoryEl) return;
-
-  const lastGroup = chatHistoryEl.lastElementChild;
-  const lastGroupType = lastGroup?.getAttribute("data-group-type");
-
-  if (!forceNewGroup && lastGroup && lastGroupType === position) {
-    lastGroup.appendChild(messageContainer);
-  } else {
-    const group = document.createElement("div");
-    group.classList.add("message-group", `message-group-${position}`);
-    group.setAttribute("data-group-type", position);
-    group.appendChild(messageContainer);
-    chatHistoryEl.appendChild(group);
-  }
-}
-
-// function getStatusCode(type, toolName = null) {
-//   if (type === "tool" && toolName && TOOL_STATUS_CODES[toolName]) {
-//     return TOOL_STATUS_CODES[toolName];
-//   }
-//   return TYPE_STATUS_CODES[type] || type?.toUpperCase()?.slice(0, 4) || "GEN";
-// }
-
-// function getStatusClass(type, toolName = null) {
-//   if (type === "tool" && toolName && TOOL_STATUS_CLASSES[toolName]) {
-//     return TOOL_STATUS_CLASSES[toolName];
-//   }
-//   return TYPE_STATUS_CLASSES[type] || "status-gen";
-// }
-
-// /**
-//  * 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;
-// }
-
 // entrypoint called from poll/WS communication, this is how all messages are rendered and updated
 // input is raw log format
 export function setMessages(messages) {
@@ -171,6 +70,12 @@ export function setMessages(messages) {
   const historyEmpty = !history || history.childElementCount === 0;
   const isLargeAppend = !historyEmpty && messages.length > 10;
   const cutoff = isLargeAppend ? Math.max(0, messages.length - 2) : 0;
+  const massRender = historyEmpty || isLargeAppend;
+
+  let mainScroller;
+  if (preferencesStore.autoScroll && history) {
+    mainScroller = new Scroller(history, { smooth: !massRender });
+  }
 
   // process messages
   for (let i = 0; i < messages.length; i++) {
@@ -180,6 +85,8 @@ export function setMessages(messages) {
 
   // reset _massRender flag
   _massRender = false;
+
+  if (mainScroller) mainScroller.reApplyScroll();
 }
 
 // entrypoint called from poll/WS communication, this is how all messages are rendered and updated
@@ -233,14 +140,44 @@ function getOrCreateMessageContainer(
   return container;
 }
 
+function getChatHistoryEl() {
+  if (!_chatHistory) _chatHistory = document.getElementById("chat-history");
+  return _chatHistory;
+}
+
+function getLastMessageGroup() {
+  return getChatHistoryEl()?.lastElementChild;
+}
+
+function appendToMessageGroup(
+  messageContainer,
+  position,
+  forceNewGroup = false,
+) {
+  const chatHistoryEl = getChatHistoryEl();
+  if (!chatHistoryEl) return;
+
+  const lastGroup = chatHistoryEl.lastElementChild;
+  const lastGroupType = lastGroup?.getAttribute("data-group-type");
+
+  if (!forceNewGroup && lastGroup && lastGroupType === position) {
+    lastGroup.appendChild(messageContainer);
+  } else {
+    const group = document.createElement("div");
+    group.classList.add("message-group", `message-group-${position}`);
+    group.setAttribute("data-group-type", position);
+    group.appendChild(messageContainer);
+    chatHistoryEl.appendChild(group);
+  }
+}
+
 function getLastProcessGroup(allowCompleted = true) {
   const lastContainer = getLastMessageGroup();
   if (!lastContainer) return null;
   const groups = lastContainer.querySelectorAll(".process-group");
   if (groups.length === 0) return null;
   const group = groups[groups.length - 1];
-  if (!allowCompleted && group.classList.contains("process-group-completed"))
-    return null;
+  if (!allowCompleted && isProcessGroupComplete(group)) return null;
 
   return group;
 }
@@ -268,45 +205,17 @@ function getOrCreateProcessGroup(id, allowCompleted = true) {
   messageContainer.appendChild(group);
 
   appendToMessageGroup(messageContainer, "left");
-  setActiveProcessGroup(group);
   return group;
 }
 
 function buildDetailPayload(stepData, extras = {}) {
   if (!stepData) return null;
   return {
-    type: stepData.type,
-    heading: stepData.heading,
-    content: stepData.content,
-    kvps: stepData.kvps,
-    timestamp: stepData.timestamp,
-    agentno: stepData.agentno,
-    toolName: stepData.toolName,
-    statusCode: stepData.statusCode,
-    statusClass: stepData.statusClass,
+    ...stepData,
     ...extras,
   };
 }
 
-function buildStepCopyContent(stepData) {
-  if (!stepData) return "";
-  const parts = [];
-  if (stepData.heading) parts.push(stepData.heading);
-  if (stepData.content) parts.push(stepData.content);
-  if (stepData.kvps) {
-    for (const [key, value] of Object.entries(stepData.kvps)) {
-      if (key === "reasoning" || key === "finished" || key === "attachments")
-        continue;
-      const valStr =
-        typeof value === "object"
-          ? JSON.stringify(value, null, 2)
-          : String(value);
-      parts.push(`${key}: ${valStr}`);
-    }
-  }
-  return parts.join("\n\n");
-}
-
 function drawProcessStep({
   id,
   title,
@@ -321,14 +230,22 @@ function drawProcessStep({
   ...additional
 }) {
   // group and steps DOM elements
-  const group = getOrCreateProcessGroup(id, allowCompletedGroup);
-  const stepsContainer = group.querySelector(".process-steps");
   const stepId = `process-step-${id}`;
   let step = document.getElementById(stepId);
 
+  const group =
+    getStepProcessGroup(step) ||
+    getOrCreateProcessGroup(id, allowCompletedGroup);
+  const stepsContainer = group.querySelector(".process-steps");
+
   const isNewStep = !step;
   const isGroupComplete = isProcessGroupComplete(group);
 
+  // Set start timestamp on group when first step is created
+  if (isNewStep && !group.hasAttribute("data-start-timestamp") && log.timestamp) {
+    group.setAttribute("data-start-timestamp", String(log.timestamp));
+  }
+
   if (isNewStep) {
     // create the base DOM element for the step
     step = document.createElement("div");
@@ -339,6 +256,11 @@ function drawProcessStep({
     step.setAttribute("data-log-type", log.type);
     step.setAttribute("data-step-id", id);
     step.setAttribute("data-agent-number", log.agentno);
+    
+    // set timestamp attribute (convert to milliseconds for duration calculation)
+    if (log.timestamp) {
+      step.setAttribute("data-timestamp", String(Math.round(log.timestamp * 1000)));
+    }
 
     // apply step classes
     if (classes) step.classList.add(...classes);
@@ -360,9 +282,6 @@ function drawProcessStep({
     // insert step
     appendTarget.appendChild(step);
 
-    // add interaction handlers - don't collapse when user interacts
-    addStepCollapseInteractionHandlers(step); // TODO? cleanup listeners?
-
     // expand all or current step based on settings
     const detailMode = preferencesStore.detailMode;
     // const isActiveGroup = group.classList.contains("active");
@@ -371,17 +290,28 @@ function drawProcessStep({
     if (detailMode === "expanded") {
       step.classList.add("expanded");
       // expand current step and schedule collapse of previous
-    } else if (detailMode === "current" && !isMassRender() && !isGroupComplete) {
-      step.classList.add("expanded");
-      const allExpandedSteps = stepsContainer.querySelectorAll(
-        ".process-step.expanded",
-      );
-      allExpandedSteps.forEach((expandedStep) => {
-        if (expandedStep.id !== stepId) {
+    } else if (
+      detailMode === "current" &&
+      !isMassRender() &&
+      !isGroupComplete
+    ) {
+      stepsContainer
+        .querySelectorAll(".process-step.expanded")
+        .forEach((expandedStep) => {
+          if (expandedStep.id !== stepId) {
             scheduleStepCollapse(expandedStep, STEP_COLLAPSE_DELAY_MS);
           }
         });
+      step.classList.add("expanded");
     }
+
+    // create step header
+    const stepHeader = ensureChild(
+      step,
+      ".process-step-header",
+      "div",
+      "process-step-header",
+    );
   }
 
   // is step expanded?
@@ -409,20 +339,8 @@ function drawProcessStep({
     "process-step-detail-scroll",
   );
 
-  // expand/collapse handler for step header
-  if (!stepHeader.hasAttribute("data-expand-handler")) {
-    stepHeader.setAttribute("data-expand-handler", "true");
-    stepHeader.addEventListener("click", (e) => {
-      e.stopPropagation();
-      cancelStepCollapse(step);
-      step.classList.toggle("expanded");
-      if (step.classList.contains("expanded")) {
-        step.setAttribute("data-user-pinned", "true");
-      } else {
-        step.removeAttribute("data-user-pinned");
-      }
-    });
-  }
+  // set click handlers
+  setupProcessStepHandlers(step, stepHeader);
 
   // header row - expand icon
   ensureChild(stepHeader, ".step-expand-icon", "span", "step-expand-icon");
@@ -445,7 +363,9 @@ function drawProcessStep({
   titleEl.textContent = title;
 
   // auto-scroller of the step detail
-  const detailScroller = new Scroller(stepDetailScroll); // scroller for step detail content
+  const detailScroller = new Scroller(stepDetailScroll, {
+    smooth: !isMassRender(),
+  }); // scroller for step detail content
 
   // update KVPs of the step detail
   const kvpsTable = drawKvpsIncremental(stepDetailScroll, kvps);
@@ -461,8 +381,7 @@ function drawProcessStep({
   stepDetailContent.textContent = content;
 
   // reapply scroll position (autoscroll if bottom) - only when expanded already and not mass rendering
-  if (isExpanded && !isMassRender()) detailScroller.reApplyScroll();
-
+  if (isExpanded) detailScroller.reApplyScroll();
 
   // Render action buttons: get/create container, clear, append
   const stepActionBtns = ensureChild(
@@ -477,15 +396,16 @@ function drawProcessStep({
     .filter(Boolean)
     .forEach((button) => stepActionBtns.appendChild(button));
 
-
   // update the process grop header by this step
   updateProcessGroupHeader(group);
 
   // remove shine from previous steps and add to this one if new and not completed
   if (isNewStep && !isGroupComplete) {
-    stepDetailScroll.querySelectorAll(".step-title.shiny-text").forEach((el) => {
-      el.classList.remove("shiny-text");
-    });
+    stepDetailScroll
+      .querySelectorAll(".step-title.shiny-text")
+      .forEach((el) => {
+        el.classList.remove("shiny-text");
+      });
     titleEl.classList.add("shiny-text");
   }
 
@@ -516,6 +436,8 @@ function drawStandaloneMessage({
   kvps = null,
   actionButtons = [],
 }) {
+  // end last process group on any standalone messge
+  completeLastProcessGroup();
 
   const container = getOrCreateMessageContainer(
     id,
@@ -535,33 +457,10 @@ function drawStandaloneMessage({
     mainClass,
   });
 
-  // Collapsible: show ~10 lines with fade, expand button reveals full content
-  messageDiv.classList.add("message-collapsible");
-
-  const expandBtn = ensureChild(messageDiv, ".expand-btn", "button", "expand-btn");
-  expandBtn.textContent = messageDiv.classList.contains("expanded") ? "Show less" : "Show more";
-  expandBtn.onclick = () => {
-    messageDiv.classList.toggle("expanded");
-    expandBtn.textContent = messageDiv.classList.contains("expanded") ? "Show less" : "Show more";
-  };
-
-  // Detect overflow after render - CSS handles visibility based on .has-overflow class
-  requestAnimationFrame(() => {
-    const body = messageDiv.querySelector(".message-body");
-    messageDiv.classList.toggle("has-overflow", body.scrollHeight > body.clientHeight);
-  });
-
-  // Render action buttons: get/create container, clear, append
-  const actionButtonsContainer = ensureChild(
-    messageDiv,
-    ".step-action-buttons",
-    "div",
-    "step-action-buttons",
-  );
-  actionButtonsContainer.textContent = "";
-  (actionButtons || [])
-    .filter(Boolean)
-    .forEach((button) => actionButtonsContainer.appendChild(button));
+  // Collapsible with action buttons
+  setupCollapsible(messageDiv, ".step-action-buttons", false, actionButtons);
+  // Collapsible with action buttons
+  setupCollapsible(messageDiv, ".step-action-buttons", false, actionButtons);
 
   return container;
 }
@@ -577,6 +476,7 @@ export function _drawMessage({
   markdown = false,
   latex = false,
   mainClass = "",
+  smoothStream = false,
 }) {
   // Find existing message div or create new one
   let messageDiv = messageContainer.querySelector(".message");
@@ -586,8 +486,10 @@ export function _drawMessage({
     messageContainer.appendChild(messageDiv);
   }
 
-  // Update message classes
-  messageDiv.className = `message ${mainClass} ${messageClasses.join(" ")}`;
+  // Update message classes (preserve collapsible state)
+  const preserve = ["message-collapsible", "expanded", "has-overflow"]
+    .filter((c) => messageDiv.classList.contains(c)).join(" ");
+  messageDiv.className = `message ${mainClass} ${messageClasses.join(" ")} ${preserve}`;
 
   // Handle heading (important for error/rate_limit messages that show context)
   if (heading) {
@@ -604,7 +506,7 @@ export function _drawMessage({
       headingElement.appendChild(headingH4);
     }
     headingH4.innerHTML = convertIcons(escapeHTML(heading));
-
+  } else {
     // Remove heading if it exists but heading is null
     const existingHeading = messageDiv.querySelector(".msg-heading");
     if (existingHeading) {
@@ -621,7 +523,7 @@ export function _drawMessage({
   }
 
   // reapply scroll position or autoscroll
-  const scroller = new Scroller(bodyDiv);
+  const scroller = new Scroller(bodyDiv, { smooth: !isMassRender() });
 
   // Handle KVPs incrementally
   drawKvpsIncremental(bodyDiv, kvps, false);
@@ -636,11 +538,11 @@ export function _drawMessage({
       }
       contentDiv.className = `msg-content ${contentClasses.join(" ")}`;
 
-      let spanElement = contentDiv.querySelector("span");
-      if (!spanElement) {
-        spanElement = document.createElement("span");
-        contentDiv.appendChild(spanElement);
-      }
+      // let spanElement = contentDiv.querySelector("span");
+      // if (!spanElement) {
+      //   spanElement = document.createElement("span");
+      //   contentDiv.appendChild(spanElement);
+      // }
 
       let processedContent = content;
       processedContent = convertImageTags(processedContent);
@@ -650,11 +552,13 @@ export function _drawMessage({
       processedContent = convertPathsToLinks(processedContent);
       processedContent = addBlankTargetsToLinks(processedContent);
 
-      spanElement.innerHTML = processedContent;
+      // do a smooth stream if requested
+      if (smoothStream) smoothRender(contentDiv, processedContent);
+      else contentDiv.innerHTML = processedContent;
 
       // KaTeX rendering for markdown
       if (latex) {
-        spanElement.querySelectorAll("latex").forEach((element) => {
+        contentDiv.querySelectorAll("latex").forEach((element) => {
           katex.render(element.innerHTML, element, {
             throwOnError: false,
           });
@@ -675,13 +579,14 @@ export function _drawMessage({
         preElement.className = `msg-content ${contentClasses.join(" ")}`;
       }
 
-      let spanElement = preElement.querySelector("span");
-      if (!spanElement) {
-        spanElement = document.createElement("span");
-        preElement.appendChild(spanElement);
-      }
+      // let spanElement = preElement.querySelector("span");
+      // if (!spanElement) {
+      //   spanElement = document.createElement("span");
+      //   preElement.appendChild(spanElement);
+      // }
 
-      spanElement.innerHTML = convertHTML(content);
+      if (smoothStream) smoothRender(preElement, convertHTML(content));
+      else preElement.innerHTML = convertHTML(content);
     }
   } else {
     // Remove content if it exists but content is empty
@@ -769,15 +674,22 @@ export function drawMessageAgent({
   const headerLabels = [
     kvps?.tool_name && { label: kvps.tool_name, class: "tool-name-badge" },
   ].filter(Boolean);
-  const actionButtons = thoughtsText.trim()
-    ? [
-        createActionButton("detail", "", () =>
-          stepDetailStore.showStepDetail(buildDetailPayload(arguments[0], { headerLabels })),
-        ),
-        createActionButton("speak", "", () => speechStore.speak(thoughtsText)),
-        createActionButton("copy", "", () => copyToClipboard(thoughtsText)),
-      ].filter(Boolean)
-    : [];
+  const actionButtons = [
+    createActionButton("detail", "", () =>
+      stepDetailStore.showStepDetail(
+        buildDetailPayload(arguments[0], { headerLabels }),
+      ),
+    ),
+  ];
+
+  if (thoughtsText.trim()) {
+    actionButtons.push(
+      createActionButton("speak", "", () => speechStore.speak(thoughtsText)),
+    );
+    actionButtons.push(
+      createActionButton("copy", "", () => copyToClipboard(thoughtsText)),
+    );
+  }
 
   return drawProcessStep({
     id,
@@ -803,8 +715,6 @@ export function drawMessageResponse({
   // response of subordinate agent - render as process step
   if (agentno && agentno > 0) {
     const title = getStepTitle(heading, kvps, type);
-    const statusCode = getStatusCode(type);
-    const statusClass = getStatusClass(type);
     const contentText = String(content ?? "");
     const actionButtons = contentText.trim()
       ? [
@@ -815,8 +725,8 @@ export function drawMessageResponse({
     return drawProcessStep({
       id,
       title,
-      statusClass,
-      statusCode,
+      // statusClass,
+      statusCode: "RSP",
       kvps,
       type,
       heading,
@@ -832,14 +742,22 @@ export function drawMessageResponse({
   const group = getLastProcessGroup();
   let container = null;
 
-  if (group)
+  if (group) {
+    // new response, collapse all previous steps once
+    if (!group.querySelector(".process-group-response")) {
+      if (preferencesStore.detailMode == "current")
+        group.querySelectorAll(".process-step").forEach((step) => {
+          scheduleStepCollapse(step);
+        });
+    }
+
     container = ensureChild(
       group,
       ".process-group-response",
       "div",
       "process-group-response",
     );
-  else container = getOrCreateMessageContainer(id, "left");
+  } else container = getOrCreateMessageContainer(id, "left");
 
   const messageDiv = _drawMessage({
     messageContainer: container,
@@ -851,25 +769,10 @@ export function drawMessageResponse({
     markdown: true,
     latex: true,
     mainClass: "message-agent-response",
+    smoothStream: !isMassRender(), // stream smoothly if not in mass render mode
   });
 
-  // Collapsible: show ~10 lines with fade, expand button reveals full content
-  messageDiv.classList.add("message-collapsible");
-
-  const expandBtn = ensureChild(messageDiv, ".expand-btn", "button", "expand-btn");
-  expandBtn.textContent = messageDiv.classList.contains("expanded") ? "Show less" : "Show more";
-  expandBtn.onclick = () => {
-    messageDiv.classList.toggle("expanded");
-    expandBtn.textContent = messageDiv.classList.contains("expanded") ? "Show less" : "Show more";
-  };
-
-  // Detect overflow after render - CSS handles visibility based on .has-overflow class
-  requestAnimationFrame(() => {
-    const body = messageDiv.querySelector(".message-body");
-    messageDiv.classList.toggle("has-overflow", body.scrollHeight > body.clientHeight);
-  });
-
-  // Render action buttons: get/create container, clear, append
+  // Collapsible with action buttons
   const responseText = String(content ?? "");
   const responseActionButtons = responseText.trim()
     ? [
@@ -877,17 +780,7 @@ export function drawMessageResponse({
         createActionButton("copy", "", () => copyToClipboard(responseText)),
       ].filter(Boolean)
     : [];
-  // Look for direct child only to avoid finding nested code block buttons
-  const actionButtonsContainer = ensureChild(
-    messageDiv,
-    ":scope > .step-action-buttons",
-    "div",
-    "step-action-buttons",
-  );
-  actionButtonsContainer.textContent = "";
-  responseActionButtons.forEach((button) =>
-    actionButtonsContainer.appendChild(button),
-  );
+  setupCollapsible(messageDiv, ":scope > .step-action-buttons", !isMassRender(), responseActionButtons);
 
   if (group) updateProcessGroupHeader(group);
 
@@ -908,6 +801,9 @@ export function drawMessageUser({
     true,
   );
 
+  // end last process group on any user message
+  completeLastProcessGroup();
+
   // Find existing message div or create new one
   let messageDiv = messageContainer.querySelector(".message");
   if (!messageDiv) {
@@ -1048,7 +944,9 @@ export function drawMessageTool({
   const actionButtons = contentText.trim()
     ? [
         createActionButton("detail", "", () =>
-          stepDetailStore.showStepDetail(buildDetailPayload(arguments[0], { headerLabels })),
+          stepDetailStore.showStepDetail(
+            buildDetailPayload(arguments[0], { headerLabels }),
+          ),
         ),
         createActionButton("speak", "", () => speechStore.speak(contentText)),
         createActionButton("copy", "", () => copyToClipboard(contentText)),
@@ -1080,11 +978,8 @@ export function drawMessageCodeExe({
 }) {
   let title = "Code Execution";
   // show command at the start and end
-  if (
-    kvps?.code &&
-    /done_all|code_execution_tool/.test(heading || "")
-  ) {
-    const s = kvps.session ?? kvps.Session;
+  if (kvps?.code && /done_all|code_execution_tool/.test(heading || "")) {
+    const s = kvps.session;
     title = `${s != null ? `[${s}] ` : ""}${kvps.runtime || "bash"}> ${kvps.code.trim()}`;
   } else {
     // during execution show the original heading (current step)
@@ -1093,12 +988,15 @@ export function drawMessageCodeExe({
 
   // KVPS to show
   const displayKvps = {};
-  if (kvps?.runtime) displayKvps.runtime = kvps.runtime;
-  if (kvps?.session) displayKvps.session = kvps.session;
+  // if (kvps?.runtime) displayKvps.runtime = kvps.runtime;
+  // if (kvps?.session>=0) displayKvps.session = kvps.session;
 
   const headerLabels = [
     kvps?.runtime && { label: kvps.runtime, class: "tool-name-badge" },
-    kvps?.session != null && { label: `Session ${kvps.session}`, class: "header-label" },
+    kvps?.session != null && {
+      label: `Session ${kvps.session}`,
+      class: "header-label",
+    },
   ].filter(Boolean);
 
   // render the standard step
@@ -1106,7 +1004,9 @@ export function drawMessageCodeExe({
   const outputText = String(content ?? "");
   const actionButtons = [
     createActionButton("detail", "", () =>
-      stepDetailStore.showStepDetail(buildDetailPayload(arguments[0], { headerLabels })),
+      stepDetailStore.showStepDetail(
+        buildDetailPayload(arguments[0], { headerLabels }),
+      ),
     ),
     commandText.trim()
       ? createActionButton("copy", "Command", () =>
@@ -1146,7 +1046,9 @@ export function drawMessageBrowser({
   const actionButtons = answerText.trim()
     ? [
         createActionButton("detail", "", () =>
-          stepDetailStore.showStepDetail(buildDetailPayload(arguments[0], { headerLabels: [] })),
+          stepDetailStore.showStepDetail(
+            buildDetailPayload(arguments[0], { headerLabels: [] }),
+          ),
         ),
         createActionButton("speak", "", () => speechStore.speak(answerText)),
         createActionButton("copy", "", () => copyToClipboard(answerText)),
@@ -1185,7 +1087,9 @@ export function drawMessageMcp({
   const actionButtons = contentText.trim()
     ? [
         createActionButton("detail", "", () =>
-          stepDetailStore.showStepDetail(buildDetailPayload(arguments[0], { headerLabels })),
+          stepDetailStore.showStepDetail(
+            buildDetailPayload(arguments[0], { headerLabels }),
+          ),
         ),
         createActionButton("speak", "", () => speechStore.speak(contentText)),
         createActionButton("copy", "", () => copyToClipboard(contentText)),
@@ -1224,7 +1128,9 @@ export function drawMessageSubagent({
   const actionButtons = contentText.trim()
     ? [
         createActionButton("detail", "", () =>
-          stepDetailStore.showStepDetail(buildDetailPayload(arguments[0], { headerLabels })),
+          stepDetailStore.showStepDetail(
+            buildDetailPayload(arguments[0], { headerLabels }),
+          ),
         ),
         createActionButton("speak", "", () => speechStore.speak(contentText)),
         createActionButton("copy", "", () => copyToClipboard(contentText)),
@@ -1251,7 +1157,7 @@ export function drawMessageInfo({
   kvps = null,
   ...additional
 }) {
-  const title = cleanStepTitle(heading);
+  const title = cleanStepTitle(heading || content);
   let displayKvps = { ...kvps };
   const contentText = String(content ?? "");
   const actionButtons = contentText.trim()
@@ -1284,7 +1190,7 @@ export function drawMessageUtil({
   agentno = 0,
   ...additional
 }) {
-  const title = cleanStepTitle(heading);
+  const title = cleanStepTitle(heading || content);
   const contentText = String(content ?? "");
   const actionButtons = contentText.trim()
     ? [
@@ -1317,8 +1223,6 @@ export function drawMessageHint({
   ...additional
 }) {
   const title = getStepTitle(heading, kvps, type);
-  const statusCode = getStatusCode(type);
-  const statusClass = getStatusClass(type);
   const contentText = String(content ?? "");
   const actionButtons = contentText.trim()
     ? [
@@ -1330,8 +1234,8 @@ export function drawMessageHint({
   return drawStandaloneMessage({
     id,
     title,
-    statusClass,
-    statusCode,
+    // statusClass,
+    statusCode: "HNT",
     kvps,
     type,
     heading,
@@ -1352,7 +1256,7 @@ export function drawMessageProgress({
   agentno = 0,
   ...additional
 }) {
-  const title = cleanStepTitle(heading);
+  const title = cleanStepTitle(heading || content);
   let displayKvps = { ...kvps };
 
   return drawProcessStep({
@@ -1375,7 +1279,7 @@ export function drawMessageWarning({
   kvps = null,
   ...additional
 }) {
-  const title = cleanStepTitle(heading);
+  const title = cleanStepTitle(heading || content);
   let displayKvps = { ...kvps };
   const contentText = String(content ?? "");
   const actionButtons = contentText.trim()
@@ -1416,9 +1320,13 @@ export function drawMessageError({
   ...additional
 }) {
   const contentText = String(content ?? "");
+  const errorText = kvps?.text || "Error";
+  const errorHeading = errorText ? `Error - ${errorText}` : "Error";
   const actionButtons = [
     createActionButton("detail", "", () =>
-      stepDetailStore.showStepDetail(buildDetailPayload(arguments[0], { headerLabels: [] })),
+      stepDetailStore.showStepDetail(
+        buildDetailPayload(arguments[0], { headerLabels: [] }),
+      ),
     ),
     contentText.trim()
       ? createActionButton("copy", "", () => copyToClipboard(contentText))
@@ -1427,17 +1335,15 @@ export function drawMessageError({
 
   return drawStandaloneMessage({
     id,
-    heading,
+    heading: errorHeading,
     content,
     position: "mid",
     containerClasses: ["ai-container", "center-container"],
     mainClass: "message-error",
-    kvps,
     actionButtons,
   });
 }
 
-
 function drawKvpsIncremental(container, kvps, latex) {
   // existing KVPS table
   let table = container.querySelector(".msg-kvps");
@@ -1664,7 +1570,9 @@ const extractTableTSV = (table) =>
   [...table.rows]
     .map((row) =>
       [...row.cells]
-        .map((cell) => cell.textContent.replace(/\t/g, "  ").replace(/\n/g, " "))
+        .map((cell) =>
+          cell.textContent.replace(/\t/g, "  ").replace(/\n/g, " "),
+        )
         .join("\t"),
     )
     .join("\n");
@@ -1677,7 +1585,9 @@ function adjustMarkdownRender(element) {
     const actionsDiv = document.createElement("div");
     actionsDiv.className = "step-action-buttons";
     actionsDiv.appendChild(
-      createActionButton("copy", "", () => copyToClipboard(extractTableTSV(el)))
+      createActionButton("copy", "", () =>
+        copyToClipboard(extractTableTSV(el)),
+      ),
     );
     wrapper.appendChild(actionsDiv);
   });
@@ -1690,7 +1600,7 @@ function adjustMarkdownRender(element) {
     const actionsDiv = document.createElement("div");
     actionsDiv.className = "step-action-buttons";
     actionsDiv.appendChild(
-      createActionButton("copy", "", () => copyToClipboard(code.textContent))
+      createActionButton("copy", "", () => copyToClipboard(code.textContent)),
     );
     wrapper.appendChild(actionsDiv);
   });
@@ -1714,21 +1624,26 @@ function adjustMarkdownRender(element) {
 }
 
 export class Scroller {
-  constructor(element) {
+  constructor(element, { smooth = false } = {}) {
     this.element = element;
+    this.smooth = smooth;
     this.wasAtBottom = this.isAtBottom();
   }
 
   isAtBottom(tolerance = 80) {
-    const scrollHeight = this.element.scrollHeight;
-    const clientHeight = this.element.clientHeight;
-    const distanceFromBottom =
-      scrollHeight - this.element.scrollTop - clientHeight;
-    return distanceFromBottom <= tolerance;
+    const { scrollHeight, clientHeight, scrollTop } = this.element;
+    return scrollHeight - scrollTop - clientHeight <= tolerance;
+  }
+
+  scrollToBottom() {
+    const target = this.element.scrollHeight;
+    this.smooth
+      ? this.element.scrollTo({ top: target, behavior: "smooth" })
+      : (this.element.scrollTop = target);
   }
 
   reApplyScroll() {
-    if (this.wasAtBottom && !this.isAtBottom()) this.element.scrollTop = this.element.scrollHeight;
+    if (this.wasAtBottom && !this.isAtBottom()) this.scrollToBottom();
   }
 }
 
@@ -1759,7 +1674,6 @@ function createProcessGroup(id) {
       <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">footprint</span><span class="metric-value">0</span></span>
       <span class="metric-notifications" title="Warnings/Info/Hint" hidden><span class="material-symbols-outlined">priority_high</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>
   `;
 
@@ -1815,22 +1729,58 @@ function getNestedContainer(parentStep) {
  */
 function scheduleStepCollapse(stepElement, delayMs) {
   // skip if any existing timeout for this step
-  if (stepElement.hasAttribute("data-collapse-timeout-id")) {
-    return;
-  }
+  if (stepElement.hasAttribute("data-collapse-timeout-id")) return;
+  // skip already collapsed steps
+  if (!stepElement.classList.contains("expanded")) return;
 
   // Schedule the collapse
   const timeoutId = setTimeout(() => {
-    stepElement.classList.remove("expanded");
     stepElement.removeAttribute("data-collapse-timeout-id");
-    // Clear user-pinned flag when auto-collapsing
-    stepElement.removeAttribute("data-user-pinned");
+
+    if (stepElement.dataset.clicked === "true") {
+      console.log(`Skip clicked collapse: ${stepElement.id}`);
+      return;
+    }
+
+    if (stepElement.matches(":hover")) {
+      console.log(`Delay hover collapse: ${stepElement.id}`);
+      scheduleStepCollapse(stepElement, STEP_COLLAPSE_HOVER_DELAY_MS);
+      return;
+    }
+
+    console.log(`Collapse step: ${stepElement.id}`);
+    stepElement.classList.remove("expanded");
   }, delayMs);
 
   // Store the timeout ID
   stepElement.setAttribute("data-collapse-timeout-id", String(timeoutId));
 }
 
+function setupProcessStepHandlers(stepElement, stepHeader) {
+  if (!stepElement.hasAttribute("data-step-handlers")) {
+    stepElement.setAttribute("data-step-handlers", "true");
+
+    stepElement.addEventListener(
+      "click",
+      function handler() {
+        stepElement.dataset.clicked = "true";
+        console.log(`Step clicked: ${stepElement.id}`);
+      },
+      { once: true },
+    );
+  }
+
+  if (stepHeader && !stepHeader.hasAttribute("data-expand-handler")) {
+    stepHeader.setAttribute("data-expand-handler", "true");
+    stepHeader.addEventListener("click", (e) => {
+      e.stopPropagation();
+      cancelStepCollapse(stepElement);
+      stepElement.dataset.clicked = "true";
+      stepElement.classList.toggle("expanded");
+    });
+  }
+}
+
 /**
  * Cancel a scheduled collapse for a step
  */
@@ -1842,46 +1792,6 @@ function cancelStepCollapse(stepElement) {
   stepElement.removeAttribute("data-collapse-timeout-id");
 }
 
-/**
- * Add interaction handlers to prevent fighting with user
- * - Hover: cancels the collapse timeout (keeps step open while reading)
- * - Leave: starts a new timeout ONLY if user hasn't clicked (no explicit interaction)
- * - Click anywhere on step: permanently cancels auto-collapse (user wants it open)
- */
-function addStepCollapseInteractionHandlers(stepElement) {
-  // On hover, cancel the timeout to keep it open while user is reading
-  stepElement.addEventListener("mouseenter", () => {
-    if (stepElement.classList.contains("expanded")) {
-      cancelStepCollapse(stepElement);
-    }
-  });
-
-  // On leave, start a new timeout ONLY if user hasn't explicitly clicked
-  // and only in "current" mode (in "expanded" mode, everything stays open)
-  stepElement.addEventListener("mouseleave", () => {
-    const detailMode = preferencesStore.detailMode;
-    // Don't schedule collapse in "expanded" mode - user wants everything open
-    if (detailMode === "expanded") return;
-
-    // Don't restart timeout if user has explicitly interacted (clicked)
-    if (
-      stepElement.classList.contains("expanded") &&
-      !stepElement.hasAttribute("data-user-pinned")
-    ) {
-      scheduleStepCollapse(stepElement, STEP_COLLAPSE_DELAY_MS);
-    }
-  });
-
-  // On click anywhere on step, permanently cancel auto-collapse
-  stepElement.addEventListener("click", () => {
-    if (stepElement.classList.contains("expanded")) {
-      cancelStepCollapse(stepElement);
-      // Mark as user-pinned so mouseleave won't restart timeout
-      stepElement.setAttribute("data-user-pinned", "true");
-    }
-  });
-}
-
 /**
  * Find parent delegation step for nested agents (DOM-first, reverse scan).
  */
@@ -1905,7 +1815,6 @@ function findParentDelegationStep(group, agentno) {
  * 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, 100);
@@ -1966,7 +1875,6 @@ function cleanStepTitle(text, maxLength = 100) {
   return truncateText(cleaned, maxLength);
 }
 
-
 /**
  * Update process group header with step count, status, and metrics
  */
@@ -2013,7 +1921,6 @@ function updateProcessGroupHeader(group) {
       const code = lastStep.getAttribute("data-step-code");
       badgeEl.outerHTML = `<span class="step-badge ${code}">${code}</span>`;
     }
-
   }
 
   // Update step count in metrics - All GEN steps from all agents per process group
@@ -2033,26 +1940,42 @@ function updateProcessGroupHeader(group) {
     timeMetricEl.textContent = `${hours}:${minutes}`;
   }
 
-  // Update duration metric
-  const durationMetricEl = metricsEl?.querySelector(
-    ".metric-duration .metric-value",
+  const firstTimestampMs = parseInt(
+    steps[0]?.getAttribute("data-timestamp") || "0",
+    10,
   );
-  if (durationMetricEl && steps.length > 0) {
-    const firstTimestampMs = parseInt(
-      steps[0]?.getAttribute("data-timestamp") || "0",
-      10,
-    );
+  const lastTimestampMs = parseInt(
+    steps[steps.length - 1]?.getAttribute("data-timestamp") || "0",
+    10,
+  );
+  const durationText =
+    isCompleted &&
+    metricsEl &&
+    steps.length > 0 &&
+    firstTimestampMs > 0 &&
+    lastTimestampMs > 0 &&
+    formatDuration(Math.max(0, lastTimestampMs - firstTimestampMs));
 
-    const lastStep = steps[steps.length - 1];
-    const lastTimestampMs = parseInt(
-      lastStep.getAttribute("data-timestamp") || "0",
-      10,
-    );
-
-    const totalDurationMs = Math.max(0, lastTimestampMs - firstTimestampMs);
-
-    durationMetricEl.textContent = formatDuration(totalDurationMs);
-  }
+  const durationMetricEl =
+    durationText &&
+    (() => {
+      const container = ensureChild(
+        metricsEl,
+        ".metric-duration",
+        "span",
+        "metric-duration",
+      );
+      container.title = "Duration";
+      const icon = ensureChild(
+        container,
+        ".material-symbols-outlined",
+        "span",
+        "material-symbols-outlined",
+      );
+      icon.textContent = "timer";
+      return ensureChild(container, ".metric-value", "span", "metric-value");
+    })();
+  durationMetricEl && (durationMetricEl.textContent = durationText);
 
   if (notificationsEl) {
     const counts = { warning: 0, info: 0, hint: 0 };
@@ -2084,15 +2007,28 @@ function updateProcessGroupHeader(group) {
       notificationsEl.hidden = true;
     }
   }
-
-
 }
 
 function isProcessGroupComplete(group) {
+  // manually closed group
+  if (group?.hasAttribute?.("data-group-complete")) return true;
+  // naturally completed group
   const response = group.querySelector(".process-group-response");
   return !!response;
 }
 
+// manually complete last process group
+export function completeLastProcessGroup() {
+  const group = getLastProcessGroup();
+  if (!group || isProcessGroupComplete(group)) return;
+  group.setAttribute("data-group-complete", "true");
+  updateProcessGroupHeader(group);
+}
+
+function getStepProcessGroup(step) {
+  return step?.closest(".process-group");
+}
+
 /**
  * Truncate text to a maximum length
  */
@@ -2103,66 +2039,6 @@ function truncateText(text, maxLength) {
   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
-  // const statusEl = group.querySelector(".group-status");
-  // if (statusEl) {
-  //   // statusEl.innerHTML = '<span class="badge-icon material-symbols-outlined">check</span>END';
-  //   statusEl.innerHTML = "END";
-  //   statusEl.className = "step-badge status-end group-status";
-  // }
-
-  // // 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");
-
-  // Collapse all expanded steps when processing is done (in "current" mode) with delay
-  const detailMode = preferencesStore.detailMode;
-  if (detailMode === "current") {
-    // Schedule collapse for all expanded steps (deterministic)
-    const allExpandedSteps = group.querySelectorAll(
-      ".process-step.expanded",
-    );
-    allExpandedSteps.forEach((expandedStep) => {
-      scheduleStepCollapse(expandedStep, FINAL_STEP_COLLAPSE_DELAY_MS);
-    });
-  }
-
-  // Calculate final duration from backend data (difference between first and last timestamps)
-  const steps = group.querySelectorAll(".process-step");
-  const firstTimestampMs = parseInt(
-    steps[0]?.getAttribute("data-timestamp") || "0",
-    10,
-  );
-  const lastTimestampMs = parseInt(
-    steps[steps.length - 1]?.getAttribute("data-timestamp") || "0",
-    10,
-  );
-  const totalDurationMs = Math.max(0, lastTimestampMs - firstTimestampMs);
-
-  // 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);
-  }
-}
-
 // gets or creates a child DOM element
 function ensureChild(parent, selector, tagName, ...classNames) {
   let el = parent.querySelector(selector);
@@ -2174,8 +2050,86 @@ function ensureChild(parent, selector, tagName, ...classNames) {
   return el;
 }
 
+// Setup collapsible message with expand button and action buttons
+function setupCollapsible(messageDiv, containerSelector, initialExpanded, actionButtons = []) {
+  messageDiv.classList.add("message-collapsible");
+  messageDiv.classList.toggle("expanded", initialExpanded);
+
+  const container = ensureChild(messageDiv, containerSelector, "div", "step-action-buttons");
+  container.textContent = "";
+
+  const btn = ensureChild(container, ".expand-btn", "button", "expand-btn");
+  const syncBtn = () => {
+    const exp = messageDiv.classList.contains("expanded");
+    btn.textContent = exp ? "Show less" : "Show more";
+    btn.classList.toggle("show-less-btn", exp);
+    btn.classList.toggle("show-more-btn", !exp);
+  };
+  syncBtn();
+  btn.onclick = () => { messageDiv.classList.toggle("expanded"); syncBtn(); };
+
+  actionButtons.filter(Boolean).forEach((b) => container.appendChild(b));
+
+  // Detect overflow after render (skip if already detected to avoid scroll disruption)
+  if (!messageDiv.classList.contains("has-overflow")) {
+    requestAnimationFrame(() => {
+      const body = messageDiv.querySelector(".message-body");
+      if (!body) return;
+      
+      // calculate max height without touching DOM (no scroll jitter)
+      const fontSize = parseFloat(getComputedStyle(body).fontSize || "16");
+      const maxHeight = messageDiv.classList.contains("expanded") 
+        ? fontSize * 15 
+        : body.clientHeight;
+        
+      messageDiv.classList.toggle("has-overflow", body.scrollHeight > maxHeight);
+    });
+  }
+}
+
 // returns true if this is the initial render of a chat eg. when reloading window, switching chat or catching up after a break
 // returns false when already in a rendered chat and adding messages regurarly
 function isMassRender() {
   return _massRender;
 }
+
+// smooth fade in animation for new chunks when streaming
+function smoothRender(element, newContent, delay = 350) {
+  // skip on mass render
+  if (isMassRender()) {
+    element.innerHTML = newContent; 
+    return;
+  }
+
+  element.dataset.smoothPendingHtml = newContent;
+
+  if (element.dataset.smoothTimeoutId) return;
+
+  const timeoutId = window.setTimeout(() => {
+    const pending = element.dataset.smoothPendingHtml || "";
+    delete element.dataset.smoothPendingHtml;
+    delete element.dataset.smoothTimeoutId;
+
+    const existing = element.querySelector(
+      ":scope > div.smooth-render-visible",
+    );
+    if (existing) {
+      existing.classList.remove("smooth-render-visible");
+      existing.classList.add("smooth-render-invisible");
+
+      existing.addEventListener("animationend", () => existing.remove(), {
+        once: true,
+      });
+    }
+
+    const nextLayer = document.createElement("div");
+    nextLayer.className = "smooth-render-visible";
+    nextLayer.innerHTML = pending;
+    element.appendChild(nextLayer);
+
+    // Keep container height stable while layers are absolute
+    element.style.height = `${nextLayer.scrollHeight}px`;
+  }, delay);
+
+  element.dataset.smoothTimeoutId = String(timeoutId);
+}