Function TaskGroupListItem

src/browser/components/ProjectSidebar/TaskGroupListItem.tsx:45–158

(props: TaskGroupListItemProps)

}

export function TaskGroupListItem(props: TaskGroupListItemProps) {
  const hasRunningWork = props.runningCount > 0;
  const aggregateState = getAggregateVisualState(props);
  const statusDescriptionId = `task-group-status-${props.groupId}`;
  const paddingLeft = getSidebarItemPaddingLeft(props.depth);
  const KindGlyph = props.kind === "workflow" ? Workflow : Layers3;
  const showProgressFraction = props.kind !== "workflow";
  const statusParts: string[] = [];
  if (props.runningCount > 0) {
    statusParts.push(`${props.runningCount} running`);
  }
  if (props.queuedCount > 0) {
    statusParts.push(`${props.queuedCount} queued`);
  }
  if (props.completedCount > 0) {
    statusParts.push(`${props.completedCount} completed`);
  }
  if (props.interruptedCount > 0) {
    statusParts.push(`${props.interruptedCount} interrupted`);
  }
  if (props.visibleCount !== props.totalCount) {
    statusParts.push(`${props.visibleCount}/${props.totalCount} visible`);
  }

  return (
    <div
      role="button"
      tabIndex={0}
      aria-expanded={props.isExpanded}
      aria-label={`${props.isExpanded ? "Collapse" : "Expand"} task group ${props.title}`}
      aria-describedby={statusDescriptionId}
      data-testid={`task-group-${props.groupId}`}
      data-running={hasRunningWork}
      data-aggregate-state={aggregateState}
      className={cn(
        "bg-surface-primary relative flex items-start rounded-l-sm py-2 pr-2 select-none transition-all duration-150 hover:bg-surface-secondary",
        props.sectionId != null ? "ml-2" : "ml-0",
        hasRunningWork && "bg-surface-secondary",
        props.isSelected && "bg-surface-secondary"
      )}
      style={{ paddingLeft }}
      onClick={() => {
        props.onToggle();
      }}
      onKeyDown={(event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          props.onToggle();
        }
      }}
    >
      {/* Leading slot mirrors agent rows: the sub-agent connector elbow lands on
          the status dot center, so the header reads as part of the tree. */}
      <StatusDot state={aggregateState} isSubAgent />
      {/* Expanded member rows keep their shared rail one-and-a-half indent steps
          in (getTaskGroupMemberDepth), which is exactly this chevron's center -
          the disclosure control visually anchors the member trunk. */}
      <span