Skip to content

Commit b96da79

Browse files
committed
feat: add animated plan exhaustion race banner to insights page
Visualizes plan exhaustion as a running race where all users start from the left and run right — exceeded users cross the finish line while safe users stop before it. Made-with: Cursor
1 parent 4eaaeb9 commit b96da79

File tree

2 files changed

+385
-4
lines changed

2 files changed

+385
-4
lines changed

src/app/insights/insights-client.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ interface InsightsData {
133133

134134
import { formatDateTick, formatDateLabel } from "@/lib/date-utils";
135135
import { ExpandableCard } from "@/components/expandable-card";
136+
import { PlanExhaustionRaceBanner } from "@/components/plan-exhaustion-race";
136137

137138
interface GroupInfo {
138139
id: string;
@@ -343,11 +344,19 @@ export function InsightsClient({
343344
<MiniKpi label="MCP Tools" value={data.mcp.length.toString()} sub="unique tools" />
344345
</div>
345346

346-
{/* Plan Exhaustion (compact) */}
347+
{/* Plan Exhaustion Race Banner + Detail */}
347348
{data.planExhaustion.summary.users_exhausted > 0 && (
348-
<ExpandableCard>
349-
{(exp) => <PlanExhaustionSection data={data.planExhaustion} expanded={exp} />}
350-
</ExpandableCard>
349+
<>
350+
<PlanExhaustionRaceBanner
351+
exhausted={data.planExhaustion.summary.users_exhausted}
352+
total={data.planExhaustion.summary.total_active}
353+
pctExhausted={data.planExhaustion.summary.pct_exhausted}
354+
users={data.planExhaustion.users}
355+
/>
356+
<ExpandableCard>
357+
{(exp) => <PlanExhaustionSection data={data.planExhaustion} expanded={exp} />}
358+
</ExpandableCard>
359+
</>
351360
)}
352361

353362
{/* Model Cost vs Value */}

0 commit comments

Comments
 (0)