fix(notes): select review queue items

This commit is contained in:
saravanakumardb1 2026-03-10 17:34:47 -07:00
parent 504b339203
commit 5ce940110f

View File

@ -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>