Add collapsible review card footer

Author: Waishnav

src/ui/workspace-app.css

@@ -249,28 +249,36 @@ body {
 }
 
 .review-actions {
-  justify-content: flex-end;
-  padding: 10px 14px;
+  padding: 0;
   border-top: 1px solid color-mix(in srgb, var(--color-border-primary, #3a3a40) 72%, transparent);
+  background: color-mix(in srgb, var(--color-background-secondary, #28282d) 94%, transparent);
 }
 
 .review-action {
-  min-height: 26px;
-  padding: 0 9px;
-  border: 1px solid color-mix(in srgb, var(--color-border-primary, #3a3a40) 80%, transparent);
-  border-radius: 7px;
-  background: color-mix(in srgb, var(--color-background-primary, #17181c) 36%, transparent);
-  color: var(--color-text-secondary, #d6d6dc);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 14px 0 16px;
+  border: 0;
+  background: transparent;
+  color: var(--color-text-primary, #f5f5f6);
   cursor: pointer;
   font: inherit;
-  font-size: var(--font-text-sm-size, 12px);
+  font-size: var(--font-text-sm-size, 13px);
+  text-align: left;
 }
 
 .review-action:hover {
-  background: color-mix(in srgb, var(--color-background-tertiary, #333338) 80%, transparent);
+  background: color-mix(in srgb, var(--color-background-tertiary, #333338) 72%, transparent);
   color: var(--color-text-primary, #f5f5f6);
 }
 
+.review-action .chevron {
+  flex: none;
+}
+
 .review-diff {
   display: grid;
   gap: 8px;

src/ui/workspace-app.tsx

@@ -390,9 +390,7 @@ function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
   unmountPayload();
 
   const files = card.files ?? [];
-  const summary = card.summary ?? {};
-  const visibleFiles = reviewFilesExpanded ? files : files.slice(0, 3);
-  const hiddenCount = Math.max(0, files.length - visibleFiles.length);
+  const hiddenCount = Math.max(0, files.length - 3);
   const main = element("main", { className: "shell" });
   const section = element("section", { className: "tool-card review" });
   const header = element("div", { className: "review-header" });
@@ -411,16 +409,25 @@ function renderReviewCard(card: ToolResultCard, display: ToolDisplay): void {
 
   const actions = element("div", { className: "review-actions" });
   if (hiddenCount > 0) {
-    const showMore = element("button", {
+    const toggleFiles = element("button", {
       className: "review-action",
       type: "button",
-      text: `Show ${hiddenCount} more ${hiddenCount === 1 ? "file" : "files"}`,
+      ariaExpanded: String(reviewFilesExpanded),
     });
-    showMore.addEventListener("click", () => {
-      reviewFilesExpanded = true;
+
+    toggleFiles.append(
+      element("span", {
+        text: reviewFilesExpanded
+          ? "Collapse files"
+          : `Show ${hiddenCount} more ${hiddenCount === 1 ? "file" : "files"}`,
+      }),
+      renderChevron(reviewFilesExpanded, true),
+    );
+    toggleFiles.addEventListener("click", () => {
+      reviewFilesExpanded = !reviewFilesExpanded;
       render();
     });
-    actions.append(showMore);
+    actions.append(toggleFiles);
   }
 
   section.append(header, body);