feat: add copy path button to diff headers

apps/web/src/components/DiffFilePathCopyButton.tsx

@@ -0,0 +1,41 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useRef } from "react";
+import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
+import { Button } from "./ui/button";
+import {
+  ANCHORED_COPY_TOAST_TIMEOUT_MS,
+  showAnchoredCopyErrorToast,
+  showAnchoredCopySuccessToast,
+} from "./ui/anchoredCopyToast";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
+
+export function DiffFilePathCopyButton({ filePath }: { filePath: string }) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const { copyToClipboard, isCopied } = useCopyToClipboard<void>({
+    onCopy: () => showAnchoredCopySuccessToast(ref),
+    onError: (error) => showAnchoredCopyErrorToast(ref, error),
+    timeout: ANCHORED_COPY_TOAST_TIMEOUT_MS,
+  });
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            ref={ref}
+            type="button"
+            size="icon-xs"
+            variant="ghost"
+            aria-label="Copy file path"
+            onClick={() => copyToClipboard(filePath, undefined)}
+          />
+        }
+      >
+        {isCopied ? <CheckIcon className="size-3 text-success" /> : <CopyIcon className="size-3" />}
+      </TooltipTrigger>
+      <TooltipPopup>
+        <p>{isCopied ? "Copied" : "Copy path"}</p>
+      </TooltipPopup>
+    </Tooltip>
+  );
+}

apps/web/src/components/DiffPanel.tsx

@@ -37,6 +37,7 @@ import { useProject, useThread } from "../state/entities";
 import { resolveThreadRouteRef } from "../threadRoutes";
 import { useClientSettings } from "../hooks/useSettings";
 import { formatShortTimestamp } from "../timestampFormat";
+import { DiffFilePathCopyButton } from "./DiffFilePathCopyButton";
 import { DiffPanelLoadingState, DiffPanelShell, type DiffPanelMode } from "./DiffPanelShell";
 import { AnnotatableCodeView, type AnnotatableCodeViewHandle } from "./diffs/AnnotatableCodeView";
 import { ToggleGroup, Toggle } from "./ui/toggle-group";
@@ -808,6 +809,9 @@ export default function DiffPanel({ mode = "inline", composerDraftTarget }: Diff
                   sectionId={reviewSectionId}
                   sectionTitle={reviewSectionTitle}
                   composerDraftTarget={composerDraftTarget}
+                  renderHeaderMetadata={(fileDiff) => (
+                    <DiffFilePathCopyButton filePath={resolveFileDiffPath(fileDiff)} />
+                  )}
                   renderHeaderPrefix={(fileDiff, fileKey, collapsed) => {
                     const filePath = resolveFileDiffPath(fileDiff);
                     return (

apps/web/src/components/chat/MessageCopyButton.tsx

@@ -3,41 +3,13 @@ import { CopyIcon, CheckIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
 import { cn } from "~/lib/utils";
-import { anchoredToastManager } from "../ui/toast";
+import {
+  ANCHORED_COPY_TOAST_TIMEOUT_MS,
+  showAnchoredCopyErrorToast,
+  showAnchoredCopySuccessToast,
+} from "../ui/anchoredCopyToast";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 
-const ANCHORED_TOAST_TIMEOUT_MS = 1000;
-const onCopy = (ref: React.RefObject<HTMLButtonElement | null>) => {
-  if (ref.current) {
-    anchoredToastManager.add({
-      data: {
-        tooltipStyle: true,
-      },
-      positionerProps: {
-        anchor: ref.current,
-      },
-      timeout: ANCHORED_TOAST_TIMEOUT_MS,
-      title: "Copied!",
-    });
-  }
-};
-
-const onCopyError = (ref: React.RefObject<HTMLButtonElement | null>, error: Error) => {
-  if (ref.current) {
-    anchoredToastManager.add({
-      data: {
-        tooltipStyle: true,
-      },
-      positionerProps: {
-        anchor: ref.current,
-      },
-      timeout: ANCHORED_TOAST_TIMEOUT_MS,
-      title: "Failed to copy",
-      description: error.message,
-    });
-  }
-};
-
 export const MessageCopyButton = memo(function MessageCopyButton({
   text,
   size = "xs",
@@ -51,9 +23,9 @@ export const MessageCopyButton = memo(function MessageCopyButton({
 }) {
   const ref = useRef<HTMLButtonElement>(null);
   const { copyToClipboard, isCopied } = useCopyToClipboard<void>({
-    onCopy: () => onCopy(ref),
-    onError: (error: Error) => onCopyError(ref, error),
-    timeout: ANCHORED_TOAST_TIMEOUT_MS,
+    onCopy: () => showAnchoredCopySuccessToast(ref),
+    onError: (error: Error) => showAnchoredCopyErrorToast(ref, error),
+    timeout: ANCHORED_COPY_TOAST_TIMEOUT_MS,
   });
 
   return (

apps/web/src/components/diffs/AnnotatableCodeView.tsx

@@ -83,6 +83,7 @@ interface AnnotatableCodeViewProps {
   options: NonNullable<CodeViewProps<DiffCommentAnnotationGroup>["options"]>;
   viewerRef?: Ref<AnnotatableCodeViewHandle>;
   className?: string;
+  renderHeaderMetadata: (fileDiff: FileDiffMetadata) => ReactNode;
   renderHeaderPrefix: (
     fileDiff: FileDiffMetadata,
     fileKey: string,
@@ -102,6 +103,7 @@ export function AnnotatableCodeView({
   options,
   viewerRef,
   className,
+  renderHeaderMetadata,
   renderHeaderPrefix,
 }: AnnotatableCodeViewProps) {
   const addReviewComment = useComposerDraftStore((store) => store.addReviewComment);
@@ -243,6 +245,9 @@ export function AnnotatableCodeView({
         enableLineSelection: !hasOpenComment,
         onLineSelectionEnd: beginComment,
       }}
+      renderHeaderMetadata={(item) =>
+        item.type === "diff" ? renderHeaderMetadata(item.fileDiff) : null
+      }
       renderHeaderPrefix={(item) =>
         item.type === "diff"
           ? renderHeaderPrefix(item.fileDiff, item.id, item.collapsed === true)

apps/web/src/components/ui/anchoredCopyToast.ts

@@ -0,0 +1,33 @@
+import type { RefObject } from "react";
+import { anchoredToastManager } from "./toast";
+
+export const ANCHORED_COPY_TOAST_TIMEOUT_MS = 1000;
+
+export function showAnchoredCopySuccessToast(ref: RefObject<HTMLButtonElement | null>) {
+  if (!ref.current) return;
+  anchoredToastManager.add({
+    data: {
+      tooltipStyle: true,
+    },
+    positionerProps: {
+      anchor: ref.current,
+    },
+    timeout: ANCHORED_COPY_TOAST_TIMEOUT_MS,
+    title: "Copied!",
+  });
+}
+
+export function showAnchoredCopyErrorToast(ref: RefObject<HTMLButtonElement | null>, error: Error) {
+  if (!ref.current) return;
+  anchoredToastManager.add({
+    data: {
+      tooltipStyle: true,
+    },
+    positionerProps: {
+      anchor: ref.current,
+    },
+    timeout: ANCHORED_COPY_TOAST_TIMEOUT_MS,
+    title: "Failed to copy",
+    description: error.message,
+  });
+}