g1t/apps/web/app/components/spike-banner.tsx
Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Fast pages, required checks on the branch, self-hosted runners, honest incidents | 1 | import { AlertTriangle, OctagonX, Play } from "lucide-react"; |
| 2 | import { Form } from "react-router"; | |
| 3 | ||
| 4 | import type { Entitlements } from "@g1t/contracts"; | |
| 5 | ||
| 6 | import { dollars } from "../lib/billing"; | |
| 7 | import { Button } from "./ui"; | |
| 8 | ||
| 9 | /** | |
| 10 | * Compute paused by a spend spike, with the owners' choice: keep going for | |
| 11 | * 24 hours, or stop. Also a hold by g1t, which only g1t lifts. Posts to the | |
| 12 | * workspace's billing page, so it works from anywhere in the app. | |
| 13 | */ | |
| 14 | export function SpikeBanner({ | |
| 15 | slug, | |
| 16 | entitlements, | |
| 17 | owner, | |
| 18 | compact = false, | |
| 19 | }: { | |
| 20 | slug: string; | |
| 21 | entitlements: Pick<Entitlements, "paused" | "spike">; | |
| 22 | owner: boolean; | |
| 23 | compact?: boolean; | |
| 24 | }) { | |
| 25 | const spike = entitlements.spike?.status === "open" ? entitlements.spike : null; | |
| 26 | if (!spike && !entitlements.paused) return null; | |
| 27 | const text = spike | |
| 28 | ? `Spending spiked: ${dollars(spike.hourMicros)} in the last hour, against a usual ${dollars(spike.averageMicros)}. New agents, checks and builds wait until an owner decides; work already running finishes.` | |
| 29 | : `g1t paused new compute for this workspace: ${entitlements.paused}`; | |
| 30 | return ( | |
| 31 | <div | |
| 32 | id="spike" | |
| 33 | role="alert" | |
| 34 | className={ | |
| 35 | compact | |
| 36 | ? "flex flex-wrap items-center justify-center gap-x-4 gap-y-2 border-b border-danger/30 bg-danger/10 px-4 py-2 text-sm" | |
| 37 | : "mb-6 scroll-mt-20 rounded-xl border border-danger/40 bg-danger/5 p-5" | |
| 38 | } | |
| 39 | > | |
| 40 | <p className={compact ? "flex items-center gap-2" : "flex gap-2.5 text-sm"}> | |
| 41 | <AlertTriangle size={compact ? 15 : 17} className="shrink-0 text-danger" /> | |
| 42 | <span>{compact ? (spike ? `${slug}: spending spiked, so new compute is paused.` : `${slug}: new compute is paused.`) : text}</span> | |
| 43 | </p> | |
| 44 | {spike && owner ? ( | |
| 45 | <Form method="post" action={`/${slug}/-/billing`} className={compact ? "flex gap-2" : "mt-4 flex flex-wrap gap-2"}> | |
| 46 | <input type="hidden" name="intent" value="spike" /> | |
| 47 | <Button variant="accent" type="submit" name="decision" value="keep"> | |
| 48 | <Play size={14} /> | |
| 49 | Keep going | |
| 50 | </Button> | |
| 51 | <Button variant="quiet" type="submit" name="decision" value="stop"> | |
| 52 | <OctagonX size={14} /> | |
| 53 | Stop | |
| 54 | </Button> | |
| 55 | </Form> | |
| 56 | ) : spike ? ( | |
| 57 | <p className={compact ? "text-xs text-muted" : "mt-3 text-sm text-muted"}>An owner chooses Keep going or Stop on Billing.</p> | |
| 58 | ) : ( | |
| 59 | <p className={compact ? "text-xs text-muted" : "mt-3 text-sm text-muted"}> | |
| 60 | Write to <a href="mailto:hey@flagon.io" className="underline underline-offset-2">hey@flagon.io</a> to have it looked at. | |
| 61 | </p> | |
| 62 | )} | |
| 63 | {!compact && spike && ( | |
| 64 | <p className="mt-3 text-xs text-faint"> | |
| 65 | Keep going lets work start again for 24 hours, unless spending doubles again first. Stop keeps new compute paused until you | |
| 66 | choose Keep going. | |
| 67 | </p> | |
| 68 | )} | |
| 69 | </div> | |
| 70 | ); | |
| 71 | } |