@paperclipai/plugin-workspace-diff 0.1.0 → 2026.620.0-canary.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Paperclip AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/contracts.d.ts

@@ -192,6 +192,7 @@ export declare const workspaceDiffFileSchema: z.ZodObject<{
         message: string;
         path: string | null;
     }[];
+    sizeBytes: number | null;
     untracked: boolean;
     staged: boolean;
     unstaged: boolean;
@@ -201,7 +202,6 @@ export declare const workspaceDiffFileSchema: z.ZodObject<{
     oversized: boolean;
     truncated: boolean;
     oldPath: string | null;
-    sizeBytes: number | null;
     patches: {
         kind: "head" | "untracked" | "staged" | "unstaged";
         warnings: {
@@ -224,6 +224,7 @@ export declare const workspaceDiffFileSchema: z.ZodObject<{
         message: string;
         path: string | null;
     }[];
+    sizeBytes: number | null;
     untracked: boolean;
     staged: boolean;
     unstaged: boolean;
@@ -233,7 +234,6 @@ export declare const workspaceDiffFileSchema: z.ZodObject<{
     oversized: boolean;
     truncated: boolean;
     oldPath: string | null;
-    sizeBytes: number | null;
     patches: {
         kind: "head" | "untracked" | "staged" | "unstaged";
         warnings: {
@@ -371,6 +371,7 @@ export declare const workspaceDiffResponseSchema: z.ZodObject<{
             message: string;
             path: string | null;
         }[];
+        sizeBytes: number | null;
         untracked: boolean;
         staged: boolean;
         unstaged: boolean;
@@ -380,7 +381,6 @@ export declare const workspaceDiffResponseSchema: z.ZodObject<{
         oversized: boolean;
         truncated: boolean;
         oldPath: string | null;
-        sizeBytes: number | null;
         patches: {
             kind: "head" | "untracked" | "staged" | "unstaged";
             warnings: {
@@ -403,6 +403,7 @@ export declare const workspaceDiffResponseSchema: z.ZodObject<{
             message: string;
             path: string | null;
         }[];
+        sizeBytes: number | null;
         untracked: boolean;
         staged: boolean;
         unstaged: boolean;
@@ -412,7 +413,6 @@ export declare const workspaceDiffResponseSchema: z.ZodObject<{
         oversized: boolean;
         truncated: boolean;
         oldPath: string | null;
-        sizeBytes: number | null;
         patches: {
             kind: "head" | "untracked" | "staged" | "unstaged";
             warnings: {
@@ -506,6 +506,7 @@ export declare const workspaceDiffResponseSchema: z.ZodObject<{
             message: string;
             path: string | null;
         }[];
+        sizeBytes: number | null;
         untracked: boolean;
         staged: boolean;
         unstaged: boolean;
@@ -515,7 +516,6 @@ export declare const workspaceDiffResponseSchema: z.ZodObject<{
         oversized: boolean;
         truncated: boolean;
         oldPath: string | null;
-        sizeBytes: number | null;
         patches: {
             kind: "head" | "untracked" | "staged" | "unstaged";
             warnings: {
@@ -571,6 +571,7 @@ export declare const workspaceDiffResponseSchema: z.ZodObject<{
             message: string;
             path: string | null;
         }[];
+        sizeBytes: number | null;
         untracked: boolean;
         staged: boolean;
         unstaged: boolean;
@@ -580,7 +581,6 @@ export declare const workspaceDiffResponseSchema: z.ZodObject<{
         oversized: boolean;
         truncated: boolean;
         oldPath: string | null;
-        sizeBytes: number | null;
         patches: {
             kind: "head" | "untracked" | "staged" | "unstaged";
             warnings: {

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AA8NvE,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CA6BA;AAqFD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,oBAAoB,2CAkR3D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAgSvE,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CA6BA;AAuFD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,oBAAoB,2CA6Z3D"}

package/dist/ui/index.js

@@ -24845,7 +24845,14 @@ function mergeFileDiffOptions({ options, hasCustomHeader, hasGutterRenderUtility
 }
 
 // src/ui/index.tsx
-import { createElement, useCallback as useCallback4, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import {
+  createElement,
+  useCallback as useCallback4,
+  useEffect as useEffect3,
+  useMemo,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
 
 // src/diff-model.ts
 var STATUS_LABELS = {
@@ -24932,6 +24939,11 @@ function initialExpandedFileSet(files) {
 
 // src/ui/index.tsx
 import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DEFAULT_FILE_SIDEBAR_WIDTH = 280;
+var MIN_FILE_SIDEBAR_WIDTH = 220;
+var MAX_FILE_SIDEBAR_WIDTH = 520;
+var FILE_SIDEBAR_WIDTH_STEP = 16;
+var FILE_SIDEBAR_WIDTH_STORAGE_KEY = "paperclip.workspace-diff.files-sidebar-width";
 function makeLucideIcon(paths) {
   return function LucideIcon({ size = 16 }) {
     return /* @__PURE__ */ jsx3(
@@ -24962,6 +24974,10 @@ function readInitialView() {
   if (typeof window === "undefined") return "working-tree";
   return new URLSearchParams(window.location.search).get("diffView") === "head" ? "head" : "working-tree";
 }
+function hasInitialViewParam() {
+  if (typeof window === "undefined") return false;
+  return new URLSearchParams(window.location.search).has("diffView");
+}
 function readInitialBaseRef() {
   if (typeof window === "undefined") return "";
   return new URLSearchParams(window.location.search).get("baseRef") ?? "";
@@ -24978,6 +24994,41 @@ function iconButtonClass(active = false) {
     active ? "border-foreground/20 bg-foreground text-background" : "border-border bg-background text-muted-foreground hover:text-foreground"
   ].join(" ");
 }
+function clampFileSidebarWidth(width) {
+  return Math.min(MAX_FILE_SIDEBAR_WIDTH, Math.max(MIN_FILE_SIDEBAR_WIDTH, width));
+}
+function readStoredFileSidebarWidth() {
+  if (typeof window === "undefined") return DEFAULT_FILE_SIDEBAR_WIDTH;
+  try {
+    const stored = window.localStorage.getItem(FILE_SIDEBAR_WIDTH_STORAGE_KEY);
+    if (!stored) return DEFAULT_FILE_SIDEBAR_WIDTH;
+    const parsed = Number.parseInt(stored, 10);
+    return Number.isFinite(parsed) ? clampFileSidebarWidth(parsed) : DEFAULT_FILE_SIDEBAR_WIDTH;
+  } catch {
+    return DEFAULT_FILE_SIDEBAR_WIDTH;
+  }
+}
+function writeStoredFileSidebarWidth(width) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(FILE_SIDEBAR_WIDTH_STORAGE_KEY, String(clampFileSidebarWidth(width)));
+  } catch {
+  }
+}
+function useIsDesktopDiffLayout() {
+  const [isDesktop, setIsDesktop] = useState3(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+    return window.matchMedia("(min-width: 1024px)").matches;
+  });
+  useEffect3(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(min-width: 1024px)");
+    const update = () => setIsDesktop(query.matches);
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+  return isDesktop;
+}
 function warningText(file) {
   if (file.binary) return "Binary file";
   if (file.oversized) return "Too large to render";
@@ -25127,7 +25178,8 @@ function ErrorState({
 }
 function FileDiffPanel({
   file,
-  mode
+  mode,
+  lineWrap
 }) {
   const warning = warningText(file);
   if (warning) {
@@ -25147,7 +25199,7 @@ function FileDiffPanel({
           patch: patch.patch,
           options: {
             diffStyle: mode,
-            overflow: "scroll",
+            overflow: lineWrap ? "wrap" : "scroll",
             disableLineNumbers: false,
             themeType: "system"
           }
@@ -25182,24 +25234,37 @@ function CollapsedFilePanel({
 function ChangesTab({ context }) {
   const toast = usePluginToast();
   const [mode, setMode] = useState3("split");
+  const [lineWrap, setLineWrap] = useState3(false);
   const [view, setView] = useState3(() => readInitialView());
   const [baseRef, setBaseRef] = useState3(() => readInitialBaseRef());
   const baseRefTouchedRef = useRef3(Boolean(baseRef.trim()));
+  const viewTouchedRef = useRef3(hasInitialViewParam());
   const [includeUntracked, setIncludeUntracked] = useState3(false);
   const [expandedFiles, setExpandedFiles] = useState3(() => /* @__PURE__ */ new Set());
   const [selectedPath, setSelectedPath] = useState3(null);
+  const [fileSidebarWidth, setFileSidebarWidth] = useState3(() => readStoredFileSidebarWidth());
+  const [fileSidebarResizing, setFileSidebarResizing] = useState3(false);
+  const fileSidebarWidthRef = useRef3(fileSidebarWidth);
+  const fileSidebarDragRef = useRef3(null);
   const fileSectionRefs = useRef3(/* @__PURE__ */ new Map());
   const diffScrollRef = useRef3(null);
   const scrollSyncFrameRef = useRef3(null);
+  const usesDesktopDiffLayout = useIsDesktopDiffLayout();
+  const requestedBaseRef = baseRef.trim();
+  const effectiveView = view === "head" && !requestedBaseRef ? "working-tree" : view;
+  const fileSidebarStyle = useMemo(
+    () => usesDesktopDiffLayout ? { width: `${fileSidebarWidth}px` } : void 0,
+    [fileSidebarWidth, usesDesktopDiffLayout]
+  );
   const params = useMemo(() => ({
     workspaceId: context.entityId,
     companyId: context.companyId ?? "",
     projectId: context.projectId ?? "",
     entityType: context.entityType,
-    view,
-    baseRef: baseRef.trim() || null,
+    view: effectiveView,
+    baseRef: requestedBaseRef || null,
     includeUntracked
-  }), [baseRef, context.companyId, context.entityId, context.entityType, context.projectId, includeUntracked, view]);
+  }), [context.companyId, context.entityId, context.entityType, context.projectId, effectiveView, includeUntracked, requestedBaseRef]);
   const { data, loading, error, refresh } = usePluginData("workspace-diff", params);
   const files = useMemo(() => toFileViewModels(data), [data]);
   const summary = useMemo(() => diffSummary(data), [data]);
@@ -25244,11 +25309,61 @@ function ChangesTab({ context }) {
       syncSelectedPathFromScroll();
     });
   }, [syncSelectedPathFromScroll]);
+  const commitFileSidebarWidth = useCallback4((nextWidth) => {
+    const clamped = clampFileSidebarWidth(nextWidth);
+    fileSidebarWidthRef.current = clamped;
+    setFileSidebarWidth(clamped);
+    writeStoredFileSidebarWidth(clamped);
+  }, []);
+  const handleFileSidebarPointerDown = useCallback4((event) => {
+    if (!usesDesktopDiffLayout) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    fileSidebarDragRef.current = {
+      startX: event.clientX,
+      startWidth: fileSidebarWidthRef.current
+    };
+    setFileSidebarResizing(true);
+  }, [usesDesktopDiffLayout]);
+  const handleFileSidebarPointerMove = useCallback4((event) => {
+    const drag = fileSidebarDragRef.current;
+    if (!drag) return;
+    const nextWidth = clampFileSidebarWidth(drag.startWidth + event.clientX - drag.startX);
+    fileSidebarWidthRef.current = nextWidth;
+    setFileSidebarWidth(nextWidth);
+  }, []);
+  const endFileSidebarResize = useCallback4(() => {
+    if (!fileSidebarDragRef.current) return;
+    fileSidebarDragRef.current = null;
+    setFileSidebarResizing(false);
+    writeStoredFileSidebarWidth(fileSidebarWidthRef.current);
+  }, []);
+  const handleFileSidebarKeyDown = useCallback4((event) => {
+    if (!usesDesktopDiffLayout) return;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      commitFileSidebarWidth(fileSidebarWidth - FILE_SIDEBAR_WIDTH_STEP);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      commitFileSidebarWidth(fileSidebarWidth + FILE_SIDEBAR_WIDTH_STEP);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      commitFileSidebarWidth(MIN_FILE_SIDEBAR_WIDTH);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      commitFileSidebarWidth(MAX_FILE_SIDEBAR_WIDTH);
+    }
+  }, [commitFileSidebarWidth, fileSidebarWidth, usesDesktopDiffLayout]);
   useEffect3(() => {
     const defaultBaseRef = data?.defaultBaseRef?.trim();
-    if (!defaultBaseRef || baseRef.trim() || baseRefTouchedRef.current) return;
-    setBaseRef(defaultBaseRef);
-  }, [baseRef, data?.defaultBaseRef]);
+    if (!defaultBaseRef) return;
+    if (!baseRef.trim() && !baseRefTouchedRef.current) {
+      setBaseRef(defaultBaseRef);
+    }
+    if (view === "working-tree" && !viewTouchedRef.current) {
+      setView("head");
+    }
+  }, [baseRef, data?.defaultBaseRef, view]);
   useEffect3(() => {
     if (files.length === 0) {
       setExpandedFiles(/* @__PURE__ */ new Set());
@@ -25265,6 +25380,17 @@ function ChangesTab({ context }) {
       }
     };
   }, []);
+  useEffect3(() => {
+    if (!fileSidebarResizing || typeof document === "undefined") return;
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+    };
+  }, [fileSidebarResizing]);
   const copyPath = async (filePath) => {
     try {
       await navigator.clipboard.writeText(filePath);
@@ -25292,9 +25418,45 @@ function ChangesTab({ context }) {
           /* @__PURE__ */ jsx3("button", { type: "button", className: buttonClass(mode === "split"), onClick: () => setMode("split"), children: "Split" }, "split"),
           /* @__PURE__ */ jsx3("button", { type: "button", className: buttonClass(mode === "unified"), onClick: () => setMode("unified"), children: "Unified" }, "unified")
         ] }, "layout"),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: buttonClass(lineWrap),
+            onClick: () => setLineWrap((value) => !value),
+            title: lineWrap ? "Disable line wrapping" : "Enable line wrapping",
+            "aria-pressed": lineWrap,
+            children: lineWrap ? "Wrap on" : "Wrap lines"
+          },
+          "line-wrap"
+        ),
         /* @__PURE__ */ jsxs("div", { className: "inline-flex gap-1", "aria-label": "Diff comparison", children: [
-          /* @__PURE__ */ jsx3("button", { type: "button", className: buttonClass(view === "working-tree"), onClick: () => setView("working-tree"), children: "Working tree" }, "working-tree"),
-          /* @__PURE__ */ jsx3("button", { type: "button", className: buttonClass(view === "head"), onClick: () => setView("head"), children: "Against ref" }, "head")
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: buttonClass(effectiveView === "working-tree"),
+              onClick: () => {
+                viewTouchedRef.current = true;
+                setView("working-tree");
+              },
+              children: "Working tree"
+            },
+            "working-tree"
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: buttonClass(effectiveView === "head"),
+              onClick: () => {
+                viewTouchedRef.current = true;
+                setView("head");
+              },
+              children: "Against ref"
+            },
+            "head"
+          )
         ] }, "view"),
         view === "head" ? /* @__PURE__ */ jsx3(
           "input",
@@ -25334,27 +25496,59 @@ function ChangesTab({ context }) {
         )
       ] }, "actions")
     ] }, "toolbar"),
-    loading ? /* @__PURE__ */ jsx3(LoadingState, {}) : error ? /* @__PURE__ */ jsx3(ErrorState, { message: error.message, onRetry: refresh }) : files.length === 0 ? /* @__PURE__ */ jsx3(EmptyState, {}) : /* @__PURE__ */ jsxs("div", { className: "grid gap-3 lg:h-[70vh] lg:min-h-[560px] lg:max-h-[820px] lg:grid-cols-[280px_minmax(0,1fr)]", children: [
-      /* @__PURE__ */ jsxs("aside", { className: "flex min-w-0 flex-col border border-border bg-background lg:h-full lg:overflow-hidden", children: [
-        /* @__PURE__ */ jsx3("div", { className: "border-b border-border px-3 py-2 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground", children: "Files" }, "heading"),
-        /* @__PURE__ */ jsx3("div", { className: "max-h-[70vh] overflow-auto lg:max-h-none lg:flex-1", children: files.map((file, index) => /* @__PURE__ */ jsx3(
-          FileRow,
-          {
-            file,
-            active: file.path === selectedFile?.path,
-            expanded: expandedFiles.has(file.path),
-            onSelect: () => selectFile(file.path),
-            onToggle: () => setExpandedFiles((current) => nextExpandedFileSet(current, file.path)),
-            onCopy: () => void copyPath(file.path)
-          },
-          `${file.path}:${index}`
-        )) }, "list")
-      ] }, "files"),
+    loading ? /* @__PURE__ */ jsx3(LoadingState, {}) : error ? /* @__PURE__ */ jsx3(ErrorState, { message: error.message, onRetry: refresh }) : files.length === 0 ? /* @__PURE__ */ jsx3(EmptyState, {}) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:h-[70vh] lg:min-h-[560px] lg:max-h-[820px] lg:flex-row", children: [
+      /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          className: "relative flex min-w-0 flex-col border border-border bg-background lg:h-full lg:shrink-0 lg:overflow-hidden",
+          style: fileSidebarStyle,
+          children: [
+            /* @__PURE__ */ jsx3("div", { className: "border-b border-border px-3 py-2 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground", children: "Files" }, "heading"),
+            /* @__PURE__ */ jsx3("div", { className: "max-h-[70vh] overflow-auto lg:max-h-none lg:flex-1", children: files.map((file, index) => /* @__PURE__ */ jsx3(
+              FileRow,
+              {
+                file,
+                active: file.path === selectedFile?.path,
+                expanded: expandedFiles.has(file.path),
+                onSelect: () => selectFile(file.path),
+                onToggle: () => setExpandedFiles((current) => nextExpandedFileSet(current, file.path)),
+                onCopy: () => void copyPath(file.path)
+              },
+              `${file.path}:${index}`
+            )) }, "list"),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                role: "separator",
+                "aria-label": "Resize file list",
+                "aria-orientation": "vertical",
+                "aria-valuemin": MIN_FILE_SIDEBAR_WIDTH,
+                "aria-valuemax": MAX_FILE_SIDEBAR_WIDTH,
+                "aria-valuenow": fileSidebarWidth,
+                tabIndex: 0,
+                className: [
+                  "absolute inset-y-0 right-0 z-20 hidden w-3 cursor-col-resize touch-none outline-none lg:block",
+                  "before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-transparent before:transition-colors",
+                  "hover:before:bg-border focus-visible:before:bg-ring",
+                  fileSidebarResizing ? "before:bg-ring" : ""
+                ].join(" "),
+                onPointerDown: handleFileSidebarPointerDown,
+                onPointerMove: handleFileSidebarPointerMove,
+                onPointerUp: endFileSidebarResize,
+                onPointerCancel: endFileSidebarResize,
+                onLostPointerCapture: endFileSidebarResize,
+                onKeyDown: handleFileSidebarKeyDown
+              }
+            )
+          ]
+        },
+        "files"
+      ),
       /* @__PURE__ */ jsx3(
         "main",
         {
           ref: diffScrollRef,
-          className: "max-h-[70vh] min-w-0 space-y-3 overflow-auto lg:h-full lg:max-h-none lg:pr-1",
+          className: "max-h-[70vh] min-w-0 flex-1 space-y-3 overflow-auto lg:h-full lg:max-h-none lg:pr-1",
           onScroll: handleDiffScroll,
           children: files.map((file, index) => /* @__PURE__ */ jsxs(
             "section",
@@ -25362,51 +25556,58 @@ function ChangesTab({ context }) {
               ref: setFileSectionRef(file.path),
               className: file.path === selectedFile?.path ? "scroll-mt-2" : void 0,
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3 border border-b-0 border-border bg-muted/35 px-3 py-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
-                    /* @__PURE__ */ jsx3(
-                      "button",
-                      {
-                        type: "button",
-                        className: "mt-0.5 text-muted-foreground hover:text-foreground",
-                        title: expandedFiles.has(file.path) ? "Collapse file" : "Expand file",
-                        "aria-label": expandedFiles.has(file.path) ? `Collapse ${file.path}` : `Expand ${file.path}`,
-                        onClick: () => setExpandedFiles((current) => nextExpandedFileSet(current, file.path)),
-                        children: expandedFiles.has(file.path) ? "\u2212" : "+"
-                      },
-                      "collapse"
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        className: "min-w-0 text-left",
-                        onClick: () => selectFile(file.path),
-                        children: [
-                          /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-medium", children: file.path }, "path"),
-                          file.oldPath ? /* @__PURE__ */ jsxs("div", { className: "truncate font-mono text-[11px] text-muted-foreground", children: [
-                            "from ",
-                            file.oldPath
-                          ] }, "old-path") : null
-                        ]
-                      },
-                      "select"
-                    )
-                  ] }, "left"),
-                  /* @__PURE__ */ jsx3("div", { className: "flex shrink-0 items-center gap-1", children: /* @__PURE__ */ jsx3(
-                    "button",
-                    {
-                      type: "button",
-                      className: iconButtonClass(false),
-                      title: "Copy path",
-                      "aria-label": `Copy ${file.path}`,
-                      onClick: () => void copyPath(file.path),
-                      children: "\u29C9"
-                    },
-                    "copy"
-                  ) }, "actions")
-                ] }, "header"),
-                expandedFiles.has(file.path) ? /* @__PURE__ */ jsx3(FileDiffPanel, { file, mode }, "diff") : /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "sticky top-0 z-30 flex min-w-0 items-center justify-between gap-3 border border-b-0 border-border bg-background px-3 py-2 shadow-sm",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
+                        /* @__PURE__ */ jsx3(
+                          "button",
+                          {
+                            type: "button",
+                            className: "mt-0.5 text-muted-foreground hover:text-foreground",
+                            title: expandedFiles.has(file.path) ? "Collapse file" : "Expand file",
+                            "aria-label": expandedFiles.has(file.path) ? `Collapse ${file.path}` : `Expand ${file.path}`,
+                            onClick: () => setExpandedFiles((current) => nextExpandedFileSet(current, file.path)),
+                            children: expandedFiles.has(file.path) ? "\u2212" : "+"
+                          },
+                          "collapse"
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            className: "min-w-0 text-left",
+                            onClick: () => selectFile(file.path),
+                            children: [
+                              /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-medium", children: file.path }, "path"),
+                              file.oldPath ? /* @__PURE__ */ jsxs("div", { className: "truncate font-mono text-[11px] text-muted-foreground", children: [
+                                "from ",
+                                file.oldPath
+                              ] }, "old-path") : null
+                            ]
+                          },
+                          "select"
+                        )
+                      ] }, "left"),
+                      /* @__PURE__ */ jsx3("div", { className: "flex shrink-0 items-center gap-1", children: /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          type: "button",
+                          className: iconButtonClass(false),
+                          title: "Copy path",
+                          "aria-label": `Copy ${file.path}`,
+                          onClick: () => void copyPath(file.path),
+                          children: "\u29C9"
+                        },
+                        "copy"
+                      ) }, "actions")
+                    ]
+                  },
+                  "header"
+                ),
+                expandedFiles.has(file.path) ? /* @__PURE__ */ jsx3(FileDiffPanel, { file, mode, lineWrap }, "diff") : /* @__PURE__ */ jsx3(
                   CollapsedFilePanel,
                   {
                     file,