@hienlh/ppm 0.17.30 → 0.17.31

package/src/web/components/chat/message-list.tsx

@@ -5,6 +5,13 @@ import type { ChatMessage, ChatEvent } from "../../../types/chat";
 import type { SessionPhase } from "../../../types/api";
 import type { BashPartialEntry } from "../../hooks/use-chat";
 import { ToolCard } from "./tool-cards";
+import { jumpToEdit } from "./jump-to-edit";
+import {
+  aggregateTurnFileChanges,
+  collectTurnMessages,
+  type TurnFileChange,
+} from "@/lib/aggregate-turn-file-changes";
+import { TurnChangeRollup } from "./turn-change-rollup";
 import { TaskTracker } from "./task-tracker";
 import { extractJsonlPath } from "./pre-compact-button";
 // Kick off the markdown chunk fetch at module load (not first render): Suspense
@@ -153,6 +160,40 @@ export function MessageList({
     setScrollEl(el);
   }, [scrollRef]);
 
+  // File changes per turn, keyed by the index of the turn's last assistant message.
+  //
+  // `filtered` is a new array on every streamed token, so this must not re-aggregate
+  // the whole transcript each time — diffing every edit in a long session at token
+  // rate is far too slow. Completed turns are therefore cached by their last
+  // message's identity, leaving only the in-flight turn to recompute.
+  const turnChangeCache = useRef(new Map<string, TurnFileChange[]>());
+  const turnChanges = useMemo(() => {
+    const cache = turnChangeCache.current;
+    const out = new Map<number, TurnFileChange[]>();
+    for (let i = 0; i < filtered.length; i++) {
+      const msg = filtered[i]!;
+      if (msg.role !== "assistant" || filtered[i + 1]?.role === "assistant") continue;
+      const key = `${msg.id}:${msg.events?.length ?? 0}`;
+      let changes = cache.get(key);
+      if (!changes) {
+        changes = aggregateTurnFileChanges(collectTurnMessages(filtered, i));
+        cache.set(key, changes);
+      }
+      if (changes.length > 0) out.set(i, changes);
+    }
+    return out;
+  }, [filtered]);
+
+  // Jump from a change-tray row to the tool card that made the edit. The returned
+  // cleanup clears the pending flash, so a second jump can't leave a stale highlight.
+  const flashCleanupRef = useRef<(() => void) | null>(null);
+  const handleJumpToEdit = useCallback((editRef: string) => {
+    if (!scrollEl) return;
+    flashCleanupRef.current?.();
+    flashCleanupRef.current = jumpToEdit(scrollEl, editRef);
+  }, [scrollEl]);
+  useEffect(() => () => flashCleanupRef.current?.(), []);
+
   // Preserve the viewport when older messages are prepended (compact expand): capture
   // distance-from-bottom before the prepend, restore scrollTop after so the content
   // being read doesn't jump. Only fires for prepends — streaming appends leave the
@@ -360,6 +401,8 @@ export function MessageList({
                     isStreaming={isStreaming && msg.id.startsWith("streaming-")}
                     isLastAssistantInTurn={isLastAssistantInTurn}
                     turnCopyText={turnCopyText}
+                    turnChanges={isLastAssistantInTurn ? turnChanges.get(globalIdx) : undefined}
+                    onJumpToEdit={handleJumpToEdit}
                     projectName={projectName}
                     onFork={msg.role === "user" && onFork ? handleFork : undefined}
                     onEdit={msg.role === "user" && onEdit ? handleEdit : undefined}
@@ -402,8 +445,11 @@ function assistantMessageText(msg: ChatMessage): string {
     : msg.content;
 }
 
-const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLastAssistantInTurn, turnCopyText, projectName, onFork, onEdit, isEditing, onDismiss, prevMsgId, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled, bashPartialOutput }: {
+const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLastAssistantInTurn, turnCopyText, turnChanges, onJumpToEdit, projectName, onFork, onEdit, isEditing, onDismiss, prevMsgId, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled, bashPartialOutput }: {
   message: ChatMessage; isStreaming: boolean; isLastAssistantInTurn?: boolean; turnCopyText?: string; projectName?: string;
+  /** Files this turn changed — drives the action-bar change pill. */
+  turnChanges?: TurnFileChange[];
+  onJumpToEdit?: (editRef: string) => void;
   onFork?: (content: string, messageId: string | undefined) => void;
   onEdit?: (content: string, messageId: string | undefined, ownMsgId?: string) => void;
   isEditing?: boolean;
@@ -469,11 +515,12 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLast
           )}
       {/* Action bar: only on the last assistant message of the turn, after streaming ends */}
       {!isStreaming && isLastAssistantInTurn && (
-        <MessageActionBar
+        <TurnChangeRollup
           timestamp={message.timestamp}
           content={turnCopyText ?? assistantMessageText(message)}
           accountLabel={message.accountLabel}
-          className="-mt-1.5"
+          changes={turnChanges}
+          onJumpToEdit={onJumpToEdit}
         />
       )}
     </div>

package/src/web/components/chat/tool-cards.tsx

@@ -154,7 +154,10 @@ export function ToolCard({
   const isInteractive = toolName === "AskUserQuestion" || toolName === "ExitPlanMode" || isSubagent;
 
   return (
-    <div className={`rounded-[11px] border overflow-hidden text-xs bg-panel ${isInteractive ? "border-accent-wash-border" : "border-border"}`}>
+    <div
+      data-tool-ref={toolUseId}
+      className={`rounded-[11px] border overflow-hidden text-xs bg-panel ${isInteractive ? "border-accent-wash-border" : "border-border"}`}
+    >
       <button
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2.5 px-2.5 py-2 w-full text-left hover:bg-panel-2/40 transition-colors min-w-0"
@@ -183,7 +186,7 @@ export function ToolCard({
       {expanded && (
         <div className="px-2 pb-2 space-y-1.5 select-text">
           {(tool.type === "tool_use" || tool.type === "approval_request") && (
-            <ToolDetails name={toolName} input={input} projectName={projectName} />
+            <ToolDetails name={toolName} input={input} projectName={projectName} toolUseId={toolUseId} />
           )}
           {/* Streaming bash output */}
           {partial && <StreamingBashOutput content={partial.content} lineCount={partial.lineCount} />}
@@ -256,10 +259,13 @@ function ToolDetails({
   name,
   input,
   projectName,
+  toolUseId,
 }: {
   name: string;
   input: Record<string, unknown>;
   projectName?: string;
+  /** Anchors each rendered edit so the change tray can jump to it. */
+  toolUseId?: string;
 }) {
   const s = (v: unknown) => String(v ?? "");
   const { openTab } = useTabStore(useShallow((state) => ({ openTab: state.openTab })));
@@ -301,8 +307,10 @@ function ToolDetails({
     case "Edit":
     case "MultiEdit":
     case "NotebookEdit": {
-      const filePath = s(input.file_path);
+      // NotebookEdit carries `notebook_path`; the other three carry `file_path`.
+      const filePath = s(input.notebook_path || input.file_path);
       const hasEditDiff = name === "Edit" && (!!input.old_string || !!input.new_string);
+      const editRef = (i: number) => (toolUseId ? `${toolUseId}-${i}` : undefined);
       return (
         <div className="space-y-1">
           <div className="flex items-start gap-3">
@@ -328,12 +336,14 @@ function ToolDetails({
             )}
           </div>
           {hasEditDiff && (
-            <EditDiffPreview oldStr={s(input.old_string)} newStr={s(input.new_string)} filePath={filePath} />
+            <div data-edit-ref={editRef(0)}>
+              <EditDiffPreview oldStr={s(input.old_string)} newStr={s(input.new_string)} filePath={filePath} />
+            </div>
           )}
           {name === "MultiEdit" && Array.isArray(input.edits) && (
             <div className="space-y-1.5">
               {(input.edits as Array<{ old_string?: string; new_string?: string }>).map((e, i) => (
-                <div key={i} className="space-y-0.5">
+                <div key={i} data-edit-ref={editRef(i)} className="space-y-0.5">
                   <p className="text-text-subtle text-[10px]">Edit {i + 1}</p>
                   <EditDiffPreview oldStr={s(e.old_string)} newStr={s(e.new_string)} filePath={filePath} />
                 </div>
@@ -341,7 +351,7 @@ function ToolDetails({
             </div>
           )}
           {name === "Write" && !!input.content && (
-            <pre className="font-mono text-text-subtle overflow-x-auto max-h-32 whitespace-pre-wrap">{truncate(s(input.content), 300)}</pre>
+            <pre data-edit-ref={editRef(0)} className="font-mono text-text-subtle overflow-x-auto max-h-32 whitespace-pre-wrap">{truncate(s(input.content), 300)}</pre>
           )}
         </div>
       );

package/src/web/components/chat/turn-change-pill.tsx

@@ -0,0 +1,57 @@
+/**
+ * Resting state of the turn change rollup: a pill appended to the message action bar.
+ *
+ * Only the button lives here — the caller owns `open` so the tray can render *below*
+ * the action bar instead of inside its flex row.
+ */
+import { cn } from "@/lib/utils";
+import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";
+
+export function changeTotals(changes: TurnFileChange[]): { added: number; removed: number } {
+  let added = 0;
+  let removed = 0;
+  for (const c of changes) {
+    added += c.linesAdded;
+    removed += c.linesRemoved;
+  }
+  return { added, removed };
+}
+
+export function TurnChangePill({ count, totals, open, onToggle, ref }: {
+  count: number;
+  totals: { added: number; removed: number };
+  open: boolean;
+  onToggle: () => void;
+  /** Lets the caller restore focus here when the tray closes. */
+  ref?: React.Ref<HTMLButtonElement>;
+}) {
+  const label = `${count} file${count !== 1 ? "s" : ""}`;
+
+  return (
+    <>
+      <span aria-hidden className="mx-1.5 h-3.5 w-px bg-border-soft" />
+      <button
+        ref={ref}
+        type="button"
+        onClick={onToggle}
+        aria-expanded={open}
+        aria-label={`${label} changed this turn, ${totals.added} added, ${totals.removed} removed`}
+        className={cn(
+          // Borderless on purpose: the sibling Copy/Fork controls are ghost buttons, and
+          // a bordered pill next to them reads as a heavy block, especially on mobile.
+          // The touch height stays — without a border it costs nothing visually.
+          "inline-flex items-center gap-[7px] rounded-full font-mono text-[11.5px]",
+          "px-3 min-h-11 md:min-h-0 md:px-[9px] md:py-[5px]",
+          "text-text-secondary transition-colors hover:bg-surface hover:text-text-primary",
+        )}
+      >
+        <span aria-hidden className="size-[5px] shrink-0 rounded-full bg-primary" />
+        <span>{label}</span>
+        <span className="flex items-center gap-[5px] tabular-nums">
+          <span className="text-success">+{totals.added}</span>
+          <span className="text-error">{"−"}{totals.removed}</span>
+        </span>
+      </button>
+    </>
+  );
+}

package/src/web/components/chat/turn-change-rollup.tsx

@@ -0,0 +1,76 @@
+/**
+ * Hosts the turn change rollup: the action bar with the pill appended, plus the tray
+ * (desktop) or sheet (phone) it opens.
+ *
+ * Wraps `MessageActionBar` rather than living inside it, because the desktop tray has
+ * to render *below* the bar instead of wrapping inside its flex row.
+ */
+import { useRef, useState } from "react";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";
+import { MessageActionBar } from "./message-action-bar";
+import { TurnChangePill, changeTotals } from "./turn-change-pill";
+import { TurnChangeTray } from "./turn-change-tray";
+import { TurnChangeSheet } from "./turn-change-sheet";
+
+export function TurnChangeRollup({ timestamp, content, accountLabel, changes, onJumpToEdit }: {
+  timestamp: string;
+  content: string;
+  accountLabel?: string;
+  changes?: TurnFileChange[];
+  onJumpToEdit?: (editRef: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const isMobile = useIsMobile();
+  const pillRef = useRef<HTMLButtonElement>(null);
+
+  // Without this, closing drops focus to <body> and the next Tab restarts from the
+  // top of a very long transcript.
+  const close = () => {
+    setOpen(false);
+    pillRef.current?.focus();
+  };
+
+  const bar = (
+    <MessageActionBar
+      timestamp={timestamp}
+      content={content}
+      accountLabel={accountLabel}
+      className="-mt-1.5"
+    >
+      {changes && changes.length > 0 && (
+        <TurnChangePill
+          ref={pillRef}
+          count={changes.length}
+          totals={changeTotals(changes)}
+          open={open}
+          onToggle={() => (open ? close() : setOpen(true))}
+        />
+      )}
+    </MessageActionBar>
+  );
+
+  if (!changes || changes.length === 0) return bar;
+
+  const jump = (editRef: string) => {
+    setOpen(false);
+    onJumpToEdit?.(editRef);
+  };
+
+  return (
+    <>
+      {bar}
+      {isMobile ? (
+        <TurnChangeSheet
+          changes={changes}
+          totals={changeTotals(changes)}
+          open={open}
+          onClose={close}
+          onJump={onJumpToEdit ?? (() => {})}
+        />
+      ) : (
+        open && <TurnChangeTray changes={changes} onJump={jump} onClose={close} />
+      )}
+    </>
+  );
+}

package/src/web/components/chat/turn-change-sheet.tsx

@@ -0,0 +1,178 @@
+/**
+ * Phone presentation of the change tray: a modal bottom sheet with push navigation.
+ * The file list and a file's edits are separate levels — `‹` pops back to the list
+ * rather than closing.
+ *
+ * The panel is capped; the body scrolls inside it so the sheet itself never does.
+ */
+import { useEffect, useRef, useState } from "react";
+import { ArrowUp, ChevronLeft, X } from "lucide-react";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { copyToClipboard } from "@/lib/clipboard";
+import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";
+import { ChangeCounts, ChangeFileRow } from "./change-file-row";
+import { ChangeEditList } from "./change-edit-list";
+
+function basenameOf(path: string): string {
+  const i = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+  return i < 0 ? path : path.slice(i + 1);
+}
+
+/** 44×44 icon control — the minimum touch target on a coarse pointer. */
+function IconButton({ label, onClick, children }: {
+  label: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-text-subtle transition-colors hover:bg-surface hover:text-text-primary"
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TurnChangeSheet({ changes, totals, open, onClose, onJump }: {
+  changes: TurnFileChange[];
+  totals: { added: number; removed: number };
+  open: boolean;
+  onClose: () => void;
+  onJump: (editRef: string) => void;
+}) {
+  const [selected, setSelected] = useState<number | null>(null);
+  const active = selected == null ? null : changes[selected];
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const close = () => {
+    setSelected(null);
+    onClose();
+  };
+
+  const jump = (editRef: string) => {
+    close();
+    onJump(editRef);
+  };
+
+  // Modal on phone: focus moves in and stays in. `BottomSheet` handles the scrim and
+  // swipe-to-dismiss but not the keyboard, so Escape and the tab cycle live here.
+  useEffect(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    const focusables = () =>
+      Array.from(panel?.querySelectorAll<HTMLElement>("button:not([disabled])") ?? []);
+    focusables()[0]?.focus();
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const items = focusables();
+      if (items.length === 0) return;
+      const first = items[0]!;
+      const last = items[items.length - 1]!;
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, selected]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <BottomSheet
+      open={open}
+      onClose={close}
+      className="flex max-h-[85%] flex-col rounded-t-[14px] motion-reduce:animate-none"
+    >
+      <div ref={panelRef} className="flex min-h-0 flex-1 flex-col">
+        {active ? (
+          <>
+            <div className="flex items-center gap-1 border-b border-border-soft px-1 pb-1">
+              <IconButton label="Back to file list" onClick={() => setSelected(null)}>
+                <ChevronLeft className="size-4" />
+              </IconButton>
+              <span className="min-w-0 flex-1 truncate font-mono text-xs font-medium text-text-primary">
+                {basenameOf(active.filePath)}
+              </span>
+              <ChangeCounts
+                added={active.linesAdded}
+                removed={active.linesRemoved}
+                className="shrink-0 font-mono text-[11px]"
+              />
+              <IconButton label="Close" onClick={close}>
+                <X className="size-4" />
+              </IconButton>
+            </div>
+
+            <div className="flex items-center gap-1 border-b border-border-soft py-1.5 pl-3 pr-2">
+              <span
+                title={active.filePath}
+                className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[10.5px] text-text-subtle [direction:rtl] text-left"
+              >
+                {active.filePath}
+              </span>
+              <button
+                type="button"
+                onClick={() => void copyToClipboard(active.filePath)}
+                className="inline-flex min-h-11 shrink-0 items-center rounded-md px-2.5 font-mono text-[10px] text-text-subtle transition-colors hover:bg-surface hover:text-text-primary"
+              >
+                copy
+              </button>
+              {active.edits[0]?.editRef && (
+                <button
+                  type="button"
+                  onClick={() => jump(active.edits[0]!.editRef!)}
+                  className="inline-flex min-h-11 shrink-0 items-center gap-1 rounded-md px-2.5 font-mono text-[10px] text-text-subtle transition-colors hover:bg-surface hover:text-primary"
+                >
+                  <ArrowUp className="size-3" />
+                  card
+                </button>
+              )}
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-y-auto">
+              <ChangeEditList change={active} onJump={jump} />
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="flex items-center gap-2 border-b border-border-soft px-3 pb-2">
+              <span className="min-w-0 flex-1 truncate font-mono text-xs font-medium text-text-primary">
+                Changed this turn · {changes.length} file{changes.length !== 1 ? "s" : ""}
+              </span>
+              <ChangeCounts
+                added={totals.added}
+                removed={totals.removed}
+                className="shrink-0 font-mono text-[11px]"
+              />
+              <IconButton label="Close" onClick={close}>
+                <X className="size-4" />
+              </IconButton>
+            </div>
+
+            <div className="min-h-0 flex-1 overflow-y-auto">
+              {changes.map((change, i) => (
+                <ChangeFileRow
+                  key={change.filePath}
+                  change={change}
+                  onClick={() => setSelected(i)}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </BottomSheet>
+  );
+}

package/src/web/components/chat/turn-change-tray.tsx

@@ -0,0 +1,140 @@
+/**
+ * Desktop presentation of the change tray: an inline, non-modal two-pane panel
+ * directly below the message's action bar. Left pane lists the turn's files, right
+ * pane shows the selected file's edits.
+ *
+ * Both panes need `min-h-0` or the grid rows refuse to shrink and neither scrolls.
+ */
+import { useEffect, useId, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { copyToClipboard } from "@/lib/clipboard";
+import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";
+import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";
+import { ChangeCounts, ChangeFileRow } from "./change-file-row";
+import { ChangeEditList } from "./change-edit-list";
+
+function splitPath(path: string): { base: string; dir: string } {
+  const i = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+  return i < 0 ? { base: path, dir: "" } : { base: path.slice(i + 1), dir: path.slice(0, i) };
+}
+
+/**
+ * Several messages in one chat can have a tray open at once, and `ownsGlobalShortcut`
+ * only narrows to the focused *tab*. The most recently opened tray claims the keys.
+ */
+let activeTrayId: string | null = null;
+
+/** `ownsGlobalShortcut` resolves the owning tab; it says nothing about text entry. */
+function isTextEntry(el: Element | null): boolean {
+  if (!(el instanceof HTMLElement)) return false;
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable;
+}
+
+export function TurnChangeTray({ changes, onJump, onClose }: {
+  changes: TurnFileChange[];
+  onJump: (editRef: string) => void;
+  onClose: () => void;
+}) {
+  // The desktop tray never shows a bare list — a file is always selected.
+  const [selected, setSelected] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const trayId = useId();
+
+  // Inline and non-modal: focus moves in, but is deliberately not trapped.
+  useEffect(() => {
+    activeTrayId = trayId;
+    listRef.current?.querySelector<HTMLElement>("button")?.focus();
+    return () => {
+      if (activeTrayId === trayId) activeTrayId = null;
+    };
+  }, [trayId]);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (activeTrayId !== trayId) return;
+      if (!ownsGlobalShortcut(containerRef.current)) return;
+      if (isTextEntry(document.activeElement)) return;
+
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      } else if (e.key === "j") {
+        e.preventDefault();
+        setSelected((i) => Math.min(i + 1, changes.length - 1));
+      } else if (e.key === "k") {
+        e.preventDefault();
+        setSelected((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        const editRef = changes[selected]?.edits[0]?.editRef;
+        if (editRef) {
+          e.preventDefault();
+          onJump(editRef);
+        }
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [trayId, changes, selected, onJump, onClose]);
+
+  const active = changes[Math.min(selected, changes.length - 1)];
+  if (!active) return null;
+  const { base, dir } = splitPath(active.filePath);
+
+  return (
+    <div ref={containerRef} className="mt-0.5 overflow-hidden rounded-[10px] border border-border-soft bg-bg">
+      <div className="grid h-[356px] grid-cols-[294px_1fr] grid-rows-[minmax(0,1fr)] bg-surface-elevated">
+        <div ref={listRef} className="min-h-0 overflow-y-auto border-r border-border-soft">
+          {changes.map((change, i) => (
+            <ChangeFileRow
+              key={change.filePath}
+              change={change}
+              dense
+              selected={i === selected}
+              onClick={() => setSelected(i)}
+            />
+          ))}
+          <p className="px-2.5 pt-2 pb-2.5 font-mono text-[10px] text-text-subtle">
+            j / k to move · enter to jump
+          </p>
+        </div>
+
+        <div className="min-h-0 overflow-y-auto">
+          <div className="sticky top-0 z-10 flex items-center gap-2 border-b border-border-soft bg-surface-elevated py-[5px] pl-2.5 pr-2">
+            <span className="shrink-0 font-mono text-xs font-medium text-text-primary">{base}</span>
+            {dir && (
+              <span
+                title={active.filePath}
+                className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[10.5px] text-text-subtle [direction:rtl] text-left"
+              >
+                {dir}
+              </span>
+            )}
+            <ChangeCounts
+              added={active.linesAdded}
+              removed={active.linesRemoved}
+              className="shrink-0 font-mono text-[11px]"
+            />
+            <button
+              type="button"
+              onClick={() => void copyToClipboard(active.filePath)}
+              className="shrink-0 rounded-md px-1.5 py-1 font-mono text-[10px] text-text-subtle transition-colors hover:bg-surface hover:text-text-primary"
+            >
+              copy path
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close change tray"
+              className="inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-text-subtle transition-colors hover:bg-surface hover:text-text-primary"
+            >
+              <X className="size-3.5" />
+            </button>
+          </div>
+
+          <ChangeEditList change={active} onJump={onJump} />
+        </div>
+      </div>
+    </div>
+  );
+}