diff --git a/src/lib/common/markdown/Markdown.svelte b/src/lib/common/markdown/Markdown.svelte
index 477be265..832cdf97 100644
--- a/src/lib/common/markdown/Markdown.svelte
+++ b/src/lib/common/markdown/Markdown.svelte
@@ -18,7 +18,15 @@
 		/** @type {boolean} */
 		rawText = false,
 		/** @type {boolean} */
-		scrollable = false
+		scrollable = false,
+		/**
+		 * Puts a copy button on every fenced code block. Off by default: on a log
+		 * row or a state dump the control would be chrome over content nobody
+		 * copies, and it is the message surfaces where a snippet is there to be
+		 * taken somewhere else.
+		 * @type {boolean}
+		 */
+		copyableCode = false
 	} = $props();
 
 	/**
@@ -40,13 +48,54 @@
 	 * paragraph that merely mentions a run link in passing gets the treatment too, which is
 	 * the right answer — it is still an offer of a live view, wherever it sits.
 	 */
-	const liveLinkRenderer = new Renderer();
-	const renderParagraph = liveLinkRenderer.paragraph.bind(liveLinkRenderer);
-	liveLinkRenderer.paragraph = (text) => {
-		if (!liveRunIdInText(text)) return renderParagraph(text);
+	/**
+	 * Wraps a fenced code block so it can carry a copy button.
+	 *
+	 * Emitted as part of the markdown HTML rather than attached to the DOM
+	 * afterwards, so it survives every re-render of a streaming message without
+	 * anything having to re-scan for new blocks. Nothing from the message is
+	 * interpolated into it — the code is read back out of the DOM when the button
+	 * is clicked, which keeps the copied text identical to what is on screen and
+	 * keeps message content out of generated markup.
+	 *
+	 * @param {string} codeHtml
+	 */
+	function withCopyButton(codeHtml) {
+		return '<div class="md-code">'
+			+ '<button type="button" class="md-code-copy" aria-label="Copy code">'
+			+ '<i class="bx bx-copy" aria-hidden="true"></i>'
+			+ '<span class="md-code-copy-label">Copy</span>'
+			+ '</button>'
+			+ codeHtml
+			+ '</div>';
+	}
 
-		return `<p class="md-live-line"><i class="mdi mdi-motion-play-outline md-live-icon" aria-hidden="true"></i>${text}</p>`;
-	};
+	/* Per instance rather than module-level, because the code renderer below
+	   depends on `copyableCode`, which differs by call site. */
+	const markdownRenderer = buildRenderer();
+
+	function buildRenderer() {
+		const renderer = new Renderer();
+
+		const renderParagraph = renderer.paragraph.bind(renderer);
+		renderer.paragraph = (text) => {
+			if (!liveRunIdInText(text)) return renderParagraph(text);
+
+			return `<p class="md-live-line"><i class="mdi mdi-motion-play-outline md-live-icon" aria-hidden="true"></i>${text}</p>`;
+		};
+
+		if (copyableCode) {
+			const renderCode = renderer.code.bind(renderer);
+			/**
+			 * @param {string} code
+			 * @param {string | undefined} infostring
+			 * @param {boolean} escaped
+			 */
+			renderer.code = (code, infostring, escaped) => withCopyButton(renderCode(code, infostring, escaped));
+		}
+
+		return renderer;
+	}
 
 	const scrollbarId = `markdown-scrollbar-${uuidv4()}`;
 	const options = {
@@ -138,11 +187,84 @@
 		};
 	}
 
+	/** The button currently showing its "copied" state, if any. */
+	/** @type {Element | null} */
+	let copiedBtn = null;
+	/** @type {any} */
+	let copyResetTimer = null;
+
+	/**
+	 * @param {Element} btn
+	 * @param {boolean} done
+	 */
+	function setCopyState(btn, done) {
+		const icon = btn.querySelector('i');
+		const label = btn.querySelector('.md-code-copy-label');
+		btn.classList.toggle('md-code-copy-done', done);
+		if (icon) icon.className = done ? 'bx bx-check' : 'bx bx-copy';
+		if (label) label.textContent = done ? 'Copied!' : 'Copy';
+		btn.setAttribute('aria-label', done ? 'Code copied' : 'Copy code');
+	}
+
+	/**
+	 * Copies a fenced code block, delegated for the same reason as
+	 * `interceptLinks`: the buttons come from `{@html}`, so Svelte never sees
+	 * those nodes and cannot bind to them.
+	 *
+	 * @param {HTMLElement} node
+	 */
+	function interceptCodeCopy(node) {
+		/** @param {MouseEvent} e */
+		const onClick = (e) => {
+			const btn = /** @type {Element | null} */ (e.target)?.closest?.('.md-code-copy');
+			if (!btn) return;
+
+			// The surfaces this renders on put their own click on the block around
+			// it — collapse a message, jump to its log entry — and reaching for a
+			// snippet is not a request for either.
+			e.preventDefault();
+			e.stopPropagation();
+
+			// Read from the DOM, so what lands on the clipboard is exactly what is
+			// on screen. The trailing newline is `marked`'s, not the author's.
+			const codeEl = btn.parentElement?.querySelector('pre code') || btn.parentElement?.querySelector('pre');
+			const text = (codeEl?.textContent || '').replace(/\n$/, '');
+			if (!text) return;
+
+			navigator.clipboard?.writeText(text).then(() => {
+				if (copiedBtn && copiedBtn !== btn) {
+					setCopyState(copiedBtn, false);
+				}
+				clearTimeout(copyResetTimer);
+				copiedBtn = btn;
+				setCopyState(btn, true);
+				copyResetTimer = setTimeout(() => {
+					// A streaming re-render can have replaced the button by now.
+					if (copiedBtn?.isConnected) {
+						setCopyState(copiedBtn, false);
+					}
+					copiedBtn = null;
+				}, 800);
+			}).catch(() => {
+				// Clipboard refused — an insecure context, or permission denied.
+				// Leave the button alone rather than report a copy that never was.
+			});
+		};
+
+		node.addEventListener('click', onClick);
+		return {
+			destroy() {
+				clearTimeout(copyResetTimer);
+				node.removeEventListener('click', onClick);
+			}
+		};
+	}
+
 	let innerText = $derived.by(() => {
 		const normalizedText = typeof text !== 'string' ? `${JSON.stringify(text)}` : text;
 		const markedText = !rawText
-			? replaceNewLine(marked(replaceMarkdown(normalizedText || ''), { renderer: liveLinkRenderer })?.toString())
-			: marked(normalizedText || '', { breaks: true, renderer: liveLinkRenderer })?.toString();
+			? replaceNewLine(marked(replaceMarkdown(normalizedText || ''), { renderer: markdownRenderer })?.toString())
+			: marked(normalizedText || '', { breaks: true, renderer: markdownRenderer })?.toString();
 		if (!!markedText && markedText.endsWith('<br>')) {
 			const idx = markedText.lastIndexOf('<br>');
 			return markedText.substring(0, idx);
@@ -157,6 +279,7 @@
 	class={`markdown-container markdown-lite ${containerClasses || 'text-white'}`}
 	style={`${containerStyles}`}
 	use:interceptLinks
+	use:interceptCodeCopy
 >
 	{@html innerText}
 	<!-- <SvelteMarkdown
@@ -257,7 +380,75 @@
         color: var(--color-primary);
     }
 
-    /* The line that offers a live view — see `liveLinkRenderer`.
+    /* Copy control on a fenced code block — see `withCopyButton`.
+
+       Absolutely positioned rather than given a header row of its own: these
+       blocks sit in chat bubbles a few hundred pixels wide, where a bar above
+       the code costs a line of the message. The wrapper has no padding or
+       border, so the `pre`'s top margin collapses through it and the wrapper's
+       top edge is the code's top edge, which is what the offsets below assume.
+
+       Quiet until the block is hovered or the button is focused, so it does not
+       compete with the code; always visible where there is no hover to reveal
+       it. */
+    .markdown-container :global(.md-code) {
+        position: relative;
+    }
+
+    .markdown-container :global(.md-code-copy) {
+        position: absolute;
+        top: 0.35rem;
+        right: 0.35rem;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        padding: 0.1rem 0.4rem;
+        font-size: 11px;
+        font-weight: 600;
+        line-height: 1.6;
+        color: rgb(255 255 255 / 0.75);
+        background: rgb(0 0 0 / 0.55);
+        border: 1px solid rgb(255 255 255 / 0.2);
+        border-radius: 999px;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
+    }
+
+    .markdown-container :global(.md-code-copy i) {
+        font-size: 13px;
+        line-height: 1;
+    }
+
+    .markdown-container :global(.md-code:hover .md-code-copy),
+    .markdown-container :global(.md-code-copy:focus-visible),
+    .markdown-container :global(.md-code-copy-done) {
+        opacity: 1;
+    }
+
+    @media (hover: none) {
+        .markdown-container :global(.md-code-copy) {
+            opacity: 1;
+        }
+    }
+
+    .markdown-container :global(.md-code-copy:hover) {
+        color: rgb(255 255 255);
+        background: rgb(0 0 0 / 0.78);
+    }
+
+    .markdown-container :global(.md-code-copy:focus-visible) {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    .markdown-container :global(.md-code-copy-done) {
+        color: var(--color-success, #22c55e);
+        border-color: color-mix(in srgb, var(--color-success, #22c55e) 45%, transparent);
+    }
+
+    /* The line that offers a live view — see the paragraph renderer.
 
        Quieter than the message it hangs off, and quieter than a link normally is here: it is a
        way in, offered under a finding somebody is reading, and at full accent it was the first
diff --git a/src/lib/common/shared/CollapsibleText.svelte b/src/lib/common/shared/CollapsibleText.svelte
new file mode 100644
index 00000000..871d6c27
--- /dev/null
+++ b/src/lib/common/shared/CollapsibleText.svelte
@@ -0,0 +1,156 @@
+<script>
+    /**
+     * Clips long content down to `lines` lines and offers the rest back, either
+     * from the toggle underneath or from a click anywhere in the block.
+     *
+     * Wraps the content rather than replacing its markup, so a caller keeps
+     * whatever box it already had — a chat bubble, a log panel row, a dialog
+     * entry. The fade on the cut edge is what makes that work: a hard clip would
+     * slice a bubble's rounded corners flat and read as a rendering bug, and a
+     * painted '...' would have to know the background colour behind it, which
+     * changes with the theme. A mask paints nothing, so it is right in both.
+     *
+     * @type {{
+     *   lines?: number,
+     *   slackLines?: number,
+     *   padding?: number,
+     *   align?: 'start' | 'end',
+     *   enabled?: boolean,
+     *   containerClasses?: string,
+     *   children?: import('svelte').Snippet
+     * }}
+     */
+    let {
+        /** How many lines stay visible while the content is collapsed. */
+        lines = 10,
+        /**
+         * How many lines past `lines` the content has to run before collapsing is
+         * worth it. Without the margin, something a line or two over the limit
+         * would put almost nothing behind a toggle.
+         */
+        slackLines = 2,
+        /**
+         * Vertical padding of the wrapped box, when the padding sits inside the
+         * measured height — a chat bubble pads itself, so without this the clip
+         * would land on the padding and show a line less than asked for.
+         */
+        padding = 0,
+        /** `end` for right-aligned content, `start` for everything else. */
+        align = 'start',
+        /**
+         * False leaves the content at full height: for a message still streaming
+         * in, or for a caller that only collapses some of what it renders.
+         */
+        enabled = true,
+        containerClasses = '',
+        children
+    } = $props();
+
+    const contentId = $props.id();
+
+    /**
+     * Used when the computed line-height reads `normal`. Text in these surfaces
+     * runs at about 1.55, so the browser's ~1.2 would cut it short of `lines`.
+     */
+    const FALLBACK_LINE_HEIGHT_RATIO = 1.55;
+
+    let collapsed = $state(true);
+    let isOverflowing = $state(false);
+    let lineHeight = $state(24);
+    /** @type {HTMLElement | undefined} */
+    let contentEl = $state();
+
+    let isCollapsible = $derived(enabled && isOverflowing);
+    let maxHeight = $derived(Math.round(lines * lineHeight + padding));
+
+    /**
+     * Measured rather than hard-coded in px, so the cut stays at `lines` lines
+     * whatever the reader's text size is.
+     * @param {HTMLElement} el
+     */
+    function resolveLineHeight(el) {
+        const cs = getComputedStyle(el);
+        const lh = parseFloat(cs.lineHeight);
+        if (Number.isFinite(lh) && lh > 0) {
+            return lh;
+        }
+        return parseFloat(cs.fontSize) * FALLBACK_LINE_HEIGHT_RATIO || 24;
+    }
+
+    $effect(() => {
+        const el = contentEl;
+        if (!el) return;
+
+        const measure = () => {
+            const lh = resolveLineHeight(el);
+            lineHeight = lh;
+            isOverflowing = el.scrollHeight > lh * (lines + slackLines) + padding;
+        };
+        measure();
+        // Markdown, images and streamed text all settle their height after the
+        // first paint, so a one-shot measurement would misjudge most content.
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    });
+
+    /**
+     * Toggle from a click anywhere in the block, while leaving the normal
+     * interactions inside it intact.
+     * @param {MouseEvent} e
+     */
+    function handleClick(e) {
+        if (!isCollapsible) return;
+
+        const target = /** @type {HTMLElement | null} */ (e.target);
+        // Links, buttons and form controls inside the content keep their own click.
+        if (target?.closest('a, button, input, textarea, select')) return;
+        // Selecting text is not a request to fold it away.
+        if (window.getSelection()?.toString()) return;
+
+        collapsed = !collapsed;
+    }
+
+    /** @param {MouseEvent} e */
+    function toggle(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        collapsed = !collapsed;
+    }
+</script>
+
+
+<div class={`ctxt ${containerClasses}`} class:ctxt-end={align === 'end'}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+        id={contentId}
+        class="ctxt-view"
+        class:ctxt-view-collapsed={isCollapsible && collapsed}
+        class:ctxt-view-clickable={isCollapsible}
+        style={`--ctxt-max-height: ${maxHeight}px;`}
+        onclick={handleClick}
+    >
+        <div bind:this={contentEl} class="ctxt-content">
+            {@render children?.()}
+        </div>
+    </div>
+
+    {#if isCollapsible}
+        <!--
+            The click target above is a convenience for the mouse; this is the
+            control, so the toggle is reachable and announced for keyboard and
+            screen-reader users too.
+        -->
+        <button
+            type="button"
+            class="ctxt-toggle"
+            aria-expanded={!collapsed}
+            aria-controls={contentId}
+            onclick={(e) => toggle(e)}
+        >
+            <i class={`mdi ${collapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'}`} aria-hidden="true"></i>
+            <span>{collapsed ? 'Show more' : 'Show less'}</span>
+        </button>
+    {/if}
+</div>
diff --git a/src/lib/styles/app.scss b/src/lib/styles/app.scss
index 13c28868..06b6d752 100644
--- a/src/lib/styles/app.scss
+++ b/src/lib/styles/app.scss
@@ -9,6 +9,8 @@
  * Loaded once from src/routes/+layout.svelte alongside the icon CSS.
  */
 
+@import "components/collapsible-text";
+
 @import "pages/auth";
 @import "pages/chat";
 @import "pages/conversation";
diff --git a/src/lib/styles/components/_collapsible-text.scss b/src/lib/styles/components/_collapsible-text.scss
new file mode 100644
index 00000000..956b0d27
--- /dev/null
+++ b/src/lib/styles/components/_collapsible-text.scss
@@ -0,0 +1,86 @@
+/* ========================================================================
+ * src/lib/common/shared/CollapsibleText.svelte
+ * ========================================================================
+ * Shared by the chat bubbles, the persist-log content rows and the
+ * conversation page's dialog entries, so nothing here may assume a
+ * particular surface: no background, no padding, no colour of its own
+ * beyond the toggle.
+ */
+
+
+.ctxt {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    max-width: 100%;
+}
+
+
+.ctxt-end {
+    align-items: flex-end;
+}
+
+
+.ctxt-view {
+    max-width: 100%;
+}
+
+
+.ctxt-view-clickable {
+    cursor: pointer;
+}
+
+
+/* The mask is doing the real work. The two things it replaces each had a
+   surface-specific flaw: a hard cut sliced the chat bubble's rounded corners
+   flat, and the painted '...' it replaces on the conversation page was drawn
+   over a hard-coded white gradient, which was wrong the moment the page was
+   in dark mode. A mask paints nothing, so it is correct on every surface and
+   in both themes. */
+.ctxt-view-collapsed {
+    max-height: var(--ctxt-max-height, 16rem);
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
+}
+
+
+/* Deliberately quiet: it belongs to the content it sits under, not to any row
+   of actions nearby, so it reads as a hint rather than another button. */
+
+
+.ctxt-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    margin-top: 2px;
+    padding: 0.1rem 0.4rem;
+    background: transparent;
+    border: 0;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.6;
+    color: color-mix(in srgb, var(--color-primary) 80%, transparent);
+    cursor: pointer;
+    transition: color 0.15s ease, background-color 0.15s ease;
+
+
+    i {
+        font-size: 13px;
+        line-height: 1;
+    }
+
+
+    &:hover {
+        color: var(--color-primary);
+        background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+
+
+    &:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
+        outline-offset: 2px;
+    }
+}
diff --git a/src/lib/styles/pages/_agent.scss b/src/lib/styles/pages/_agent.scss
index ccfbd4c3..e61ea071 100644
--- a/src/lib/styles/pages/_agent.scss
+++ b/src/lib/styles/pages/_agent.scss
@@ -336,10 +336,15 @@ $panel-radius: 0.5rem;
 
 /* ========================================================================
  * src/routes/page/agent/[agentId]/+page.svelte
- * ======================================================================== */
+ * ========================================================================
+ * Prefix is `agd-` (agent detail), NOT `ad-`: ad blockers ship element-hiding
+ * rules that match a leading `ad-` on a class, which hid this page's layout
+ * for anyone running one. Keep new classes here clear of `ad`, `ads`,
+ * `banner`, `sponsor` and `promo` for the same reason.
+ */
 
 
-.ad-page {
+.agd-page {
     display: flex;
     flex-direction: column;
 }
@@ -350,14 +355,14 @@ $panel-radius: 0.5rem;
    the cards' min-content is wider than 40% of the page. */
 
 
-.ad-grid {
+.agd-grid {
     display: grid;
     grid-template-columns: 2fr 3fr;
     gap: 1.125rem;
 }
 
 
-.ad-col {
+.agd-col {
     display: flex;
     flex-direction: column;
     gap: 0.875rem;
@@ -366,26 +371,26 @@ $panel-radius: 0.5rem;
 
 
 @media (max-width: 991.98px) {
-    .ad-grid {
+    .agd-grid {
         grid-template-columns: minmax(0, 1fr);
     }
 }
 
 
 /* ===== Section wrapper =====
-   Each ad-section hosts a panel card. The card owns its own surface (see the
+   Each agd-section hosts a panel card. The card owns its own surface (see the
    panel-shell mixin); this is only the grid slot. No hover lift — the panels
    are flat and static, and a panel that moves reads as clickable when it is
    not. */
 
 
-.ad-section {
+.agd-section {
     display: block;
 }
 
 
 @media (max-width: 423px) {
-    .ad-section {
+    .agd-section {
         height: fit-content;
     }
 }
@@ -399,7 +404,7 @@ $panel-radius: 0.5rem;
    button's edge lines up with the panels above it. */
 
 
-.ad-action-bar {
+.agd-action-bar {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -412,7 +417,7 @@ $panel-radius: 0.5rem;
 /* ===== Buttons ===== */
 
 
-.ad-btn {
+.agd-btn {
 		display: inline-flex;
 		align-items: center;
 		gap: 0.45rem;
@@ -445,7 +450,7 @@ $panel-radius: 0.5rem;
 }
 
 
-.ad-btn-primary {
+.agd-btn-primary {
 		background-color: var(--color-primary);
 		color: rgb(255 255 255);
 
@@ -456,7 +461,7 @@ $panel-radius: 0.5rem;
 }
 
 
-.ad-btn-danger {
+.agd-btn-danger {
 		background-color: var(--color-danger);
 		color: rgb(255 255 255);
 
@@ -473,7 +478,7 @@ $panel-radius: 0.5rem;
    reads as a unified cluster. */
 
 
-.ad-btn-ghost {
+.agd-btn-ghost {
 		background-color: rgb(255 255 255);
 		border-color: rgb(229 231 235);
 		color: var(--color-primary);
diff --git a/src/lib/styles/pages/_chat.scss b/src/lib/styles/pages/_chat.scss
index 991f6e6e..1f2a1c60 100644
--- a/src/lib/styles/pages/_chat.scss
+++ b/src/lib/styles/pages/_chat.scss
@@ -2795,7 +2795,7 @@
 
 
 /* ===== Popup container ===== */
-.cta-popup {
+.cta-overlay {
     position: absolute;
     bottom: calc(100% + 6px);
     left: 0;
@@ -2912,7 +2912,7 @@
 /* ===== Dark mode ===== */
 
 
-.dark .cta-popup {
+.dark .cta-overlay {
     background-color: rgb(31 41 55);
     border-color: rgb(55 65 81);
     color: rgb(229 231 235);
@@ -3567,6 +3567,10 @@
 .cle-meta {
     position: relative;
     z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
     font-size: 13px;
     color: color-mix(in srgb, white 68%, transparent);
     margin-bottom: 8px;
@@ -3586,6 +3590,19 @@
 }
 
 
+/* First meta line: agent name on the left, copy button on the right.
+   The timestamp sits on its own line below. */
+
+
+.cle-meta-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+}
+
+
 /* H4-equivalent heading inside meta row (replaces Bootstrap .h4) */
 
 
@@ -3626,13 +3643,69 @@
 }
 
 
+/* Per-log copy button in the meta row. Sits at low opacity until the log
+   element is hovered or the button itself is focused, so it never competes
+   with the log text. */
+
+
+.cle-copy-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex: 0 0 auto;
+    padding: 0.16rem 0.5rem;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    color: color-mix(in srgb, white 72%, transparent);
+    background: color-mix(in srgb, black 18%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-secondary) 26%, transparent);
+    border-radius: 999px;
+    cursor: pointer;
+    opacity: 0.45;
+    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+
+
+    i {
+        font-size: 13px;
+    }
+
+
+    &:hover {
+        color: rgb(255 255 255);
+        background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+        border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
+    }
+
+
+    &:focus-visible {
+        opacity: 1;
+        outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
+        outline-offset: 2px;
+    }
+}
+
+
+.cle-element:hover .cle-copy-btn,
+.cle-copy-btn:focus-visible,
+.cle-copy-btn-done {
+    opacity: 1;
+}
+
+
+.cle-copy-btn-done {
+    color: color-mix(in srgb, var(--color-success, #22c55e) 70%, white);
+    border-color: color-mix(in srgb, var(--color-success, #22c55e) 40%, transparent);
+    background: color-mix(in srgb, var(--color-success, #22c55e) 14%, transparent);
+}
+
+
 /* Timestamp suffix (replaces Bootstrap .ms-2) */
 
 
 .cle-meta-ts {
     display: inline-flex;
     align-items: center;
-    margin-left: 0.5rem;
     padding: 0.12rem 0.45rem;
     font-size: 11px;
     color: color-mix(in srgb, white 58%, transparent);
@@ -3914,58 +3987,6 @@
 }
 
 
-/* Collapsed text clamp (replaces .log-collapse nested under .log-content).
-   Note: -webkit-line-clamp with display:-webkit-box forces the browser to
-   resolve overflow-x to 'auto' even if we only set overflow-y:hidden,
-   which surfaces a native horizontal scrollbar whenever the clamped
-   content has long lines. Setting overflow:hidden (both axes) clips
-   cleanly without ever showing a scrollbar in collapsed state. */
-
-
-.cle-collapse {
-    overflow: hidden;
-    height: fit-content;
-    max-height: 200px;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 10;
-}
-
-
-/* Whole collapsible block is a toggle target; the More/Less button stays. */
-.cle-content-clickable {
-    cursor: pointer;
-}
-
-
-/* More/Less toggle (replaces .btn.btn-link.toggle-btn.btn-sm) */
-
-
-.cle-toggle-btn {
-    background: color-mix(in srgb, var(--color-primary) 11%, transparent);
-    border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
-    outline: none;
-    box-shadow: none;
-    color: color-mix(in srgb, var(--color-primary) 75%, white);
-    font-size: 12px;
-    font-weight: 700;
-    padding: 0.18rem 0.55rem;
-    margin-top: 8px;
-    border-radius: 999px;
-    cursor: pointer;
-    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
-
-
-    &:hover {
-        color: rgb(255 255 255);
-        background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
-        border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
-        transform: translateY(-1px);
-        text-decoration: none;
-    }
-}
-
-
 /* MessageId footer (replaces inline style="margin-top: 10px;") */
 
 
@@ -5410,7 +5431,7 @@
     }
 
 
-    .cta-popup {
+    .cta-overlay {
         bottom: calc(100% + 8px);
         max-height: 14rem;
         font-size: 0.75rem;
diff --git a/src/lib/styles/pages/_conversation.scss b/src/lib/styles/pages/_conversation.scss
index 6a0590a8..783595ac 100644
--- a/src/lib/styles/pages/_conversation.scss
+++ b/src/lib/styles/pages/_conversation.scss
@@ -261,60 +261,6 @@
 }
 
 
-/* ========================================================================
- * src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
- * ========================================================================
- * Replaces the legacy `.text-collapse` rule from
- * src/lib/scss/custom/pages/_conversation.scss. The dialog text is
- * collapsed to the first 10 lines by default; clicking the More button
- * removes this class so the content can flow to its natural height.
- *
- * Two clamping mechanisms are layered here for reliability:
- * 1. `-webkit-line-clamp: 10` with `display: -webkit-box` gives the
- *    nicer "line truncation with ellipsis" effect on simple text.
- * 2. `max-height: 10lh` is the hard fallback. The inner `<Markdown>`
- *    wraps its rendered HTML in a `.markdown-container` with
- *    `overflow-x: auto`, which establishes its own block formatting
- *    context — that BFC defeats line-clamp on the parent because text
- *    flow is sealed inside the child. The max-height cap clips
- *    reliably regardless of inner BFCs and is what actually keeps long
- *    code blocks / tables collapsed. A `::after` pseudo-element below
- *    paints a '...' in the bottom-right corner so the truncation is
- *    still signaled visually when line-clamp's native ellipsis is
- *    suppressed by the inner BFC.
- */
-.text-collapse {
-    position: relative;
-    overflow: hidden;
-    max-height: 10lh;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 10;
-    line-clamp: 10;
-}
-
-/* Ellipsis fallback for collapsed content whose inner BFC defeats
- * -webkit-line-clamp (notably the Markdown container's overflow-x: auto
- * around code blocks / tables). The native line-clamp ellipsis already
- * handles plain text; this pseudo-element guarantees a '...' indicator
- * is rendered even when line-clamp is sealed inside the child BFC.
- *
- * The gradient fades from transparent to the conversation page
- * background (white) so the '...' sits cleanly over the last visible
- * line without obscuring readable text. */
-.text-collapse::after {
-    content: '...';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    padding: 0 0.25rem 0 1.5rem;
-    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255 255 255) 50%);
-    color: inherit;
-    font-weight: inherit;
-    pointer-events: none;
-}
-
-
 /* ========================================================================
  * src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
  * ======================================================================== */
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 6edf71cb..3b40e80c 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -66,6 +66,7 @@
 	import RichContent from './rich-content/rich-content.svelte';
 	import RcMessage from "./rich-content/rc-message.svelte";
 	import RcDisclaimer from './rich-content/rc-disclaimer.svelte';
+	import CollapsibleText from '$lib/common/shared/CollapsibleText.svelte';
 	import RcEmbedding from './rich-content/rc-embedding.svelte';
 	import MessageFileGallery from '$lib/common/files/MessageFileGallery.svelte';
 	import ChatUtil from './chat-util/chat-util.svelte';
@@ -165,15 +166,16 @@
     let scrollbars = $state([]);
 	/** Within this many px of the bottom the thread counts as "at the bottom". */
 	const BOTTOM_THRESHOLD_PX = 80;
-	let isPinnedToBottom = $state(true);
+	/** A bubble's own top + bottom padding, which sits inside its measured height. */
+	const BUBBLE_PADDING_PX = 20;
 	/*
-	 * Incoming socket messages never move the viewport on their own. They only keep
-	 * it at the bottom while the user has explicitly asked to follow along — by
-	 * sending a message, or by pressing the jump button (including while a reply is
-	 * still streaming, which is the point of it being clickable in that state).
-	 * Scrolling away from the bottom cancels the follow.
+	 * Whether the thread is following the tail. Incoming socket messages and stream
+	 * chunks move the viewport only while it is already at the bottom, so reading
+	 * back through history is never interrupted; scrolling back down resumes the
+	 * follow, as does the jump button (which works while a reply is still streaming,
+	 * the point of it being clickable in that state).
 	 */
-	let followStream = $state(false);
+	let isPinnedToBottom = $state(true);
 
 	/** @type {import('$conversationTypes').ConversationModel} */
     let conversation = $state(/** @type {any} */ (undefined));
@@ -239,7 +241,6 @@
 	let isListening = $state(false);
 	let isLite = $state(false);
 	let isFrame = $state(false);
-	let autoScrollLog = $state(false);
 	let loadChatUtils = $state(false);
 	let disableSpeech = $state(false);
 	let isLoading = $state(false);
@@ -424,8 +425,11 @@
 			const top = viewport.scrollTop + target.getBoundingClientRect().top
 				- viewport.getBoundingClientRect().top - 16;
 			viewport.scrollTo({ top, behavior: 'smooth' });
-			// A jump to history is a deliberate move away from the tail.
-			followStream = false;
+			// A jump into history is a deliberate move away from the tail. The scroll
+			// listener would work this out on its own once the smooth scroll starts,
+			// but a message landing in the same frame would read the stale value and
+			// drag the thread straight back down.
+			isPinnedToBottom = false;
 		}
 		activeIndexId = messageId;
 		directToLog(messageId);
@@ -509,7 +513,8 @@
 	/**
 	 * New messages only pull the thread down while the user is already reading
 	 * the bottom of it. Once they scroll up, auto-scroll stops fighting them and
-	 * the "jump to latest" button takes over.
+	 * the "jump to latest" button takes over; scrolling back down to the bottom
+	 * puts the thread on the tail again.
 	 */
 	function trackBottomProximity() {
 		const scrollbar = scrollbars[0];
@@ -519,9 +524,6 @@
 		const update = () => {
 			const distanceFromBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
 			isPinnedToBottom = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
-			if (!isPinnedToBottom) {
-				followStream = false;
-			}
 			updateActiveIndex(viewport);
 		};
 		update();
@@ -752,9 +754,6 @@
 	 * bottom — used by the explicit "jump to latest" button, never by new messages.
 	 */
 	function autoScrollToBottom(force = false) {
-		if (force) {
-			followStream = true;
-		}
 		if (!force && !isPinnedToBottom) return;
 		if (_autoScrollScheduled) return;
 		_autoScrollScheduled = true;
@@ -964,12 +963,11 @@
 			resetProgress();
 		}
 
-		autoScrollLog = true;
 		dialogs.push({
 			...message,
 			is_chat_message: true
 		});
-		refresh(!followStream);
+		refresh();
 		text = "";
     }
 
@@ -1000,7 +998,7 @@
 
 		isStreaming = false;
 		latestStateLog = message.states;
-		refresh(!followStream);
+		refresh();
 
 		if (isFrame) {
 			window.parent.postMessage(message, "*");
@@ -1024,7 +1022,7 @@
 			});
 		}
 
-		refresh(!followStream);
+		refresh();
 
 		if (isFrame) {
 			window.parent.postMessage(message, "*");
@@ -1047,7 +1045,7 @@
 				}
 			});
 		}
-		refresh(!followStream);
+		refresh();
 	}
 
 
@@ -1070,7 +1068,7 @@
 					}
 					dialogs[dialogs.length - 1].text += message.text;
 					refreshDialogs();
-					if (followStream) autoScrollToBottom();
+					autoScrollToBottom();
 				}, 0);
 			}
 		} else {
@@ -1106,7 +1104,7 @@
 					for (const tt of thinkingText) {
 						dialogs[dialogs.length - 1].thought.thinking_text += tt;
 						refreshDialogs();
-						if (followStream) autoScrollToBottom();
+						autoScrollToBottom();
 						await delay(10);
 					}
 				}
@@ -1114,7 +1112,7 @@
 				for (const char of item.text) {
 					dialogs[dialogs.length - 1].text += char;
 					refreshDialogs();
-					if (followStream) autoScrollToBottom();
+					autoScrollToBottom();
 					await delay(10);
 				}
 			} catch (err) {
@@ -1127,7 +1125,7 @@
 	/** @param {import('$conversationTypes').ChatResponseModel} message */
 	function afterReceiveLlmStreamMessage(message) {
 		isStreaming = false;
-		refresh(!followStream);
+		refresh();
 	}
 
 	function stopStreaming() {
@@ -2646,23 +2644,31 @@
 															</div>
 														</div>
 													{:else}
-														<div
-															class="cb-user-msg-link"
-															tabindex="0"
-															aria-label="user-msg-to-log"
-															role="link"
-															onkeydown={() => {}}
-															onclick={() => directToLog(message.message_id)}
-														>
+														<!--
+															A long message is clipped to a readable height; clicking it, or the
+															toggle under it, swaps between the clipped and the full text. The
+															bubble's own click (jump to this turn in the log panes) is
+															unchanged and still fires alongside.
+														-->
+														<CollapsibleText align={'end'} padding={BUBBLE_PADDING_PX}>
 															<div
-																class="cb-bubble cb-bubble-user"
-																class:cb-clickable={!isLite && isLoadPersistLog}
-																class:cb-bubble-user-danger={highlightedMsgId === message.message_id}
-																id={`user-msg-${message.message_id}`}
+																class="cb-user-msg-link"
+																tabindex="0"
+																aria-label="user-msg-to-log"
+																role="link"
+																onkeydown={() => {}}
+																onclick={() => directToLog(message.message_id)}
 															>
-																<div class="cb-bubble-text-user font-libre">{@html replaceNewLine(message.text)}</div>
+																<div
+																	class="cb-bubble cb-bubble-user"
+																	class:cb-clickable={!isLite && isLoadPersistLog}
+																	class:cb-bubble-user-danger={highlightedMsgId === message.message_id}
+																	id={`user-msg-${message.message_id}`}
+																>
+																	<div class="cb-bubble-text-user font-libre">{@html replaceNewLine(message.text)}</div>
+																</div>
 															</div>
-														</div>
+														</CollapsibleText>
 														<p class="cb-chat-time">
 															<i class="bx bx-time-five cb-align-middle cb-chat-time-icon"></i>
 															{utcToLocal(message.created_at, 'h:mm:ss A')}
@@ -2789,7 +2795,16 @@
 															</div>
 														</div>
 													{:else}
-														<RcMessage markdownClasses={'markdown-dark cb-md-dark font-libre'} message={message} isStreaming={isStreaming || isThinking} />
+														{@const isLive = message?.message_id === lastBotMsg?.message_id
+															&& message?.uuid === lastBotMsg?.uuid
+															&& (isStreaming || isHandlingQueue || isThinking)}
+														<!--
+															Same clipping as the user's messages, held off while this reply is
+															still arriving so it cannot fold up under the reader mid-sentence.
+														-->
+														<CollapsibleText enabled={!isLive} padding={BUBBLE_PADDING_PX}>
+															<RcMessage markdownClasses={'markdown-dark cb-md-dark font-libre'} message={message} isStreaming={isStreaming || isThinking} />
+														</CollapsibleText>
 													{/if}
 													<!-- Embedded content belongs to the
 														 message that produced it, so it renders inline here rather than in
@@ -3131,7 +3146,6 @@
 			<PersistLog
 				bind:contentLogs={contentLogs}
 				bind:convStateLogs={convStateLogs}
-				bind:autoScroll={autoScrollLog}
 				isWaiting={isWaiting}
 				closeWindow={() => closePersistLog()}
 				cleanScreen={() => cleanPersistLogScreen()}
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte
index 1db09290..cce25b8b 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte
@@ -84,7 +84,7 @@
 
 <div class="cta-wrap" use:clickoutsideDirective onclickoutside={handleClickOutside}>
     {#if showOptions}
-        <ul class="cta-option-list cta-popup">
+        <ul class="cta-option-list cta-overlay">
             {#each options as option, idx (idx)}
                 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -98,7 +98,7 @@
         </ul>
     {/if}
     {#if loadUtils}
-        <div class="cta-util-container cta-popup">
+        <div class="cta-util-container cta-overlay">
             {#if children}
                 {@render children()}
             {/if}
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
index 84d3785d..4529ffcf 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
@@ -1,5 +1,6 @@
 <script>
     import Markdown from "$lib/common/markdown/Markdown.svelte";
+    import CollapsibleText from '$lib/common/shared/CollapsibleText.svelte';
 	import { ContentLogSource } from '$lib/helpers/enums';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { directToAgentPage } from '$lib/helpers/utils/common';
@@ -7,11 +8,10 @@
     /** @type {{ data: import('$conversationTypes').ConversationContentLogModel }} */
     let { data } = $props();
 
-    let is_collapsed = $state(true);
-    let contentEl = $state();
-    let isOverflowing = $state(false);
-    
-    const COLLAPSE_LINE_THRESHOLD = 10;
+    let copied = $state(false);
+    /** @type {any} */
+    let copiedTimer = null;
+
     const unknownAgent = "Uknown";
     const collapsedSources = [
         ContentLogSource.UserInput,
@@ -48,51 +48,34 @@
         return '';
     });
 
-    let isCollapsible = $derived(collapsedSources.includes(data.source) && isOverflowing);
-
-    /** @param {any} e */
-    function toggleText(e) {
+    /** @param {MouseEvent} e */
+    function copyContent(e) {
         e.preventDefault();
-        is_collapsed = !is_collapsed;
-    }
-
-    /**
-     * Toggle by clicking anywhere in the block, while leaving normal
-     * interactions intact: text selection, links and nested controls.
-     * @param {MouseEvent} e
-     */
-    function handleContentClick(e) {
-        if (!isCollapsible) return;
-
-        const target = /** @type {HTMLElement | null} */ (e.target);
-        if (target?.closest('a, button, input, textarea, select')) return;
-        if (window.getSelection()?.toString()) return;
-
-        is_collapsed = !is_collapsed;
+        e.stopPropagation();
+
+        const text = data?.content || '';
+        if (!text) return;
+
+        navigator.clipboard?.writeText(text).then(() => {
+            copied = true;
+            clearTimeout(copiedTimer);
+            copiedTimer = setTimeout(() => {
+                copied = false;
+            }, 800);
+        }).catch(() => {
+            copied = false;
+        });
     }
 
     $effect(() => {
-        void data?.content;
-        if (!contentEl || !collapsedSources.includes(data.source)) {
-            isOverflowing = false;
-            return;
-        }
-        requestAnimationFrame(() => {
-            if (!contentEl) return;
-            const cs = getComputedStyle(contentEl);
-            let lineHeight = parseFloat(cs.lineHeight);
-            if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
-                lineHeight = parseFloat(cs.fontSize) * 1.5 || 21;
-            }
-            isOverflowing = contentEl.scrollHeight > lineHeight * COLLAPSE_LINE_THRESHOLD + 1;
-        });
+        return () => clearTimeout(copiedTimer);
     });
 </script>
 
 
 <div class="cle-element" id={`content-log-${data.message_id}`}>
     <div class="cle-meta">
-        <div>
+        <div class="cle-meta-row">
             <span class="cle-title">
             {#if data?.agent_id?.length > 0}
                 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -109,28 +92,34 @@
                 </span>
             {/if}
             </span>
-            <span class="cle-meta-ts">{`${utcToLocal(data?.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')} `}</span>
+            <button
+                type="button"
+                class="cle-copy-btn"
+                class:cle-copy-btn-done={copied}
+                title={copied ? 'Copied!' : 'Copy content'}
+                aria-label={copied ? 'Content copied' : 'Copy content'}
+                onclick={(e) => copyContent(e)}
+            >
+                {#if copied}
+                    <i class="bx bx-check"></i>
+                    <span>{'Copied!'}</span>
+                {:else}
+                    <i class="bx bx-copy"></i>
+                    <span>{'Copy'}</span>
+                {/if}
+            </button>
         </div>
+        <span class="cle-meta-ts">{`${utcToLocal(data?.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')} `}</span>
     </div>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div
-        class={`cle-content ${logDisplayStyle}`}
-        class:cle-content-clickable={isCollapsible}
-        onclick={handleContentClick}
-    >
-        <div
-            bind:this={contentEl}
-            class:cle-collapse={isCollapsible && !!is_collapsed}
-        >
+    <div class={`cle-content ${logDisplayStyle}`}>
+        <!--
+            Only the sources in `collapsedSources` are worth folding: a hard rule
+            or a state change runs to a line or two, and a toggle on those would
+            be more chrome than content.
+        -->
+        <CollapsibleText enabled={collapsedSources.includes(data.source)}>
             <Markdown containerClasses={logTextStyle} text={data?.content} rawText={rawTextSources.includes(data.source)} />
-        </div>
-
-        {#if isCollapsible}
-            <button class="cle-toggle-btn" onclick={(e) => toggleText(e)}>
-                {`${is_collapsed ? 'More +' : 'Less -'}`}
-            </button>
-        {/if}
+        </CollapsibleText>
     </div>
 
     {#if data.message_id && data.source === ContentLogSource.UserInput}
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
index 931a22ef..ccecda8b 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { onMount, tick } from 'svelte';
+    import { onMount, tick, untrack } from 'svelte';
     import { page } from '$app/state';
     import moment from 'moment';
     import { v4 as uuidv4 } from 'uuid';
@@ -33,7 +33,6 @@
      * @type {{
      *   contentLogs?: import('$conversationTypes').ConversationContentLogModel[],
      *   convStateLogs?: import('$conversationTypes').ConversationStateLogModel[],
-     *   autoScroll?: boolean,
      *   isWaiting?: boolean,
      *   closeWindow: () => void,
      *   cleanScreen: () => void
@@ -42,7 +41,6 @@
     let {
         contentLogs = $bindable([]),
         convStateLogs = $bindable([]),
-        autoScroll = $bindable(false),
         isWaiting = false,
         closeWindow,
         cleanScreen
@@ -54,14 +52,13 @@
     let selectedTab = $state(contentLogTab);
 
     /*
-     * Same rule as the chat thread: incoming log entries never move a panel on
-     * their own. A panel follows the tail only while the user asked it to — by
-     * pressing its jump button — and scrolling away from the bottom cancels that.
+     * Same rule as the chat thread: a panel already parked at the bottom follows
+     * incoming entries, while one the user scrolled up in stays where they left
+     * it until they ask for the tail again with the jump button.
      * Indexes match `scrollbarElements`: 0 = content log, 1 = conversation states.
      */
     const BOTTOM_THRESHOLD_PX = 60;
     let isPinnedToBottom = $state([true, true]);
-    let followTail = $state([false, false]);
 
     let activeIndex = $derived(selectedTab === contentLogTab ? 0 : 1);
     let showJumpButton = $derived(!isPinnedToBottom[activeIndex]);
@@ -96,25 +93,43 @@
             pinToBottomWhileSettling();
         })();
 
+        // A pane scrolled to a specific entry is no longer on the tail. Its own
+        // scroll listener catches up a frame or two later; marking it here closes
+        // the window in which an arriving log entry would pull it back down.
+        const stopFollowing = () => { isPinnedToBottom = [false, false]; };
+        window.addEventListener(CANCEL_PIN_EVENT, stopFollowing);
+
         return () => {
+            window.removeEventListener(CANCEL_PIN_EVENT, stopFollowing);
             cleanLogs();
         };
 	});
 
     $effect(() => {
-        // Re-run whenever autoScroll or logs change. Only panels the user put in
-        // follow mode are moved; the rest stay where they were left.
+        // Re-run whenever either log list changes. Panels sitting at the bottom
+        // ride along with the new entries; the rest stay where they were left.
+        // `isPinnedToBottom` is read untracked so that scroll()'s own write to it
+        // cannot re-trigger this effect.
         contentLogs;
         convStateLogs;
-        if (autoScroll) {
-            followTail.forEach((following, idx) => {
-                if (following) {
+        untrack(() => {
+            isPinnedToBottom.forEach((pinned, idx) => {
+                if (pinned) {
                     scroll(false, idx);
                 }
             });
-        }
+        });
     });
 
+    /**
+     * A panel in the hidden tab is `display: none`, so its scroll metrics read as
+     * zero and mean nothing - neither worth measuring nor worth scrolling.
+     * @param {HTMLElement} viewport
+     */
+    function isViewportVisible(viewport) {
+        return viewport.clientHeight > 0;
+    }
+
     /** Keep `isPinnedToBottom` in step with where the user has scrolled each panel. */
     function trackBottomProximity() {
         scrollbars.forEach((scrollbar, idx) => {
@@ -122,12 +137,11 @@
 
             const { viewport } = scrollbar.elements();
             const update = () => {
+                // Keep the last known state for a panel whose tab is hidden.
+                if (!isViewportVisible(viewport)) return;
+
                 const distanceFromBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
-                const atBottom = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
-                isPinnedToBottom[idx] = atBottom;
-                if (!atBottom) {
-                    followTail[idx] = false;
-                }
+                isPinnedToBottom[idx] = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
             };
             update();
             viewport.addEventListener('scroll', update, { passive: true });
@@ -137,16 +151,22 @@
         });
     }
 
-    let _scrollScheduled = false;
+    /**
+     * Pending scrolls keyed by target - panel index, or 'all' - so a scroll already
+     * queued for one panel does not swallow another panel's.
+     * @type {Set<number | string>}
+     */
+    const _scrollScheduled = new Set();
     /**
      * @param {boolean} goToTop
      * @param {number | null} index Panel to scroll, or null for every panel.
      */
     function scroll(goToTop = false, index = null) {
-        if (_scrollScheduled) {
+        const key = index === null ? 'all' : index;
+        if (_scrollScheduled.has(key)) {
             return;
         }
-        _scrollScheduled = true;
+        _scrollScheduled.add(key);
         requestAnimationFrame(() => {
             setTimeout(() => {
                 // @ts-ignore
@@ -154,19 +174,23 @@
                     if (index !== null && idx !== index) return;
 
                     const { viewport } = scrollbar.elements();
+                    // Scrolling a hidden panel would only park it at 0, since its
+                    // scrollHeight reads as 0 while the tab is closed. It is
+                    // re-pinned when its tab is opened instead.
+                    if (!isViewportVisible(viewport)) return;
+
                     viewport.scrollTo({ top: goToTop ? 0 : viewport.scrollHeight, behavior: 'smooth' });
                     if (!goToTop) {
                         isPinnedToBottom[idx] = true;
                     }
                 });
-                _scrollScheduled = false;
+                _scrollScheduled.delete(key);
             }, 150);
         });
     }
 
     /** The jump button: go to the tail of the visible panel and follow it from there. */
     function jumpToBottom() {
-        followTail[activeIndex] = true;
         scroll(false, activeIndex);
     }
 
@@ -277,11 +301,18 @@
     }
     
     /** @param {number} selected */
-    function handleTabClick(selected) {
+    async function handleTabClick(selected) {
         if (selectedTab === selected) {
             return;
         }
         selectedTab = selected;
+
+        // A hidden panel is `display: none`, which drops its scroll position, so a
+        // panel that was following the tail is put back on it when it reappears.
+        await tick();
+        if (isPinnedToBottom[activeIndex]) {
+            scroll(false, activeIndex);
+        }
     }
 
     async function goToTopLog() {
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
index 667fda5c..f4ac88da 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
@@ -115,7 +115,7 @@
                 && message?.rich_content?.message?.language === 'javascript'}
                 <RcJsInterpreter message={message} scrollable />
             {:else}
-                <Markdown containerClasses={markdownClasses} text={text} rawText />
+                <Markdown containerClasses={markdownClasses} text={text} rawText copyableCode />
             {/if}
         </div>
     </div>
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 6c39e283..fe2f280e 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -238,37 +238,37 @@
 />
 
 {#if agent}
-<div class="ad-page">
-    <div class="ad-grid">
-        <div class="ad-col ad-col-left">
-            <div class="ad-section">
+<div class="agd-page">
+    <div class="agd-grid">
+        <div class="agd-col agd-col-left">
+            <div class="agd-section">
                 <AgentOverview
                     bind:agent={agent}
                     bind:profiles={agent.profiles}
                     bind:labels={agent.labels}
                 />
             </div>
-            <div class="ad-section">
+            <div class="agd-section">
                 <AgentTabs
                     bind:this={agentTabsCmp}
                     agent={agent}
                 />
             </div>
         </div>
-        <div class="ad-col ad-col-right">
-            <div class="ad-section">
+        <div class="agd-col agd-col-right">
+            <div class="agd-section">
                 <AgentInstruction
                     bind:this={agentInstructionCmp}
                     bind:agent={agent}
                 />
             </div>
-            <div class="ad-section">
+            <div class="agd-section">
                 <AgentTemplate
                     bind:this={agentTemplateCmp}
                     bind:agent={agent}
                 />
             </div>
-            <div class="ad-section">
+            <div class="agd-section">
                 <AgentFunction
                     bind:this={agentFunctionCmp}
                     bind:agent={agent}
@@ -278,10 +278,10 @@
     </div>
 
     {#if !!AgentExtensions.editable(agent)}
-        <div class="ad-action-bar">
+        <div class="agd-action-bar">
             <button
                 type="button"
-                class="ad-btn ad-btn-primary"
+                class="agd-btn agd-btn-primary"
                 onclick={() => updateCurrentAgent()}
             >
                 <i class="bx bx-check"></i>
@@ -289,7 +289,7 @@
             </button>
             <button
                 type="button"
-                class="ad-btn ad-btn-ghost"
+                class="agd-btn agd-btn-ghost"
                 onclick={() => exportAgent()}
             >
                 <i class="mdi mdi-download"></i>
@@ -297,7 +297,7 @@
             </button>
             <button
                 type="button"
-                class="ad-btn ad-btn-danger"
+                class="agd-btn agd-btn-danger"
                 onclick={() => deleteCurrentAgent()}
             >
                 <i class="bx bx-trash"></i>
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
index 73d93bf4..c8b69644 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
@@ -1,64 +1,24 @@
 <script>
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
+	import CollapsibleText from '$lib/common/shared/CollapsibleText.svelte';
 	import RcJsInterpreter from '../../../chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte';
 	import { RichType } from '$lib/helpers/enums';
 
-  const COLLAPSE_LINE_THRESHOLD = 10;
-
   /** @type {{ dialog: import('$conversationTypes').ChatResponseModel }} */
   let { dialog } = $props();
-
-  let is_collapsed = $state(true);
-  let contentEl = $state();
-  let isOverflowing = $state(false);
-
-  /** @param {any} e */
-  function toggleText(e) {
-    e.preventDefault();
-    is_collapsed = !is_collapsed;
-  }
-
-  $effect(() => {
-    void dialog?.rich_content?.message?.text;
-    void dialog?.text;
-    if (!contentEl) return;
-    requestAnimationFrame(() => {
-      if (!contentEl) return;
-      const cs = getComputedStyle(contentEl);
-      let lineHeight = parseFloat(cs.lineHeight);
-      if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
-        lineHeight = parseFloat(cs.fontSize) * 1.5 || 21;
-      }
-      isOverflowing = contentEl.scrollHeight > lineHeight * COLLAPSE_LINE_THRESHOLD + 1;
-    });
-  });
 </script>
 
-<div
-  bind:this={contentEl}
-  class="text-sm font-medium leading-relaxed"
-  class:text-collapse={is_collapsed && isOverflowing}
->
-  {#if dialog?.rich_content?.message?.rich_type === RichType.ProgramCode
-      && dialog?.rich_content?.message?.language === 'javascript'}
-    <RcJsInterpreter message={dialog} scrollable containerStyles={'color: var(--color-primary);'} />
-  {:else}
-    <Markdown
-      containerClasses={'dialog-item-text'}
-      text={dialog?.rich_content?.message?.text || dialog?.text}
-      rawText
-    />
-  {/if}
-</div>
-
-{#if isOverflowing}
-<button
-  type="button"
-  class="mt-1 inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary-hover hover:underline cursor-pointer"
-  onclick={(e) => toggleText(e)}
->
-  <i class="mdi {is_collapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'} text-sm leading-none"></i>
-  <span>{is_collapsed ? 'More' : 'Less'}</span>
-</button>
-{/if}
-
+<CollapsibleText>
+  <div class="text-sm font-medium leading-relaxed">
+    {#if dialog?.rich_content?.message?.rich_type === RichType.ProgramCode
+        && dialog?.rich_content?.message?.language === 'javascript'}
+      <RcJsInterpreter message={dialog} scrollable containerStyles={'color: var(--color-primary);'} />
+    {:else}
+      <Markdown
+        containerClasses={'dialog-item-text'}
+        text={dialog?.rich_content?.message?.text || dialog?.text}
+        rawText
+      />
+    {/if}
+  </div>
+</CollapsibleText>