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

@@ -35,6 +35,7 @@ import { createThreadSelectorByRef } from "../storeSelectors";
 import { buildThreadRouteParams, resolveThreadRouteRef } from "../threadRoutes";
 import { useSettings } from "../hooks/useSettings";
 import { formatShortTimestamp } from "../timestampFormat";
+import { DiffFilePathCopyButton } from "./DiffFilePathCopyButton";
 import { DiffPanelLoadingState, DiffPanelShell, type DiffPanelMode } from "./DiffPanelShell";
 import { ToggleGroup, Toggle } from "./ui/toggle-group";
 
@@ -622,6 +623,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
                     >
                       <FileDiff
                         fileDiff={fileDiff}
+                        renderHeaderMetadata={() => <DiffFilePathCopyButton filePath={filePath} />}
                         options={{
                           diffStyle: diffRenderMode === "split" ? "split" : "unified",
                           lineDiffType: "none",

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/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,
+  });
+}