From a96cb271ead2f2fb97a14d7b2b060c734eb971bb Mon Sep 17 00:00:00 2001
From: scotttong <scott.tong@gmail.com>
Date: Thu, 30 Jul 2026 16:24:33 -0700
Subject: [PATCH] fix(ui): task-chat plan/confirmation card primary CTA on the
 right, secondary on the left

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../TaskChatInteractionCard.test.tsx          | 20 +++++++++++++++++++
 .../task-chat/TaskChatInteractionCard.tsx     |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/task-chat/TaskChatInteractionCard.test.tsx b/ui/src/components/task-chat/TaskChatInteractionCard.test.tsx
index c233be31196..60d7ce6516d 100644
--- a/ui/src/components/task-chat/TaskChatInteractionCard.test.tsx
+++ b/ui/src/components/task-chat/TaskChatInteractionCard.test.tsx
@@ -75,6 +75,26 @@ describe("TaskChatInteractionCard", () => {
     expect(container.textContent).toContain("Approve the plan");
   });
 
+  it("puts the primary CTA on the right via a reversed action row", () => {
+    flushSync(() => {
+      root.render(
+        <TooltipProvider>
+          <ThemeProvider>
+          <TaskChatInteractionCard item={interactionItem(createRequestConfirmation())} />
+        </ThemeProvider>
+        </TooltipProvider>,
+      );
+    });
+    const buttons = Array.from(container.querySelectorAll("button"));
+    const confirm = buttons.find((button) => button.textContent === "Confirm");
+    const decline = buttons.find((button) => button.textContent === "Decline");
+    expect(confirm).not.toBeUndefined();
+    expect(decline).not.toBeUndefined();
+    const row = confirm?.parentElement;
+    expect(row).toBe(decline?.parentElement);
+    expect(row?.className).toContain("flex-row-reverse");
+  });
+
   it("demotes an expired confirmation to a marker row", () => {
     flushSync(() => {
       root.render(
diff --git a/ui/src/components/task-chat/TaskChatInteractionCard.tsx b/ui/src/components/task-chat/TaskChatInteractionCard.tsx
index 870cbb98b08..b2533026970 100644
--- a/ui/src/components/task-chat/TaskChatInteractionCard.tsx
+++ b/ui/src/components/task-chat/TaskChatInteractionCard.tsx
@@ -38,7 +38,7 @@ export function TaskChatInteractionCard({ item, ...cardProps }: TaskChatInteract
       className="tc-enter-bubble w-full"
       data-testid="task-chat-interaction"
     >
-      <IssueThreadInteractionCard interaction={interaction} {...cardProps} />
+      <IssueThreadInteractionCard interaction={interaction} primaryActionOnRight {...cardProps} />
     </div>
   );
 }