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"> <div className="flex items-center gap-1.5">
<DollarSign className="h-3.5 w-3.5" /> <DollarSign className="h-3.5 w-3.5" />
<span> <span>
{formatCents(company.spentMonthlyCents)} /{" "} {formatCents(company.spentMonthlyCents)}
{formatCents(company.budgetMonthlyCents)} {company.budgetMonthlyCents > 0
? <> / {formatCents(company.budgetMonthlyCents)} <span className="text-xs">({budgetPct}%)</span></>
: <span className="text-xs ml-1">Unlimited budget</span>}
</span> </span>
{company.budgetMonthlyCents > 0 && (
<span className="text-xs">({budgetPct}%)</span>
)}
</div> </div>
<div className="flex items-center gap-1.5 ml-auto"> <div className="flex items-center gap-1.5 ml-auto">
<Calendar className="h-3.5 w-3.5" /> <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"> <CardContent className="p-4 space-y-3">
<div className="flex items-center justify-between"> <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">{PRESET_LABELS[preset]}</p>
<p className="text-sm text-muted-foreground"> {data.summary.budgetCents > 0 && (
{data.summary.utilizationPercent}% utilized <p className="text-sm text-muted-foreground">
</p> {data.summary.utilizationPercent}% utilized
</p>
)}
</div> </div>
<p className="text-2xl font-bold"> <p className="text-2xl font-bold">
{formatCents(data.summary.spendCents)}{" "} {formatCents(data.summary.spendCents)}{" "}
<span className="text-base font-normal text-muted-foreground"> <span className="text-base font-normal text-muted-foreground">
/ {formatCents(data.summary.budgetCents)} {data.summary.budgetCents > 0
? `/ ${formatCents(data.summary.budgetCents)}`
: "Unlimited budget"}
</span> </span>
</p> </p>
<div className="w-full h-2 bg-muted rounded-full overflow-hidden"> {data.summary.budgetCents > 0 && (
<div <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
className={`h-full rounded-full transition-all ${ <div
data.summary.utilizationPercent > 90 className={`h-full rounded-full transition-all ${
? "bg-red-400" data.summary.utilizationPercent > 90
: data.summary.utilizationPercent > 70 ? "bg-red-400"
? "bg-yellow-400" : data.summary.utilizationPercent > 70
: "bg-green-400" ? "bg-yellow-400"
}`} : "bg-green-400"
style={{ width: `${Math.min(100, data.summary.utilizationPercent)}%` }} }`}
/> style={{ width: `${Math.min(100, data.summary.utilizationPercent)}%` }}
</div> />
</div>
)}
</CardContent> </CardContent>
</Card> </Card>

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

@@ -211,7 +211,9 @@ export function Dashboard() {
onClick={() => navigate("/costs")} onClick={() => navigate("/costs")}
description={ description={
<span className="cursor-pointer" onClick={() => navigate("/costs")}> <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> </span>
} }
/> />

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

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