PaperClipAI/ui/src/components/issue-properties/IssueProperties.tsx

import { isLockedIssueStub } from "@/components/LockedIssueChip";
import { IssuePullRequestLinks } from "../IssuePullRequestLinks";
import { useIssueWorkProducts } from "../../hooks/useIssueWorkProducts";
import { getIssuePullRequests, pullRequestHref, pullRequestIdentity } from "../../lib/issue-pull-requests";
import { useWorkspaceIsolationControls } from "@/hooks/useWorkspaceIsolationControls";
import { AgentIdentity } from "@/components/AgentIdentity";
import { AgentAvatar } from "@/components/AgentAvatar";
import { normalizeLegacyRunnerProvider } from "@paperclipai/adapter-utils";
import { useCallback, useEffect, useMemo, useRef, useState, type ComponentType } from "react";
import { createPortal } from "react-dom";
import { PROPERTIES_PANE_HEADER_SLOT_ID } from "../PropertiesPanel";
import { issueStatusText } from "@/lib/status-colors";
import { copyTextToClipboard } from "@/lib/clipboard";
import { Link } from "@/lib/router";
import {
  deriveOriginatingActor,
  isArtifactReviewDocumentKey,
  type ExecutionWorkspace,
  type Issue,
  type IssueLabel,
} from "@paperclipai/shared";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { accessApi } from "../../api/access";
import { agentsApi } from "../../api/agents";
import { authApi } from "../../api/auth";
import { executionWorkspacesApi } from "../../api/execution-workspaces";
import { instanceSettingsApi } from "../../api/instanceSettings";
import { issuesApi } from "../../api/issues";
import { useIssuePlanDocument } from "@/hooks/useIssuePlanDocument";
import { useIssueDocuments } from "@/hooks/useIssueDocuments";
import { useStreamlinedUiEnabled } from "@/hooks/useStreamlinedUiEnabled";
import { selectArtifactAttachments } from "@/lib/issue-artifacts";
import { projectsApi } from "../../api/projects";
import { useCompany } from "../../context/CompanyContext";
import { useSidebar } from "../../context/SidebarContext";
import { queryKeys } from "../../lib/queryKeys";
import { COPILOT_MODEL_DISCOVERY_QUERY_OPTIONS, copilotTaskModelCatalogOptions } from "../../lib/copilot-task-model-catalog";
import { buildCompanyUserInlineOptions, buildCompanyUserLabelMap, buildCompanyUserProfileMap, isAgentTaskTarget } from "../../lib/company-members";
import { ISSUE_OVERRIDE_ADAPTER_TYPES, type IssueModelLane } from "../../lib/issue-assignee-overrides";
import { useProjectOrder } from "../../hooks/useProjectOrder";
import {
  getRecentAssigneeIds,
  sortAgentsByRecency,
  trackRecentAssignee,
  trackRecentAssigneeUser,
} from "../../lib/recent-assignees";
import { getRecentProjectIds } from "../../lib/recent-projects";
import { orderItemsBySelectedAndRecent } from "../../lib/recent-selections";
import { formatAssigneeUserLabel, formatUserLabel } from "../../lib/assignees";
import { buildExecutionPolicy, stageParticipantValues } from "../../lib/issue-execution-policy";
import { useExecutionPolicy } from "../../hooks/useExecutionPolicy";
import {
  formatMonitorAbsolute,
  formatMonitorAbsoluteFull,
  formatMonitorEta,
  formatMonitorEtaLabel,
  formatMonitorOffset,
  useMonitorCountdown,
} from "../../lib/issue-monitor";
import { extractProviderIdWithFallback } from "../../lib/model-utils";
import { formatRetryReason } from "../../lib/runRetryState";
import { useRetryNowMutation } from "../../hooks/useRetryNowMutation";
import { RetryErrorBand } from "../IssueScheduledRetryCard";
import { StatusIcon } from "../StatusIcon";
import { PriorityIcon } from "../PriorityIcon";
import { SHOW_TASK_PRIORITY_UI } from "../../lib/ui-flags";
import { Identity } from "../Identity";
import { ProjectTile } from "../ProjectTile";
import { IssueReferencePill } from "../IssueReferencePill";
import { formatDate, formatDateTime, cn, projectUrl } from "../../lib/utils";
import type { IssueExternalObjectGroup } from "../../hooks/useIssueExternalObjects";
import { timeAgo } from "../../lib/timeAgo";
import { invalidateInboxIssueQueries } from "../../lib/inboxArchiveCache";
import { Button } from "@/components/ui/button";
import { ToggleSwitch } from "@/components/ui/toggle-switch";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { IssuePropertiesPlansTab } from "./IssuePropertiesPlansTab";
import { IssuePropertiesArtifactsTab } from "./IssuePropertiesArtifactsTab";
import { User, ArrowUpRight, Plus, X, GitBranch, FolderOpen, HardDrive, Check, Clock, RotateCcw, Loader2, CheckCircle2, ArchiveRestore, ChevronLeft } from "lucide-react";
import { InlineEntitySelector, type InlineEntityOption } from "../InlineEntitySelector";
import {
  AssigneeRunningBanner,
  InterruptAssignConfirm,
  type HandoffChipResolvers,
} from "../interrupt-handoff/InterruptHandoffViews";
import { describeReassignInterrupt } from "../../lib/interrupt-handoff";
import {
  buildWorkspaceRuntimeControlSections,
  WorkspaceRuntimeQuickControls,
  type WorkspaceRuntimeControlRequest,
} from "../WorkspaceRuntimeControls";
import { ExternalObjectRows } from "./external-object-rows";
import {
  asRecord,
  compactRecord,
  isMainIssueWorkspace,
  overrideLane,
  sortAdapterModels,
  thinkingEffortKeyFor,
  thinkingEffortOptionsFor,
  thinkingEffortValueFor,
  toDateTimeLocalValue,
} from "./helpers";
import { PropertyPicker } from "./property-picker";
import { PropertyChip, PropertyRow, PropertySection } from "./primitives";
import {
  buildWorkspaceSelectionUpdate,
  currentWorkspaceSelection,
} from "../../lib/issue-workspace-selection";
import {
  buildReusableExecutionWorkspaceOptionGroups,
  dedupeReusableExecutionWorkspaces,
  reusableWorkspaceOptionMatches,
} from "../../lib/reusable-execution-workspaces";
import { issueReviewPolicyBadge } from "../../lib/review-policy";
import { IssueCasesPanel } from "../IssueCasesPanel";
import { ExpandRelationListButton, RemovableIssueReferencePill } from "./relation-controls";
import { Badge } from "@/components/ui/badge";
import {
  TaskDetailReferencesPanel,
  TaskDetailSubtasksPanel,
  type TaskDetailRelationItem,
} from "../task-detail/TaskDetailRelationsPanel";

function splitMiddleTruncation(value: string): { prefix: string; suffix: string } | null {
  const splitAt = Math.max(value.lastIndexOf("/"), value.lastIndexOf("\\"));
  if (splitAt <= 0 || splitAt >= value.length - 1) return null;
  return {
    prefix: value.slice(0, splitAt + 1),
    suffix: value.slice(splitAt + 1),
  };
}

function TruncatedCopyable({ value, icon: Icon }: { value: string; icon: ComponentType<{ className?: string }> }) {
  const [copied, setCopied] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
  useEffect(() => () => clearTimeout(timerRef.current), []);
  const handleCopy = useCallback(async () => {
    try {
      await copyTextToClipboard(value);
      setCopied(true);
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => setCopied(false), 1500);
    } catch { /* noop */ }
  }, [value]);
  const { enabled: streamlinedUiEnabled } = useStreamlinedUiEnabled();
  const middle = streamlinedUiEnabled ? splitMiddleTruncation(value) : null;

  return (
    <div className="flex items-center gap-1.5 min-w-0 flex-1" title={value}>
      <Icon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
      <button
        type="button"
        className={cn(
          "cursor-pointer text-left font-mono text-sm transition-colors hover:text-foreground",
          streamlinedUiEnabled ? "min-w-0 flex-1" : "min-w-0 truncate",
        )}
        onClick={handleCopy}
        title={value}
        aria-label={`Copy ${value} to clipboard`}
      >
        {!streamlinedUiEnabled ? value : middle ? (
          <span className="flex min-w-0" data-middle-truncate="true">
            <span className="min-w-0 truncate">{middle.prefix}</span>
            <span className="max-w-1/2 shrink-0 truncate">{middle.suffix}</span>
          </span>
        ) : (
          <span className="block truncate">{value}</span>
        )}
      </button>
      {copied && (
        <span className={cn("inline-flex items-center gap-1 text-xs shrink-0", issueStatusText.done)} role="status">
          <Check className="h-3 w-3 shrink-0" />
          Copied
        </span>
      )}
    </div>
  );
}

interface IssuePropertiesProps {
  issue: Issue;
  childIssues?: Issue[];
  issueLinkState?: unknown;
  onAddSubIssue?: () => void;
  onUpdate: (data: Record<string, unknown>) => void;
  inline?: boolean;
  /** Whether an agent run is currently in flight on this issue, so the assignee
   * picker can warn that reassigning will interrupt it. */
  hasActiveRun?: boolean;
  externalObjects?: IssueExternalObjectGroup[];
  externalObjectsLoading?: boolean;
  externalObjectsError?: boolean;
  onRetryExternalObjects?: () => void;
  onCheckMonitorNow?: () => void;
  checkingMonitorNow?: boolean;
  documentDeepLink?: IssuePropertiesDocumentDeepLink | null;
  /** Render only the Properties body when a parent owns the side-panel tabs. */
  sidePanelContentOnly?: boolean;
}

export interface IssuePropertiesDocumentDeepLink {
  requestId: number;
  tab: "plans" | "artifacts" | "document";
  documentKey: string;
}

const ISSUE_BLOCKER_SEARCH_LIMIT = 50;
const ISSUE_PROPERTY_RELATION_PREVIEW_COUNT = 5;
const STREAMLINED_PANE_TAB_CLASS =
  "task-detail-pane-tab h-7 rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";

type IssuePaneTab = "properties" | "subtasks" | "references" | "plans" | "artifacts";

interface IssuePaneTabDescriptor {
  value: IssuePaneTab;
  label: string;
  count?: number;
  closable: boolean;
}

export function IssueProperties({
  issue,
  childIssues = [],
  issueLinkState,
  onAddSubIssue,
  onUpdate,
  inline,
  hasActiveRun = false,
  externalObjects,
  externalObjectsLoading,
  externalObjectsError,
  onRetryExternalObjects,
  onCheckMonitorNow,
  checkingMonitorNow = false,
  documentDeepLink,
  sidePanelContentOnly = false,
}: IssuePropertiesProps) {
  const policyResult = useExecutionPolicy(issue.executionPolicy);
  const policyAvailable = policyResult.success;
  const executionPolicy = policyResult.success ? policyResult.data : null;
  const { selectedCompanyId } = useCompany();
  const { isMobile } = useSidebar();
  const queryClient = useQueryClient();
  const companyId = issue.companyId ?? selectedCompanyId;
  const { data: experimentalSettings } = useQuery({
    queryKey: queryKeys.instance.experimentalSettings,
    queryFn: () => instanceSettingsApi.getExperimental(),
  });
  // Managed-sandbox-only policy: the workspace folder is a host filesystem
  // path, so the Folder row disappears. The Branch row above it stays. The gate
  // fails closed whenever the policy is unknown — in flight and also on a failed
  // read — because an unresolved policy reads as "not managed" and would show
  // the folder the policy exists to hide.
  const hideHostPaths =
    experimentalSettings === undefined || experimentalSettings.enableManagedSandboxOnly === true;
  const { enabled: streamlinedUiEnabled } = useStreamlinedUiEnabled();
  // Classic Task Interface: gate the Properties | Plans | Artifacts tab shell.
  // Flag ON renders the legacy stacked sections verbatim (no Tabs wrapper);
  // flag OFF — including while settings load — renders the chat-style tab
  // shell. This pane is always task-scoped, so the flag alone is a sufficient
  // gate.
  // Classic Task Interface alone controls the production tabbed-vs-stacked
  // boundary. Streamlined UI layers new relationship tabs and visual treatment
  // onto master's tabbed task-chat pane without changing that boundary.
  const taskChatShellEnabled = experimentalSettings?.enableClassicTaskInterface !== true;
  const streamlinedPropertiesEnabled = streamlinedUiEnabled && taskChatShellEnabled;
  // When hosted by the resizable PropertiesPanel, the tab strip portals into
  // the pane's header bar (left of the window controls). The slot only exists
  // once the panel has committed, hence the effect; inline hosts (mobile sheet)
  // keep the tab strip in place.
  const [paneHeaderSlot, setPaneHeaderSlot] = useState<HTMLElement | null>(null);
  useEffect(() => {
    if (!taskChatShellEnabled || inline) {
      setPaneHeaderSlot(null);
      return;
    }
    setPaneHeaderSlot(document.getElementById(PROPERTIES_PANE_HEADER_SLOT_ID));
  }, [taskChatShellEnabled, inline]);
  // A Plan tab represents materialized plan content, not merely planning mode.
  // Same query keys as the tab bodies, so these share their cached fetches.
  const { data: paneTabPlanDocument } = useIssuePlanDocument(
    taskChatShellEnabled ? issue.id : null,
  );
  const { data: paneTabAcceptedPlans } = useQuery({
    queryKey: queryKeys.issues.acceptedPlanDecompositions(issue.id),
    queryFn: () => issuesApi.listAcceptedPlanDecompositions(issue.id),
    enabled: taskChatShellEnabled,
  });
  const { data: paneTabAttachments } = useQuery({
    queryKey: queryKeys.issues.attachments(issue.id),
    queryFn: () => issuesApi.listAttachments(issue.id),
    enabled: taskChatShellEnabled,
  });
  const { data: paneTabWorkProducts, isError: workProductsError, refetch: refetchWorkProducts } = useIssueWorkProducts(issue.id);
  const pullRequests = useMemo(() => getIssuePullRequests(paneTabWorkProducts), [paneTabWorkProducts]);
  const remainingExternalObjects = useMemo(() => {
    const identities = new Set(pullRequests.map((product) => pullRequestIdentity(pullRequestHref(product))).filter(Boolean));
    return externalObjects?.filter((entry) => !identities.has(pullRequestIdentity(entry.pill.url)));
  }, [externalObjects, pullRequests]);
  const { data: paneTabDocuments } = useIssueDocuments(taskChatShellEnabled ? issue.id : null);
  // Proxy `artifact-review-*` documents surface only through their Work
  // product row, so they must not summon the Plan or Documents surfaces.
  const paneTabStandaloneDocuments = (paneTabDocuments ?? []).filter(
    (doc) => !isArtifactReviewDocumentKey(doc.key),
  );
  const hasPlanTab =
    Boolean(paneTabPlanDocument)
    || (paneTabAcceptedPlans?.length ?? 0) > 0
    || paneTabStandaloneDocuments.length > 0;
  // Artifacts covers the same three sources the tab body composes: work
  // products, documents (redundant with the Plan tab, intentionally), and
  // attachments from agents and people.
  const hasArtifactsTab =
    (paneTabWorkProducts?.length ?? 0) > 0
    || paneTabStandaloneDocuments.length > 0
    || selectArtifactAttachments(paneTabAttachments, paneTabWorkProducts).length > 0;
  const [paneTab, setPaneTab] = useState<IssuePaneTab>("properties");
  const [closedPaneTabs, setClosedPaneTabs] = useState<Set<IssuePaneTab>>(() => new Set());
  // Once a plan document exists, surface it: switch the pane to the Plan tab so
  // the write-up is exposed alongside the plan-approval card, instead of leaving
  // the user on Properties. Only auto-switch until the user picks a tab by hand —
  // after that their choice wins. Ref-guarded so it fires once per mount.
  const paneTabUserChosenRef = useRef(false);
  const handlePaneTabChange = useCallback((value: string) => {
    paneTabUserChosenRef.current = true;
    setPaneTab(value as IssuePaneTab);
  }, []);
  useEffect(() => {
    setClosedPaneTabs(new Set());
  }, [issue.id]);
  useEffect(() => {
    if (hasPlanTab && !paneTabUserChosenRef.current) {
      setPaneTab("plans");
    }
  }, [hasPlanTab]);
  useEffect(() => {
    if (!documentDeepLink) return;
    const targetTab = documentDeepLink.tab;
    if (targetTab === "document") return;
    paneTabUserChosenRef.current = true;
    setPaneTab(targetTab);
    setClosedPaneTabs((current) => {
      if (!current.has(targetTab)) return current;
      const next = new Set(current);
      next.delete(targetTab);
      return next;
    });
  }, [documentDeepLink]);
  const [assigneeOpen, setAssigneeOpen] = useState(false);
  const [assigneeSearch, setAssigneeSearch] = useState("");
  /** When a run is live, a selection is staged here until the operator confirms
   * the interrupt rather than applying it immediately. */
  const [pendingAssignee, setPendingAssignee] = useState<{
    assigneeAgentId: string | null;
    assigneeUserId: string | null;
    label: string;
    track?: () => void;
  } | null>(null);
  const [projectOpen, setProjectOpen] = useState(false);
  const [projectSearch, setProjectSearch] = useState("");
  const [workspacePickerOpen, setWorkspacePickerOpen] = useState(false);
  const [workspacePickerStep, setWorkspacePickerStep] = useState<"mode" | "reuse">("mode");
  const [workspaceSearch, setWorkspaceSearch] = useState("");
  const [blockedByOpen, setBlockedByOpen] = useState(false);
  const [blockedBySearch, setBlockedBySearch] = useState("");
  const [blockedByExpanded, setBlockedByExpanded] = useState(false);
  const [blockingExpanded, setBlockingExpanded] = useState(false);
  const [subTasksExpanded, setSubTasksExpanded] = useState(false);
  const [subtasksOpen, setSubtasksOpen] = useState(false);
  const [relatedTasksExpanded, setRelatedTasksExpanded] = useState(false);
  const [parentOpen, setParentOpen] = useState(false);
  const [parentSearch, setParentSearch] = useState("");
  const [reviewersOpen, setReviewersOpen] = useState(false);
  const [reviewerSearch, setReviewerSearch] = useState("");
  const [approversOpen, setApproversOpen] = useState(false);
  const [approverSearch, setApproverSearch] = useState("");
  const [monitorOpen, setMonitorOpen] = useState(false);
  const [monitorDetailsOpen, setMonitorDetailsOpen] = useState(false);
  const [scheduledRetryOpen, setScheduledRetryOpen] = useState(false);
  const [labelsOpen, setLabelsOpen] = useState(false);
  const [assigneeOptionsOpen, setAssigneeOptionsOpen] = useState(false);
  const [labelSearch, setLabelSearch] = useState("");
  const [newLabelName, setNewLabelName] = useState("");
  // token-extraction: allowlisted — color-picker seed state, persisted into label-create payload; a var() string would break that payload.
  const [newLabelColor, setNewLabelColor] = useState("#6366f1");
  const [monitorAtInput, setMonitorAtInput] = useState(() => toDateTimeLocalValue(executionPolicy?.monitor?.nextCheckAt));
  const [monitorNotesInput, setMonitorNotesInput] = useState(executionPolicy?.monitor?.notes ?? "");
  const [monitorServiceInput, setMonitorServiceInput] = useState(executionPolicy?.monitor?.serviceName ?? "");
  const [runtimeActionMessage, setRuntimeActionMessage] = useState<string | null>(null);
  const [runtimeActionErrorMessage, setRuntimeActionErrorMessage] = useState<string | null>(null);
  const [unarchiveErrorMessage, setUnarchiveErrorMessage] = useState<string | null>(null);
  const [watchdogOpen, setWatchdogOpen] = useState(false);
  const [watchdogAgentInput, setWatchdogAgentInput] = useState(issue.watchdog?.watchdogAgentId ?? "");
  const [watchdogInstructionsInput, setWatchdogInstructionsInput] = useState(issue.watchdog?.instructions ?? "");
  const normalizedBlockedBySearch = blockedBySearch.trim();
  const normalizedParentSearch = parentSearch.trim();

  useEffect(() => {
    setBlockedByExpanded(false);
    setBlockingExpanded(false);
    setSubTasksExpanded(false);
    setRelatedTasksExpanded(false);
  }, [issue.id]);

  const { data: session } = useQuery({
    queryKey: queryKeys.auth.session,
    queryFn: () => authApi.getSession(),
  });
  const currentUserId = session?.user?.id ?? session?.session?.userId;

  const { data: agents } = useQuery({
    queryKey: queryKeys.agents.list(companyId!),
    queryFn: () => agentsApi.list(companyId!),
    enabled: !!companyId,
  });
  const { data: companyMembers } = useQuery({
    queryKey: queryKeys.access.companyUserDirectory(companyId!),
    queryFn: () => accessApi.listUserDirectory(companyId!),
    enabled: !!companyId,
  });
  const { data: projects } = useQuery({
    queryKey: queryKeys.projects.list(companyId!, { includeArchived: true }),
    queryFn: () => projectsApi.list(companyId!, { includeArchived: true }),
    enabled: !!companyId,
  });
  const activeProjects = useMemo(
    () => (projects ?? []).filter((p) => !p.archivedAt || p.id === issue.projectId),
    [projects, issue.projectId],
  );
  const { orderedProjects } = useProjectOrder({
    projects: activeProjects,
    companyId,
    userId: currentUserId,
  });

  const { data: labels } = useQuery({
    queryKey: queryKeys.issues.labels(companyId!),
    queryFn: () => issuesApi.listLabels(companyId!),
    enabled: !!companyId,
  });

  const { data: allIssues, isFetching: isFetchingIssuePickerIssues } = useQuery({
    queryKey: queryKeys.issues.list(companyId!),
    queryFn: () => issuesApi.list(companyId!),
    enabled: !!companyId && (parentOpen || (blockedByOpen && normalizedBlockedBySearch.length === 0)),
  });

  const { data: searchedBlockedByIssues, isFetching: isFetchingSearchedBlockedByIssues } = useQuery({
    queryKey: companyId
      ? queryKeys.issues.search(companyId, normalizedBlockedBySearch, undefined, ISSUE_BLOCKER_SEARCH_LIMIT)
      : ["issues", "blocker-search", normalizedBlockedBySearch, ISSUE_BLOCKER_SEARCH_LIMIT],
    queryFn: () => issuesApi.list(companyId!, {
      q: normalizedBlockedBySearch,
      limit: ISSUE_BLOCKER_SEARCH_LIMIT,
    }),
    enabled: !!companyId && blockedByOpen && normalizedBlockedBySearch.length > 0,
  });

  const { data: searchedParentIssues, isFetching: isFetchingSearchedParentIssues } = useQuery({
    queryKey: companyId
      ? queryKeys.issues.search(companyId, normalizedParentSearch, undefined, ISSUE_BLOCKER_SEARCH_LIMIT)
      : ["issues", "blocker-search", normalizedParentSearch, ISSUE_BLOCKER_SEARCH_LIMIT],
    queryFn: () => issuesApi.list(companyId!, {
      q: normalizedParentSearch,
      limit: ISSUE_BLOCKER_SEARCH_LIMIT,
    }),
    enabled: !!companyId && parentOpen && normalizedParentSearch.length > 0,
  });

  const createLabel = useMutation({
    mutationFn: (data: { name: string; color: string }) => issuesApi.createLabel(companyId!, data),
    onSuccess: async (created) => {
      queryClient.setQueryData<IssueLabel[] | undefined>(
        queryKeys.issues.labels(companyId!),
        (current) => {
          if (!current) return [created];
          if (current.some((label) => label.id === created.id)) return current;
          return [...current, created];
        },
      );
      onUpdate({ labelIds: [...(issue.labelIds ?? []), created.id] });
      void queryClient.invalidateQueries({ queryKey: queryKeys.issues.labels(companyId!) });
      setNewLabelName("");
    },
  });

  const unarchiveFromInbox = useMutation({
    mutationFn: () => issuesApi.unarchiveFromInbox(issue.id),
    onMutate: () => {
      setUnarchiveErrorMessage(null);
    },
    onSuccess: () => {
      setUnarchiveErrorMessage(null);
      queryClient.setQueryData<Issue>(queryKeys.issues.detail(issue.id), (current) =>
        current ? { ...current, archivedAt: null, archivedByActorType: null, archivedByAgentId: null, archivedByRunId: null } : current,
      );
      void queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issue.id) });
      if (companyId) invalidateInboxIssueQueries(queryClient, companyId);
    },
    onError: (error) => {
      setUnarchiveErrorMessage(error instanceof Error && error.message.trim().length > 0
        ? error.message
        : "Failed to unarchive this issue. Please try again.");
    },
  });

  const toggleLabel = (labelId: string) => {
    const ids = issue.labelIds ?? [];
    const next = ids.includes(labelId)
      ? ids.filter((id) => id !== labelId)
      : [...ids, labelId];
    onUpdate({ labelIds: next });
  };

  const agentName = (id: string | null) => {
    if (!id || !agents) return null;
    const agent = agents.find((a) => a.id === id);
    return agent?.name ?? id.slice(0, 8);
  };

  const projectName = (id: string | null) => {
    if (!id) return id?.slice(0, 8) ?? "None";
    const project = orderedProjects.find((p) => p.id === id);
    return project?.name ?? id.slice(0, 8);
  };
  const currentProject = issue.projectId
    ? orderedProjects.find((project) => project.id === issue.projectId) ?? null
    : null;
  const issueProject = issue.project ?? currentProject;
  const { visible: workspaceIsolationControlsVisible } = useWorkspaceIsolationControls();
  const workspacePickerEligible = workspaceIsolationControlsVisible && experimentalSettings?.enableIsolatedWorkspaces === true
    && Boolean(issueProject?.executionWorkspacePolicy?.enabled);
  const {
    data: reusableExecutionWorkspaces,
    isLoading: reusableExecutionWorkspacesLoading,
    isError: reusableExecutionWorkspacesError,
  } = useQuery({
    queryKey: queryKeys.executionWorkspaces.list(companyId!, {
      projectId: issue.projectId ?? undefined,
      projectWorkspaceId: issue.projectWorkspaceId ?? undefined,
      reuseEligible: true,
    }),
    queryFn: () => executionWorkspacesApi.list(companyId!, {
      projectId: issue.projectId ?? undefined,
      projectWorkspaceId: issue.projectWorkspaceId ?? undefined,
      reuseEligible: true,
    }),
    enabled: Boolean(companyId) && Boolean(issue.projectId) && workspacePickerEligible && workspacePickerOpen,
  });
  const effectiveWorkspaceSelection = currentWorkspaceSelection(issue, issueProject);
  const hasWorkspaceOverride = issue.executionWorkspacePreference != null
    || issue.executionWorkspaceSettings != null;
  const activeWorkspacePickerMode = effectiveWorkspaceSelection === "reuse_existing"
    ? "reuse"
    : !hasWorkspaceOverride
      ? "default"
      : effectiveWorkspaceSelection === "isolated_workspace"
        ? "isolated"
        : "default";
  const reusableWorkspaceOptions = useMemo(
    () => buildReusableExecutionWorkspaceOptionGroups(
      dedupeReusableExecutionWorkspaces(reusableExecutionWorkspaces ?? []),
    ).map((group) => ({
      ...group,
      options: group.options.filter((option) => reusableWorkspaceOptionMatches(option, workspaceSearch)),
    })).filter((group) => group.options.length > 0),
    [reusableExecutionWorkspaces, workspaceSearch],
  );
  const boundWorkspace = (reusableExecutionWorkspaces ?? []).find(
    (workspace) => workspace.id === issue.executionWorkspaceId,
  ) ?? issue.currentExecutionWorkspace ?? null;
  const workspaceTriggerLabel = activeWorkspacePickerMode === "isolated"
    ? "New isolated workspace"
    : activeWorkspacePickerMode === "reuse"
      ? boundWorkspace?.name ?? "Reuse existing workspace"
      : "Default";
  const workspaceTriggerTitle = activeWorkspacePickerMode === "reuse"
    ? boundWorkspace?.branchName ?? undefined
    : undefined;
  const closeWorkspacePicker = () => {
    setWorkspacePickerOpen(false);
    setWorkspacePickerStep("mode");
    setWorkspaceSearch("");
  };
  const saveWorkspaceSelection = (
    selection: null | "isolated_workspace" | "reuse_existing",
    workspace?: ExecutionWorkspace,
  ) => {
    const update = buildWorkspaceSelectionUpdate(selection, workspace?.id, workspace?.mode);
    if (!update) return;
    onUpdate(update);
    closeWorkspacePicker();
  };
  const issueUsesMainWorkspace = useMemo(
    () => isMainIssueWorkspace({ issue, project: issueProject }),
    [issue, issueProject],
  );
  const showWorkspaceDetailLink = Boolean(issue.executionWorkspaceId && issue.currentExecutionWorkspace?.id === issue.executionWorkspaceId) && !issueUsesMainWorkspace
    && experimentalSettings?.enableIsolatedWorkspaces === true;
  const workspaceRuntimeConfig = issueUsesMainWorkspace
    ? null
    : issue.currentExecutionWorkspace?.config?.workspaceRuntime ?? null;
  const workspaceRuntimeServices = issue.currentExecutionWorkspace?.runtimeServices ?? [];
  const workspaceCanRunCommands = Boolean(issue.currentExecutionWorkspace?.cwd);
  const workspaceCanStartServices = Boolean(workspaceRuntimeConfig) && workspaceCanRunCommands;
  const workspaceRuntimeSections = useMemo(() => buildWorkspaceRuntimeControlSections({
    runtimeConfig: workspaceRuntimeConfig,
    runtimeServices: workspaceRuntimeServices,
    canStartServices: workspaceCanStartServices,
    canRunJobs: workspaceCanRunCommands,
  }), [workspaceCanRunCommands, workspaceCanStartServices, workspaceRuntimeConfig, workspaceRuntimeServices]);
  const hasWorkspaceRuntimeControls = !issueUsesMainWorkspace && (
    workspaceRuntimeSections.services.length > 0
    || workspaceRuntimeSections.otherServices.length > 0
  );
  const controlWorkspaceRuntime = useMutation({
    mutationFn: (request: WorkspaceRuntimeControlRequest) => {
      const workspaceId = issue.currentExecutionWorkspace?.id ?? issue.executionWorkspaceId;
      if (!workspaceId) throw new Error("This task is not attached to a workspace.");
      return executionWorkspacesApi.controlRuntimeCommands(workspaceId, request.action, request);
    },
    onSuccess: (result, request) => {
      queryClient.setQueryData(queryKeys.executionWorkspaces.detail(result.workspace.id), result.workspace);
      void queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issue.id) });
      if (result.workspace.projectId) void queryClient.invalidateQueries({ queryKey: queryKeys.projects.detail(result.workspace.projectId) });
      void queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.overview(result.workspace.companyId) });
      void queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.workspaceOperations(result.workspace.id) });
      if (companyId) {
        void queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(companyId) });
        void queryClient.invalidateQueries({ queryKey: queryKeys.executionWorkspaces.list(companyId) });
      }
      setRuntimeActionErrorMessage(null);
      setRuntimeActionMessage(
        request.action === "run"
          ? "Workspace job completed."
          : request.action === "stop"
            ? "Workspace service stopped."
            : request.action === "restart"
              ? "Workspace service restarted."
              : "Workspace service started.",
      );
    },
    onError: (error) => {
      setRuntimeActionMessage(null);
      setRuntimeActionErrorMessage(error instanceof Error ? error.message : "Failed to control workspace commands.");
    },
  });
  const pendingWorkspaceRuntimeAction = controlWorkspaceRuntime.isPending ? controlWorkspaceRuntime.variables ?? null : null;
  const referencedIssueIdentifiers = issue.referencedIssueIdentifiers ?? [];
  const relatedTasks = useMemo(() => {
    const excluded = new Set<string>();
    const addExcluded = (candidate: { id: string; identifier?: string | null }) => {
      excluded.add(candidate.id);
      if (candidate.identifier) excluded.add(candidate.identifier);
    };

    for (const blocker of issue.blockedBy ?? []) addExcluded(blocker);
    for (const blocked of issue.blocks ?? []) addExcluded(blocked);
    for (const child of childIssues) addExcluded(child);

    const referencedIssues = issue.relatedWork?.outbound.map((item) => item.issue) ?? [];
    if (referencedIssues.length > 0) {
      return referencedIssues.filter((referenced) => {
        const label = referenced.identifier ?? referenced.id;
        return !excluded.has(referenced.id) && !excluded.has(label);
      });
    }

    return referencedIssueIdentifiers
      .filter((identifier) => !excluded.has(identifier))
      .map((identifier) => ({ id: identifier, identifier, title: identifier }));
  }, [childIssues, issue.blockedBy, issue.blocks, issue.relatedWork?.outbound, referencedIssueIdentifiers]);
  const panelReferencedTasks = useMemo<TaskDetailRelationItem[]>(() => {
    const outbound = issue.relatedWork?.outbound.map(({ issue: referenced }) => ({
      id: referenced.id,
      identifier: referenced.identifier,
      title: referenced.title,
      status: referenced.status,
    })) ?? [];
    if (outbound.length > 0) return outbound;
    return referencedIssueIdentifiers.map((identifier) => ({
      id: identifier,
      identifier,
      title: identifier,
    }));
  }, [issue.relatedWork?.outbound, referencedIssueIdentifiers]);
  const panelMentionedInTasks = useMemo<TaskDetailRelationItem[]>(
    () => issue.relatedWork?.inbound.map(({ issue: referenced }) => ({
      id: referenced.id,
      identifier: referenced.identifier,
      title: referenced.title,
      status: referenced.status,
    })) ?? [],
    [issue.relatedWork?.inbound],
  );
  const projectLink = (id: string | null) => {
    if (!id) return null;
    const project = projects?.find((p) => p.id === id) ?? null;
    return project ? projectUrl(project) : `/projects/${id}`;
  };

  const recentAssigneeIds = useMemo(() => getRecentAssigneeIds(), [assigneeOpen]);
  const sortedAgents = useMemo(
    () => sortAgentsByRecency((agents ?? []).filter(isAgentTaskTarget), recentAssigneeIds),
    [agents, recentAssigneeIds],
  );
  const recentProjectIds = useMemo(() => getRecentProjectIds(), [projectOpen]);
  const userLabelMap = useMemo(
    () => buildCompanyUserLabelMap(companyMembers?.users),
    [companyMembers?.users],
  );
  const userProfileMap = useMemo(
    () => buildCompanyUserProfileMap(companyMembers?.users),
    [companyMembers?.users],
  );
  const otherUserOptions = useMemo(
    () => buildCompanyUserInlineOptions(companyMembers?.users, { excludeUserIds: [currentUserId, issue.createdByUserId] }),
    [companyMembers?.users, currentUserId, issue.createdByUserId],
  );

  const assignee = issue.assigneeAgentId
    ? agents?.find((a) => a.id === issue.assigneeAgentId)
    : null;
  const copilotCatalog = copilotTaskModelCatalogOptions(assignee);
  const assigneeAdapterType = assignee?.adapterType ?? null;
  const assigneeAdapterOverrides = issue.assigneeAdapterOverrides ?? null;
  const showAssigneeAdapterOptions = assigneeAdapterOverrides !== null;
  const supportsAssigneeOverrides = Boolean(
    assigneeAdapterType && (ISSUE_OVERRIDE_ADAPTER_TYPES.has(assigneeAdapterType) || copilotCatalog),
  );
  const assigneeOverrideLane = overrideLane(assigneeAdapterOverrides);
  const assigneeOverrideAdapterConfig = asRecord(assigneeAdapterOverrides?.adapterConfig);
  const assigneeOverrideModel =
    typeof assigneeOverrideAdapterConfig.model === "string" ? assigneeOverrideAdapterConfig.model : "";
  const assigneePrimaryAdapterConfig = asRecord(assignee?.adapterConfig);
  const assigneePrimaryModel =
    typeof assigneePrimaryAdapterConfig.model === "string" ? assigneePrimaryAdapterConfig.model : "";
  const effectiveAssigneeModel = assigneeOverrideModel || assigneePrimaryModel;
  const assigneeOverrideThinkingEffort = thinkingEffortValueFor(
    assigneeAdapterType,
    assigneeOverrideAdapterConfig,
  );
  const assigneeOverrideChrome = assigneeAdapterType === "claude_local"
    && assigneeOverrideAdapterConfig.chrome === true;
  const catalogProvider = assigneeAdapterType === "paperclip_runner" ? String(normalizeLegacyRunnerProvider(assigneePrimaryAdapterConfig).provider ?? "codex") : undefined;
  const catalogEnvironmentId = copilotCatalog ? assignee?.defaultEnvironmentId ?? null : null;
  const copilotCatalogScope = JSON.stringify(copilotCatalog ?? null);
  const requestCopilotModels = Boolean(copilotCatalog && assigneeOptionsOpen && showAssigneeAdapterOptions && supportsAssigneeOverrides);
  const { data: assigneeAdapterModels, refetch: refreshAssigneeModels } = useQuery({
    queryKey:
      companyId && assigneeAdapterType
        ? [...queryKeys.agents.adapterModels(companyId, assigneeAdapterType, catalogEnvironmentId, catalogProvider), copilotCatalog ?? null]
        : ["agents", "none", "adapter-models", assigneeAdapterType ?? "none"],
    queryFn: () => agentsApi.adapterModels(companyId!, assigneeAdapterType!, {
      provider: catalogProvider,
      ...(copilotCatalog ? { environmentId: catalogEnvironmentId, ...copilotCatalog } : {}),
    }),
    ...(copilotCatalog ? COPILOT_MODEL_DISCOVERY_QUERY_OPTIONS : {}),
    enabled: Boolean(companyId) && showAssigneeAdapterOptions && supportsAssigneeOverrides && (!copilotCatalog || requestCopilotModels),
  });
  useEffect(() => {
    if (requestCopilotModels) void refreshAssigneeModels();
  }, [requestCopilotModels, copilotCatalogScope, catalogEnvironmentId, companyId, refreshAssigneeModels]);
  const modelOverrideOptions = useMemo<InlineEntityOption[]>(() => {
    const models = sortAdapterModels(assigneeAdapterModels ?? []);
    const options = models.map((model) => ({
      id: model.id,
      label: model.label,
      searchText: `${model.id} ${extractProviderIdWithFallback(model.id)}`,
    }));
    if (assigneeOverrideModel && !options.some((option) => option.id === assigneeOverrideModel)) {
      options.unshift({
        id: assigneeOverrideModel,
        label: assigneeOverrideModel,
        searchText: assigneeOverrideModel,
      });
    }
    return options;
  }, [assigneeAdapterModels, assigneeOverrideModel]);
  const updateAssigneeAdapterOverrides = (next: Issue["assigneeAdapterOverrides"]) => {
    onUpdate({ assigneeAdapterOverrides: next });
  };
  const buildAssigneeOverrideWithConfig = (adapterConfig: Record<string, unknown>) => {
    const nextConfig = compactRecord(adapterConfig);
    const next = compactRecord({
      useProjectWorkspace: assigneeAdapterOverrides?.useProjectWorkspace,
      ...(Object.keys(nextConfig).length > 0 ? { adapterConfig: nextConfig } : {}),
    });
    return Object.keys(next).length > 0 ? next : null;
  };
  const updateAssigneeOverrideConfig = (patch: Record<string, unknown>) => {
    updateAssigneeAdapterOverrides(
      buildAssigneeOverrideWithConfig({
        ...assigneeOverrideAdapterConfig,
        ...patch,
      }),
    );
  };
  const updateAssigneeOverrideThinkingEffort = (nextValue: string) => {
    const nextConfig = { ...assigneeOverrideAdapterConfig };
    delete nextConfig.modelReasoningEffort;
    delete nextConfig.reasoningEffort;
    delete nextConfig.effort;
    delete nextConfig.variant;
    if (nextValue) {
      nextConfig[thinkingEffortKeyFor(assigneeAdapterType)] = nextValue;
    }
    updateAssigneeAdapterOverrides(buildAssigneeOverrideWithConfig(nextConfig));
  };
  const updateAssigneeOverrideModel = (nextModel: string) => {
    const nextConfig: Record<string, unknown> = {
      ...assigneeOverrideAdapterConfig,
      model: nextModel || undefined,
    };
    if (
      assigneeAdapterType === "codex_local"
      && assigneeOverrideThinkingEffort
      && !thinkingEffortOptionsFor(assigneeAdapterType, nextModel || assigneePrimaryModel).some(
        (option) => option.value === assigneeOverrideThinkingEffort,
      )
    ) {
      delete nextConfig.modelReasoningEffort;
      delete nextConfig.reasoningEffort;
      delete nextConfig.effort;
    }
    updateAssigneeAdapterOverrides(buildAssigneeOverrideWithConfig(nextConfig));
  };
  const setAssigneeOverrideLane = (lane: IssueModelLane) => {
    if (lane === "primary") {
      updateAssigneeAdapterOverrides(null);
      return;
    }
    updateAssigneeAdapterOverrides(buildAssigneeOverrideWithConfig(assigneeOverrideAdapterConfig) ?? { adapterConfig: {} });
  };
  const assigneeOptionsTrigger = (() => {
    if (assigneeOverrideLane === "custom") {
      const details = [
        assigneeOverrideModel,
        assigneeOverrideThinkingEffort,
        assigneeOverrideChrome ? "Chrome" : "",
      ].filter(Boolean);
      const summary = details.length > 0 ? `Override · ${details.join(" · ")}` : "Override · adapter options";
      return (
        <span
          className="min-w-0 truncate text-sm"
          title={`Task-level model override — replaces the agent's primary model for this issue.${details.length > 0 ? ` (${details.join(" · ")})` : ""}`}
        >
          {summary}
        </span>
      );
    }
    return <span className="text-sm text-muted-foreground">Primary model</span>;
  })();
  const assigneeOptionsContent = supportsAssigneeOverrides ? (
    <div className="w-full space-y-3 p-2">
      <div className="space-y-1.5">
        <div className="text-xs text-muted-foreground">Model lane</div>
        <div className="flex w-full overflow-hidden rounded-md border border-border" role="radiogroup" aria-label="Model lane">
          {(["primary", "custom"] as const).map((lane) => (
            <button
              key={lane}
              type="button"
              role="radio"
              aria-checked={assigneeOverrideLane === lane}
              className={cn(
                "flex-1 px-2 py-1 text-xs capitalize transition-colors hover:bg-accent/40",
                assigneeOverrideLane === lane && "bg-accent text-foreground",
              )}
              onClick={() => setAssigneeOverrideLane(lane)}
            >
              {lane === "primary" ? "Primary" : "Override"}
            </button>
          ))}
        </div>
        {assigneeOverrideLane === "custom" ? (
          <p className="text-xs text-muted-foreground">
            Task-level model override — replaces the agent&apos;s primary model for this issue.
          </p>
        ) : null}
      </div>
      {assigneeOverrideLane === "custom" ? (
        <>
          <div className="space-y-1.5">
            <div className="text-xs text-muted-foreground">Model</div>
            <InlineEntitySelector
              value={assigneeOverrideModel}
              options={modelOverrideOptions}
              placeholder="Default model"
              disablePortal
              noneLabel="Default model"
              searchPlaceholder="Search models..."
              emptyMessage="No models found."
              onChange={updateAssigneeOverrideModel}
            />
          </div>
          <div className="space-y-1.5">
            <div className="text-xs text-muted-foreground">Thinking effort</div>
            <div className="flex items-center gap-1.5 flex-wrap">
              {thinkingEffortOptionsFor(assigneeAdapterType, effectiveAssigneeModel).map((option) => (
                <button
                  key={option.value || "default"}
                  className={cn(
                    "px-2 py-1 rounded-md text-xs border border-border hover:bg-accent/50 transition-colors",
                    assigneeOverrideThinkingEffort === option.value && "bg-accent",
                  )}
                  onClick={() => updateAssigneeOverrideThinkingEffort(option.value)}
                >
                  {option.label}
                </button>
              ))}
            </div>
          </div>
          {assigneeAdapterType === "claude_local" ? (
            <div className="flex items-center justify-between rounded-md border border-border px-2 py-1.5">
              <div className="text-xs text-muted-foreground">Enable Chrome (--chrome)</div>
              <ToggleSwitch
                checked={assigneeOverrideChrome}
                onCheckedChange={(next) => updateAssigneeOverrideConfig({ chrome: next ? true : undefined })}
              />
            </div>
          ) : null}
        </>
      ) : null}
    </div>
  ) : (
    <div className="w-full space-y-2 p-2">
      <p className="text-xs text-muted-foreground">
        {assignee
          ? "This assignee's adapter does not expose editable task overrides."
          : "Select a compatible assignee agent to edit these overrides."}
      </p>
      <button
        type="button"
        className="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
        onClick={() => updateAssigneeAdapterOverrides(null)}
      >
        Clear adapter options
      </button>
    </div>
  );
  const reviewerValues = stageParticipantValues(issue.executionPolicy, "review");
  const approverValues = stageParticipantValues(issue.executionPolicy, "approval");
  const userLabel = (userId: string | null | undefined) => formatAssigneeUserLabel(userId, currentUserId, userLabelMap);
  const actualUserLabel = (userId: string | null | undefined) => formatUserLabel(userId, userLabelMap);
  const assigneeUserLabel = userLabel(issue.assigneeUserId);
  const creatorUserLabel = actualUserLabel(issue.createdByUserId);
  const originatingActor = deriveOriginatingActor(issue);
  const originatingUserProfile =
    originatingActor?.kind === "user" ? userProfileMap.get(originatingActor.id) : null;
  const originatingViaAgentName =
    originatingActor?.kind === "user" && originatingActor.viaAgentId
      ? agentName(originatingActor.viaAgentId) ?? originatingActor.viaAgentId.slice(0, 8)
      : null;
  const selectedAssigneeValue = issue.assigneeAgentId
    ? `agent:${issue.assigneeAgentId}`
    : issue.assigneeUserId
      ? `user:${issue.assigneeUserId}`
      : "";

  // --- Interrupt-handoff clarity for the assignee picker (design surface 2) ---
  const handoffResolvers: HandoffChipResolvers = useMemo(
    () => ({
      agentMap: new Map((agents ?? []).map((agent) => [agent.id, agent])),
      resolveUserLabel: (id) => userLabel(id),
    }),
    // userLabel closes over userLabelMap + currentUserId, both reflected here.
    [agents, userLabelMap, currentUserId],
  );
  const reassignInterruptCopy = useMemo(
    () => describeReassignInterrupt({ runningAgentName: assignee?.name ?? null }),
    [assignee?.name],
  );
  const closeAssigneePicker = () => {
    setAssigneeOpen(false);
    setAssigneeSearch("");
    setPendingAssignee(null);
  };
  const applyAssignee = (next: { assigneeAgentId: string | null; assigneeUserId: string | null }, track?: () => void) => {
    track?.();
    onUpdate(next);
    closeAssigneePicker();
  };
  /** Apply a selection immediately, or stage it for confirmation while a run is live. */
  const selectAssignee = (
    next: { assigneeAgentId: string | null; assigneeUserId: string | null },
    label: string,
    track?: () => void,
  ) => {
    const nextValue = next.assigneeAgentId
      ? `agent:${next.assigneeAgentId}`
      : next.assigneeUserId
        ? `user:${next.assigneeUserId}`
        : "";
    if (nextValue === selectedAssigneeValue) {
      closeAssigneePicker();
      return;
    }
    if (hasActiveRun) {
      setPendingAssignee({ ...next, label, track });
      return;
    }
    applyAssignee(next, track);
  };
  const updateExecutionPolicy = (nextReviewers: string[], nextApprovers: string[]) => {
    if (!policyAvailable) return;
    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 reviewerLabel = reviewerValues.map((value) => executionParticipantLabel(value)).join(", ");
  const approverLabel = approverValues.map((value) => executionParticipantLabel(value)).join(", ");
  const reviewerTrigger = reviewerValues.length > 0
    ? <span className="text-sm truncate min-w-0" title={reviewerLabel}>{reviewerLabel}</span>
    : <span className="text-sm text-muted-foreground">None</span>;
  const approverTrigger = approverValues.length > 0
    ? <span className="text-sm truncate min-w-0" title={approverLabel}>{approverLabel}</span>
    : <span className="text-sm text-muted-foreground">None</span>;
  // PAP-16506 P4: who may give the `in_review` verdict. Only an agent sets this,
  // and only the two opt-in constraints are worth a row — the default (`null` ≡
  // "anyone can approve") is what every issue already does, so it shows nothing.
  const reviewPolicyBadge = issueReviewPolicyBadge(issue.reviewPolicy);
  const nextRunnableExecutionStage = (() => {
    if (issue.executionState?.status === "changes_requested" && issue.executionState.currentStageType) {
      return issue.executionState.currentStageType;
    }
    if (issue.executionState) return null;
    if (reviewerValues.length > 0) return "review";
    if (approverValues.length > 0) return "approval";
    return null;
  })();
  const runExecutionButton = (stageType: "review" | "approval") => (
    <PropertyRow label="">
      <button
        type="button"
        className="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
        onClick={() => onUpdate({ status: "in_review" })}
      >
        {stageType === "review" ? "Run review now" : "Run approval now"}
      </button>
    </PropertyRow>
  );
  const currentExecutionLabel = (() => {
    if (!issue.executionState?.currentStageType) return null;
    const stageLabel = issue.executionState.currentStageType === "review" ? "Review" : "Approval";
    const participant = issue.executionState.currentParticipant;
    const participantLabel = participant
      ? (participant.type === "agent"
        ? agentName(participant.agentId ?? null)
        : userLabel(participant.userId ?? null))
      : null;
    if (issue.executionState.status === "changes_requested") {
      return `${stageLabel} requested changes${participantLabel ? ` by ${participantLabel}` : ""}`;
    }
    return `${stageLabel} pending${participantLabel ? ` with ${participantLabel}` : ""}`;
  })();
  useEffect(() => {
    setMonitorAtInput(toDateTimeLocalValue(executionPolicy?.monitor?.nextCheckAt));
    setMonitorNotesInput(executionPolicy?.monitor?.notes ?? "");
    setMonitorServiceInput(executionPolicy?.monitor?.serviceName ?? "");
  }, [
    executionPolicy?.monitor?.nextCheckAt,
    executionPolicy?.monitor?.notes,
    executionPolicy?.monitor?.serviceName,
  ]);
  // Re-sync watchdog editor inputs when the persisted watchdog changes (and reset on close).
  useEffect(() => {
    if (watchdogOpen) return;
    setWatchdogAgentInput(issue.watchdog?.watchdogAgentId ?? "");
    setWatchdogInstructionsInput(issue.watchdog?.instructions ?? "");
  }, [issue.watchdog?.watchdogAgentId, issue.watchdog?.instructions, watchdogOpen]);

  const watchdogAgentOptions = useMemo<InlineEntityOption[]>(
    () =>
      (agents ?? [])
        .filter(isAgentTaskTarget)
        .map((agent) => ({
          id: agent.id,
          label: agent.name,
          searchText: `${agent.name} ${agent.role} ${agent.title ?? ""}`,
        })),
    [agents],
  );
  const upsertWatchdog = useMutation({
    mutationFn: (data: { agentId: string; instructions: string | null }) =>
      issuesApi.upsertWatchdog(issue.id, data),
    onSuccess: (watchdog) => {
      queryClient.setQueryData<Issue>(queryKeys.issues.detail(issue.id), (current) =>
        current ? { ...current, watchdog } : current,
      );
      void queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issue.id) });
      setWatchdogOpen(false);
    },
  });
  const deleteWatchdog = useMutation({
    mutationFn: () => issuesApi.deleteWatchdog(issue.id),
    onSuccess: () => {
      queryClient.setQueryData<Issue>(queryKeys.issues.detail(issue.id), (current) =>
        current ? { ...current, watchdog: null } : current,
      );
      void queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issue.id) });
      setWatchdogOpen(false);
    },
  });
  const saveWatchdog = () => {
    if (!watchdogAgentInput) return;
    upsertWatchdog.mutate({
      agentId: watchdogAgentInput,
      instructions: watchdogInstructionsInput.trim() || null,
    });
  };
  const removeWatchdog = () => {
    if (issue.watchdog) {
      deleteWatchdog.mutate();
    } else {
      setWatchdogOpen(false);
    }
    setWatchdogAgentInput("");
    setWatchdogInstructionsInput("");
  };
  const watchdogMutationError =
    upsertWatchdog.error instanceof Error
      ? upsertWatchdog.error.message
      : deleteWatchdog.error instanceof Error
        ? deleteWatchdog.error.message
        : null;
  const watchdogIssueRef = (childIssues ?? []).find(
    (child) => child.id === issue.watchdog?.watchdogIssueId,
  );
  const watchdogTrigger = issue.watchdog ? (
    <span className="inline-flex min-w-0 max-w-full items-center gap-1.5 text-sm" title={issue.watchdog.instructions?.trim() || undefined}>
      {(() => {
        const agent = (agents ?? []).find((candidate) => candidate.id === issue.watchdog?.watchdogAgentId);
        return agent ? <AgentAvatar agent={agent} size={16} className="h-3.5 w-3.5 shrink-0 text-muted-foreground"/> : null;
      })()}
      <span className="shrink-0 max-w-40 truncate">{agentName(issue.watchdog.watchdogAgentId)}</span>
      {issue.watchdog.instructions?.trim() ? (
        <span className="min-w-0 flex-1 truncate text-muted-foreground">
          · {issue.watchdog.instructions.trim()}
        </span>
      ) : null}
      {issue.watchdog.status === "disabled" ? (
        <span className="shrink-0 text-xs text-muted-foreground">(disabled)</span>
      ) : null}
    </span>
  ) : (
    <span className="text-sm text-muted-foreground">None</span>
  );
  const labelsExtra = !streamlinedPropertiesEnabled && (issue.labelIds ?? []).length > 0 ? (
    <button
      type="button"
      className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
      onClick={() => setLabelsOpen(true)}
      aria-label="Add label"
      title="Add label"
    >
      <Plus className="h-3 w-3" />
      Add label
    </button>
  ) : undefined;
  const watchdogContent = (
    <div className="space-y-3 p-2">
      <div className="space-y-1.5">
        <div className="text-xs font-medium text-foreground">Watchdog agent</div>
        <InlineEntitySelector
          value={watchdogAgentInput}
          options={watchdogAgentOptions}
          placeholder="Select agent"
          noneLabel="No watchdog agent"
          searchPlaceholder="Search agents..."
          emptyMessage="No agents found."
          onChange={setWatchdogAgentInput}
          renderTriggerValue={(option) => {
            if (!option) return <span className="text-muted-foreground">Select agent</span>;
            const agent = (agents ?? []).find((candidate) => candidate.id === option.id);
            return (
              <>
                {agent ? <AgentAvatar agent={agent} size={16} className="h-3 w-3 shrink-0 text-muted-foreground"/> : null}
                <span className="truncate">{option.label}</span>
              </>
            );
          }}
          renderOption={(option) => {
            const agent = (agents ?? []).find((candidate) => candidate.id === option.id);
            return (
              <>
                {agent ? <AgentAvatar agent={agent} size={16} className="h-3 w-3 shrink-0 text-muted-foreground"/> : null}
                <span className="truncate">{option.label}</span>
              </>
            );
          }}
        />
      </div>
      <div className="space-y-1.5">
        <div className="text-xs font-medium text-foreground">
          Instructions <span className="font-normal text-muted-foreground">(optional)</span>
        </div>
        <Textarea
          value={watchdogInstructionsInput}
          onChange={(event) => setWatchdogInstructionsInput(event.target.value)}
          placeholder="What should the watchdog watch for and how should it keep work moving?"
          rows={4}
          className="text-xs"
        />
      </div>
      {watchdogIssueRef ? (
        <div className="text-xs text-muted-foreground">
          Watchdog task:{" "}
          <Link to={`/issues/${watchdogIssueRef.id}`} className="text-primary hover:underline">
            {watchdogIssueRef.identifier ?? "View task"}
          </Link>
        </div>
      ) : null}
      {watchdogMutationError ? (
        <div className="rounded border border-destructive/40 bg-destructive/10 px-2 py-1 text-xs text-destructive">
          {watchdogMutationError}
        </div>
      ) : null}
      <div className="flex items-center justify-between">
        <button
          type="button"
          className="text-xs text-muted-foreground hover:text-destructive transition-colors disabled:opacity-50"
          disabled={deleteWatchdog.isPending || (!issue.watchdog && !watchdogAgentInput)}
          onClick={removeWatchdog}
        >
          {deleteWatchdog.isPending ? "Removing…" : "Remove"}
        </button>
        <Button
          type="button"
          size="sm"
          className="h-7 text-xs"
          disabled={!watchdogAgentInput || upsertWatchdog.isPending}
          onClick={saveWatchdog}
        >
          {upsertWatchdog.isPending ? "Saving…" : issue.watchdog ? "Update" : "Set watchdog"}
        </Button>
      </div>
    </div>
  );

  const updateMonitor = (nextMonitor: Issue["executionPolicy"] extends infer T
    ? T extends { monitor?: infer M | null } | null | undefined
      ? M | null
      : never
    : never) => {
    if (!policyAvailable) return;
    const basePolicy = buildExecutionPolicy({
      existingPolicy: issue.executionPolicy ?? null,
      reviewerValues,
      approverValues,
    });
    if (!basePolicy && !nextMonitor) {
      onUpdate({ executionPolicy: null });
      return;
    }
    const { monitor: _previousMonitor, ...policyWithoutMonitor } = basePolicy ?? {};
    onUpdate({
      executionPolicy: {
        ...policyWithoutMonitor,
        mode: basePolicy?.mode ?? issue.executionPolicy?.mode ?? "normal",
        commentRequired: true,
        stages: basePolicy?.stages ?? [],
        ...(nextMonitor ? { monitor: nextMonitor } : {}),
      },
    });
  };
  const saveMonitor = () => {
    if (!monitorAtInput) return;
    const nextCheckAt = new Date(monitorAtInput);
    if (Number.isNaN(nextCheckAt.getTime())) return;
    const serviceName = monitorServiceInput.trim() || null;
    updateMonitor({
      nextCheckAt: nextCheckAt.toISOString(),
      notes: monitorNotesInput.trim() || null,
      scheduledBy: "board",
      kind: serviceName ? "external_service" : null,
      serviceName,
      externalRef: null,
    });
    setMonitorOpen(false);
  };
  const clearMonitor = () => {
    updateMonitor(null);
    setMonitorOpen(false);
  };
  const monitorState = issue.executionState?.monitor ?? null;
  const monitorNextCheckAt = monitorState?.nextCheckAt ?? issue.monitorNextCheckAt ?? executionPolicy?.monitor?.nextCheckAt ?? null;
  const monitorAttemptCount = issue.monitorAttemptCount ?? monitorState?.attemptCount ?? 0;
  const monitorLastTriggeredAt = issue.monitorLastTriggeredAt ?? monitorState?.lastTriggeredAt ?? null;
  const monitorServiceName = executionPolicy?.monitor?.serviceName ?? monitorState?.serviceName ?? null;
  const monitorNotes = executionPolicy?.monitor?.notes ?? monitorState?.notes ?? null;
  const monitorNow = useMonitorCountdown(monitorNextCheckAt);
  const monitorRelative = monitorNextCheckAt ? formatMonitorEta(monitorNextCheckAt, monitorNow) : null;
  const monitorIsDueNow = monitorRelative === "due now";
  const monitorIsOverdue = Boolean(monitorRelative?.startsWith("overdue by "));
  const monitorPrimary = monitorNextCheckAt
    ? formatMonitorEtaLabel(monitorNextCheckAt, monitorNow)
    : monitorState?.status === "cleared"
      ? "Cleared"
      : "None";
  const monitorSecondary = monitorNextCheckAt
    ? monitorIsDueNow
      ? "checking momentarily…"
      : `${formatMonitorAbsolute(monitorNextCheckAt, {}, monitorNow)}${monitorIsOverdue ? " · fires on next tick" : monitorAttemptCount > 0 ? ` · Attempt ${monitorAttemptCount}` : ""}`
    : monitorState?.status === "cleared"
      ? [
          monitorLastTriggeredAt ? `last checked ${timeAgo(monitorLastTriggeredAt)}` : null,
          monitorAttemptCount > 0 ? `after attempt ${monitorAttemptCount}` : null,
        ].filter(Boolean).join(" · ")
      : null;
  const monitorTrigger = (
    <TooltipProvider>
      <Tooltip open={monitorDetailsOpen} onOpenChange={setMonitorDetailsOpen}>
      <TooltipTrigger asChild>
        <span
          className="inline-flex min-w-0 items-start gap-1.5"
          data-testid="monitor-row-trigger"
          onClick={() => setMonitorDetailsOpen(false)}
        >
      {monitorNextCheckAt ? (
            <Clock className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
      ) : null}
          <span className="flex min-w-0 flex-col items-start">
            <span className={cn("text-sm", monitorNextCheckAt ? "font-semibold text-foreground" : "text-muted-foreground")}>{monitorPrimary}</span>
            {monitorSecondary ? (
              <span className="text-xs text-muted-foreground">{monitorSecondary}</span>
            ) : null}
          </span>
        </span>
      </TooltipTrigger>
      {monitorNextCheckAt ? (
        <TooltipContent
          side="left"
          className="w-80 border border-border bg-popover p-0 text-popover-foreground shadow-md"
          onPointerDown={(event) => event.stopPropagation()}
        >
          <div className="flex items-center justify-between border-b border-border px-4 py-3">
            <span className="text-sm font-semibold">Monitor</span>
            {monitorAttemptCount > 0 ? <span className="text-xs text-muted-foreground">Attempt {monitorAttemptCount}</span> : null}
          </div>
          <div className="space-y-3 px-4 py-3 text-left">
            <div>
              <div className="text-xs text-muted-foreground">Next check</div>
              <div className="text-sm">{formatMonitorAbsoluteFull(monitorNextCheckAt)}</div>
              <div className="text-xs text-muted-foreground">{monitorRelative}</div>
            </div>
            <div>
              <div className="text-xs text-muted-foreground">Watching</div>
              <div className="text-sm">{monitorServiceName ?? "—"}</div>
            </div>
            <div>
              <div className="text-xs text-muted-foreground">Notes</div>
              <div className="whitespace-normal text-sm">{monitorNotes ?? "—"}</div>
            </div>
            <div>
              <div className="text-xs text-muted-foreground">Last triggered</div>
              <div className="text-sm">{monitorLastTriggeredAt ? formatMonitorAbsoluteFull(monitorLastTriggeredAt) : "— not yet triggered"}</div>
            </div>
          </div>
          <div className="flex gap-2 border-t border-border px-4 py-3">
            {onCheckMonitorNow ? (
              <Button type="button" size="sm" variant="outline" disabled={checkingMonitorNow} onClick={() => { setMonitorDetailsOpen(false); onCheckMonitorNow(); }}>
                {checkingMonitorNow ? "Checking…" : "Check now"}
              </Button>
            ) : null}
            <Button type="button" size="sm" variant="outline" onClick={() => { setMonitorDetailsOpen(false); setMonitorOpen(true); }}>Edit</Button>
            <Button type="button" size="sm" variant="outline" onClick={() => { setMonitorDetailsOpen(false); clearMonitor(); }}>Clear</Button>
          </div>
        </TooltipContent>
      ) : null}
      </Tooltip>
    </TooltipProvider>
  );

  const scheduledRetry = issue.scheduledRetry ?? null;
  const retryNow = useRetryNowMutation(issue.id);
  const showScheduledRetryRow = scheduledRetry && scheduledRetry.status === "scheduled_retry";
  const scheduledRetryDueAtIso = scheduledRetry?.scheduledRetryAt
    ? new Date(scheduledRetry.scheduledRetryAt).toISOString()
    : null;
  const scheduledRetryRelative = scheduledRetryDueAtIso
    ? formatMonitorOffset(scheduledRetryDueAtIso)
    : null;
  const scheduledRetryAbsolute = scheduledRetry?.scheduledRetryAt
    ? formatDateTime(scheduledRetry.scheduledRetryAt)
    : null;
  const scheduledRetryShortDate = scheduledRetry?.scheduledRetryAt
    ? formatDate(new Date(scheduledRetry.scheduledRetryAt))
    : null;
  const scheduledRetryReasonLabel = formatRetryReason(scheduledRetry?.scheduledRetryReason);
  const scheduledRetryAttempt =
    typeof scheduledRetry?.scheduledRetryAttempt === "number"
    && Number.isFinite(scheduledRetry.scheduledRetryAttempt)
    && scheduledRetry.scheduledRetryAttempt > 0
      ? scheduledRetry.scheduledRetryAttempt
      : null;
  const scheduledRetryIsContinuation =
    scheduledRetry?.scheduledRetryReason === "max_turns_continuation";
  const scheduledRetryRelativeLabel = (() => {
    if (!scheduledRetryRelative) return "Pending schedule";
    const action = scheduledRetryIsContinuation ? "Continuation" : "Retry";
    if (scheduledRetryRelative === "now") return `${action} due now`;
    return `${action} ${scheduledRetryRelative}`;
  })();
  const scheduledRetryRetryNowSuccess = retryNow.isSuccess
    && (retryNow.data?.outcome === "promoted" || retryNow.data?.outcome === "already_promoted");
  const scheduledRetryAttemptBadge = scheduledRetryAttempt !== null ? (
    <span className="whitespace-nowrap shrink-0 text-xs text-muted-foreground">Attempt {scheduledRetryAttempt}</span>
  ) : null;
  const scheduledRetryTrigger = (
    <span className="inline-flex min-w-0 items-center gap-1.5">
      <RotateCcw className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
      <span
        className="min-w-0 truncate text-sm text-foreground"
        title={scheduledRetryAbsolute ?? undefined}
      >
        {scheduledRetryRelativeLabel}
      </span>
      {scheduledRetryShortDate ? (
        <span className="shrink-0 text-xs text-muted-foreground" title={scheduledRetryAbsolute ?? undefined}>
          {scheduledRetryShortDate}
        </span>
      ) : null}
    </span>
  );
  const scheduledRetryContent = scheduledRetry ? (
    <div className="flex w-full flex-col gap-2 p-2 text-xs">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-foreground">
          {scheduledRetryIsContinuation ? "Scheduled continuation" : "Scheduled retry"}
        </span>
        {scheduledRetryAttempt !== null ? (
          <span className="text-xs text-muted-foreground">
            Attempt {scheduledRetryAttempt}
          </span>
        ) : null}
      </div>
      <dl className="grid grid-cols-(--gtc-15) gap-y-1">
        {scheduledRetryReasonLabel ? (
          <>
            <dt className="text-muted-foreground">Reason</dt>
            <dd className="text-foreground">{scheduledRetryReasonLabel}</dd>
          </>
        ) : null}
        {scheduledRetryAbsolute ? (
          <>
            <dt className="text-muted-foreground">Next attempt</dt>
            <dd className="text-foreground">
              {scheduledRetryAbsolute}
              {scheduledRetryRelative ? (
                <span className="ml-1 text-muted-foreground">· {scheduledRetryRelative}</span>
              ) : null}
            </dd>
          </>
        ) : null}
        {scheduledRetry.retryOfRunId ? (
          <>
            <dt className="text-muted-foreground">Replaces run</dt>
            <dd className="text-foreground">
              <Link
                to={`/agents/${scheduledRetry.agentId}/runs/${scheduledRetry.retryOfRunId}`}
                className="font-mono text-foreground hover:underline"
              >
                {scheduledRetry.retryOfRunId.slice(0, 8)}
              </Link>
            </dd>
          </>
        ) : null}
        {scheduledRetry.agentName ? (
          <>
            <dt className="text-muted-foreground">Agent</dt>
            <dd className="text-foreground">
              <Link
                to={`/agents/${scheduledRetry.agentId}`}
                className="text-foreground hover:underline"
              >
                {scheduledRetry.agentName}
              </Link>
            </dd>
          </>
        ) : null}
        {scheduledRetry.error ? (
          <>
            <dt className="text-muted-foreground">Last error</dt>
            <dd className="text-foreground break-words">{scheduledRetry.error}</dd>
          </>
        ) : null}
      </dl>
      <RetryErrorBand
        error={retryNow.lastError}
        onRetry={() => {
          retryNow.reset();
          retryNow.mutate();
        }}
      />
      <Separator className="my-1" />
      <div className="flex items-center justify-between gap-2">
        <Button
          type="button"
          size="sm"
          variant="default"
          onClick={() => retryNow.mutate()}
          disabled={retryNow.isPending || scheduledRetryRetryNowSuccess}
          data-testid="issue-scheduled-retry-properties-retry-now"
        >
          {retryNow.isPending ? (
            <span className="inline-flex items-center gap-1.5">
              <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
              Retrying…
            </span>
          ) : scheduledRetryRetryNowSuccess ? (
            <span className="inline-flex items-center gap-1.5">
              <CheckCircle2 className="h-3.5 w-3.5" aria-hidden="true" />
              {retryNow.data?.outcome === "already_promoted" ? "Already promoted" : "Promoted"}
            </span>
          ) : (
            <span className="inline-flex items-center gap-1.5">
              <RotateCcw className="h-3.5 w-3.5" aria-hidden="true" />
              Retry now
            </span>
          )}
        </Button>
        <span className="text-right text-xs text-muted-foreground">
          {retryNow.isPending
            ? "Promoting scheduled retry"
            : scheduledRetryRetryNowSuccess
              ? retryNow.data?.outcome === "already_promoted"
                ? "Already promoted — run starting"
                : "Promoted — run starting"
              : retryNow.data?.outcome === "waiting" && retryNow.data.scheduledRetry?.runId === scheduledRetry.runId
                ? retryNow.data.message
                : scheduledRetryIsContinuation
                  ? "Pulls continuation forward immediately"
                  : "Pulls retry forward immediately"}
        </span>
      </div>
    </div>
  ) : null;
  const monitorContent = (
    <div className="flex w-full flex-col gap-2">
      <div className="flex flex-col gap-2 md:flex-row">
        <input
          type="datetime-local"
          className="rounded-md border border-border bg-transparent px-2 py-1 text-xs"
          value={monitorAtInput}
          onChange={(e) => setMonitorAtInput(e.target.value)}
        />
        <input
          type="text"
          className="min-w-0 flex-1 rounded-md border border-border bg-transparent px-2 py-1 text-xs"
          placeholder="What should the agent re-check?"
          value={monitorNotesInput}
          onChange={(e) => setMonitorNotesInput(e.target.value)}
        />
      </div>
      <div className="flex flex-col gap-2 md:flex-row">
        <input
          type="text"
          className="min-w-0 flex-1 rounded-md border border-border bg-transparent px-2 py-1 text-xs"
          placeholder="External service"
          value={monitorServiceInput}
          onChange={(e) => setMonitorServiceInput(e.target.value)}
        />
        <div className="flex items-center gap-2">
          <button
            type="button"
            className="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground disabled:opacity-50"
            disabled={!monitorAtInput}
            onClick={saveMonitor}
          >
            Schedule
          </button>
          {executionPolicy?.monitor ? (
            <button
              type="button"
              className="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
              onClick={clearMonitor}
            >
              Clear
            </button>
          ) : null}
        </div>
      </div>
    </div>
  );

  const selectedIssueLabels = useMemo(() => {
    const selectedIds = issue.labelIds ?? [];
    if (selectedIds.length === 0) return issue.labels ?? [];

    const labelById = new Map<string, IssueLabel>();
    for (const label of labels ?? []) labelById.set(label.id, label);
    for (const label of issue.labels ?? []) labelById.set(label.id, label);

    return selectedIds
      .map((id) => labelById.get(id))
      .filter((label): label is IssueLabel => Boolean(label));
  }, [issue.labelIds, issue.labels, labels]);

  const labelsTrigger = selectedIssueLabels.length > 0 ? (
    <div className="flex min-w-0 flex-col items-start gap-1">
      {selectedIssueLabels.slice(0, 3).map((label) => (
        <PropertyChip
          key={label.id}
          className="border-0"
          style={{
            backgroundColor: `${label.color}22`,
            color: label.color,
          }}
        >
          {label.name}
        </PropertyChip>
      ))}
      {selectedIssueLabels.length > 3 && (
        <Badge variant="outline" className="border-border text-muted-foreground">
          +{selectedIssueLabels.length - 3} more
        </Badge>
      )}
    </div>
  ) : (
    <span className="text-sm text-muted-foreground">None</span>
  );
  const labelsContent = (
    <>
      <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 labels..."
        value={labelSearch}
        onChange={(e) => setLabelSearch(e.target.value)}
        autoFocus={!inline}
      />
      <div className="max-h-44 overflow-y-auto overscroll-contain space-y-0.5">
        {(labels ?? [])
          .filter((label) => {
            if (!labelSearch.trim()) return true;
            return label.name.toLowerCase().includes(labelSearch.toLowerCase());
          })
          .map((label) => {
            const selected = (issue.labelIds ?? []).includes(label.id);
            return (
              <button
                key={label.id}
                className={cn(
                  "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-left",
                  selected && "bg-accent"
                )}
                onClick={() => toggleLabel(label.id)}
              >
                <span className="h-2.5 w-2.5 rounded-full shrink-0" style={{ backgroundColor: label.color }} />
                <span className="truncate flex-1">{label.name}</span>
                {selected && <Check className="h-3.5 w-3.5 shrink-0 text-foreground" aria-hidden="true" />}
              </button>
            );
          })}
      </div>
      <div className="mt-2 border-t border-border pt-2 space-y-1">
        <div className="flex items-center gap-1">
          <input
            className="h-7 w-7 p-0 rounded bg-transparent"
            type="color"
            value={newLabelColor}
            onChange={(e) => setNewLabelColor(e.target.value)}
          />
          <input
            className="flex-1 px-2 py-1.5 text-xs bg-transparent outline-none rounded placeholder:text-muted-foreground/50"
            placeholder="New label"
            value={newLabelName}
            onChange={(e) => setNewLabelName(e.target.value)}
          />
        </div>
        <button
          className="flex items-center justify-center gap-1.5 w-full px-2 py-1.5 text-xs rounded border border-border hover:bg-accent/50 disabled:opacity-50"
          disabled={!newLabelName.trim() || createLabel.isPending}
          onClick={() =>
            createLabel.mutate({
              name: newLabelName.trim(),
              color: newLabelColor,
            })
          }
        >
          <Plus className="h-3 w-3" />
          {createLabel.isPending ? "Creating…" : "Create label"}
        </button>
      </div>
    </>
  );

  const assigneeTrigger = assignee ? (
    <AgentIdentity agent={assignee} size="sm" />
  ) : assigneeUserLabel ? (
    <>
      <User className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
      <span className="min-w-0 truncate text-sm" title={assigneeUserLabel}>{assigneeUserLabel}</span>
    </>
  ) : (
    <span className="text-sm text-muted-foreground">Unassigned</span>
  );

  // Grouped picker options (design surface 2): a board-users section and an
  // agents section, plus the "No assignee" reset. Agents stay recency-sorted
  // within their group via `sortedAgents`.
  const userAssigneeOptions = [
    ...(currentUserId
      ? [{
          kind: "user" as const,
          value: `user:${currentUserId}`,
          userId: currentUserId,
          label: "Assign to me",
          searchText: userLabel(currentUserId) ?? "",
        }]
      : []),
    ...(issue.createdByUserId && issue.createdByUserId !== currentUserId
      ? [{
          kind: "user" as const,
          value: `user:${issue.createdByUserId}`,
          userId: issue.createdByUserId,
          label: creatorUserLabel ? `Assign to ${creatorUserLabel}` : "Assign to requester",
          searchText: creatorUserLabel ?? "requester",
        }]
      : []),
    ...otherUserOptions.map((option) => ({
      kind: "user" as const,
      value: option.id,
      userId: option.id.slice("user:".length),
      label: option.label,
      searchText: option.searchText ?? "",
    })),
  ];
  const agentAssigneeOptions = sortedAgents.map((agent) => ({
    kind: "agent" as const,
    value: `agent:${agent.id}`,
    agent,
    label: agent.name,
    searchText: `${agent.name} ${agent.role} ${agent.title ?? ""}`,
  }));

  const matchesAssigneeSearch = (label: string, searchText: string) => {
    if (!assigneeSearch.trim()) return true;
    return `${label} ${searchText}`.toLowerCase().includes(assigneeSearch.toLowerCase());
  };

  type AssigneeOptionLike =
    | { kind: "none"; value: string; label: string; searchText: string }
    | { kind: "user"; value: string; userId: string; label: string; searchText: string }
    | { kind: "agent"; value: string; agent: (typeof agentAssigneeOptions)[number]["agent"]; label: string; searchText: string };

  const renderAssigneeOption = (option: AssigneeOptionLike) => (
    <button
      key={option.value || "__none__"}
      className={cn(
        "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-left",
        option.value === selectedAssigneeValue && "bg-accent",
      )}
      onClick={() => {
        if (option.kind === "agent") {
          selectAssignee({ assigneeAgentId: option.agent.id, assigneeUserId: null }, option.label, () =>
            trackRecentAssignee(option.agent.id, companyId ?? undefined),
          );
        } else if (option.kind === "user") {
          selectAssignee({ assigneeAgentId: null, assigneeUserId: option.userId }, option.label, () =>
            trackRecentAssigneeUser(option.userId, companyId ?? undefined),
          );
        } else {
          selectAssignee({ assigneeAgentId: null, assigneeUserId: null }, option.label);
        }
      }}
    >
      {option.kind === "agent" ? (
        <AgentAvatar agent={option.agent} size={16} className="shrink-0 h-3 w-3 text-muted-foreground"/>
      ) : option.kind === "user" ? (
        <User className="h-3 w-3 shrink-0 text-muted-foreground" />
      ) : null}
      <span className="min-w-0 flex-1 truncate">{option.label}</span>
      {option.value === selectedAssigneeValue ? (
        <Check className="ml-auto h-3.5 w-3.5 shrink-0 text-foreground" aria-hidden="true" />
      ) : null}
    </button>
  );

  const visibleUserOptions = userAssigneeOptions.filter((option) =>
    matchesAssigneeSearch(option.label, option.searchText),
  );
  const visibleAgentOptions = agentAssigneeOptions.filter((option) =>
    matchesAssigneeSearch(option.label, option.searchText),
  );
  const showNoAssigneeOption = matchesAssigneeSearch("No assignee", "");
  const sectionHeader = (text: string) => (
    <div className="px-2 pb-0.5 pt-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
      {text}
    </div>
  );

  const assigneeContent = pendingAssignee ? (
    <div className="space-y-2 p-1">
      <InterruptAssignConfirm
        copy={reassignInterruptCopy}
        to={{ agentId: pendingAssignee.assigneeAgentId, userId: pendingAssignee.assigneeUserId }}
        resolvers={handoffResolvers}
        onConfirm={() =>
          applyAssignee(
            { assigneeAgentId: pendingAssignee.assigneeAgentId, assigneeUserId: pendingAssignee.assigneeUserId },
            pendingAssignee.track,
          )
        }
        onCancel={() => setPendingAssignee(null)}
      />
    </div>
  ) : (
    <>
      {hasActiveRun ? (
        <div className="px-1 pt-1">
          <AssigneeRunningBanner copy={reassignInterruptCopy} />
        </div>
      ) : null}
      <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 assignees..."
        value={assigneeSearch}
        onChange={(e) => setAssigneeSearch(e.target.value)}
        autoFocus={!inline}
      />
      <div className="max-h-56 overflow-y-auto overscroll-contain">
        {showNoAssigneeOption
          ? renderAssigneeOption({ kind: "none", value: "", label: "No assignee", searchText: "" })
          : null}
        {visibleAgentOptions.length > 0 ? (
          <>
            {sectionHeader("Agents")}
            {visibleAgentOptions.map((option) => renderAssigneeOption(option))}
          </>
        ) : null}
        {visibleUserOptions.length > 0 ? (
          <>
            {sectionHeader("Board users")}
            {visibleUserOptions.map((option) => renderAssigneeOption(option))}
          </>
        ) : null}
        {!showNoAssigneeOption && visibleAgentOptions.length === 0 && visibleUserOptions.length === 0 ? (
          <div className="px-2 py-2 text-xs text-muted-foreground">No matches.</div>
        ) : null}
      </div>
    </>
  );

  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>
        )}
        {otherUserOptions
          .filter((option) => {
            if (!search.trim()) return true;
            return `${option.label} ${option.searchText ?? ""}`.toLowerCase().includes(search.toLowerCase());
          })
          .map((option) => (
            <button
              key={`${stageType}:${option.id}`}
              className={cn(
                "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
                values.includes(option.id) && "bg-accent",
              )}
              onClick={() => toggleExecutionParticipant(stageType, option.id)}
            >
              <User className="h-3 w-3 shrink-0 text-muted-foreground" />
              {option.label}
            </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)}
              >
                <AgentAvatar agent={agent} size={16} className="shrink-0 h-3 w-3 text-muted-foreground"/>
                {agent.name}
              </button>
            );
          })}
      </div>
    </>
  );

  const projectTrigger = issue.projectId ? (
    <>
      <ProjectTile
        color={issueProject?.color ?? null}
        icon={issueProject?.icon ?? null}
        size="sm"
      />
      <span className="text-sm truncate min-w-0" title={projectName(issue.projectId)}>{projectName(issue.projectId)}</span>
    </>
  ) : (
    <span className="text-sm text-muted-foreground">None</span>
  );
  const projectPickerOptions = orderItemsBySelectedAndRecent(
    [
      { id: "", kind: "none" as const, name: "No project", color: null as string | null },
      ...orderedProjects.map((project) => ({
        id: project.id,
        kind: "project" as const,
        project,
        name: project.name,
        color: project.color ?? null,
      })),
    ],
    issue.projectId ?? "",
    recentProjectIds,
  );

  const projectContent = (
    <>
      <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 projects..."
        value={projectSearch}
        onChange={(e) => setProjectSearch(e.target.value)}
        autoFocus={!inline}
      />
      <div className="max-h-48 overflow-y-auto overscroll-contain">
        {projectPickerOptions
          .filter((option) => {
            if (!projectSearch.trim()) return true;
            const q = projectSearch.toLowerCase();
            return option.name.toLowerCase().includes(q);
          })
          .map((option) => (
            <button
              key={option.id || "__none__"}
              className={cn(
                "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 whitespace-nowrap",
                option.id === (issue.projectId ?? "") && "bg-accent",
              )}
              onClick={() => {
                onUpdate({ projectId: option.kind === "project" ? option.project.id : null });
                setProjectOpen(false);
              }}
            >
              {option.kind === "project" ? (
                <ProjectTile
                  color={option.project.color ?? null}
                  icon={option.project.icon ?? null}
                  size="xs"
                />
              ) : null}
              {option.name}
            </button>
          ))}
      </div>
    </>
  );

  const blockedByIds = issue.blockedBy?.map((relation) => relation.id) ?? [];
  const blockedByRelations = issue.blockedBy ?? [];
  const visibleBlockedByRelations = blockedByExpanded
    ? blockedByRelations
    : blockedByRelations.slice(0, ISSUE_PROPERTY_RELATION_PREVIEW_COUNT);
  const hiddenBlockedByCount = blockedByRelations.length - visibleBlockedByRelations.length;
  const visibleChildIssues = subTasksExpanded
    ? childIssues
    : childIssues.slice(0, ISSUE_PROPERTY_RELATION_PREVIEW_COUNT);
  const hiddenChildIssueCount = childIssues.length - visibleChildIssues.length;
  const blockingIssues = issue.blocks ?? [];
  const visibleBlockingIssues = blockingExpanded
    ? blockingIssues
    : blockingIssues.slice(0, ISSUE_PROPERTY_RELATION_PREVIEW_COUNT);
  const hiddenBlockingIssueCount = blockingIssues.length - visibleBlockingIssues.length;
  const blockedByTrigger = blockedByRelations.length > 0 ? (
    <div className="flex min-w-0 flex-col items-start gap-1">
      {blockedByRelations.slice(0, 2).map((relation) => (
        <IssueReferencePill
          key={relation.id}
          issue={relation}
          onRemove={(id) => onUpdate({ blockedByIssueIds: blockedByIds.filter((candidate) => candidate !== id) })}
        />
      ))}
      {blockedByRelations.length > 2 ? (
        <Badge asChild variant="outline" className="border-border text-muted-foreground hover:bg-accent/50">
          <button type="button" onClick={() => setBlockedByOpen(true)}>+{blockedByRelations.length - 2} more</button>
        </Badge>
      ) : null}
    </div>
  ) : (
    <span className="text-sm text-muted-foreground">None</span>
  );
  const subtasksTrigger = childIssues.length > 0 ? (
    <div className="flex min-w-0 flex-col items-start gap-1">
      {childIssues.slice(0, 2).map((child) => (
        <IssueReferencePill variant="property" key={child.id} issue={child} className="min-w-0 max-w-full" />
      ))}
      {childIssues.length > 2 ? (
        <Badge asChild variant="outline" className="border-border text-muted-foreground hover:bg-accent/50">
          <button type="button" onClick={() => setSubtasksOpen(true)}>+{childIssues.length - 2} more</button>
        </Badge>
      ) : null}
    </div>
  ) : (
    <span className="text-sm text-muted-foreground">None</span>
  );
  const visibleRelatedTasks = relatedTasksExpanded
    ? relatedTasks
    : relatedTasks.slice(0, ISSUE_PROPERTY_RELATION_PREVIEW_COUNT);
  const hiddenRelatedTaskCount = relatedTasks.length - visibleRelatedTasks.length;
  const descendantIssueIds = useMemo(() => {
    if (!allIssues?.length) return new Set<string>();
    const childrenByParentId = new Map<string, string[]>();
    for (const candidate of allIssues) {
      if (!candidate.parentId) continue;
      const children = childrenByParentId.get(candidate.parentId) ?? [];
      children.push(candidate.id);
      childrenByParentId.set(candidate.parentId, children);
    }

    const descendants = new Set<string>();
    const stack = [...(childrenByParentId.get(issue.id) ?? [])];
    while (stack.length > 0) {
      const candidateId = stack.pop();
      if (!candidateId || descendants.has(candidateId)) continue;
      descendants.add(candidateId);
      stack.push(...(childrenByParentId.get(candidateId) ?? []));
    }
    return descendants;
  }, [allIssues, issue.id]);
  const currentParentIssue = useMemo(() => {
    if (!issue.parentId) return null;
    return allIssues?.find((candidate) => candidate.id === issue.parentId) ?? null;
  }, [allIssues, issue.parentId]);
  const parentAncestor = issue.ancestors?.find((ancestor) => ancestor.id === issue.parentId);
  const parentIdentifier = parentAncestor?.identifier ?? currentParentIssue?.identifier;
  const parentTitle = parentAncestor?.title ?? currentParentIssue?.title ?? issue.parentId?.slice(0, 8);
  const parentTrigger = issue.parentId ? (
    <IssueReferencePill
      variant="property"
      issue={isLockedIssueStub(parentAncestor) ? parentAncestor : {
        id: issue.parentId,
        identifier: parentIdentifier ?? issue.parentId,
        title: parentTitle ?? "Parent task",
        status: parentAncestor?.status ?? currentParentIssue?.status,
      }}
      className="min-w-0 max-w-full"
    />
  ) : (
    <span className="text-sm text-muted-foreground">None</span>
  );
  const parentSearchActive = normalizedParentSearch.length > 0;
  // When the user types, search on the server. The default list caps at 500 rows
  // and sorts priority-first, so a medium-priority or low-priority match past that
  // cap never enters the client list. A server query with `q` still finds it.
  const parentSourceIssues = parentSearchActive ? searchedParentIssues : allIssues;
  const parentOptions = (parentSourceIssues ?? [])
    .filter((candidate) => candidate.id !== issue.id)
    .filter((candidate) => !descendantIssueIds.has(candidate.id))
    .sort((a, b) => {
      const aLabel = `${a.identifier ?? ""} ${a.title}`.trim();
      const bLabel = `${b.identifier ?? ""} ${b.title}`.trim();
      return aLabel.localeCompare(bLabel);
    });
  const parentOptionsLoading = parentOpen && (
    parentSearchActive ? isFetchingSearchedParentIssues : isFetchingIssuePickerIssues
  );
  const parentContent = (
    <>
      <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 tasks..."
        value={parentSearch}
        onChange={(e) => setParentSearch(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",
            !issue.parentId && "bg-accent",
          )}
          onClick={() => {
            onUpdate({ parentId: null });
            setParentOpen(false);
          }}
        >
          No parent
        </button>
        {parentOptions.map((candidate) => (
          <button
            key={candidate.id}
            className={cn(
              "flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs rounded hover:bg-accent/50",
              candidate.id === issue.parentId && "bg-accent",
            )}
            onClick={() => {
              onUpdate({ parentId: candidate.id });
              setParentOpen(false);
            }}
          >
            <StatusIcon status={candidate.status} className="h-3 w-3" />
            <span className="truncate">
              {candidate.identifier ? `${candidate.identifier} ` : ""}
              {candidate.title}
            </span>
          </button>
        ))}
        {parentOptionsLoading ? (
          <div className="px-2 py-2 text-xs text-muted-foreground">Searching tasks...</div>
        ) : parentOptions.length === 0 ? (
          <div className="px-2 py-2 text-xs text-muted-foreground">No matching tasks.</div>
        ) : null}
      </div>
    </>
  );
  const blockerSearchActive = normalizedBlockedBySearch.length > 0;
  const blockerSourceIssues = blockerSearchActive
    ? searchedBlockedByIssues
    : streamlinedPropertiesEnabled
      ? [...(issue.blockedBy ?? []), ...(allIssues ?? [])]
      : allIssues;
  const blockerOptions = streamlinedPropertiesEnabled
    ? Array.from(
        new Map(
          (blockerSourceIssues ?? [])
            .filter((candidate) => candidate.id !== issue.id)
            .map((candidate) => [candidate.id, candidate]),
        ).values(),
      )
    : (blockerSourceIssues ?? []).filter((candidate) => candidate.id !== issue.id);
  if (!blockerSearchActive) {
    blockerOptions.sort((a, b) => {
      const aLabel = `${a.identifier ?? ""} ${a.title}`.trim();
      const bLabel = `${b.identifier ?? ""} ${b.title}`.trim();
      return aLabel.localeCompare(bLabel);
    });
  }
  const blockerOptionsLoading = blockedByOpen && (
    blockerSearchActive ? isFetchingSearchedBlockedByIssues : isFetchingIssuePickerIssues
  );

  const toggleBlockedBy = (blockedByIssueId: string) => {
    const nextBlockedByIds = blockedByIds.includes(blockedByIssueId)
      ? blockedByIds.filter((candidate) => candidate !== blockedByIssueId)
      : [...blockedByIds, blockedByIssueId];
    onUpdate({ blockedByIssueIds: nextBlockedByIds });
    setBlockedByOpen(false);
    setBlockedBySearch("");
  };
  const removeBlockedBy = (blockedByIssueId: string) => {
    onUpdate({ blockedByIssueIds: blockedByIds.filter((candidate) => candidate !== blockedByIssueId) });
  };
  const blockedByContent = (
    <>
      <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 tasks..."
        value={blockedBySearch}
        onChange={(e) => setBlockedBySearch(e.target.value)}
        autoFocus={!inline}
        aria-label="Search tasks to add as blockers"
      />
      <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",
            blockedByIds.length === 0 && "bg-accent",
          )}
          onClick={() => {
            onUpdate({ blockedByIssueIds: [] });
            setBlockedByOpen(false);
            setBlockedBySearch("");
          }}
        >
          No blockers
        </button>
        {blockerOptions.map((candidate) => {
          const selected = blockedByIds.includes(candidate.id);
          return (
            <button
              key={candidate.id}
              className={cn(
                "flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs rounded hover:bg-accent/50",
                selected && "bg-accent",
              )}
              onClick={() => toggleBlockedBy(candidate.id)}
            >
              <StatusIcon status={candidate.status} className="h-3 w-3" />
              <span className="truncate">
                {candidate.identifier ? `${candidate.identifier} ` : ""}
                {candidate.title}
              </span>
              {selected && <Check className="ml-auto h-3.5 w-3.5 shrink-0 text-foreground" aria-hidden="true" />}
            </button>
          );
        })}
        {blockerOptionsLoading ? (
          <div className="px-2 py-2 text-xs text-muted-foreground">Searching tasks...</div>
        ) : blockerOptions.length === 0 ? (
          <div className="px-2 py-2 text-xs text-muted-foreground">No matching tasks.</div>
        ) : null}
      </div>
    </>
  );
  const renderAddBlockedByButton = (onClick?: () => void) => (
    <button
      type="button"
      className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
      onClick={onClick}
    >
      <Plus className="h-3 w-3" />
      Add blocker
    </button>
  );
  const subtasksContent = (
    <>
      <div className="max-h-48 overflow-y-auto overscroll-contain">
        {childIssues.length > 0 ? childIssues.map((child) => (
          <Link
            key={child.id}
            to={`/issues/${child.identifier ?? child.id}`}
            state={issueLinkState}
            className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50"
            onClick={() => setSubtasksOpen(false)}
          >
            <StatusIcon status={child.status} className="h-3 w-3" />
            <span className="min-w-0 truncate">
              {child.identifier ? `${child.identifier} ` : ""}
              {child.title}
            </span>
          </Link>
        )) : (
          <div className="px-2 py-2 text-xs text-muted-foreground">No subtasks yet.</div>
        )}
      </div>
      {onAddSubIssue ? (
        <div className="mt-2 border-t border-border pt-2">
          <button
            type="button"
            className="flex w-full items-center justify-center gap-1.5 rounded border border-border px-2 py-1.5 text-xs hover:bg-accent/50"
            onClick={() => {
              setSubtasksOpen(false);
              onAddSubIssue();
            }}
          >
            <Plus className="h-3 w-3" />
            Add subtask
          </button>
        </div>
      ) : null}
    </>
  );

  const propertiesBody = (
    <div className={cn(streamlinedPropertiesEnabled && "task-detail-properties pl-4")}>
      <PropertySection
        title={streamlinedPropertiesEnabled ? "Work" : "Triage"}
        first
        streamlined={streamlinedPropertiesEnabled}
      >
        <PropertyRow label="Status">
          <StatusIcon
            status={issue.status}
            externalConversationState={issue.externalConversationState}
            glyphContainerClassName="inline-flex size-6 shrink-0 items-center justify-center"
            blockerAttention={issue.blockerAttention}
            onChange={(status) => onUpdate({ status })}
            showLabel
          />
        </PropertyRow>

        {/* PAP-411: priority UI is hidden behind SHOW_TASK_PRIORITY_UI. Revive by flipping the flag. */}
        {SHOW_TASK_PRIORITY_UI && (
          <PropertyRow label="Priority">
            <PriorityIcon
              priority={issue.priority}
              onChange={(priority) => onUpdate({ priority })}
              showLabel
            />
          </PropertyRow>
        )}

        <PropertyPicker
          inline={inline}
          label="Assignee"
          open={assigneeOpen}
          onOpenChange={(open) => { setAssigneeOpen(open); if (!open) { setAssigneeSearch(""); setPendingAssignee(null); } }}
          triggerContent={assigneeTrigger}
          popoverClassName="w-52"
          extra={issue.assigneeAgentId ? (
            <Link
              to={`/agents/${issue.assigneeAgentId}`}
              className="inline-flex items-center justify-center h-5 w-5 rounded hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground"
              onClick={(e) => e.stopPropagation()}
            >
              <ArrowUpRight className="h-3 w-3" />
            </Link>
          ) : undefined}
        >
          {assigneeContent}
        </PropertyPicker>

        {showAssigneeAdapterOptions ? (
          <PropertyPicker
            inline={inline}
            label="Model"
            open={assigneeOptionsOpen}
            onOpenChange={setAssigneeOptionsOpen}
            triggerContent={assigneeOptionsTrigger}
            triggerClassName="min-w-0 max-w-full"
            popoverClassName={cn("max-w-full", inline ? "w-full" : "w-72")}
          >
            {assigneeOptionsContent}
          </PropertyPicker>
        ) : null}

        <PropertyPicker
          inline={inline}
          label="Project"
          open={projectOpen}
          onOpenChange={(open) => { setProjectOpen(open); if (!open) setProjectSearch(""); }}
          triggerContent={projectTrigger}
          triggerClassName="min-w-0 max-w-full"
          popoverClassName="w-fit min-w-(--sz-11rem)"
          extra={issue.projectId ? (
            <Link
              to={projectLink(issue.projectId)!}
              className="inline-flex items-center justify-center h-5 w-5 rounded hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground"
              onClick={(e) => e.stopPropagation()}
            >
              <ArrowUpRight className="h-3 w-3" />
            </Link>
          ) : undefined}
        >
          {projectContent}
        </PropertyPicker>

        <PropertyPicker
          inline={inline}
          label="Labels"
          open={labelsOpen}
          onOpenChange={(open) => { setLabelsOpen(open); if (!open) setLabelSearch(""); }}
          triggerContent={labelsTrigger}
          triggerClassName="min-w-0 max-w-full"
          popoverClassName="w-64"
          extra={labelsExtra}
          stacked
        >
          {labelsContent}
        </PropertyPicker>
      </PropertySection>

      <PropertySection title="Relationships" streamlined={streamlinedPropertiesEnabled}>
        <PropertyPicker
          inline={inline}
          label="Parent"
          open={parentOpen}
          onOpenChange={(open) => {
            setParentOpen(open);
            if (!open) setParentSearch("");
          }}
          triggerContent={parentTrigger}
          triggerClassName="min-w-0 max-w-full"
          popoverClassName="w-72"
          separateTrigger={!!issue.parentId}
        >
          {parentContent}
        </PropertyPicker>

        {streamlinedPropertiesEnabled ? (
          <PropertyPicker
            inline={inline}
            label="Blocked by"
            open={blockedByOpen}
            onOpenChange={(open) => {
              setBlockedByOpen(open);
              if (!open) setBlockedBySearch("");
            }}
            separateTrigger={blockedByRelations.length > 0}
            triggerContent={blockedByTrigger}
            triggerClassName="min-w-0 max-w-full"
            popoverClassName="w-72"
            stacked
          >
            {blockedByContent}
          </PropertyPicker>
        ) : inline ? (
          <div>
            <PropertyRow label="Blocked by" wrap>
              {visibleBlockedByRelations.map((relation) => (
                <RemovableIssueReferencePill
                  key={relation.id}
                  issue={relation}
                  onRemove={removeBlockedBy}
                  isMobile={isMobile}
                />
              ))}
              <ExpandRelationListButton
                hiddenCount={hiddenBlockedByCount}
                expanded={blockedByExpanded}
                onClick={() => setBlockedByExpanded((expanded) => !expanded)}
              />
              {renderAddBlockedByButton(() => setBlockedByOpen((open) => !open))}
            </PropertyRow>
            {blockedByOpen ? (
              <div className="rounded-md border border-border bg-popover p-1 mb-2">
                {blockedByContent}
              </div>
            ) : null}
          </div>
        ) : (
          <PropertyRow label="Blocked by" wrap>
            {visibleBlockedByRelations.map((relation) => (
              <RemovableIssueReferencePill
                key={relation.id}
                issue={relation}
                onRemove={removeBlockedBy}
                isMobile={isMobile}
              />
            ))}
            <ExpandRelationListButton
              hiddenCount={hiddenBlockedByCount}
              expanded={blockedByExpanded}
              onClick={() => setBlockedByExpanded((expanded) => !expanded)}
            />
            <Popover
              open={blockedByOpen}
              onOpenChange={(open) => {
                setBlockedByOpen(open);
                if (!open) setBlockedBySearch("");
              }}
            >
              <PopoverTrigger asChild>{renderAddBlockedByButton()}</PopoverTrigger>
              <PopoverContent className="w-72 p-1" align="end" collisionPadding={16}>
                {blockedByContent}
              </PopoverContent>
            </Popover>
          </PropertyRow>
        )}

        <PropertyRow label="Blocking" wrap>
          {blockingIssues.length > 0 ? (
            <div className="flex flex-col items-start gap-1.5">
              {visibleBlockingIssues.map((relation) => (
                <IssueReferencePill variant="property" key={relation.id} issue={relation} />
              ))}
              <ExpandRelationListButton
                hiddenCount={hiddenBlockingIssueCount}
                expanded={blockingExpanded}
                onClick={() => setBlockingExpanded((expanded) => !expanded)}
              />
            </div>
          ) : (
            <span className="text-sm text-muted-foreground">None</span>
          )}
        </PropertyRow>

        {streamlinedPropertiesEnabled ? (
          <PropertyPicker
            inline={inline}
            label="Subtasks"
            open={subtasksOpen}
            onOpenChange={setSubtasksOpen}
            separateTrigger={childIssues.length > 0}
            triggerContent={subtasksTrigger}
            triggerClassName="min-w-0 max-w-full"
            popoverClassName="w-72"
            stacked
          >
            {subtasksContent}
          </PropertyPicker>
        ) : !taskChatShellEnabled ? (
          <PropertyRow label="Sub-tasks" wrap>
            <div className="flex flex-col items-start gap-1.5">
              {visibleChildIssues.map((child) => (
                <IssueReferencePill key={child.id} issue={child} />
              ))}
              <ExpandRelationListButton
                hiddenCount={hiddenChildIssueCount}
                expanded={subTasksExpanded}
                onClick={() => setSubTasksExpanded((expanded) => !expanded)}
              />
              {onAddSubIssue ? (
                <button
                  type="button"
                  className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
                  onClick={onAddSubIssue}
                >
                  <Plus className="h-3 w-3" />
                  Add sub-task
                </button>
              ) : null}
            </div>
          </PropertyRow>
        ) : null}

        {(!streamlinedPropertiesEnabled || !taskChatShellEnabled) && relatedTasks.length > 0 ? (
          <PropertyRow label={streamlinedPropertiesEnabled ? "Referenced" : "Related tasks"} wrap>
            <div className="flex flex-col items-start gap-1.5">
              {visibleRelatedTasks.map((related) => (
                <IssueReferencePill key={related.id} issue={related} />
              ))}
              <ExpandRelationListButton
                hiddenCount={hiddenRelatedTaskCount}
                expanded={relatedTasksExpanded}
                onClick={() => setRelatedTasksExpanded((expanded) => !expanded)}
              />
            </div>
          </PropertyRow>
        ) : null}

        {pullRequests.length > 0 || workProductsError ? (
          <PropertyRow label="Pull requests" wrap>
            <div className="flex min-w-0 flex-col gap-2">
              <IssuePullRequestLinks products={pullRequests} externalObjects={externalObjects?.map((entry) => entry.pill)} />
              {workProductsError ? (
                <span className="text-xs text-muted-foreground">
                  Couldn’t load pull requests. <button type="button" className="text-primary hover:underline" onClick={() => void refetchWorkProducts()}>Retry</button>
                </span>
              ) : null}
            </div>
          </PropertyRow>
        ) : null}
        <ExternalObjectRows
          externalObjects={remainingExternalObjects}
          externalObjectsLoading={externalObjectsLoading}
          externalObjectsError={externalObjectsError}
          onRetryExternalObjects={onRetryExternalObjects}
        />
      </PropertySection>

      <PropertySection title="Execution" streamlined={streamlinedPropertiesEnabled}>
        {/* Read-only: agents set the policy, the board does not. */}
        {reviewPolicyBadge ? (
          <PropertyRow label="Approvals">
            <PropertyChip title={reviewPolicyBadge.description}>
              <reviewPolicyBadge.Icon className="shrink-0 text-muted-foreground" aria-hidden />
              <span className="min-w-0 truncate">{reviewPolicyBadge.label}</span>
            </PropertyChip>
          </PropertyRow>
        ) : null}

        {!policyAvailable ? (
          <PropertyRow label="Execution policy" wrap>
            <span role="status" className="text-sm text-muted-foreground">Execution policy unavailable. Refresh to try again.</span>
          </PropertyRow>
        ) : (<>
        <PropertyPicker
          inline={inline}
          label="Reviewers"
          open={reviewersOpen}
          onOpenChange={(open) => { setReviewersOpen(open); if (!open) setReviewerSearch(""); }}
          triggerContent={reviewerTrigger}
          triggerClassName="min-w-0 max-w-full"
          popoverClassName="w-56"
        >
          {executionParticipantsContent(
            "review",
            reviewerValues,
            reviewerSearch,
            setReviewerSearch,
            () => updateExecutionPolicy([], approverValues),
          )}
        </PropertyPicker>
        {nextRunnableExecutionStage === "review" && reviewerValues.length > 0 ? runExecutionButton("review") : null}

        <PropertyPicker
          inline={inline}
          label="Approvers"
          open={approversOpen}
          onOpenChange={(open) => { setApproversOpen(open); if (!open) setApproverSearch(""); }}
          triggerContent={approverTrigger}
          triggerClassName="min-w-0 max-w-full"
          popoverClassName="w-56"
        >
          {executionParticipantsContent(
            "approval",
            approverValues,
            approverSearch,
            setApproverSearch,
            () => updateExecutionPolicy(reviewerValues, []),
          )}
        </PropertyPicker>
        {nextRunnableExecutionStage === "approval" && approverValues.length > 0 ? runExecutionButton("approval") : null}
        </>)}

        {currentExecutionLabel && (
          <PropertyRow label="Execution">
            <span className="text-sm truncate min-w-0" title={currentExecutionLabel}>{currentExecutionLabel}</span>
          </PropertyRow>
        )}

        {showScheduledRetryRow && scheduledRetry?.scheduledRetryReason === "workspace_busy" ? (
          <PropertyRow label="Workspace">
            <span className="text-sm text-muted-foreground">Waiting for workspace</span>
          </PropertyRow>
        ) : showScheduledRetryRow && scheduledRetryContent ? (
          <PropertyPicker
            inline={inline}
            label="Scheduled retry"
            open={scheduledRetryOpen}
            onOpenChange={setScheduledRetryOpen}
            triggerContent={scheduledRetryTrigger}
            triggerClassName="min-w-0 max-w-full"
            popoverClassName={cn("max-w-full", inline ? "w-full" : "w-80 sm:w-(--sz-32rem)")}
            extra={scheduledRetryAttemptBadge}
          >
            {scheduledRetryContent}
          </PropertyPicker>
        ) : null}

        {policyAvailable ? (
        <PropertyPicker
          inline={inline}
          label="Monitor"
          open={monitorOpen}
          onOpenChange={setMonitorOpen}
          triggerContent={monitorTrigger}
          triggerClassName="min-w-0 max-w-full"
          popoverClassName={cn("max-w-full", inline ? "w-full" : "w-80 sm:w-(--sz-32rem)")}
        >
          {monitorContent}
        </PropertyPicker>
        ) : null}

        <PropertyPicker
          inline={inline}
          label="Watchdog"
          open={watchdogOpen}
          onOpenChange={setWatchdogOpen}
          triggerContent={watchdogTrigger}
          triggerClassName="min-w-0 max-w-full"
          popoverClassName={cn("max-w-full", inline ? "w-full" : "w-80 sm:w-96")}
          extra={
            watchdogIssueRef ? (
              <Link
                to={`/issues/${watchdogIssueRef.id}`}
                className="inline-flex items-center justify-center h-5 w-5 rounded hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground"
                title="Open watchdog task"
                aria-label="Open watchdog task"
                onClick={(e) => e.stopPropagation()}
              >
                <ArrowUpRight className="h-3 w-3" />
              </Link>
            ) : undefined
          }
        >
          {watchdogContent}
        </PropertyPicker>
      </PropertySection>

      {workspacePickerEligible || hasWorkspaceRuntimeControls || issue.currentExecutionWorkspace?.branchName || issue.currentExecutionWorkspace?.cwd || issue.executionWorkspaceId ? (
        <PropertySection title="Workspace" streamlined={streamlinedPropertiesEnabled}>
          {workspacePickerEligible ? (
            <PropertyPicker
              inline={inline}
              label="Execution"
              open={workspacePickerOpen}
              onOpenChange={(open) => {
                setWorkspacePickerOpen(open);
                if (!open) {
                  setWorkspacePickerStep("mode");
                  setWorkspaceSearch("");
                }
              }}
              triggerContent={(
                <span className="truncate" title={workspaceTriggerTitle}>
                  {workspaceTriggerLabel}
                </span>
              )}
              triggerClassName="min-w-0 max-w-full"
              popoverClassName={cn("max-w-full", inline ? "w-full" : "w-72")}
            >
              {workspacePickerStep === "mode" ? (
                <>
                  <div className="space-y-0.5">
                    <button
                      type="button"
                      className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left hover:bg-accent/50"
                      onClick={() => saveWorkspaceSelection(null)}
                    >
                      <span className="min-w-0 flex-1">
                        <span className="block text-sm">Default</span>
                        <span className="block text-xs text-muted-foreground">Use the project workspace policy</span>
                      </span>
                      {activeWorkspacePickerMode === "default" ? <Check className="h-3.5 w-3.5 shrink-0" /> : null}
                    </button>
                    <button
                      type="button"
                      className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left hover:bg-accent/50"
                      onClick={() => saveWorkspaceSelection("isolated_workspace")}
                    >
                      <span className="min-w-0 flex-1">
                        <span className="block text-sm">New isolated workspace</span>
                        <span className="block text-xs text-muted-foreground">Create a fresh workspace on the next run</span>
                      </span>
                      {activeWorkspacePickerMode === "isolated" ? <Check className="h-3.5 w-3.5 shrink-0" /> : null}
                    </button>
                    <button
                      type="button"
                      className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left hover:bg-accent/50"
                      onClick={() => setWorkspacePickerStep("reuse")}
                    >
                      <span className="min-w-0 flex-1">
                        <span className="block text-sm">Reuse existing workspace…</span>
                        <span className="block text-xs text-muted-foreground">Pick a workspace to reuse</span>
                      </span>
                      {activeWorkspacePickerMode === "reuse" ? <Check className="h-3.5 w-3.5 shrink-0" /> : null}
                    </button>
                  </div>
                  <div className="mt-1 border-t border-border px-2 py-1.5 text-xs text-muted-foreground">
                    {issue.executionWorkspaceId ? "Current workspace stays active. Applies on the next run." : "Applies on the next run."}
                  </div>
                </>
              ) : (
                <>
                  <div className="border-b border-border pb-1">
                    <button
                      type="button"
                      className="inline-flex items-center gap-1 rounded px-1 py-1 text-xs text-muted-foreground hover:bg-accent/50 hover:text-foreground"
                      onClick={() => setWorkspacePickerStep("mode")}
                      aria-label="Back to workspace options"
                    >
                      <ChevronLeft className="h-3.5 w-3.5" />
                      Workspace mode
                    </button>
                    <input
                      className="block w-full bg-transparent px-2 py-1.5 text-xs outline-none placeholder:text-muted-foreground/50"
                      placeholder="Search workspaces..."
                      value={workspaceSearch}
                      onChange={(event) => setWorkspaceSearch(event.target.value)}
                      autoFocus={!inline}
                      aria-label="Search reusable workspaces"
                    />
                  </div>
                  <div className="max-h-48 overflow-y-auto overscroll-contain py-1">
                    {reusableExecutionWorkspacesLoading ? (
                      <div className="px-2 py-2 text-xs text-muted-foreground">Loading workspaces...</div>
                    ) : reusableExecutionWorkspacesError ? (
                      <div className="px-2 py-2 text-xs text-destructive">Failed to load workspaces.</div>
                    ) : reusableWorkspaceOptions.length === 0 ? (
                      <div className="px-2 py-2 text-xs text-muted-foreground">No matching workspaces.</div>
                    ) : reusableWorkspaceOptions.map((group) => (
                      <div key={group.id} className="py-1">
                        <div className="px-2 pb-1 text-xs font-medium text-muted-foreground">{group.label}</div>
                        {group.options.map((option) => (
                          <button
                            key={option.key}
                            type="button"
                            className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left hover:bg-accent/50"
                            onClick={() => saveWorkspaceSelection("reuse_existing", option.workspace)}
                          >
                            <span className="min-w-0 flex-1">
                              <span className="block truncate text-sm">{option.label}</span>
                              <span className="block truncate text-xs text-muted-foreground">{option.description}</span>
                            </span>
                            {issue.executionWorkspaceId === option.workspaceId ? <Check className="h-3.5 w-3.5 shrink-0" /> : null}
                          </button>
                        ))}
                      </div>
                    ))}
                  </div>
                  <div className="border-t border-border px-2 py-1.5 text-xs text-muted-foreground">
                    {issue.executionWorkspaceId ? "Current workspace stays active. Applies on the next run." : "Applies on the next run."}
                  </div>
                </>
              )}
            </PropertyPicker>
          ) : null}
          {showWorkspaceDetailLink && issue.executionWorkspaceId && (
            <PropertyRow label="Workspace">
              <Link
                to={`/execution-workspaces/${issue.executionWorkspaceId}`}
                className="text-sm text-primary hover:underline inline-flex min-w-0 items-center gap-1.5"
              >
                <HardDrive className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                View workspace
                <ArrowUpRight className="h-3 w-3 shrink-0" />
              </Link>
            </PropertyRow>
          )}
          {hasWorkspaceRuntimeControls && (
            <PropertyRow label="Service">
              <div className="flex min-w-0 flex-1 flex-col gap-1.5">
                <WorkspaceRuntimeQuickControls
                  sections={workspaceRuntimeSections}
                  isPending={controlWorkspaceRuntime.isPending}
                  pendingRequest={pendingWorkspaceRuntimeAction}
                  onAction={(request) => controlWorkspaceRuntime.mutate(request)}
                  square
                  align="start"
                  iconOnly
                />
                {runtimeActionMessage ? (
                  <span className="text-xs text-muted-foreground" role="status">{runtimeActionMessage}</span>
                ) : null}
                {runtimeActionErrorMessage ? (
                  <span className="text-xs text-destructive" role="alert">{runtimeActionErrorMessage}</span>
                ) : null}
              </div>
            </PropertyRow>
          )}
          {issue.currentExecutionWorkspace?.branchName && (
            <PropertyRow label="Branch">
              <TruncatedCopyable
                value={issue.currentExecutionWorkspace.branchName}
                icon={GitBranch}
              />
            </PropertyRow>
          )}
          {issue.currentExecutionWorkspace?.cwd && !hideHostPaths && (
            <PropertyRow label="Folder">
              <TruncatedCopyable
                value={issue.currentExecutionWorkspace.cwd}
                icon={FolderOpen}
              />
            </PropertyRow>
          )}
        </PropertySection>
      ) : null}

      <PropertySection title="About" streamlined={streamlinedPropertiesEnabled}>
        {originatingActor ? (
          <PropertyRow label="Originating">
            {originatingActor.kind === "agent" ? (
              <Link
                to={`/agents/${originatingActor.id}`}
                className="hover:underline"
              >
                <AgentIdentity agent={agents?.find((agent) => agent.id === originatingActor.id) ?? { id: originatingActor.id, name: agentName(originatingActor.id) ?? "Agent" }} size="sm" />
              </Link>
            ) : (
              <span className="flex min-w-0 items-center gap-1.5">
                <Identity
                  name={actualUserLabel(originatingActor.id) ?? originatingUserProfile?.label ?? "User"}
                  avatarUrl={originatingUserProfile?.image ?? null}
                  size="sm"
                />
                {originatingViaAgentName ? (
                  <span className="shrink-0 truncate text-xs text-muted-foreground">
                    via {originatingViaAgentName}
                  </span>
                ) : null}
              </span>
            )}
          </PropertyRow>
        ) : null}
        {issue.startedAt && (
          <PropertyRow label="Started">
            <span
              className={streamlinedPropertiesEnabled ? "min-w-0 truncate whitespace-nowrap text-sm" : "text-sm"}
              title={streamlinedPropertiesEnabled ? formatDateTime(issue.startedAt) : undefined}
            >{formatDateTime(issue.startedAt)}</span>
          </PropertyRow>
        )}
        {issue.completedAt && (
          <PropertyRow label="Completed">
            <span
              className={streamlinedPropertiesEnabled ? "min-w-0 truncate whitespace-nowrap text-sm" : "text-sm"}
              title={streamlinedPropertiesEnabled ? formatDateTime(issue.completedAt) : undefined}
            >{formatDateTime(issue.completedAt)}</span>
          </PropertyRow>
        )}
        <PropertyRow label="Created">
          <span
            className={streamlinedPropertiesEnabled ? "min-w-0 truncate whitespace-nowrap text-sm" : "text-sm"}
            title={streamlinedPropertiesEnabled ? formatDateTime(issue.createdAt) : undefined}
          >{formatDateTime(issue.createdAt)}</span>
        </PropertyRow>
        <PropertyRow label="Updated">
          <span
            className={streamlinedPropertiesEnabled ? "min-w-0 truncate whitespace-nowrap text-sm" : "text-sm"}
            title={streamlinedPropertiesEnabled ? timeAgo(issue.updatedAt) : undefined}
          >{timeAgo(issue.updatedAt)}</span>
        </PropertyRow>
        {issue.archivedAt && issue.archivedByActorType === "agent" && issue.archivedByAgentId ? (
          (() => {
            const archivedByAgent = (agents ?? []).find((candidate) => candidate.id === issue.archivedByAgentId);
            const archivedByName = agentName(issue.archivedByAgentId);
            return (
              <PropertyRow label="Archived">
                <div className="flex min-w-0 max-w-full flex-col items-start gap-1">
                  {/* The row label already reads "Archived", so the value shows just
                      the attributing agent (icon + name) — this gives the name the
                      full ~164px value column at the real 320px pane width, where an
                      "Archived by …" prefix would clip even short names. The full
                      phrasing + timestamp live in the tooltip so any residual
                      truncation on genuinely long names is recoverable. */}
                  <span
                    className="flex min-w-0 max-w-full items-center gap-1.5 text-sm"
                    title={`Archived by ${archivedByName} · ${formatDateTime(issue.archivedAt)}`}
                  >
                    {archivedByAgent
                      ? <AgentAvatar agent={archivedByAgent} size={16} className="h-3.5 w-3.5 shrink-0 text-muted-foreground"/>
                      : null}
                    <span className="min-w-0 truncate">
                      {archivedByName}
                    </span>
                  </span>
                  <div className="flex min-w-0 max-w-full items-center gap-2">
                    <span className="shrink-0 text-xs text-muted-foreground">{timeAgo(issue.archivedAt)}</span>
                    <button
                      type="button"
                      className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground disabled:opacity-50"
                      onClick={() => unarchiveFromInbox.mutate()}
                      disabled={unarchiveFromInbox.isPending}
                    >
                      <ArchiveRestore className="h-3 w-3" />
                      {unarchiveFromInbox.isPending ? "Unarchiving…" : "Unarchive"}
                    </button>
                  </div>
                  {unarchiveErrorMessage ? (
                    <p className="text-xs text-destructive" role="alert">
                      {unarchiveErrorMessage}
                    </p>
                  ) : null}
                </div>
              </PropertyRow>
            );
          })()
        ) : null}
        {issue.requestDepth > 0 && (
          <PropertyRow label="Depth">
            <span className="text-sm font-mono">{issue.requestDepth}</span>
          </PropertyRow>
        )}
      </PropertySection>

      {/* Experimental Cases rail (PAP-12969) — self-gates on the flag and
          renders nothing when no cases are linked. */}
      <div className="pt-3">
        <IssueCasesPanel issueId={issue.id} />
      </div>
    </div>
  );

  // Classic Task Interface ON: the legacy stacked pane, byte-for-byte.
  if (!taskChatShellEnabled || sidePanelContentOnly) return propertiesBody;

  const hasSubtasksTab = streamlinedPropertiesEnabled && childIssues.length > 0;
  const hasReferencesTab = streamlinedPropertiesEnabled
    && (panelReferencedTasks.length > 0 || panelMentionedInTasks.length > 0);
  const availablePaneTabs: IssuePaneTabDescriptor[] = [
    { value: "properties", label: "Properties", closable: false },
    ...(hasSubtasksTab
      ? [{ value: "subtasks" as const, label: "Subtasks", count: childIssues.length, closable: true }]
      : []),
    ...(hasReferencesTab
      ? [{ value: "references" as const, label: "References", closable: true }]
      : []),
    ...(hasPlanTab
      ? [{ value: "plans" as const, label: "Plan", closable: true }]
      : []),
    ...(hasArtifactsTab
      ? [{ value: "artifacts" as const, label: "Artifacts", closable: true }]
      : []),
  ];
  const visiblePaneTabs = availablePaneTabs.filter(
    (tab) => tab.value === "properties" || !closedPaneTabs.has(tab.value),
  );
  const hiddenPaneTabs = availablePaneTabs.filter((tab) => closedPaneTabs.has(tab.value));

  // Chat-style with nothing to switch between: render one selected tab button
  // so the header uses the same filled-tab treatment as the multi-tab state.
  if (!hasSubtasksTab && !hasReferencesTab && !hasPlanTab && !hasArtifactsTab) {
    return (
      <>
        {paneHeaderSlot
          ? streamlinedPropertiesEnabled ? createPortal(
              <div className="flex items-center" role="tablist" aria-label="Properties panel sections">
                <button
                  type="button"
                  role="tab"
                  aria-selected="true"
                  className={cn(
                    STREAMLINED_PANE_TAB_CLASS,
                    "inline-flex flex-none items-center bg-muted px-3",
                  )}
                >
                  Properties
                </button>
              </div>,
              paneHeaderSlot,
            ) : createPortal(<span className="text-sm font-medium">Properties</span>, paneHeaderSlot)
          : null}
        {propertiesBody}
      </>
    );
  }

  // Flag ON: wrap the same body in a Properties | Plan | Artifacts tab shell
  // (v5 decision: singular "Plan", Docs merged into Artifacts). The Properties
  // tab is unchanged. Panel hosts portal the strip into the pane header bar;
  // portals keep React context, so the Tabs root still drives it.
  // Fall back to Properties if the selected tab's content went away (or the
  // selection was made on another issue).
  const activePaneTab =
    (paneTab === "plans" && !hasPlanTab)
    || (paneTab === "artifacts" && !hasArtifactsTab)
    || (paneTab === "subtasks" && !hasSubtasksTab)
    || (paneTab === "references" && !hasReferencesTab)
    || closedPaneTabs.has(paneTab)
      ? "properties"
      : paneTab;
  const closePaneTab = (value: IssuePaneTab) => {
    if (value === "properties") return;
    paneTabUserChosenRef.current = true;
    setClosedPaneTabs((current) => {
      const next = new Set(current);
      next.add(value);
      return next;
    });
    if (activePaneTab !== value) return;
    const closingIndex = visiblePaneTabs.findIndex((tab) => tab.value === value);
    const fallback = visiblePaneTabs[closingIndex - 1]
      ?? visiblePaneTabs[closingIndex + 1]
      ?? availablePaneTabs[0];
    setPaneTab(fallback.value);
  };
  const reopenPaneTab = (value: IssuePaneTab) => {
    paneTabUserChosenRef.current = true;
    setClosedPaneTabs((current) => {
      if (!current.has(value)) return current;
      const next = new Set(current);
      next.delete(value);
      return next;
    });
    setPaneTab(value);
  };
  const codexStylePaneTabs = Boolean(paneHeaderSlot && streamlinedPropertiesEnabled);
  // Production keeps the master underline treatment. Streamlined task detail
  // uses the compact, truncating Codex-inspired pane-tab treatment instead.
  const paneTabTriggerClass = paneHeaderSlot
    ? streamlinedPropertiesEnabled
      ? cn(
          STREAMLINED_PANE_TAB_CLASS,
          "min-w-0 flex-1 justify-start overflow-hidden after:hidden",
        )
      : "h-full group-data-[orientation=horizontal]/tabs:after:bottom-0"
    : undefined;
  const paneTabs = codexStylePaneTabs ? visiblePaneTabs : availablePaneTabs;
  const tabList = (
    <TabsList
      variant="line"
      className={
        paneHeaderSlot
          ? streamlinedPropertiesEnabled
            ? "min-w-0 flex-1 items-center justify-start gap-0 overflow-hidden p-0 group-data-[orientation=horizontal]/tabs:h-full"
            : "items-stretch justify-start gap-1 p-0 group-data-[orientation=horizontal]/tabs:h-full"
          : "w-full justify-start gap-1"
      }
    >
      {paneTabs.map((tab, index) => {
        const trigger = (
          <TabsTrigger
            key={codexStylePaneTabs ? undefined : tab.value}
            value={tab.value}
            className={cn(
              paneTabTriggerClass,
              codexStylePaneTabs && "mx-1.5 hover:bg-accent/50 group-focus-within/pane-tab:bg-accent/50",
              codexStylePaneTabs && "px-3",
            )}
          >
            <span
              className={cn(
                codexStylePaneTabs
                  && "task-detail-pane-tab-label min-w-0 flex-1 overflow-hidden whitespace-nowrap",
              )}
              title={tab.label}
            >
              {tab.label}
            </span>
            {tab.count ? (
              <span className="shrink-0 font-mono text-(length:--text-nano) text-muted-foreground transition-opacity group-hover/pane-tab:opacity-0 group-focus-within/pane-tab:opacity-0">
                {tab.count}
              </span>
            ) : null}
          </TabsTrigger>
        );
        if (!codexStylePaneTabs) return trigger;
        return (
          <div
            key={tab.value}
            data-slot="task-detail-pane-tab"
            className="group/pane-tab relative flex min-w-0 flex-1 basis-0 items-center"
          >
            {index > 0 ? (
              <span
                data-slot="task-detail-pane-tab-divider"
                aria-hidden="true"
                className="absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-border"
              />
            ) : null}
            {trigger}
            {tab.closable ? (
              <button
                type="button"
                className="absolute right-2.5 top-1/2 z-20 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-(length:--rad-3) focus-visible:ring-ring group-hover/pane-tab:opacity-100 group-focus-within/pane-tab:opacity-100"
                aria-label={`Close ${tab.label} tab`}
                onPointerDown={(event) => {
                  event.preventDefault();
                  event.stopPropagation();
                }}
                onClick={(event) => {
                  event.preventDefault();
                  event.stopPropagation();
                  closePaneTab(tab.value);
                }}
              >
                <X className="size-3.5" aria-hidden />
              </button>
            ) : null}
          </div>
        );
      })}
    </TabsList>
  );
  const tabStrip = codexStylePaneTabs ? (
    <div className="flex h-full min-w-0 flex-1 items-center">
      {tabList}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="icon-xs"
            className="size-6 shrink-0 text-muted-foreground"
            disabled={hiddenPaneTabs.length === 0}
            aria-label="Open closed sidebar tab"
            title={hiddenPaneTabs.length === 0 ? "All sidebar tabs are open" : "Open closed sidebar tab"}
          >
            <Plus className="size-3.5" aria-hidden />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="min-w-(--sz-8rem)">
          {hiddenPaneTabs.map((tab) => (
            <DropdownMenuItem key={tab.value} onClick={() => reopenPaneTab(tab.value)}>
              {tab.label}
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  ) : tabList;
  return (
    <Tabs value={activePaneTab} onValueChange={handlePaneTabChange} className="flex min-h-0 flex-col gap-3">
      {paneHeaderSlot
        ? createPortal(
            // Portals keep React context but break the DOM tree the Tailwind
            // group-selectors need: the active-tab underline is styled via
            // `group-data-[orientation=horizontal]/tabs:*`, so restore that
            // ancestor here (display: contents keeps it out of layout).
            <div className="group/tabs contents" data-orientation="horizontal">
              {tabStrip}
            </div>,
            paneHeaderSlot,
          )
        : tabStrip}
      <TabsContent value="properties">{propertiesBody}</TabsContent>
      {hasSubtasksTab ? (
        <TabsContent value="subtasks">
          <TaskDetailSubtasksPanel
            items={childIssues}
            onAddSubtask={onAddSubIssue}
            issueLinkState={issueLinkState}
          />
        </TabsContent>
      ) : null}
      {hasReferencesTab ? (
        <TabsContent value="references">
          <TaskDetailReferencesPanel
            referenced={panelReferencedTasks}
            mentionedIn={panelMentionedInTasks}
            issueLinkState={issueLinkState}
          />
        </TabsContent>
      ) : null}
      {hasPlanTab ? (
        <TabsContent value="plans">
          <IssuePropertiesPlansTab issue={issue} inline={inline} />
        </TabsContent>
      ) : null}
      {hasArtifactsTab ? (
        <TabsContent value="artifacts">
          <IssuePropertiesArtifactsTab
            issue={issue}
            documentDeepLink={documentDeepLink?.tab === "artifacts" ? documentDeepLink : null}
          />
        </TabsContent>
      ) : null}
    </Tabs>
  );
}