@hienlh/ppm 0.17.29 → 0.17.31

package/src/web/components/chat/chat-history-bar.tsx

@@ -17,6 +17,7 @@ import { CodexUsagePanel } from "./codex-usage-panel";
 import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
 import { formatRelativeDate } from "@/lib/format-date";
+import { copyToClipboard } from "@/lib/clipboard";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import type { SessionInfo, SessionListResponse, ProjectTag } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
@@ -113,10 +114,11 @@ function DebugCopyButton({ sessionId, projectName }: { sessionId: string; projec
 
   const copy = () => {
     if (!info) return;
-    navigator.clipboard.writeText(info).then(() => {
+    copyToClipboard(info).then((ok) => {
+      if (!ok) return;
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
-    }).catch(() => { /* silent */ });
+    });
   };
 
   const body = (

package/src/web/components/chat/jump-to-edit.ts

@@ -0,0 +1,89 @@
+/**
+ * Scroll the transcript to a specific edit and flash it — the change tray's primary
+ * action.
+ *
+ * Deliberately not `scrollIntoView`: that ignores the desired offset and picks its own
+ * scroll container. Offsets are computed against the real container instead, matching
+ * chat-scroll-nav's approach.
+ *
+ * Sub-agent tool cards render inside their own `overflow-y-auto` box, so an edit can be
+ * scrolled out of view *within* that box while the transcript is already in position.
+ * Nested scrollers are therefore aligned innermost-first before the transcript moves.
+ */
+
+const JUMP_OFFSET_PX = 60;
+const NESTED_OFFSET_PX = 8;
+const FLASH_MS = 1400;
+
+export type AnchorLevel = "edit" | "card";
+
+function isScrollable(el: HTMLElement): boolean {
+  if (el.scrollHeight <= el.clientHeight) return false;
+  const overflowY = getComputedStyle(el).overflowY;
+  return overflowY === "auto" || overflowY === "scroll";
+}
+
+/** Scrollable elements between `target` and `container`, innermost first. */
+function scrollableAncestors(target: HTMLElement, container: HTMLElement): HTMLElement[] {
+  const out: HTMLElement[] = [];
+  let el = target.parentElement;
+  while (el && el !== container) {
+    if (isScrollable(el)) out.push(el);
+    el = el.parentElement;
+  }
+  return out;
+}
+
+function prefersReducedMotion(): boolean {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+/**
+ * Resolve an edit ref to its element. Falls back to the tool card when the card is
+ * collapsed, since the per-edit wrapper is then unmounted.
+ */
+export function resolveAnchor(
+  container: HTMLElement,
+  editRef: string,
+): { el: HTMLElement; level: AnchorLevel } | null {
+  const edit = container.querySelector<HTMLElement>(`[data-edit-ref="${CSS.escape(editRef)}"]`);
+  if (edit) return { el: edit, level: "edit" };
+
+  const toolUseId = editRef.replace(/-\d+$/, "");
+  const card = container.querySelector<HTMLElement>(`[data-tool-ref="${CSS.escape(toolUseId)}"]`);
+  return card ? { el: card, level: "card" } : null;
+}
+
+/** Scroll `container` so `target` sits `offset` px below the top of `scroller`. */
+function alignWithin(scroller: HTMLElement, target: HTMLElement, offset: number, smooth: boolean): void {
+  const top = scroller.scrollTop + target.getBoundingClientRect().top
+    - scroller.getBoundingClientRect().top - offset;
+  scroller.scrollTo({ top, behavior: smooth ? "smooth" : "auto" });
+}
+
+/**
+ * Scroll to `editRef` and flash it. Returns a cleanup that cancels the pending flash
+ * clear — call it on unmount, and keep it so a re-jump to the same element does not
+ * leave a stale timer behind.
+ */
+export function jumpToEdit(container: HTMLElement, editRef: string): () => void {
+  const found = resolveAnchor(container, editRef);
+  if (!found) return () => {};
+  const { el, level } = found;
+
+  // Nested scrollers move instantly; animating them alongside the transcript is janky.
+  for (const scroller of scrollableAncestors(el, container)) {
+    alignWithin(scroller, el, NESTED_OFFSET_PX, false);
+  }
+  alignWithin(container, el, JUMP_OFFSET_PX, !prefersReducedMotion());
+
+  el.dataset.flash = level;
+  const timer = setTimeout(() => {
+    delete el.dataset.flash;
+  }, FLASH_MS);
+
+  return () => {
+    clearTimeout(timer);
+    delete el.dataset.flash;
+  };
+}

package/src/web/components/chat/message-action-bar.tsx

@@ -2,6 +2,7 @@ import { useState, type ReactNode } from "react";
 import { Copy, Check } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { formatRelativeDate } from "@/lib/format-date";
+import { copyToClipboard } from "@/lib/clipboard";
 
 /** Full timestamp for the relative-time tooltip. */
 function fullDate(iso: string): string {
@@ -50,7 +51,7 @@ function CopyButton({ content }: { content: string }) {
       label={copied ? "Copied" : "Copy"}
       title="Copy message to clipboard"
       onClick={() => {
-        navigator.clipboard?.writeText(content).catch(() => {});
+        void copyToClipboard(content);
         setCopied(true);
         setTimeout(() => setCopied(false), 1500);
       }}

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