feat(agents-panel): היררכיה, סמן-כהושלם ידני, ובורר-יעד נגלל (5 תיקוני יו"ר)

טאב הסוכנים בתיק — 5 תיקונים לבקשת היו"ר, מאושרים דרך שער-העיצוב
(Claude Design X17, כרטיס 18i4):

1. היררכיה — הרצה שנפתחה תחת השורש (למשל CMP-220 תחת CMP-189) מסומנת
   בתג "↳ <parent>" גם בציר-הזמן וגם בבורר-היעד (בהזחה). הנתון parent_id
   כבר הגיע מה-API — תצוגה בלבד.
2. סמן-כהושלם / בטל ידני — כל משימה פתוחה מקבלת פעולות בכותרת. פותר
   "אין אפשרות לסמן ידנית" (superseded runs נתקעו ב-in_review בלי מנגנון
   סגירה). endpoint חדש: POST /api/cases/{n}/agents/issue-status → דרך
   ה-Port (pc_set_issue_status), סגירה loop-safe ישירה ל-DB, בלי wakeup.
3. בורר-היעד נגלל — max-height + overflow פנימי, כך שהתיבה לא בורחת
   מגבולות העמוד. פותר "לא רואים את התחתית / לא מגיעים לפתיחת הליך".
4. "פתח הרצה חדשה" עלה לראש הרשימה, מעל "משימות פעילות", ומודגש.
5. קו-הפרדה בין משימות בציר-הזמן עבה יותר (border-b-2 rule).

G12: כל מגע-פלטפורמה עובר דרך agent_platform_port. אימות: lint + tsc +
next build עוברים.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-ui/src/components/cases/agent-activity-feed.tsx

@@ -10,6 +10,7 @@ import {
   useSendComment,
   useSubmitInteraction,
   useDismissInteraction,
+  useSetIssueStatus,
 } from "@/lib/api/agents";
 import type {
   Interaction,
@@ -772,31 +773,96 @@ function IssueGroup({
   defaultOpen: boolean;
 }) {
   const [open, setOpen] = useState(defaultOpen);
+  const setStatus = useSetIssueStatus(caseNumber);
   const closed = issue.status === "done" || issue.status === "cancelled";
+  // Show the parent run this issue hangs under (e.g. a "הרצה חדשה" nested under
+  // the live CEO root) so the hierarchy is visible, not flattened.
+  const parentIdentifier = issue.parent_id
+    ? issueMap.get(issue.parent_id)
+    : undefined;
+
+  const close = (status: "done" | "cancelled") =>
+    setStatus.mutate(
+      { issue_id: issue.id, status },
+      {
+        onSuccess: () =>
+          toast.success(
+            status === "done" ? "המשימה סומנה כהושלמה" : "המשימה בוטלה",
+          ),
+        onError: () => toast.error("שגיאה בעדכון סטטוס המשימה"),
+      },
+    );
+
   return (
-    <div className="border-b border-rule-soft last:border-b-0">
-      <button
-        type="button"
-        onClick={() => setOpen((o) => !o)}
-        aria-expanded={open}
-        className="w-full flex items-center gap-2 px-2 py-2.5 hover:bg-sand-soft/50 text-start"
-      >
-        <Badge
-          variant={closed ? "secondary" : "default"}
-          className="text-[10px] font-mono shrink-0"
+    <div className="border-b-2 border-rule last:border-b-0">
+      <div className="w-full flex items-center gap-2 px-2 py-2.5 hover:bg-sand-soft/50">
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          aria-expanded={open}
+          className="flex-1 flex items-center gap-2 text-start min-w-0"
         >
-          {issue.identifier}
-        </Badge>
-        <span className="text-[0.78rem] font-semibold text-navy truncate">
-          {shortIssueTitle(issue.title)}
-        </span>
-        <span className="text-[0.7rem] text-ink-muted whitespace-nowrap">
-          {issueStatusLabel(issue.status)} · {items.length}
-        </span>
-        <ChevronDown
-          className={`w-4 h-4 ms-auto text-ink-faint shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
-        />
-      </button>
+          <Badge
+            variant={closed ? "secondary" : "default"}
+            className="text-[10px] font-mono shrink-0"
+          >
+            {issue.identifier}
+          </Badge>
+          <span className="text-[0.78rem] font-semibold text-navy truncate">
+            {shortIssueTitle(issue.title)}
+          </span>
+          {parentIdentifier && (
+            <span
+              className="inline-flex items-center gap-0.5 text-[0.6rem] font-bold text-gold-deep bg-gold/10 border border-rule rounded-full px-1.5 py-0.5 shrink-0 whitespace-nowrap"
+              title={`תת-משימה של ${parentIdentifier}`}
+            >
+              ↳ {parentIdentifier}
+            </span>
+          )}
+          <span className="text-[0.7rem] text-ink-muted whitespace-nowrap">
+            {issueStatusLabel(issue.status)} · {items.length}
+          </span>
+        </button>
+        {!closed && (
+          <div className="flex items-center gap-1 shrink-0">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => close("done")}
+              disabled={setStatus.isPending}
+              className="h-7 px-2 text-[0.7rem] text-success border-success/40 hover:bg-success-bg"
+              title="סמן את המשימה כהושלמה"
+            >
+              {setStatus.isPending ? (
+                <Loader2 className="w-3 h-3 animate-spin" />
+              ) : (
+                <CheckCircle2 className="w-3.5 h-3.5 me-1" />
+              )}
+              הושלם
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => close("cancelled")}
+              disabled={setStatus.isPending}
+              className="h-7 px-2 text-[0.7rem] text-ink-muted hover:text-danger"
+              title="בטל את המשימה"
+            >
+              בטל
+            </Button>
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          aria-label={open ? "כווץ" : "הרחב"}
+          className="shrink-0"
+        >
+          <ChevronDown
+            className={`w-4 h-4 text-ink-faint transition-transform ${open ? "rotate-180" : ""}`}
+          />
+        </button>
+      </div>
       {open && (
         <div className="pb-1">
           {items.map((item) =>
@@ -878,6 +944,13 @@ function TargetSelector({
   const defaultIssue = useMemo(() => pickDefaultTarget(issues), [issues]);
   const activeIssues = issues.filter((i) => isOpenStatus(i.status));
   const closedIssues = issues.filter((i) => !isOpenStatus(i.status));
+  // id → identifier, to label a run with the parent it hangs under (↳ CMP-189).
+  const idToIdentifier = useMemo(
+    () => new Map(issues.map((i) => [i.id, i.identifier])),
+    [issues],
+  );
+  const parentTag = (i: PaperclipIssue) =>
+    i.parent_id ? idToIdentifier.get(i.parent_id) : undefined;
 
   // The issue the pill currently represents (explicit pick, or the auto default).
   const effectiveIssue =
@@ -925,7 +998,31 @@ function TargetSelector({
             onClick={() => setOpen(false)}
             aria-hidden
           />
-          <div className="absolute z-20 top-full mt-1 start-0 w-[360px] max-w-[88vw] bg-white border border-rule rounded-xl shadow-lg p-1.5">
+          <div className="absolute z-20 top-full mt-1 start-0 w-[360px] max-w-[88vw] max-h-[62vh] overflow-y-auto overscroll-contain bg-white border border-rule rounded-xl shadow-lg p-1.5">
+            {/* "פתח הרצה חדשה" is the FIRST, most-prominent option so it's always
+                visible without scrolling to the bottom of a long task list. */}
+            <button
+              type="button"
+              onClick={() => {
+                onChange({ kind: "new_run" });
+                setOpen(false);
+              }}
+              className="w-full flex items-center gap-2.5 px-2 py-2 rounded-lg text-start bg-gold/10 border border-rule hover:border-gold/60"
+            >
+              <span className="w-6 h-6 rounded-md bg-navy text-white flex items-center justify-center shrink-0">
+                <Plus className="w-4 h-4" />
+              </span>
+              <span className="min-w-0">
+                <span className="block text-xs font-semibold text-navy">
+                  פתח הרצה חדשה
+                </span>
+                <span className="block text-[10px] text-ink-muted">
+                  ה-CEO ייצור משימה חדשה ויטפל בהוראה מאפס
+                </span>
+              </span>
+            </button>
+            <div className="h-px bg-rule-soft my-1.5 mx-1" />
+
             <div className="px-2 py-1 text-[10px] font-bold text-ink-faint uppercase tracking-wide">
               משימות פעילות
             </div>
@@ -933,6 +1030,7 @@ function TargetSelector({
               const selected =
                 (target.kind === "issue" && target.id === i.id) ||
                 (target.kind === "auto" && defaultIssue?.id === i.id);
+              const parent = parentTag(i);
               return (
                 <button
                   key={i.id}
@@ -941,12 +1039,20 @@ function TargetSelector({
                     onChange({ kind: "issue", id: i.id });
                     setOpen(false);
                   }}
-                  className={`w-full flex items-center gap-2 px-2 py-2 rounded-lg text-start hover:bg-sand-soft ${selected ? "bg-gold/10" : ""}`}
+                  className={`w-full flex items-center gap-2 px-2 py-2 rounded-lg text-start hover:bg-sand-soft ${parent ? "ps-6" : ""} ${selected ? "bg-gold/10" : ""}`}
                 >
                   <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shrink-0" />
                   <Badge variant="outline" className="text-[10px] font-mono shrink-0">
                     {i.identifier}
                   </Badge>
+                  {parent && (
+                    <span
+                      className="text-[9px] font-bold text-gold-deep bg-gold/10 border border-rule rounded-full px-1.5 py-0.5 shrink-0 whitespace-nowrap"
+                      title={`תת-משימה של ${parent}`}
+                    >
+                      ↳ {parent}
+                    </span>
+                  )}
                   <span className="text-xs text-ink-soft truncate flex-1">
                     {shortIssueTitle(i.title)}
                   </span>
@@ -968,50 +1074,39 @@ function TargetSelector({
                 <div className="px-2 py-1 text-[10px] font-bold text-ink-faint uppercase tracking-wide">
                   משימות סגורות · שליחה אליהן לא תעיר סוכן
                 </div>
-                {closedIssues.map((i) => (
-                  <div
-                    key={i.id}
-                    className="w-full flex items-center gap-2 px-2 py-2 rounded-lg opacity-60 cursor-not-allowed"
-                    title="משימה סגורה — שליחה אליה לא תעיר סוכן"
-                  >
-                    <span className="w-1.5 h-1.5 rounded-full bg-ink-faint shrink-0" />
-                    <Badge variant="outline" className="text-[10px] font-mono shrink-0">
-                      {i.identifier}
-                    </Badge>
-                    <span className="text-xs text-ink-faint truncate flex-1">
-                      {shortIssueTitle(i.title)}
-                    </span>
-                    <span
-                      className={`text-[10px] font-semibold rounded-full px-2 py-0.5 shrink-0 ${statusTone(i.status)}`}
+                {closedIssues.map((i) => {
+                  const parent = parentTag(i);
+                  return (
+                    <div
+                      key={i.id}
+                      className={`w-full flex items-center gap-2 px-2 py-2 rounded-lg opacity-60 cursor-not-allowed ${parent ? "ps-6" : ""}`}
+                      title="משימה סגורה — שליחה אליה לא תעיר סוכן"
                     >
-                      {issueStatusLabel(i.status)}
-                    </span>
-                  </div>
-                ))}
+                      <span className="w-1.5 h-1.5 rounded-full bg-ink-faint shrink-0" />
+                      <Badge variant="outline" className="text-[10px] font-mono shrink-0">
+                        {i.identifier}
+                      </Badge>
+                      {parent && (
+                        <span
+                          className="text-[9px] font-bold text-gold-deep bg-gold/10 border border-rule rounded-full px-1.5 py-0.5 shrink-0 whitespace-nowrap"
+                          title={`תת-משימה של ${parent}`}
+                        >
+                          ↳ {parent}
+                        </span>
+                      )}
+                      <span className="text-xs text-ink-faint truncate flex-1">
+                        {shortIssueTitle(i.title)}
+                      </span>
+                      <span
+                        className={`text-[10px] font-semibold rounded-full px-2 py-0.5 shrink-0 ${statusTone(i.status)}`}
+                      >
+                        {issueStatusLabel(i.status)}
+                      </span>
+                    </div>
+                  );
+                })}
               </>
             )}
-
-            <div className="h-px bg-rule-soft my-1.5 mx-1" />
-            <button
-              type="button"
-              onClick={() => {
-                onChange({ kind: "new_run" });
-                setOpen(false);
-              }}
-              className="w-full flex items-center gap-2.5 px-2 py-2 rounded-lg text-start hover:bg-sand-soft"
-            >
-              <span className="w-6 h-6 rounded-md bg-navy text-white flex items-center justify-center shrink-0">
-                <Plus className="w-4 h-4" />
-              </span>
-              <span className="min-w-0">
-                <span className="block text-xs font-semibold text-navy">
-                  פתח הרצה חדשה
-                </span>
-                <span className="block text-[10px] text-ink-muted">
-                  ה-CEO ייצור משימה חדשה ויטפל בהוראה מאפס
-                </span>
-              </span>
-            </button>
           </div>
         </>
       )}