apps/web/app/routes/workspace/workspace-overview.tsx · flagon-io/g1t

import { dailySignal, dayList, dollars, harnessWords, namesWords, newGround, newHabits, providerQuarter, quarterSpend, signalsRange, rhythm, silos, spendFlow, spoken, spreading, waitingRows } from "../../lib/signals";

28

import { type SignalData, loadGroups, loadSignalData } from "../../lib/signals.server";

29

30

export function meta({ params, ...args }: Route.MetaArgs) {

31

return page(args, { title: `Workspace · ${params.owner} · g1t` });

32

}

33

34

/** Most members listed before "and N more". */

35

const MAX_FACES = 10;

36

/** Entries each quiet change lists. */

37

const QUIET_ROWS = 4;

38

39

/**

40

* The workspace's ground truth, from what its work says (lib/signals.ts),

41

* for members who see Code: the past week, the quarter's agent spend

42

* threaded to the work it produced, what is moving and what is waiting

43

* team by team, and quiet changes in who works where. Streamed, each part

44

* on its own. Then the workspace at a glance, for every member: who is in

45

* it, its projects, and the month's usage against its plan. Each part is

46

* left out when its service does not answer.

47

*/

48

export async function loader({ params, context, request }: Route.LoaderArgs) {

49

const viewer = getViewer(context);

50

const slug = params.owner.toLowerCase();

51

const role = roleIn(viewer, slug);

52

if (!role) throw data(null, { status: 404 });

53

// Getting started, for an owner, as on Home: streamed beside the rest.

54

const setupAsked = new URL(request.url).searchParams.has("setup");

55

const onboarding = loadOnboarding(viewer, slug, !setupAsked).catch(() => null);

56

const membership = viewer?.workspaces?.find((m) => m.slug === slug) ?? null;

57

const ground = viewer && hasCodeAccess(membership) ? loadGround(viewer, slug, Date.now()).catch(() => null) : null;

58

const [members, usage, projects] = await Promise.all([

59

part(identity.listMembers(slug, viewer), "The member list"),

60

usageFor(slug, viewer),

61

workspaceProjects(slug, viewer).catch(() => null),

]);

return {

slug,

role,

onboarding,

setupAsked,

members: isFailed(members) ? members : members.ok ? members.value : null,

69

usage,

70

projects: projects?.ok ? projects.value.length : null,

ground,

};

}

/** Everything the work says, shaped for the page; null when the work service did not answer. */

76

async function loadGround(viewer: User, slug: string, now: number) {

77

const owned = await loadRepos(viewer, slug).catch(() => null);

78

if (!owned) return null;

79

const [found, groups, providers] = await Promise.all([

80

loadSignalData(viewer, slug, now, owned).catch(() => null),

81

loadGroups(viewer, slug, owned).catch(() => null),

82

// What the connected providers say was spent: beside the rest, never in the way of it.

83

billing

84

.providerCosts(slug, viewer, signalsRange(now).quarter)

85

.then((result) => (result.ok ? result.value : null))

86

.catch(() => null),

87

]);

88

return found ? { ...shapeGround(found, groups, now), providers: providerQuarter(providers, found.range.quarter) } : null;

89

}

90

91

function shapeGround(found: SignalData, groups: Awaited<ReturnType<typeof loadGroups>>, now: number) {

92

const name = (id: string) => found.repos[id]?.name ?? "a project";

93

const path = (id: string) => (found.repos[id] ? `/${found.repos[id]!.namespace}/${found.repos[id]!.name}` : null);

94

const quarter = quarterSpend({ repos: found.repos, signals: found.signals, quarterUsage: found.quarterUsage, quarter: found.range.quarter });

95

// Practices catching on in each team (else across the workspace), the newest first.

96

const scopes = groups?.by === "team" ? groups.groups.map((group) => ({ key: group.key, label: group.label, only: new Set(group.repoIds) as ReadonlySet<string> | undefined })) : [{ key: "all", label: "the workspace", only: undefined }];

97

const spreads = scopes.flatMap((scope) => spreading(found.signals.harnesses, now, { only: scope.only }).map((spread) => ({ scope, spread })));

98

return {

99

tiles: dailySignal(found).tiles,

100

complete: found.complete,

101

capped: found.signals.pullsCapped,

102

flow: spendFlow({ slug: found.slug, repos: found.repos, signals: found.signals, quarterUsage: found.quarterUsage, quarter: found.range.quarter }),

103

sized: (quarter?.total ?? 0) > 0 ? ("spend" as const) : ("pulls" as const),

104

quarterSpend: quarter?.total ?? null,

105

sessionSpend: quarter?.sessions ?? 0,

106

rhythm: groups ? { by: groups.by, rows: rhythm(found.signals.days, dayList(found.range.until, found.range.days), groups.groups) } : null,

107

waiting: waitingRows(found.signals.waiting, found.repos).map((pull) => ({ ...pull, age: spoken(Math.max(0, (now - Date.parse(pull.createdAt)) / 1000)) })),

108

silos: silos(found.signals.authors, now)

109

.slice(0, QUIET_ROWS)

110

.map((silo) => ({

111

key: silo.repoId,

112

to: path(silo.repoId),

113

where: name(silo.repoId),

114

line: `${silo.name} merged ${silo.theirs} of its ${silo.recent} changes in 90 days`,

115

more: silo.joining.length > 0 ? `${silo.joining.map((who) => who.name).join(", ")} started this month` : "No one else has started there",

116

})),

117

newGround: newGround(found.signals.authors, now)

118

.slice(0, QUIET_ROWS)

119

.map((row) => ({ key: `${row.ownerId}:${row.repoId}`, to: path(row.repoId), where: name(row.repoId), line: `${row.name} merged a first change here`, more: `${row.elsewhere} merges elsewhere first` })),

120

spreading: spreads.slice(0, QUIET_ROWS).map(({ scope, spread }) => ({

121

key: `${scope.key}:${spread.harness}`,

122

to: null,

123

where: `${harnessWords(spread.harness)} in ${scope.label}`,

124

line: `${namesWords(spread.recent.map((person) => person.name))} started using it this month, after ${spread.first.name}`,

125

more: `${spread.people} people use it now`,

126

})),

127

habits: newHabits(found.signals.pulls, now)

128

.slice(0, QUIET_ROWS)

129

.map((row) => ({ key: row.ownerId, to: path(row.repoId), where: name(row.repoId), line: `${row.name} merged a first agent-made change`, more: `after ${row.byHand} by hand` })),

};

}

type Ground = ReturnType<typeof shapeGround> & { providers: ReturnType<typeof providerQuarter> };

134

135

function Tile({ icon, label, value, to, action }: { icon: ReactNode; label: string; value: string; to: string; action: string }) {

return (

{icon}

{label}

</p>

<p className="mt-1.5 text-2xl font-semibold tracking-tight tabular-nums">{value}</p>

143

144

{action} <ArrowRight size={11} />

</p>

</Link>

);

}

export default function WorkspaceOverview({ loaderData }: Route.ComponentProps) {

151

const { slug, role, members, usage, projects } = loaderData;

return (

{loaderData.ground && (

156

157

<Await resolve={loaderData.ground}>{(ground) => (ground ? <GroundTruth slug={slug} ground={ground} /> : <Unavailable what="What the work says" />)}</Await>

</Suspense>

)}

<Tile icon={<Users size={12} />} label="Members" value={members && !isFailed(members) ? String(members.length) : "—"} to={role === "owner" ? `/${slug}/-/members` : `/${slug}/-/people`} action={role === "owner" ? "Manage people" : "See everyone"} />

162

<Tile icon={<Box size={12} />} label="Projects" value={projects == null ? "—" : String(projects)} to={`/${slug}/-/projects`} action="Open Code" />

</div>

{usage ? (

) : (

<h2 className="font-medium">Usage</h2>

172

<p className="mt-1.5 text-sm text-muted">This month's usage isn't available right now.</p>

173

174

Open Usage <ArrowRight size={13} />

</Link>

</section>

</Card>

)}

Policies

</h2>

How long runs may take, the rules every repository follows, and how the workspace's security is set up.

</p>

Guardrails

</Link>

Rules

</Link>

Security settings

</Link>

Audit log

</Link>

</div>

</section>

</Card>

</div>

<h2 className="font-medium">Members</h2>

209

210

{role === "owner" ? "Manage" : "See all"}

211

</Link>

212

</div>

213

{isFailed(members) ? (

</div>

) : members ? (

<>

{members.slice(0, MAX_FACES).map((member) => (

{member.name?.trim() || member.username}

225

{member.name?.trim() && <span className="ml-1.5 font-mono text-xs text-faint">{member.username}</span>}

226

</Link>

227

{member.role === "owner" && <Badge size="md">owner</Badge>}

</li>

))}

</ul>

{members.length > MAX_FACES && <p className="mt-2 text-xs text-faint">and {members.length - MAX_FACES} more</p>}

232

</>

233

) : (

234

<p className="mt-3 text-sm text-muted">The member list isn't available right now.</p>

)}

</section>

</Card>

</div>

</div>

);

}

function GroundSkeleton() {

return (

</div>

);

}

/** A part of the ground truth: a mono eyebrow, a sentence for a heading, and what it shows. */

253

function Section({ id, eyebrow, title, hint, children }: { id: string; eyebrow: string; title: string; hint?: ReactNode; children: ReactNode }) {

254

return (

255

256

<p className="font-mono text-[0.6875rem] tracking-[0.16em] text-accent uppercase">{eyebrow}</p>

{title}

</h2>

{hint && <p className="mt-1.5 max-w-3xl text-sm text-muted">{hint}</p>}

261

<div className="mt-6">{children}</div>

</section>

);

}

type QuietRow = Ground["silos"][number];

267

268

function QuietList({ title, hint, rows, empty }: { title: string; hint: string; rows: QuietRow[]; empty: string }) {

269

return (

270

271

<h3 className="text-sm font-semibold text-fg">{title}</h3>

272

273

{rows.length === 0 ? (

274

<p className="mt-3 text-sm text-faint">{empty}</p>

) : (

{rows.map((row) => (

{row.to ? (

{row.where}

</Link>

) : (

<span className="font-medium text-fg">{row.where}</span>

)}

</li>

))}

</ul>

)}

</div>

);

}

function GroundTruth({ slug, ground }: { slug: string; ground: Ground }) {

return (

</Boundary>

{!ground.complete && <p className="text-xs text-faint">Some projects didn't answer, so what follows leaves them out.</p>}

303

<Section

304

id="spend"

305

eyebrow="Spend, threaded to the work"

306

title={ground.quarterSpend ? `${dollars(ground.quarterSpend)} of agent spend this quarter, and what it went into` : "This quarter's work, and how much of it agents did"}

307

hint={

308

ground.sized === "spend"

309

? `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.`

310

: "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."

}

>

</Boundary>

{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>}

</Section>

<Section

id="rhythm"

eyebrow="What's moving and what's waiting"

322

title={ground.rhythm?.by === "project" ? "Each project's last two weeks" : "Each team's last two weeks"}

323

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."

324

>

325

326

<Boundary what="What's moving">{ground.rhythm ? <Rhythm rows={ground.rhythm.rows} by={ground.rhythm.by} /> : <Unavailable what="The teams" />}</Boundary>

327

328

<h3 className="text-sm font-semibold text-fg">Waiting on a first review</h3>

329

<p className="mt-0.5 text-xs text-muted">Open, and no one has reviewed them yet: the oldest first.</p>

330

{ground.waiting.length === 0 ? (

331

<p className="mt-3 text-sm text-faint">Nothing is waiting for a first review.</p>

332

) : (

333

334

{ground.waiting.map((pull) => (

335

336

337

<span className="shrink-0 pt-px font-mono text-xs text-muted">#{pull.number}</span>

338

339

<span className="line-clamp-2 font-medium text-fg">{pull.title}</span>

340

341

{pull.repo.name} · open {pull.age}

342

{pull.blocks.length > 0 && ` · holds up ${pull.blocks.length}`}

343

</span>

344

</span>

345

{pull.agent && <Bot size={13} className="mt-0.5 shrink-0 text-accent" aria-label="An agent's" />}

</Link>

</li>

))}

</ul>

)}

The review queue <ArrowRight size={11} />

</Link>

</div>

</div>

</Section>

<Section

id="quiet"

eyebrow="Quiet changes"

360

title="Who works where, and what is spreading"

361

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."

>

</div>

</Section>

</div>

);

}

const providerName = (provider: string) => (isCostProvider(provider) ? COST_PROVIDERS[provider as CostProvider].label : provider);

375

376

/**

377

* What the connected providers reported for the quarter, beside what g1t

378

* threads to the work: their bill holds everything the organization ran,

379

* so it is the larger figure, never added to the other.

380

*/

381

function ProvidersLine({ slug, providers, threaded }: { slug: string; providers: Ground["providers"]; threaded: number | null }) {

if (!providers) {

return (

Connect a provider's cost report

387

</Link>{" "}

388

to see everything your organization spent with Anthropic or OpenAI, not only what g1t can tie to the work.

</p>

);

}

return (

<span className="font-semibold">{dollars(providers.total)}</span> reported by your providers this quarter

396

</span>

397

<span className="font-mono text-xs text-muted">{providers.providers.map((row) => `${providerName(row.provider)} ${dollars(row.micros)}`).join(" · ")}</span>

398