feat(tui): copy log selection to clipboard with Ctrl+C (#43)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ieedan

apps/tui/src/components/run-details-panel.tsx

@@ -20,6 +20,8 @@ import { StatusIndicator } from "./status-indicator";
 const LOG_LINE_HEIGHT = 1;
 const VIRTUALIZATION_THRESHOLD = 300;
 const OVERSCAN_ROWS = 10;
+const LOG_SELECTION_BG = "#3a4a78";
+const LOG_SELECTION_FG = "#ffffff";
 
 interface ScrollboxRef {
 	scrollTop: number;
@@ -57,20 +59,31 @@ function LogLine(props: {
 	return (
 		<box flexDirection="row">
 			<box flexShrink={0} width={props.logTimestampWidth + 1}>
-				<text fg="#666666">
+				<text
+					fg="#666666"
+					selectionBg={LOG_SELECTION_BG}
+					selectionFg={LOG_SELECTION_FG}
+				>
 					{formatLogTimestamp(props.line.timestamp)}{" "}
 				</text>
 			</box>
 			<box flexShrink={0} width={props.logTaskTagWidth}>
-				<text fg={props.logColorByTaskKey[props.line.task]}>
+				<text
+					fg={props.logColorByTaskKey[props.line.task]}
+					selectionBg={LOG_SELECTION_BG}
+					selectionFg={LOG_SELECTION_FG}
+				>
 					{formatTaskTagForLog(
 						props.line.task,
 						props.logTaskTagWidth
 					)}
 				</text>
 			</box>
 			<box flexGrow={1}>
-				<text>
+				<text
+					selectionBg={LOG_SELECTION_BG}
+					selectionFg={LOG_SELECTION_FG}
+				>
 					<For each={parseAnsiLogSegments(props.line.line)}>
 						{(segment) => (
 							<span style={segment.style}>{segment.text}</span>

apps/tui/src/components/status-footer.tsx

@@ -2,6 +2,7 @@ import { For } from "solid-js";
 
 interface StatusFooterProps {
 	errorMessage: string | null;
+	copyToastMessage: string | null;
 	canNavigateTasks: boolean;
 	canJumpParentTasks: boolean;
 	canRunOrRestart: boolean;
@@ -24,6 +25,7 @@ export function StatusFooter(props: StatusFooterProps) {
 		if (props.canToggleLogMode) {
 			parts.push({ key: "m", label: `logs: ${props.logMode}` });
 		}
+		parts.push({ key: "ctrl+c", label: "copy" });
 		parts.push({ key: "q", label: "quit" });
 		return parts;
 	}
@@ -50,6 +52,16 @@ export function StatusFooter(props: StatusFooterProps) {
 						</>
 					)}
 				</For>
+				{props.copyToastMessage ? (
+					<>
+						<span style={{ fg: "#666666" }}> | </span>
+						<span style={{ fg: "#7ddc8e" }}>
+							{props.copyToastMessage}
+						</span>
+					</>
+				) : (
+					""
+				)}
 				{props.errorMessage ? ` | error: ${props.errorMessage}` : ""}
 			</text>
 		</box>

apps/tui/src/index.tsx

@@ -29,6 +29,7 @@ import {
 	isJumpParentsForwardShortcut,
 } from "./lib/keyboard-shortcuts";
 import { resolveTaskLogColor } from "./lib/logs";
+import { getSelectedTextByRow } from "./lib/selection-copy";
 import {
 	buildDisplayStatusByTaskKey,
 	canCancelRun,
@@ -69,6 +70,26 @@ function App() {
 	const [isCancellingBeforeExit, setIsCancellingBeforeExit] =
 		createSignal(false);
 	const [errorMessage, setErrorMessage] = createSignal<string | null>(null);
+	const [copyToastMessage, setCopyToastMessage] = createSignal<string | null>(
+		null
+	);
+	let copyToastTimeoutId: ReturnType<typeof setTimeout> | null = null;
+	const showCopyToast = (message: string) => {
+		setCopyToastMessage(message);
+		if (copyToastTimeoutId !== null) {
+			clearTimeout(copyToastTimeoutId);
+		}
+		copyToastTimeoutId = setTimeout(() => {
+			setCopyToastMessage(null);
+			copyToastTimeoutId = null;
+		}, 2000);
+	};
+	onCleanup(() => {
+		if (copyToastTimeoutId !== null) {
+			clearTimeout(copyToastTimeoutId);
+			copyToastTimeoutId = null;
+		}
+	});
 
 	const taskTree = createMemo(() => buildTaskTree(tasks()));
 	const taskRows = createMemo(() => flattenTaskRows(taskTree()));
@@ -279,6 +300,46 @@ function App() {
 		return key.name === "q" || (key.ctrl && key.name === "c");
 	}
 
+	function copySelectionToClipboard(): boolean {
+		const selection = renderer.getSelection();
+		if (!selection?.isActive) {
+			return false;
+		}
+		const text = getSelectedTextByRow(selection);
+		if (text.length === 0) {
+			return false;
+		}
+		const copied = renderer.copyToClipboardOSC52(text);
+		const lineCount = text.split("\n").length;
+		const linesLabel = lineCount === 1 ? "1 line" : `${lineCount} lines`;
+		showCopyToast(
+			copied
+				? `Copied ${linesLabel} to clipboard`
+				: "Copy failed (terminal does not support OSC52)"
+		);
+		renderer.clearSelection();
+		return true;
+	}
+
+	function handleCopySelectionKey(key: {
+		name: string;
+		ctrl?: boolean;
+		meta?: boolean;
+		super?: boolean;
+	}) {
+		if (key.name !== "c") {
+			return false;
+		}
+		// `ctrl` covers Ctrl+C on every platform.
+		// `super`/`meta` covers Cmd+C in terminals that forward it (Kitty,
+		// Ghostty, WezTerm with kitty keyboard protocol). Apple Terminal and
+		// default iTerm2 swallow Cmd+C themselves before it ever reaches us.
+		if (!(key.ctrl || key.meta || key.super)) {
+			return false;
+		}
+		return copySelectionToClipboard();
+	}
+
 	async function cancelRunningTasksBeforeExit() {
 		if (isCancellingBeforeExit()) {
 			return;
@@ -502,6 +563,9 @@ function App() {
 		if (handleQuitConfirmationKeys()) {
 			return;
 		}
+		if (handleCopySelectionKey(key)) {
+			return;
+		}
 		if (handleQuitKey(key)) {
 			requestQuit();
 			return;
@@ -663,6 +727,7 @@ function App() {
 					canNavigateTasks={canNavigateTasks()}
 					canRunOrRestart={hasTaskSelection()}
 					canToggleLogMode={canToggleLogMode()}
+					copyToastMessage={copyToastMessage()}
 					errorMessage={errorMessage()}
 					logMode={logMode()}
 					runAction={selectedRunAction()}
@@ -672,7 +737,9 @@ function App() {
 						isCancelling={isCancellingBeforeExit()}
 						onConfirm={(action) => {
 							if (action === "cancelAll") {
-								cancelRunningTasksBeforeExit().catch(() => quit());
+								cancelRunningTasksBeforeExit().catch(() =>
+									quit()
+								);
 							} else {
 								quit();
 							}
@@ -693,7 +760,10 @@ async function main() {
 
 	cliOptions = mode.cliOptions;
 	cwd = cliOptions.cwd;
-	render(() => <App />);
+	// We handle Ctrl+C ourselves so it can copy a selection instead of always
+	// exiting. Without this the renderer would call destroy() on Ctrl+C even
+	// when our useKeyboard handler returns early.
+	render(() => <App />, { exitOnCtrlC: false });
 }
 
 main().catch((error: unknown) => {

apps/tui/src/lib/selection-copy.ts

@@ -0,0 +1,48 @@
+import type { Renderable, Selection } from "@opentui/core";
+
+/**
+ * opentui's Selection.getSelectedText() sorts every selected renderable by
+ * (y, x) and joins them with newlines. That breaks for log views where each
+ * row contains multiple <text> children (timestamp, task tag, content) — each
+ * sibling on the same row would become its own line in the copied output.
+ *
+ * Group selected renderables by their absolute y position so each visual row
+ * is one line, then join siblings on that row left-to-right.
+ */
+export function getSelectedTextByRow(selection: Selection): string {
+	const renderables = selection.selectedRenderables.filter(
+		(renderable: Renderable) => !renderable.isDestroyed
+	);
+	if (renderables.length === 0) {
+		return "";
+	}
+
+	const rowByY = new Map<number, Renderable[]>();
+	for (const renderable of renderables) {
+		const existing = rowByY.get(renderable.y);
+		if (existing) {
+			existing.push(renderable);
+		} else {
+			rowByY.set(renderable.y, [renderable]);
+		}
+	}
+
+	const sortedYs = [...rowByY.keys()].sort((a, b) => a - b);
+	const lines: string[] = [];
+	for (const y of sortedYs) {
+		const row = rowByY.get(y);
+		if (!row) {
+			continue;
+		}
+		row.sort((a, b) => a.x - b.x);
+		const rowText = row
+			.map((renderable) => renderable.getSelectedText())
+			.filter((text) => text.length > 0)
+			.join(" ");
+		if (rowText.length > 0) {
+			lines.push(rowText);
+		}
+	}
+
+	return lines.join("\n").replace(/\s+$/g, "");
+}