Move reviewer/approver pickers to inline header pills

Extract execution participant pickers from sidebar PropertyPicker rows into
compact pill-style Popover triggers in the issue header row, next to labels.
Creates a reusable ExecutionParticipantPicker component with matching
text-[10px] sizing. Removes the old sidebar rows and unused code.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/ExecutionParticipantPicker.tsx

@@ -0,0 +1,166 @@
+import { useState } from "react";
+import type { Agent, Issue } from "@paperclipai/shared";
+import { formatAssigneeUserLabel } from "../lib/assignees";
+import { sortAgentsByRecency, getRecentAssigneeIds } from "../lib/recent-assignees";
+import {
+  buildExecutionPolicy,
+  stageParticipantValues,
+} from "../lib/issue-execution-policy";
+import { cn } from "../lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { User, Eye, ShieldCheck } from "lucide-react";
+import { AgentIcon } from "./AgentIconPicker";
+
+type StageType = "review" | "approval";
+
+interface ExecutionParticipantPickerProps {
+  issue: Issue;
+  stageType: StageType;
+  agents: Agent[];
+  currentUserId: string | null;
+  onUpdate: (data: Record<string, unknown>) => void;
+}
+
+export function ExecutionParticipantPicker({
+  issue,
+  stageType,
+  agents,
+  currentUserId,
+  onUpdate,
+}: ExecutionParticipantPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const reviewerValues = stageParticipantValues(issue.executionPolicy, "review");
+  const approverValues = stageParticipantValues(issue.executionPolicy, "approval");
+  const values = stageType === "review" ? reviewerValues : approverValues;
+
+  const sortedAgents = sortAgentsByRecency(
+    agents.filter((a) => a.status !== "terminated"),
+    getRecentAssigneeIds(),
+  );
+
+  const userLabel = (userId: string | null | undefined) =>
+    formatAssigneeUserLabel(userId, currentUserId);
+  const creatorUserLabel = userLabel(issue.createdByUserId);
+
+  const agentName = (id: string) => {
+    const agent = agents.find((a) => a.id === id);
+    return agent?.name ?? id.slice(0, 8);
+  };
+
+  const participantLabel = (value: string) => {
+    if (value.startsWith("agent:")) return agentName(value.slice("agent:".length));
+    if (value.startsWith("user:")) return userLabel(value.slice("user:".length)) ?? "User";
+    return value;
+  };
+
+  const updatePolicy = (nextValues: string[]) => {
+    onUpdate({
+      executionPolicy: buildExecutionPolicy({
+        existingPolicy: issue.executionPolicy ?? null,
+        reviewerValues: stageType === "review" ? nextValues : reviewerValues,
+        approverValues: stageType === "approval" ? nextValues : approverValues,
+      }),
+    });
+  };
+
+  const toggle = (value: string) => {
+    const next = values.includes(value)
+      ? values.filter((v) => v !== value)
+      : [...values, value];
+    updatePolicy(next);
+  };
+
+  const label = stageType === "review" ? "Reviewers" : "Approvers";
+  const Icon = stageType === "review" ? Eye : ShieldCheck;
+
+  return (
+    <Popover open={open} onOpenChange={(o) => { setOpen(o); if (!o) setSearch(""); }}>
+      <PopoverTrigger asChild>
+        <button
+          className={cn(
+            "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors cursor-pointer",
+            values.length > 0
+              ? "border-border text-foreground hover:bg-accent/50"
+              : "border-dashed border-border/60 text-muted-foreground hover:border-border hover:text-foreground",
+          )}
+        >
+          <Icon className="h-3 w-3" />
+          {values.length > 0 ? (
+            <span className="truncate max-w-[100px]">
+              {values.map(participantLabel).join(", ")}
+            </span>
+          ) : (
+            <span>{label}</span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="p-1 w-56" align="start" collisionPadding={16}>
+        <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 ${label.toLowerCase()}...`}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          autoFocus
+        />
+        <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={() => updatePolicy([])}
+          >
+            No {label.toLowerCase()}
+          </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={() => toggle(`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={() => toggle(`user:${issue.createdByUserId}`)}
+            >
+              <User className="h-3 w-3 shrink-0 text-muted-foreground" />
+              {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={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={() => toggle(encoded)}
+                >
+                  <AgentIcon icon={agent.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
+                  {agent.name}
+                </button>
+              );
+            })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

ui/src/components/IssueProperties.tsx

@@ -12,7 +12,6 @@ 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";
@@ -270,45 +269,9 @@ 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";
@@ -509,80 +472,6 @@ 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

ui/src/pages/IssueDetail.tsx

@@ -43,6 +43,7 @@ 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";
@@ -1355,6 +1356,23 @@ 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"