From c89e187864ce7d2e7938f9a1817d8ef5145ed60b Mon Sep 17 00:00:00 2001
From: mask <maskdotdev@gmail.com>
Date: Thu, 12 Mar 2026 20:20:29 -0500
Subject: [PATCH 1/6] Add draft diff context comments for turn diffs

---
 apps/web/src/components/ChatView.tsx          |  97 ++--
 .../components/DiffContextCommentDraft.tsx    | 100 +++++
 .../src/components/DiffPanel.logic.test.ts    |  40 ++
 apps/web/src/components/DiffPanel.logic.ts    | 423 ++++++++++++++++++
 apps/web/src/components/DiffPanel.tsx         | 155 ++++++-
 .../chat/ComposerPendingDiffComments.tsx      |  40 ++
 .../chat/DiffContextCommentsAttachment.tsx    |  37 ++
 .../src/components/chat/MessagesTimeline.tsx  |  30 +-
 apps/web/src/components/timelineHeight.ts     |  15 +-
 apps/web/src/composerDraftStore.test.ts       | 140 +++++-
 apps/web/src/composerDraftStore.ts            | 244 ++++++++++
 apps/web/src/lib/diffContextComments.test.ts  |  88 ++++
 apps/web/src/lib/diffContextComments.ts       | 182 ++++++++
 13 files changed, 1540 insertions(+), 51 deletions(-)
 create mode 100644 apps/web/src/components/DiffContextCommentDraft.tsx
 create mode 100644 apps/web/src/components/DiffPanel.logic.test.ts
 create mode 100644 apps/web/src/components/DiffPanel.logic.ts
 create mode 100644 apps/web/src/components/chat/ComposerPendingDiffComments.tsx
 create mode 100644 apps/web/src/components/chat/DiffContextCommentsAttachment.tsx
 create mode 100644 apps/web/src/lib/diffContextComments.test.ts
 create mode 100644 apps/web/src/lib/diffContextComments.ts

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 64c15ba2f..5fb926ed7 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -124,6 +124,7 @@ import {
   type ComposerImageAttachment,
   type DraftThreadEnvMode,
   type PersistedComposerImageAttachment,
+  flushComposerDraftStorage,
   useComposerDraftStore,
   useComposerThreadDraft,
 } from "../composerDraftStore";
@@ -141,6 +142,7 @@ import { CodexTraitsPicker } from "./chat/CodexTraitsPicker";
 import { CompactComposerControlsMenu } from "./chat/CompactComposerControlsMenu";
 import { ComposerPendingApprovalPanel } from "./chat/ComposerPendingApprovalPanel";
 import { ComposerPendingUserInputPanel } from "./chat/ComposerPendingUserInputPanel";
+import { ComposerPendingDiffComments } from "./chat/ComposerPendingDiffComments";
 import { ComposerPlanFollowUpBanner } from "./chat/ComposerPlanFollowUpBanner";
 import { ProviderHealthBanner } from "./chat/ProviderHealthBanner";
 import { ThreadErrorBanner } from "./chat/ThreadErrorBanner";
@@ -159,6 +161,7 @@ import {
   SendPhase,
 } from "./ChatView.logic";
 import { useLocalStorage } from "~/hooks/useLocalStorage";
+import { appendDiffContextCommentsToPrompt } from "../lib/diffContextComments";
 
 const ATTACHMENT_PREVIEW_HANDOFF_TTL_MS = 5000;
 const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
@@ -218,6 +221,12 @@ export default function ChatView({ threadId }: ChatViewProps) {
     (store) => store.syncPersistedAttachments,
   );
   const clearComposerDraftContent = useComposerDraftStore((store) => store.clearComposerContent);
+  const restoreComposerDraftSendContent = useComposerDraftStore(
+    (store) => store.restoreComposerSendContent,
+  );
+  const clearComposerDraftDiffContextComments = useComposerDraftStore(
+    (store) => store.clearDiffContextComments,
+  );
   const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
   const getDraftThreadByProjectId = useComposerDraftStore(
     (store) => store.getDraftThreadByProjectId,
@@ -361,6 +370,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
     [draftThread, fallbackDraftProject?.model, localDraftError, threadId],
   );
   const activeThread = serverThread ?? localDraftThread;
+  const pendingDiffContextComments = composerDraft.diffContextComments;
   const runtimeMode =
     composerDraft.runtimeMode ?? activeThread?.runtimeMode ?? DEFAULT_RUNTIME_MODE;
   const interactionMode =
@@ -558,6 +568,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const isSendBusy = sendPhase !== "idle";
   const isPreparingWorktree = sendPhase === "preparing-worktree";
   const isWorking = phase === "running" || isSendBusy || isConnecting || isRevertingCheckpoint;
+  const hasPendingDiffContextComments = pendingDiffContextComments.length > 0;
   const nowIso = new Date(nowTick).toISOString();
   const activeWorkStartedAt = deriveActiveWorkStartedAt(
     activeLatestTurn,
@@ -2219,9 +2230,15 @@ export default function ChatView({ threadId }: ChatViewProps) {
       setComposerTrigger(null);
       return;
     }
-    if (!trimmed && composerImages.length === 0) return;
+    if (!trimmed && composerImages.length === 0 && !hasPendingDiffContextComments) return;
     if (!activeProject) return;
     const threadIdForSend = activeThread.id;
+    const pendingDiffContextCommentsSnapshot = [...pendingDiffContextComments];
+    const persistedComposerAttachmentsSnapshot = [...composerDraft.persistedAttachments];
+    const messageTextForSend = appendDiffContextCommentsToPrompt(
+      trimmed,
+      pendingDiffContextComments,
+    );
     const isFirstMessage = !isServerThread || activeThread.messages.length === 0;
     const baseBranchForWorktree =
       isFirstMessage && envMode === "worktree" && !activeThread.worktreePath
@@ -2268,7 +2285,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
       {
         id: messageIdForSend,
         role: "user",
-        text: trimmed,
+        text: messageTextForSend,
         ...(optimisticAttachments.length > 0 ? { attachments: optimisticAttachments } : {}),
         createdAt: messageCreatedAt,
         streaming: false,
@@ -2281,6 +2298,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
     setThreadError(threadIdForSend, null);
     promptRef.current = "";
     clearComposerDraftContent(threadIdForSend);
+    flushComposerDraftStorage();
     setComposerHighlightedItemId(null);
     setComposerCursor(0);
     setComposerTrigger(null);
@@ -2406,7 +2424,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
         message: {
           messageId: messageIdForSend,
           role: "user",
-          text: trimmed || IMAGE_ONLY_BOOTSTRAP_PROMPT,
+          text: messageTextForSend || IMAGE_ONLY_BOOTSTRAP_PROMPT,
           attachments: turnAttachments,
         },
         model: selectedModel || undefined,
@@ -2434,7 +2452,9 @@ export default function ChatView({ threadId }: ChatViewProps) {
       if (
         !turnStartSucceeded &&
         promptRef.current.length === 0 &&
-        composerImagesRef.current.length === 0
+        composerImagesRef.current.length === 0 &&
+        (useComposerDraftStore.getState().draftsByThreadId[threadIdForSend]?.diffContextComments
+          .length ?? 0) === 0
       ) {
         setOptimisticUserMessages((existing) => {
           const removed = existing.filter((message) => message.id === messageIdForSend);
@@ -2445,9 +2465,15 @@ export default function ChatView({ threadId }: ChatViewProps) {
           return next.length === existing.length ? existing : next;
         });
         promptRef.current = trimmed;
+        restoreComposerDraftSendContent(threadIdForSend, {
+          prompt: trimmed,
+          images: composerImagesSnapshot.map(cloneComposerImageForRetry),
+          persistedAttachments: persistedComposerAttachmentsSnapshot,
+          diffContextComments: pendingDiffContextCommentsSnapshot,
+        });
+        flushComposerDraftStorage();
         setPrompt(trimmed);
         setComposerCursor(collapseExpandedComposerCursor(trimmed, trimmed.length));
-        addComposerImagesToDraft(composerImagesSnapshot.map(cloneComposerImageForRetry));
         setComposerTrigger(detectComposerTrigger(trimmed, trimmed.length));
       }
       setThreadError(
@@ -3367,38 +3393,40 @@ export default function ChatView({ threadId }: ChatViewProps) {
 
                   {!isComposerApprovalState &&
                     pendingUserInputs.length === 0 &&
-                    composerImages.length > 0 && (
-                      <div className="mb-3 flex flex-wrap gap-2">
+                    (pendingDiffContextComments.length > 0 || composerImages.length > 0) && (
+                      <div className="mb-2 flex flex-wrap items-center gap-2">
+                        <ComposerPendingDiffComments
+                          comments={pendingDiffContextComments}
+                          onClearAll={() => clearComposerDraftDiffContextComments(threadId)}
+                        />
                         {composerImages.map((image) => (
-                          <div
+                          <button
                             key={image.id}
-                            className="relative h-16 w-16 overflow-hidden rounded-lg border border-border/80 bg-background"
+                            type="button"
+                            className="inline-flex h-8 cursor-zoom-in items-center gap-1.5 rounded-full border border-border/70 bg-card/90 pl-1 pr-1.5 text-foreground shadow-xs transition-colors hover:bg-accent/50"
+                            aria-label={`Preview ${image.name}`}
+                            onClick={() => {
+                              const preview = buildExpandedImagePreview(composerImages, image.id);
+                              if (!preview) return;
+                              setExpandedImage(preview);
+                            }}
                           >
                             {image.previewUrl ? (
-                              <button
-                                type="button"
-                                className="h-full w-full cursor-zoom-in"
-                                aria-label={`Preview ${image.name}`}
-                                onClick={() => {
-                                  const preview = buildExpandedImagePreview(
-                                    composerImages,
-                                    image.id,
-                                  );
-                                  if (!preview) return;
-                                  setExpandedImage(preview);
-                                }}
-                              >
+                              <span className="size-6 shrink-0 overflow-hidden rounded-full">
                                 <img
                                   src={image.previewUrl}
                                   alt={image.name}
                                   className="h-full w-full object-cover"
                                 />
-                              </button>
+                              </span>
                             ) : (
-                              <div className="flex h-full w-full items-center justify-center px-1 text-center text-[10px] text-muted-foreground/70">
-                                {image.name}
-                              </div>
+                              <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[8px] text-muted-foreground">
+                                IMG
+                              </span>
                             )}
+                            <span className="max-w-24 truncate text-xs font-medium">
+                              {image.name}
+                            </span>
                             {nonPersistedComposerImageIdSet.has(image.id) && (
                               <Tooltip>
                                 <TooltipTrigger
@@ -3406,7 +3434,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                                     <span
                                       role="img"
                                       aria-label="Draft attachment may not persist"
-                                      className="absolute left-1 top-1 inline-flex items-center justify-center rounded bg-background/85 p-0.5 text-amber-600"
+                                      className="inline-flex items-center justify-center text-amber-600"
                                     >
                                       <CircleAlertIcon className="size-3" />
                                     </span>
@@ -3424,13 +3452,16 @@ export default function ChatView({ threadId }: ChatViewProps) {
                             <Button
                               variant="ghost"
                               size="icon-xs"
-                              className="absolute right-1 top-1 bg-background/80 hover:bg-background/90"
-                              onClick={() => removeComposerImage(image.id)}
+                              className="size-5 rounded-full"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                removeComposerImage(image.id);
+                              }}
                               aria-label={`Remove ${image.name}`}
                             >
-                              <XIcon />
+                              <XIcon className="size-3" />
                             </Button>
-                          </div>
+                          </button>
                         ))}
                       </div>
                     )}
@@ -3723,7 +3754,9 @@ export default function ChatView({ threadId }: ChatViewProps) {
                             disabled={
                               isSendBusy ||
                               isConnecting ||
-                              (!prompt.trim() && composerImages.length === 0)
+                              (!prompt.trim() &&
+                                composerImages.length === 0 &&
+                                !hasPendingDiffContextComments)
                             }
                             aria-label={
                               isConnecting
diff --git a/apps/web/src/components/DiffContextCommentDraft.tsx b/apps/web/src/components/DiffContextCommentDraft.tsx
new file mode 100644
index 000000000..ca19abd57
--- /dev/null
+++ b/apps/web/src/components/DiffContextCommentDraft.tsx
@@ -0,0 +1,100 @@
+import { useEffect, useRef } from "react";
+import { Button } from "./ui/button";
+
+interface DiffContextCommentDraftProps {
+  filePath: string;
+  lineStart: number;
+  lineEnd: number;
+  body: string;
+  error: string;
+  onBodyChange: (value: string) => void;
+  onCancel: () => void;
+  onSubmit: () => void;
+  onDelete?: () => void;
+  submitLabel?: string;
+}
+
+function formatLineRange(start: number, end: number): string {
+  return start === end ? `${start}` : `${start}-${end}`;
+}
+
+export const DIFF_CONTEXT_COMMENT_CARD_STYLE = {
+  width: "min(44rem, calc(100cqw - 3.5rem), calc(100vw - 7.5rem))",
+  maxWidth: "100%",
+} as const;
+
+export function DiffContextCommentDraft({
+  filePath,
+  lineStart,
+  lineEnd,
+  body,
+  error,
+  onBodyChange,
+  onCancel,
+  onSubmit,
+  onDelete,
+  submitLabel = "Comment",
+}: DiffContextCommentDraftProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    textarea.focus();
+    const cursorPosition = textarea.value.length;
+    textarea.setSelectionRange(cursorPosition, cursorPosition);
+  }, [filePath, lineStart, lineEnd]);
+
+  return (
+    <div
+      className="ml-2 mr-5 my-1 min-w-0"
+      style={DIFF_CONTEXT_COMMENT_CARD_STYLE}
+      onClick={(event) => event.stopPropagation()}
+      onMouseDown={(event) => event.stopPropagation()}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <div className="group rounded-md border border-border bg-card transition-colors duration-200 focus-within:border-ring/45">
+        <div className="relative">
+          <textarea
+            ref={textareaRef}
+            value={body}
+            onChange={(event) => onBodyChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key !== "Escape") {
+                return;
+              }
+
+              event.preventDefault();
+              event.stopPropagation();
+              onCancel();
+            }}
+            placeholder="Request change"
+            aria-label={`Comment on ${filePath}:${formatLineRange(lineStart, lineEnd)}`}
+            className="min-h-[200px] w-full resize-none bg-transparent px-3 py-3 pb-15 text-sm text-foreground outline-none placeholder:text-muted-foreground/70 sm:px-4 sm:py-4"
+          />
+          <div className="absolute right-4 bottom-3 left-4 z-10 flex flex-wrap items-end justify-between gap-3 sm:right-5 sm:left-5">
+            <div className="min-w-0 flex-1 basis-40">
+              {error ? <span className="text-xs text-destructive">{error}</span> : null}
+            </div>
+            <div className="flex flex-wrap items-center justify-end gap-3">
+              {onDelete ? (
+                <Button type="button" variant="destructive" onClick={onDelete}>
+                  Delete
+                </Button>
+              ) : null}
+              <Button type="button" variant="outline" onClick={onCancel}>
+                Cancel
+              </Button>
+              <Button type="button" onClick={onSubmit}>
+                {submitLabel}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/DiffPanel.logic.test.ts b/apps/web/src/components/DiffPanel.logic.test.ts
new file mode 100644
index 000000000..2da04ac45
--- /dev/null
+++ b/apps/web/src/components/DiffPanel.logic.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import type { FileDiffMetadata } from "@pierre/diffs/react";
+import { buildFileKeyByPathIndex } from "./DiffPanel.logic";
+
+function makeFileDiff(
+  input: Partial<Pick<FileDiffMetadata, "name" | "prevName" | "cacheKey">>,
+): FileDiffMetadata {
+  return {
+    name: input.name ?? null,
+    prevName: input.prevName ?? null,
+    cacheKey: input.cacheKey ?? null,
+  } as FileDiffMetadata;
+}
+
+describe("buildFileKeyByPathIndex", () => {
+  it("indexes both the previous and current path for renamed files", () => {
+    const renamedFile = makeFileDiff({
+      name: "b/src/new-name.ts",
+      prevName: "a/src/old-name.ts",
+      cacheKey: "rename-cache-key",
+    });
+
+    const fileKeyByPath = buildFileKeyByPathIndex([renamedFile]);
+
+    expect(fileKeyByPath.get("src/old-name.ts")).toBe("rename-cache-key");
+    expect(fileKeyByPath.get("src/new-name.ts")).toBe("rename-cache-key");
+  });
+
+  it("keeps a single entry when the normalized paths are identical", () => {
+    const unchangedFile = makeFileDiff({
+      name: "b/src/example.ts",
+      prevName: "a/src/example.ts",
+      cacheKey: "same-cache-key",
+    });
+
+    const fileKeyByPath = buildFileKeyByPathIndex([unchangedFile]);
+
+    expect([...fileKeyByPath.entries()]).toEqual([["src/example.ts", "same-cache-key"]]);
+  });
+});
diff --git a/apps/web/src/components/DiffPanel.logic.ts b/apps/web/src/components/DiffPanel.logic.ts
new file mode 100644
index 000000000..ca27a0142
--- /dev/null
+++ b/apps/web/src/components/DiffPanel.logic.ts
@@ -0,0 +1,423 @@
+import { type DiffLineAnnotation, type SelectedLineRange } from "@pierre/diffs";
+import { type FileDiffMetadata } from "@pierre/diffs/react";
+import { type ThreadId, type TurnId } from "@t3tools/contracts";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useComposerDraftStore } from "../composerDraftStore";
+import {
+  type DiffContextCommentSide,
+  type DiffContextCommentDraft,
+} from "../lib/diffContextComments";
+import { randomUUID } from "../lib/utils";
+
+export type DiffCommentAnnotationMetadata =
+  | {
+      kind: "draft-comment";
+      filePath: string;
+      lineStart: number;
+      lineEnd: number;
+    }
+  | {
+      kind: "saved-comment";
+      commentId: string;
+      filePath: string;
+      lineStart: number;
+      lineEnd: number;
+      isEditing: boolean;
+    };
+
+export type DiffCommentSelection = {
+  file: FileDiffMetadata;
+  fileKey: string;
+  range: SelectedLineRange;
+};
+
+const EMPTY_PENDING_DIFF_CONTEXT_COMMENTS: readonly DiffContextCommentDraft[] = [];
+
+function normalizeDiffPath(raw: string | null | undefined): string {
+  if (!raw) {
+    return "";
+  }
+  if (raw.startsWith("a/") || raw.startsWith("b/")) {
+    return raw.slice(2);
+  }
+  return raw;
+}
+
+export function resolveFileDiffPath(fileDiff: FileDiffMetadata): string {
+  return normalizeDiffPath(fileDiff.name ?? fileDiff.prevName);
+}
+
+export function buildFileDiffRenderKey(fileDiff: FileDiffMetadata): string {
+  return fileDiff.cacheKey ?? `${fileDiff.prevName ?? "none"}:${fileDiff.name}`;
+}
+
+export function buildFileKeyByPathIndex(
+  renderableFiles: ReadonlyArray<FileDiffMetadata>,
+): Map<string, string> {
+  const fileKeyByPath = new Map<string, string>();
+
+  for (const fileDiff of renderableFiles) {
+    const fileKey = buildFileDiffRenderKey(fileDiff);
+    const candidatePaths = [normalizeDiffPath(fileDiff.prevName), normalizeDiffPath(fileDiff.name)];
+
+    for (const filePath of candidatePaths) {
+      if (!filePath) {
+        continue;
+      }
+      fileKeyByPath.set(filePath, fileKey);
+    }
+  }
+
+  return fileKeyByPath;
+}
+
+function toNormalizedLineRange(range: SelectedLineRange): SelectedLineRange {
+  if (range.start <= range.end) {
+    return range;
+  }
+
+  return {
+    start: range.end,
+    end: range.start,
+    ...((range.endSide ?? range.side) ? { side: range.endSide ?? range.side } : {}),
+    ...(range.side ? { endSide: range.side } : {}),
+  };
+}
+
+function toLineRange(range: SelectedLineRange): { start: number; end: number } {
+  const normalizedRange = toNormalizedLineRange(range);
+  return {
+    start: normalizedRange.start,
+    end: normalizedRange.end,
+  };
+}
+
+function areSelectedLineRangesEqual(
+  left: SelectedLineRange | null,
+  right: SelectedLineRange | null,
+): boolean {
+  if (left === right) {
+    return true;
+  }
+  if (!left || !right) {
+    return false;
+  }
+
+  const normalizedLeft = toNormalizedLineRange(left);
+  const normalizedRight = toNormalizedLineRange(right);
+  return (
+    normalizedLeft.start === normalizedRight.start &&
+    normalizedLeft.end === normalizedRight.end &&
+    normalizedLeft.side === normalizedRight.side &&
+    normalizedLeft.endSide === normalizedRight.endSide
+  );
+}
+
+function resolveCommentFilePath(
+  fileDiff: FileDiffMetadata,
+  side: DiffContextCommentSide,
+): string | null {
+  return normalizeDiffPath(
+    side === "deletions"
+      ? (fileDiff.prevName ?? fileDiff.name)
+      : (fileDiff.name ?? fileDiff.prevName),
+  );
+}
+
+export function useDiffContextCommentDrafts(args: {
+  activeThreadId: ThreadId | null;
+  selectedTurnId: TurnId | null;
+  renderableFiles: ReadonlyArray<FileDiffMetadata>;
+}) {
+  const { activeThreadId, selectedTurnId, renderableFiles } = args;
+  const addDiffContextComment = useComposerDraftStore((store) => store.addDiffContextComment);
+  const updateDiffContextComment = useComposerDraftStore((store) => store.updateDiffContextComment);
+  const removeDiffContextComment = useComposerDraftStore((store) => store.removeDiffContextComment);
+  const pendingDiffContextComments = useComposerDraftStore((state) =>
+    activeThreadId
+      ? (state.draftsByThreadId[activeThreadId]?.diffContextComments ??
+        EMPTY_PENDING_DIFF_CONTEXT_COMMENTS)
+      : EMPTY_PENDING_DIFF_CONTEXT_COMMENTS,
+  );
+  const [manualCommentSelection, setManualCommentSelection] = useState<DiffCommentSelection | null>(
+    null,
+  );
+  const [manualCommentBody, setManualCommentBody] = useState("");
+  const [manualCommentError, setManualCommentError] = useState("");
+  const [editingCommentId, setEditingCommentId] = useState<string | null>(null);
+  const [editingCommentBody, setEditingCommentBody] = useState("");
+  const [editingCommentError, setEditingCommentError] = useState("");
+  const suppressLineSelectionUntilRef = useRef(0);
+
+  const visiblePendingDiffContextComments = useMemo(
+    () => pendingDiffContextComments.filter((comment) => comment.turnId === selectedTurnId),
+    [pendingDiffContextComments, selectedTurnId],
+  );
+  const selectedCommentRange = manualCommentSelection?.range ?? null;
+  const selectedCommentLineRange = useMemo(
+    () => (selectedCommentRange ? toLineRange(selectedCommentRange) : null),
+    [selectedCommentRange],
+  );
+  const selectedCommentSide = (selectedCommentRange?.side ?? "additions") as DiffContextCommentSide;
+
+  const lineAnnotationsByFileKey = useMemo<
+    Record<string, DiffLineAnnotation<DiffCommentAnnotationMetadata>[]>
+  >(() => {
+    const annotationsByFileKey: Record<
+      string,
+      DiffLineAnnotation<DiffCommentAnnotationMetadata>[]
+    > = {};
+    const fileKeyByPath = buildFileKeyByPathIndex(renderableFiles);
+
+    for (const comment of visiblePendingDiffContextComments) {
+      const fileKey = fileKeyByPath.get(comment.filePath);
+      if (!fileKey) {
+        continue;
+      }
+
+      const annotations = annotationsByFileKey[fileKey] ?? [];
+      annotations.push({
+        side: comment.side,
+        lineNumber: comment.lineEnd,
+        metadata: {
+          kind: "saved-comment",
+          commentId: comment.id,
+          filePath: comment.filePath,
+          lineStart: comment.lineStart,
+          lineEnd: comment.lineEnd,
+          isEditing: editingCommentId === comment.id,
+        },
+      });
+      annotationsByFileKey[fileKey] = annotations;
+    }
+
+    if (!manualCommentSelection || !selectedCommentLineRange) {
+      return annotationsByFileKey;
+    }
+
+    const filePath = resolveCommentFilePath(manualCommentSelection.file, selectedCommentSide);
+    if (!filePath) {
+      return annotationsByFileKey;
+    }
+
+    const annotations = annotationsByFileKey[manualCommentSelection.fileKey] ?? [];
+    annotations.push({
+      side: selectedCommentSide,
+      lineNumber: selectedCommentLineRange.end,
+      metadata: {
+        kind: "draft-comment",
+        filePath,
+        lineStart: selectedCommentLineRange.start,
+        lineEnd: selectedCommentLineRange.end,
+      },
+    });
+    annotationsByFileKey[manualCommentSelection.fileKey] = annotations;
+
+    return annotationsByFileKey;
+  }, [
+    editingCommentId,
+    manualCommentSelection,
+    renderableFiles,
+    selectedCommentLineRange,
+    selectedCommentSide,
+    visiblePendingDiffContextComments,
+  ]);
+
+  const selectedLinesForFileKey = useMemo(
+    () =>
+      manualCommentSelection
+        ? {
+            fileKey: manualCommentSelection.fileKey,
+            range: manualCommentSelection.range,
+          }
+        : null,
+    [manualCommentSelection],
+  );
+
+  useEffect(() => {
+    setManualCommentSelection(null);
+    setManualCommentBody("");
+    setManualCommentError("");
+    setEditingCommentId(null);
+    setEditingCommentBody("");
+    setEditingCommentError("");
+  }, [activeThreadId, selectedTurnId]);
+
+  useEffect(() => {
+    if (!editingCommentId) {
+      return;
+    }
+
+    const stillVisible = visiblePendingDiffContextComments.some(
+      (comment) => comment.id === editingCommentId,
+    );
+    if (stillVisible) {
+      return;
+    }
+
+    setEditingCommentId(null);
+    setEditingCommentBody("");
+    setEditingCommentError("");
+  }, [editingCommentId, visiblePendingDiffContextComments]);
+
+  const handleManualCommentSelectionChange = useCallback(
+    (input: { file: FileDiffMetadata; fileKey: string; range: SelectedLineRange | null }) => {
+      if (input.range && Date.now() < suppressLineSelectionUntilRef.current) {
+        return;
+      }
+
+      if (!input.range) {
+        setManualCommentSelection((current) => {
+          if (current?.fileKey !== input.fileKey) {
+            return current;
+          }
+          return null;
+        });
+        setManualCommentError("");
+        return;
+      }
+
+      setEditingCommentId(null);
+      setEditingCommentBody("");
+      setEditingCommentError("");
+
+      const nextRange = toNormalizedLineRange(input.range);
+      setManualCommentSelection((current) => {
+        if (
+          current &&
+          current.fileKey === input.fileKey &&
+          areSelectedLineRangesEqual(current.range, nextRange)
+        ) {
+          return current;
+        }
+
+        return {
+          file: input.file,
+          fileKey: input.fileKey,
+          range: nextRange,
+        };
+      });
+      setManualCommentError("");
+    },
+    [],
+  );
+
+  const clearManualCommentSelection = useCallback(() => {
+    suppressLineSelectionUntilRef.current = Date.now() + 500;
+    setManualCommentSelection(null);
+    setManualCommentBody("");
+    setManualCommentError("");
+  }, []);
+
+  const cancelEditingComment = useCallback(() => {
+    setEditingCommentId(null);
+    setEditingCommentBody("");
+    setEditingCommentError("");
+  }, []);
+
+  const beginEditingComment = useCallback((comment: DiffContextCommentDraft) => {
+    setManualCommentSelection(null);
+    setManualCommentBody("");
+    setManualCommentError("");
+    setEditingCommentId(comment.id);
+    setEditingCommentBody(comment.body);
+    setEditingCommentError("");
+  }, []);
+
+  const submitManualComment = useCallback(() => {
+    if (!activeThreadId || !manualCommentSelection || !selectedCommentLineRange) {
+      setManualCommentError("Select at least one line before sending.");
+      return;
+    }
+
+    const commentBody = manualCommentBody.trim();
+    if (commentBody.length === 0) {
+      setManualCommentError("Comment text is required.");
+      return;
+    }
+
+    const endSide = manualCommentSelection.range.endSide;
+    if (endSide && endSide !== selectedCommentSide) {
+      setManualCommentError("Selection crosses additions and deletions. Select one side only.");
+      return;
+    }
+
+    const filePath = resolveCommentFilePath(manualCommentSelection.file, selectedCommentSide);
+    if (!filePath) {
+      setManualCommentError("Unable to resolve the selected file path.");
+      return;
+    }
+
+    addDiffContextComment(activeThreadId, {
+      id: randomUUID(),
+      threadId: activeThreadId,
+      turnId: selectedTurnId,
+      filePath,
+      lineStart: selectedCommentLineRange.start,
+      lineEnd: selectedCommentLineRange.end,
+      side: selectedCommentSide,
+      body: commentBody,
+      createdAt: new Date().toISOString(),
+    });
+    setEditingCommentId(null);
+    setEditingCommentBody("");
+    setEditingCommentError("");
+    clearManualCommentSelection();
+  }, [
+    activeThreadId,
+    addDiffContextComment,
+    clearManualCommentSelection,
+    manualCommentBody,
+    manualCommentSelection,
+    selectedCommentLineRange,
+    selectedCommentSide,
+    selectedTurnId,
+  ]);
+
+  const saveEditingComment = useCallback(() => {
+    if (!activeThreadId || !editingCommentId) {
+      return;
+    }
+
+    const commentBody = editingCommentBody.trim();
+    if (commentBody.length === 0) {
+      setEditingCommentError("Comment text is required.");
+      return;
+    }
+
+    updateDiffContextComment(activeThreadId, editingCommentId, {
+      body: commentBody,
+    });
+    setEditingCommentId(null);
+    setEditingCommentBody("");
+    setEditingCommentError("");
+  }, [activeThreadId, editingCommentBody, editingCommentId, updateDiffContextComment]);
+
+  const deleteEditingComment = useCallback(() => {
+    if (!activeThreadId || !editingCommentId) {
+      return;
+    }
+
+    removeDiffContextComment(activeThreadId, editingCommentId);
+    cancelEditingComment();
+  }, [activeThreadId, cancelEditingComment, editingCommentId, removeDiffContextComment]);
+
+  return {
+    editingCommentBody,
+    editingCommentError,
+    lineAnnotationsByFileKey,
+    manualCommentBody,
+    manualCommentError,
+    selectedLinesForFileKey,
+    visiblePendingDiffContextComments,
+    beginEditingComment,
+    cancelEditingComment,
+    clearManualCommentSelection,
+    deleteEditingComment,
+    handleManualCommentSelectionChange,
+    saveEditingComment,
+    setEditingCommentBody,
+    setManualCommentBody,
+    submitManualComment,
+  };
+}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 6a3c008c5..33d9988d3 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -1,4 +1,4 @@
-import { parsePatchFiles } from "@pierre/diffs";
+import { type DiffLineAnnotation, parsePatchFiles } from "@pierre/diffs";
 import { FileDiff, type FileDiffMetadata, Virtualizer } from "@pierre/diffs/react";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
@@ -27,6 +27,16 @@ import { useTurnDiffSummaries } from "../hooks/useTurnDiffSummaries";
 import { useStore } from "../store";
 import { useAppSettings } from "../appSettings";
 import { formatShortTimestamp } from "../timestampFormat";
+import {
+  buildFileDiffRenderKey,
+  type DiffCommentAnnotationMetadata,
+  resolveFileDiffPath,
+  useDiffContextCommentDrafts,
+} from "./DiffPanel.logic";
+import {
+  DIFF_CONTEXT_COMMENT_CARD_STYLE,
+  DiffContextCommentDraft as DiffContextCommentDraftCard,
+} from "./DiffContextCommentDraft";
 import { ToggleGroup, Toggle } from "./ui/toggle-group";
 
 type DiffRenderMode = "stacked" | "split";
@@ -139,24 +149,34 @@ function getRenderablePatch(
   }
 }
 
-function resolveFileDiffPath(fileDiff: FileDiffMetadata): string {
-  const raw = fileDiff.name ?? fileDiff.prevName ?? "";
-  if (raw.startsWith("a/") || raw.startsWith("b/")) {
-    return raw.slice(2);
-  }
-  return raw;
-}
-
-function buildFileDiffRenderKey(fileDiff: FileDiffMetadata): string {
-  return fileDiff.cacheKey ?? `${fileDiff.prevName ?? "none"}:${fileDiff.name}`;
-}
-
 interface DiffPanelProps {
   mode?: "inline" | "sheet" | "sidebar";
 }
 
 export { DiffWorkerPoolProvider } from "./DiffWorkerPoolProvider";
 
+function DiffContextCommentPreview(props: { body: string; onEdit: () => void }) {
+  const { body, onEdit } = props;
+
+  return (
+    <div
+      className="ml-2 mr-5 my-1 min-w-0"
+      style={DIFF_CONTEXT_COMMENT_CARD_STYLE}
+      onClick={(event) => event.stopPropagation()}
+      onMouseDown={(event) => event.stopPropagation()}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <button
+        type="button"
+        onClick={onEdit}
+        className="w-full rounded-md border border-border bg-card px-4 py-3 text-left text-sm text-foreground transition-colors duration-200 hover:border-ring/45 focus-visible:border-ring/45 focus-visible:outline-none"
+      >
+        <p className="whitespace-pre-wrap break-words">{body}</p>
+      </button>
+    </div>
+  );
+}
+
 export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   const navigate = useNavigate();
   const { resolvedTheme } = useTheme();
@@ -292,6 +312,28 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
       }),
     );
   }, [renderablePatch]);
+  const {
+    editingCommentBody,
+    editingCommentError,
+    lineAnnotationsByFileKey,
+    manualCommentBody,
+    manualCommentError,
+    selectedLinesForFileKey,
+    visiblePendingDiffContextComments,
+    beginEditingComment,
+    cancelEditingComment,
+    clearManualCommentSelection,
+    deleteEditingComment,
+    handleManualCommentSelectionChange,
+    saveEditingComment,
+    setEditingCommentBody,
+    setManualCommentBody,
+    submitManualComment,
+  } = useDiffContextCommentDrafts({
+    activeThreadId,
+    selectedTurnId: selectedTurn?.turnId ?? null,
+    renderableFiles,
+  });
 
   useEffect(() => {
     if (!selectedFilePath || !patchViewportRef.current) {
@@ -303,6 +345,72 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
     target?.scrollIntoView({ block: "nearest" });
   }, [selectedFilePath, renderableFiles]);
 
+  const renderDraftAnnotation = useCallback(
+    (annotation: DiffLineAnnotation<DiffCommentAnnotationMetadata>) => {
+      const { metadata } = annotation;
+      if (metadata.kind === "draft-comment") {
+        return (
+          <DiffContextCommentDraftCard
+            filePath={metadata.filePath}
+            lineStart={metadata.lineStart}
+            lineEnd={metadata.lineEnd}
+            body={manualCommentBody}
+            error={manualCommentError}
+            onBodyChange={setManualCommentBody}
+            onCancel={clearManualCommentSelection}
+            onSubmit={submitManualComment}
+          />
+        );
+      }
+
+      const comment = visiblePendingDiffContextComments.find(
+        (entry) => entry.id === metadata.commentId,
+      );
+      if (!comment) {
+        return null;
+      }
+
+      if (metadata.isEditing) {
+        return (
+          <DiffContextCommentDraftCard
+            filePath={comment.filePath}
+            lineStart={comment.lineStart}
+            lineEnd={comment.lineEnd}
+            body={editingCommentBody}
+            error={editingCommentError}
+            onBodyChange={setEditingCommentBody}
+            onCancel={cancelEditingComment}
+            onDelete={deleteEditingComment}
+            onSubmit={saveEditingComment}
+            submitLabel="Save"
+          />
+        );
+      }
+
+      return (
+        <DiffContextCommentPreview
+          body={comment.body}
+          onEdit={() => beginEditingComment(comment)}
+        />
+      );
+    },
+    [
+      beginEditingComment,
+      cancelEditingComment,
+      clearManualCommentSelection,
+      deleteEditingComment,
+      editingCommentBody,
+      editingCommentError,
+      manualCommentBody,
+      manualCommentError,
+      saveEditingComment,
+      setEditingCommentBody,
+      setManualCommentBody,
+      submitManualComment,
+      visiblePendingDiffContextComments,
+    ],
+  );
+
   const openDiffFileInEditor = useCallback(
     (filePath: string) => {
       const api = readNativeApi();
@@ -597,9 +705,30 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
                     >
                       <FileDiff
                         fileDiff={fileDiff}
+                        lineAnnotations={lineAnnotationsByFileKey[fileKey] ?? []}
+                        selectedLines={
+                          selectedLinesForFileKey?.fileKey === fileKey
+                            ? selectedLinesForFileKey.range
+                            : null
+                        }
+                        renderAnnotation={renderDraftAnnotation}
                         options={{
                           diffStyle: diffRenderMode === "split" ? "split" : "unified",
                           lineDiffType: "none",
+                          enableGutterUtility: true,
+                          enableLineSelection: true,
+                          onGutterUtilityClick: (range) =>
+                            handleManualCommentSelectionChange({
+                              file: fileDiff,
+                              fileKey,
+                              range,
+                            }),
+                          onLineSelected: (range) =>
+                            handleManualCommentSelectionChange({
+                              file: fileDiff,
+                              fileKey,
+                              range,
+                            }),
                           theme: resolveDiffThemeName(resolvedTheme),
                           themeType: resolvedTheme as DiffThemeType,
                           unsafeCSS: DIFF_PANEL_UNSAFE_CSS,
diff --git a/apps/web/src/components/chat/ComposerPendingDiffComments.tsx b/apps/web/src/components/chat/ComposerPendingDiffComments.tsx
new file mode 100644
index 000000000..1e0eb02e6
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerPendingDiffComments.tsx
@@ -0,0 +1,40 @@
+import { XIcon } from "lucide-react";
+import { Button } from "../ui/button";
+import {
+  buildDiffContextCommentsPreviewTitle,
+  type DiffContextCommentDraft,
+} from "../../lib/diffContextComments";
+import { DiffContextCommentsAttachment } from "./DiffContextCommentsAttachment";
+
+export function ComposerPendingDiffComments(props: {
+  comments: ReadonlyArray<DiffContextCommentDraft>;
+  onClearAll: () => void;
+}) {
+  const { comments, onClearAll } = props;
+
+  if (comments.length === 0) {
+    return null;
+  }
+
+  const previewTitle = buildDiffContextCommentsPreviewTitle(comments);
+
+  return (
+    <DiffContextCommentsAttachment
+      commentCount={comments.length}
+      previewTitle={previewTitle}
+      className="h-8 rounded-full pl-3 pr-1.5"
+      action={
+        <Button
+          type="button"
+          size="icon-xs"
+          variant="ghost"
+          className="size-5 rounded-full"
+          aria-label="Clear pending diff comments"
+          onClick={onClearAll}
+        >
+          <XIcon className="size-3" />
+        </Button>
+      }
+    />
+  );
+}
diff --git a/apps/web/src/components/chat/DiffContextCommentsAttachment.tsx b/apps/web/src/components/chat/DiffContextCommentsAttachment.tsx
new file mode 100644
index 000000000..673dcd16c
--- /dev/null
+++ b/apps/web/src/components/chat/DiffContextCommentsAttachment.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { MessageSquareIcon } from "lucide-react";
+
+import { cn } from "~/lib/utils";
+
+interface DiffContextCommentsAttachmentProps {
+  commentCount: number;
+  previewTitle?: string | null;
+  className?: string;
+  action?: ReactNode;
+}
+
+export function DiffContextCommentsAttachment(props: DiffContextCommentsAttachmentProps) {
+  const { commentCount, previewTitle, className, action } = props;
+
+  if (commentCount <= 0) {
+    return null;
+  }
+
+  const commentCountLabel = `${commentCount} comment${commentCount === 1 ? "" : "s"}`;
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 rounded-lg border border-border/70 bg-card/90 px-2.5 py-1.5 text-foreground shadow-xs",
+        className,
+      )}
+      title={previewTitle ?? undefined}
+    >
+      <span className="inline-flex size-6 items-center justify-center rounded-md bg-background/70 text-muted-foreground">
+        <MessageSquareIcon className="size-3.5" />
+      </span>
+      <span className="text-xs font-medium">{commentCountLabel}</span>
+      {action ? <span className="flex items-center">{action}</span> : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 0e6d470a0..95a8f6d08 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -9,15 +9,18 @@ import { deriveTimelineEntries, formatElapsed } from "../../session-logic";
 import { AUTO_SCROLL_BOTTOM_THRESHOLD_PX } from "../../chat-scroll";
 import { type TurnDiffSummary } from "../../types";
 import { summarizeTurnDiffStats } from "../../lib/turnDiffTree";
+import { extractTrailingDiffContextComments } from "../../lib/diffContextComments";
 import ChatMarkdown from "../ChatMarkdown";
 import { Undo2Icon } from "lucide-react";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { clamp } from "effect/Number";
 import { estimateTimelineMessageHeight } from "../timelineHeight";
 import { buildExpandedImagePreview, ExpandedImagePreview } from "./ExpandedImagePreview";
 import { ProposedPlanCard } from "./ProposedPlanCard";
 import { ChangedFilesTree } from "./ChangedFilesTree";
 import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
+import { DiffContextCommentsAttachment } from "./DiffContextCommentsAttachment";
 import { MessageCopyButton } from "./MessageCopyButton";
 import { computeMessageDurationStart } from "./MessagesTimeline.logic";
 import { type TimestampFormat } from "../../appSettings";
@@ -365,6 +368,8 @@ export const MessagesTimeline = memo(function MessagesTimeline({
         row.message.role === "user" &&
         (() => {
           const userImages = row.message.attachments ?? [];
+          const extractedDiffComments = extractTrailingDiffContextComments(row.message.text);
+          const visibleUserText = extractedDiffComments.promptText;
           const canRevertAgentWork = revertTurnCountByUserMessageId.has(row.message.id);
           return (
             <div className="flex justify-end">
@@ -406,14 +411,14 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                     )}
                   </div>
                 )}
-                {row.message.text && (
+                {visibleUserText && (
                   <pre className="whitespace-pre-wrap wrap-break-word font-mono text-sm leading-relaxed text-foreground">
-                    {row.message.text}
+                    {visibleUserText}
                   </pre>
                 )}
                 <div className="mt-1.5 flex items-center justify-end gap-2">
                   <div className="flex items-center gap-1.5 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100">
-                    {row.message.text && <MessageCopyButton text={row.message.text} />}
+                    {visibleUserText && <MessageCopyButton text={visibleUserText} />}
                     {canRevertAgentWork && (
                       <Button
                         type="button"
@@ -427,6 +432,25 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                       </Button>
                     )}
                   </div>
+                  {extractedDiffComments.commentCount > 0 && (
+                    <Tooltip>
+                      <TooltipTrigger
+                        render={
+                          <DiffContextCommentsAttachment
+                            commentCount={extractedDiffComments.commentCount}
+                            previewTitle={extractedDiffComments.previewTitle}
+                            className="gap-1.5 rounded-full border-border/50 bg-background/35 px-1.5 py-0.5 text-muted-foreground/65 shadow-none"
+                          />
+                        }
+                      />
+                      <TooltipPopup
+                        side="top"
+                        className="max-w-72 whitespace-pre-wrap leading-tight"
+                      >
+                        {extractedDiffComments.previewTitle}
+                      </TooltipPopup>
+                    </Tooltip>
+                  )}
                   <p className="text-right text-[10px] text-muted-foreground/30">
                     {formatTimestamp(row.message.createdAt, timestampFormat)}
                   </p>
diff --git a/apps/web/src/components/timelineHeight.ts b/apps/web/src/components/timelineHeight.ts
index 78a5f6539..94925b99b 100644
--- a/apps/web/src/components/timelineHeight.ts
+++ b/apps/web/src/components/timelineHeight.ts
@@ -1,3 +1,5 @@
+import { extractTrailingDiffContextComments } from "../lib/diffContextComments";
+
 const ASSISTANT_CHARS_PER_LINE_FALLBACK = 72;
 const USER_CHARS_PER_LINE_FALLBACK = 56;
 const LINE_HEIGHT_PX = 22;
@@ -6,6 +8,7 @@ const USER_BASE_HEIGHT_PX = 96;
 const ATTACHMENTS_PER_ROW = 2;
 // Attachment thumbnails render with `max-h-[220px]` plus ~8px row gap.
 const USER_ATTACHMENT_ROW_HEIGHT_PX = 228;
+const USER_DIFF_CONTEXT_COMMENTS_HEIGHT_PX = 40;
 const USER_BUBBLE_WIDTH_RATIO = 0.8;
 const USER_BUBBLE_HORIZONTAL_PADDING_PX = 32;
 const ASSISTANT_MESSAGE_HORIZONTAL_PADDING_PX = 8;
@@ -74,12 +77,20 @@ export function estimateTimelineMessageHeight(
   }
 
   if (message.role === "user") {
+    const extractedDiffComments = extractTrailingDiffContextComments(message.text);
     const charsPerLine = estimateCharsPerLineForUser(layout.timelineWidthPx);
-    const estimatedLines = estimateWrappedLineCount(message.text, charsPerLine);
+    const estimatedLines =
+      extractedDiffComments.promptText.length > 0
+        ? estimateWrappedLineCount(extractedDiffComments.promptText, charsPerLine)
+        : 0;
     const attachmentCount = message.attachments?.length ?? 0;
     const attachmentRows = Math.ceil(attachmentCount / ATTACHMENTS_PER_ROW);
     const attachmentHeight = attachmentRows * USER_ATTACHMENT_ROW_HEIGHT_PX;
-    return USER_BASE_HEIGHT_PX + estimatedLines * LINE_HEIGHT_PX + attachmentHeight;
+    const diffCommentsHeight =
+      extractedDiffComments.commentCount > 0 ? USER_DIFF_CONTEXT_COMMENTS_HEIGHT_PX : 0;
+    return (
+      USER_BASE_HEIGHT_PX + estimatedLines * LINE_HEIGHT_PX + attachmentHeight + diffCommentsHeight
+    );
   }
 
   // `system` messages are not rendered in the chat timeline, but keep a stable
diff --git a/apps/web/src/composerDraftStore.test.ts b/apps/web/src/composerDraftStore.test.ts
index 927a16060..698ec1cbb 100644
--- a/apps/web/src/composerDraftStore.test.ts
+++ b/apps/web/src/composerDraftStore.test.ts
@@ -1,4 +1,4 @@
-import { ProjectId, ThreadId } from "@t3tools/contracts";
+import { ProjectId, ThreadId, TurnId } from "@t3tools/contracts";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import {
@@ -6,6 +6,7 @@ import {
   createDebouncedStorage,
   useComposerDraftStore,
 } from "./composerDraftStore";
+import { type DiffContextCommentDraft } from "./lib/diffContextComments";
 
 function makeImage(input: {
   id: string;
@@ -34,6 +35,30 @@ function makeImage(input: {
   };
 }
 
+function makeDiffComment(input: {
+  id: string;
+  threadId?: ThreadId;
+  filePath?: string;
+  lineStart?: number;
+  lineEnd?: number;
+  side?: "additions" | "deletions";
+  body?: string;
+  turnId?: string | null;
+  createdAt?: string;
+}): DiffContextCommentDraft {
+  return {
+    id: input.id,
+    threadId: input.threadId ?? ThreadId.makeUnsafe("thread-comments"),
+    turnId: input.turnId ? TurnId.makeUnsafe(input.turnId) : null,
+    filePath: input.filePath ?? "src/example.ts",
+    lineStart: input.lineStart ?? 12,
+    lineEnd: input.lineEnd ?? 12,
+    side: input.side ?? "additions",
+    body: input.body ?? "Tighten this guard.",
+    createdAt: input.createdAt ?? "2026-03-12T00:00:00.000Z",
+  };
+}
+
 describe("composerDraftStore addImages", () => {
   const threadId = ThreadId.makeUnsafe("thread-dedupe");
   let originalRevokeObjectUrl: typeof URL.revokeObjectURL;
@@ -156,6 +181,119 @@ describe("composerDraftStore clearComposerContent", () => {
     expect(draft).toBeUndefined();
     expect(revokeSpy).not.toHaveBeenCalledWith("blob:optimistic");
   });
+
+  it("clears pending diff context comments with the rest of the composer draft", () => {
+    useComposerDraftStore
+      .getState()
+      .addDiffContextComment(threadId, makeDiffComment({ id: "comment-clear", threadId }));
+
+    useComposerDraftStore.getState().clearComposerContent(threadId);
+
+    expect(useComposerDraftStore.getState().draftsByThreadId[threadId]).toBeUndefined();
+  });
+
+  it("preserves pending diff context comments when clearing only sendable composer content", () => {
+    const store = useComposerDraftStore.getState();
+    store.setPrompt(threadId, "Retry me");
+    store.addImage(
+      threadId,
+      makeImage({
+        id: "img-send-only",
+        previewUrl: "blob:send-only",
+      }),
+    );
+    store.addDiffContextComment(
+      threadId,
+      makeDiffComment({ id: "comment-send-only", threadId, body: "Keep this draft comment." }),
+    );
+
+    store.clearComposerSendContent(threadId);
+
+    const draft = useComposerDraftStore.getState().draftsByThreadId[threadId];
+    expect(draft?.prompt).toBe("");
+    expect(draft?.images).toEqual([]);
+    expect(draft?.diffContextComments.map((comment) => comment.id)).toEqual(["comment-send-only"]);
+  });
+
+  it("restores sendable composer content after a failed send", () => {
+    const store = useComposerDraftStore.getState();
+    const image = makeImage({
+      id: "img-restore",
+      previewUrl: "blob:restore",
+    });
+    const comment = makeDiffComment({
+      id: "comment-restore",
+      threadId,
+      body: "Restore this diff note.",
+    });
+
+    store.clearComposerContent(threadId);
+    store.restoreComposerSendContent(threadId, {
+      prompt: "Try again",
+      images: [image],
+      persistedAttachments: [],
+      diffContextComments: [comment],
+    });
+
+    const draft = useComposerDraftStore.getState().draftsByThreadId[threadId];
+    expect(draft?.prompt).toBe("Try again");
+    expect(draft?.images.map((entry) => entry.id)).toEqual(["img-restore"]);
+    expect(draft?.diffContextComments.map((entry) => entry.id)).toEqual(["comment-restore"]);
+  });
+});
+
+describe("composerDraftStore diff context comments", () => {
+  const threadId = ThreadId.makeUnsafe("thread-comments");
+
+  beforeEach(() => {
+    useComposerDraftStore.setState({
+      draftsByThreadId: {},
+      draftThreadsByThreadId: {},
+      projectDraftThreadIdByProjectId: {},
+    });
+  });
+
+  it("adds, updates, removes, and clears pending diff comments", () => {
+    const store = useComposerDraftStore.getState();
+
+    store.addDiffContextComment(threadId, makeDiffComment({ id: "comment-1", threadId }));
+    store.addDiffContextComment(
+      threadId,
+      makeDiffComment({
+        id: "comment-2",
+        threadId,
+        body: "Keep the fallback.",
+        side: "deletions",
+      }),
+    );
+
+    expect(
+      useComposerDraftStore
+        .getState()
+        .draftsByThreadId[threadId]?.diffContextComments.map((comment) => comment.id),
+    ).toEqual(["comment-1", "comment-2"]);
+
+    store.updateDiffContextComment(threadId, "comment-1", {
+      body: "Use the shared helper instead.",
+    });
+
+    expect(
+      useComposerDraftStore.getState().draftsByThreadId[threadId]?.diffContextComments[0]?.body,
+    ).toBe("Use the shared helper instead.");
+    expect(
+      useComposerDraftStore.getState().draftsByThreadId[threadId]?.diffContextComments[0]?.filePath,
+    ).toBe("src/example.ts");
+
+    store.removeDiffContextComment(threadId, "comment-2");
+    expect(
+      useComposerDraftStore
+        .getState()
+        .draftsByThreadId[threadId]?.diffContextComments.map((comment) => comment.id),
+    ).toEqual(["comment-1"]);
+
+    store.clearDiffContextComments(threadId);
+    expect(store.draftsByThreadId[threadId]).toBeUndefined();
+  });
 });
 
 describe("composerDraftStore project draft thread mapping", () => {
diff --git a/apps/web/src/composerDraftStore.ts b/apps/web/src/composerDraftStore.ts
index 2af920527..8b8a5dc32 100644
--- a/apps/web/src/composerDraftStore.ts
+++ b/apps/web/src/composerDraftStore.ts
@@ -3,6 +3,7 @@ import {
   ProjectId,
   REASONING_EFFORT_OPTIONS_BY_PROVIDER,
   ThreadId,
+  TurnId,
   type CodexReasoningEffort,
   type ProviderKind,
   type ProviderInteractionMode,
@@ -10,6 +11,10 @@ import {
 } from "@t3tools/contracts";
 import { normalizeModelSlug } from "@t3tools/shared/model";
 import { DEFAULT_INTERACTION_MODE, DEFAULT_RUNTIME_MODE, type ChatImageAttachment } from "./types";
+import {
+  type DiffContextCommentDraft,
+  type DiffContextCommentDraftUpdate,
+} from "./lib/diffContextComments";
 import { Debouncer } from "@tanstack/react-pacer";
 import { create } from "zustand";
 import { createJSONStorage, persist, type StateStorage } from "zustand/middleware";
@@ -51,6 +56,10 @@ const composerDebouncedStorage: DebouncedStorage =
     ? createDebouncedStorage(localStorage)
     : { getItem: () => null, setItem: () => {}, removeItem: () => {}, flush: () => {} };
 
+export function flushComposerDraftStorage(): void {
+  composerDebouncedStorage.flush();
+}
+
 // Flush pending composer draft writes before page unload to prevent data loss.
 if (typeof window !== "undefined") {
   window.addEventListener("beforeunload", () => {
@@ -74,6 +83,7 @@ export interface ComposerImageAttachment extends Omit<ChatImageAttachment, "prev
 interface PersistedComposerThreadDraftState {
   prompt: string;
   attachments: PersistedComposerImageAttachment[];
+  diffContextComments?: DiffContextCommentDraft[];
   provider?: ProviderKind | null;
   model?: string | null;
   runtimeMode?: RuntimeMode | null;
@@ -104,6 +114,7 @@ interface ComposerThreadDraftState {
   images: ComposerImageAttachment[];
   nonPersistedImageIds: string[];
   persistedAttachments: PersistedComposerImageAttachment[];
+  diffContextComments: DiffContextCommentDraft[];
   provider: ProviderKind | null;
   model: string | null;
   runtimeMode: RuntimeMode | null;
@@ -172,11 +183,29 @@ interface ComposerDraftStoreState {
   addImage: (threadId: ThreadId, image: ComposerImageAttachment) => void;
   addImages: (threadId: ThreadId, images: ComposerImageAttachment[]) => void;
   removeImage: (threadId: ThreadId, imageId: string) => void;
+  addDiffContextComment: (threadId: ThreadId, comment: DiffContextCommentDraft) => void;
+  updateDiffContextComment: (
+    threadId: ThreadId,
+    commentId: string,
+    updates: DiffContextCommentDraftUpdate,
+  ) => void;
+  removeDiffContextComment: (threadId: ThreadId, commentId: string) => void;
+  clearDiffContextComments: (threadId: ThreadId) => void;
   clearPersistedAttachments: (threadId: ThreadId) => void;
   syncPersistedAttachments: (
     threadId: ThreadId,
     attachments: PersistedComposerImageAttachment[],
   ) => void;
+  restoreComposerSendContent: (
+    threadId: ThreadId,
+    snapshot: {
+      prompt: string;
+      images: ComposerImageAttachment[];
+      persistedAttachments: PersistedComposerImageAttachment[];
+      diffContextComments: DiffContextCommentDraft[];
+    },
+  ) => void;
+  clearComposerSendContent: (threadId: ThreadId) => void;
   clearComposerContent: (threadId: ThreadId) => void;
   clearThreadDraft: (threadId: ThreadId) => void;
 }
@@ -190,14 +219,17 @@ const EMPTY_PERSISTED_DRAFT_STORE_STATE: PersistedComposerDraftStoreState = {
 const EMPTY_IMAGES: ComposerImageAttachment[] = [];
 const EMPTY_IDS: string[] = [];
 const EMPTY_PERSISTED_ATTACHMENTS: PersistedComposerImageAttachment[] = [];
+const EMPTY_DIFF_CONTEXT_COMMENTS: DiffContextCommentDraft[] = [];
 Object.freeze(EMPTY_IMAGES);
 Object.freeze(EMPTY_IDS);
 Object.freeze(EMPTY_PERSISTED_ATTACHMENTS);
+Object.freeze(EMPTY_DIFF_CONTEXT_COMMENTS);
 const EMPTY_THREAD_DRAFT = Object.freeze({
   prompt: "",
   images: EMPTY_IMAGES,
   nonPersistedImageIds: EMPTY_IDS,
   persistedAttachments: EMPTY_PERSISTED_ATTACHMENTS,
+  diffContextComments: EMPTY_DIFF_CONTEXT_COMMENTS,
   provider: null,
   model: null,
   runtimeMode: null,
@@ -216,6 +248,7 @@ function createEmptyThreadDraft(): ComposerThreadDraftState {
     images: [],
     nonPersistedImageIds: [],
     persistedAttachments: [],
+    diffContextComments: [],
     provider: null,
     model: null,
     runtimeMode: null,
@@ -236,6 +269,7 @@ function shouldRemoveDraft(draft: ComposerThreadDraftState): boolean {
     draft.prompt.length === 0 &&
     draft.images.length === 0 &&
     draft.persistedAttachments.length === 0 &&
+    draft.diffContextComments.length === 0 &&
     draft.provider === null &&
     draft.model === null &&
     draft.runtimeMode === null &&
@@ -290,6 +324,52 @@ function normalizePersistedAttachment(value: unknown): PersistedComposerImageAtt
   };
 }
 
+function normalizeDiffContextCommentDraft(value: unknown): DiffContextCommentDraft | null {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const candidate = value as Record<string, unknown>;
+  const id = candidate.id;
+  const threadId = candidate.threadId;
+  const turnId = candidate.turnId;
+  const filePath = candidate.filePath;
+  const lineStart = candidate.lineStart;
+  const lineEnd = candidate.lineEnd;
+  const side = candidate.side;
+  const body = candidate.body;
+  const createdAt = candidate.createdAt;
+  if (
+    typeof id !== "string" ||
+    id.length === 0 ||
+    typeof threadId !== "string" ||
+    threadId.length === 0 ||
+    !(turnId === null || typeof turnId === "string") ||
+    typeof filePath !== "string" ||
+    filePath.length === 0 ||
+    typeof lineStart !== "number" ||
+    !Number.isFinite(lineStart) ||
+    typeof lineEnd !== "number" ||
+    !Number.isFinite(lineEnd) ||
+    (side !== "additions" && side !== "deletions") ||
+    typeof body !== "string" ||
+    typeof createdAt !== "string" ||
+    createdAt.length === 0
+  ) {
+    return null;
+  }
+  return {
+    id,
+    threadId: threadId as ThreadId,
+    turnId: turnId as TurnId | null,
+    filePath,
+    lineStart,
+    lineEnd,
+    side,
+    body,
+    createdAt,
+  };
+}
+
 function normalizeDraftThreadEnvMode(
   value: unknown,
   fallbackWorktreePath: string | null,
@@ -404,6 +484,12 @@ function normalizePersistedComposerDraftState(value: unknown): PersistedComposer
           return normalized ? [normalized] : [];
         })
       : [];
+    const diffContextComments = Array.isArray(draftCandidate.diffContextComments)
+      ? draftCandidate.diffContextComments.flatMap((entry) => {
+          const normalized = normalizeDiffContextCommentDraft(entry);
+          return normalized ? [normalized] : [];
+        })
+      : [];
     const provider = normalizeProviderKind(draftCandidate.provider);
     const model =
       typeof draftCandidate.model === "string"
@@ -430,6 +516,7 @@ function normalizePersistedComposerDraftState(value: unknown): PersistedComposer
     if (
       prompt.length === 0 &&
       attachments.length === 0 &&
+      diffContextComments.length === 0 &&
       !provider &&
       !model &&
       !runtimeMode &&
@@ -442,6 +529,7 @@ function normalizePersistedComposerDraftState(value: unknown): PersistedComposer
     nextDraftsByThreadId[threadId as ThreadId] = {
       prompt,
       attachments,
+      ...(diffContextComments.length > 0 ? { diffContextComments } : {}),
       ...(provider ? { provider } : {}),
       ...(model ? { model } : {}),
       ...(runtimeMode ? { runtimeMode } : {}),
@@ -548,6 +636,7 @@ function toHydratedThreadDraft(
     images: hydrateImagesFromPersisted(persistedDraft.attachments),
     nonPersistedImageIds: [],
     persistedAttachments: persistedDraft.attachments,
+    diffContextComments: persistedDraft.diffContextComments ?? [],
     provider: persistedDraft.provider ?? null,
     model: persistedDraft.model ?? null,
     runtimeMode: persistedDraft.runtimeMode ?? null,
@@ -1066,6 +1155,100 @@ export const useComposerDraftStore = create<ComposerDraftStoreState>()(
           return { draftsByThreadId: nextDraftsByThreadId };
         });
       },
+      addDiffContextComment: (threadId, comment) => {
+        if (threadId.length === 0) {
+          return;
+        }
+        set((state) => {
+          const existing = state.draftsByThreadId[threadId] ?? createEmptyThreadDraft();
+          return {
+            draftsByThreadId: {
+              ...state.draftsByThreadId,
+              [threadId]: {
+                ...existing,
+                diffContextComments: [...existing.diffContextComments, comment],
+              },
+            },
+          };
+        });
+      },
+      updateDiffContextComment: (threadId, commentId, updates) => {
+        if (threadId.length === 0) {
+          return;
+        }
+        set((state) => {
+          const current = state.draftsByThreadId[threadId];
+          if (!current) {
+            return state;
+          }
+          const commentIndex = current.diffContextComments.findIndex(
+            (comment) => comment.id === commentId,
+          );
+          if (commentIndex === -1) {
+            return state;
+          }
+          const nextDiffContextComments = current.diffContextComments.slice();
+          nextDiffContextComments[commentIndex] = {
+            ...nextDiffContextComments[commentIndex]!,
+            body: updates.body,
+          };
+          return {
+            draftsByThreadId: {
+              ...state.draftsByThreadId,
+              [threadId]: {
+                ...current,
+                diffContextComments: nextDiffContextComments,
+              },
+            },
+          };
+        });
+      },
+      removeDiffContextComment: (threadId, commentId) => {
+        if (threadId.length === 0) {
+          return;
+        }
+        set((state) => {
+          const current = state.draftsByThreadId[threadId];
+          if (!current) {
+            return state;
+          }
+          const nextDraft: ComposerThreadDraftState = {
+            ...current,
+            diffContextComments: current.diffContextComments.filter(
+              (comment) => comment.id !== commentId,
+            ),
+          };
+          const nextDraftsByThreadId = { ...state.draftsByThreadId };
+          if (shouldRemoveDraft(nextDraft)) {
+            delete nextDraftsByThreadId[threadId];
+          } else {
+            nextDraftsByThreadId[threadId] = nextDraft;
+          }
+          return { draftsByThreadId: nextDraftsByThreadId };
+        });
+      },
+      clearDiffContextComments: (threadId) => {
+        if (threadId.length === 0) {
+          return;
+        }
+        set((state) => {
+          const current = state.draftsByThreadId[threadId];
+          if (!current || current.diffContextComments.length === 0) {
+            return state;
+          }
+          const nextDraft: ComposerThreadDraftState = {
+            ...current,
+            diffContextComments: [],
+          };
+          const nextDraftsByThreadId = { ...state.draftsByThreadId };
+          if (shouldRemoveDraft(nextDraft)) {
+            delete nextDraftsByThreadId[threadId];
+          } else {
+            nextDraftsByThreadId[threadId] = nextDraft;
+          }
+          return { draftsByThreadId: nextDraftsByThreadId };
+        });
+      },
       clearPersistedAttachments: (threadId) => {
         if (threadId.length === 0) {
           return;
@@ -1144,6 +1327,62 @@ export const useComposerDraftStore = create<ComposerDraftStoreState>()(
           });
         });
       },
+      restoreComposerSendContent: (threadId, snapshot) => {
+        if (threadId.length === 0) {
+          return;
+        }
+        set((state) => {
+          const current = state.draftsByThreadId[threadId] ?? createEmptyThreadDraft();
+          const persistedAttachmentIds = new Set(
+            snapshot.persistedAttachments.map((attachment) => attachment.id),
+          );
+          const imageIds = new Set(snapshot.images.map((image) => image.id));
+          const nextDraft: ComposerThreadDraftState = {
+            ...current,
+            prompt: snapshot.prompt,
+            images: [...snapshot.images],
+            nonPersistedImageIds: snapshot.images
+              .map((image) => image.id)
+              .filter((imageId) => !persistedAttachmentIds.has(imageId)),
+            persistedAttachments: snapshot.persistedAttachments.filter((attachment) =>
+              imageIds.has(attachment.id),
+            ),
+            diffContextComments: [...snapshot.diffContextComments],
+          };
+          const nextDraftsByThreadId = { ...state.draftsByThreadId };
+          if (shouldRemoveDraft(nextDraft)) {
+            delete nextDraftsByThreadId[threadId];
+          } else {
+            nextDraftsByThreadId[threadId] = nextDraft;
+          }
+          return { draftsByThreadId: nextDraftsByThreadId };
+        });
+      },
+      clearComposerSendContent: (threadId) => {
+        if (threadId.length === 0) {
+          return;
+        }
+        set((state) => {
+          const current = state.draftsByThreadId[threadId];
+          if (!current) {
+            return state;
+          }
+          const nextDraft: ComposerThreadDraftState = {
+            ...current,
+            prompt: "",
+            images: [],
+            nonPersistedImageIds: [],
+            persistedAttachments: [],
+          };
+          const nextDraftsByThreadId = { ...state.draftsByThreadId };
+          if (shouldRemoveDraft(nextDraft)) {
+            delete nextDraftsByThreadId[threadId];
+          } else {
+            nextDraftsByThreadId[threadId] = nextDraft;
+          }
+          return { draftsByThreadId: nextDraftsByThreadId };
+        });
+      },
       clearComposerContent: (threadId) => {
         if (threadId.length === 0) {
           return;
@@ -1159,6 +1398,7 @@ export const useComposerDraftStore = create<ComposerDraftStoreState>()(
             images: [],
             nonPersistedImageIds: [],
             persistedAttachments: [],
+            diffContextComments: [],
           };
           const nextDraftsByThreadId = { ...state.draftsByThreadId };
           if (shouldRemoveDraft(nextDraft)) {
@@ -1218,6 +1458,7 @@ export const useComposerDraftStore = create<ComposerDraftStoreState>()(
           if (
             draft.prompt.length === 0 &&
             draft.persistedAttachments.length === 0 &&
+            draft.diffContextComments.length === 0 &&
             draft.provider === null &&
             draft.model === null &&
             draft.runtimeMode === null &&
@@ -1231,6 +1472,9 @@ export const useComposerDraftStore = create<ComposerDraftStoreState>()(
             prompt: draft.prompt,
             attachments: draft.persistedAttachments,
           };
+          if (draft.diffContextComments.length > 0) {
+            persistedDraft.diffContextComments = draft.diffContextComments;
+          }
           if (draft.model) {
             persistedDraft.model = draft.model;
           }
diff --git a/apps/web/src/lib/diffContextComments.test.ts b/apps/web/src/lib/diffContextComments.test.ts
new file mode 100644
index 000000000..411980bc7
--- /dev/null
+++ b/apps/web/src/lib/diffContextComments.test.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { ThreadId } from "@t3tools/contracts";
+
+import {
+  appendDiffContextCommentsToPrompt,
+  extractTrailingDiffContextComments,
+  type DiffContextCommentDraft,
+} from "./diffContextComments";
+
+function makeComment(input: {
+  id: string;
+  filePath: string;
+  lineStart: number;
+  lineEnd?: number;
+  side?: "additions" | "deletions";
+  body: string;
+}): DiffContextCommentDraft {
+  return {
+    id: input.id,
+    threadId: ThreadId.makeUnsafe("thread-diff-comments"),
+    turnId: null,
+    filePath: input.filePath,
+    lineStart: input.lineStart,
+    lineEnd: input.lineEnd ?? input.lineStart,
+    side: input.side ?? "additions",
+    body: input.body,
+    createdAt: "2026-03-12T00:00:00.000Z",
+  };
+}
+
+describe("diffContextComments", () => {
+  it("preserves multiline comment bodies in the serialized prompt block", () => {
+    const prompt = appendDiffContextCommentsToPrompt("Please address these.", [
+      makeComment({
+        id: "comment-1",
+        filePath: "src/example.ts",
+        lineStart: 12,
+        body: "Keep the guard.\n- This branch is still reachable.\n\nAdd a test.",
+      }),
+    ]);
+
+    expect(prompt).toContain("- src/example.ts:+12:");
+    expect(prompt).toContain("  Keep the guard.");
+    expect(prompt).toContain("  - This branch is still reachable.");
+    expect(prompt).toContain("  ");
+    expect(prompt).toContain("  Add a test.");
+  });
+
+  it("extracts previews from both multiline and legacy single-line comment blocks", () => {
+    const multilinePrompt = appendDiffContextCommentsToPrompt("Prompt text", [
+      makeComment({
+        id: "comment-1",
+        filePath: "src/example.ts",
+        lineStart: 12,
+        lineEnd: 14,
+        body: "First line\nSecond line",
+      }),
+      makeComment({
+        id: "comment-2",
+        filePath: "src/old.ts",
+        lineStart: 5,
+        side: "deletions",
+        body: "Legacy formatting should still parse.",
+      }),
+    ]);
+
+    expect(extractTrailingDiffContextComments(multilinePrompt)).toEqual({
+      promptText: "Prompt text",
+      commentCount: 2,
+      previewTitle:
+        "src/example.ts:+12-14\nFirst line\nSecond line\n\nsrc/old.ts:-5\nLegacy formatting should still parse.",
+    });
+
+    const legacyPrompt = [
+      "Prompt text",
+      "",
+      "<diff_context_comments>",
+      "- src/example.ts:+12: One line only",
+      "</diff_context_comments>",
+    ].join("\n");
+
+    expect(extractTrailingDiffContextComments(legacyPrompt)).toEqual({
+      promptText: "Prompt text",
+      commentCount: 1,
+      previewTitle: "src/example.ts:+12\nOne line only",
+    });
+  });
+});
diff --git a/apps/web/src/lib/diffContextComments.ts b/apps/web/src/lib/diffContextComments.ts
new file mode 100644
index 000000000..df13718f1
--- /dev/null
+++ b/apps/web/src/lib/diffContextComments.ts
@@ -0,0 +1,182 @@
+import { type ThreadId, type TurnId } from "@t3tools/contracts";
+
+export type DiffContextCommentSide = "additions" | "deletions";
+
+export interface DiffContextCommentDraft {
+  id: string;
+  threadId: ThreadId;
+  turnId: TurnId | null;
+  filePath: string;
+  lineStart: number;
+  lineEnd: number;
+  side: DiffContextCommentSide;
+  body: string;
+  createdAt: string;
+}
+
+export interface DiffContextCommentDraftUpdate {
+  body: string;
+}
+
+export interface ExtractedDiffContextComments {
+  promptText: string;
+  commentCount: number;
+  previewTitle: string | null;
+}
+
+const TRAILING_DIFF_CONTEXT_COMMENTS_BLOCK_PATTERN =
+  /\n*<diff_context_comments>\n([\s\S]*?)\n<\/diff_context_comments>\s*$/;
+
+function formatSideLabel(side: DiffContextCommentSide): string {
+  return side === "deletions" ? "-" : "+";
+}
+
+export function formatDiffContextCommentRange(comment: {
+  lineStart: number;
+  lineEnd: number;
+  side: DiffContextCommentSide;
+}): string {
+  const prefix = formatSideLabel(comment.side);
+  return comment.lineStart === comment.lineEnd
+    ? `${prefix}${comment.lineStart}`
+    : `${prefix}${comment.lineStart}-${comment.lineEnd}`;
+}
+
+export function formatDiffContextCommentLabel(comment: {
+  filePath: string;
+  lineStart: number;
+  lineEnd: number;
+  side: DiffContextCommentSide;
+}): string {
+  return `${comment.filePath}:${formatDiffContextCommentRange(comment)}`;
+}
+
+function normalizeCommentBody(body: string): string {
+  return body.trim();
+}
+
+export function buildDiffContextCommentsPreviewTitle(
+  comments: ReadonlyArray<DiffContextCommentDraft>,
+): string | null {
+  if (comments.length === 0) {
+    return null;
+  }
+
+  return comments
+    .map((comment) => `${formatDiffContextCommentLabel(comment)}\n${comment.body.trim()}`)
+    .join("\n\n");
+}
+
+export function buildDiffContextCommentsBlock(
+  comments: ReadonlyArray<DiffContextCommentDraft>,
+): string {
+  if (comments.length === 0) {
+    return "";
+  }
+
+  const lines = comments.flatMap((comment, index) => {
+    const scope = formatDiffContextCommentLabel(comment);
+    const bodyLines = normalizeCommentBody(comment.body)
+      .split("\n")
+      .map((line) => `  ${line}`);
+
+    return [`- ${scope}:`, ...bodyLines, ...(index < comments.length - 1 ? [""] : [])];
+  });
+
+  return ["<diff_context_comments>", ...lines, "</diff_context_comments>"].join("\n");
+}
+
+export function appendDiffContextCommentsToPrompt(
+  prompt: string,
+  comments: ReadonlyArray<DiffContextCommentDraft>,
+): string {
+  const trimmedPrompt = prompt.trim();
+  const commentBlock = buildDiffContextCommentsBlock(comments);
+
+  if (commentBlock.length === 0) {
+    return trimmedPrompt;
+  }
+
+  return trimmedPrompt.length > 0 ? `${trimmedPrompt}\n\n${commentBlock}` : commentBlock;
+}
+
+export function extractTrailingDiffContextComments(prompt: string): ExtractedDiffContextComments {
+  const match = TRAILING_DIFF_CONTEXT_COMMENTS_BLOCK_PATTERN.exec(prompt);
+  if (!match) {
+    return {
+      promptText: prompt,
+      commentCount: 0,
+      previewTitle: null,
+    };
+  }
+
+  const promptText = prompt.slice(0, match.index).replace(/\n+$/, "");
+  const parsedComments = parseDiffContextCommentEntries(match[1] ?? "");
+
+  return {
+    promptText,
+    commentCount: parsedComments.length,
+    previewTitle:
+      parsedComments.length > 0
+        ? parsedComments
+            .map(({ header, body }) => (body.length > 0 ? `${header}\n${body}` : header))
+            .join("\n\n")
+        : null,
+  };
+}
+
+function parseDiffContextCommentEntries(block: string): Array<{ header: string; body: string }> {
+  const entries: Array<{ header: string; body: string }> = [];
+  let current: { header: string; bodyLines: string[] } | null = null;
+
+  const commitCurrent = () => {
+    if (!current) {
+      return;
+    }
+
+    entries.push({
+      header: current.header,
+      body: current.bodyLines.join("\n").trimEnd(),
+    });
+    current = null;
+  };
+
+  for (const rawLine of block.split("\n")) {
+    const singleLineMatch = /^- (.+?): (.+)$/.exec(rawLine);
+    if (singleLineMatch) {
+      commitCurrent();
+      entries.push({
+        header: singleLineMatch[1]!,
+        body: singleLineMatch[2]!,
+      });
+      continue;
+    }
+
+    const blockHeaderMatch = /^- (.+?):$/.exec(rawLine);
+    if (blockHeaderMatch) {
+      commitCurrent();
+      current = {
+        header: blockHeaderMatch[1]!,
+        bodyLines: [],
+      };
+      continue;
+    }
+
+    if (!current) {
+      continue;
+    }
+
+    if (rawLine.startsWith("  ")) {
+      current.bodyLines.push(rawLine.slice(2));
+      continue;
+    }
+
+    if (rawLine.length === 0) {
+      current.bodyLines.push("");
+    }
+  }
+
+  commitCurrent();
+
+  return entries;
+}

From 4408969ba5662a69bc7b301623b4942d61a7afef Mon Sep 17 00:00:00 2001
From: Kiyotaka <maskdotdev@gmail.com>
Date: Thu, 12 Mar 2026 20:35:36 -0500
Subject: [PATCH 2/6] Update apps/web/src/composerDraftStore.test.ts

Co-authored-by: macroscopeapp[bot] <170038800+macroscopeapp[bot]@users.noreply.github.com>
---
 apps/web/src/composerDraftStore.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/composerDraftStore.test.ts b/apps/web/src/composerDraftStore.test.ts
index 698ec1cbb..9476de62d 100644
--- a/apps/web/src/composerDraftStore.test.ts
+++ b/apps/web/src/composerDraftStore.test.ts
@@ -292,8 +292,8 @@ describe("composerDraftStore diff context comments", () => {
     ).toEqual(["comment-1"]);
 
     store.clearDiffContextComments(threadId);
-    expect(store.draftsByThreadId[threadId]).toBeUndefined();
-  });
+    store.clearDiffContextComments(threadId);
+    expect(useComposerDraftStore.getState().draftsByThreadId[threadId]).toBeUndefined();
 });
 
 describe("composerDraftStore project draft thread mapping", () => {

From 6994232d9d06b01f7321282d135494387e946f6b Mon Sep 17 00:00:00 2001
From: Kiyotaka <maskdotdev@gmail.com>
Date: Thu, 12 Mar 2026 20:35:58 -0500
Subject: [PATCH 3/6] Update apps/web/src/composerDraftStore.ts

Co-authored-by: macroscopeapp[bot] <170038800+macroscopeapp[bot]@users.noreply.github.com>
---
 apps/web/src/composerDraftStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/composerDraftStore.ts b/apps/web/src/composerDraftStore.ts
index 8b8a5dc32..d41135b48 100644
--- a/apps/web/src/composerDraftStore.ts
+++ b/apps/web/src/composerDraftStore.ts
@@ -343,7 +343,7 @@ function normalizeDiffContextCommentDraft(value: unknown): DiffContextCommentDra
     id.length === 0 ||
     typeof threadId !== "string" ||
     threadId.length === 0 ||
-    !(turnId === null || typeof turnId === "string") ||
+    !(turnId === null || (typeof turnId === "string" && turnId.length > 0)) ||
     typeof filePath !== "string" ||
     filePath.length === 0 ||
     typeof lineStart !== "number" ||

From e23070d8de831ee381e0fa1ca6104d6042a93bfc Mon Sep 17 00:00:00 2001
From: mask <maskdotdev@gmail.com>
Date: Thu, 12 Mar 2026 20:39:59 -0500
Subject: [PATCH 4/6] Fix diff line range normalization

---
 apps/web/src/components/DiffPanel.logic.test.ts | 13 ++++++++++++-
 apps/web/src/components/DiffPanel.logic.ts      |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/DiffPanel.logic.test.ts b/apps/web/src/components/DiffPanel.logic.test.ts
index 2da04ac45..cd2208bd7 100644
--- a/apps/web/src/components/DiffPanel.logic.test.ts
+++ b/apps/web/src/components/DiffPanel.logic.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { FileDiffMetadata } from "@pierre/diffs/react";
-import { buildFileKeyByPathIndex } from "./DiffPanel.logic";
+import { areSelectedLineRangesEqual, buildFileKeyByPathIndex } from "./DiffPanel.logic";
 
 function makeFileDiff(
   input: Partial<Pick<FileDiffMetadata, "name" | "prevName" | "cacheKey">>,
@@ -38,3 +38,14 @@ describe("buildFileKeyByPathIndex", () => {
     expect([...fileKeyByPath.entries()]).toEqual([["src/example.ts", "same-cache-key"]]);
   });
 });
+
+describe("areSelectedLineRangesEqual", () => {
+  it("treats forward and backward single-side selections as equal", () => {
+    expect(
+      areSelectedLineRangesEqual(
+        { start: 5, end: 10, side: "additions" },
+        { start: 10, end: 5, side: "additions" },
+      ),
+    ).toBe(true);
+  });
+});
diff --git a/apps/web/src/components/DiffPanel.logic.ts b/apps/web/src/components/DiffPanel.logic.ts
index ca27a0142..75c83b50d 100644
--- a/apps/web/src/components/DiffPanel.logic.ts
+++ b/apps/web/src/components/DiffPanel.logic.ts
@@ -80,7 +80,7 @@ function toNormalizedLineRange(range: SelectedLineRange): SelectedLineRange {
     start: range.end,
     end: range.start,
     ...((range.endSide ?? range.side) ? { side: range.endSide ?? range.side } : {}),
-    ...(range.side ? { endSide: range.side } : {}),
+    ...(range.endSide ? { endSide: range.side } : {}),
   };
 }
 
@@ -92,7 +92,7 @@ function toLineRange(range: SelectedLineRange): { start: number; end: number } {
   };
 }
 
-function areSelectedLineRangesEqual(
+export function areSelectedLineRangesEqual(
   left: SelectedLineRange | null,
   right: SelectedLineRange | null,
 ): boolean {

From 37918a06befb81f2246026d5dd26ac3118a558f2 Mon Sep 17 00:00:00 2001
From: mask <maskdotdev@gmail.com>
Date: Thu, 12 Mar 2026 20:47:59 -0500
Subject: [PATCH 5/6] Fix rebased branch validation

---
 apps/web/src/components/ChatView.tsx    | 22 +++++++++++-----------
 apps/web/src/composerDraftStore.test.ts |  1 +
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 5fb926ed7..2906de2da 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -177,6 +177,17 @@ const COMPOSER_PATH_QUERY_DEBOUNCE_MS = 120;
 const SCRIPT_TERMINAL_COLS = 120;
 const SCRIPT_TERMINAL_ROWS = 30;
 
+function extendReplacementRangeForTrailingSpace(
+  text: string,
+  rangeEnd: number,
+  replacement: string,
+): number {
+  if (!replacement.endsWith(" ")) {
+    return rangeEnd;
+  }
+  return text[rangeEnd] === " " ? rangeEnd + 1 : rangeEnd;
+}
+
 interface ChatViewProps {
   threadId: ThreadId;
 }
@@ -2994,17 +3005,6 @@ export default function ChatView({ threadId }: ChatViewProps) {
     };
   }, [composerCursor]);
 
-  const extendReplacementRangeForTrailingSpace = (
-    text: string,
-    rangeEnd: number,
-    replacement: string,
-  ): number => {
-    if (!replacement.endsWith(" ")) {
-      return rangeEnd;
-    }
-    return text[rangeEnd] === " " ? rangeEnd + 1 : rangeEnd;
-  };
-
   const resolveActiveComposerTrigger = useCallback((): {
     snapshot: { value: string; cursor: number; expandedCursor: number };
     trigger: ComposerTrigger | null;
diff --git a/apps/web/src/composerDraftStore.test.ts b/apps/web/src/composerDraftStore.test.ts
index 9476de62d..a63eeadee 100644
--- a/apps/web/src/composerDraftStore.test.ts
+++ b/apps/web/src/composerDraftStore.test.ts
@@ -294,6 +294,7 @@ describe("composerDraftStore diff context comments", () => {
     store.clearDiffContextComments(threadId);
     store.clearDiffContextComments(threadId);
     expect(useComposerDraftStore.getState().draftsByThreadId[threadId]).toBeUndefined();
+  });
 });
 
 describe("composerDraftStore project draft thread mapping", () => {

From fac67c69484c6aab548d20b24ffe627123fd1d6b Mon Sep 17 00:00:00 2001
From: mask <maskdotdev@gmail.com>
Date: Thu, 12 Mar 2026 21:06:02 -0500
Subject: [PATCH 6/6] Fix comment tooltip display

---
 .../src/components/chat/MessagesTimeline.tsx  | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 95a8f6d08..bea1649d9 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -11,7 +11,7 @@ import { type TurnDiffSummary } from "../../types";
 import { summarizeTurnDiffStats } from "../../lib/turnDiffTree";
 import { extractTrailingDiffContextComments } from "../../lib/diffContextComments";
 import ChatMarkdown from "../ChatMarkdown";
-import { Undo2Icon } from "lucide-react";
+import { MessageSquareIcon, Undo2Icon } from "lucide-react";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { clamp } from "effect/Number";
@@ -20,7 +20,6 @@ import { buildExpandedImagePreview, ExpandedImagePreview } from "./ExpandedImage
 import { ProposedPlanCard } from "./ProposedPlanCard";
 import { ChangedFilesTree } from "./ChangedFilesTree";
 import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
-import { DiffContextCommentsAttachment } from "./DiffContextCommentsAttachment";
 import { MessageCopyButton } from "./MessageCopyButton";
 import { computeMessageDurationStart } from "./MessagesTimeline.logic";
 import { type TimestampFormat } from "../../appSettings";
@@ -436,11 +435,19 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                     <Tooltip>
                       <TooltipTrigger
                         render={
-                          <DiffContextCommentsAttachment
-                            commentCount={extractedDiffComments.commentCount}
-                            previewTitle={extractedDiffComments.previewTitle}
-                            className="gap-1.5 rounded-full border-border/50 bg-background/35 px-1.5 py-0.5 text-muted-foreground/65 shadow-none"
-                          />
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-1 text-muted-foreground/50"
+                            aria-label={`${extractedDiffComments.commentCount} diff context comment${
+                              extractedDiffComments.commentCount === 1 ? "" : "s"
+                            }`}
+                            title={extractedDiffComments.previewTitle ?? undefined}
+                          >
+                            <MessageSquareIcon className="size-3" />
+                            <span className="text-[10px] font-medium">
+                              {extractedDiffComments.commentCount}
+                            </span>
+                          </button>
                         }
                       />
                       <TooltipPopup