Add budget tabs and sidebar budget indicators
This commit is contained in:
Dotta
@@ -33,11 +33,13 @@ export function BudgetPolicyCard({
|
||||
onSave,
|
||||
isSaving,
|
||||
compact = false,
|
||||
variant = "card",
|
||||
}: {
|
||||
summary: BudgetPolicySummary;
|
||||
onSave?: (amountCents: number) => void;
|
||||
isSaving?: boolean;
|
||||
compact?: boolean;
|
||||
variant?: "card" | "plain";
|
||||
}) {
|
||||
const [draftBudget, setDraftBudget] = useState(centsInputValue(summary.amount));
|
||||
|
||||
@@ -49,6 +51,142 @@ export function BudgetPolicyCard({
|
||||
const canSave = typeof parsedDraft === "number" && parsedDraft !== summary.amount && Boolean(onSave);
|
||||
const progress = summary.amount > 0 ? Math.min(100, summary.utilizationPercent) : 0;
|
||||
const StatusIcon = summary.status === "hard_stop" ? ShieldAlert : summary.status === "warning" ? AlertTriangle : Wallet;
|
||||
const isPlain = variant === "plain";
|
||||
|
||||
const observedBudgetGrid = isPlain ? (
|
||||
<div className="grid gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">Observed</div>
|
||||
<div className="mt-2 text-xl font-semibold tabular-nums">{formatCents(summary.observedAmount)}</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
{summary.amount > 0 ? `${summary.utilizationPercent}% of limit` : "No cap configured"}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">Budget</div>
|
||||
<div className="mt-2 text-xl font-semibold tabular-nums">
|
||||
{summary.amount > 0 ? formatCents(summary.amount) : "Disabled"}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
Soft alert at {summary.warnPercent}%{summary.paused && summary.pauseReason ? ` · ${summary.pauseReason} pause` : ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="rounded-xl border border-border/70 bg-black/[0.18] px-4 py-3">
|
||||
<div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">Observed</div>
|
||||
<div className="mt-2 text-xl font-semibold tabular-nums">{formatCents(summary.observedAmount)}</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
{summary.amount > 0 ? `${summary.utilizationPercent}% of limit` : "No cap configured"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border/70 bg-black/[0.18] px-4 py-3">
|
||||
<div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">Budget</div>
|
||||
<div className="mt-2 text-xl font-semibold tabular-nums">
|
||||
{summary.amount > 0 ? formatCents(summary.amount) : "Disabled"}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
Soft alert at {summary.warnPercent}%{summary.paused && summary.pauseReason ? ` · ${summary.pauseReason} pause` : ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const progressSection = (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>Remaining</span>
|
||||
<span>{summary.amount > 0 ? formatCents(summary.remainingAmount) : "Unlimited"}</span>
|
||||
</div>
|
||||
<div className={cn("h-2 overflow-hidden rounded-full", isPlain ? "bg-border/70" : "bg-muted/70")}>
|
||||
<div
|
||||
className={cn(
|
||||
"h-full rounded-full transition-[width,background-color] duration-200",
|
||||
summary.status === "hard_stop"
|
||||
? "bg-red-400"
|
||||
: summary.status === "warning"
|
||||
? "bg-amber-300"
|
||||
: "bg-emerald-300",
|
||||
)}
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const pausedPane = summary.paused ? (
|
||||
<div className="flex items-start gap-2 rounded-xl border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-100">
|
||||
<PauseCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<div>
|
||||
{summary.scopeType === "project"
|
||||
? "Execution is paused for this project until the budget is raised or the incident is dismissed."
|
||||
: "Heartbeats are paused for this scope until the budget is raised or the incident is dismissed."}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
const saveSection = onSave ? (
|
||||
<div className={cn("flex flex-col gap-3 sm:flex-row sm:items-end", isPlain ? "" : "rounded-xl border border-border/70 bg-background/50 p-3")}>
|
||||
<div className="min-w-0 flex-1">
|
||||
<label className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Budget (USD)
|
||||
</label>
|
||||
<Input
|
||||
value={draftBudget}
|
||||
onChange={(event) => setDraftBudget(event.target.value)}
|
||||
className="mt-2"
|
||||
inputMode="decimal"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (typeof parsedDraft === "number" && onSave) onSave(parsedDraft);
|
||||
}}
|
||||
disabled={!canSave || isSaving || parsedDraft === null}
|
||||
>
|
||||
{isSaving ? "Saving..." : summary.amount > 0 ? "Update budget" : "Set budget"}
|
||||
</Button>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
if (isPlain) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between gap-6">
|
||||
<div>
|
||||
<div className="text-[11px] uppercase tracking-[0.22em] text-muted-foreground">
|
||||
{summary.scopeType}
|
||||
</div>
|
||||
<div className="mt-2 text-xl font-semibold">{summary.scopeName}</div>
|
||||
<div className="mt-2 text-sm text-muted-foreground">{windowLabel(summary.windowKind)}</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.18em]",
|
||||
summary.status === "hard_stop"
|
||||
? "text-red-300"
|
||||
: summary.status === "warning"
|
||||
? "text-amber-200"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<StatusIcon className="h-3.5 w-3.5" />
|
||||
{summary.paused ? "Paused" : summary.status === "warning" ? "Warning" : summary.status === "hard_stop" ? "Hard stop" : "Healthy"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{observedBudgetGrid}
|
||||
{progressSection}
|
||||
{pausedPane}
|
||||
{saveSection}
|
||||
{parsedDraft === null ? (
|
||||
<p className="text-xs text-destructive">Enter a valid non-negative dollar amount.</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={cn("overflow-hidden border-border/70 bg-card/80", compact ? "" : "shadow-[0_20px_80px_-40px_rgba(0,0,0,0.55)]")}>
|
||||
@@ -68,84 +206,12 @@ export function BudgetPolicyCard({
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className={cn("space-y-4", compact ? "px-4 pb-4 pt-0" : "px-5 pb-5 pt-0")}>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="rounded-xl border border-border/70 bg-black/[0.18] px-4 py-3">
|
||||
<div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">Observed</div>
|
||||
<div className="mt-2 text-xl font-semibold tabular-nums">{formatCents(summary.observedAmount)}</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
{summary.amount > 0 ? `${summary.utilizationPercent}% of limit` : "No cap configured"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border/70 bg-black/[0.18] px-4 py-3">
|
||||
<div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">Budget</div>
|
||||
<div className="mt-2 text-xl font-semibold tabular-nums">
|
||||
{summary.amount > 0 ? formatCents(summary.amount) : "Disabled"}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
Soft alert at {summary.warnPercent}%{summary.paused && summary.pauseReason ? ` · ${summary.pauseReason} pause` : ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>Remaining</span>
|
||||
<span>{summary.amount > 0 ? formatCents(summary.remainingAmount) : "Unlimited"}</span>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-muted/70">
|
||||
<div
|
||||
className={cn(
|
||||
"h-full rounded-full transition-[width,background-color] duration-200",
|
||||
summary.status === "hard_stop"
|
||||
? "bg-red-400"
|
||||
: summary.status === "warning"
|
||||
? "bg-amber-300"
|
||||
: "bg-emerald-300",
|
||||
)}
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{summary.paused ? (
|
||||
<div className="flex items-start gap-2 rounded-xl border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-100">
|
||||
<PauseCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<div>
|
||||
{summary.scopeType === "project"
|
||||
? "Execution is paused for this project until the budget is raised or the incident is dismissed."
|
||||
: "Heartbeats are paused for this scope until the budget is raised or the incident is dismissed."}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{onSave ? (
|
||||
<div className="rounded-xl border border-border/70 bg-background/50 p-3">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-end">
|
||||
<div className="min-w-0 flex-1">
|
||||
<label className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Budget (USD)
|
||||
</label>
|
||||
<Input
|
||||
value={draftBudget}
|
||||
onChange={(event) => setDraftBudget(event.target.value)}
|
||||
className="mt-2"
|
||||
inputMode="decimal"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (typeof parsedDraft === "number" && onSave) onSave(parsedDraft);
|
||||
}}
|
||||
disabled={!canSave || isSaving || parsedDraft === null}
|
||||
>
|
||||
{isSaving ? "Saving..." : summary.amount > 0 ? "Update budget" : "Set budget"}
|
||||
</Button>
|
||||
</div>
|
||||
{parsedDraft === null ? (
|
||||
<p className="mt-2 text-xs text-destructive">Enter a valid non-negative dollar amount.</p>
|
||||
) : null}
|
||||
</div>
|
||||
{observedBudgetGrid}
|
||||
{progressSection}
|
||||
{pausedPane}
|
||||
{saveSection}
|
||||
{parsedDraft === null ? (
|
||||
<p className="text-xs text-destructive">Enter a valid non-negative dollar amount.</p>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
13
ui/src/components/BudgetSidebarMarker.tsx
Normal file
13
ui/src/components/BudgetSidebarMarker.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { DollarSign } from "lucide-react";
|
||||
|
||||
export function BudgetSidebarMarker({ title = "Paused by budget" }: { title?: string }) {
|
||||
return (
|
||||
<span
|
||||
title={title}
|
||||
aria-label={title}
|
||||
className="ml-auto inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-red-500/90 text-white shadow-[0_0_0_1px_rgba(255,255,255,0.08)]"
|
||||
>
|
||||
<DollarSign className="h-3 w-3" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -20,6 +20,7 @@ import { projectsApi } from "../api/projects";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { cn, projectRouteRef } from "../lib/utils";
|
||||
import { useProjectOrder } from "../hooks/useProjectOrder";
|
||||
import { BudgetSidebarMarker } from "./BudgetSidebarMarker";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
@@ -88,6 +89,7 @@ function SortableProjectItem({
|
||||
style={{ backgroundColor: project.color ?? "#6366f1" }}
|
||||
/>
|
||||
<span className="flex-1 truncate">{project.name}</span>
|
||||
{project.pauseReason === "budget" ? <BudgetSidebarMarker title="Project paused by budget" /> : null}
|
||||
</NavLink>
|
||||
{projectSidebarSlots.length > 0 && (
|
||||
<div className="ml-5 flex flex-col gap-0.5">
|
||||
|
||||
Reference in New Issue
Block a user