Function SortableTh

ui/src/components/AgentListView.tsx:212–245

({ col, label, className, textAlign = "left", sort, onSort }: SortableThProps)

};

function SortableTh({ col, label, className, textAlign = "left", sort, onSort }: SortableThProps) {
  const active = sort.key === col;
  return (
    <th
      scope="col"
      className={cn(
        "align-middle border-b border-border/50 bg-muted/20 px-3 py-2.5 text-left font-medium first:pl-4 last:pr-4",
        textAlign === "right" && "text-right",
        className,
      )}
      aria-sort={active ? (sort.dir === "asc" ? "ascending" : "descending") : "none"}
    >
      <button
        type="button"
        onClick={() => onSort(col)}
        className={cn(
          "inline-flex w-full max-w-full items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.1em] text-muted-foreground transition-colors hover:text-foreground",
          textAlign === "right" && "justify-end",
        )}
      >
        <span className="truncate">{label}</span>
        {active ? (
          sort.dir === "asc" ? (
            <ArrowUp className="h-3.5 w-3.5 shrink-0 text-primary" aria-hidden />
          ) : (
            <ArrowDown className="h-3.5 w-3.5 shrink-0 text-primary" aria-hidden />
          )
        ) : (
          <span className="inline-flex w-3.5 shrink-0" aria-hidden />
        )}
      </button>
    </th>
  );
}

function AgentListRow({ item, onAgentsChanged }: { item: AgentResponse; onAgentsChanged?: () => Promise<void> | void }) {
  const { agent, deploymentReady, accepted } = item;