pi-stereo-view 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.1.6 - 2026-10-24
+
+### Fixed
+
+- Hide clock placeholders and copy buttons for blocks without a known timestamp, including system notices. Their content remains visible without extra control rows.
+
+## 0.1.5 - 2026-10-23
+
+### Added
+
+- Copy individual user messages, assistant replies and thinking blocks as original text/Markdown. Tool copies include their arguments, full saved results and linked late output, even when collapsed or off screen.
+- Use `/stereo-view copy` to choose and copy a block from the active panel with the keyboard.
+- Hide copy icons and their rows with **Show copy buttons** without disabling keyboard copying. The setting survives restart.
+
+### Changed
+
+- Show timestamps above blocks on the left and dim copy icons below on the right, without reserving a side column beside the text.
+
 ## 0.1.4 - 2026-10-20
 
 ### Fixed

package/README.md

@@ -29,6 +29,14 @@ Late output linked to a tool call appears directly below that call in Activity,
 
 Messages and tools keep their familiar appearance. The input stays full width below both panels.
 
+## Features
+
+- Arrange Conversation and Activity in columns or rows, swap or resize the panels, and zoom either one while keeping the input full width.
+- Copy an individual user message, assistant reply or thinking block with its own copy icon.
+- Copy a complete tool call with its arguments, saved result and linked late output, including collapsed and off-screen text.
+- Search panel history with literal text, Boolean expressions or regular expressions, then jump between matches.
+- Show or hide timestamps and copy icons independently. Layout and display settings survive restart.
+
 ## See it in action
 
 ![Switching layouts, swapping panels and resizing history](https://raw.githubusercontent.com/alexshpunt/pi-stereo-view/main/assets/demo.gif)
@@ -69,7 +77,7 @@ Click the toolbar and the buttons in each panel's header:
 | `[ ▤ ]` / `[ ▥ ]` | Switch between rows and columns. |
 | `[ ↕ ]` / `[ ↔ ]` | Swap the panels. |
 | `[ ↗ ]` / `[ ↙ ]` | Zoom a panel / restore the split. |
-| `[ ≡ ]` | Open settings to show or hide timestamps. |
+| `[ ≡ ]` | Open timestamp, copy-button and Conversation height settings. |
 | `[ ⌕ ]` | Search this panel. |
 
 **Resize:** drag the double line between the panels — `═` in rows, `║` in columns.
@@ -105,11 +113,23 @@ A match is revealed in its own panel without moving the other one. If matching t
 
 Press **Escape** or `[×]` to close search and restore your previous scroll position. Your message draft stays unchanged. Close other dialogs before searching. Search is available in split fullscreen history; combined history and regular mode keep Pi's usual keyboard behaviour.
 
+## Copy a block
+
+Click the dim `⧉` icon below the right corner of a message, thinking, tool or other history block to copy its text. Blocks without a known time have no copy button. Copy buttons work in split and zoomed panels, even with timestamps hidden.
+
+Messages and thinking keep their original text/Markdown, without terminal colours, clocks or copy buttons. Copying a tool includes its name, arguments, saved result and linked late output. A late-output block also has its own button to copy just that block. Collapsed and off-screen text is included.
+
+During streaming, each click copies the content available at that moment. Copy uses only text already available in Pi; it does not fetch omitted output or copy binary attachments. Custom blocks without source text fall back to plain rendered text.
+
+For keyboard access, run `/stereo-view copy` and choose a numbered block from the active panel. It copies the same text as that block's button.
+
+Use **Show copy buttons** in `≡` or `/stereo-view settings` to hide the icons and their rows. This choice survives restart. Keyboard copying stays available when the icons are hidden.
+
 ## Timestamps
 
-Conversation and Activity can show a dim local `HH:mm:ss` clock beside messages and tool calls. New tool calls show their start time.
+Conversation and Activity can show a dim local `HH:mm:ss` clock above each block on the left, with a small inset. The copy icon sits below the block on the right, so neither control takes width away from the text. New tool calls show their start time.
 
-Older tool calls may show `~HH:mm:ss` for an approximate time. `--:--:--` means the time is unknown.
+Older tool calls may show `~HH:mm:ss` for an approximate time. Blocks without a known time show neither a clock nor a copy button; their content stays visible.
 
 Use `≡` or `/stereo-view settings` to hide or show clocks. This setting survives restart. Clocks appear in split and zoomed panels, not in combined history. They are display-only and are not added to the conversation sent to the model.
 
@@ -127,7 +147,8 @@ The same controls are available without the mouse:
 | Scroll a panel | `/stereo-view scroll chat -10` / `/stereo-view scroll activity -10` |
 | Zoom / restore Conversation | `/stereo-view zoom chat` |
 | Zoom / restore Activity | `/stereo-view zoom activity` |
-| Timestamp settings | `/stereo-view settings` |
+| Copy a block from the active panel | `/stereo-view copy` |
+| Display settings | `/stereo-view settings` |
 | Button legend | `/stereo-view help` |
 
 `Ctrl+Alt+T` toggles split, `Ctrl+Alt+S` swaps panels, and `Ctrl+Alt+Left/Right` resizes Conversation along the current split direction.
@@ -136,7 +157,7 @@ Keyboard scrolling (`PgUp`/`PgDn` and Pi's other scroll keys) moves the active p
 
 ## Settings and limits
 
-Your layout, panel order, sizes, zoom, split on/off and timestamp settings are saved automatically and restored next time.
+Your layout, panel order, sizes, zoom, split on/off, timestamp and copy-button settings are saved automatically and restored next time.
 
 - Tested with Pi 1.1.0. Requires Node.js 22.19 or newer.
 - Regular mode shows one combined history.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-stereo-view",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "description": "Keep Pi conversation separate from tool output and agent activity.",
   "license": "MIT",

package/src/content.ts

@@ -1,4 +1,4 @@
-import { Container, type Component } from "@earendil-works/pi-tui";
+import { Container, Markdown, Text, stripTerminalSequences, type Component } from "@earendil-works/pi-tui";
 import { searchText, type SearchEntry } from "./search.js";
 
 export type Pane = "activity" | "chat";
@@ -18,6 +18,7 @@ interface NativeContent extends Component {
   result?: { content?: unknown };
   command?: string;
   outputLines?: string[];
+  customComponent?: Component;
   setExpanded?: (expanded: boolean) => void;
 }
 interface NativeAssistant extends Container {
@@ -45,6 +46,12 @@ const contentText = (content: unknown): string => typeof content === "string" ?
   Array.isArray(content) ? content.filter(block => block?.type === "text" && typeof block.text === "string")
     .map(block => block.text).join("\n") : "";
 
+/** Native text renderers retain their source before terminal wrapping and padding. */
+function componentText(component: Component): string | undefined {
+  if (!(component instanceof Text) && !(component instanceof Markdown)) return undefined;
+  const text: unknown = Reflect.get(component, "text");
+  return typeof text === "string" ? stripTerminalSequences(text) : undefined;
+}
 function assistant(component: Component): NativeAssistant | undefined {
   if (nameOf(component) !== "AssistantMessageComponent") return undefined;
   const native = component as NativeAssistant;
@@ -92,6 +99,17 @@ export class NativeContentIndex {
     return this.content.some(entry => entry.source === source && (pane === undefined || panes[entry.kind] === pane));
   }
 
+  /** Build clipboard text only on demand, from this branch's current semantic block. */
+  copy(entry: ContentEntry, width: number): string | undefined {
+    this.refresh();
+    const current = this.content.find(candidate => candidate.source === entry.source && candidate.component === entry.component);
+    if (!current) return undefined;
+    const group = current.kind === "tool" && current.owner === current.source
+      ? this.content.filter(candidate => candidate === current || candidate.owner === current.source)
+      : [current];
+    return group.map(candidate => stripTerminalSequences(candidate.search(width).text)).filter(Boolean).join("\n\n");
+  }
+
   private refresh(): void {
     const history = this.source.children[2] as Container;
     if (!Array.isArray(history?.children)) throw new Error("Pi's history document is not supported");
@@ -167,7 +185,8 @@ export class NativeContentIndex {
       }
       return {
         label: owner?.toolName ?? (native.message?.summary !== undefined ? "Summary" : "System"),
-        text: contentText(native.message?.content) || native.message?.summary || searchText(source.render(width).join("\n")),
+        text: contentText(native.message?.content) || native.message?.summary || componentText(native.customComponent ?? source) ||
+          searchText(source.render(width).join("\n")).split("\n").map(line => line.trimEnd()).join("\n").replace(/^\n+|\n+$/g, ""),
         reveal: typeof native.setExpanded === "function" ? () => native.setExpanded!(true) : undefined,
       };
     } };

package/src/index.ts

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { getAgentDir, getSettingsListTheme, type ExtensionAPI, type ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { copyToClipboard, getAgentDir, getSettingsListTheme, type ExtensionAPI, type ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { Box, Container, isKeyRelease, matchesKey, SettingsList, Text, type TUI } from "@earendil-works/pi-tui";
 import { TranscriptLayout } from "./layout.js";
 import { TOOL_START_ENTRY, TranscriptTimestamps } from "./timestamps.js";
@@ -38,12 +38,17 @@ export default async function transcript(pi: ExtensionAPI): Promise<void> {
           id: "timestamps", label: "Show timestamps",
           description: "Hide clock rows without changing messages or recorded tool starts.",
           currentValue: preferences.showTimestamps ? "on" : "off", values: ["on", "off"],
+        }, {
+          id: "copyButtons", label: "Show copy buttons",
+          description: "Hide copy icons and their rows; keyboard copying stays available.",
+          currentValue: preferences.showCopyButtons ? "on" : "off", values: ["on", "off"],
         }, {
           id: "height", label: "Conversation height",
           description: "Auto grows to half the history area. Drag sets a manual maximum.",
           currentValue: preferences.chatHeight === null ? "auto" : "manual", values: ["auto", "manual"],
         }], 3, getSettingsListTheme(), (id, value) => {
           if (id === "timestamps") layout?.setTimestamps(value === "on");
+          else if (id === "copyButtons") layout?.setCopyButtons(value === "on");
           else if (id === "height") layout?.setAutomaticHeight(value === "auto");
           tui.requestRender();
         }, () => done());
@@ -86,7 +91,18 @@ export default async function transcript(pi: ExtensionAPI): Promise<void> {
     timestamps = new TranscriptTimestamps(session);
     layout = new TranscriptLayout(preferences, () => ui.theme,
       message => ui.notify(message, "warning"), () => persist(ui), timestamps,
-      () => { void openSettings(ui).catch(error => ui.notify(String(error), "error")); });
+      () => { void openSettings(ui).catch(error => ui.notify(String(error), "error")); }, text => {
+        if (text === undefined) {
+          ui.notify("This block is no longer in the current history.", "warning");
+          return;
+        }
+        if (!text) {
+          ui.notify("This block has no text to copy.", "info");
+          return;
+        }
+        void copyToClipboard(text).then(() => ui.notify("Block sent to clipboard.", "info"),
+          error => ui.notify("Could not copy block: " + String(error), "error"));
+      });
     try { ensureLayout(); }
     catch (error) {
       layout.dispose();
@@ -179,7 +195,7 @@ export default async function transcript(pi: ExtensionAPI): Promise<void> {
     ensureLayout();
   };
   pi.registerCommand("stereo-view", {
-    description: "History: settings, toggle, swap, layout <columns|rows>, zoom <chat|activity>, width, height, scroll",
+    description: "History: copy, settings, toggle, swap, layout <columns|rows>, zoom <chat|activity>, width, height, scroll",
     handler: async (args, ctx) => {
       if (ctx.mode !== "tui" || !layout) {
         ctx.ui.notify("pi-stereo-view layout is available only in interactive Pi.", "warning");
@@ -188,8 +204,17 @@ export default async function transcript(pi: ExtensionAPI): Promise<void> {
       const [action = "toggle", target, amount] = args.trim().split(/\s+/);
       if (action === "toggle" || action === "") toggle();
       else if (action === "settings") await openSettings(ctx.ui);
-      else if (action === "help") {
-        ctx.ui.notify("pi-stereo-view icons: ▣ combined, ◫ split, ▤ rows, ▥ columns, ↕/↔ swap, ↗ expand, ↙ restore, ⌕ search, ≡ settings. Ctrl+F searches and PgUp/PgDn scroll the active panel; Ctrl+Alt+Up/Down switches it. Drag the ═ or ║ divider to resize.", "info");
+      else if (action === "copy") {
+        const blocks = layout.copyBlocks();
+        if (!blocks.length) {
+          ctx.ui.notify("No blocks to copy in the active split panel.", "info");
+          return;
+        }
+        closeSearch();
+        const choice = await ctx.ui.select("Copy a block from the active panel", blocks.map(block => block.label));
+        blocks.find(block => block.label === choice)?.copy();
+      } else if (action === "help") {
+        ctx.ui.notify("pi-stereo-view icons: ▣ combined, ◫ split, ▤ rows, ▥ columns, ↕/↔ swap, ↗ expand, ↙ restore, ⌕ search, ≡ settings, ⧉ copy block. /stereo-view copy chooses a block with the keyboard. Ctrl+F searches and PgUp/PgDn scroll the active panel; Ctrl+Alt+Up/Down switches it. Drag the ═ or ║ divider to resize.", "info");
       } else if (action === "swap") layout.swap();
       else if (action === "width" && /^\d+$/.test(target ?? "")) layout.setWidth(Number(target));
       else if (action === "height" && target === "auto") layout.setHeight(null);
@@ -199,7 +224,7 @@ export default async function transcript(pi: ExtensionAPI): Promise<void> {
       else if (action === "scroll" && (target === "chat" || target === "activity") && /^-?\d+$/.test(amount ?? "")) {
         layout.scroll(target, Number(amount));
       } else {
-        ctx.ui.notify("Use /stereo-view [help|settings|toggle|swap|layout <columns|rows>|zoom <chat|activity>|width <columns>|height <rows|auto>|scroll <chat|activity> <lines>]", "warning");
+        ctx.ui.notify("Use /stereo-view [copy|help|settings|toggle|swap|layout <columns|rows>|zoom <chat|activity>|width <columns>|height <rows|auto>|scroll <chat|activity> <lines>]", "warning");
         return;
       }
       ensureLayout();

package/src/layout.ts

@@ -134,6 +134,7 @@ export class TranscriptLayout {
     private readonly save: () => void,
     private readonly timestamps: TranscriptTimestamps,
     private readonly openSettings: () => void,
+    private readonly copy?: (text: string | undefined) => void,
   ) {}
 
   private button(icon: () => string, action: () => void, enabled = (): boolean => true, background?: () => Color): Component {
@@ -199,11 +200,12 @@ export class TranscriptLayout {
     // Auto scrollbars overlay one native content column; keep clocks outside it.
     const timestampGutter = (): number => scroll.scrollbar === "auto" ? 1 : 0;
     const showTimestamps = (): boolean => this.preferences.showTimestamps;
+    const showCopyButtons = (): boolean => this.preferences.showCopyButtons;
     const index = new NativeContentIndex(document);
     const activityDocument = new NativeDocument(document, "activity", this.timestamps, this.theme, timestampGutter, showTimestamps,
-      () => this.activate("activity"), false, index);
+      () => this.activate("activity"), false, index, this.copy, showCopyButtons);
     const chatDocument = new NativeDocument(document, "chat", this.timestamps, this.theme, timestampGutter, showTimestamps,
-      () => this.activate("chat"), false, index);
+      () => this.activate("chat"), false, index, this.copy, showCopyButtons);
     this.documents = { activity: activityDocument, chat: chatDocument };
     this.disposeDocuments = () => {
       activityDocument.dispose();
@@ -417,6 +419,11 @@ export class TranscriptLayout {
     return this.preferences.zoom ?? this.activePane;
   }
 
+  /** Offer block copying only from a currently visible split panel. */
+  copyBlocks(): ReturnType<NativeDocument["copyBlocks"]> {
+    const pane = this.searchPane();
+    return pane ? this.documents?.[pane].copyBlocks() ?? [] : [];
+  }
   private canFocusSearch(): boolean {
     const focused = this.host?.getFocusedComponent();
     if (!focused || focused === this.search?.bar.input) return true;
@@ -534,6 +541,11 @@ export class TranscriptLayout {
     this.changed();
   }
 
+  /** Hide copy icons without disabling the keyboard copy picker. */
+  setCopyButtons(show: boolean): void {
+    this.preferences.showCopyButtons = show;
+    this.changed();
+  }
   private defaultWidth(width: number): number {
     return Math.max(MIN_CHAT, Math.floor((width - 1) * 0.2));
   }

package/src/native.ts

@@ -59,6 +59,7 @@ export class NativeDocument extends Container {
   private frameWidth?: number;
   private frameLines?: string[];
   private checked = false;
+  private disposed = false;
 
   constructor(
     private readonly source: Container,
@@ -70,6 +71,8 @@ export class NativeDocument extends Container {
     private readonly interact: () => void = () => {},
     private readonly invalidatesSource = true,
     private readonly index = new NativeContentIndex(source),
+    private readonly copy?: (text: string | undefined) => void,
+    private readonly showCopy: () => boolean = () => true,
   ) {
     super();
   }
@@ -106,6 +109,19 @@ export class NativeDocument extends Container {
     });
   }
 
+  /** Keyboard choices are built only when requested; callbacks recheck current ownership. */
+  copyBlocks(): { label: string; copy: () => void }[] {
+    return this.index.entries(this.pane).filter(entry => entry.compact).map((entry, index) => {
+      const saved = entry.search(this.lastWidth);
+      const preview = searchText(saved.text).replace(/\s+/g, " ").slice(0, 80);
+      return { label: `${index + 1}. ${saved.label}: ${preview}`, copy: () => this.copyBlock(entry.source) };
+    });
+  }
+
+  private copyBlock(source: Component): void {
+    const entry = this.disposed ? undefined : this.index.entries(this.pane).find(entry => entry.source === source);
+    this.copy?.(entry ? this.index.copy(entry, this.lastWidth) : undefined);
+  }
   /** Reject hits whose native owner was removed by a branch change or history rebuild. */
   containsSearchHit(hit: SearchHit): boolean {
     return this.index.contains(hit.entry.source, this.pane);
@@ -163,6 +179,7 @@ export class NativeDocument extends Container {
 
   /** Stop native observers when the layout is detached or falls back. */
   dispose(): void {
+    this.disposed = true;
     for (const block of this.compactBlocks.values()) block.dispose();
     this.compactBlocks.clear();
     this.frameWidth = undefined;
@@ -195,7 +212,8 @@ export class NativeDocument extends Container {
       else {
         let stamped = this.stamped.get(routed);
         if (!stamped) {
-          stamped = new CompactMessage(routed, () => this.timestamps.label(this.clockOwners.get(component) ?? component), this.theme, this.timestampGutter, this.showTimestamps);
+          stamped = new CompactMessage(routed, () => this.timestamps.label(this.clockOwners.get(component) ?? component),
+            this.theme, this.timestampGutter, this.showTimestamps, this.copy ? () => this.copyBlock(component) : undefined, this.showCopy);
           this.stamped.set(routed, stamped);
         }
         this.compactBlocks.set(component, stamped);

package/src/preferences.ts

@@ -14,10 +14,11 @@ export interface Preferences {
   chatHeight: number | null;
   zoom: "activity" | "chat" | null;
   showTimestamps: boolean;
+  showCopyButtons: boolean;
 }
 
 export const defaults: Preferences = {
-  mode: "split", side: "left", chatWidth: null, layout: "columns", chatHeight: null, zoom: null, showTimestamps: true,
+  mode: "split", side: "left", chatWidth: null, layout: "columns", chatHeight: null, zoom: null, showTimestamps: true, showCopyButtons: true,
 };
 
 /** Read display preferences, retaining the first version's saved arrangement. */
@@ -36,16 +37,17 @@ export async function loadPreferences(file: string): Promise<Preferences> {
   const chatHeight = record.chatHeight === undefined ? defaults.chatHeight : record.chatHeight;
   const zoom = record.zoom === undefined ? defaults.zoom : record.zoom;
   const showTimestamps = record.showTimestamps === undefined ? defaults.showTimestamps : record.showTimestamps;
+  const showCopyButtons = record.showCopyButtons === undefined ? defaults.showCopyButtons : record.showCopyButtons;
   if ((record.mode !== "split" && record.mode !== "combined") ||
       (record.side !== "left" && record.side !== "right") ||
       (record.chatWidth !== null && (typeof record.chatWidth !== "number" || !Number.isInteger(record.chatWidth) ||
         record.chatWidth < 24 || record.chatWidth > 240)) ||
       (layout !== "columns" && layout !== "rows") ||
       (chatHeight !== null && (typeof chatHeight !== "number" || !Number.isInteger(chatHeight) || chatHeight < 4 || chatHeight > 240)) ||
-      (zoom !== null && zoom !== "activity" && zoom !== "chat") || typeof showTimestamps !== "boolean") {
+      (zoom !== null && zoom !== "activity" && zoom !== "chat") || typeof showTimestamps !== "boolean" || typeof showCopyButtons !== "boolean") {
     throw new Error("Invalid pi-stereo-view preferences");
   }
-  return { mode: record.mode, side: record.side, chatWidth: record.chatWidth, layout, chatHeight, zoom, showTimestamps };
+  return { mode: record.mode, side: record.side, chatWidth: record.chatWidth, layout, chatHeight, zoom, showTimestamps, showCopyButtons };
 }
 
 /** Atomically save only the display settings, never session messages. */

package/src/search-highlight.ts

@@ -17,8 +17,8 @@ const normalize = (text: string, lettersOnly: boolean): string => text.normalize
   .replace(lettersOnly ? /[^\p{L}\p{N}]/gu : /\s/gu, "");
 interface Position { row: number; start: number; end: number }
 
-/** An actual clock inserted by CompactMessage, not a suffix guessed from saved text. */
-export interface SearchClock { row: number; column: number }
+/** Presentation-only rows supplied by CompactMessage, never guessed from saved text. */
+export interface SearchClock { row: number; column: number; footerRow?: number }
 
 function locate(lines: string[], hit: SearchHit, lettersOnly: boolean, clock?: SearchClock): { text: string; positions: Position[] } | undefined {
   const wanted = normalize(hit.text, lettersOnly);
@@ -26,6 +26,7 @@ function locate(lines: string[], hit: SearchHit, lettersOnly: boolean, clock?: S
   let text = "";
   const positions: Position[] = [];
   for (const [row, line] of lines.entries()) {
+    if (clock?.footerRow === row) continue;
     // Only the decorator knows where its clock starts. Saved trailing times remain text.
     const plain = stripTerminalSequences(clock?.row === row ? sliceByColumn(line, 0, clock.column) : line);
     for (const { segment, index } of graphemes.segment(plain)) {

package/src/timestamps.ts

@@ -32,7 +32,7 @@ const validTime = (value: unknown): number | undefined => {
 /** Format a reliable source in the process's local zone; never substitute now. */
 export function timestampLabel(value: unknown): string {
   const time = validTime(value);
-  if (time === undefined) return "--:--:--";
+  if (time === undefined) return "";
   const date = new Date(time);
   return [date.getHours(), date.getMinutes(), date.getSeconds()]
     .map(part => String(part).padStart(2, "0")).join(":");
@@ -176,35 +176,44 @@ export class TranscriptTimestamps {
       toolCallId?: string;
     };
     if (name === "UserMessageComponent" || name === "SkillInvocationMessageComponent" || name === "BashExecutionComponent") {
-      return this.orderedLabels.get(component) ?? "--:--:--";
+      return this.orderedLabels.get(component) ?? "";
     }
     if (name === "ToolExecutionComponent") {
       const id = native.toolCallId!;
       const start = this.starts.get(id);
       if (start !== undefined) return timestampLabel(start);
-      if (this.liveCalls.has(id)) return "--:--:--";
+      if (this.liveCalls.has(id)) return "";
       const owner = this.owners.get(id);
-      return validTime(owner) === undefined ? "--:--:--" : "~" + timestampLabel(owner);
+      return validTime(owner) === undefined ? "" : "~" + timestampLabel(owner);
     }
     const message = name === "AssistantMessageComponent" ? native.lastMessage : native.message;
     return timestampLabel(message ? validTime(message.timestamp) ?? this.messageTimes.get(message) : native.entry?.timestamp);
   }
 }
 
-/** Trim message edges and reserve a clock gutter without changing native text or mouse targets. */
+// Reserve the glyph's painted overhang, without a label or surrounding frame.
+const COPY_CONTROL = "⧉ ";
+const COPY_CONTROL_WIDTH = visibleWidth(COPY_CONTROL);
+/** Keep message text full-width, with a clock above and copy action below. */
 export class CompactMessage extends Container {
   private top = 0;
   private contentWidth = 0;
   private contentHeight = 0;
   private hasClock = false;
+  private headerRows = 0;
+  private bodyRows = 0;
+  private copyRow?: number;
+  private copyColumn?: number;
+  private copyPressed = false;
   private leadingRows = 0;
   private prepared?: { width: number; content: string[]; lines: string[] };
   private readonly nativeCache: NativeRenderCache;
-  private formatted?: { width: number; time: string; gutter: number; theme: Theme; version: number; top: number; lines: string[] };
+  private formatted?: { width: number; time: string; copy: string; gutter: number; theme: Theme; version: number; top: number; lines: string[] };
 
   constructor(private readonly component: Component, private readonly label: () => string,
     private readonly theme: () => Theme, private readonly gutter: () => number,
-    private readonly show: () => boolean) {
+    private readonly show: () => boolean, private readonly copy?: () => void,
+    private readonly showCopy: () => boolean = () => true) {
     super();
     this.addChild(component);
     this.nativeCache = new NativeRenderCache(component);
@@ -227,57 +236,87 @@ export class CompactMessage extends Container {
     return this.renderContent(width);
   }
 
-  /** Report only the clock actually inserted into the prepared block's rows. */
-  searchClock(): { row: number; column: number } | undefined {
-    return this.hasClock ? { row: this.leadingRows, column: this.nativeCache.hasImagePlacement ? 0 : this.contentWidth } : undefined;
+  /** Exclude presentation rows when mapping saved-text search matches. */
+  searchClock(): { row: number; column: number; footerRow?: number } | undefined {
+    if (!this.hasClock && this.copyRow === undefined) return undefined;
+    return {
+      row: this.hasClock ? this.leadingRows : -1, column: 0,
+      ...(this.copyRow === undefined ? {} : { footerRow: this.leadingRows + this.copyRow }),
+    };
   }
   private renderContent(width: number): string[] {
-    const label = this.show() ? this.label() : "";
+    const label = this.label();
     const gutter = this.gutter();
     const theme = this.theme();
-    const time = width > label.length + gutter + 1 ? label : "";
-    this.hasClock = Boolean(time);
-    this.contentWidth = Math.max(1, width - (time ? time.length + 1 + gutter : 0));
+    // Only the scrollbar needs a side gutter; controls have their own rows.
+    this.contentWidth = Math.max(1, width - gutter);
+    const time = label && this.show() && visibleWidth(label) + 1 <= this.contentWidth ? " " + label : "";
+    const copy = label && this.copy && this.showCopy() && this.contentWidth >= COPY_CONTROL_WIDTH ? COPY_CONTROL : "";
     const content = this.nativeCache.render(this.contentWidth, theme);
     this.contentHeight = content.length;
     const cached = this.formatted;
-    if (cached?.width === width && cached.time === time && cached.gutter === gutter && cached.theme === theme &&
+    if (cached?.width === width && cached.time === time && cached.copy === copy && cached.gutter === gutter && cached.theme === theme &&
       cached.version === this.nativeCache.version) {
       this.top = cached.top;
       return cached.lines;
     }
     this.formatted = undefined;
-    // Image protocols need every placement row. Keep their native block intact.
-    if (this.nativeCache.hasImagePlacement) {
-      this.top = time ? -1 : 0;
-      return time ? [theme.fg("dim", time.padStart(width - gutter)), ...content] : content;
-    }
     this.top = 0;
+    this.hasClock = false;
+    this.headerRows = 0;
+    this.bodyRows = 0;
+    this.copyRow = undefined;
+    this.copyColumn = undefined;
     let end = content.length;
-    while (this.top < end && blank(content[this.top])) this.top++;
-    while (end > this.top && blank(content[end - 1])) end--;
-    const lines = content.slice(this.top, end);
-    if (!lines.length) {
-      this.hasClock = false;
-      return lines;
+    // Image protocols need every placement row. Keep their native block intact.
+    if (!this.nativeCache.hasImagePlacement) {
+      while (this.top < end && blank(content[this.top])) this.top++;
+      while (end > this.top && blank(content[end - 1])) end--;
     }
-    // User message zones live on native padding rows. Keep those shell markers.
-    const zones = (rows: string[]): string => rows.join("").match(/\x1b\]133;[ABC](?:\x07|\x1b\\)/g)?.join("") ?? "";
-    lines[0] = zones(content.slice(0, this.top)) + lines[0];
-    lines[lines.length - 1] += zones(content.slice(end));
-    if (time) {
-      lines[0] += "\x1b[0m\x1b]8;;\x07" +
-        " ".repeat(Math.max(1, width - gutter - time.length - visibleWidth(lines[0]))) +
-        theme.fg("dim", time);
+    const body = content.slice(this.top, end);
+    if (!body.length) return body;
+    if (!this.nativeCache.hasImagePlacement) {
+      // User message zones live on native padding rows. Keep those shell markers.
+      const zones = (rows: string[]): string => rows.join("").match(/\x1b\]133;[ABC](?:\x07|\x1b\\)/g)?.join("") ?? "";
+      body[0] = zones(content.slice(0, this.top)) + body[0];
+      body[body.length - 1] += zones(content.slice(end));
     }
-    this.formatted = { width, time, gutter, theme, version: this.nativeCache.version, top: this.top, lines };
+    this.hasClock = Boolean(time);
+    this.headerRows = time ? 1 : 0;
+    this.bodyRows = body.length;
+    const lines = time ? [theme.fg("dim", time), ...body] : body;
+    if (copy) {
+      this.copyRow = lines.length;
+      this.copyColumn = this.contentWidth - COPY_CONTROL_WIDTH;
+      lines.push(" ".repeat(this.copyColumn) + theme.style(copy, { fg: "dim", dim: true }));
+    }
+    this.formatted = { width, time, copy, gutter, theme, version: this.nativeCache.version, top: this.top, lines };
     return lines;
   }
 
   override handleMouse(event: TuiMouseEvent): ReturnType<Container["handleMouse"]> {
-    if (event.y < this.leadingRows || event.x >= this.contentWidth) return undefined;
+    const target = { component: this, originX: event.screenX - event.x, originY: event.screenY - event.y,
+      width: event.width, height: event.height };
+    const onCopy = this.copyColumn !== undefined && this.copyRow !== undefined &&
+      event.y === this.leadingRows + this.copyRow && event.x >= this.copyColumn &&
+      event.x < this.copyColumn + COPY_CONTROL_WIDTH && event.button === "left";
+    if (onCopy && event.type === "press") {
+      this.copyPressed = true;
+      return { handled: true, capture: true, target };
+    }
+    if (onCopy && event.type === "click") {
+      this.copyPressed = false;
+      this.copy?.();
+      return { handled: true, target };
+    }
+    if (this.copyPressed) {
+      if (event.type === "release") this.copyPressed = false;
+      return { handled: true, target };
+    }
+    const bodyRow = event.y - this.leadingRows - this.headerRows;
+    if (bodyRow < 0 || bodyRow >= this.bodyRows || event.x >= this.contentWidth) return undefined;
     return super.handleMouse({
-      ...event, y: event.y - this.leadingRows + this.top, width: this.contentWidth, height: this.contentHeight,
+      ...event, y: bodyRow + this.top, width: this.contentWidth, height: this.contentHeight,
     });
   }