feat(ui): add mouse-drag text selection and clipboard copy (#306)

Co-authored-by: Ben Vinegar <ben@benv.ca>

Author: raulk

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable user-visible changes to Hunk are documented in this file.
 
 ### Added
 
+- Added mouse-drag text selection in diff views that copies selected rows to the system clipboard via OSC 52. A `View > Copy decorations` toggle (or `copy_decorations` config) controls whether the clipboard includes diff rails, gutters, and file headers or only the changed code.
+
 ### Changed
 
 ### Fixed

src/core/config.test.ts

@@ -308,6 +308,7 @@ describe("config resolution", () => {
         "wrap_lines = true",
         "hunk_headers = false",
         "agent_notes = true",
+        "copy_decorations = false",
       ].join("\n"),
     );
 
@@ -333,6 +334,7 @@ describe("config resolution", () => {
     expect(bootstrap.initialWrapLines).toBe(true);
     expect(bootstrap.initialShowHunkHeaders).toBe(false);
     expect(bootstrap.initialShowAgentNotes).toBe(true);
+    expect(bootstrap.initialCopyDecorations).toBe(false);
   });
 
   test("loadAppBootstrap exposes graphite when no theme is configured", async () => {

src/core/config.ts

@@ -16,6 +16,7 @@ const DEFAULT_VIEW_PREFERENCES: PersistedViewPreferences = {
   wrapLines: false,
   showHunkHeaders: true,
   showAgentNotes: false,
+  copyDecorations: false,
 };
 
 interface ConfigResolutionOptions {
@@ -65,6 +66,7 @@ function readConfigPreferences(source: Record<string, unknown>): CommonOptions {
     wrapLines: normalizeBoolean(source.wrap_lines),
     hunkHeaders: normalizeBoolean(source.hunk_headers),
     agentNotes: normalizeBoolean(source.agent_notes),
+    copyDecorations: normalizeBoolean(source.copy_decorations),
   };
 }
 
@@ -83,6 +85,7 @@ function mergeOptions(base: CommonOptions, overrides: CommonOptions): CommonOpti
     wrapLines: overrides.wrapLines ?? base.wrapLines,
     hunkHeaders: overrides.hunkHeaders ?? base.hunkHeaders,
     agentNotes: overrides.agentNotes ?? base.agentNotes,
+    copyDecorations: overrides.copyDecorations ?? base.copyDecorations,
   };
 }
 
@@ -145,6 +148,7 @@ export function resolveConfiguredCliInput(
     wrapLines: DEFAULT_VIEW_PREFERENCES.wrapLines,
     hunkHeaders: DEFAULT_VIEW_PREFERENCES.showHunkHeaders,
     agentNotes: DEFAULT_VIEW_PREFERENCES.showAgentNotes,
+    copyDecorations: DEFAULT_VIEW_PREFERENCES.copyDecorations,
   };
 
   if (userConfigPath) {
@@ -174,6 +178,7 @@ export function resolveConfiguredCliInput(
     wrapLines: resolvedOptions.wrapLines ?? DEFAULT_VIEW_PREFERENCES.wrapLines,
     hunkHeaders: resolvedOptions.hunkHeaders ?? DEFAULT_VIEW_PREFERENCES.showHunkHeaders,
     agentNotes: resolvedOptions.agentNotes ?? DEFAULT_VIEW_PREFERENCES.showAgentNotes,
+    copyDecorations: resolvedOptions.copyDecorations ?? DEFAULT_VIEW_PREFERENCES.copyDecorations,
   };
 
   return {

src/core/liveComments.ts

@@ -1,6 +1,28 @@
 import type { Hunk } from "@pierre/diffs";
-import type { DiffFile } from "./types";
-import type { CommentTargetInput, DiffSide, LiveComment } from "../hunk-session/types";
+import type { AgentAnnotation, DiffFile } from "./types";
+
+export type DiffSide = "old" | "new";
+
+export interface CommentTargetInput {
+  filePath: string;
+  hunkIndex?: number;
+  side?: DiffSide;
+  line?: number;
+  summary: string;
+  rationale?: string;
+  author?: string;
+}
+
+export interface LiveComment extends AgentAnnotation {
+  id: string;
+  source: "mcp";
+  author?: string;
+  createdAt: string;
+  filePath: string;
+  hunkIndex: number;
+  side: DiffSide;
+  line: number;
+}
 
 export interface ResolvedCommentTarget {
   hunkIndex: number;

src/core/loaders.ts

@@ -489,5 +489,6 @@ export async function loadAppBootstrap(
     initialWrapLines: input.options.wrapLines ?? false,
     initialShowHunkHeaders: input.options.hunkHeaders ?? true,
     initialShowAgentNotes: input.options.agentNotes ?? false,
+    initialCopyDecorations: input.options.copyDecorations ?? false,
   };
 }

src/core/types.ts

@@ -79,6 +79,7 @@ export interface CommonOptions {
   wrapLines?: boolean;
   hunkHeaders?: boolean;
   agentNotes?: boolean;
+  copyDecorations?: boolean;
 }
 
 export interface PersistedViewPreferences {
@@ -88,6 +89,7 @@ export interface PersistedViewPreferences {
   wrapLines: boolean;
   showHunkHeaders: boolean;
   showAgentNotes: boolean;
+  copyDecorations: boolean;
 }
 
 export interface HelpCommandInput {
@@ -294,4 +296,5 @@ export interface AppBootstrap {
   initialWrapLines?: boolean;
   initialShowHunkHeaders?: boolean;
   initialShowAgentNotes?: boolean;
+  initialCopyDecorations?: boolean;
 }

src/hunk-session/types.ts

@@ -1,4 +1,5 @@
-import type { AgentAnnotation, CliInput, ReviewNoteSource } from "../core/types";
+import type { CommentTargetInput, DiffSide } from "../core/liveComments";
+import type { CliInput, ReviewNoteSource } from "../core/types";
 import type { SessionBrokerClient } from "../session-broker/brokerClient";
 import type {
   SessionClientMessage,
@@ -9,7 +10,7 @@ import type {
   SessionTerminalMetadata,
 } from "@hunk/session-broker-core";
 
-export type DiffSide = "old" | "new";
+export type { CommentTargetInput, DiffSide, LiveComment } from "../core/liveComments";
 
 export interface SessionFileSummary {
   id: string;
@@ -63,16 +64,6 @@ export interface HunkSessionState {
 export type HunkSessionRegistration = SessionRegistration<HunkSessionInfo>;
 export type HunkSessionSnapshot = SessionSnapshot<HunkSessionState>;
 
-export interface CommentTargetInput {
-  filePath: string;
-  hunkIndex?: number;
-  side?: DiffSide;
-  line?: number;
-  summary: string;
-  rationale?: string;
-  author?: string;
-}
-
 export interface CommentToolInput extends SessionTargetInput, CommentTargetInput {
   reveal?: boolean;
 }
@@ -109,17 +100,6 @@ export interface ClearCommentsToolInput extends SessionTargetInput {
   filePath?: string;
 }
 
-export interface LiveComment extends AgentAnnotation {
-  id: string;
-  source: "mcp";
-  author?: string;
-  createdAt: string;
-  filePath: string;
-  hunkIndex: number;
-  side: DiffSide;
-  line: number;
-}
-
 export interface SessionLiveCommentSummary {
   commentId: string;
   filePath: string;

src/ui/App.tsx

@@ -103,7 +103,9 @@ export function App({
   const diffScrollRef = useRef<ScrollBoxRenderable | null>(null);
   const wrapToggleScrollTopRef = useRef<number | null>(null);
   const layoutToggleScrollTopRef = useRef<number | null>(null);
+  const cancelCopySelectionRef = useRef<(() => void) | null>(null);
   const [layoutToggleRequestId, setLayoutToggleRequestId] = useState(0);
+  const [transientNoticeText, setTransientNoticeText] = useState<string | null>(null);
   const [layoutMode, setLayoutMode] = useState<LayoutMode>(bootstrap.initialMode);
   const [themeId, setThemeId] = useState(() =>
     bootstrap.initialTheme === "auto"
@@ -115,6 +117,7 @@ export function App({
   const [showAgentNotes, setShowAgentNotes] = useState(bootstrap.initialShowAgentNotes ?? false);
   const [showLineNumbers, setShowLineNumbers] = useState(bootstrap.initialShowLineNumbers ?? true);
   const [wrapLines, setWrapLines] = useState(bootstrap.initialWrapLines ?? false);
+  const [copyDecorations, setCopyDecorations] = useState(bootstrap.initialCopyDecorations ?? false);
   const [codeHorizontalOffset, setCodeHorizontalOffset] = useState(0);
   const [showHunkHeaders, setShowHunkHeaders] = useState(bootstrap.initialShowHunkHeaders ?? true);
   const [sidebarVisible, setSidebarVisible] = useState(() => !pagerMode);
@@ -325,6 +328,35 @@ export function App({
     setShowLineNumbers((current) => !current);
   };
 
+  /** Toggle whether mouse selection copies review decorations or only file content. */
+  const toggleCopyDecorations = () => {
+    setCopyDecorations((current) => !current);
+  };
+
+  // Show a short-lived status-bar message. Used to surface clipboard-copy outcomes that would
+  // otherwise be invisible to the user (OSC52 unsupported, etc.).
+  // Track the timer so we can clear it on unmount and avoid React state updates after unmount.
+  const transientTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showTransientNotice = useCallback((text: string, durationMs = 3000) => {
+    if (transientTimerRef.current !== null) {
+      clearTimeout(transientTimerRef.current);
+    }
+    setTransientNoticeText(text);
+    transientTimerRef.current = setTimeout(() => {
+      transientTimerRef.current = null;
+      setTransientNoticeText((current) => (current === text ? null : current));
+    }, durationMs);
+  }, []);
+
+  // Clear any pending transient-notice timer on unmount to avoid state updates after unmount.
+  useEffect(() => {
+    return () => {
+      if (transientTimerRef.current !== null) {
+        clearTimeout(transientTimerRef.current);
+      }
+    };
+  }, []);
+
   /** Toggle whether diff code rows wrap instead of truncating to one terminal row. */
   const toggleLineWrap = () => {
     // Capture the pre-toggle viewport position synchronously so DiffPane can restore the same
@@ -569,11 +601,13 @@ export function App({
         requestQuit,
         selectLayoutMode,
         selectThemeId: setThemeId,
+        copyDecorations,
         showAgentNotes,
         showHelp,
         showHunkHeaders,
         showLineNumbers,
         renderSidebar,
+        toggleCopyDecorations,
         toggleAgentNotes,
         toggleFocusArea,
         toggleHelp,
@@ -587,6 +621,7 @@ export function App({
     [
       activeTheme.id,
       canRefreshCurrentInput,
+      copyDecorations,
       focusFilter,
       layoutMode,
       moveToAnnotatedFile,
@@ -595,6 +630,7 @@ export function App({
       review.moveToHunk,
       selectLayoutMode,
       triggerRefreshCurrentInput,
+      toggleCopyDecorations,
       showAgentNotes,
       showHelp,
       showHunkHeaders,
@@ -720,6 +756,11 @@ export function App({
   const diffHeaderStatsWidth = Math.min(24, Math.max(16, Math.floor(diffContentWidth / 3)));
   const diffHeaderLabelWidth = Math.max(8, diffContentWidth - diffHeaderStatsWidth - 1);
   const diffSeparatorWidth = Math.max(4, diffContentWidth - 2);
+  // Mirror the App layout: bodyPadding/2 left-padding, then sidebar + divider when visible. Keep
+  // this in lockstep with the body container's paddingLeft and the sidebar render branch below.
+  const diffPaneScreenLeft =
+    bodyPadding / 2 + (renderSidebar ? clampedSidebarWidth + DIVIDER_WIDTH : 0);
+  const diffPaneScreenTop = pagerMode ? 0 : 1;
 
   return (
     <box
@@ -758,10 +799,14 @@ export function App({
           position: "relative",
         }}
         onMouseDrag={updateSidebarResize}
-        onMouseDragEnd={endSidebarResize}
+        onMouseDragEnd={(event) => {
+          endSidebarResize(event);
+          cancelCopySelectionRef.current?.();
+        }}
         onMouseUp={(event) => {
           endSidebarResize(event);
           closeMenu();
+          cancelCopySelectionRef.current?.();
         }}
       >
         {renderSidebar ? (
@@ -793,10 +838,14 @@ export function App({
         ) : null}
 
         <DiffPane
+          cancelCopySelectionRef={cancelCopySelectionRef}
           codeHorizontalOffset={codeHorizontalOffset}
+          copyDecorations={copyDecorations}
           diffContentWidth={diffContentWidth}
           files={filteredFiles}
           pagerMode={pagerMode}
+          screenLeft={diffPaneScreenLeft}
+          screenTop={diffPaneScreenTop}
           headerLabelWidth={diffHeaderLabelWidth}
           headerStatsWidth={diffHeaderStatsWidth}
           layout={resolvedLayout}
@@ -829,6 +878,7 @@ export function App({
           onScrollCodeHorizontally={(delta) => {
             scrollCodeHorizontally(delta * FAST_CODE_HORIZONTAL_SCROLL_COLUMNS);
           }}
+          onCopyFeedback={showTransientNotice}
           onSelectFile={jumpToFile}
           onViewportCenteredHunkChange={(fileId, hunkIndex) =>
             review.selectHunk(fileId, hunkIndex, { preserveViewport: true })
@@ -839,12 +889,11 @@ export function App({
       {!pagerMode &&
       (focusArea === "filter" ||
         Boolean(review.filter) ||
-        Boolean(sessionNoticeText) ||
-        Boolean(noticeText)) ? (
+        Boolean(sessionNoticeText ?? transientNoticeText ?? noticeText)) ? (
         <StatusBar
           filter={review.filter}
           filterFocused={focusArea === "filter"}
-          noticeText={sessionNoticeText ?? noticeText ?? undefined}
+          noticeText={sessionNoticeText ?? transientNoticeText ?? noticeText ?? undefined}
           terminalWidth={terminal.width}
           theme={activeTheme}
           onCloseMenu={closeMenu}

src/ui/components/panes/AgentInlineNote.tsx

@@ -8,7 +8,7 @@ import { annotationRangeLabel, reviewNoteSource } from "../../lib/agentAnnotatio
 import { fitText, padText } from "../../lib/text";
 import type { AppTheme } from "../../themes";
 
-function inlineNoteTitle(annotation: AgentAnnotation, noteIndex: number, noteCount: number) {
+export function inlineNoteTitle(annotation: AgentAnnotation, noteIndex: number, noteCount: number) {
   if (annotation.source === "user-draft") {
     return "Draft note";
   }