From 1112fc891b982bf3a82bc8466dc5274954367a3e Mon Sep 17 00:00:00 2001
From: Roland Tannous <rolandtannous@gravityq.ai>
Date: Fri, 29 May 2026 13:18:11 +0400
Subject: [PATCH] Studio: center Cancel in indexing toast, start file counter
 at 1

---
 .../rag/components/ingestion-toast-stack.tsx  | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/studio/frontend/src/features/rag/components/ingestion-toast-stack.tsx b/studio/frontend/src/features/rag/components/ingestion-toast-stack.tsx
index 662d9e4b02..472188b096 100644
--- a/studio/frontend/src/features/rag/components/ingestion-toast-stack.tsx
+++ b/studio/frontend/src/features/rag/components/ingestion-toast-stack.tsx
@@ -90,7 +90,10 @@ export function IngestionToastStack() {
       `${totalChunks} chunk${totalChunks === 1 ? "" : "s"} indexed` +
       (errored > 0 ? ` · ${errored} failed` : "");
   } else {
-    subtitle = `${done}/${total} · ${pct}%`;
+    // Show the file currently being worked on (1-based), not the completed
+    // count — so a fresh batch reads "1/8" rather than "0/8".
+    const current = Math.min(total, done + 1);
+    subtitle = `${current}/${total} · ${pct}%`;
   }
 
   return (
@@ -105,7 +108,7 @@ export function IngestionToastStack() {
           transition={{ duration: reduced ? 0 : 0.15 }}
           className="pointer-events-auto rounded-md border border-border bg-popover px-3 py-2 shadow-md"
         >
-          <div className="flex items-start justify-between gap-2">
+          <div className="flex items-stretch justify-between gap-2">
             <div className="flex min-w-0 flex-col gap-1.5">
               <span className="truncate text-xs font-medium">{title}</span>
               {allDone ? (
@@ -122,21 +125,11 @@ export function IngestionToastStack() {
                 </div>
               )}
             </div>
-            <div className="flex shrink-0 items-center gap-1">
-              {/* While indexing: "Cancel" stops the batch and resets the
-                  index; the "X" only dismisses the toast and lets indexing
-                  continue in the background. When done, just the dismiss X. */}
-              {!allDone && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  disabled={cancelling}
-                  className="h-6 px-2 text-xs text-muted-foreground hover:text-destructive"
-                  onClick={onCancel}
-                >
-                  {cancelling ? "Cancelling…" : "Cancel"}
-                </Button>
-              )}
+            {/* While indexing: "Cancel" stops the batch and resets the index;
+                the "X" only dismisses the toast and lets indexing continue in
+                the background. When done, just the dismiss X. The X stays
+                top-right; Cancel sits centered down the toast's height. */}
+            <div className="flex shrink-0 flex-col items-end">
               <Button
                 variant="ghost"
                 size="icon"
@@ -146,6 +139,17 @@ export function IngestionToastStack() {
               >
                 <HugeiconsIcon icon={Cancel01Icon} size={12} />
               </Button>
+              {!allDone && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  disabled={cancelling}
+                  className="my-auto h-6 px-2 text-xs text-muted-foreground hover:text-destructive"
+                  onClick={onCancel}
+                >
+                  {cancelling ? "Cancelling…" : "Cancel"}
+                </Button>
+              )}
             </div>
           </div>
         </motion.div>