Function AgentNav

notfair-cmo/src/components/agent-nav.tsx:44–100

({ projectSlug, agents, inFlightCounts = {} }: Props)

};

export function AgentNav({ projectSlug, agents, inFlightCounts = {} }: Props) {
  const pathname = usePathname();
  const live = useLiveCounts();
  const counts: Record<string, number> = { ...inFlightCounts, ...live.agents };

  return (
    <SidebarMenu>
      {agents.map((a) => {
        // Every agent lands on Chat by default — users start by talking to
        // the agent. Tasks tab (the audit/history view of filed work) is one
        // click away.
        const href = projectHref(projectSlug, `/agents/${a.slug}/chat`);
        const agentBase = `/${projectSlug}/agents/${a.slug}`;
        const isActive =
          pathname === agentBase || pathname?.startsWith(`${agentBase}/`);
        const liveCount = counts[a.key] ?? 0;
        const rolePalette = a.template_key ? colorForRole(a.template_key) : null;
        return (
          <SidebarMenuItem key={a.key}>
            <SidebarMenuButton asChild isActive={isActive}>
              <Link href={href}>
                {a.template_key ? (
                  <AgentAvatar role={a.template_key} size={20} />
                ) : (
                  <Bot />
                )}
                <span className="truncate">{a.name}</span>
                {a.role_label && rolePalette && (
                  <span
                    className={cn(
                      "ml-1 rounded-[4px] border px-1.5 py-[1px] text-[9.5px] font-medium uppercase tracking-wide leading-none",
                      rolePalette.chip,
                    )}
                  >
                    {a.role_label}
                  </span>
                )}
                {liveCount > 0 && (
                  <span
                    className="ml-auto inline-flex items-center gap-1.5"
                    role="status"
                    aria-label={`${liveCount} running`}
                  >
                    <span aria-hidden className="ns-dot ns-dot-live" />
                    <span className="text-[10px] font-semibold tabular-nums text-[hsl(var(--notfair-accent))]">
                      {liveCount}
                    </span>
                  </span>
                )}
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        );
      })}
    </SidebarMenu>
  );
}