From db44232df241ebbe8ae937335f599eab36bdf62e Mon Sep 17 00:00:00 2001
From: Tasks Agent <tasks@localhost>
Date: Tue, 31 Mar 2026 18:30:33 +0000
Subject: [PATCH] Add Request Changes button to merge queue UI

Wire up the existing requestChanges() API function in the merge queue
UI. Adds a "Request Changes" button between Approve and Reject for
pending entries. Clicking opens a dialog to enter feedback, which is
sent back to the agent session via the /request-changes endpoint.

Closes #520

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/pages/merge-queue/columns.tsx | 20 +++++++-
 web/src/pages/merge-queue/page.tsx    | 74 ++++++++++++++++++++++++++-
 2 files changed, 90 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/merge-queue/columns.tsx b/web/src/pages/merge-queue/columns.tsx
index 618d4491..5d8c2146 100644
--- a/web/src/pages/merge-queue/columns.tsx
+++ b/web/src/pages/merge-queue/columns.tsx
@@ -1,10 +1,10 @@
 import { type ColumnDef } from "@tanstack/react-table";
 import { Link } from "react-router-dom";
-import { ExternalLink, Check, X } from "lucide-react";
+import { ExternalLink, Check, X, MessageSquare } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { formatRelativeTime, projectLabel } from "@/lib/utils";
-import { approveMerge, rejectMerge } from "@/lib/api";
+import { approveMerge, rejectMerge, requestChanges } from "@/lib/api";
 import type { MergeQueueEntry, MergeStatus, Project, Task } from "@/lib/types";
 
 // ---------------------------------------------------------------------------
@@ -280,6 +280,13 @@ export const columns: ColumnDef<MergeQueueEntry>[] = [
         refresh?.();
       }
 
+      async function handleRequestChanges() {
+        const feedback = window.prompt("Describe the changes needed:");
+        if (!feedback?.trim()) return;
+        await requestChanges(entry.id, feedback.trim(), feedback.trim());
+        refresh?.();
+      }
+
       return (
         <div className="inline-flex items-center rounded-md border border-border">
           <Button
@@ -291,6 +298,15 @@ export const columns: ColumnDef<MergeQueueEntry>[] = [
             <Check className="h-3.5 w-3.5" />
             Approve
           </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1 rounded-none border-r border-border"
+            onClick={handleRequestChanges}
+          >
+            <MessageSquare className="h-3.5 w-3.5" />
+            Request Changes
+          </Button>
           <Button
             variant="ghost"
             size="sm"
diff --git a/web/src/pages/merge-queue/page.tsx b/web/src/pages/merge-queue/page.tsx
index 84046286..4887ecc0 100644
--- a/web/src/pages/merge-queue/page.tsx
+++ b/web/src/pages/merge-queue/page.tsx
@@ -1,13 +1,22 @@
 import { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
-import { ExternalLink, Check, X, Info } from "lucide-react";
+import { ExternalLink, Check, X, Info, MessageSquare } from "lucide-react";
 import { toast } from "sonner";
 import { useAppState } from "@/hooks/use-app-state";
-import { flushMergeQueue, approveMerge, rejectMerge } from "@/lib/api";
+import { flushMergeQueue, approveMerge, rejectMerge, requestChanges } from "@/lib/api";
 import { formatRelativeTime, projectLabel } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { ListView, ListEmptyState } from "@/components/ui/list-view";
 import { ListHeader, ListHeaderTabs } from "@/components/ui/list-header";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   ListRow,
   LinkCell,
@@ -84,6 +93,25 @@ function MergeQueueRow({
     }
   }
 
+  const [requestChangesOpen, setRequestChangesOpen] = useState(false);
+  const [feedback, setFeedback] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleRequestChanges() {
+    if (!feedback.trim()) return;
+    setSubmitting(true);
+    try {
+      await requestChanges(entry.id, feedback.trim(), feedback.trim());
+      setRequestChangesOpen(false);
+      setFeedback("");
+      onRefresh();
+    } catch {
+      toast.error("Failed to request changes");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
   return (
     <ListRow>
       {/* PR number */}
@@ -161,6 +189,48 @@ function MergeQueueRow({
               <Check className="h-3.5 w-3.5" />
               Approve
             </Button>
+            <Dialog open={requestChangesOpen} onOpenChange={setRequestChangesOpen}>
+              <DialogTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 gap-1 rounded-none border-r border-border"
+                >
+                  <MessageSquare className="h-3.5 w-3.5" />
+                  Request Changes
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Request Changes</DialogTitle>
+                  <DialogDescription>
+                    Describe the changes needed. This feedback will be sent back to the agent.
+                  </DialogDescription>
+                </DialogHeader>
+                <textarea
+                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring min-h-[100px] resize-y"
+                  placeholder="Describe what needs to change..."
+                  value={feedback}
+                  onChange={(e) => setFeedback(e.target.value)}
+                />
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setRequestChangesOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={handleRequestChanges}
+                    disabled={!feedback.trim() || submitting}
+                  >
+                    {submitting ? "Submitting..." : "Submit"}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
             <Button
               variant="ghost"
               size="sm"