| 1 | /** |
| 2 | * The workspace overview's ground truth (lib/ground.ts): the past week, |
| 3 | * the quarter's spend threaded to the work beside what providers reported, |
| 4 | * each team's last two weeks with what waits on a first review, and the |
| 5 | * quiet changes in who works where. |
| 6 | */ |
| 7 | import { ArrowRight, Bot } from "lucide-react"; |
| 8 | import type { ReactNode } from "react"; |
| 9 | import { Link } from "react-router"; |
| 10 | |
| 11 | import { COST_PROVIDERS, type CostProvider, isCostProvider } from "@g1t/contracts"; |
| 12 | |
| 13 | import type { Ground } from "../lib/ground"; |
| 14 | import { dollars } from "../lib/signals"; |
| 15 | import { Boundary, Unavailable } from "./boundary"; |
| 16 | import { Rhythm } from "./rhythm"; |
| 17 | import { PulseSkeleton, PulseStrip } from "./signals"; |
| 18 | import { SpendFlow } from "./spend-flow"; |
| 19 | import { Skeleton } from "./ui/skeleton"; |
| 20 | |
| 21 | export function GroundSkeleton() { |
| 22 | return ( |
| 23 | <div className="space-y-6"> |
| 24 | <PulseSkeleton /> |
| 25 | <Skeleton className="h-112 w-full rounded-2xl" /> |
| 26 | </div> |
| 27 | ); |
| 28 | } |
| 29 | |
| 30 | /** A part of the ground truth: a mono eyebrow, a sentence for a heading, and what it shows. */ |
| 31 | function Section({ id, eyebrow, title, hint, children }: { id: string; eyebrow: string; title: string; hint?: ReactNode; children: ReactNode }) { |
| 32 | return ( |
| 33 | <section id={id} aria-labelledby={`${id}-title`} className="scroll-mt-6 rounded-2xl border border-line bg-surface px-5 py-6 md:px-8 md:py-7"> |
| 34 | <p className="font-mono text-[0.6875rem] tracking-[0.16em] text-accent uppercase">{eyebrow}</p> |
| 35 | <h2 id={`${id}-title`} className="mt-2 font-display text-2xl leading-tight tracking-tight text-fg"> |
| 36 | {title} |
| 37 | </h2> |
| 38 | {hint && <p className="mt-1.5 max-w-3xl text-sm text-muted">{hint}</p>} |
| 39 | <div className="mt-6">{children}</div> |
| 40 | </section> |
| 41 | ); |
| 42 | } |
| 43 | |
| 44 | type QuietRow = Ground["silos"][number]; |
| 45 | |
| 46 | function QuietList({ title, hint, rows, empty }: { title: string; hint: string; rows: QuietRow[]; empty: string }) { |
| 47 | return ( |
| 48 | <div className="min-w-0"> |
| 49 | <h3 className="text-sm font-semibold text-fg">{title}</h3> |
| 50 | <p className="mt-0.5 text-xs text-muted">{hint}</p> |
| 51 | {rows.length === 0 ? ( |
| 52 | <p className="mt-3 text-sm text-faint">{empty}</p> |
| 53 | ) : ( |
| 54 | <ul className="mt-3 space-y-3"> |
| 55 | {rows.map((row) => ( |
| 56 | <li key={row.key} className="text-sm"> |
| 57 | {row.to ? ( |
| 58 | <Link to={row.to} className="font-medium text-fg hover:text-accent"> |
| 59 | {row.where} |
| 60 | </Link> |
| 61 | ) : ( |
| 62 | <span className="font-medium text-fg">{row.where}</span> |
| 63 | )} |
| 64 | <p className="text-fg-soft">{row.line}</p> |
| 65 | <p className="font-mono text-[0.6875rem] text-faint">{row.more}</p> |
| 66 | </li> |
| 67 | ))} |
| 68 | </ul> |
| 69 | )} |
| 70 | </div> |
| 71 | ); |
| 72 | } |
| 73 | |
| 74 | export function GroundTruth({ slug, ground }: { slug: string; ground: Ground }) { |
| 75 | return ( |
| 76 | <div className="space-y-6"> |
| 77 | <Boundary what="The past week"> |
| 78 | <PulseStrip tiles={ground.tiles} /> |
| 79 | </Boundary> |
| 80 | {!ground.complete && <p className="text-xs text-faint">Some projects didn't answer, so what follows leaves them out.</p>} |
| 81 | <Section |
| 82 | id="spend" |
| 83 | eyebrow="Spend, threaded to the work" |
| 84 | title={ |
| 85 | ground.quarterSpend |
| 86 | ? `${dollars(ground.quarterSpend)} of agent spend this quarter, and what it went into` |
| 87 | : "This quarter's work, and how much of it agents did" |
| 88 | } |
| 89 | hint={ |
| 90 | ground.sized === "spend" |
| 91 | ? `Each milestone, its work items, their change set in each project and its pull requests, sized by what agents cost on them${ground.sessionSpend > 0 ? ` (g1t's metered usage, and ${dollars(ground.sessionSpend)} of harness sessions estimated at list price)` : ""} and shaded by how much was an agent's. Choose a box to open what is under it.` |
| 92 | : "Usage isn't known for this quarter, so each box is sized by its pull requests and shaded by how many were an agent's. Choose a box to open what is under it." |
| 93 | } |
| 94 | > |
| 95 | <ProvidersLine slug={slug} providers={ground.providers} threaded={ground.quarterSpend} /> |
| 96 | <Boundary what="Spend, threaded to the work"> |
| 97 | <SpendFlow flow={ground.flow} sized={ground.sized} /> |
| 98 | </Boundary> |
| 99 | {ground.capped && <p className="mt-3 text-xs text-faint">There were more pull requests this quarter than this reads, so the newest are shown.</p>} |
| 100 | </Section> |
| 101 | <Section |
| 102 | id="rhythm" |
| 103 | eyebrow="What's moving and what's waiting" |
| 104 | title={ground.rhythm?.by === "project" ? "Each project's last two weeks" : "Each team's last two weeks"} |
| 105 | hint="Pull requests and agent sessions above the line; reviews, comments and requests for changes below it. Each row is drawn to its own scale: point at a day for its numbers." |
| 106 | > |
| 107 | <div className="grid gap-8 xl:grid-cols-[minmax(0,1fr)_18rem]"> |
| 108 | <Boundary what="What's moving"> |
| 109 | {ground.rhythm ? <Rhythm rows={ground.rhythm.rows} by={ground.rhythm.by} /> : <Unavailable what="The teams" />} |
| 110 | </Boundary> |
| 111 | <div className="min-w-0"> |
| 112 | <h3 className="text-sm font-semibold text-fg">Waiting on a first review</h3> |
| 113 | <p className="mt-0.5 text-xs text-muted">Open, and no one has reviewed them yet: the oldest first.</p> |
| 114 | {ground.waiting.length === 0 ? ( |
| 115 | <p className="mt-3 text-sm text-faint">Nothing is waiting for a first review.</p> |
| 116 | ) : ( |
| 117 | <ul className="mt-3 divide-y divide-line"> |
| 118 | {ground.waiting.map((pull) => ( |
| 119 | <li key={`${pull.repoId}#${pull.number}`} className="py-2.5 text-sm"> |
| 120 | <Link to={pull.to} className="flex items-start gap-2 hover:text-accent"> |
| 121 | <span className="shrink-0 pt-px font-mono text-xs text-muted">#{pull.number}</span> |
| 122 | <span className="min-w-0 grow"> |
| 123 | <span className="line-clamp-2 font-medium text-fg">{pull.title}</span> |
| 124 | <span className="font-mono text-[0.6875rem] text-faint"> |
| 125 | {pull.repo.name} · open {pull.age} |
| 126 | {pull.blocks.length > 0 && ` · holds up ${pull.blocks.length}`} |
| 127 | </span> |
| 128 | </span> |
| 129 | {pull.agent && <Bot size={13} className="mt-0.5 shrink-0 text-accent" aria-label="An agent's" />} |
| 130 | </Link> |
| 131 | </li> |
| 132 | ))} |
| 133 | </ul> |
| 134 | )} |
| 135 | <Link to={`/${slug}/-/overview?tab=needs#work`} className="mt-3 inline-flex items-center gap-1 text-xs text-muted hover:text-fg"> |
| 136 | The review queue <ArrowRight size={11} /> |
| 137 | </Link> |
| 138 | </div> |
| 139 | </div> |
| 140 | </Section> |
| 141 | <Section |
| 142 | id="quiet" |
| 143 | eyebrow="Quiet changes" |
| 144 | title="Who works where, and what is spreading" |
| 145 | hint="What no roll-up shows: knowledge resting with one person, people moving into new ground, and new ways of working taking hold. Each is a place to look, not a verdict." |
| 146 | > |
| 147 | <div className="grid gap-8 md:grid-cols-2 xl:grid-cols-4"> |
| 148 | <QuietList |
| 149 | title="Knowledge silos" |
| 150 | hint="Projects where one person has done most of the last 90 days' work" |
| 151 | rows={ground.silos} |
| 152 | empty="No project rests on one person right now." |
| 153 | /> |
| 154 | <QuietList |
| 155 | title="New ground" |
| 156 | hint="People who merged to a project for the first time in the last two weeks" |
| 157 | rows={ground.newGround} |
| 158 | empty="No one has moved into a new project in the last two weeks." |
| 159 | /> |
| 160 | <QuietList |
| 161 | title="Spreading" |
| 162 | hint="A harness more people took up this month, after someone started with it" |
| 163 | rows={ground.spreading} |
| 164 | empty="No harness has caught on in a team this month." |
| 165 | /> |
| 166 | <QuietList |
| 167 | title="New habits" |
| 168 | hint="People whose first agent-made change merged in the last two weeks" |
| 169 | rows={ground.habits} |
| 170 | empty="No one new started merging agents' work in the last two weeks." |
| 171 | /> |
| 172 | </div> |
| 173 | </Section> |
| 174 | </div> |
| 175 | ); |
| 176 | } |
| 177 | |
| 178 | const providerName = (provider: string) => (isCostProvider(provider) ? COST_PROVIDERS[provider as CostProvider].label : provider); |
| 179 | |
| 180 | /** |
| 181 | * What the connected providers reported for the quarter, beside what g1t |
| 182 | * threads to the work: their bill holds everything the organization ran, |
| 183 | * so it is the larger figure, never added to the other. |
| 184 | */ |
| 185 | function ProvidersLine({ slug, providers, threaded }: { slug: string; providers: Ground["providers"]; threaded: number | null }) { |
| 186 | if (!providers) { |
| 187 | return ( |
| 188 | <p className="-mt-2 mb-5 text-sm text-muted"> |
| 189 | <Link to={`/${slug}/-/provider-costs`} className="text-accent hover:underline"> |
| 190 | Connect a provider's cost report |
| 191 | </Link>{" "} |
| 192 | to see everything your organization spent with Anthropic or OpenAI, not only what g1t can tie to the work. |
| 193 | </p> |
| 194 | ); |
| 195 | } |
| 196 | return ( |
| 197 | <div className="-mt-2 mb-5 flex flex-wrap items-baseline gap-x-5 gap-y-1 rounded-xl border border-line bg-bg px-4 py-3 text-sm"> |
| 198 | <span className="text-fg"> |
| 199 | <span className="font-semibold">{dollars(providers.total)}</span> reported by your providers this quarter |
| 200 | </span> |
| 201 | <span className="font-mono text-xs text-muted"> |
| 202 | {providers.providers.map((row) => `${providerName(row.provider)} ${dollars(row.micros)}`).join(" · ")} |
| 203 | </span> |
| 204 | {threaded != null && threaded > 0 && providers.total > 0 && ( |
| 205 | <span className="text-xs text-muted">{Math.min(100, Math.round((threaded / providers.total) * 100))}% of it is threaded to the work below</span> |
| 206 | )} |
| 207 | {!providers.complete && <span className="text-xs text-faint">Some of the quarter isn't read yet</span>} |
| 208 | <Link to={`/${slug}/-/provider-costs`} className="ml-auto text-xs text-muted hover:text-fg"> |
| 209 | Provider costs |
| 210 | </Link> |
| 211 | </div> |
| 212 | ); |
| 213 | } |