From d7a61083c90cc07b534fa84ab44466802ead34ca Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Wed, 14 Jan 2026 08:59:34 +0100
Subject: [PATCH 1/2] feat(diff): add line range selection composer insert

---
 src/App.tsx                      | 50 ++++++++++++++++-
 src/components/Composer.tsx      | 12 +++++
 src/components/ComposerInput.tsx | 13 +++++
 src/components/DiffBlock.tsx     | 55 +++++++++++++++++--
 src/components/GitDiffViewer.tsx | 92 +++++++++++++++++++++++++++++++-
 src/styles/composer.css          |  3 ++
 src/styles/diff-viewer.css       | 45 ++++++++++++++++
 src/types.ts                     | 10 ++++
 8 files changed, 273 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5aafededb..aeb28504e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,7 +56,12 @@ import { useResizablePanels } from "./hooks/useResizablePanels";
 import { useLayoutMode } from "./hooks/useLayoutMode";
 import { useAppSettings } from "./hooks/useAppSettings";
 import { useUpdater } from "./hooks/useUpdater";
-import type { AccessMode, QueuedMessage, WorkspaceInfo } from "./types";
+import type {
+  AccessMode,
+  DiffLineReference,
+  QueuedMessage,
+  WorkspaceInfo,
+} from "./types";
 
 function useWindowLabel() {
   const [label, setLabel] = useState("main");
@@ -100,6 +105,7 @@ function MainApp() {
     Record<string, QueuedMessage[]>
   >({});
   const [prefillDraft, setPrefillDraft] = useState<QueuedMessage | null>(null);
+  const [composerInsert, setComposerInsert] = useState<QueuedMessage | null>(null);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [reduceTransparency, setReduceTransparency] = useState(() => {
     const stored = localStorage.getItem("reduceTransparency");
@@ -422,6 +428,36 @@ function MainApp() {
     }
   }
 
+  function handleDiffLineReference(reference: DiffLineReference) {
+    const startLine = reference.newLine ?? reference.oldLine;
+    const endLine =
+      reference.endNewLine ?? reference.endOldLine ?? startLine ?? null;
+    const lineRange =
+      startLine && endLine && endLine !== startLine
+        ? `${startLine}-${endLine}`
+        : startLine
+          ? `${startLine}`
+          : null;
+    const lineLabel = lineRange ? `${reference.path}:${lineRange}` : reference.path;
+    const changeLabel =
+      reference.type === "add"
+        ? "added"
+        : reference.type === "del"
+          ? "removed"
+          : reference.type === "mixed"
+            ? "mixed"
+            : "context";
+    const snippet = reference.lines.join("\n").trimEnd();
+    const snippetBlock = snippet ? `\n\`\`\`\n${snippet}\n\`\`\`` : "";
+    const label = reference.lines.length > 1 ? "Line range" : "Line reference";
+    const text = `${label} (${changeLabel}): ${lineLabel}${snippetBlock}`;
+    setComposerInsert({
+      id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      text,
+      createdAt: Date.now(),
+    });
+  }
+
   async function handleSend(text: string) {
     const trimmed = text.trim();
     if (!trimmed) {
@@ -543,7 +579,7 @@ function MainApp() {
   };
 
   const showComposer = !isCompact
-    ? centerMode === "chat"
+    ? centerMode === "chat" || centerMode === "diff"
     : (isTablet ? tabletTab : activeTab) === "codex";
   const showGitDetail = Boolean(selectedDiffPath) && isPhone;
   const appClassName = `app ${isCompact ? "layout-compact" : "layout-desktop"}${
@@ -635,6 +671,12 @@ function MainApp() {
           setPrefillDraft(null);
         }
       }}
+      insertText={composerInsert}
+      onInsertHandled={(id) => {
+        if (composerInsert?.id === id) {
+          setComposerInsert(null);
+        }
+      }}
       onEditQueued={(item) => {
         if (!activeThreadId) {
           return;
@@ -741,6 +783,7 @@ function MainApp() {
                   selectedPath={selectedDiffPath}
                   isLoading={isDiffLoading}
                   error={diffError}
+                  onLineReference={handleDiffLineReference}
                 />
               ) : (
                 messagesNode
@@ -899,6 +942,7 @@ function MainApp() {
                     selectedPath={selectedDiffPath}
                     isLoading={isDiffLoading}
                     error={diffError}
+                    onLineReference={handleDiffLineReference}
                   />
                 </div>
               </div>
@@ -998,6 +1042,7 @@ function MainApp() {
                   selectedPath={selectedDiffPath}
                   isLoading={isDiffLoading}
                   error={diffError}
+                  onLineReference={handleDiffLineReference}
                 />
               </div>
             </>
@@ -1056,6 +1101,7 @@ function MainApp() {
                       selectedPath={selectedDiffPath}
                       isLoading={isDiffLoading}
                       error={diffError}
+                      onLineReference={handleDiffLineReference}
                     />
                   </div>
                 )}
diff --git a/src/components/Composer.tsx b/src/components/Composer.tsx
index c39c30749..8deccca5d 100644
--- a/src/components/Composer.tsx
+++ b/src/components/Composer.tsx
@@ -27,6 +27,8 @@ type ComposerProps = {
   sendLabel?: string;
   prefillDraft?: QueuedMessage | null;
   onPrefillHandled?: (id: string) => void;
+  insertText?: QueuedMessage | null;
+  onInsertHandled?: (id: string) => void;
 };
 
 export function Composer({
@@ -51,6 +53,8 @@ export function Composer({
   sendLabel = "Send",
   prefillDraft = null,
   onPrefillHandled,
+  insertText = null,
+  onInsertHandled,
 }: ComposerProps) {
   const [text, setText] = useState("");
   const [selectionStart, setSelectionStart] = useState<number | null>(null);
@@ -96,6 +100,14 @@ export function Composer({
     onPrefillHandled?.(prefillDraft.id);
   }, [prefillDraft, onPrefillHandled]);
 
+  useEffect(() => {
+    if (!insertText) {
+      return;
+    }
+    setText(insertText.text);
+    onInsertHandled?.(insertText.id);
+  }, [insertText, onInsertHandled]);
+
   return (
     <footer className={`composer${disabled ? " is-disabled" : ""}`}>
       <ComposerQueue
diff --git a/src/components/ComposerInput.tsx b/src/components/ComposerInput.tsx
index 93a3be4c8..f4776ea8c 100644
--- a/src/components/ComposerInput.tsx
+++ b/src/components/ComposerInput.tsx
@@ -39,6 +39,7 @@ export function ComposerInput({
 }: ComposerInputProps) {
   const suggestionListRef = useRef<HTMLDivElement | null>(null);
   const suggestionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const maxTextareaHeight = 120;
   const isFileSuggestion = (item: AutocompleteItem) =>
     item.label.includes("/") || item.label.includes("\\");
   const fileTitle = (path: string) => {
@@ -67,6 +68,18 @@ export function ComposerInput({
     }
   }, [highlightIndex, suggestionsOpen, suggestions.length]);
 
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+    textarea.style.height = "auto";
+    const nextHeight = Math.min(textarea.scrollHeight, maxTextareaHeight);
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY =
+      textarea.scrollHeight > maxTextareaHeight ? "auto" : "hidden";
+  }, [text, textareaRef]);
+
   return (
     <div className="composer-input">
       <div className="composer-input-area">
diff --git a/src/components/DiffBlock.tsx b/src/components/DiffBlock.tsx
index 2d389afd7..f1dc0ff19 100644
--- a/src/components/DiffBlock.tsx
+++ b/src/components/DiffBlock.tsx
@@ -1,27 +1,76 @@
+import type { KeyboardEvent, MouseEvent } from "react";
 import { useMemo } from "react";
-import { parseDiff } from "../utils/diff";
+import { parseDiff, type ParsedDiffLine } from "../utils/diff";
 import { highlightLine } from "../utils/syntax";
 
 type DiffBlockProps = {
   diff: string;
   language?: string | null;
   showLineNumbers?: boolean;
+  onLineSelect?: (
+    line: ParsedDiffLine,
+    index: number,
+    event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>,
+  ) => void;
+  selectedRange?: { start: number; end: number } | null;
+  parsedLines?: ParsedDiffLine[] | null;
 };
 
 export function DiffBlock({
   diff,
   language,
   showLineNumbers = true,
+  onLineSelect,
+  selectedRange = null,
+  parsedLines = null,
 }: DiffBlockProps) {
-  const parsed = useMemo(() => parseDiff(diff), [diff]);
+  const parsed = useMemo(
+    () => parsedLines ?? parseDiff(diff),
+    [diff, parsedLines],
+  );
   return (
     <div>
       {parsed.map((line, index) => {
         const shouldHighlight =
           line.type === "add" || line.type === "del" || line.type === "context";
         const html = highlightLine(line.text, shouldHighlight ? language : null);
+        const isSelectable = Boolean(onLineSelect) && shouldHighlight;
+        const isSelected =
+          isSelectable &&
+          selectedRange &&
+          index >= selectedRange.start &&
+          index <= selectedRange.end;
+        const isRangeStart = isSelected && selectedRange?.start === index;
+        const isRangeEnd = isSelected && selectedRange?.end === index;
         return (
-          <div key={index} className={`diff-line diff-line-${line.type}`}>
+          <div
+            key={index}
+            className={`diff-line diff-line-${line.type}${
+              isSelectable ? " is-selectable" : ""
+            }${isSelected ? " is-selected" : ""}${
+              isRangeStart ? " is-range-start" : ""
+            }${isRangeEnd ? " is-range-end" : ""}`}
+            role={isSelectable ? "button" : undefined}
+            tabIndex={isSelectable ? 0 : undefined}
+            aria-pressed={isSelectable ? isSelected : undefined}
+            onClick={
+              isSelectable
+                ? (event) => {
+                    onLineSelect?.(line, index, event);
+                  }
+                : undefined
+            }
+            onKeyDown={
+              isSelectable
+                ? (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    onLineSelect?.(line, index, event);
+                  }
+                }
+                : undefined
+            }
+          >
             {showLineNumbers && (
               <div className="diff-gutter">
                 <span className="diff-line-number">{line.oldLine ?? ""}</span>
diff --git a/src/components/GitDiffViewer.tsx b/src/components/GitDiffViewer.tsx
index 42ade2d64..1cabc38d4 100644
--- a/src/components/GitDiffViewer.tsx
+++ b/src/components/GitDiffViewer.tsx
@@ -1,6 +1,10 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { DiffBlock } from "./DiffBlock";
+import { parseDiff } from "../utils/diff";
 import { languageFromPath } from "../utils/syntax";
+import type { DiffLineReference } from "../types";
+import type { ParsedDiffLine } from "../utils/diff";
+
 type GitDiffViewerItem = {
   path: string;
   status: string;
@@ -12,6 +16,14 @@ type GitDiffViewerProps = {
   selectedPath: string | null;
   isLoading: boolean;
   error: string | null;
+  onLineReference?: (reference: DiffLineReference) => void;
+};
+
+type SelectedRange = {
+  path: string;
+  start: number;
+  end: number;
+  anchor: number;
 };
 
 export function GitDiffViewer({
@@ -19,9 +31,11 @@ export function GitDiffViewer({
   selectedPath,
   isLoading,
   error,
+  onLineReference,
 }: GitDiffViewerProps) {
   const itemRefs = useRef(new Map<string, HTMLDivElement>());
   const lastScrolledPath = useRef<string | null>(null);
+  const [selectedRange, setSelectedRange] = useState<SelectedRange | null>(null);
 
   useEffect(() => {
     if (!selectedPath) {
@@ -37,6 +51,61 @@ export function GitDiffViewer({
     }
   }, [selectedPath, diffs.length]);
 
+  useEffect(() => {
+    if (!selectedRange) {
+      return;
+    }
+    const stillExists = diffs.some((entry) => entry.path === selectedRange.path);
+    if (!stillExists) {
+      setSelectedRange(null);
+    }
+  }, [diffs, selectedRange]);
+
+  const handleLineSelect = (
+    entry: GitDiffViewerItem,
+    parsedLines: ParsedDiffLine[],
+    line: ParsedDiffLine,
+    index: number,
+    isRangeSelect: boolean,
+  ) => {
+    if (line.type !== "add" && line.type !== "del" && line.type !== "context") {
+      return;
+    }
+    const hasAnchor = selectedRange?.path === entry.path;
+    const anchor = isRangeSelect && hasAnchor ? selectedRange.anchor : index;
+    const start = isRangeSelect ? Math.min(anchor, index) : index;
+    const end = isRangeSelect ? Math.max(anchor, index) : index;
+    setSelectedRange({ path: entry.path, start, end, anchor });
+
+    const selectedLines = parsedLines
+      .slice(start, end + 1)
+      .filter((item) => item.type === "add" || item.type === "del" || item.type === "context");
+    if (selectedLines.length === 0) {
+      return;
+    }
+
+    const typeSet = new Set(selectedLines.map((item) => item.type));
+    const selectionType = typeSet.size === 1 ? selectedLines[0].type : "mixed";
+    const firstOldLine = selectedLines.find((item) => item.oldLine !== null)?.oldLine ?? null;
+    const firstNewLine = selectedLines.find((item) => item.newLine !== null)?.newLine ?? null;
+    const lastOldLine =
+      [...selectedLines].reverse().find((item) => item.oldLine !== null)?.oldLine ??
+      null;
+    const lastNewLine =
+      [...selectedLines].reverse().find((item) => item.newLine !== null)?.newLine ??
+      null;
+
+    onLineReference?.({
+      path: entry.path,
+      type: selectionType,
+      oldLine: firstOldLine,
+      newLine: firstNewLine,
+      endOldLine: lastOldLine,
+      endNewLine: lastNewLine,
+      lines: selectedLines.map((item) => item.text),
+    });
+  };
+
   return (
     <div className="diff-viewer">
       {error && <div className="diff-viewer-empty">{error}</div>}
@@ -51,6 +120,11 @@ export function GitDiffViewer({
           const isSelected = entry.path === selectedPath;
           const hasDiff = entry.diff.trim().length > 0;
           const language = languageFromPath(entry.path);
+          const parsedLines = parseDiff(entry.diff);
+          const selectedRangeForEntry =
+            selectedRange?.path === entry.path
+              ? { start: selectedRange.start, end: selectedRange.end }
+              : null;
           return (
             <div
               key={entry.path}
@@ -69,7 +143,21 @@ export function GitDiffViewer({
               </div>
               {hasDiff ? (
                 <div className="diff-viewer-output">
-                  <DiffBlock diff={entry.diff} language={language} />
+                  <DiffBlock
+                    diff={entry.diff}
+                    language={language}
+                    parsedLines={parsedLines}
+                    onLineSelect={(line, index, event) =>
+                      handleLineSelect(
+                        entry,
+                        parsedLines,
+                        line,
+                        index,
+                        "shiftKey" in event && event.shiftKey,
+                      )
+                    }
+                    selectedRange={selectedRangeForEntry}
+                  />
                 </div>
               ) : (
                 <div className="diff-viewer-placeholder">Diff unavailable.</div>
diff --git a/src/styles/composer.css b/src/styles/composer.css
index fda6b3d50..11762d5ad 100644
--- a/src/styles/composer.css
+++ b/src/styles/composer.css
@@ -77,6 +77,8 @@
 }
 
 .composer textarea {
+  min-height: 60px;
+  max-height: 120px;
   height: 60px;
   width: 100%;
   resize: none;
@@ -87,6 +89,7 @@
   padding: 8px 4px;
   font-size: 14px;
   -webkit-app-region: no-drag;
+  overflow-y: hidden;
 }
 
 .composer textarea:focus {
diff --git a/src/styles/diff-viewer.css b/src/styles/diff-viewer.css
index aa4015bd5..2a32f4ff4 100644
--- a/src/styles/diff-viewer.css
+++ b/src/styles/diff-viewer.css
@@ -69,6 +69,51 @@
   white-space: pre-wrap;
 }
 
+.diff-line.is-selectable {
+  cursor: pointer;
+}
+
+.diff-line.is-selectable:hover {
+  background: color-mix(in srgb, var(--surface-active) 55%, transparent);
+  box-shadow: inset 3px 0 0 var(--border-accent-soft);
+}
+
+.diff-line.is-selected {
+  background: color-mix(in srgb, var(--surface-active) 75%, transparent);
+  position: relative;
+  box-shadow: inset 3px 0 0 var(--border-accent);
+}
+
+.diff-line.is-selected::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--border-accent);
+}
+
+.diff-line.is-selected .diff-gutter {
+  color: var(--text-strong);
+}
+
+.diff-line.is-selected.is-range-start {
+  border-radius: 0;
+}
+
+.diff-line.is-selected.is-range-end {
+  border-radius: 0;
+}
+
+.diff-line.is-selected.is-range-start.is-range-end {
+  border-radius: 0;
+}
+
+.diff-line.is-selectable:focus-visible {
+  outline: none;
+}
+
 .diff-gutter {
   display: grid;
   grid-template-columns: 1fr 1fr;
diff --git a/src/types.ts b/src/types.ts
index 719e904e0..794dae680 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -97,6 +97,16 @@ export type GitFileDiff = {
   diff: string;
 };
 
+export type DiffLineReference = {
+  path: string;
+  type: "add" | "del" | "context" | "mixed";
+  oldLine: number | null;
+  newLine: number | null;
+  endOldLine: number | null;
+  endNewLine: number | null;
+  lines: string[];
+};
+
 export type GitLogEntry = {
   sha: string;
   summary: string;

From b7bdec6fae8c0daafc9d96e97270a7e375aebe77 Mon Sep 17 00:00:00 2001
From: Thomas Ricouard <ricouard77@gmail.com>
Date: Wed, 14 Jan 2026 09:01:41 +0100
Subject: [PATCH 2/2] fix(diff): narrow selectable diff lines

---
 src/components/DiffBlock.tsx     |  9 +++++----
 src/components/GitDiffViewer.tsx | 12 ++++++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/DiffBlock.tsx b/src/components/DiffBlock.tsx
index f1dc0ff19..96513322c 100644
--- a/src/components/DiffBlock.tsx
+++ b/src/components/DiffBlock.tsx
@@ -35,11 +35,12 @@ export function DiffBlock({
           line.type === "add" || line.type === "del" || line.type === "context";
         const html = highlightLine(line.text, shouldHighlight ? language : null);
         const isSelectable = Boolean(onLineSelect) && shouldHighlight;
-        const isSelected =
+        const isSelected = Boolean(
           isSelectable &&
-          selectedRange &&
-          index >= selectedRange.start &&
-          index <= selectedRange.end;
+            selectedRange &&
+            index >= selectedRange.start &&
+            index <= selectedRange.end,
+        );
         const isRangeStart = isSelected && selectedRange?.start === index;
         const isRangeEnd = isSelected && selectedRange?.end === index;
         return (
diff --git a/src/components/GitDiffViewer.tsx b/src/components/GitDiffViewer.tsx
index 1cabc38d4..336205a2f 100644
--- a/src/components/GitDiffViewer.tsx
+++ b/src/components/GitDiffViewer.tsx
@@ -26,6 +26,14 @@ type SelectedRange = {
   anchor: number;
 };
 
+type SelectableDiffLine = ParsedDiffLine & {
+  type: "add" | "del" | "context";
+};
+
+function isSelectableLine(line: ParsedDiffLine): line is SelectableDiffLine {
+  return line.type === "add" || line.type === "del" || line.type === "context";
+}
+
 export function GitDiffViewer({
   diffs,
   selectedPath,
@@ -68,7 +76,7 @@ export function GitDiffViewer({
     index: number,
     isRangeSelect: boolean,
   ) => {
-    if (line.type !== "add" && line.type !== "del" && line.type !== "context") {
+    if (!isSelectableLine(line)) {
       return;
     }
     const hasAnchor = selectedRange?.path === entry.path;
@@ -79,7 +87,7 @@ export function GitDiffViewer({
 
     const selectedLines = parsedLines
       .slice(start, end + 1)
-      .filter((item) => item.type === "add" || item.type === "del" || item.type === "context");
+      .filter(isSelectableLine);
     if (selectedLines.length === 0) {
       return;
     }