From af0cfdd9d7be32f87e16faf360e245f71d018ff1 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <jicheng.lu@lessen.com>
Date: Mon, 14 Sep 2026 12:14:22 -0500
Subject: [PATCH] Add copy affordances, collapsible long content, and
 follow-the-tail scrolling

Chat and log panes:
- Copy button on each content log entry; timestamp moves to its own row
  beneath the agent name and the button.
- Copy button on fenced code blocks in agent messages. The button is emitted
  by a marked renderer override so it survives streaming re-renders, and the
  code is read back out of the DOM on click so the clipboard matches the
  screen and no message content passes through generated markup. Off by
  default elsewhere via a new `copyableCode` prop.
- Both the message thread and the log panes now follow new content whenever
  they are already at the bottom, instead of only after the jump button was
  pressed. Scrolling back down resumes following on its own.

Collapsible long content:
- New shared CollapsibleText component: clips past ~10 measured lines, with a
  fade mask and click-anywhere or keyboard toggling.
- Applied to the chat bubbles (held off while a reply streams), and it now
  backs the content log rows and the conversation page's dialog entries,
  replacing three separate hand-rolled implementations. Removes the dialog
  page's hardcoded-white '...' indicator, which was wrong in dark mode, and
  the double clamp it needed to work around Markdown's inner BFC.

Class naming:
- Rename the agent detail page's `ad-` prefix to `agd-`; ad blockers ship
  element-hiding rules that match a leading `ad-` and were hiding the page's
  layout. `cta-popup` renamed to `cta-overlay` as a precaution.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/lib/common/markdown/Markdown.svelte       | 211 +++++++++++++++++-
 src/lib/common/shared/CollapsibleText.svelte  | 156 +++++++++++++
 src/lib/styles/app.scss                       |   2 +
 .../styles/components/_collapsible-text.scss  |  86 +++++++
 src/lib/styles/pages/_agent.scss              |  31 +--
 src/lib/styles/pages/_chat.scss               | 133 ++++++-----
 src/lib/styles/pages/_conversation.scss       |  54 -----
 .../[conversationId]/chat-box.svelte          |  98 ++++----
 .../chat-util/chat-text-area.svelte           |   4 +-
 .../persist-log/content-log-element.svelte    | 107 ++++-----
 .../persist-log/persist-log.svelte            |  79 +++++--
 .../rich-content/rc-message.svelte            |   2 +-
 src/routes/page/agent/[agentId]/+page.svelte  |  26 +--
 .../conv-dialog-element.svelte                |  70 ++----
 14 files changed, 730 insertions(+), 329 deletions(-)
 create mode 100644 src/lib/common/shared/CollapsibleText.svelte
 create mode 100644 src/lib/styles/components/_collapsible-text.scss

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>