@mndrk/agx 2.4.2 → 2.4.3

package/cloud-runtime/standalone/apps/local/components/TrackerBoard.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import { ArrowDown, ArrowUp, ChevronLeft, Clock, FileText, Play, Plus, RefreshCw, Search, Settings, User, X } from "lucide-react";
+import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, Clock, FileText, Play, Plus, RefreshCw, Search, Settings, User, X } from "lucide-react";
 import { useUrlSelection } from "@/hooks/useUrlSelection";
 import { useTrackerItems } from "@/hooks/useTrackerItems";
 import type { TrackerItem, TrackerStatusCategory } from "@/lib/tracker/types";
@@ -56,12 +56,16 @@ import { TicketRow } from "@/components/tracker/TicketRow";
 import { TicketPanel } from "@/components/tracker/TicketPanel";
 import { useTrackerParticipants } from "@/hooks/useTrackerParticipants";
 import { useTrackerActiveAgents } from "@/hooks/useTrackerActiveAgents";
+import { useTrackerIssueStats } from "@/hooks/useTrackerIssueStats";
 import { agentAvatarUrl } from "@/lib/tracker-board-utils";
 import { useTaskGroups, type TaskGroup } from "@/hooks/useTaskGroups";
 import { FolderRow } from "@/components/tracker/FolderRow";
 import { GroupPanel } from "@/components/tracker/GroupPanel";
 import { GroupNamePrompt, PENDING_GROUP_DROP_ID } from "@/components/tracker/GroupNamePrompt";
+import { StatusGroupRow, STATUS_GROUP_PREFIX } from "@/components/tracker/StatusGroupRow";
 import { SelectionBar } from "@/components/tracker/SelectionBar";
+import { useTrackerItemsMetadata } from "@/hooks/useTrackerItemsMetadata";
+import { useTrackerLabels } from "@/hooks/useTrackerLabels";
 import {
   DndContext,
   DragOverlay,
@@ -89,6 +93,13 @@ function formatRunTime(iso: string): string {
   });
 }
 
+const STATUS_CATEGORY_COLORS: Record<string, string> = {
+  todo: "bg-zinc-400",
+  in_progress: "bg-amber-400",
+  done: "bg-emerald-400",
+  cancelled: "bg-red-400",
+};
+
 interface GroupOption {
   id: string;
   name: string;
@@ -405,16 +416,20 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
   const [selectedAssigneeIds, setSelectedAssigneeIds] = useState<string[]>([]);
   const [selectedStatusCategories, setSelectedStatusCategories] = useState<string[]>([]);
   const [groups, setGroups] = useState<GroupOption[]>([]);
+  const [groupLabel, setGroupLabel] = useState("Group");
   const [selectedGroupId, setSelectedGroupId] = useState("");
   const [selectedWorkspaceId, setSelectedWorkspaceId] = useState("");
   const [sortBy, setSortBy] = useState<"activity" | "identifier" | "status" | "created">("activity");
   const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
-  const [hasActivity, setHasActivity] = useState(false);
+  const [selectedLabelNames, setSelectedLabelNames] = useState<string[]>([]);
   const [pinnedItemIds, setPinnedItemIds] = useState<Set<string>>(() => loadPinnedTrackerItemIds(trackerType, projectSlug));
   const [selectedItemFallback, setSelectedItemFallback] = useState<TrackerItem | null>(null);
   const [updatingItemId, setUpdatingItemId] = useState<string | null>(null);
+  const [collapsedStatusGroups, setCollapsedStatusGroups] = useState<Set<string>>(new Set());
+  const groupByStatus = true;
   const { participants } = useTrackerParticipants(trackerType, projectId);
   const { issueActiveAgents } = useTrackerActiveAgents(trackerType, projectId);
+  const { issueStats } = useTrackerIssueStats(trackerType, projectId);
   const [pickerItem, setPickerItem] = useState<TrackerItem | null>(null);
   const [pickerAnchor, setPickerAnchor] = useState<{ top: number; left: number } | null>(null);
   const [touchPanelTab, setTouchPanelTab] = useState<"runs" | "ticket">("runs");
@@ -480,6 +495,10 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
   // hoisting issues (sortedItems is declared further down).
   const sortedItemsRef = useRef<TrackerItem[]>([]);
 
+  // Ref to handleItemStatusChange so handleDragEnd can access it without
+  // hoisting issues (handleItemStatusChange is declared further down).
+  const handleItemStatusChangeRef = useRef<((item: TrackerItem, status: string, statusCategory?: TrackerStatusCategory) => Promise<void>) | null>(null);
+
   const handleMultiSelectGroup = useCallback(() => {
     const ids = Array.from(multiSelectedItemIds);
     // Find the topmost selected item in the sorted list to position the prompt
@@ -550,6 +569,25 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
       if (!over || active.id === over.id) return;
       const overId = over.id as string;
 
+      // Dropped on a status group header → change status upstream
+      if (overId.startsWith(STATUS_GROUP_PREFIX)) {
+        const targetStatus = overId.slice(STATUS_GROUP_PREFIX.length);
+        const activeItem = sortedItemsRef.current.find((i) => i.id === activeItemId);
+        const targetCategory = sortedItemsRef.current.find((i) => i.status === targetStatus)?.statusCategory;
+        if (activeItem && activeItem.status !== targetStatus) {
+          await handleItemStatusChangeRef.current?.(activeItem, targetStatus, targetCategory);
+        }
+        return;
+      }
+
+      // Dropped on a ticket in a different status group → change status
+      const activeItem = sortedItemsRef.current.find((i) => i.id === activeItemId);
+      const overItem = sortedItemsRef.current.find((i) => i.id === overId);
+      if (activeItem && overItem && activeItem.status !== overItem.status) {
+        await handleItemStatusChangeRef.current?.(activeItem, overItem.status, overItem.statusCategory);
+        return;
+      }
+
       // Check if dropping on a folder
       const targetGroup = taskGroups.find((g) => g.id === overId);
       if (targetGroup) {
@@ -616,7 +654,7 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
     setSelectedGroupId(storedFilters.groupIds?.[0] ?? "");
     setSortBy(storedFilters.sortBy);
     setSortDir(storedFilters.sortDir);
-    setHasActivity(storedFilters.hasActivity);
+    setSelectedLabelNames(storedFilters.labelNames ?? []);
     setPinnedItemIds(loadPinnedTrackerItemIds(trackerType, projectSlug));
   }, [trackerType, projectSlug]);
 
@@ -631,11 +669,12 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
       assigneeIds: selectedAssigneeIds,
       statusCategories: selectedStatusCategories,
       groupIds: selectedGroupId ? [selectedGroupId] : [],
+      labelNames: selectedLabelNames,
       sortBy,
       sortDir,
-      hasActivity,
+      hasActivity: false,
     });
-  }, [trackerType, projectSlug, search, selectedAssigneeIds, selectedStatusCategories, selectedWorkspaceId, selectedGroupId, sortBy, sortDir, hasActivity]);
+  }, [trackerType, projectSlug, search, selectedAssigneeIds, selectedStatusCategories, selectedWorkspaceId, selectedGroupId, selectedLabelNames, sortBy, sortDir]);
 
   // Fetch filter options when connected
   useEffect(() => {
@@ -657,7 +696,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
         setAssignees(Array.isArray(data.assignees) ? data.assignees : []);
         setStatusCategories(Array.isArray(data.statuses) ? data.statuses.map((s: { name: string; category: string }) => ({ value: s.name, label: s.name })) : []);
         setWorkspaces(Array.isArray(data.teams) ? data.teams : []);
-        setGroups(Array.isArray(data.cycles) ? data.cycles : []);
+        setGroups(Array.isArray(data.groups) ? data.groups : []);
+        if (data.groupLabel) setGroupLabel(data.groupLabel);
         setFilterOptionsLoaded(true);
       })
       .catch(() => {
@@ -731,9 +771,8 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
       groupIds: selectedGroupId ? [selectedGroupId] : undefined,
       sortBy,
       sortDir,
-      hasActivity: hasActivity || undefined,
     }),
-    [debouncedSearch, selectedAssigneeIds, selectedGroupId, selectedStatusCategories, statusCategories.length, sortBy, sortDir, hasActivity]
+    [debouncedSearch, selectedAssigneeIds, selectedGroupId, selectedStatusCategories, statusCategories.length, sortBy, sortDir]
   );
 
   const {
@@ -746,6 +785,22 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
   } = useTrackerItems(trackerType, filters, connected && filterOptionsLoaded && Boolean(projectId), {
     projectId: projectId ?? "",
   });
+
+  // Bulk metadata for visible items
+  const visibleIssueIds = useMemo(() => items.map((item) => item.id), [items]);
+  const {
+    metadataMap,
+    refresh: refreshMetadata,
+  } = useTrackerItemsMetadata(trackerType, projectId, visibleIssueIds);
+
+  // Labels
+  const {
+    labels: allLabels,
+    definitions: labelDefinitions,
+    refresh: refreshLabels,
+    createDefinition: createLabelDefinition,
+  } = useTrackerLabels(trackerType, projectId);
+
   const selectedItemFromList = useMemo(
     () => (selectedItemId ? items.find((item) => item.id === selectedItemId) ?? null : null),
     [items, selectedItemId],
@@ -769,9 +824,45 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
   }, [items, pinnedItemIds]);
   sortedItemsRef.current = sortedItems;
 
+  const deferredLabelNames = useDeferredValue(selectedLabelNames);
+  const labelFilteredItems = useMemo(() => {
+    if (deferredLabelNames.length === 0) return sortedItems;
+    const filterSet = new Set(deferredLabelNames);
+    const result: TrackerItem[] = [];
+    for (const item of sortedItems) {
+      const labels = metadataMap.get(item.id)?.labels;
+      if (!labels) continue;
+      for (const l of labels) {
+        if (filterSet.has(l)) {
+          result.push(item);
+          break;
+        }
+      }
+    }
+    return result;
+  }, [sortedItems, deferredLabelNames, metadataMap]);
+
+  const statusGroups = useMemo(() => {
+    if (!groupByStatus) return [];
+    const map = new Map<string, { status: string; category: TrackerStatusCategory; items: TrackerItem[] }>();
+    for (const item of labelFilteredItems) {
+      let group = map.get(item.status);
+      if (!group) {
+        group = { status: item.status, category: item.statusCategory, items: [] };
+        map.set(item.status, group);
+      }
+      group.items.push(item);
+    }
+    const categoryOrder: Record<string, number> = { in_progress: 0, todo: 1, done: 2, cancelled: 3 };
+    return [...map.values()].sort(
+      (a, b) => (categoryOrder[a.category] ?? 1) - (categoryOrder[b.category] ?? 1)
+    );
+  }, [groupByStatus, labelFilteredItems]);
+
   const {
     runs,
     loading: runsLoading,
+    loadedForIssueId: runsLoadedForIssueId,
     createRun,
     updateRun,
   } = useTrackerRuns(trackerType, selectedItem?.id ?? null, projectId ?? null);
@@ -815,26 +906,64 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
   );
   const groupOptions = useMemo<FilterOption[]>(
     () => [
-      { value: "", label: "Group" },
+      { value: "", label: groupLabel },
       ...groups.map((group) => ({
         value: group.id,
         label: group.name,
       })),
     ],
-    [groups]
+    [groups, groupLabel]
   );
   const showStatusFilter = statusOptions.length > 0;
   const showGroupFilter = groupOptions.length > 1;
   const showWorkspaceFilter = workspaceOptions.length > 2;
   const activeSessionScriptLabel = activeScript?.name ?? "AGX default";
 
+  const labelFilterOptions = useMemo<FilterOption[]>(
+    () => allLabels.map((l) => ({ value: l.name, label: l.name })),
+    [allLabels]
+  );
+
+  const handleItemToggleLabel = useCallback(async (itemId: string, label: string) => {
+    if (!projectId) return;
+    const current = metadataMap.get(itemId)?.labels ?? [];
+    const has = current.includes(label);
+    const next = has ? current.filter((l) => l !== label) : [...current, label];
+    try {
+      await fetch(`/api/trackers/${trackerType}/metadata?projectId=${encodeURIComponent(projectId)}&issueId=${encodeURIComponent(itemId)}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ labels: next }),
+      });
+      void refreshMetadata();
+      void refreshLabels();
+    } catch {}
+  }, [projectId, trackerType, metadataMap, refreshMetadata, refreshLabels]);
+
+  const handleItemAddLabel = useCallback(async (name: string) => {
+    if (!projectId) return;
+    await createLabelDefinition(name);
+  }, [projectId, createLabelDefinition]);
+
   const handleItemStatusChange = useCallback(
-    async (item: TrackerItem, status: string) => {
+    async (item: TrackerItem, status: string, statusCategory?: TrackerStatusCategory) => {
       const nextStatus = status.trim();
       if (!nextStatus || nextStatus === item.status || !projectId) {
         return;
       }
 
+      // Optimistic update — move the ticket to the new status immediately so
+      // the UI reflects the drop before the PATCH round-trip completes.
+      const optimisticItem: TrackerItem = {
+        ...item,
+        status: nextStatus,
+        statusCategory: statusCategory ?? item.statusCategory,
+      };
+      updateItem(optimisticItem);
+      if (selectedItemId === item.id) {
+        setSelectedItemFallback(optimisticItem);
+      }
+
       setUpdatingItemId(item.id);
       try {
         const response = await fetch(
@@ -861,6 +990,11 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
         }
         await refreshItems();
       } catch (error) {
+        // Revert optimistic update on failure.
+        updateItem(item);
+        if (selectedItemId === item.id) {
+          setSelectedItemFallback(item);
+        }
         if (error instanceof Error) {
           window.alert(error.message);
         }
@@ -871,6 +1005,161 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
     [refreshItems, selectedItemId, updateItem, trackerType, projectId]
   );
 
+  // Update the ref whenever the callback changes
+  handleItemStatusChangeRef.current = handleItemStatusChange;
+
+  const handleBulkRecap = useCallback(async () => {
+    const ids = Array.from(multiSelectedItemIds);
+    const selectedItems = ids
+      .map((id) => items.find((item) => item.id === id))
+      .filter(Boolean) as TrackerItem[];
+
+    if (selectedItems.length === 0 || participants.length === 0) return;
+    const agent = participants[0];
+
+    for (const item of selectedItems) {
+      try {
+        await fetch(`/api/trackers/${trackerType}/runs/scripted`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            projectId: projectId ?? undefined,
+            projectSlug: projectSlug ?? undefined,
+            issueId: item.id,
+            issueIdentifier: item.identifier,
+            issueTitle: item.title,
+            issueStatus: item.status,
+            issueAssignee: item.assignee?.name ?? null,
+            agentId: agent.id,
+            scriptName: "Recap",
+            scriptPrompt: "Summarize recent activity and current state of this ticket. Focus on: what was done, what's outstanding, and any blockers.",
+          }),
+        });
+      } catch (err) {
+        console.error(`Failed to start recap for ${item.identifier}:`, err);
+      }
+    }
+    setMultiSelectedItemIds(new Set());
+  }, [multiSelectedItemIds, items, participants, trackerType, projectId, projectSlug]);
+
+  const handleBulkPrompt = useCallback(async (prompt: string, agentId: string) => {
+    const ids = Array.from(multiSelectedItemIds);
+    const selectedItems = ids
+      .map((id) => items.find((item) => item.id === id))
+      .filter(Boolean) as TrackerItem[];
+
+    for (const item of selectedItems) {
+      try {
+        await fetch(`/api/trackers/${trackerType}/runs/scripted`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            projectId: projectId ?? undefined,
+            projectSlug: projectSlug ?? undefined,
+            issueId: item.id,
+            issueIdentifier: item.identifier,
+            issueTitle: item.title,
+            issueStatus: item.status,
+            issueAssignee: item.assignee?.name ?? null,
+            agentId,
+            scriptPrompt: prompt,
+          }),
+        });
+      } catch (err) {
+        console.error(`Failed to send prompt for ${item.identifier}:`, err);
+      }
+    }
+    setMultiSelectedItemIds(new Set());
+  }, [multiSelectedItemIds, items, trackerType, projectId, projectSlug]);
+
+  const handleBulkEstimate = useCallback(async (estimate: number | null) => {
+    const ids = Array.from(multiSelectedItemIds);
+    if (ids.length === 0 || !projectId) return;
+    try {
+      await fetch(`/api/trackers/${trackerType}/metadata/bulk`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          projectId,
+          issueIds: ids,
+          action: "set_estimate",
+          payload: { estimate },
+        }),
+      });
+      void refreshMetadata();
+    } catch {}
+    setMultiSelectedItemIds(new Set());
+  }, [multiSelectedItemIds, projectId, trackerType, refreshMetadata]);
+
+  const handleBulkAddLabel = useCallback(async (label: string) => {
+    const ids = Array.from(multiSelectedItemIds);
+    if (ids.length === 0 || !projectId) return;
+    try {
+      await fetch(`/api/trackers/${trackerType}/metadata/bulk`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          projectId,
+          issueIds: ids,
+          action: "add_labels",
+          payload: { labels: [label] },
+        }),
+      });
+      void refreshMetadata();
+      void refreshLabels();
+    } catch {}
+  }, [multiSelectedItemIds, projectId, trackerType, refreshMetadata, refreshLabels]);
+
+  const handleBulkRemoveLabel = useCallback(async (label: string) => {
+    const ids = Array.from(multiSelectedItemIds);
+    if (ids.length === 0 || !projectId) return;
+    try {
+      await fetch(`/api/trackers/${trackerType}/metadata/bulk`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          projectId,
+          issueIds: ids,
+          action: "remove_label",
+          payload: { label },
+        }),
+      });
+      void refreshMetadata();
+      void refreshLabels();
+    } catch {}
+  }, [multiSelectedItemIds, projectId, trackerType, refreshMetadata, refreshLabels]);
+
+  const [bulkStatusUpdating, setBulkStatusUpdating] = useState(false);
+
+  const handleBulkStatus = useCallback(async (status: string) => {
+    const ids = Array.from(multiSelectedItemIds);
+    const selectedItems = ids
+      .map((id) => items.find((item) => item.id === id))
+      .filter(Boolean) as TrackerItem[];
+
+    if (selectedItems.length === 0) return;
+    setBulkStatusUpdating(true);
+    for (const item of selectedItems) {
+      await handleItemStatusChange(item, status);
+    }
+    setBulkStatusUpdating(false);
+    setMultiSelectedItemIds(new Set());
+  }, [multiSelectedItemIds, items, handleItemStatusChange]);
+
+  const handleCreateLabel = useCallback(async (name: string) => {
+    if (!projectId) return;
+    await createLabelDefinition(name);
+  }, [projectId, createLabelDefinition]);
+
+  const selectedMetadata = useMemo(() => {
+    const map = new Map<string, { labels: string[]; estimate: number | null }>();
+    for (const id of multiSelectedItemIds) {
+      const meta = metadataMap.get(id);
+      map.set(id, meta ?? { labels: [], estimate: null });
+    }
+    return map;
+  }, [multiSelectedItemIds, metadataMap]);
+
   useEffect(() => {
     if (!selectedItemId || !projectId) {
       setSelectedItemFallback(null);
@@ -948,12 +1237,12 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
   }, [selectedItemId, selectedRunId]);
 
   useEffect(() => {
-    if (!isAwaitingRestore || runsLoading || runs.length === 0) return;
+    if (!isAwaitingRestore || runsLoading || runsLoadedForIssueId !== selectedItemId) return;
     lastRestoredItemRef.current = selectedItemId;
     if (storedRunId && runs.some((r) => r.id === storedRunId)) {
       replaceSelection({ run: storedRunId });
     }
-  }, [isAwaitingRestore, storedRunId, selectedItemId, runs, runsLoading, replaceSelection]);
+  }, [isAwaitingRestore, storedRunId, selectedItemId, runs, runsLoading, runsLoadedForIssueId, replaceSelection]);
 
   useEffect(() => {
     if (!isTouchLayout) {
@@ -1156,6 +1445,16 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                   onChange={setSelectedAssigneeIds}
                   emptyLabel="All assignees"
                 />
+                {labelFilterOptions.length > 0 && (
+                  <MultiFilterPopdown
+                    label="Label"
+                    values={selectedLabelNames}
+                    options={labelFilterOptions}
+                    activeClasses="border-pink-500/30 bg-pink-500/10 text-pink-400"
+                    onChange={setSelectedLabelNames}
+                    emptyLabel="All labels"
+                  />
+                )}
                 {showWorkspaceFilter ? (
                   <FilterSelect
                     label="Workspace"
@@ -1167,7 +1466,7 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                 ) : null}
                 {showGroupFilter ? (
                   <FilterSelect
-                    label="Group"
+                    label={groupLabel}
                     value={selectedGroupId}
                     options={groupOptions}
                     activeClasses="border-purple-500/30 bg-purple-500/10 text-purple-400"
@@ -1178,10 +1477,10 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                   label="Sort"
                   value={sortBy}
                   options={[
-                    { value: "activity", label: "Activity" },
+                    { value: "activity", label: "Updated At" },
                     { value: "identifier", label: "Ticket ID" },
                     { value: "status", label: "Status" },
-                    { value: "created", label: "Created" },
+                    { value: "created", label: "Created At" },
                   ]}
                   activeClasses="border-sky-500/30 bg-sky-500/10 text-sky-400"
                   onChange={(value) => setSortBy(value as typeof sortBy)}
@@ -1194,17 +1493,6 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                 >
                   {sortDir === "desc" ? <ArrowDown size={12} /> : <ArrowUp size={12} />}
                 </button>
-                <button
-                  type="button"
-                  className={`flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
-                    hasActivity
-                      ? "border-orange-500/30 bg-orange-500/10 text-orange-400"
-                      : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
-                  }`}
-                  onClick={() => setHasActivity((v) => !v)}
-                >
-                  My activity
-                </button>
               </div>
             </div>
 
@@ -1219,31 +1507,90 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                 </div>
               ) : (
                 <>
-                  {sortedItems.map((item, idx) => (
-                    <React.Fragment key={item.id}>
-                      {pinnedItemIds.size > 0 &&
-                        !pinnedItemIds.has(item.id) &&
-                        (idx === 0 || pinnedItemIds.has(sortedItems[idx - 1].id)) && (
-                          <div className="mx-4 border-t border-amber-500/20" />
-                        )}
-                      <TicketRow
-                        item={item}
-                        selected={selectedItem?.id === item.id}
-                        pinned={pinnedItemIds.has(item.id)}
-                        activeAgents={issueActiveAgents.get(item.id)}
-                        participants={participants}
-                        projectSlug={projectSlug}
-                        onSelect={() => {
-                          setTouchPanelTab("runs");
-                          pushSelection({
-                            issue: item.id,
-                            run: null,
-                          });
-                        }}
-                        onTogglePin={() => togglePin(item.id)}
-                      />
-                    </React.Fragment>
-                  ))}
+                  {groupByStatus ? (
+                    statusGroups.map((sg) => {
+                      const collapsed = collapsedStatusGroups.has(sg.status);
+                      return (
+                        <React.Fragment key={`sg-${sg.status}`}>
+                          <StatusGroupRow
+                            status={sg.status}
+                            categoryColor={STATUS_CATEGORY_COLORS[sg.category] ?? "bg-zinc-400"}
+                            count={sg.items.length}
+                            collapsed={collapsed}
+                            onToggle={() =>
+                              setCollapsedStatusGroups((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(sg.status)) next.delete(sg.status);
+                                else next.add(sg.status);
+                                return next;
+                              })
+                            }
+                          />
+                          {!collapsed &&
+                            sg.items.map((item) => (
+                              <TicketRow
+                                key={item.id}
+                                item={item}
+                                selected={selectedItem?.id === item.id}
+                                pinned={pinnedItemIds.has(item.id)}
+                                activeAgents={issueActiveAgents.get(item.id)}
+                                participants={participants}
+                                projectSlug={projectSlug}
+                                stats={issueStats.get(item.id)}
+                                hideStatus
+                                estimate={metadataMap.get(item.id)?.estimate}
+                                localLabels={metadataMap.get(item.id)?.labels}
+                                labelDefinitions={labelDefinitions}
+                                allLabels={allLabels}
+                                onToggleLabel={(label) => handleItemToggleLabel(item.id, label)}
+                                onAddLabel={handleItemAddLabel}
+                                onSelect={() => {
+                                  setTouchPanelTab("runs");
+                                  pushSelection({
+                                    issue: item.id,
+                                    run: null,
+                                  });
+                                }}
+                                onTogglePin={() => togglePin(item.id)}
+                              />
+                            ))}
+                        </React.Fragment>
+                      );
+                    })
+                  ) : (
+                    labelFilteredItems.map((item, idx) => (
+                      <React.Fragment key={item.id}>
+                        {pinnedItemIds.size > 0 &&
+                          !pinnedItemIds.has(item.id) &&
+                          (idx === 0 || pinnedItemIds.has(labelFilteredItems[idx - 1].id)) && (
+                            <div className="mx-4 border-t border-amber-500/20" />
+                          )}
+                        <TicketRow
+                          item={item}
+                          selected={selectedItem?.id === item.id}
+                          pinned={pinnedItemIds.has(item.id)}
+                          activeAgents={issueActiveAgents.get(item.id)}
+                          participants={participants}
+                          projectSlug={projectSlug}
+                          stats={issueStats.get(item.id)}
+                          estimate={metadataMap.get(item.id)?.estimate}
+                          localLabels={metadataMap.get(item.id)?.labels}
+                          labelDefinitions={labelDefinitions}
+                          allLabels={allLabels}
+                          onToggleLabel={(label) => handleItemToggleLabel(item.id, label)}
+                          onAddLabel={handleItemAddLabel}
+                          onSelect={() => {
+                            setTouchPanelTab("runs");
+                            pushSelection({
+                              issue: item.id,
+                              run: null,
+                            });
+                          }}
+                          onTogglePin={() => togglePin(item.id)}
+                        />
+                      </React.Fragment>
+                    ))
+                  )}
                   {hasMore ? (
                     <div
                       ref={sentinelRef}
@@ -1488,6 +1835,16 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
               onChange={setSelectedAssigneeIds}
               emptyLabel="All assignees"
             />
+            {labelFilterOptions.length > 0 && (
+              <MultiFilterPopdown
+                label="Label"
+                values={selectedLabelNames}
+                options={labelFilterOptions}
+                activeClasses="border-pink-500/30 bg-pink-500/10 text-pink-400"
+                onChange={setSelectedLabelNames}
+                emptyLabel="All labels"
+              />
+            )}
             {showWorkspaceFilter ? (
               <FilterSelect
                 label="Workspace"
@@ -1499,7 +1856,7 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
             ) : null}
             {showGroupFilter ? (
               <FilterSelect
-                label="Group"
+                label={groupLabel}
                 value={selectedGroupId}
                 options={groupOptions}
                 activeClasses="border-purple-500/30 bg-purple-500/10 text-purple-400"
@@ -1510,10 +1867,10 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
               label="Sort"
               value={sortBy}
               options={[
-                { value: "activity", label: "Activity" },
+                { value: "activity", label: "Updated At" },
                 { value: "identifier", label: "Ticket ID" },
                 { value: "status", label: "Status" },
-                { value: "created", label: "Created" },
+                { value: "created", label: "Created At" },
               ]}
               activeClasses="border-sky-500/30 bg-sky-500/10 text-sky-400"
               onChange={(value) => setSortBy(value as typeof sortBy)}
@@ -1526,17 +1883,6 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
             >
               {sortDir === "desc" ? <ArrowDown size={12} /> : <ArrowUp size={12} />}
             </button>
-            <button
-              type="button"
-              className={`flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
-                hasActivity
-                  ? "border-orange-500/30 bg-orange-500/10 text-orange-400"
-                  : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
-              }`}
-              onClick={() => setHasActivity((v) => !v)}
-            >
-              My activity
-            </button>
           </div>
         </div>
 
@@ -1557,33 +1903,188 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
             </div>
           ) : (
             <>
-              {/* Unified list: groups rendered inline at first-member position */}
-              {(() => {
+              {groupByStatus ? (
+                /* ── Status-grouped view ── */
+                statusGroups.map((sg) => {
+                  const collapsed = collapsedStatusGroups.has(sg.status);
+                  return (
+                    <React.Fragment key={`sg-${sg.status}`}>
+                      <StatusGroupRow
+                        status={sg.status}
+                        categoryColor={STATUS_CATEGORY_COLORS[sg.category] ?? "bg-zinc-400"}
+                        count={sg.items.length}
+                        collapsed={collapsed}
+                        onToggle={() =>
+                          setCollapsedStatusGroups((prev) => {
+                            const next = new Set(prev);
+                            if (next.has(sg.status)) next.delete(sg.status);
+                            else next.add(sg.status);
+                            return next;
+                          })
+                        }
+                      />
+                      {!collapsed && (() => {
+                        const pendingSet = showGroupNamePrompt ? new Set(pendingGroupTaskIds) : null;
+                        const firstMemberToGroup = new Map<string, typeof taskGroups[number]>();
+                        for (const group of taskGroups) {
+                          const firstInStatus = sg.items.find((i) => group.task_ids.includes(i.id));
+                          if (firstInStatus) firstMemberToGroup.set(firstInStatus.id, group);
+                        }
+                        const pendingTickets = showGroupNamePrompt
+                          ? pendingGroupTaskIds
+                              .map((id) => sg.items.find((i) => i.id === id))
+                              .filter(Boolean)
+                              .map((i) => ({ id: i!.id, identifier: i!.identifier, title: i!.title, status: STATUS_LABELS[i!.status] ?? i!.status }))
+                          : [];
+                        const renderedGroups = new Set<string>();
+
+                        return sg.items.map((item) => {
+                          if (pendingSet?.has(item.id)) {
+                            if (item.id === pendingGroupTargetId && showGroupNamePrompt) {
+                              return (
+                                <GroupNamePrompt
+                                  key="__pending-group__"
+                                  tickets={pendingTickets}
+                                  onConfirm={handleCreateGroup}
+                                  onCancel={() => {
+                                    setShowGroupNamePrompt(false);
+                                    setPendingGroupTaskIds([]);
+                                    setPendingGroupTargetId(null);
+                                  }}
+                                />
+                              );
+                            }
+                            return null;
+                          }
+
+                          const group = firstMemberToGroup.get(item.id);
+                          if (group && !renderedGroups.has(group.id)) {
+                            renderedGroups.add(group.id);
+                            const groupItems = group.task_ids
+                              .map((id) => sg.items.find((i) => i.id === id))
+                              .filter(Boolean) as TrackerItem[];
+                            return (
+                              <React.Fragment key={`group-${group.id}`}>
+                                <FolderRow
+                                  groupId={group.id}
+                                  name={group.name}
+                                  count={groupItems.length}
+                                  collapsed={!!group.collapsed}
+                                  selected={selectedGroupTaskGroupId === group.id}
+                                  projectSlug={projectSlug}
+                                  onToggleCollapse={() => updateGroup(group.id, { collapsed: !group.collapsed })}
+                                  onSelect={() => pushSelection({ group: group.id, issue: null, run: null })}
+                                  onUngroup={() => {
+                                    void deleteGroup(group.id);
+                                    if (selectedGroupTaskGroupId === group.id) {
+                                      replaceSelection({ group: null });
+                                    }
+                                  }}
+                                />
+                                {!group.collapsed &&
+                                  groupItems.map((gi, giIdx) => (
+                                    <TicketRow
+                                      key={gi.id}
+                                      item={gi}
+                                      selected={selectedItem?.id === gi.id}
+                                      pinned={pinnedItemIds.has(gi.id)}
+                                      activeAgents={issueActiveAgents.get(gi.id)}
+                                      participants={participants}
+                                      draggable
+                                      multiSelected={multiSelectedItemIds.has(gi.id)}
+                                      treeConnector={giIdx === groupItems.length - 1 ? "last" : "mid"}
+                                      projectSlug={projectSlug}
+                                      stats={issueStats.get(gi.id)}
+                                      hideStatus
+                                      estimate={metadataMap.get(gi.id)?.estimate}
+                                      localLabels={metadataMap.get(gi.id)?.labels}
+                                      labelDefinitions={labelDefinitions}
+                                      allLabels={allLabels}
+                                      onToggleLabel={(label) => handleItemToggleLabel(gi.id, label)}
+                                      onAddLabel={handleItemAddLabel}
+                                      onSelect={(event) => {
+                                        if (event && (event.metaKey || event.ctrlKey)) {
+                                          toggleItemMultiSelect(gi.id);
+                                        } else {
+                                          pushSelection({
+                                            issue: gi.id,
+                                            run: null,
+                                            group: null,
+                                          });
+                                        }
+                                      }}
+                                      onTogglePin={() => togglePin(gi.id)}
+                                    />
+                                  ))}
+                              </React.Fragment>
+                            );
+                          }
+
+                          if (groupedItemIds.has(item.id)) {
+                            return null;
+                          }
+
+                          return (
+                            <TicketRow
+                              key={item.id}
+                              item={item}
+                              selected={selectedItem?.id === item.id}
+                              pinned={pinnedItemIds.has(item.id)}
+                              activeAgents={issueActiveAgents.get(item.id)}
+                              participants={participants}
+                              draggable
+                              multiSelected={multiSelectedItemIds.has(item.id)}
+                              projectSlug={projectSlug}
+                              stats={issueStats.get(item.id)}
+                              hideStatus
+                              estimate={metadataMap.get(item.id)?.estimate}
+                              localLabels={metadataMap.get(item.id)?.labels}
+                              labelDefinitions={labelDefinitions}
+                              allLabels={allLabels}
+                              onToggleLabel={(label) => handleItemToggleLabel(item.id, label)}
+                              onAddLabel={handleItemAddLabel}
+                              onSelect={(event) => {
+                                if (event && (event.metaKey || event.ctrlKey)) {
+                                  toggleItemMultiSelect(item.id);
+                                } else {
+                                  pushSelection({
+                                    issue: item.id,
+                                    run: null,
+                                    group: null,
+                                  });
+                                }
+                              }}
+                              onTogglePin={() => togglePin(item.id)}
+                            />
+                          );
+                        });
+                      })()}
+                    </React.Fragment>
+                  );
+                })
+              ) : (
+              /* ── Flat/folder view ── */
+              (() => {
                 const pendingSet = showGroupNamePrompt ? new Set(pendingGroupTaskIds) : null;
 
-                // Build a map: itemId → group (for the first member of each group)
                 const firstMemberToGroup = new Map<string, typeof taskGroups[number]>();
                 for (const group of taskGroups) {
-                  const firstInSort = sortedItems.find((i) => group.task_ids.includes(i.id));
+                  const firstInSort = labelFilteredItems.find((i) => group.task_ids.includes(i.id));
                   if (firstInSort) firstMemberToGroup.set(firstInSort.id, group);
                 }
 
-                // Pending group prompt: find insert position
                 const pendingTickets = showGroupNamePrompt
                   ? pendingGroupTaskIds
-                      .map((id) => sortedItems.find((i) => i.id === id))
+                      .map((id) => labelFilteredItems.find((i) => i.id === id))
                       .filter(Boolean)
                       .map((i) => ({ id: i!.id, identifier: i!.identifier, title: i!.title, status: STATUS_LABELS[i!.status] ?? i!.status }))
                   : [];
 
-                // Track which groups we've rendered
                 const renderedGroups = new Set<string>();
                 let looseIdx = 0;
 
-                return sortedItems.map((item) => {
-                  // Skip pending tickets
+                return labelFilteredItems.map((item) => {
                   if (pendingSet?.has(item.id)) {
-                    // Render prompt at target position
                     if (item.id === pendingGroupTargetId && showGroupNamePrompt) {
                       return (
                         <GroupNamePrompt
@@ -1601,12 +2102,11 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                     return null;
                   }
 
-                  // If this item is the first member of a group, render the group here
                   const group = firstMemberToGroup.get(item.id);
                   if (group && !renderedGroups.has(group.id)) {
                     renderedGroups.add(group.id);
                     const groupItems = group.task_ids
-                      .map((id) => sortedItems.find((i) => i.id === id))
+                      .map((id) => labelFilteredItems.find((i) => i.id === id))
                       .filter(Boolean) as TrackerItem[];
                     return (
                       <React.Fragment key={`group-${group.id}`}>
@@ -1643,6 +2143,13 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                               multiSelected={multiSelectedItemIds.has(gi.id)}
                               treeConnector={giIdx === groupItems.length - 1 ? "last" : "mid"}
                               projectSlug={projectSlug}
+                              stats={issueStats.get(gi.id)}
+                              estimate={metadataMap.get(gi.id)?.estimate}
+                              localLabels={metadataMap.get(gi.id)?.labels}
+                              labelDefinitions={labelDefinitions}
+                              allLabels={allLabels}
+                              onToggleLabel={(label) => handleItemToggleLabel(gi.id, label)}
+                              onAddLabel={handleItemAddLabel}
                               onSelect={(event) => {
                                 if (event && (event.metaKey || event.ctrlKey)) {
                                   toggleItemMultiSelect(gi.id);
@@ -1661,13 +2168,11 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                     );
                   }
 
-                  // Skip grouped items (already rendered with their group)
                   if (groupedItemIds.has(item.id)) return null;
 
-                  // Loose ticket
                   const currentLooseIdx = looseIdx++;
                   const prevLoose = currentLooseIdx > 0
-                    ? sortedItems.filter((i) => !groupedItemIds.has(i.id) && (!pendingSet || !pendingSet.has(i.id)))[currentLooseIdx - 1]
+                    ? labelFilteredItems.filter((i) => !groupedItemIds.has(i.id) && (!pendingSet || !pendingSet.has(i.id)))[currentLooseIdx - 1]
                     : null;
                   return (
                     <React.Fragment key={item.id}>
@@ -1685,6 +2190,13 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                         draggable
                         multiSelected={multiSelectedItemIds.has(item.id)}
                         projectSlug={projectSlug}
+                        stats={issueStats.get(item.id)}
+                        estimate={metadataMap.get(item.id)?.estimate}
+                        localLabels={metadataMap.get(item.id)?.labels}
+                        labelDefinitions={labelDefinitions}
+                        allLabels={allLabels}
+                        onToggleLabel={(label) => handleItemToggleLabel(item.id, label)}
+                        onAddLabel={handleItemAddLabel}
                         onSelect={(event) => {
                           if (event && (event.metaKey || event.ctrlKey)) {
                             toggleItemMultiSelect(item.id);
@@ -1701,7 +2213,7 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
                     </React.Fragment>
                   );
                 });
-              })()}
+              })())}
               {hasMore ? (
                 <div
                   ref={sentinelRef}
@@ -1716,11 +2228,23 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
             count={multiSelectedItemIds.size}
             onGroup={handleMultiSelectGroup}
             onClear={() => setMultiSelectedItemIds(new Set())}
+            onBulkRecap={handleBulkRecap}
+            onBulkPrompt={handleBulkPrompt}
+            onBulkEstimate={handleBulkEstimate}
+            onBulkAddLabel={handleBulkAddLabel}
+            onBulkRemoveLabel={handleBulkRemoveLabel}
+            onBulkStatus={handleBulkStatus}
+            statusOptions={itemStatusOptions}
+            participants={participants}
+            labels={allLabels}
+            onCreateLabel={handleCreateLabel}
+            selectedMetadata={selectedMetadata}
+            statusUpdating={bulkStatusUpdating}
           />
         </div>
         <DragOverlay dropAnimation={null}>
           {dragActiveId && (() => {
-            const dragItem = sortedItems.find((i) => i.id === dragActiveId);
+            const dragItem = sortedItemsRef.current.find((i) => i.id === dragActiveId);
             if (!dragItem) return null;
             return (
               <div className="flex items-center gap-3 rounded-lg border border-[var(--primary)]/30 bg-[var(--card-bg)] px-4 py-2.5 text-sm shadow-xl backdrop-blur-sm">
@@ -1737,7 +2261,7 @@ export default function TrackerBoard({ trackerType, projectId, projectSlug, init
         </DndContext>
       </div>
 
-      <ResizeHandle onResize={(delta) => setTicketPanelWidth((w) => { const next = Math.max(180, Math.min(600, w + delta)); persistLinearTicketPanelWidth(next); return next; })} />
+      <ResizeHandle onResize={(delta) => setTicketPanelWidth((w) => { const next = Math.max(280, Math.min(960, w + delta)); persistLinearTicketPanelWidth(next); return next; })} />
 
       {showRunScripts ? (
         <div