apps/web/app/components/shell.tsx · flagon-io/g1t

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1

import {

A catalogue of model providers, and settings that feel like settings3d ago

2

ArrowLeft,

Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request3d ago

3

BarChart3,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

4

BookMarked,

5

BookOpen,

6

Check,

7

ChevronsUpDown,

A Vercel-like sidebar and a new mark3d ago

8

Ellipsis,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

9

CircleDot,

10

Code2,

11

Compass,

12

CornerDownLeft,

13

CreditCard,

14

GitPullRequest,

15

History,

Secrets and variables: one list, rows per environment, for workflows and deployments1d ago

16

Fingerprint,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

17

KeyRound,

Projects: what a workspace builds and runs, first on every page1d ago

18

Box,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

19

Layers,

20

LayoutDashboard,

Projects: what a workspace builds and runs, first on every page1d ago

21

LayoutGrid,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

22

ListTree,

23

Lock,

24

LogOut,

25

Menu,

26

Plus,

27

Search,

Integrations: your own model provider, alerts that open issues, tickets agents read3d ago

28

Plug,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

29

Settings,

30

Users,

Webhooks: every event, to your own addresses, signed and retried3d ago

31

Webhook,

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs3d ago

32

PlayCircle,

Pull requests say where they are live; the project menu shows what is coming1d ago

33

Activity,

34

Bot,

35

Kanban,

36

Package,

37

PackageCheck,

38

ScrollText,

39

Server,

40

ShieldCheck,

41

Siren,

42

Tag,

43

ToggleRight,

Deployments: a preview for every pull request, production on g1t.page1d ago

44

Rocket,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

45

X,

46

} from "lucide-react";

47

import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";

48

import { Form, Link, NavLink, useLocation, useNavigate, useNavigation, useSubmit } from "react-router";

49

50

import type { User } from "@g1t/contracts";

51

import { MICROS_PER_DOLLAR } from "@g1t/contracts";

52

A Vercel-like sidebar and a new mark3d ago

53

import { Mark } from "./logo";

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

54

import { Avatar } from "./ui";

55

import {

56

DropdownMenu,

57

DropdownMenuContent,

58

DropdownMenuItem,

59

DropdownMenuLabel,

60

DropdownMenuSeparator,

61

DropdownMenuTrigger,

62

} from "./ui/dropdown-menu";

63

64

/** What the sidebar needs, worked out by the root loader for a signed-in person. */

65

export type ShellData = {

66

/** The workspace the sidebar is about: the one being looked at, or their first. */

67

workspace: { slug: string; role: "owner" | "member" } | null;

Projects: what a workspace builds and runs, first on every page1d ago

68

/** Its projects, by name: `name` is the slug in their address. */

69

repos: { namespace: string; name: string; title?: string; isPrivate: boolean }[];

70

/** The project being looked at, if any, whoever owns it. */

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

71

repo: {

72

namespace: string;

73

name: string;

74

member: boolean;

75

issues: number;

76

pulls: number;

77

} | null;

78

/** The workspace's agent credit, if billing is on and they may see it. */

79

creditMicros: number | null;

Free while g1t is being built out; agents can check out their own forks2d ago

80

/** Whether g1t charges nothing for now, while it is being built out. */

81

free?: boolean;

Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request3d ago

82

/** What its agents have cost since the start of the month. */

Usage while free is shown at cost; agents get rustfmt and clippy2d ago

83

/** This month's usage: charged, or at cost while g1t is free. */

84

monthUsageMicros: number | null;

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

85

};

86

87

function SidebarLink({

88

to,

89

icon,

90

end,

91

count,

92

also,

93

children,

94

}: {

95

to: string;

96

icon: ReactNode;

97

end?: boolean;

98

count?: number;

Projects: what a workspace builds and runs, first on every page1d ago

99

/** Other path prefixes under which this link is the current one. */

100

also?: string | string[];

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

101

children: ReactNode;

102

}) {

103

const { pathname } = useLocation();

104

return (

105

<NavLink

106

to={to}

107

end={end}

108

prefetch="intent"

109

className={({ isActive, isPending }) => {

Projects: what a workspace builds and runs, first on every page1d ago

110

const current =

111

isActive || [also ?? []].flat().some((prefix) => pathname === prefix || pathname.startsWith(prefix + "/"));

A Vercel-like sidebar and a new mark3d ago

112

return `group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

113

current

114

? "bg-raised font-medium text-fg"

115

: isPending

116

? "bg-raised/60 text-fg"

117

: "text-muted hover:bg-raised/60 hover:text-fg"

118

}`;

119

}}

120

>

121

122

<span className="min-w-0 grow truncate">{children}</span>

123

{count != null && count > 0 && (

124

125

{count}

126

</span>

127

)}

128

</NavLink>

129

);

130

}

131

Pull requests say where they are live; the project menu shows what is coming1d ago

132

/**

133

* Something a project will have, shown where it will live so people can

134

* see where g1t is going. Not a link: nothing is behind it yet.

135

*/

136

function SidebarSoon({ icon, children, about }: { icon: ReactNode; children: ReactNode; about: string }) {

137

return (

138

<div

139

title={about}

140

aria-disabled="true"

141

className="flex h-8 cursor-default items-center gap-2.5 rounded-md px-2 text-[0.8125rem] text-faint"

142

>

143

144

<span className="grow truncate">{children}</span>

145

146

Soon

147

</span>

148

</div>

149

);

150

}

151

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

152

function SidebarGroup({ title, action, children }: { title: string; action?: ReactNode; children: ReactNode }) {

153

return (

A Vercel-like sidebar and a new mark3d ago

154

155

156

<h2 className="text-xs font-medium text-faint">{title}</h2>

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

157

{action}

158

</div>

159

<div className="space-y-px">{children}</div>

160

</section>

161

);

162

}

163

164

function WorkspaceSwitcher({ user, shell }: { user: User; shell: ShellData }) {

165

const current = shell.workspace?.slug;

166

return (

167

A Vercel-like sidebar and a new mark3d ago

168

{/* The name goes to the workspace; only the arrows switch it. */}

169

<Link

170

to={current ? `/${current}` : "/workspaces/new"}

171

className="flex h-8 min-w-0 items-center gap-2 rounded-md px-1.5 transition-colors hover:bg-raised"

172

>

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

173

{current ? (

A Vercel-like sidebar and a new mark3d ago

174

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

175

) : (

A Vercel-like sidebar and a new mark3d ago

176

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

177

)}

A Vercel-like sidebar and a new mark3d ago

178

<span className="min-w-0 truncate text-sm font-medium">{current ?? "Choose a workspace"}</span>

179

{shell.workspace && (

180

181

{shell.workspace.role}

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

182

</span>

A Vercel-like sidebar and a new mark3d ago

183

)}

184

</Link>

185

<DropdownMenuTrigger

186

aria-label="Switch workspace"

187

className="ml-auto flex h-8 w-6 shrink-0 items-center justify-center rounded-md text-faint outline-none transition-colors hover:bg-raised hover:text-fg data-[state=open]:bg-raised data-[state=open]:text-fg"

188

>

189

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

190

</DropdownMenuTrigger>

191

192

<DropdownMenuLabel>Workspaces</DropdownMenuLabel>

193

{(user.workspaces ?? []).map((membership) => (

194

195

196

197

<span className="grow">{membership.slug}</span>

198

{membership.slug === current && <Check className="text-accent" />}

199

</Link>

200

</DropdownMenuItem>

201

))}

202

203

204

205

206

New workspace

207

</Link>

208

</DropdownMenuItem>

209

</DropdownMenuContent>

210

</DropdownMenu>

211

);

212

}

213

A Vercel-like sidebar and a new mark3d ago

214

/** This month's spend against what is left, as Vercel shows a plan's usage. */

215

function UsageCard({ slug, shell }: { slug: string; shell: ShellData }) {

Usage while free is shown at cost; agents get rustfmt and clippy2d ago

216

if (shell.monthUsageMicros == null) return null;

217

const spent = shell.monthUsageMicros;

A Vercel-like sidebar and a new mark3d ago

218

const left = shell.creditMicros;

219

const share = left != null && spent + left > 0 ? Math.min(1, spent / (spent + Math.max(left, 0))) : 0;

220

return (

221

<Link

222

to={`/${slug}/-/usage`}

223

className="block rounded-lg bg-surface p-3 ring-1 ring-line transition-colors hover:ring-line-strong"

224

>

225

226

<span className="font-medium text-fg">Usage</span>

227

<span className="text-faint">this month</span>

228

</span>

229

230

<span className="font-mono text-sm tabular-nums">${(spent / MICROS_PER_DOLLAR).toFixed(2)}</span>

Free while g1t is being built out; agents can check out their own forks2d ago

231

{shell.free ? (

232

233

) : (

234

left != null && (

235

236

${(left / MICROS_PER_DOLLAR).toFixed(2)} left

237

</span>

238

)

A Vercel-like sidebar and a new mark3d ago

239

)}

240

</span>

241

242

<span

243

className={`block h-full rounded-full ${left != null && left <= 0 ? "bg-warn" : "bg-accent"}`}

244

style={{ width: `${Math.max(share * 100, spent > 0 ? 3 : 0)}%` }}

245

/>

246

</span>

247

</Link>

248

);

249

}

250

251

function AccountMenu({ user }: { user: User }) {

252

const submit = useSubmit();

253

return (

254

255

256

257

<span className="min-w-0 grow truncate text-[0.8125rem] font-medium">{user.username}</span>

258

259

</DropdownMenuTrigger>

260

261

262

Signed in as <span className="font-mono font-medium text-fg">{user.username}</span>

263

</DropdownMenuLabel>

264

265

266

267

268

Your settings

269

</Link>

270

</DropdownMenuItem>

271

272

273

274

Documentation

275

</a>

276

</DropdownMenuItem>

277

278

{/* Submitted from here: the menu closes on select, and a button

279

that has left the page cannot submit a form. */}

280

<DropdownMenuItem onSelect={() => submit(null, { method: "post", action: "/logout" })}>

281

282

Sign out

283

</DropdownMenuItem>

284

</DropdownMenuContent>

285

</DropdownMenu>

286

);

287

}

288

A catalogue of model providers, and settings that feel like settings3d ago

289

/** A workspace's settings pages, which the sidebar slides over to. */

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs3d ago

290

A catalogue of model providers, and settings that feel like settings3d ago

291

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

292

/**

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

293

* The sidebar's menus are two layers, the way a phone pushes a screen: the

294

* one arriving slides in from the right over the full width, while the one

295

* leaving drifts a quarter of the way left and fades, both on one long

Sidebar: the panels really slide2d ago

296

* ease-out, the fade quicker than the move so the two never blur together.

297

* Going back reverses it.

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

298

*/

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

299

const LAYER =

Sidebar: the panels really slide2d ago

300

"absolute inset-0 [transition:translate_380ms_cubic-bezier(0.32,0.72,0,1),opacity_220ms_ease-out] will-change-[translate,opacity] motion-reduce:transition-none";

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

301

/** One menu, filling its layer. */

302

const PANEL = "h-full overflow-y-auto px-2 pb-4";

A catalogue of model providers, and settings that feel like settings3d ago

303

304

/** A workspace's settings, as the sidebar shows them in place of everything else. */

305

function SettingsMenu({ slug, owner, open }: { slug: string; owner: boolean; open: boolean }) {

306

return (

307

<nav

308

aria-label="Workspace settings"

309

inert={!open}

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

310

className={PANEL}

A catalogue of model providers, and settings that feel like settings3d ago

311

>

312

<Link

313

to={`/${slug}`}

314

className="group mt-3 flex h-8 items-center gap-2 rounded-md px-2 text-[0.8125rem] text-muted transition-colors hover:bg-raised/60 hover:text-fg"

315

>

316

317

318

</Link>

319

320

{owner && (

321

322

General

323

</SidebarLink>

324

)}

325

326

Members

327

</SidebarLink>

Secrets and variables: one list, rows per environment, for workflows and deployments1d ago

328

329

Access tokens

330

</SidebarLink>

A catalogue of model providers, and settings that feel like settings3d ago

331

Secrets and variables: one list, rows per environment, for workflows and deployments1d ago

332

Billing and plans

A catalogue of model providers, and settings that feel like settings3d ago

333

</SidebarLink>

334

335

Integrations

Webhooks: every event, to your own addresses, signed and retried3d ago

336

</SidebarLink>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs3d ago

337

338

Secrets and variables

339

</SidebarLink>

Secrets and variables: one list, rows per environment, for workflows and deployments1d ago

340

341

Webhooks

A catalogue of model providers, and settings that feel like settings3d ago

342

</SidebarLink>

343

</SidebarGroup>

344

</nav>

345

);

346

}

347

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

348

/**

349

* What the repository menu needs. Known from the address before the page's

350

* data arrives, so the menu is right from the first frame; the counts fill

351

* in once it does.

352

*/

353

type MenuRepo = {

354

namespace: string;

355

name: string;

356

member: boolean;

357

issues?: number;

358

pulls?: number;

359

};

360

361

function sameRepo(a: { namespace: string; name: string } | null, b: { namespace: string; name: string } | null) {

362

return (

363

a != null &&

364

b != null &&

365

a.namespace.toLowerCase() === b.namespace.toLowerCase() &&

366

a.name.toLowerCase() === b.name.toLowerCase()

367

);

368

}

A repository has its own sidebar, as settings do3d ago

369

370

/**

Projects: what a workspace builds and runs, first on every page1d ago

371

* A project's own menu, which the sidebar slides to while you are in it,

372

* as it does for settings: everything about the project, running and its

373

* code, and nothing else, with the way back to everything.

A repository has its own sidebar, as settings do3d ago

374

*/

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

375

function RepoMenu({ repo, isPrivate, open }: { repo: MenuRepo; isPrivate: boolean; open: boolean }) {

A repository has its own sidebar, as settings do3d ago

376

const base = `/${repo.namespace}/${repo.name}`;

377

return (

378

379

<Link

380

to="/"

381

className="group mt-3 flex h-8 items-center gap-2 rounded-md px-2 text-[0.8125rem] text-muted transition-colors hover:bg-raised/60 hover:text-fg"

382

>

383

384

Mission control

385

</Link>

386

<Link

387

to={base}

388

className="mt-3 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-raised/60"

389

>

390

Projects: what a workspace builds and runs, first on every page1d ago

391

{isPrivate ? <Lock size={13} /> : <Box size={13} />}

A repository has its own sidebar, as settings do3d ago

392

</span>

393

394

<span className="text-faint">{repo.namespace}/</span>

395

396

</span>

397

</Link>

Projects: what a workspace builds and runs, first on every page1d ago

398

399

400

Overview

401

</SidebarLink>

402

{repo.member && (

403

404

Deployments

405

</SidebarLink>

406

)}

407

</div>

A repository has its own sidebar, as settings do3d ago

408

Projects: what a workspace builds and runs, first on every page1d ago

409

A repository has its own sidebar, as settings do3d ago

410

Code

411

</SidebarLink>

412

413

Commits

414

</SidebarLink>

415

</SidebarGroup>

416

417

<SidebarLink to={`${base}/issues`} icon={<CircleDot size={15} />} count={repo.issues}>

418

Issues

419

</SidebarLink>

420

<SidebarLink to={`${base}/pulls`} also={`${base}/pull`} icon={<GitPullRequest size={15} />} count={repo.pulls}>

421

Pull requests

422

</SidebarLink>

423

{repo.member && (

424

425

Plan

426

</SidebarLink>

427

)}

428

429

Merge queue

430

</SidebarLink>

Pull requests say where they are live; the project menu shows what is coming1d ago

431

<SidebarSoon icon={<Kanban size={15} />} about="Issues and pull requests on boards, by state, owner or outcome.">

432

Boards

433

</SidebarSoon>

434

<SidebarSoon icon={<BookOpen size={15} />} about="Pages about the project that agents keep current as the code changes.">

435

Wiki

436

</SidebarSoon>

437

</SidebarGroup>

438

439

<SidebarSoon icon={<Bot size={15} />} about="Every agent at work on this project now: what it is doing, what it knows, and a way to steer it.">

440

Agents at work

441

</SidebarSoon>

442

<SidebarSoon icon={<ScrollText size={15} />} about="Every agent session that changed this project, searchable, with why-blame back to the lines it wrote.">

443

Sessions

444

</SidebarSoon>

A repository has its own sidebar, as settings do3d ago

445

</SidebarGroup>

446

447

448

Actions

449

</SidebarLink>

450

</SidebarGroup>

Pull requests say where they are live; the project menu shows what is coming1d ago

451

452

<SidebarSoon icon={<ShieldCheck size={15} />} about="Secret scanning, vulnerable dependencies and code scanning, each finding fixed by an agent through the queue.">

453

Security and quality

454

</SidebarSoon>

455

<SidebarSoon icon={<PackageCheck size={15} />} about="Outdated packages updated by agents, tested and landed through the queue.">

456

Dependency updates

457

</SidebarSoon>

458

</SidebarGroup>

459

460

<SidebarSoon icon={<Server size={15} />} about="Staging and other environments, with required approvers and branch rules.">

461

Environments

462

</SidebarSoon>

463

<SidebarSoon icon={<Tag size={15} />} about="Tagged releases with notes written from what landed.">

464

Releases

465

</SidebarSoon>

466

<SidebarSoon icon={<Package size={15} />} about="npm, container and other packages published from the project.">

467

Packages

468

</SidebarSoon>

469

<SidebarSoon icon={<ToggleRight size={15} />} about="Turn features on per environment or per user, without a deploy.">

470

Feature flags

471

</SidebarSoon>

472

</SidebarGroup>

473

474

<SidebarSoon icon={<Activity size={15} />} about="Requests, errors and CPU time of each deployment, and its logs.">

475

Logs and metrics

476

</SidebarSoon>

477

<SidebarSoon icon={<Siren size={15} />} about="Errors and incidents from the running app, each becoming an issue an agent can take.">

478

Errors and incidents

479

</SidebarSoon>

480

</SidebarGroup>

481

482

<SidebarSoon icon={<BarChart3 size={15} />} about="How work flows: lead time, agents' share of changes, review time, what costs most.">

483

Insights

484

</SidebarSoon>

485

</SidebarGroup>

A repository has its own sidebar, as settings do3d ago

486

{repo.member && (

Projects: what a workspace builds and runs, first on every page1d ago

487

A repository has its own sidebar, as settings do3d ago

488

489

Settings

490

</SidebarLink>

491

</SidebarGroup>

492

)}

493

</nav>

494

);

495

}

496

Account settings in the same shape as a workspace's3d ago

497

/** Your own settings, as the sidebar shows them on the settings page. */

498

function AccountSettingsMenu({ open }: { open: boolean }) {

499

const { hash } = useLocation();

500

const item = (id: string, icon: ReactNode, label: string) => (

501

<Link

502

to={`/settings#${id}`}

503

className={`group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${

504

hash === `#${id}` ? "bg-raised font-medium text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"

505

}`}

506

>

507

508

{label}

509

</Link>

510

);

511

return (

512

<nav

513

aria-label="Your settings"

514

inert={!open}

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

515

className={PANEL}

Account settings in the same shape as a workspace's3d ago

516

>

517

<Link

518

to="/"

519

className="group mt-3 flex h-8 items-center gap-2 rounded-md px-2 text-[0.8125rem] text-muted transition-colors hover:bg-raised/60 hover:text-fg"

520

>

521

522

Mission control

523

</Link>

524

Secrets and variables: one list, rows per environment, for workflows and deployments1d ago

525

{item("ssh-keys", <Fingerprint size={15} />, "SSH keys")}

526

{item("tokens", <KeyRound size={15} />, "Access tokens")}

Account settings in the same shape as a workspace's3d ago

527

{item("applications", <Plug size={15} />, "Connected applications")}

528

</SidebarGroup>

529

</nav>

530

);

531

}

532

A Vercel-like sidebar and a new mark3d ago

533

function Sidebar({ user, shell, onFind }: { user: User; shell: ShellData; onFind: () => void }) {

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

534

const ws = shell.workspace;

A catalogue of model providers, and settings that feel like settings3d ago

535

const { pathname } = useLocation();

536

const going = useNavigation().location?.pathname;

537

// On a workspace's settings page, or on the way to one, its settings take

538

// the sidebar over.

539

const inSettings = ws != null && SETTINGS_PAGE.exec(going ?? pathname)?.[1]?.toLowerCase() === ws.slug;

Account settings in the same shape as a workspace's3d ago

540

const inAccount = (going ?? pathname) === "/settings";

A repository has its own sidebar, as settings do3d ago

541

const active = shell.repo;

542

// In a repository, or on the way into one, its own menu takes the sidebar.

543

const target = going ?? pathname;

544

const repoPath = /^\/([^/]+)\/([^/-][^/]*)(\/|$)/.exec(target);

545

const reserved = new Set(["settings", "explore", "search", "new", "workspaces", "login", "logout", "register", "verify", "forgot", "reset", "device", "oauth"]);

546

const inRepo = repoPath != null && !reserved.has(repoPath[1]) && repoPath[2] !== "-";

547

const away = inSettings || inAccount || inRepo;

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

548

// The repository the menu is for: the one loaded if it is the one being

549

// gone to, else what the address says, at once.

550

const targetRepo = inRepo && repoPath ? { namespace: repoPath[1], name: repoPath[2] } : null;

551

const menuRepo: MenuRepo | null = targetRepo

552

? sameRepo(active, targetRepo)

553

? active

554

: {

555

...targetRepo,

556

member: (user.workspaces ?? []).some((m) => m.slug === targetRepo.namespace.toLowerCase()),

557

}

558

: null;

A repository has its own sidebar, as settings do3d ago

559

// What sits on the far side of the track. Kept while sliding back, so it

560

// does not vanish on the way out.

561

const side = useRef<"workspace" | "account" | "repo">("workspace");

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

562

if (inAccount) side.current = "account";

563

else if (inSettings) side.current = "workspace";

A repository has its own sidebar, as settings do3d ago

564

else if (inRepo) side.current = "repo";

565

// The repository last shown, kept for the slide back.

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

566

const shown = useRef<MenuRepo | null>(menuRepo);

567

if (menuRepo) shown.current = menuRepo;

568

// Moving between two of the far-side menus (settings to a repository,

569

// one repository to another) crossfades in place instead of sliding.

570

const detailKey = side.current === "repo" ? `repo:${shown.current?.namespace}/${shown.current?.name}` : side.current;

571

const lastAway = useRef(away);

572

const lastKey = useRef(detailKey);

573

const swapped = lastAway.current && away && lastKey.current !== detailKey;

574

useEffect(() => {

575

lastAway.current = away;

576

lastKey.current = detailKey;

577

});

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

578

// The repository being looked at is listed even when it is someone else's.

579

const listed =

580

active && !shell.repos.some((repo) => repo.namespace === active.namespace && repo.name === active.name)

581

? [{ namespace: active.namespace, name: active.name, isPrivate: false }, ...shell.repos]

582

: shell.repos;

583

return (

584

A Vercel-like sidebar and a new mark3d ago

585

{/* The same height and rule as the top bar, so the two read as one line. */}

586

587

588

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

589

</Link>

A Vercel-like sidebar and a new mark3d ago

590

591

/

592

</span>

593

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

594

</div>

A Vercel-like sidebar and a new mark3d ago

595

596

<button

597

type="button"

598

onClick={onFind}

599

className="flex h-8 w-full items-center gap-2 rounded-md bg-surface px-2.5 text-[0.8125rem] text-faint ring-1 ring-line transition-colors hover:text-muted hover:ring-line-strong"

600

>

601

602

603

604

</button>

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

605

</div>

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

606

607

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

608

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

609

610

611

Mission control

612

</SidebarLink>

613

614

Explore

615

</SidebarLink>

616

</div>

617

618

<SidebarGroup

Projects: what a workspace builds and runs, first on every page1d ago

619

title="Projects"

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

620

action={

621

ws && (

622

<Link

623

to={`/new?workspace=${ws.slug}`}

Projects: what a workspace builds and runs, first on every page1d ago

624

aria-label="New project"

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

625

className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"

626

>

627

628

</Link>

629

)

630

}

631

>

632

{listed.length === 0 && (

633

634

)}

635

{listed.map((repo) => {

636

const base = `/${repo.namespace}/${repo.name}`;

637

return (

638

639

<SidebarLink

640

to={base}

Projects: what a workspace builds and runs, first on every page1d ago

641

icon={repo.isPrivate ? <Lock size={15} /> : <Box size={15} />}

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

642

>

Projects: what a workspace builds and runs, first on every page1d ago

643

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

644

{repo.namespace !== ws?.slug && (

Projects: what a workspace builds and runs, first on every page1d ago

645

<span className="font-mono text-faint">{repo.namespace}/</span>

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

646

)}

Projects: what a workspace builds and runs, first on every page1d ago

647

{"title" in repo && repo.title ? repo.title : repo.name}

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

648

</span>

649

</SidebarLink>

650

</div>

651

);

652

})}

653

</SidebarGroup>

654

</nav>

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

655

</div>

Sidebar: no settings flash on the way into a repository, and a better slide2d ago

656

657

658

{side.current === "repo" && shown.current ? (

659

<RepoMenu

660

repo={shown.current}

661

isPrivate={shell.repos.some((repo) => sameRepo(repo, shown.current) && repo.isPrivate)}

662

open={inRepo}

663

/>

664

) : side.current === "account" || !ws ? (

665

666

) : (

667

668

)}

669

</div>

670

</div>

A catalogue of model providers, and settings that feel like settings3d ago

671

</div>

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

672

Workspace things at the bottom of the sidebar, and on mission control3d ago

673

{/* The workspace's own things sit at the bottom, by its usage and the account. */}

A Vercel-like sidebar and a new mark3d ago

674

Workspace things at the bottom of the sidebar, and on mission control3d ago

675

{ws && (

676

A repository has its own sidebar, as settings do3d ago

677

Workspace things at the bottom of the sidebar, and on mission control3d ago

678

679

Usage

680

</SidebarLink>

681

{/* Everything else about the workspace lives in its settings, and only there. */}

682

<SidebarLink

683

to={ws.role === "owner" ? `/${ws.slug}/-/settings` : `/${ws.slug}/-/people`}

684

icon={<Settings size={15} />}

685

>

686

Settings

687

</SidebarLink>

688

</div>

689

)}

A Vercel-like sidebar and a new mark3d ago

690

{ws && <UsageCard slug={ws.slug} shell={shell} />}

691

692

</div>

693

</div>

694

);

695

}

696

697

/** Words for the sections a path can end in. */

698

const SECTIONS: Record<string, string> = {

699

issues: "Issues",

700

pulls: "Pull requests",

701

queue: "Merge queue",

702

commits: "Commits",

703

plans: "Plan",

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs3d ago

704

actions: "Actions",

Deployments: a preview for every pull request, production on g1t.page1d ago

705

deployments: "Deployments",

Projects: what a workspace builds and runs, first on every page1d ago

706

repository: "Repository",

Project dependencies: addresses, preview stacks, Affects, and agents who know1d ago

707

dependencies: "Dependencies",

Projects: what a workspace builds and runs, first on every page1d ago

708

code: "Code",

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs3d ago

709

secrets: "Secrets and variables",

A Vercel-like sidebar and a new mark3d ago

710

settings: "Settings",

A catalogue of model providers, and settings that feel like settings3d ago

711

people: "Members",

A Vercel-like sidebar and a new mark3d ago

712

tokens: "Access tokens",

713

usage: "Usage",

Secrets and variables: one list, rows per environment, for workflows and deployments1d ago

714

billing: "Billing and plans",

A catalogue of model providers, and settings that feel like settings3d ago

715

integrations: "Integrations",

Webhooks: every event, to your own addresses, signed and retried3d ago

716

webhooks: "Webhooks",

A Vercel-like sidebar and a new mark3d ago

717

tree: "Code",

718

blob: "Code",

719

};

720

721

/** Where the page is, as a trail of links: workspace / repository / section. */

722

function Breadcrumbs({ pathname }: { pathname: string }) {

723

const parts = pathname.split("/").filter(Boolean);

724

const reserved = ["settings", "explore", "new", "search", "workspaces"];

725

if (parts.length === 0) return <span className="text-sm font-medium">Mission control</span>;

726

if (reserved.includes(parts[0]!)) {

727

const words: Record<string, string> = {

Account settings in the same shape as a workspace's3d ago

728

settings: "Account",

A Vercel-like sidebar and a new mark3d ago

729

explore: "Explore",

Projects live: fixes from walking them end to end1d ago

730

new: "New project",

A Vercel-like sidebar and a new mark3d ago

731

search: "Search",

732

workspaces: "New workspace",

733

};

734

return <span className="text-sm font-medium">{words[parts[0]!]}</span>;

735

}

736

const [owner, second, third, fourth] = parts;

737

const trail: { label: string; to: string; mono?: boolean }[] = [{ label: owner!, to: `/${owner}`, mono: true }];

738

if (second === "-") {

A catalogue of model providers, and settings that feel like settings3d ago

739

const page = `/${owner}/-/${third}`;

740

if (third && SETTINGS_PAGE.test(page)) {

741

trail.push({ label: "Settings", to: `/${owner}/-/settings` });

742

trail.push({ label: third === "settings" ? "General" : (SECTIONS[third] ?? third), to: page });

743

} else if (third) trail.push({ label: SECTIONS[third] ?? third, to: page });

A Vercel-like sidebar and a new mark3d ago

744

} else if (second) {

745

const repo = `/${owner}/${second}`;

746

trail.push({ label: second, to: repo, mono: true });

747

if (third === "pull" && fourth) trail.push({ label: `Pull request #${fourth}`, to: `${repo}/pull/${fourth}` });

748

else if (third === "issues" && fourth && fourth !== "new") trail.push({ label: `Issue #${fourth}`, to: `${repo}/issues/${fourth}` });

749

else if (third === "commit" && fourth) trail.push({ label: fourth.slice(0, 7), to: `${repo}/commit/${fourth}`, mono: true });

Secrets and variables: one list, rows per environment, for workflows and deployments1d ago

750

else if (third && SECTIONS[third]) {

751

trail.push({ label: SECTIONS[third]!, to: `${repo}/${third}` });

752

// A settings page names which one: Settings / Secrets and variables.

753

if (third === "settings" && fourth && SECTIONS[fourth]) {

754

trail.push({ label: SECTIONS[fourth]!, to: `${repo}/settings/${fourth}` });

755

}

756

}

A Vercel-like sidebar and a new mark3d ago

757

}

758

return (

759

760

{trail.map((crumb, index) => (

761

762

{index > 0 && <span className="text-line-strong">/</span>}

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

763

<Link

A Vercel-like sidebar and a new mark3d ago

764

to={crumb.to}

765

className={`truncate rounded px-1 py-0.5 transition-colors hover:bg-raised ${

766

index === trail.length - 1 ? "font-medium text-fg" : "text-muted hover:text-fg"

767

} ${crumb.mono ? "font-mono text-[0.8125rem]" : ""}`}

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

768

>

A Vercel-like sidebar and a new mark3d ago

769

{crumb.label}

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

770

</Link>

A Vercel-like sidebar and a new mark3d ago

771

</span>

772

))}

773

</nav>

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

774

);

775

}

776

777

type Command = { label: string; hint?: string; to: string; icon: ReactNode };

778

779

/** Everything the palette can jump to, from what the sidebar already knows. */

780

function commandsFor(user: User, shell: ShellData): Command[] {

781

const commands: Command[] = [

782

{ label: "Mission control", to: "/", icon: <LayoutDashboard size={15} /> },

783

{ label: "Explore repositories", to: "/explore", icon: <Compass size={15} /> },

Projects: what a workspace builds and runs, first on every page1d ago

784

{ label: "New project", to: "/new", icon: <Plus size={15} /> },

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

785

{ label: "New workspace", to: "/workspaces/new", icon: <Plus size={15} /> },

786

{ label: "Your settings", to: "/settings", icon: <Settings size={15} /> },

787

];

788

const repo = shell.repo;

789

if (repo) {

790

const base = `/${repo.namespace}/${repo.name}`;

791

const name = `${repo.namespace}/${repo.name}`;

792

commands.unshift(

Projects: what a workspace builds and runs, first on every page1d ago

793

{ label: "Overview", hint: name, to: base, icon: <LayoutGrid size={15} /> },

794

{ label: "Code", hint: name, to: `${base}/code`, icon: <Code2 size={15} /> },

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

795

{ label: "Issues", hint: name, to: `${base}/issues`, icon: <CircleDot size={15} /> },

796

{ label: "New issue", hint: name, to: `${base}/issues/new`, icon: <Plus size={15} /> },

797

{ label: "Pull requests", hint: name, to: `${base}/pulls`, icon: <GitPullRequest size={15} /> },

798

{ label: "Commits", hint: name, to: `${base}/commits`, icon: <History size={15} /> },

799

...(repo.member

800

? [

801

{ label: "Plan work", hint: name, to: `${base}/plans`, icon: <ListTree size={15} /> },

Projects: what a workspace builds and runs, first on every page1d ago

802

{ label: "Deployments", hint: name, to: `${base}/deployments`, icon: <Rocket size={15} /> },

803

{ label: "Secrets and variables", hint: name, to: `${base}/settings/secrets`, icon: <Lock size={15} /> },

804

{ label: "Project settings", hint: name, to: `${base}/settings`, icon: <Settings size={15} /> },

805

{ label: "Repository settings", hint: name, to: `${base}/settings/repository`, icon: <Settings size={15} /> },

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

806

]

807

: []),

808

);

809

}

810

for (const membership of user.workspaces ?? []) {

811

commands.push(

812

{ label: membership.slug, hint: "Workspace", to: `/${membership.slug}`, icon: <Avatar name={membership.slug} size={15} square /> },

Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request3d ago

813

{ label: "Usage", hint: membership.slug, to: `/${membership.slug}/-/usage`, icon: <BarChart3 size={15} /> },

Projects: what a workspace builds and runs, first on every page1d ago

814

{ label: "Billing and plans", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/billing`, icon: <CreditCard size={15} /> },

A catalogue of model providers, and settings that feel like settings3d ago

815

{ label: "Access tokens", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/tokens`, icon: <KeyRound size={15} /> },

816

{ label: "Integrations", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/integrations`, icon: <Plug size={15} /> },

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

817

);

818

}

819

for (const listed of shell.repos) {

820

commands.push({

Projects: what a workspace builds and runs, first on every page1d ago

821

label: listed.title ?? listed.name,

822

hint: `${listed.namespace} · Project`,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

823

to: `/${listed.namespace}/${listed.name}`,

Projects: what a workspace builds and runs, first on every page1d ago

824

icon: <Box size={15} />,

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

825

});

826

}

827

return commands;

828

}

829

830

function CommandPalette({

831

open,

832

onClose,

833

commands,

834

}: {

835

open: boolean;

836

onClose: () => void;

837

commands: Command[];

838

}) {

839

const navigate = useNavigate();

840

const [query, setQuery] = useState("");

841

const [selected, setSelected] = useState(0);

842

const input = useRef<HTMLInputElement>(null);

843

const matches = useMemo(() => {

844

const words = query.toLowerCase().split(/\s+/).filter(Boolean);

845

return commands

846

.filter((command) => {

847

const text = `${command.label} ${command.hint ?? ""}`.toLowerCase();

848

return words.every((word) => text.includes(word));

849

})

850

.slice(0, 12);

851

}, [commands, query]);

852

853

useEffect(() => {

854

if (!open) return;

855

setQuery("");

856

setSelected(0);

857

input.current?.focus();

858

}, [open]);

859

useEffect(() => setSelected(0), [query]);

860

861

if (!open) return null;

862

const go = (command: Command | undefined) => {

863

if (!command) return;

864

onClose();

865

navigate(command.to);

866

};

867

return (

868

869

<div

870

role="dialog"

871

aria-label="Go to"

872

className="w-full max-w-xl overflow-hidden rounded-xl border border-line-strong bg-raised shadow-2xl shadow-black/60"

873

onClick={(event) => event.stopPropagation()}

874

>

875

876

877

<input

878

ref={input}

879

value={query}

880

onChange={(event) => setQuery(event.target.value)}

881

onKeyDown={(event) => {

882

if (event.key === "ArrowDown") {

883

event.preventDefault();

884

setSelected((index) => Math.min(index + 1, matches.length - 1));

885

} else if (event.key === "ArrowUp") {

886

event.preventDefault();

887

setSelected((index) => Math.max(index - 1, 0));

888

} else if (event.key === "Enter") {

889

event.preventDefault();

890

go(matches[selected]);

891

} else if (event.key === "Escape") {

892

onClose();

893

}

894

}}

895

placeholder="Go to a repository, a page, or an action…"

896

autoComplete="off"

897

data-1p-ignore

898

className="h-12 grow border-0 bg-transparent text-sm shadow-none outline-none ring-0 placeholder:text-faint focus:outline-none focus-visible:outline-none"

899

/>

900

901

</div>

902

903

{matches.length === 0 && (

904

<li className="px-3 py-6 text-center text-sm text-faint">Nothing matches.</li>

905

)}

906

{matches.map((command, index) => (

907

908

<button

909

type="button"

910

onMouseEnter={() => setSelected(index)}

911

onClick={() => go(command)}

912

className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm ${

913

index === selected ? "bg-line text-fg" : "text-muted"

914

}`}

915

>

916

<span className="shrink-0 text-faint">{command.icon}</span>

917

<span className="min-w-0 grow truncate">{command.label}</span>

918

{command.hint && <span className="shrink-0 truncate text-xs text-faint">{command.hint}</span>}

919

{index === selected && <CornerDownLeft size={13} className="shrink-0 text-faint" />}

920

</button>

921

</li>

922

))}

923

</ul>

924

</div>

925

</div>

926

);

927

}

928

929

/**

930

* A bar across the top of the page while the next one loads, as GitHub

931

* has: it appears at once, creeps towards the end while waiting, then fills

932

* and fades when the page arrives.

933

*/

934

export function Progress() {

935

const navigation = useNavigation();

936

const busy = navigation.state !== "idle";

937

const [width, setWidth] = useState(0);

938

const [visible, setVisible] = useState(false);

939

useEffect(() => {

940

if (busy) {

941

setVisible(true);

942

setWidth(12);

943

// Slows as it goes, never quite arriving until the page does.

944

const timer = setInterval(() => setWidth((now) => now + (90 - now) * 0.12), 200);

945

return () => clearInterval(timer);

946

}

947

setWidth((now) => (now > 0 ? 100 : 0));

948

const fade = setTimeout(() => setVisible(false), 250);

949

const reset = setTimeout(() => setWidth(0), 550);

950

return () => {

951

clearTimeout(fade);

952

clearTimeout(reset);

953

};

954

}, [busy]);

955

return (

956

<div

957

aria-hidden="true"

958

className={`pointer-events-none fixed inset-x-0 top-0 z-[60] h-[3px] transition-opacity duration-300 ${

959

visible ? "opacity-100" : "opacity-0"

960

}`}

961

>

962

<div

963

className="h-full bg-accent shadow-[0_0_10px_var(--color-accent)] transition-[width] duration-200 ease-out"

964

style={{ width: `${width}%` }}

965

/>

966

</div>

967

);

968

}

969

970

/**

971

* The signed-in app: a sidebar with the workspace, its repositories and the

972

* sections of the one being looked at; a slim bar with search and the

973

* account; and the page.

974

*/

975

export function AppShell({

976

user,

977

shell,

978

banner,

979

children,

980

}: {

981

user: User;

982

shell: ShellData;

983

banner?: ReactNode;

984

children: ReactNode;

985

}) {

986

const submit = useSubmit();

987

const { pathname } = useLocation();

988

const [drawer, setDrawer] = useState(false);

989

const [palette, setPalette] = useState(false);

990

const commands = useMemo(() => commandsFor(user, shell), [user, shell]);

991

992

// A new page closes the drawer on small screens.

993

useEffect(() => setDrawer(false), [pathname]);

994

useEffect(() => {

995

const onKey = (event: KeyboardEvent) => {

996

if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {

997

event.preventDefault();

998

setPalette((open) => !open);

999

}

1000

};

1001

window.addEventListener("keydown", onKey);

1002

return () => window.removeEventListener("keydown", onKey);

1003

}, []);

1004

1005

return (

1006

1007

1008

A Vercel-like sidebar and a new mark3d ago

1009

<Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1010

</aside>

1011

{drawer && (

1012

1013

<button

1014

type="button"

1015

aria-label="Close menu"

1016

className="absolute inset-0 bg-black/60"

1017

onClick={() => setDrawer(false)}

1018

/>

1019

1020

<button

1021

type="button"

1022

aria-label="Close menu"

1023

onClick={() => setDrawer(false)}

1024

className="absolute top-3 right-3 rounded-md p-1 text-faint hover:bg-raised hover:text-fg"

1025

>

1026

1027

</button>

A Vercel-like sidebar and a new mark3d ago

1028

<Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1029

</aside>

1030

</div>

1031

)}

1032

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

1033

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1034

1035

<button

1036

type="button"

1037

aria-label="Open menu"

1038

onClick={() => setDrawer(true)}

1039

className="rounded-md p-1.5 text-muted hover:bg-raised hover:text-fg lg:hidden"

1040

>

1041

1042

</button>

A Vercel-like sidebar and a new mark3d ago

1043

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1044

A Vercel-like sidebar and a new mark3d ago

1045

<a

1046

href="https://docs.g1t.sh/"

1047

className="hidden rounded-md px-2 py-1 text-[0.8125rem] text-muted transition-colors hover:bg-raised hover:text-fg sm:block"

1048

>

1049

Docs

1050

</a>

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1051

1052

<DropdownMenuTrigger

1053

aria-label="Create"

A Vercel-like sidebar and a new mark3d ago

1054

className="flex h-8 items-center gap-1.5 rounded-md bg-fg px-2.5 text-[0.8125rem] font-medium text-bg outline-none transition-colors hover:bg-white"

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1055

>

A Vercel-like sidebar and a new mark3d ago

1056

1057

New

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1058

</DropdownMenuTrigger>

1059

1060

{shell.repo && (

1061

1062

1063

1064

New issue

1065

</Link>

1066

</DropdownMenuItem>

1067

)}

1068

{shell.repo?.member && (

1069

1070

1071

1072

Plan work

1073

</Link>

1074

</DropdownMenuItem>

1075

)}

1076

1077

Projects: what a workspace builds and runs, first on every page1d ago

1078

<Box />

1079

New project

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1080

</Link>

1081

</DropdownMenuItem>

1082

1083

1084

1085

New workspace

1086

</Link>

1087

</DropdownMenuItem>

1088

</DropdownMenuContent>

1089

</DropdownMenu>

1090

</div>

1091

</header>

1092

{banner}

Polish: phones, copy boxes, the plan page, the landing page, a real glide3d ago

1093

<main className="min-w-0 grow">{children}</main>

Agents as a team: lifecycle, merge queue, billing and a new shell3d ago

1094

</div>

1095

<CommandPalette open={palette} onClose={() => setPalette(false)} commands={commands} />

1096

</div>

1097

);

1098

}