From 5ce940110f70fb6b2fe8d8f6361577e01263d03c Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Tue, 10 Mar 2026 17:34:47 -0700
Subject: [PATCH] fix(notes): select review queue items

---
 web/src/app/(app)/reviews/page.tsx | 38 ++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/web/src/app/(app)/reviews/page.tsx b/web/src/app/(app)/reviews/page.tsx
index 7d7f171..32d2382 100644
--- a/web/src/app/(app)/reviews/page.tsx
+++ b/web/src/app/(app)/reviews/page.tsx
@@ -10,6 +10,7 @@ import type { AgentTimelineItem, ApprovalQueueItem } from "@/lib/types";
 export default function ReviewsPage() {
   const [approvalQueue, setApprovalQueue] = useState<ApprovalQueueItem[]>([]);
   const [timeline, setTimeline] = useState<AgentTimelineItem[]>([]);
+  const [selectedApprovalId, setSelectedApprovalId] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -21,6 +22,9 @@ export default function ReviewsPage() {
           listAgentTimeline(),
         ]);
         setApprovalQueue(nextQueue);
+        setSelectedApprovalId((current) =>
+          current && nextQueue.some((item) => item.id === current) ? current : nextQueue[0]?.id ?? null,
+        );
         setTimeline(nextTimeline);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Unable to load review queue");
@@ -28,7 +32,10 @@ export default function ReviewsPage() {
     })();
   }, []);
 
-  const featuredProposal = useMemo(() => approvalQueue[0] ?? null, [approvalQueue]);
+  const featuredProposal = useMemo(
+    () => approvalQueue.find((item) => item.id === selectedApprovalId) ?? approvalQueue[0] ?? null,
+    [approvalQueue, selectedApprovalId],
+  );
   const operatorWorkflows = [
     {
       id: "workflow-approvals",
@@ -61,7 +68,13 @@ export default function ReviewsPage() {
           ? await approveReviewItem(featuredProposal)
           : await rejectReviewItem(featuredProposal);
 
-      setApprovalQueue((current) => current.filter((item) => item.id !== featuredProposal.id));
+      setApprovalQueue((current) => {
+        const nextQueue = current.filter((item) => item.id !== featuredProposal.id);
+        setSelectedApprovalId((selected) =>
+          selected === featuredProposal.id ? nextQueue[0]?.id ?? null : selected,
+        );
+        return nextQueue;
+      });
       setTimeline((current) => [
         {
           id: updated.id,
@@ -116,7 +129,24 @@ export default function ReviewsPage() {
           {error ? <div style={{ color: "var(--ml-text-secondary)" }}>{error}</div> : null}
           <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
             {approvalQueue.map((item) => (
-              <div key={item.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center", flexWrap: "wrap" }}>
+              <button
+                key={item.id}
+                type="button"
+                className="surface-muted"
+                onClick={() => setSelectedApprovalId(item.id)}
+                style={{
+                  padding: "var(--ml-space-4)",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  gap: "var(--ml-space-3)",
+                  alignItems: "center",
+                  flexWrap: "wrap",
+                  textAlign: "left",
+                  width: "100%",
+                  borderColor: featuredProposal?.id === item.id ? "var(--ml-accent-primary)" : undefined,
+                  background: featuredProposal?.id === item.id ? "rgba(90, 140, 255, 0.12)" : undefined,
+                }}
+              >
                 <div style={{ display: "grid", gap: 4 }}>
                   <strong>{item.title}</strong>
                   <span style={{ color: "var(--ml-text-secondary)" }}>{item.owner}</span>
@@ -125,7 +155,7 @@ export default function ReviewsPage() {
                   <span className="badge">{item.severity}</span>
                   <span className="badge">{item.status}</span>
                 </div>
-              </div>
+              </button>
             ))}
           </div>
         </section>