Merge pull request #593 from Mng-dev-ai/add-changed-files-panel

Add changed files panel under assistant messages

Author: Mng-dev-ai

backend/app/api/endpoints/chat.py

@@ -49,7 +49,7 @@
     MessageEvent,
     PermissionRespondResponse,
 )
-from app.models.schemas.sandbox import GitCommandResponse
+from app.models.schemas.sandbox import ChangedFilesResponse, GitCommandResponse
 from app.models.schemas.pagination import (
     CursorPaginatedResponse,
     CursorPaginationParams,
@@ -439,6 +439,28 @@ async def restore_message_checkpoint(
         ) from e
 
 
+@router.get(
+    "/messages/{message_id}/changes",
+    response_model=ChangedFilesResponse,
+)
+async def get_message_changes(
+    message_id: UUID,
+    current_user: User = Depends(get_current_user),
+    chat_service: ChatService = Depends(get_chat_service),
+) -> ChangedFilesResponse:
+    try:
+        return await chat_service.get_changed_files(message_id, current_user)
+    except ChatException as e:
+        raise HTTPException(status_code=e.status_code, detail=str(e)) from e
+    except SandboxException as e:
+        raise HTTPException(status_code=e.status_code, detail=str(e)) from e
+    except ValueError as e:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=str(e),
+        ) from e
+
+
 @router.delete("/chats/{chat_id}/stream", status_code=status.HTTP_204_NO_CONTENT)
 async def cancel_stream(
     chat_id: UUID,

backend/app/models/schemas/sandbox.py

@@ -1,3 +1,5 @@
+from typing import Literal
+
 from pydantic import BaseModel, Field
 
 
@@ -97,6 +99,21 @@ class GitRemoteUrlResponse(BaseModel):
     remote_url: str
 
 
+class ChangedFile(BaseModel):
+    path: str
+    status: Literal["M", "A", "D"]
+    additions: int
+    deletions: int
+
+
+class ChangedFilesResponse(BaseModel):
+    files: list[ChangedFile]
+    # Workspace-root-relative cwd the file paths are reported against — the
+    # frontend joins it onto each path to navigate the editor (which keys on
+    # workspace-root paths). Empty for non-worktree chats.
+    cwd: str = ""
+
+
 class SearchMatch(BaseModel):
     line_number: int
     line_text: str

backend/app/services/chat.py

@@ -26,7 +26,7 @@
     ChatUpdate,
 )
 from app.models.schemas.chat import Message as MessageSchema
-from app.models.schemas.sandbox import GitCommandResponse
+from app.models.schemas.sandbox import ChangedFilesResponse, GitCommandResponse
 from app.models.schemas.pagination import (
     CursorPaginatedResponse,
     PaginatedResponse,
@@ -687,6 +687,21 @@ async def restore_checkpoint_all(
             cwd=checkpoint.cwd,
         )
 
+    async def get_changed_files(
+        self,
+        message_id: UUID,
+        user: User,
+    ) -> ChangedFilesResponse:
+        checkpoint, chat = await self._get_checkpoint_target(message_id, user)
+        git_service = GitService(self.sandbox_for_workspace(chat.workspace))
+        files = await git_service.get_changed_files(
+            chat.workspace.sandbox_id,
+            base_head=checkpoint.base_head,
+            pre_run_diff=checkpoint.pre_run_diff,
+            cwd=checkpoint.cwd,
+        )
+        return ChangedFilesResponse(files=files, cwd=checkpoint.cwd or "")
+
     async def _get_checkpoint_target(
         self,
         message_id: UUID,

backend/app/services/git.py

@@ -6,6 +6,7 @@
 from uuid import uuid4
 
 from app.models.schemas.sandbox import (
+    ChangedFile,
     GitBranchesResponse,
     GitCheckoutResponse,
     GitCommandResponse,
@@ -75,6 +76,37 @@ class Checkpoint(NamedTuple):
     "git worktree add '$worktree_dir' -b '$branch_name' 2>&1"
 )
 
+# Build two trees and diff them so the result reflects only the assistant's
+# turn. The base tree is base_head + pre_run_diff applied via a temp index
+# (otherwise pre-existing dirty changes captured by the checkpoint would be
+# attributed to the assistant). The current tree is the working tree captured
+# by copying the real index then `git add -A` into a temp index — this folds
+# untracked files into the comparison, so pre-existing untracked files stay
+# silent and assistant-created files surface as additions.
+# `--no-renames` collapses renames to add+delete so the parser stays simple.
+GIT_CHANGED_FILES_TEMPLATE = Template(
+    "{ base_tree='$base'; "
+    'if [ -n "$patch_file" ]; then '
+    "tmp_b=$$(mktemp); "
+    "if GIT_INDEX_FILE=\"$$tmp_b\" git read-tree '$base' 2>/dev/null "
+    '&& GIT_INDEX_FILE="$$tmp_b" git apply --cached --whitespace=nowarn '
+    "$patch_file 2>/dev/null; then "
+    'base_tree=$$(GIT_INDEX_FILE="$$tmp_b" git write-tree); '
+    "fi; "
+    'rm -f "$$tmp_b" $patch_file; '
+    "fi; "
+    "tmp_c=$$(mktemp); "
+    'cp "$$(git rev-parse --git-path index)" "$$tmp_c" 2>/dev/null '
+    '|| GIT_INDEX_FILE="$$tmp_c" git read-tree HEAD 2>/dev/null; '
+    'GIT_INDEX_FILE="$$tmp_c" git add -A 2>/dev/null; '
+    'cur_tree=$$(GIT_INDEX_FILE="$$tmp_c" git write-tree 2>/dev/null); '
+    'rm -f "$$tmp_c"; '
+    'git diff --numstat --no-renames "$$base_tree" "$$cur_tree" 2>/dev/null; '
+    "printf '__STATUS__\\n'; "
+    'git diff --name-status --no-renames "$$base_tree" "$$cur_tree" 2>/dev/null; '
+    "}"
+)
+
 GIT_DIFF_STAGED_TEMPLATE = Template("git diff$ctx --cached 2>/dev/null")
 GIT_DIFF_UNSTAGED_TEMPLATE = Template("git diff$ctx 2>/dev/null;$untracked")
 # "all" mode: try `git diff HEAD` first (combined staged+unstaged in one pass);
@@ -428,6 +460,78 @@ async def restore_checkpoint_all(
         )
         return await self.run_command(sandbox_id, cmd, cwd)
 
+    async def get_changed_files(
+        self,
+        sandbox_id: str,
+        base_head: str,
+        pre_run_diff: str = "",
+        cwd: str | None = None,
+    ) -> list[ChangedFile]:
+        if not re.fullmatch(r"[0-9a-fA-F]{40}", base_head):
+            raise ValueError("Invalid checkpoint commit")
+        patch_file = ""
+        if pre_run_diff:
+            name = f".agentrove-changed-{uuid4().hex}.patch"
+            patch_path = posixpath.join(cwd, name) if cwd else name
+            await self.sandbox_service.provider.write_file(
+                sandbox_id, patch_path, pre_run_diff
+            )
+            patch_file = shlex.quote(
+                self.sandbox_service.provider.resolve_workspace_path(patch_path)
+            )
+        cd_prefix = git_cd_prefix(cwd)
+        cmd = GIT_CHANGED_FILES_TEMPLATE.substitute(
+            base=base_head, patch_file=patch_file
+        )
+        result = await self.sandbox_service.execute_command(
+            sandbox_id, f"{cd_prefix}{cmd}"
+        )
+        if result.exit_code != 0:
+            return []
+        return self._parse_changed_files(result.stdout)
+
+    @staticmethod
+    def _parse_changed_files(output: str) -> list[ChangedFile]:
+        numstat_section, _, status_section = output.partition("__STATUS__\n")
+
+        # Binary files render as `-\t-\t<path>` in numstat — keep the path with
+        # zeroed counts so the panel still lists the file.
+        stats: dict[str, tuple[int, int]] = {}
+        for line in numstat_section.splitlines():
+            parts = line.split("\t")
+            if len(parts) < 3:
+                continue
+            add_str, del_str, path = parts[0], parts[1], parts[2]
+            additions = int(add_str) if add_str.isdigit() else 0
+            deletions = int(del_str) if del_str.isdigit() else 0
+            stats[path] = (additions, deletions)
+
+        statuses: dict[str, Literal["M", "A", "D"]] = {}
+        for line in status_section.splitlines():
+            parts = line.split("\t")
+            if len(parts) < 2:
+                continue
+            code, path = parts[0], parts[1]
+            letter = code[:1]
+            if letter == "M":
+                statuses[path] = "M"
+            elif letter == "A":
+                statuses[path] = "A"
+            elif letter == "D":
+                statuses[path] = "D"
+
+        files = [
+            ChangedFile(
+                path=path,
+                status=statuses.get(path, "M"),
+                additions=additions,
+                deletions=deletions,
+            )
+            for path, (additions, deletions) in stats.items()
+        ]
+        files.sort(key=lambda f: f.path)
+        return files
+
     async def create_branch(
         self,
         sandbox_id: str,

frontend/src/components/chat/message-bubble/ChangedFilesPanel.tsx

@@ -0,0 +1,124 @@
+import { memo, useState } from 'react';
+import { ChevronDown, Files } from 'lucide-react';
+import { Button } from '@/components/ui/primitives/Button';
+import { useMessageChangesQuery } from '@/hooks/queries/useChatQueries';
+import { useUIStore } from '@/store/uiStore';
+import type { ChangedFile, ChangedFileStatus } from '@/types/sandbox.types';
+
+interface ChangedFilesPanelProps {
+  messageId: string;
+}
+
+const STATUS_LABEL: Record<ChangedFileStatus, string> = {
+  M: 'Modified',
+  A: 'Added',
+  D: 'Deleted',
+};
+
+const STATUS_COLOR: Record<ChangedFileStatus, string> = {
+  M: 'text-text-quaternary dark:text-text-dark-quaternary',
+  A: 'text-success-600 dark:text-success-400',
+  D: 'text-error-600 dark:text-error-400',
+};
+
+const ChangedFilesPanelInner: React.FC<ChangedFilesPanelProps> = ({ messageId }) => {
+  const [expanded, setExpanded] = useState(true);
+  const { data } = useMessageChangesQuery(messageId);
+
+  const files = data?.files ?? [];
+  const cwd = data?.cwd ?? '';
+  if (files.length === 0) return null;
+
+  const { totalAdditions, totalDeletions } = files.reduce(
+    (acc, f) => {
+      acc.totalAdditions += f.additions;
+      acc.totalDeletions += f.deletions;
+      return acc;
+    },
+    { totalAdditions: 0, totalDeletions: 0 },
+  );
+
+  return (
+    <div className="mt-3 overflow-hidden rounded-lg border border-border/50 bg-surface-secondary dark:border-border-dark/50 dark:bg-surface-dark-secondary">
+      <Button
+        type="button"
+        variant="unstyled"
+        onClick={() => setExpanded((prev) => !prev)}
+        aria-expanded={expanded}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors duration-150 hover:bg-surface-hover dark:hover:bg-surface-dark-hover"
+      >
+        <Files className="h-3.5 w-3.5 flex-shrink-0 text-text-tertiary dark:text-text-dark-tertiary" />
+        <span className="text-xs font-medium text-text-secondary dark:text-text-dark-secondary">
+          {files.length} {files.length === 1 ? 'file' : 'files'} changed
+        </span>
+        <span className="text-text-quaternary dark:text-text-dark-quaternary">·</span>
+        <span className="font-mono text-xs tabular-nums text-success-600 dark:text-success-400">
+          +{totalAdditions}
+        </span>
+        <span className="font-mono text-xs tabular-nums text-error-600 dark:text-error-400">
+          −{totalDeletions}
+        </span>
+        <div className="flex-1" />
+        <ChevronDown
+          className={`h-3.5 w-3.5 flex-shrink-0 text-text-quaternary transition-transform duration-300 ease-out dark:text-text-dark-quaternary ${expanded ? 'rotate-180' : ''}`}
+        />
+      </Button>
+
+      {expanded && (
+        <div className="border-t border-border/50 dark:border-border-dark/50">
+          {files.map((file, index) => (
+            <ChangedFileRow
+              key={file.path}
+              file={file}
+              cwd={cwd}
+              isLast={index === files.length - 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ChangedFileRow: React.FC<{ file: ChangedFile; cwd: string; isLast: boolean }> = ({
+  file,
+  cwd,
+  isLast,
+}) => {
+  const isDeleted = file.status === 'D';
+  const editorPath = cwd ? `${cwd}/${file.path}` : file.path;
+  const borderClass = isLast ? '' : 'border-b border-border/50 dark:border-border-dark/50';
+  const interactiveClass = isDeleted
+    ? 'cursor-default'
+    : 'transition-colors duration-150 hover:bg-surface-hover dark:hover:bg-surface-dark-hover';
+  return (
+    <Button
+      type="button"
+      variant="unstyled"
+      disabled={isDeleted}
+      onClick={isDeleted ? undefined : () => useUIStore.getState().openFileInEditor(editorPath)}
+      className={`flex w-full items-center gap-2.5 px-3 py-2 text-left ${interactiveClass} ${borderClass}`}
+    >
+      <span
+        className={`w-3.5 flex-shrink-0 text-center font-mono text-2xs ${STATUS_COLOR[file.status]}`}
+        title={STATUS_LABEL[file.status]}
+      >
+        {file.status}
+      </span>
+      <span
+        className="min-w-0 flex-1 truncate font-mono text-xs text-text-secondary dark:text-text-dark-secondary"
+        title={file.path}
+      >
+        {file.path}
+      </span>
+      <span className="min-w-[28px] flex-shrink-0 text-right font-mono text-2xs tabular-nums text-success-600 dark:text-success-400">
+        +{file.additions}
+      </span>
+      <span className="min-w-[24px] flex-shrink-0 text-right font-mono text-2xs tabular-nums text-error-600 dark:text-error-400">
+        −{file.deletions}
+      </span>
+    </Button>
+  );
+};
+
+export const ChangedFilesPanel = memo(ChangedFilesPanelInner);

frontend/src/components/chat/message-bubble/Message.tsx

@@ -2,6 +2,7 @@ import { memo, useMemo, useState } from 'react';
 import { Undo2 } from 'lucide-react';
 import { UserMessageContent, AssistantMessageContent } from './MessageContent';
 import { MessageActions } from './MessageActions';
+import { ChangedFilesPanel } from './ChangedFilesPanel';
 import { useModelMap } from '@/hooks/queries/useModelQueries';
 import {
   getAgentKindForModelId,
@@ -131,6 +132,8 @@ export const AssistantMessage = memo(function AssistantMessage({
             />
           </div>
 
+          {checkpointId && !isStreaming && <ChangedFilesPanel messageId={id} />}
+
           {showFooter && (
             <div className="mt-2 flex items-center justify-between">
               <div className="flex items-center gap-0.5">

frontend/src/hooks/queries/queryKeys.ts

@@ -7,6 +7,7 @@ export const queryKeys = {
   chat: (chatId?: string) => ['chat', chatId] as const,
   messages: (chatId?: string) => ['messages', chatId] as const,
   contextUsage: (chatId?: string) => ['chat', chatId, 'context-usage'] as const,
+  messageChanges: (messageId?: string) => ['message', messageId, 'changes'] as const,
   subThreads: (chatId?: string) => ['chat', chatId, 'sub-threads'] as const,
   auth: {
     user: 'auth-user',

frontend/src/hooks/queries/useChatQueries.ts

@@ -14,6 +14,7 @@ import type {
 import { chatService } from '@/services/chatService';
 import { useMessageQueueStore } from '@/store/messageQueueStore';
 import type { Chat, ChatSearchResponse, ContextUsage, CreateChatRequest } from '@/types/chat.types';
+import type { ChangedFilesData } from '@/types/sandbox.types';
 import type { PaginatedChats } from '@/types/api.types';
 import { createMutation } from './createMutation';
 import { queryKeys } from './queryKeys';
@@ -123,6 +124,19 @@ export const useContextUsageQuery = (
   });
 };
 
+export const useMessageChangesQuery = (
+  messageId: string | undefined,
+  options?: Partial<UseQueryOptions<ChangedFilesData>>,
+) => {
+  return useQuery({
+    queryKey: queryKeys.messageChanges(messageId),
+    queryFn: () => chatService.getMessageChanges(messageId!),
+    enabled: !!messageId,
+    staleTime: Infinity,
+    ...options,
+  });
+};
+
 export const useCreateChatMutation = createMutation<Chat, Error, CreateChatRequest>(
   (data) => chatService.createChat(data),
   async (queryClient, newChat) => {