Add budget tabs and sidebar budget indicators

This commit is contained in:
Dotta
2026-03-16 08:12:38 -05:00
parent 76e6cc08a6
commit 411952573e
7 changed files with 224 additions and 112 deletions

View File

@@ -10,6 +10,7 @@ import { heartbeatsApi } from "../api/heartbeats";
import { queryKeys } from "../lib/queryKeys";
import { cn, agentRouteRef, agentUrl } from "../lib/utils";
import { AgentIcon } from "./AgentIconPicker";
import { BudgetSidebarMarker } from "./BudgetSidebarMarker";
import {
Collapsible,
CollapsibleContent,
@@ -124,15 +125,22 @@ export function SidebarAgents() {
>
<AgentIcon icon={agent.icon} className="shrink-0 h-3.5 w-3.5 text-muted-foreground" />
<span className="flex-1 truncate">{agent.name}</span>
{runCount > 0 && (
{(agent.pauseReason === "budget" || runCount > 0) && (
<span className="ml-auto flex items-center gap-1.5 shrink-0">
<span className="relative flex h-2 w-2">
<span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
</span>
<span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">
{runCount} live
</span>
{agent.pauseReason === "budget" ? (
<BudgetSidebarMarker title="Agent paused by budget" />
) : null}
{runCount > 0 ? (
<span className="relative flex h-2 w-2">
<span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
</span>
) : null}
{runCount > 0 ? (
<span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">
{runCount} live
</span>
) : null}
</span>
)}
</NavLink>