aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show "Unlimited budget" when budget is $0

Browse Source 
When budgetCents is 0 (no budget set), the UI now shows "Unlimited
budget" instead of misleading "0% of $0.00 budget" throughout:

- Dashboard: metric card shows "Unlimited budget" instead of percentage
- Companies: shows "Unlimited budget" label instead of "/ $0.00"
- Costs: hides utilization percent and progress bar, shows "Unlimited budget"
- Inbox: suppresses budget utilization alert when no budget is set

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-20 12:56:04 -06:00
parent a621b55e90
commit b49fc7451a
4 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/pages/Companies.tsx
View File

@@ -247,12 +247,11 @@ export function Companies() {
<div className="flex items-center gap-1.5">
<DollarSign className="h-3.5 w-3.5" />
<span>
{formatCents(company.spentMonthlyCents)} /{" "}
{formatCents(company.budgetMonthlyCents)}
{formatCents(company.spentMonthlyCents)}
{company.budgetMonthlyCents > 0
? <> / {formatCents(company.budgetMonthlyCents)} <span className="text-xs">({budgetPct}%)</span></>
: <span className="text-xs ml-1">Unlimited budget</span>}
</span>
{company.budgetMonthlyCents > 0 && (
<span className="text-xs">({budgetPct}%)</span>
)}
</div>
<div className="flex items-center gap-1.5 ml-auto">
<Calendar className="h-3.5 w-3.5" />

38
ui/src/pages/Costs.tsx
View File

@@ -134,28 +134,34 @@ export function Costs() {
<CardContent className="p-4 space-y-3">
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">{PRESET_LABELS[preset]}</p>
<p className="text-sm text-muted-foreground">
{data.summary.utilizationPercent}% utilized
</p>
{data.summary.budgetCents > 0 && (
<p className="text-sm text-muted-foreground">
{data.summary.utilizationPercent}% utilized
</p>
)}
</div>
<p className="text-2xl font-bold">
{formatCents(data.summary.spendCents)}{" "}
<span className="text-base font-normal text-muted-foreground">
/ {formatCents(data.summary.budgetCents)}
{data.summary.budgetCents > 0
? `/ ${formatCents(data.summary.budgetCents)}`
: "Unlimited budget"}
</span>
</p>
<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all ${
data.summary.utilizationPercent > 90
? "bg-red-400"
: data.summary.utilizationPercent > 70
? "bg-yellow-400"
: "bg-green-400"
}`}
style={{ width: `${Math.min(100, data.summary.utilizationPercent)}%` }}
/>
</div>
{data.summary.budgetCents > 0 && (
<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all ${
data.summary.utilizationPercent > 90
? "bg-red-400"
: data.summary.utilizationPercent > 70
? "bg-yellow-400"
: "bg-green-400"
}`}
style={{ width: `${Math.min(100, data.summary.utilizationPercent)}%` }}
/>
</div>
)}
</CardContent>
</Card>

4
ui/src/pages/Dashboard.tsx
View File

@@ -211,7 +211,9 @@ export function Dashboard() {
onClick={() => navigate("/costs")}
description={
<span className="cursor-pointer" onClick={() => navigate("/costs")}>
{data.costs.monthUtilizationPercent}% of {formatCents(data.costs.monthBudgetCents)} budget
{data.costs.monthBudgetCents > 0
? `${data.costs.monthUtilizationPercent}% of ${formatCents(data.costs.monthBudgetCents)} budget`
: "Unlimited budget"}
</span>
}
/>

4
ui/src/pages/Inbox.tsx
View File

@@ -195,7 +195,7 @@ export function Inbox() {
!!dashboard && dashboard.agents.error > 0 && !hasRunFailures;
const hasAlerts =
!!dashboard &&
(showAggregateAgentError || dashboard.costs.monthUtilizationPercent >= 80);
(showAggregateAgentError || (dashboard.costs.monthBudgetCents > 0 && dashboard.costs.monthUtilizationPercent >= 80));
const hasStale = staleIssues.length > 0;
const hasContent = hasActionableApprovals || hasRunFailures || hasAlerts || hasStale;
@@ -339,7 +339,7 @@ export function Inbox() {
</span>
</div>
)}
{dashboard!.costs.monthUtilizationPercent >= 80 && (
{dashboard!.costs.monthBudgetCents > 0 && dashboard!.costs.monthUtilizationPercent >= 80 && (
<div
className="flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50"
onClick={() => navigate("/costs")}