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.
| The Runners page shows the machines a workspace's agents and workflow jobs run on, in Workspace under Compute: g1t's cloud beside your own runners, what each is running now with a link to it, what's waiting, this month's machine time and its cost (your own runners' free), where agent work and workflow jobs run, adding a runner, and groups; runner_activity in Actions says what runs where, work handed to your runners keeps its agent run, and the self-hosted runners guide says how. | 1 | import { ArrowRight, Bot, Boxes, Cloud, Cpu, Laptop, Plus, ServerCog, Workflow } from "lucide-react"; |
| 2 | import type { ReactNode } from "react"; | |
| 3 | import { Link } from "react-router"; | |
| 4 | ||
| 5 | import { RUN_KIND_LABEL, type Runner, type RunKind } from "@g1t/contracts"; | |
| 6 | ||
| Money is written one way. A single formatter turns millionths of a dollar into dollars, rounding half up on whole micros rather than on a float, so the same sum reads the same on every page: under a cent reads <$0.01 on a total and exactly nothing is $0.00, while the statement's lines, a session's receipt, the price book and an agent's effort costs carry up to four places where the fraction of a cent is the point; the six formatters that each rounded their own way are gone. This month is the calendar month in UTC from its first day to today everywhere, and billing counts the month's not-yet-closed usage in any range that reaches into the current month, so the top bar's pill, Spend, Home and Usage ask for the same days and get the same figure; Home now reads the usage report the others read instead of adding up statements. Usage's pending sentence says what of that usage the close will charge after the discount and included usage, which the billing API returns as pending_charged_micros. A reconciliation test holds the pill, Spend, Home and Usage to one number for one month. The usage and billing guide says how amounts are written and what this month means. | 7 | import { money } from "../lib/money"; |
| The Runners page shows the machines a workspace's agents and workflow jobs run on, in Workspace under Compute: g1t's cloud beside your own runners, what each is running now with a link to it, what's waiting, this month's machine time and its cost (your own runners' free), where agent work and workflow jobs run, adding a runner, and groups; runner_activity in Actions says what runs where, work handed to your runners keeps its agent run, and the self-hosted runners guide says how. | 8 | import { type CloudWork, machineTime, perMinute } from "../lib/runners"; |
| 9 | import type { RunnersAction, RunnersPageData } from "../lib/runners.server"; | |
| 10 | import { Groups, NewRunner, RunnerRow, RunnerSettingsForm, STATUS } from "./runners"; | |
| 11 | import { EmptyState, ErrorText, TimeAgo } from "./ui"; | |
| 12 | import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"; | |
| 13 | ||
| 14 | /** The most of what runs on g1t's cloud the card lists before saying how many more. */ | |
| 15 | const CLOUD_SHOWN = 6; | |
| 16 | ||
| 17 | /** A small label that something is coming. */ | |
| 18 | function Coming() { | |
| 19 | return <span className="shrink-0 rounded-full px-1.5 py-px text-[0.625rem] font-medium tracking-wide text-muted uppercase ring-1 ring-line">Coming</span>; | |
| 20 | } | |
| 21 | ||
| 22 | function Section({ id, title, about, action, children }: { id?: string; title: string; about?: ReactNode; action?: ReactNode; children: ReactNode }) { | |
| 23 | return ( | |
| 24 | <section id={id} className="scroll-mt-6 space-y-3"> | |
| 25 | <div className="flex flex-wrap items-end justify-between gap-x-4 gap-y-1"> | |
| 26 | <div className="min-w-0"> | |
| 27 | <h2 className="text-base font-semibold tracking-tight">{title}</h2> | |
| 28 | {about && <div className="mt-0.5 text-sm text-muted">{about}</div>} | |
| 29 | </div> | |
| 30 | {action} | |
| 31 | </div> | |
| 32 | {children} | |
| 33 | </section> | |
| 34 | ); | |
| 35 | } | |
| 36 | ||
| 37 | /** One figure in a place's card: a label and its value. */ | |
| 38 | function Figure({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) { | |
| 39 | return ( | |
| 40 | <div className="flex items-baseline justify-between gap-3 py-2 text-sm"> | |
| 41 | <dt className="text-muted"> | |
| 42 | {hint ? ( | |
| 43 | <Tooltip> | |
| 44 | <TooltipTrigger asChild> | |
| 45 | <span className="cursor-help underline decoration-line-strong decoration-dotted underline-offset-4">{label}</span> | |
| 46 | </TooltipTrigger> | |
| 47 | <TooltipContent>{hint}</TooltipContent> | |
| 48 | </Tooltip> | |
| 49 | ) : ( | |
| 50 | label | |
| 51 | )} | |
| 52 | </dt> | |
| 53 | <dd className="min-w-0 text-right text-fg tabular-nums">{children}</dd> | |
| 54 | </div> | |
| 55 | ); | |
| 56 | } | |
| 57 | ||
| 58 | function Unknown({ what }: { what: string }) { | |
| 59 | return <span className="text-faint">{what} didn't answer</span>; | |
| 60 | } | |
| 61 | ||
| 62 | function PlaceCard({ icon, title, tag, about, headline, children }: { icon: ReactNode; title: string; tag: ReactNode; about: string; headline: ReactNode; children: ReactNode }) { | |
| 63 | return ( | |
| 64 | <section className="flex min-w-0 flex-col rounded-2xl border border-line bg-surface"> | |
| 65 | <header className="px-5 pt-4"> | |
| 66 | <div className="flex items-center gap-2"> | |
| 67 | <span className="grid size-7 shrink-0 place-items-center rounded-lg bg-raised text-fg-soft">{icon}</span> | |
| 68 | <h2 className="text-sm font-semibold">{title}</h2> | |
| 69 | <span className="ml-auto">{tag}</span> | |
| 70 | </div> | |
| 71 | <p className="mt-2 text-sm leading-relaxed text-muted">{about}</p> | |
| 72 | </header> | |
| 73 | <div className="px-5 pt-4">{headline}</div> | |
| 74 | <dl className="mt-2 divide-y divide-line border-t border-line px-5 py-1">{children}</dl> | |
| 75 | </section> | |
| 76 | ); | |
| 77 | } | |
| 78 | ||
| 79 | function kindLabel(work: CloudWork): string { | |
| 80 | if (work.kind === "workflow") return "Workflow job"; | |
| 81 | return RUN_KIND_LABEL[work.detail as RunKind] ?? "Agent run"; | |
| 82 | } | |
| 83 | ||
| 84 | function CloudList({ data }: { data: RunnersPageData }) { | |
| 85 | const cloud = data.cloud; | |
| 86 | if (!cloud) return <p className="px-5 py-4 text-sm text-muted">What runs on g1t's cloud can't be read right now.</p>; | |
| 87 | if (cloud.running.length === 0) { | |
| 88 | return ( | |
| 89 | <p className="px-5 py-4 text-sm text-muted"> | |
| 90 | Nothing is running here now. A sandbox starts for each agent run or job and stops when it ends{cloud.queued > 0 ? `; ${cloud.queued} waiting to start` : ""}. | |
| 91 | </p> | |
| 92 | ); | |
| 93 | } | |
| 94 | const shown = cloud.running.slice(0, CLOUD_SHOWN); | |
| 95 | const rest = cloud.running.length - shown.length; | |
| 96 | return ( | |
| 97 | <ul className="divide-y divide-line"> | |
| 98 | {shown.map((work) => ( | |
| 99 | <li key={`${work.kind}:${work.id}`} className="flex items-center gap-3 px-5 py-2.5"> | |
| 100 | <span className="grid size-6 shrink-0 place-items-center rounded-md bg-info/12 text-info" aria-hidden> | |
| 101 | {work.kind === "agent" ? <Bot size={13} /> : <Workflow size={13} />} | |
| 102 | </span> | |
| 103 | <div className="min-w-0 grow"> | |
| 104 | <Link to={work.href} className="block truncate text-sm text-fg hover:underline"> | |
| 105 | {work.title} | |
| 106 | </Link> | |
| 107 | <p className="truncate text-xs text-muted"> | |
| 108 | {kindLabel(work)} · {work.repo} | |
| 109 | </p> | |
| 110 | </div> | |
| 111 | {work.startedAt && ( | |
| 112 | <span className="shrink-0 text-xs text-faint"> | |
| 113 | <TimeAgo at={work.startedAt} /> | |
| 114 | </span> | |
| 115 | )} | |
| 116 | </li> | |
| 117 | ))} | |
| 118 | {(rest > 0 || cloud.more || cloud.queued > 0) && ( | |
| 119 | <li className="px-5 py-2.5 text-xs text-muted"> | |
| 120 | {[rest > 0 || cloud.more ? `${rest > 0 ? rest : "More"}${cloud.more ? "+" : ""} more running` : null, cloud.queued > 0 ? `${cloud.queued} waiting to start` : null] | |
| 121 | .filter(Boolean) | |
| 122 | .join(" · ")} | |
| 123 | </li> | |
| 124 | )} | |
| 125 | </ul> | |
| 126 | ); | |
| 127 | } | |
| 128 | ||
| 129 | function StatusCounts({ runners }: { runners: Runner[] }) { | |
| 130 | const counts = { busy: 0, online: 0, offline: 0 } as Record<Runner["status"], number>; | |
| 131 | for (const runner of runners) counts[runner.status] += 1; | |
| 132 | return ( | |
| 133 | <ul className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted"> | |
| 134 | {(["busy", "online", "offline"] as const).map((status) => ( | |
| 135 | <li key={status} className="flex items-center gap-1.5"> | |
| 136 | <span className={`size-2 rounded-full ${STATUS[status].dot}`} aria-hidden /> | |
| 137 | <span className="text-fg tabular-nums">{counts[status]}</span> {STATUS[status].label.toLowerCase()} | |
| 138 | </li> | |
| 139 | ))} | |
| 140 | </ul> | |
| 141 | ); | |
| 142 | } | |
| 143 | ||
| 144 | /** The workspace's Runners page: g1t's cloud and its own runners, side by side. */ | |
| 145 | export function RunnersPage({ data, action, slug }: { data: RunnersPageData; action: RunnersAction | undefined; slug: string }) { | |
| 146 | const own = data.runners; | |
| 147 | const online = own.filter((runner) => runner.status !== "offline").length; | |
| 148 | const cost = data.cost; | |
| 149 | const running = data.cloud?.running.length ?? null; | |
| 150 | const usage = `/${slug}/-/usage`; | |
| 151 | return ( | |
| 152 | <div className="space-y-10"> | |
| 153 | <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"> | |
| 154 | <div className="min-w-0"> | |
| 155 | <h1 className="text-[1.75rem] leading-tight font-semibold tracking-tight">Runners</h1> | |
| 156 | <p className="mt-1.5 max-w-2xl text-sm leading-relaxed text-muted"> | |
| 157 | The machines your agents and workflow jobs run on. g1t's cloud needs nothing set up; your own runners are any machine with{" "} | |
| 158 | <code className="font-mono text-fg-soft">g1t-runner</code> on it, and time on them is free. | |
| 159 | </p> | |
| 160 | </div> | |
| 161 | <a | |
| 162 | href="#add" | |
| 163 | className="inline-flex h-9 shrink-0 items-center gap-1.5 self-start rounded-lg bg-accent px-3.5 text-sm font-medium text-bg transition-colors hover:bg-accent-hover" | |
| 164 | > | |
| 165 | <Plus size={15} /> | |
| 166 | Add a runner | |
| 167 | </a> | |
| 168 | </header> | |
| 169 | ||
| 170 | {(action?.notice || action?.error || data.error) && ( | |
| 171 | <div> | |
| 172 | {action?.notice && <p className="text-sm text-success">{action.notice}</p>} | |
| 173 | <ErrorText>{action?.error ?? data.error ?? null}</ErrorText> | |
| 174 | </div> | |
| 175 | )} | |
| 176 | ||
| 177 | <div className="grid items-start gap-5 lg:grid-cols-2"> | |
| 178 | <PlaceCard | |
| 179 | icon={<Cloud size={15} />} | |
| 180 | title="g1t cloud" | |
| 181 | tag={<span className="rounded-full bg-raised px-2 py-0.5 text-xs text-fg-soft">Managed by g1t</span>} | |
| 182 | about="A fresh sandbox for every agent run and workflow job, stopped when it ends. Billed by the second at the price below." | |
| 183 | headline={ | |
| 184 | <div className="flex items-baseline gap-2"> | |
| 185 | <span className="text-3xl font-semibold tracking-tight tabular-nums">{running ?? "–"}</span> | |
| 186 | <span className="text-sm text-muted">running now</span> | |
| 187 | </div> | |
| 188 | } | |
| 189 | > | |
| 190 | <Figure label="This month" hint="Agent sandbox time and sandbox time on your usage, at price, from the first of the month."> | |
| 191 | {cost ? ( | |
| 192 | <> | |
| Money is written one way. A single formatter turns millionths of a dollar into dollars, rounding half up on whole micros rather than on a float, so the same sum reads the same on every page: under a cent reads <$0.01 on a total and exactly nothing is $0.00, while the statement's lines, a session's receipt, the price book and an agent's effort costs carry up to four places where the fraction of a cent is the point; the six formatters that each rounded their own way are gone. This month is the calendar month in UTC from its first day to today everywhere, and billing counts the month's not-yet-closed usage in any range that reaches into the current month, so the top bar's pill, Spend, Home and Usage ask for the same days and get the same figure; Home now reads the usage report the others read instead of adding up statements. Usage's pending sentence says what of that usage the close will charge after the discount and included usage, which the billing API returns as pending_charged_micros. A reconciliation test holds the pill, Spend, Home and Usage to one number for one month. The usage and billing guide says how amounts are written and what this month means. | 193 | {machineTime(cost.cloudSeconds)} · {money(cost.cloudMicros)} |
| The Runners page shows the machines a workspace's agents and workflow jobs run on, in Workspace under Compute: g1t's cloud beside your own runners, what each is running now with a link to it, what's waiting, this month's machine time and its cost (your own runners' free), where agent work and workflow jobs run, adding a runner, and groups; runner_activity in Actions says what runs where, work handed to your runners keeps its agent run, and the self-hosted runners guide says how. | 194 | </> |
| 195 | ) : ( | |
| 196 | <Unknown what="Billing" /> | |
| 197 | )} | |
| 198 | </Figure> | |
| 199 | {data.prices ? ( | |
| 200 | <Figure label="Price" hint={`From g1t's price book: ${data.prices.map((price) => price.title).join("; ")}.`}> | |
| 201 | <span className="flex flex-wrap justify-end gap-x-1"> | |
| 202 | {data.prices.map((price, at) => ( | |
| 203 | <span key={price.meter} className="whitespace-nowrap"> | |
| 204 | {at > 0 && "+ "} | |
| 205 | {perMinute(price.perMinuteMicros)}/{price.unit} | |
| 206 | </span> | |
| 207 | ))} | |
| 208 | </span> | |
| 209 | </Figure> | |
| 210 | ) : ( | |
| 211 | <Figure label="Price"> | |
| 212 | <Unknown what="Billing" /> | |
| 213 | </Figure> | |
| 214 | )} | |
| 215 | {data.agentCap != null && ( | |
| 216 | <Figure label="Agent runs at once" hint="Your plan's cap on agent runs at the same time."> | |
| 217 | up to {data.agentCap} | |
| 218 | </Figure> | |
| 219 | )} | |
| 220 | </PlaceCard> | |
| 221 | ||
| 222 | <PlaceCard | |
| 223 | icon={<ServerCog size={15} />} | |
| 224 | title="Your runners" | |
| 225 | tag={<span className="rounded-full bg-success/12 px-2 py-0.5 text-xs font-medium text-success">Free</span>} | |
| 226 | about="Your own machines: Linux, macOS or Windows, anywhere they can reach g1t. They only connect out, and take the work whose labels they have." | |
| 227 | headline={ | |
| 228 | <div className="space-y-2"> | |
| 229 | <div className="flex items-baseline gap-2"> | |
| 230 | <span className="text-3xl font-semibold tracking-tight tabular-nums">{own.length === 0 ? 0 : online}</span> | |
| 231 | <span className="text-sm text-muted">{own.length === 0 ? "runners yet" : `of ${own.length} online`}</span> | |
| 232 | </div> | |
| 233 | {own.length > 0 && <StatusCounts runners={own} />} | |
| 234 | </div> | |
| 235 | } | |
| 236 | > | |
| 237 | <Figure label="This month" hint="Self-hosted runner time on your usage, from the first of the month. It is never charged."> | |
| 238 | {cost ? ( | |
| 239 | <> | |
| Money is written one way. A single formatter turns millionths of a dollar into dollars, rounding half up on whole micros rather than on a float, so the same sum reads the same on every page: under a cent reads <$0.01 on a total and exactly nothing is $0.00, while the statement's lines, a session's receipt, the price book and an agent's effort costs carry up to four places where the fraction of a cent is the point; the six formatters that each rounded their own way are gone. This month is the calendar month in UTC from its first day to today everywhere, and billing counts the month's not-yet-closed usage in any range that reaches into the current month, so the top bar's pill, Spend, Home and Usage ask for the same days and get the same figure; Home now reads the usage report the others read instead of adding up statements. Usage's pending sentence says what of that usage the close will charge after the discount and included usage, which the billing API returns as pending_charged_micros. A reconciliation test holds the pill, Spend, Home and Usage to one number for one month. The usage and billing guide says how amounts are written and what this month means. | 240 | {machineTime(cost.ownSeconds)} · {money(0)} |
| The Runners page shows the machines a workspace's agents and workflow jobs run on, in Workspace under Compute: g1t's cloud beside your own runners, what each is running now with a link to it, what's waiting, this month's machine time and its cost (your own runners' free), where agent work and workflow jobs run, adding a runner, and groups; runner_activity in Actions says what runs where, work handed to your runners keeps its agent run, and the self-hosted runners guide says how. | 241 | </> |
| 242 | ) : ( | |
| 243 | <Unknown what="Billing" /> | |
| 244 | )} | |
| 245 | </Figure> | |
| 246 | <Figure label="Waiting for one of them"> | |
| 247 | {data.waiting ? ( | |
| 248 | data.waiting.jobs + data.waiting.tasks === 0 ? ( | |
| 249 | "Nothing" | |
| 250 | ) : ( | |
| 251 | [ | |
| 252 | data.waiting.jobs > 0 ? `${data.waiting.jobs} ${data.waiting.jobs === 1 ? "job" : "jobs"}` : null, | |
| 253 | data.waiting.tasks > 0 ? `${data.waiting.tasks} agent ${data.waiting.tasks === 1 ? "run" : "runs"}` : null, | |
| 254 | ] | |
| 255 | .filter(Boolean) | |
| 256 | .join(", ") | |
| 257 | ) | |
| 258 | ) : ( | |
| 259 | <Unknown what="Actions" /> | |
| 260 | )} | |
| 261 | </Figure> | |
| 262 | <Figure label="Takes agent work"> | |
| 263 | {data.settings ? (data.settings.agentsOnSelfHosted ? `Yes, labelled ${data.settings.agentLabels.join(", ")}` : "No") : "–"} | |
| 264 | </Figure> | |
| 265 | </PlaceCard> | |
| 266 | </div> | |
| 267 | ||
| 268 | <div className="grid items-start gap-5 lg:grid-cols-2"> | |
| 269 | <Section title="On g1t cloud now" about="Agent runs and workflow jobs in g1t's sandboxes."> | |
| 270 | <div className="rounded-2xl border border-line bg-surface"> | |
| 271 | <CloudList data={data} /> | |
| 272 | </div> | |
| 273 | </Section> | |
| 274 | <Section | |
| 275 | title="Machine time" | |
| 276 | about={cost ? `${cost.from} to ${cost.until}, as your usage shows it.` : "From your usage."} | |
| 277 | action={ | |
| 278 | <Link to={usage} className="inline-flex items-center gap-1 text-xs text-muted hover:text-fg"> | |
| 279 | Usage | |
| 280 | <ArrowRight size={12} /> | |
| 281 | </Link> | |
| 282 | } | |
| 283 | > | |
| 284 | <TimeSplit data={data} /> | |
| 285 | </Section> | |
| 286 | </div> | |
| 287 | ||
| 288 | <Section title="Your runners" about={own.length === 0 ? "None yet." : `${online} of ${own.length} online. A runner that hasn't been heard from for 90 seconds is offline.`}> | |
| 289 | {own.length === 0 ? ( | |
| 290 | <EmptyState title="No runners of your own yet"> | |
| 291 | <a href="#add" className="underline underline-offset-2"> | |
| 292 | Add one | |
| 293 | </a>{" "} | |
| 294 | to run jobs and agents on your hardware. It connects out to g1t; nothing needs to reach the machine. | |
| 295 | </EmptyState> | |
| 296 | ) : ( | |
| 297 | <ul className="divide-y divide-line rounded-2xl border border-line bg-surface"> | |
| 298 | {own.map((runner) => ( | |
| 299 | <RunnerRow key={runner.id} runner={runner} manage /> | |
| 300 | ))} | |
| 301 | </ul> | |
| 302 | )} | |
| 303 | </Section> | |
| 304 | ||
| 305 | <Section title="Where work runs" about="For every project in the workspace, unless a project says otherwise in its own settings."> | |
| 306 | <div className="grid gap-3 md:grid-cols-3"> | |
| 307 | <WhereCard icon={<Workflow size={15} />} title="Workflow jobs"> | |
| 308 | Each job's <code className="font-mono text-fg-soft">runs-on</code> decides. <code className="font-mono text-fg-soft">ubuntu-latest</code>,{" "} | |
| 309 | <code className="font-mono text-fg-soft">g1t-4core</code> and other Linux labels run on g1t cloud;{" "} | |
| 310 | <code className="font-mono text-fg-soft">self-hosted</code> and your own labels run on your runners. | |
| 311 | </WhereCard> | |
| 312 | <WhereCard icon={<Bot size={15} />} title="Agents"> | |
| 313 | {data.settings?.agentsOnSelfHosted | |
| 314 | ? `Agent runs, checks, reviews and the merge queue run on your runners labelled ${data.settings.agentLabels.join(", ")}.` | |
| 315 | : "Agent runs, checks, reviews and the merge queue run on g1t cloud. Switch them to your runners below."} | |
| 316 | </WhereCard> | |
| 317 | <WhereCard icon={<Laptop size={15} />} title="Your desktop" coming> | |
| 318 | The desktop app will include a runner: for a logged-in browser, a simulator or a tool only your network reaches. It asks before each task. | |
| 319 | </WhereCard> | |
| 320 | </div> | |
| 321 | <RunnerSettingsForm | |
| 322 | key={data.settings ? `${data.settings.agentsOnSelfHosted}:${data.settings.forkPullRequests}:${data.settings.agentLabels.join(",")}` : "none"} | |
| 323 | data={data} | |
| 324 | manage | |
| 325 | scope="workspace" | |
| 326 | /> | |
| 327 | </Section> | |
| 328 | ||
| 329 | <Section | |
| 330 | id="add" | |
| 331 | title="Add a runner" | |
| 332 | about="Download g1t-runner, register it with a token made here, and start it. Linux, macOS and Windows, x64 and arm64, or Docker." | |
| 333 | > | |
| 334 | <NewRunner token={action?.token ?? null} groups={data.groups} repoScoped={false} /> | |
| 335 | </Section> | |
| 336 | ||
| 337 | <Section title="Groups" about="Which repositories may use which runners. A runner joins the default group, every repository, unless its token names another."> | |
| 338 | <Groups groups={data.groups} repositories={data.repositories} manage action={action} /> | |
| 339 | </Section> | |
| 340 | ||
| 341 | <Section title="Coming to runners"> | |
| 342 | <ul className="divide-y divide-line rounded-2xl border border-line bg-surface"> | |
| 343 | <ComingRow icon={<Cpu size={15} />} title="Sessions that persist"> | |
| 344 | An agent keeps its runner's disk between tasks, its checkouts, caches and notes, and picks up where it left off. | |
| 345 | </ComingRow> | |
| 346 | <ComingRow icon={<Boxes size={15} />} title="An official agent image"> | |
| 347 | One image with git, Node and the agent's tools, so agent work runs on any runner with Docker without an image of your own. | |
| 348 | </ComingRow> | |
| 349 | </ul> | |
| 350 | </Section> | |
| 351 | </div> | |
| 352 | ); | |
| 353 | } | |
| 354 | ||
| 355 | function WhereCard({ icon, title, coming, children }: { icon: ReactNode; title: string; coming?: boolean; children: ReactNode }) { | |
| 356 | return ( | |
| 357 | <div className={`rounded-2xl border p-4 ${coming ? "border-dashed border-line" : "border-line bg-surface"}`}> | |
| 358 | <h3 className="flex items-center gap-2 text-sm font-medium"> | |
| 359 | <span className="text-muted">{icon}</span> | |
| 360 | {title} | |
| 361 | {coming && <span className="ml-auto"><Coming /></span>} | |
| 362 | </h3> | |
| 363 | <p className="mt-2 text-sm leading-relaxed text-muted">{children}</p> | |
| 364 | </div> | |
| 365 | ); | |
| 366 | } | |
| 367 | ||
| 368 | function ComingRow({ icon, title, children }: { icon: ReactNode; title: string; children: ReactNode }) { | |
| 369 | return ( | |
| 370 | <li className="flex items-start gap-3 px-4 py-3"> | |
| 371 | <span className="mt-0.5 text-muted">{icon}</span> | |
| 372 | <div className="min-w-0 grow"> | |
| 373 | <p className="flex items-center gap-2 text-sm font-medium"> | |
| 374 | {title} | |
| 375 | <Coming /> | |
| 376 | </p> | |
| 377 | <p className="mt-0.5 text-sm text-muted">{children}</p> | |
| 378 | </div> | |
| 379 | </li> | |
| 380 | ); | |
| 381 | } | |
| 382 | ||
| 383 | /** This month's machine time, g1t cloud's against the workspace's own, as one bar. */ | |
| 384 | function TimeSplit({ data }: { data: RunnersPageData }) { | |
| 385 | const cost = data.cost; | |
| 386 | if (!cost) { | |
| 387 | return ( | |
| 388 | <div className="rounded-2xl border border-line bg-surface px-5 py-4 text-sm text-muted">Billing didn't answer, so this month's time can't be shown right now.</div> | |
| 389 | ); | |
| 390 | } | |
| 391 | const total = cost.cloudSeconds + cost.ownSeconds; | |
| 392 | return ( | |
| 393 | <div className="rounded-2xl border border-line bg-surface px-5 py-4"> | |
| 394 | {total === 0 ? ( | |
| 395 | <p className="text-sm text-muted">No machine time yet this month.</p> | |
| 396 | ) : ( | |
| 397 | <div className="flex h-2.5 gap-[2px] overflow-hidden rounded-full" role="img" aria-label="This month's machine time by where it ran"> | |
| 398 | {cost.cloudSeconds > 0 && <span className="h-full min-w-[3px] bg-info" style={{ flexGrow: cost.cloudSeconds }} />} | |
| 399 | {cost.ownSeconds > 0 && <span className="h-full min-w-[3px] bg-success" style={{ flexGrow: cost.ownSeconds }} />} | |
| 400 | </div> | |
| 401 | )} | |
| 402 | <ul className="mt-3 space-y-2 text-sm"> | |
| 403 | <li className="flex items-center gap-2"> | |
| 404 | <span className="size-2 shrink-0 rounded-[2px] bg-info" aria-hidden /> | |
| 405 | <span className="min-w-0 grow truncate text-fg-soft">g1t cloud</span> | |
| 406 | <span className="text-muted tabular-nums">{machineTime(cost.cloudSeconds)}</span> | |
| Money is written one way. A single formatter turns millionths of a dollar into dollars, rounding half up on whole micros rather than on a float, so the same sum reads the same on every page: under a cent reads <$0.01 on a total and exactly nothing is $0.00, while the statement's lines, a session's receipt, the price book and an agent's effort costs carry up to four places where the fraction of a cent is the point; the six formatters that each rounded their own way are gone. This month is the calendar month in UTC from its first day to today everywhere, and billing counts the month's not-yet-closed usage in any range that reaches into the current month, so the top bar's pill, Spend, Home and Usage ask for the same days and get the same figure; Home now reads the usage report the others read instead of adding up statements. Usage's pending sentence says what of that usage the close will charge after the discount and included usage, which the billing API returns as pending_charged_micros. A reconciliation test holds the pill, Spend, Home and Usage to one number for one month. The usage and billing guide says how amounts are written and what this month means. | 407 | <span className="w-20 text-right text-fg tabular-nums">{money(cost.cloudMicros)}</span> |
| The Runners page shows the machines a workspace's agents and workflow jobs run on, in Workspace under Compute: g1t's cloud beside your own runners, what each is running now with a link to it, what's waiting, this month's machine time and its cost (your own runners' free), where agent work and workflow jobs run, adding a runner, and groups; runner_activity in Actions says what runs where, work handed to your runners keeps its agent run, and the self-hosted runners guide says how. | 408 | </li> |
| 409 | <li className="flex items-center gap-2"> | |
| 410 | <span className="size-2 shrink-0 rounded-[2px] bg-success" aria-hidden /> | |
| 411 | <span className="min-w-0 grow truncate text-fg-soft">Your runners</span> | |
| 412 | <span className="text-muted tabular-nums">{machineTime(cost.ownSeconds)}</span> | |
| Money is written one way. A single formatter turns millionths of a dollar into dollars, rounding half up on whole micros rather than on a float, so the same sum reads the same on every page: under a cent reads <$0.01 on a total and exactly nothing is $0.00, while the statement's lines, a session's receipt, the price book and an agent's effort costs carry up to four places where the fraction of a cent is the point; the six formatters that each rounded their own way are gone. This month is the calendar month in UTC from its first day to today everywhere, and billing counts the month's not-yet-closed usage in any range that reaches into the current month, so the top bar's pill, Spend, Home and Usage ask for the same days and get the same figure; Home now reads the usage report the others read instead of adding up statements. Usage's pending sentence says what of that usage the close will charge after the discount and included usage, which the billing API returns as pending_charged_micros. A reconciliation test holds the pill, Spend, Home and Usage to one number for one month. The usage and billing guide says how amounts are written and what this month means. | 413 | <span className="w-20 text-right text-fg tabular-nums">{money(0)}</span> |
| The Runners page shows the machines a workspace's agents and workflow jobs run on, in Workspace under Compute: g1t's cloud beside your own runners, what each is running now with a link to it, what's waiting, this month's machine time and its cost (your own runners' free), where agent work and workflow jobs run, adding a runner, and groups; runner_activity in Actions says what runs where, work handed to your runners keeps its agent run, and the self-hosted runners guide says how. | 414 | </li> |
| 415 | </ul> | |
| 416 | <p className="mt-4 text-[0.6875rem] leading-relaxed text-faint"> | |
| 417 | {cost.free ? "Usage at cost: g1t charges nothing for it now." : "At price, before your plan's included usage or credit paid for any of it."} Models are separate. | |
| 418 | </p> | |
| 419 | </div> | |
| 420 | ); | |
| 421 | } |
