From cb6e6151861e3676ef5a3842ba888a5959779222 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Mon, 6 Apr 2026 19:14:40 -0500
Subject: [PATCH] Revert reviewer/approver pickers to sidebar, add to new-issue
 chip bar

Per feedback: reviewer/approver pickers were incorrectly placed in the
issue header row. This moves them back to the Properties sidebar at
regular size and adds them as small chip-style selectors in the
new-issue dialog's bottom bar (next to Upload), matching the existing
chip styling.

- Restored Reviewers/Approvers PropertyPicker rows in IssueProperties
- Removed ExecutionParticipantPicker pills from IssueDetail header
- Added Eye/ShieldCheck-icon reviewer/approver InlineEntitySelectors
  in NewIssueDialog chip bar after Upload button

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueProperties.tsx | 111 +++++++++++++++++++++
 ui/src/components/NewIssueDialog.tsx  | 136 +++++++++++++++-----------
 ui/src/pages/IssueDetail.tsx          |  18 ----
 3 files changed, 188 insertions(+), 77 deletions(-)

diff --git a/ui/src/components/IssueProperties.tsx b/ui/src/components/IssueProperties.tsx
index 9f882ef8..937e4628 100644
--- a/ui/src/components/IssueProperties.tsx
+++ b/ui/src/components/IssueProperties.tsx
@@ -12,6 +12,7 @@ import { queryKeys } from "../lib/queryKeys";
 import { useProjectOrder } from "../hooks/useProjectOrder";
 import { getRecentAssigneeIds, sortAgentsByRecency, trackRecentAssignee } from "../lib/recent-assignees";
 import { formatAssigneeUserLabel } from "../lib/assignees";
+import { buildExecutionPolicy, stageParticipantValues } from "../lib/issue-execution-policy";
 import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
 import { Identity } from "./Identity";
@@ -269,9 +270,45 @@ export function IssueProperties({
   const assignee = issue.assigneeAgentId
     ? agents?.find((a) => a.id === issue.assigneeAgentId)
     : null;
+  const reviewerValues = stageParticipantValues(issue.executionPolicy, "review");
+  const approverValues = stageParticipantValues(issue.executionPolicy, "approval");
   const userLabel = (userId: string | null | undefined) => formatAssigneeUserLabel(userId, currentUserId);
   const assigneeUserLabel = userLabel(issue.assigneeUserId);
   const creatorUserLabel = userLabel(issue.createdByUserId);
+  const updateExecutionPolicy = (nextReviewers: string[], nextApprovers: string[]) => {
+    onUpdate({
+      executionPolicy: buildExecutionPolicy({
+        existingPolicy: issue.executionPolicy ?? null,
+        reviewerValues: nextReviewers,
+        approverValues: nextApprovers,
+      }),
+    });
+  };
+  const toggleExecutionParticipant = (stageType: "review" | "approval", value: string) => {
+    const currentValues = stageType === "review" ? reviewerValues : approverValues;
+    const nextValues = currentValues.includes(value)
+      ? currentValues.filter((candidate) => candidate !== value)
+      : [...currentValues, value];
+    updateExecutionPolicy(
+      stageType === "review" ? nextValues : reviewerValues,
+      stageType === "approval" ? nextValues : approverValues,
+    );
+  };
+  const executionParticipantLabel = (value: string) => {
+    if (value.startsWith("agent:")) {
+      return agentName(value.slice("agent:".length)) ?? value.slice("agent:".length, "agent:".length + 8);
+    }
+    if (value.startsWith("user:")) {
+      return userLabel(value.slice("user:".length)) ?? "User";
+    }
+    return value;
+  };
+  const reviewerTrigger = reviewerValues.length > 0
+    ? <span className="text-sm truncate">{reviewerValues.map((value) => executionParticipantLabel(value)).join(", ")}</span>
+    : <span className="text-sm text-muted-foreground">None</span>;
+  const approverTrigger = approverValues.length > 0
+    ? <span className="text-sm truncate">{approverValues.map((value) => executionParticipantLabel(value)).join(", ")}</span>
+    : <span className="text-sm text-muted-foreground">None</span>;
   const currentExecutionLabel = (() => {
     if (!issue.executionState?.currentStageType) return null;
     const stageLabel = issue.executionState.currentStageType === "review" ? "Review" : "Approval";
@@ -472,6 +509,80 @@ export function IssueProperties({
     </>
   );
 
+  const executionParticipantsContent = (
+    stageType: "review" | "approval",
+    values: string[],
+    search: string,
+    setSearch: (value: string) => void,
+    onClear: () => void,
+  ) => (
+    <>
+      <input
+        className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
+        placeholder={`Search ${stageType === "review" ? "reviewers" : "approvers"}...`}
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        autoFocus={!inline}
+      />
+      <div className="max-h-48 overflow-y-auto overscroll-contain">
+        <button
+          className={cn(
+            "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+            values.length === 0 && "bg-accent",
+          )}
+          onClick={onClear}
+        >
+          No {stageType === "review" ? "reviewers" : "approvers"}
+        </button>
+        {currentUserId && (
+          <button
+            className={cn(
+              "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+              values.includes(`user:${currentUserId}`) && "bg-accent",
+            )}
+            onClick={() => toggleExecutionParticipant(stageType, `user:${currentUserId}`)}
+          >
+            <User className="h-3 w-3 shrink-0 text-muted-foreground" />
+            Assign to me
+          </button>
+        )}
+        {issue.createdByUserId && issue.createdByUserId !== currentUserId && (
+          <button
+            className={cn(
+              "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+              values.includes(`user:${issue.createdByUserId}`) && "bg-accent",
+            )}
+            onClick={() => toggleExecutionParticipant(stageType, `user:${issue.createdByUserId}`)}
+          >
+            <User className="h-3 w-3 shrink-0 text-muted-foreground" />
+            {creatorUserLabel ? creatorUserLabel : "Requester"}
+          </button>
+        )}
+        {sortedAgents
+          .filter((agent) => {
+            if (!search.trim()) return true;
+            return agent.name.toLowerCase().includes(search.toLowerCase());
+          })
+          .map((agent) => {
+            const encoded = `agent:${agent.id}`;
+            return (
+              <button
+                key={`${stageType}:${agent.id}`}
+                className={cn(
+                  "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                  values.includes(encoded) && "bg-accent",
+                )}
+                onClick={() => toggleExecutionParticipant(stageType, encoded)}
+              >
+                <AgentIcon icon={agent.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
+                {agent.name}
+              </button>
+            );
+          })}
+      </div>
+    </>
+  );
+
   const projectTrigger = issue.projectId ? (
     <>
       <span
diff --git a/ui/src/components/NewIssueDialog.tsx b/ui/src/components/NewIssueDialog.tsx
index b390dc33..8c2ccde9 100644
--- a/ui/src/components/NewIssueDialog.tsx
+++ b/ui/src/components/NewIssueDialog.tsx
@@ -49,6 +49,8 @@ import {
   Loader2,
   ListTree,
   X,
+  Eye,
+  ShieldCheck,
 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { extractProviderIdWithFallback } from "../lib/model-utils";
@@ -1177,64 +1179,6 @@ export function NewIssueDialog() {
                   );
                 }}
               />
-              <InlineEntitySelector
-                value={reviewerValue}
-                options={assigneeOptions}
-                placeholder="Reviewer"
-                disablePortal
-                noneLabel="No reviewer"
-                searchPlaceholder="Search reviewers..."
-                emptyMessage="No reviewers found."
-                onChange={setReviewerValue}
-                renderTriggerValue={(option) =>
-                  option ? (
-                    <span className="truncate">{`Reviewer: ${option.label}`}</span>
-                  ) : (
-                    <span className="text-muted-foreground">Reviewer</span>
-                  )
-                }
-                renderOption={(option) => {
-                  if (!option.id) return <span className="truncate">{option.label}</span>;
-                  const reviewer = parseAssigneeValue(option.id).assigneeAgentId
-                    ? (agents ?? []).find((agent) => agent.id === parseAssigneeValue(option.id).assigneeAgentId)
-                    : null;
-                  return (
-                    <>
-                      {reviewer ? <AgentIcon icon={reviewer.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" /> : null}
-                      <span className="truncate">{option.label}</span>
-                    </>
-                  );
-                }}
-              />
-              <InlineEntitySelector
-                value={approverValue}
-                options={assigneeOptions}
-                placeholder="Approver"
-                disablePortal
-                noneLabel="No approver"
-                searchPlaceholder="Search approvers..."
-                emptyMessage="No approvers found."
-                onChange={setApproverValue}
-                renderTriggerValue={(option) =>
-                  option ? (
-                    <span className="truncate">{`Approver: ${option.label}`}</span>
-                  ) : (
-                    <span className="text-muted-foreground">Approver</span>
-                  )
-                }
-                renderOption={(option) => {
-                  if (!option.id) return <span className="truncate">{option.label}</span>;
-                  const approver = parseAssigneeValue(option.id).assigneeAgentId
-                    ? (agents ?? []).find((agent) => agent.id === parseAssigneeValue(option.id).assigneeAgentId)
-                    : null;
-                  return (
-                    <>
-                      {approver ? <AgentIcon icon={approver.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" /> : null}
-                      <span className="truncate">{option.label}</span>
-                    </>
-                  );
-                }}
-              />
             </div>
           </div>
         </div>
@@ -1538,7 +1482,7 @@ export function NewIssueDialog() {
             multiple
           />
           <button
-            className="inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors text-muted-foreground"
+            className="bg-transparent font-normal text-xs text-muted-foreground"
             onClick={() => stageFileInputRef.current?.click()}
             disabled={createIssue.isPending}
           >
@@ -1546,6 +1490,80 @@ export function NewIssueDialog() {
             Upload
           </button>
 
+          <InlineEntitySelector
+            value={reviewerValue}
+            options={assigneeOptions}
+            placeholder="Reviewer"
+            disablePortal
+            noneLabel="No reviewer"
+            searchPlaceholder="Search reviewers..."
+            emptyMessage="No reviewers found."
+            onChange={setReviewerValue}
+            className="bg-transparent font-normal text-xs text-muted-foreground"
+            renderTriggerValue={(option) =>
+              option ? (
+                <>
+                  <Eye className="h-3 w-3" />
+                  <span className="truncate">{option.label}</span>
+                </>
+              ) : (
+                <>
+                  <Eye className="h-3 w-3" />
+                  <span>Reviewer</span>
+                </>
+              )
+            }
+            renderOption={(option) => {
+              if (!option.id) return <span className="truncate">{option.label}</span>;
+              const reviewer = parseAssigneeValue(option.id).assigneeAgentId
+                ? (agents ?? []).find((agent) => agent.id === parseAssigneeValue(option.id).assigneeAgentId)
+                : null;
+              return (
+                <>
+                  {reviewer ? <AgentIcon icon={reviewer.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" /> : null}
+                  <span className="truncate">{option.label}</span>
+                </>
+              );
+            }}
+          />
+
+          <InlineEntitySelector
+            value={approverValue}
+            options={assigneeOptions}
+            placeholder="Approver"
+            disablePortal
+            noneLabel="No approver"
+            searchPlaceholder="Search approvers..."
+            emptyMessage="No approvers found."
+            onChange={setApproverValue}
+            className="bg-transparent font-normal text-xs text-muted-foreground"
+            renderTriggerValue={(option) =>
+              option ? (
+                <>
+                  <ShieldCheck className="h-3 w-3" />
+                  <span className="truncate">{option.label}</span>
+                </>
+              ) : (
+                <>
+                  <ShieldCheck className="h-3 w-3" />
+                  <span>Approver</span>
+                </>
+              )
+            }
+            renderOption={(option) => {
+              if (!option.id) return <span className="truncate">{option.label}</span>;
+              const approver = parseAssigneeValue(option.id).assigneeAgentId
+                ? (agents ?? []).find((agent) => agent.id === parseAssigneeValue(option.id).assigneeAgentId)
+                : null;
+              return (
+                <>
+                  {approver ? <AgentIcon icon={approver.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" /> : null}
+                  <span className="truncate">{option.label}</span>
+                </>
+              );
+            }}
+          />
+
           {/* More (dates) */}
           <Popover open={moreOpen} onOpenChange={setMoreOpen}>
             <PopoverTrigger asChild>
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 8b11d5de..05fb5af8 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -43,7 +43,6 @@ import { InlineEditor } from "../components/InlineEditor";
 import { CommentThread } from "../components/CommentThread";
 import { IssueDocumentsSection } from "../components/IssueDocumentsSection";
 import { IssueProperties } from "../components/IssueProperties";
-import { ExecutionParticipantPicker } from "../components/ExecutionParticipantPicker";
 import { IssueWorkspaceCard } from "../components/IssueWorkspaceCard";
 import { LiveRunWidget } from "../components/LiveRunWidget";
 import type { MentionOption } from "../components/MarkdownEditor";
@@ -1356,23 +1355,6 @@ export function IssueDetail() {
             </div>
           )}
 
-          <div className="flex items-center gap-1">
-            <ExecutionParticipantPicker
-              issue={issue}
-              stageType="review"
-              agents={agents ?? []}
-              currentUserId={currentUserId}
-              onUpdate={(data) => updateIssue.mutate(data)}
-            />
-            <ExecutionParticipantPicker
-              issue={issue}
-              stageType="approval"
-              agents={agents ?? []}
-              currentUserId={currentUserId}
-              onUpdate={(data) => updateIssue.mutate(data)}
-            />
-          </div>
-
           <div className="ml-auto flex items-center gap-0.5 md:hidden shrink-0">
             <Button
               variant="ghost"