chore: cleanup

packages/ui/src/components/message-part.css

@@ -1219,69 +1219,70 @@
 }
 
 [data-component="accordion"][data-scope="apply-patch"] {
+  [data-slot="accordion-trigger"] {
+    background-color: var(--background-stronger) !important;
+  }
+
   [data-slot="apply-patch-trigger-content"] {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    min-width: 0;
+    gap: 20px;
-    gap: 12px;
   }
 
-  [data-slot="apply-patch-file-path"] {
+  [data-slot="apply-patch-file-info"] {
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-small);
-    color: var(--text-weak);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    min-width: 0;
+  }
+
+  [data-slot="apply-patch-file-name-container"] {
+    display: flex;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  [data-slot="apply-patch-directory"] {
+    color: var(--text-base);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    direction: rtl;
+    text-align: left;
+  }
+
+  [data-slot="apply-patch-filename"] {
+    color: var(--text-strong);
+    flex-shrink: 0;
   }
 
   [data-slot="apply-patch-trigger-actions"] {
     flex-shrink: 0;
-    display: inline-flex;
+    display: flex;
+    gap: 16px;
     align-items: center;
-    gap: 10px;
+    justify-content: flex-end;
   }
 
-  [data-slot="apply-patch-file-action"] {
+  [data-slot="apply-patch-change"] {
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    color: var(--text-base);
-    flex-shrink: 0;
-
-    &[data-type="delete"] {
-      color: var(--text-critical-base);
-    }
-
-    &[data-type="add"] {
-      color: var(--text-success-base);
-    }
-
-    &[data-type="move"] {
-      color: var(--text-warning-base);
-    }
   }
 
-  [data-slot="apply-patch-deletion-count"] {
+  [data-slot="apply-patch-change"][data-type="added"] {
-    font-family: var(--font-family-mono);
+    color: var(--icon-diff-add-base);
-    font-size: var(--font-size-small);
-    color: var(--text-critical-base);
-    flex-shrink: 0;
   }
 
-  [data-slot="apply-patch-file-chevron"] {
+  [data-slot="apply-patch-change"][data-type="removed"] {
-    display: inline-flex;
+    color: var(--icon-diff-delete-base);
-    color: var(--icon-weaker);
-    transform: rotate(-90deg);
-    transition: transform 0.15s ease;
   }
 
-  [data-slot="accordion-item"][data-expanded] [data-slot="apply-patch-file-chevron"] {
+  [data-slot="apply-patch-change"][data-type="modified"] {
-    transform: rotate(0deg);
+    color: var(--icon-diff-modified-base);
   }
 }
 

packages/ui/src/components/message-part.tsx

@@ -39,6 +39,7 @@ import { Accordion } from "./accordion"
 import { Button } from "./button"
 import { Card } from "./card"
 import { Collapsible } from "./collapsible"
+import { FileIcon } from "./file-icon"
 import { Icon } from "./icon"
 import { Checkbox } from "./checkbox"
 import { DiffChanges } from "./diff-changes"
@@ -1661,34 +1662,37 @@ ToolRegistry.register({
                     <Accordion.Header>
                       <Accordion.Trigger>
                         <div data-slot="apply-patch-trigger-content">
-                          <span data-slot="apply-patch-file-path">{file.relativePath}</span>
+                          <div data-slot="apply-patch-file-info">
+                            <FileIcon node={{ path: file.relativePath, type: "file" }} />
+                            <div data-slot="apply-patch-file-name-container">
+                              <Show when={file.relativePath.includes("/")}>
+                                <span data-slot="apply-patch-directory">{`\u202A${getDirectory(file.relativePath)}\u202C`}</span>
+                              </Show>
+                              <span data-slot="apply-patch-filename">{getFilename(file.relativePath)}</span>
+                            </div>
+                          </div>
                           <div data-slot="apply-patch-trigger-actions">
                             <Switch>
-                              <Match when={file.type === "delete"}>
-                                <span data-slot="apply-patch-file-action" data-type="delete">
-                                  {i18n.t("ui.patch.action.deleted")}
-                                </span>
-                              </Match>
                               <Match when={file.type === "add"}>
-                                <span data-slot="apply-patch-file-action" data-type="add">
+                                <span data-slot="apply-patch-change" data-type="added">
                                   {i18n.t("ui.patch.action.created")}
                                 </span>
                               </Match>
+                              <Match when={file.type === "delete"}>
+                                <span data-slot="apply-patch-change" data-type="removed">
+                                  {i18n.t("ui.patch.action.deleted")}
+                                </span>
+                              </Match>
                               <Match when={file.type === "move"}>
-                                <span data-slot="apply-patch-file-action" data-type="move">
+                                <span data-slot="apply-patch-change" data-type="modified">
                                   {i18n.t("ui.patch.action.moved")}
                                 </span>
                               </Match>
+                              <Match when={true}>
+                                <DiffChanges changes={{ additions: file.additions, deletions: file.deletions }} />
+                              </Match>
                             </Switch>
-                            <Show when={file.type !== "delete"}>
+                            <Icon name="chevron-grabber-vertical" size="small" />
-                              <DiffChanges changes={{ additions: file.additions, deletions: file.deletions }} />
-                            </Show>
-                            <Show when={file.type === "delete"}>
-                              <span data-slot="apply-patch-deletion-count">-{file.deletions}</span>
-                            </Show>
-                            <span data-slot="apply-patch-file-chevron">
-                              <Icon name="chevron-down" size="small" />
-                            </span>
                           </div>
                         </div>
                       </Accordion.Trigger>