From 9dd28eec0fc2c303da9f6c98c5843b9c297dd9df Mon Sep 17 00:00:00 2001
From: 3clyp50 <real.eclypso@gmail.com>
Date: Wed, 28 Jan 2026 16:39:15 +0100
Subject: [PATCH 1/4] segments copy btn in step details

---
 .../modals/memory/memory-detail-modal.html    |  2 -
 .../process-step-detail.html                  | 75 ++++++++-----------
 .../process-step-detail/step-detail-store.js  | 40 +++++++---
 3 files changed, 61 insertions(+), 56 deletions(-)

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..483e3254e 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,12 +50,13 @@
                     </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>
 
@@ -66,14 +64,8 @@
                         <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="kvps-display"><template x-for="[key, value] in Object.entries($store.stepDetail.selectedStepForDetail?.kvps || {})" :key="key"><span class="kvp-line"><span class="kvp-key" x-text="$store.stepDetail.formatKey(key)"></span><span class="kvp-value" x-text="$store.stepDetail.formatValue(value)"></span></span></template></div>
+                                <div class="step-action-buttons" data-segment="details"></div>
                             </div>
                         </template>
 
@@ -82,6 +74,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 +92,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 +161,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 +197,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 +216,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;
@@ -248,34 +228,41 @@
         .kvps-display {
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
+            gap: 0.25rem;
+            font-size: 0.9rem;
+            line-height: 1.5;
         }
 
-        .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-line {
+            display: block;
         }
 
         .kvp-key {
-            font-weight: 600;
-            color: var(--color-text);
-            opacity: 0.7;
-            font-size: 0.8rem;
-            text-transform: uppercase;
+            color: var(--color-text-muted);
+            margin-right: 0.5rem;
+        }
+
+        .kvp-key::after {
+            content: ':';
         }
 
         .kvp-value {
             color: var(--color-text);
-            font-size: 0.9rem;
             white-space: pre-wrap;
             word-break: break-word;
         }
 
+        .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 {
             scrollbar-width: none;
             -ms-overflow-style: none;
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..bcbb4598f 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,40 @@ 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;
+
+    // heading
+    document.querySelector('[data-segment="heading"]')?.replaceChildren(
+      createActionButton("copy", "", () => copyToClipboard(this.cleanHeading(step.heading)))
+    );
+
+    // details (kvps)
+    const kvpsText = Object.entries(step.kvps || {})
+      .map(([k, v]) => `${this.formatKey(k)}: ${this.formatValue(v)}`)
+      .join('\n');
+    document.querySelector('[data-segment="details"]')?.replaceChildren(
+      createActionButton("copy", "", () => copyToClipboard(kvpsText))
+    );
+
+    // content
+    document.querySelector('[data-segment="content"]')?.replaceChildren(
+      createActionButton("copy", "", () => copyToClipboard(step.content))
+    );
+  },
+
   // 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)

From d3d1fe6184ee64babef55097d43891deac261fc1 Mon Sep 17 00:00:00 2001
From: 3clyp50 <real.eclypso@gmail.com>
Date: Wed, 28 Jan 2026 16:39:15 +0100
Subject: [PATCH 2/4] segments copy btn in step details

---
 .../modals/memory/memory-detail-modal.html    |  2 -
 .../process-step-detail.html                  | 75 ++++++++-----------
 .../process-step-detail/step-detail-store.js  | 40 +++++++---
 3 files changed, 61 insertions(+), 56 deletions(-)

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..483e3254e 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,12 +50,13 @@
                     </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>
 
@@ -66,14 +64,8 @@
                         <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="kvps-display"><template x-for="[key, value] in Object.entries($store.stepDetail.selectedStepForDetail?.kvps || {})" :key="key"><span class="kvp-line"><span class="kvp-key" x-text="$store.stepDetail.formatKey(key)"></span><span class="kvp-value" x-text="$store.stepDetail.formatValue(value)"></span></span></template></div>
+                                <div class="step-action-buttons" data-segment="details"></div>
                             </div>
                         </template>
 
@@ -82,6 +74,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 +92,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 +161,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 +197,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 +216,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;
@@ -248,34 +228,41 @@
         .kvps-display {
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
+            gap: 0.25rem;
+            font-size: 0.9rem;
+            line-height: 1.5;
         }
 
-        .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-line {
+            display: block;
         }
 
         .kvp-key {
-            font-weight: 600;
-            color: var(--color-text);
-            opacity: 0.7;
-            font-size: 0.8rem;
-            text-transform: uppercase;
+            color: var(--color-text-muted);
+            margin-right: 0.5rem;
+        }
+
+        .kvp-key::after {
+            content: ':';
         }
 
         .kvp-value {
             color: var(--color-text);
-            font-size: 0.9rem;
             white-space: pre-wrap;
             word-break: break-word;
         }
 
+        .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 {
             scrollbar-width: none;
             -ms-overflow-style: none;
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..bcbb4598f 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,40 @@ 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;
+
+    // heading
+    document.querySelector('[data-segment="heading"]')?.replaceChildren(
+      createActionButton("copy", "", () => copyToClipboard(this.cleanHeading(step.heading)))
+    );
+
+    // details (kvps)
+    const kvpsText = Object.entries(step.kvps || {})
+      .map(([k, v]) => `${this.formatKey(k)}: ${this.formatValue(v)}`)
+      .join('\n');
+    document.querySelector('[data-segment="details"]')?.replaceChildren(
+      createActionButton("copy", "", () => copyToClipboard(kvpsText))
+    );
+
+    // content
+    document.querySelector('[data-segment="content"]')?.replaceChildren(
+      createActionButton("copy", "", () => copyToClipboard(step.content))
+    );
+  },
+
   // 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)

From d3f29fb99cc814351809b7a9f4531d5700e00bca Mon Sep 17 00:00:00 2001
From: 3clyp50 <real.eclypso@gmail.com>
Date: Wed, 28 Jan 2026 16:44:56 +0100
Subject: [PATCH 3/4] css constraints for thoughts p

---
 .../messages/process-group/process-group.css    | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/webui/components/messages/process-group/process-group.css b/webui/components/messages/process-group/process-group.css
index 93d973f29..0c30d8788 100644
--- a/webui/components/messages/process-group/process-group.css
+++ b/webui/components/messages/process-group/process-group.css
@@ -415,6 +415,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   margin-left: var(--spacing-xs);
+  min-width: 0;
 }
 
 /* Step expand icon - CSS triangle (no Material Icons) */
@@ -453,6 +454,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 {
@@ -508,6 +510,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 +531,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 +547,7 @@
   display: flex;
   align-items: center;
   justify-content: end;
+  white-space: nowrap;
 }
 
 .process-step-detail-scroll .step-kvp-key .material-symbols-outlined {
@@ -554,9 +559,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;
 }
 
 
@@ -769,6 +782,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 {

From d912caae61fa0b4fa026ee98fe7fef7b964a6d0b Mon Sep 17 00:00:00 2001
From: 3clyp50 <real.eclypso@gmail.com>
Date: Thu, 29 Jan 2026 09:35:21 +0100
Subject: [PATCH 4/4] collapsible responses rework

---
 .../action-buttons/simple-action-buttons.css  |  68 ++++++++++
 webui/css/messages.css                        |  21 ---
 webui/js/messages.js                          | 121 ++++++------------
 3 files changed, 108 insertions(+), 102 deletions(-)

diff --git a/webui/components/messages/action-buttons/simple-action-buttons.css b/webui/components/messages/action-buttons/simple-action-buttons.css
index f914ef8ba..6cb8ee859 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: inline-flex;
+  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/css/messages.css b/webui/css/messages.css
index 1509bb7bf..8d74b0b55 100644
--- a/webui/css/messages.css
+++ b/webui/css/messages.css
@@ -846,24 +846,3 @@
   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;
-}
-
-.message.message-collapsible .expand-btn:hover {
-  opacity: 1;
-}
-
-.message.message-collapsible.has-overflow .expand-btn {
-  display: block;
-}
diff --git a/webui/js/messages.js b/webui/js/messages.js
index bb58c76cc..bf446d2cb 100644
--- a/webui/js/messages.js
+++ b/webui/js/messages.js
@@ -518,45 +518,8 @@ 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);
 
   return container;
 }
@@ -581,8 +544,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) {
@@ -855,35 +820,7 @@ export function drawMessageResponse({
     mainClass: "message-agent-response",
   });
 
-  // 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()
     ? [
@@ -891,17 +828,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);
 
@@ -2199,6 +2126,38 @@ 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");
+      const wasExp = messageDiv.classList.contains("expanded");
+      messageDiv.classList.remove("expanded");
+      messageDiv.classList.toggle("has-overflow", body?.scrollHeight > body?.clientHeight);
+      messageDiv.classList.toggle("expanded", wasExp);
+    });
+  }
+}
+
 // 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() {