Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

pr_01m47d15m3e54sn21z27rpy5n9/apps/web/app/components/shell.tsx

1,002 lines38,776 bytesCodeBlame

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.

Agents as a team: lifecycle, merge queue, billing and a new shell1import {
A catalogue of model providers, and settings that feel like settings2 ArrowLeft,
Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request3 BarChart3,
Agents as a team: lifecycle, merge queue, billing and a new shell4 BookMarked,
5 BookOpen,
6 Check,
7 ChevronsUpDown,
A Vercel-like sidebar and a new mark8 Ellipsis,
Agents as a team: lifecycle, merge queue, billing and a new shell9 CircleDot,
10 Code2,
11 Compass,
12 CornerDownLeft,
13 CreditCard,
14 GitPullRequest,
15 History,
Secrets and variables: one list, rows per environment, for workflows and deployments16 Fingerprint,
Agents as a team: lifecycle, merge queue, billing and a new shell17 KeyRound,
18 Layers,
19 LayoutDashboard,
20 ListTree,
21 Lock,
22 LogOut,
23 Menu,
24 Plus,
25 Search,
Integrations: your own model provider, alerts that open issues, tickets agents read26 Plug,
Agents as a team: lifecycle, merge queue, billing and a new shell27 Settings,
28 Users,
Webhooks: every event, to your own addresses, signed and retried29 Webhook,
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs30 PlayCircle,
Deployments: a preview for every pull request, production on g1t.page31 Rocket,
Agents as a team: lifecycle, merge queue, billing and a new shell32 X,
33} from "lucide-react";
34import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
35import { Form, Link, NavLink, useLocation, useNavigate, useNavigation, useSubmit } from "react-router";
36
37import type { User } from "@g1t/contracts";
38import { MICROS_PER_DOLLAR } from "@g1t/contracts";
39
A Vercel-like sidebar and a new mark40import { Mark } from "./logo";
Agents as a team: lifecycle, merge queue, billing and a new shell41import { Avatar } from "./ui";
42import {
43 DropdownMenu,
44 DropdownMenuContent,
45 DropdownMenuItem,
46 DropdownMenuLabel,
47 DropdownMenuSeparator,
48 DropdownMenuTrigger,
49} from "./ui/dropdown-menu";
50
51/** What the sidebar needs, worked out by the root loader for a signed-in person. */
52export type ShellData = {
53 /** The workspace the sidebar is about: the one being looked at, or their first. */
54 workspace: { slug: string; role: "owner" | "member" } | null;
55 /** Its repositories, newest first. */
56 repos: { namespace: string; name: string; isPrivate: boolean }[];
57 /** The repository being looked at, if any, whoever owns it. */
58 repo: {
59 namespace: string;
60 name: string;
61 member: boolean;
62 issues: number;
63 pulls: number;
64 } | null;
65 /** The workspace's agent credit, if billing is on and they may see it. */
66 creditMicros: number | null;
Free while g1t is being built out; agents can check out their own forks67 /** Whether g1t charges nothing for now, while it is being built out. */
68 free?: boolean;
Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request69 /** What its agents have cost since the start of the month. */
Usage while free is shown at cost; agents get rustfmt and clippy70 /** This month's usage: charged, or at cost while g1t is free. */
71 monthUsageMicros: number | null;
Agents as a team: lifecycle, merge queue, billing and a new shell72};
73
74function SidebarLink({
75 to,
76 icon,
77 end,
78 count,
79 also,
80 children,
81}: {
82 to: string;
83 icon: ReactNode;
84 end?: boolean;
85 count?: number;
86 /** Another path prefix under which this link is the current one. */
87 also?: string;
88 children: ReactNode;
89}) {
90 const { pathname } = useLocation();
91 return (
92 <NavLink
93 to={to}
94 end={end}
95 prefetch="intent"
96 className={({ isActive, isPending }) => {
97 const current = isActive || (also != null && pathname.startsWith(also + "/"));
A Vercel-like sidebar and a new mark98 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 shell99 current
100 ? "bg-raised font-medium text-fg"
101 : isPending
102 ? "bg-raised/60 text-fg"
103 : "text-muted hover:bg-raised/60 hover:text-fg"
104 }`;
105 }}
106 >
107 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
108 <span className="min-w-0 grow truncate">{children}</span>
109 {count != null && count > 0 && (
110 <span className="rounded bg-line px-1.5 text-[0.6875rem] tabular-nums text-muted">
111 {count}
112 </span>
113 )}
114 </NavLink>
115 );
116}
117
118function SidebarGroup({ title, action, children }: { title: string; action?: ReactNode; children: ReactNode }) {
119 return (
A Vercel-like sidebar and a new mark120 <section className="mt-6">
121 <div className="mb-1 flex h-6 items-center justify-between px-2">
122 <h2 className="text-xs font-medium text-faint">{title}</h2>
Agents as a team: lifecycle, merge queue, billing and a new shell123 {action}
124 </div>
125 <div className="space-y-px">{children}</div>
126 </section>
127 );
128}
129
130function WorkspaceSwitcher({ user, shell }: { user: User; shell: ShellData }) {
131 const current = shell.workspace?.slug;
132 return (
133 <DropdownMenu>
A Vercel-like sidebar and a new mark134 {/* The name goes to the workspace; only the arrows switch it. */}
135 <Link
136 to={current ? `/${current}` : "/workspaces/new"}
137 className="flex h-8 min-w-0 items-center gap-2 rounded-md px-1.5 transition-colors hover:bg-raised"
138 >
Agents as a team: lifecycle, merge queue, billing and a new shell139 {current ? (
A Vercel-like sidebar and a new mark140 <Avatar name={current} size={20} square />
Agents as a team: lifecycle, merge queue, billing and a new shell141 ) : (
A Vercel-like sidebar and a new mark142 <span className="size-5 rounded-md border border-dashed border-line-strong" />
Agents as a team: lifecycle, merge queue, billing and a new shell143 )}
A Vercel-like sidebar and a new mark144 <span className="min-w-0 truncate text-sm font-medium">{current ?? "Choose a workspace"}</span>
145 {shell.workspace && (
146 <span className="shrink-0 rounded-full bg-raised px-1.5 py-px text-[0.625rem] font-medium text-muted ring-1 ring-line capitalize">
147 {shell.workspace.role}
Agents as a team: lifecycle, merge queue, billing and a new shell148 </span>
A Vercel-like sidebar and a new mark149 )}
150 </Link>
151 <DropdownMenuTrigger
152 aria-label="Switch workspace"
153 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"
154 >
155 <ChevronsUpDown size={14} />
Agents as a team: lifecycle, merge queue, billing and a new shell156 </DropdownMenuTrigger>
157 <DropdownMenuContent align="start" className="w-60">
158 <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
159 {(user.workspaces ?? []).map((membership) => (
160 <DropdownMenuItem asChild key={membership.slug}>
161 <Link to={`/${membership.slug}`}>
162 <Avatar name={membership.slug} size={16} square />
163 <span className="grow">{membership.slug}</span>
164 {membership.slug === current && <Check className="text-accent" />}
165 </Link>
166 </DropdownMenuItem>
167 ))}
168 <DropdownMenuSeparator />
169 <DropdownMenuItem asChild>
170 <Link to="/workspaces/new">
171 <Plus />
172 New workspace
173 </Link>
174 </DropdownMenuItem>
175 </DropdownMenuContent>
176 </DropdownMenu>
177 );
178}
179
A Vercel-like sidebar and a new mark180/** This month's spend against what is left, as Vercel shows a plan's usage. */
181function UsageCard({ slug, shell }: { slug: string; shell: ShellData }) {
Usage while free is shown at cost; agents get rustfmt and clippy182 if (shell.monthUsageMicros == null) return null;
183 const spent = shell.monthUsageMicros;
A Vercel-like sidebar and a new mark184 const left = shell.creditMicros;
185 const share = left != null && spent + left > 0 ? Math.min(1, spent / (spent + Math.max(left, 0))) : 0;
186 return (
187 <Link
188 to={`/${slug}/-/usage`}
189 className="block rounded-lg bg-surface p-3 ring-1 ring-line transition-colors hover:ring-line-strong"
190 >
191 <span className="flex items-baseline justify-between text-xs">
192 <span className="font-medium text-fg">Usage</span>
193 <span className="text-faint">this month</span>
194 </span>
195 <span className="mt-2 flex items-baseline justify-between">
196 <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 forks197 {shell.free ? (
198 <span className="text-xs text-accent">Free for now</span>
199 ) : (
200 left != null && (
201 <span className={`text-xs ${left <= 0 ? "text-warn" : "text-faint"}`}>
202 ${(left / MICROS_PER_DOLLAR).toFixed(2)} left
203 </span>
204 )
A Vercel-like sidebar and a new mark205 )}
206 </span>
207 <span className="mt-2 block h-1 overflow-hidden rounded-full bg-raised">
208 <span
209 className={`block h-full rounded-full ${left != null && left <= 0 ? "bg-warn" : "bg-accent"}`}
210 style={{ width: `${Math.max(share * 100, spent > 0 ? 3 : 0)}%` }}
211 />
212 </span>
213 </Link>
214 );
215}
216
217function AccountMenu({ user }: { user: User }) {
218 const submit = useSubmit();
219 return (
220 <DropdownMenu>
221 <DropdownMenuTrigger className="flex h-10 w-full items-center gap-2.5 rounded-md px-2 text-left outline-none transition-colors hover:bg-raised data-[state=open]:bg-raised">
222 <Avatar name={user.username} size={22} />
223 <span className="min-w-0 grow truncate text-[0.8125rem] font-medium">{user.username}</span>
224 <Ellipsis size={15} className="shrink-0 text-faint" />
225 </DropdownMenuTrigger>
226 <DropdownMenuContent align="start" side="top" className="w-56">
227 <DropdownMenuLabel>
228 Signed in as <span className="font-mono font-medium text-fg">{user.username}</span>
229 </DropdownMenuLabel>
230 <DropdownMenuSeparator />
231 <DropdownMenuItem asChild>
232 <Link to="/settings">
233 <Settings />
234 Your settings
235 </Link>
236 </DropdownMenuItem>
237 <DropdownMenuItem asChild>
238 <a href="https://docs.g1t.sh/">
239 <BookOpen />
240 Documentation
241 </a>
242 </DropdownMenuItem>
243 <DropdownMenuSeparator />
244 {/* Submitted from here: the menu closes on select, and a button
245 that has left the page cannot submit a form. */}
246 <DropdownMenuItem onSelect={() => submit(null, { method: "post", action: "/logout" })}>
247 <LogOut />
248 Sign out
249 </DropdownMenuItem>
250 </DropdownMenuContent>
251 </DropdownMenu>
252 );
253}
254
A catalogue of model providers, and settings that feel like settings255/** A workspace's settings pages, which the sidebar slides over to. */
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs256const SETTINGS_PAGE = /^\/([^/]+)\/-\/(settings|people|tokens|billing|integrations|webhooks|secrets)(\/|$)/;
A catalogue of model providers, and settings that feel like settings257
Polish: phones, copy boxes, the plan page, the landing page, a real glide258/**
Sidebar: no settings flash on the way into a repository, and a better slide259 * The sidebar's menus are two layers, the way a phone pushes a screen: the
260 * one arriving slides in from the right over the full width, while the one
261 * leaving drifts a quarter of the way left and fades, both on one long
Sidebar: the panels really slide262 * ease-out, the fade quicker than the move so the two never blur together.
263 * Going back reverses it.
Polish: phones, copy boxes, the plan page, the landing page, a real glide264 */
Sidebar: no settings flash on the way into a repository, and a better slide265const LAYER =
Sidebar: the panels really slide266 "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 slide267/** One menu, filling its layer. */
268const PANEL = "h-full overflow-y-auto px-2 pb-4";
A catalogue of model providers, and settings that feel like settings269
270/** A workspace's settings, as the sidebar shows them in place of everything else. */
271function SettingsMenu({ slug, owner, open }: { slug: string; owner: boolean; open: boolean }) {
272 return (
273 <nav
274 aria-label="Workspace settings"
275 inert={!open}
Polish: phones, copy boxes, the plan page, the landing page, a real glide276 className={PANEL}
A catalogue of model providers, and settings that feel like settings277 >
278 <Link
279 to={`/${slug}`}
280 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"
281 >
282 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
283 <span className="truncate">{slug}</span>
284 </Link>
285 <SidebarGroup title="Settings">
286 {owner && (
287 <SidebarLink to={`/${slug}/-/settings`} icon={<Settings size={15} />}>
288 General
289 </SidebarLink>
290 )}
291 <SidebarLink to={`/${slug}/-/people`} icon={<Users size={15} />}>
292 Members
293 </SidebarLink>
Secrets and variables: one list, rows per environment, for workflows and deployments294 <SidebarLink to={`/${slug}/-/tokens`} icon={<KeyRound size={15} />}>
295 Access tokens
296 </SidebarLink>
A catalogue of model providers, and settings that feel like settings297 <SidebarLink to={`/${slug}/-/billing`} icon={<CreditCard size={15} />}>
Secrets and variables: one list, rows per environment, for workflows and deployments298 Billing and plans
A catalogue of model providers, and settings that feel like settings299 </SidebarLink>
300 <SidebarLink to={`/${slug}/-/integrations`} icon={<Plug size={15} />}>
301 Integrations
Webhooks: every event, to your own addresses, signed and retried302 </SidebarLink>
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs303 <SidebarLink to={`/${slug}/-/secrets`} icon={<Lock size={15} />}>
304 Secrets and variables
305 </SidebarLink>
Secrets and variables: one list, rows per environment, for workflows and deployments306 <SidebarLink to={`/${slug}/-/webhooks`} icon={<Webhook size={15} />}>
307 Webhooks
A catalogue of model providers, and settings that feel like settings308 </SidebarLink>
309 </SidebarGroup>
310 </nav>
311 );
312}
313
Sidebar: no settings flash on the way into a repository, and a better slide314/**
315 * What the repository menu needs. Known from the address before the page's
316 * data arrives, so the menu is right from the first frame; the counts fill
317 * in once it does.
318 */
319type MenuRepo = {
320 namespace: string;
321 name: string;
322 member: boolean;
323 issues?: number;
324 pulls?: number;
325};
326
327function sameRepo(a: { namespace: string; name: string } | null, b: { namespace: string; name: string } | null) {
328 return (
329 a != null &&
330 b != null &&
331 a.namespace.toLowerCase() === b.namespace.toLowerCase() &&
332 a.name.toLowerCase() === b.name.toLowerCase()
333 );
334}
A repository has its own sidebar, as settings do335
336/**
337 * A repository's own menu, which the sidebar slides to while you are in
338 * it, as it does for settings: everything about the repository and nothing
339 * else, with the way back to everything.
340 */
Sidebar: no settings flash on the way into a repository, and a better slide341function RepoMenu({ repo, isPrivate, open }: { repo: MenuRepo; isPrivate: boolean; open: boolean }) {
A repository has its own sidebar, as settings do342 const base = `/${repo.namespace}/${repo.name}`;
343 return (
344 <nav aria-label={`${repo.namespace}/${repo.name}`} inert={!open} className={PANEL}>
345 <Link
346 to="/"
347 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"
348 >
349 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
350 Mission control
351 </Link>
352 <Link
353 to={base}
354 className="mt-3 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-raised/60"
355 >
356 <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line">
357 {isPrivate ? <Lock size={13} /> : <BookMarked size={13} />}
358 </span>
359 <span className="min-w-0 truncate font-mono text-[0.8125rem]">
360 <span className="text-faint">{repo.namespace}/</span>
361 <span className="font-semibold text-fg">{repo.name}</span>
362 </span>
363 </Link>
364 <SidebarGroup title="Code">
365 <SidebarLink to={base} end icon={<Code2 size={15} />} also={`${base}/tree`}>
366 Code
367 </SidebarLink>
368 <SidebarLink to={`${base}/commits`} also={`${base}/commit`} icon={<History size={15} />}>
369 Commits
370 </SidebarLink>
371 </SidebarGroup>
372 <SidebarGroup title="Work">
373 <SidebarLink to={`${base}/issues`} icon={<CircleDot size={15} />} count={repo.issues}>
374 Issues
375 </SidebarLink>
376 <SidebarLink to={`${base}/pulls`} also={`${base}/pull`} icon={<GitPullRequest size={15} />} count={repo.pulls}>
377 Pull requests
378 </SidebarLink>
379 {repo.member && (
380 <SidebarLink to={`${base}/plans`} icon={<ListTree size={15} />}>
381 Plan
382 </SidebarLink>
383 )}
384 <SidebarLink to={`${base}/queue`} icon={<Layers size={15} />}>
385 Merge queue
386 </SidebarLink>
387 </SidebarGroup>
388 <SidebarGroup title="Automate">
389 <SidebarLink to={`${base}/actions`} icon={<PlayCircle size={15} />}>
390 Actions
391 </SidebarLink>
Deployments: a preview for every pull request, production on g1t.page392 {repo.member && (
393 <SidebarLink to={`${base}/deployments`} icon={<Rocket size={15} />}>
394 Deployments
395 </SidebarLink>
396 )}
A repository has its own sidebar, as settings do397 </SidebarGroup>
398 {repo.member && (
399 <SidebarGroup title="Repository">
400 <SidebarLink to={`${base}/settings`} icon={<Settings size={15} />}>
401 Settings
402 </SidebarLink>
403 </SidebarGroup>
404 )}
405 </nav>
406 );
407}
408
Account settings in the same shape as a workspace's409/** Your own settings, as the sidebar shows them on the settings page. */
410function AccountSettingsMenu({ open }: { open: boolean }) {
411 const { hash } = useLocation();
412 const item = (id: string, icon: ReactNode, label: string) => (
413 <Link
414 to={`/settings#${id}`}
415 className={`group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
416 hash === `#${id}` ? "bg-raised font-medium text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"
417 }`}
418 >
419 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
420 {label}
421 </Link>
422 );
423 return (
424 <nav
425 aria-label="Your settings"
426 inert={!open}
Polish: phones, copy boxes, the plan page, the landing page, a real glide427 className={PANEL}
Account settings in the same shape as a workspace's428 >
429 <Link
430 to="/"
431 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"
432 >
433 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
434 Mission control
435 </Link>
436 <SidebarGroup title="Account">
Secrets and variables: one list, rows per environment, for workflows and deployments437 {item("ssh-keys", <Fingerprint size={15} />, "SSH keys")}
438 {item("tokens", <KeyRound size={15} />, "Access tokens")}
Account settings in the same shape as a workspace's439 {item("applications", <Plug size={15} />, "Connected applications")}
440 </SidebarGroup>
441 </nav>
442 );
443}
444
A Vercel-like sidebar and a new mark445function Sidebar({ user, shell, onFind }: { user: User; shell: ShellData; onFind: () => void }) {
Agents as a team: lifecycle, merge queue, billing and a new shell446 const ws = shell.workspace;
A catalogue of model providers, and settings that feel like settings447 const { pathname } = useLocation();
448 const going = useNavigation().location?.pathname;
449 // On a workspace's settings page, or on the way to one, its settings take
450 // the sidebar over.
451 const inSettings = ws != null && SETTINGS_PAGE.exec(going ?? pathname)?.[1]?.toLowerCase() === ws.slug;
Account settings in the same shape as a workspace's452 const inAccount = (going ?? pathname) === "/settings";
A repository has its own sidebar, as settings do453 const active = shell.repo;
454 // In a repository, or on the way into one, its own menu takes the sidebar.
455 const target = going ?? pathname;
456 const repoPath = /^\/([^/]+)\/([^/-][^/]*)(\/|$)/.exec(target);
457 const reserved = new Set(["settings", "explore", "search", "new", "workspaces", "login", "logout", "register", "verify", "forgot", "reset", "device", "oauth"]);
458 const inRepo = repoPath != null && !reserved.has(repoPath[1]) && repoPath[2] !== "-";
459 const away = inSettings || inAccount || inRepo;
Sidebar: no settings flash on the way into a repository, and a better slide460 // The repository the menu is for: the one loaded if it is the one being
461 // gone to, else what the address says, at once.
462 const targetRepo = inRepo && repoPath ? { namespace: repoPath[1], name: repoPath[2] } : null;
463 const menuRepo: MenuRepo | null = targetRepo
464 ? sameRepo(active, targetRepo)
465 ? active
466 : {
467 ...targetRepo,
468 member: (user.workspaces ?? []).some((m) => m.slug === targetRepo.namespace.toLowerCase()),
469 }
470 : null;
A repository has its own sidebar, as settings do471 // What sits on the far side of the track. Kept while sliding back, so it
472 // does not vanish on the way out.
473 const side = useRef<"workspace" | "account" | "repo">("workspace");
Polish: phones, copy boxes, the plan page, the landing page, a real glide474 if (inAccount) side.current = "account";
475 else if (inSettings) side.current = "workspace";
A repository has its own sidebar, as settings do476 else if (inRepo) side.current = "repo";
477 // The repository last shown, kept for the slide back.
Sidebar: no settings flash on the way into a repository, and a better slide478 const shown = useRef<MenuRepo | null>(menuRepo);
479 if (menuRepo) shown.current = menuRepo;
480 // Moving between two of the far-side menus (settings to a repository,
481 // one repository to another) crossfades in place instead of sliding.
482 const detailKey = side.current === "repo" ? `repo:${shown.current?.namespace}/${shown.current?.name}` : side.current;
483 const lastAway = useRef(away);
484 const lastKey = useRef(detailKey);
485 const swapped = lastAway.current && away && lastKey.current !== detailKey;
486 useEffect(() => {
487 lastAway.current = away;
488 lastKey.current = detailKey;
489 });
Agents as a team: lifecycle, merge queue, billing and a new shell490 // The repository being looked at is listed even when it is someone else's.
491 const listed =
492 active && !shell.repos.some((repo) => repo.namespace === active.namespace && repo.name === active.name)
493 ? [{ namespace: active.namespace, name: active.name, isPrivate: false }, ...shell.repos]
494 : shell.repos;
495 return (
496 <div className="flex h-full flex-col">
A Vercel-like sidebar and a new mark497 {/* The same height and rule as the top bar, so the two read as one line. */}
498 <div className="flex h-12 shrink-0 items-center gap-1 border-b border-line px-2">
499 <Link to="/" aria-label="g1t home" className="shrink-0 rounded-md p-1.5 hover:bg-raised">
500 <Mark className="size-5" />
Agents as a team: lifecycle, merge queue, billing and a new shell501 </Link>
A Vercel-like sidebar and a new mark502 <span className="shrink-0 text-line-strong" aria-hidden="true">
503 /
504 </span>
505 <WorkspaceSwitcher user={user} shell={shell} />
Agents as a team: lifecycle, merge queue, billing and a new shell506 </div>
A Vercel-like sidebar and a new mark507 <div className="px-2 pt-3">
508 <button
509 type="button"
510 onClick={onFind}
511 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"
512 >
513 <Search size={14} />
514 <span className="grow text-left">Find…</span>
515 <kbd className="rounded bg-raised px-1.5 font-mono text-[0.625rem] text-muted ring-1 ring-line">⌘K</kbd>
516 </button>
Agents as a team: lifecycle, merge queue, billing and a new shell517 </div>
Sidebar: no settings flash on the way into a repository, and a better slide518 <div className="relative min-h-0 grow overflow-hidden">
519 <div className={`${LAYER} ${away ? "pointer-events-none -translate-x-1/4 opacity-0" : "translate-x-0 opacity-100"}`}>
Polish: phones, copy boxes, the plan page, the landing page, a real glide520 <nav aria-label="g1t" inert={away} className={PANEL}>
Agents as a team: lifecycle, merge queue, billing and a new shell521 <div className="mt-3 space-y-px">
522 <SidebarLink to="/" end icon={<LayoutDashboard size={15} />}>
523 Mission control
524 </SidebarLink>
525 <SidebarLink to="/explore" icon={<Compass size={15} />}>
526 Explore
527 </SidebarLink>
528 </div>
529
530 <SidebarGroup
531 title="Repositories"
532 action={
533 ws && (
534 <Link
535 to={`/new?workspace=${ws.slug}`}
536 aria-label="New repository"
537 className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"
538 >
539 <Plus size={13} />
540 </Link>
541 )
542 }
543 >
544 {listed.length === 0 && (
545 <p className="px-2 py-1 text-xs text-faint">None yet.</p>
546 )}
547 {listed.map((repo) => {
548 const base = `/${repo.namespace}/${repo.name}`;
549 return (
550 <div key={base}>
551 <SidebarLink
552 to={base}
553 icon={repo.isPrivate ? <Lock size={15} /> : <BookMarked size={15} />}
554 >
555 <span className="font-mono text-[0.8125rem]">
556 {repo.namespace !== ws?.slug && (
557 <span className="text-faint">{repo.namespace}/</span>
558 )}
559 {repo.name}
560 </span>
561 </SidebarLink>
562 </div>
563 );
564 })}
565 </SidebarGroup>
566 </nav>
Polish: phones, copy boxes, the plan page, the landing page, a real glide567 </div>
Sidebar: no settings flash on the way into a repository, and a better slide568 <div className={`${LAYER} ${away ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-full opacity-0"}`}>
569 <div key={detailKey} className={`h-full ${swapped ? "animate-[g1t-swap_220ms_ease-out]" : ""}`}>
570 {side.current === "repo" && shown.current ? (
571 <RepoMenu
572 repo={shown.current}
573 isPrivate={shell.repos.some((repo) => sameRepo(repo, shown.current) && repo.isPrivate)}
574 open={inRepo}
575 />
576 ) : side.current === "account" || !ws ? (
577 <AccountSettingsMenu open={inAccount} />
578 ) : (
579 <SettingsMenu slug={ws.slug} owner={ws.role === "owner"} open={inSettings} />
580 )}
581 </div>
582 </div>
A catalogue of model providers, and settings that feel like settings583 </div>
Agents as a team: lifecycle, merge queue, billing and a new shell584
Workspace things at the bottom of the sidebar, and on mission control585 {/* The workspace's own things sit at the bottom, by its usage and the account. */}
A Vercel-like sidebar and a new mark586 <div className="space-y-2 p-2">
Workspace things at the bottom of the sidebar, and on mission control587 {ws && (
588 <div className="space-y-px">
A repository has its own sidebar, as settings do589 <p className="px-2 pb-1 text-[0.6875rem] font-medium uppercase tracking-wider text-faint">{ws.slug}</p>
Workspace things at the bottom of the sidebar, and on mission control590 <SidebarLink to={`/${ws.slug}/-/usage`} icon={<BarChart3 size={15} />}>
591 Usage
592 </SidebarLink>
593 {/* Everything else about the workspace lives in its settings, and only there. */}
594 <SidebarLink
595 to={ws.role === "owner" ? `/${ws.slug}/-/settings` : `/${ws.slug}/-/people`}
596 icon={<Settings size={15} />}
597 >
598 Settings
599 </SidebarLink>
600 </div>
601 )}
A Vercel-like sidebar and a new mark602 {ws && <UsageCard slug={ws.slug} shell={shell} />}
603 <AccountMenu user={user} />
604 </div>
605 </div>
606 );
607}
608
609/** Words for the sections a path can end in. */
610const SECTIONS: Record<string, string> = {
611 issues: "Issues",
612 pulls: "Pull requests",
613 queue: "Merge queue",
614 commits: "Commits",
615 plans: "Plan",
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs616 actions: "Actions",
Deployments: a preview for every pull request, production on g1t.page617 deployments: "Deployments",
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs618 secrets: "Secrets and variables",
A Vercel-like sidebar and a new mark619 settings: "Settings",
A catalogue of model providers, and settings that feel like settings620 people: "Members",
A Vercel-like sidebar and a new mark621 tokens: "Access tokens",
622 usage: "Usage",
Secrets and variables: one list, rows per environment, for workflows and deployments623 billing: "Billing and plans",
A catalogue of model providers, and settings that feel like settings624 integrations: "Integrations",
Webhooks: every event, to your own addresses, signed and retried625 webhooks: "Webhooks",
A Vercel-like sidebar and a new mark626 tree: "Code",
627 blob: "Code",
628};
629
630/** Where the page is, as a trail of links: workspace / repository / section. */
631function Breadcrumbs({ pathname }: { pathname: string }) {
632 const parts = pathname.split("/").filter(Boolean);
633 const reserved = ["settings", "explore", "new", "search", "workspaces"];
634 if (parts.length === 0) return <span className="text-sm font-medium">Mission control</span>;
635 if (reserved.includes(parts[0]!)) {
636 const words: Record<string, string> = {
Account settings in the same shape as a workspace's637 settings: "Account",
A Vercel-like sidebar and a new mark638 explore: "Explore",
639 new: "New repository",
640 search: "Search",
641 workspaces: "New workspace",
642 };
643 return <span className="text-sm font-medium">{words[parts[0]!]}</span>;
644 }
645 const [owner, second, third, fourth] = parts;
646 const trail: { label: string; to: string; mono?: boolean }[] = [{ label: owner!, to: `/${owner}`, mono: true }];
647 if (second === "-") {
A catalogue of model providers, and settings that feel like settings648 const page = `/${owner}/-/${third}`;
649 if (third && SETTINGS_PAGE.test(page)) {
650 trail.push({ label: "Settings", to: `/${owner}/-/settings` });
651 trail.push({ label: third === "settings" ? "General" : (SECTIONS[third] ?? third), to: page });
652 } else if (third) trail.push({ label: SECTIONS[third] ?? third, to: page });
A Vercel-like sidebar and a new mark653 } else if (second) {
654 const repo = `/${owner}/${second}`;
655 trail.push({ label: second, to: repo, mono: true });
656 if (third === "pull" && fourth) trail.push({ label: `Pull request #${fourth}`, to: `${repo}/pull/${fourth}` });
657 else if (third === "issues" && fourth && fourth !== "new") trail.push({ label: `Issue #${fourth}`, to: `${repo}/issues/${fourth}` });
658 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 deployments659 else if (third && SECTIONS[third]) {
660 trail.push({ label: SECTIONS[third]!, to: `${repo}/${third}` });
661 // A settings page names which one: Settings / Secrets and variables.
662 if (third === "settings" && fourth && SECTIONS[fourth]) {
663 trail.push({ label: SECTIONS[fourth]!, to: `${repo}/settings/${fourth}` });
664 }
665 }
A Vercel-like sidebar and a new mark666 }
667 return (
668 <nav aria-label="Where you are" className="flex min-w-0 items-center gap-1.5 text-sm">
669 {trail.map((crumb, index) => (
670 <span key={crumb.to} className="flex min-w-0 items-center gap-1.5">
671 {index > 0 && <span className="text-line-strong">/</span>}
Agents as a team: lifecycle, merge queue, billing and a new shell672 <Link
A Vercel-like sidebar and a new mark673 to={crumb.to}
674 className={`truncate rounded px-1 py-0.5 transition-colors hover:bg-raised ${
675 index === trail.length - 1 ? "font-medium text-fg" : "text-muted hover:text-fg"
676 } ${crumb.mono ? "font-mono text-[0.8125rem]" : ""}`}
Agents as a team: lifecycle, merge queue, billing and a new shell677 >
A Vercel-like sidebar and a new mark678 {crumb.label}
Agents as a team: lifecycle, merge queue, billing and a new shell679 </Link>
A Vercel-like sidebar and a new mark680 </span>
681 ))}
682 </nav>
Agents as a team: lifecycle, merge queue, billing and a new shell683 );
684}
685
686type Command = { label: string; hint?: string; to: string; icon: ReactNode };
687
688/** Everything the palette can jump to, from what the sidebar already knows. */
689function commandsFor(user: User, shell: ShellData): Command[] {
690 const commands: Command[] = [
691 { label: "Mission control", to: "/", icon: <LayoutDashboard size={15} /> },
692 { label: "Explore repositories", to: "/explore", icon: <Compass size={15} /> },
693 { label: "New repository", to: "/new", icon: <Plus size={15} /> },
694 { label: "New workspace", to: "/workspaces/new", icon: <Plus size={15} /> },
695 { label: "Your settings", to: "/settings", icon: <Settings size={15} /> },
696 ];
697 const repo = shell.repo;
698 if (repo) {
699 const base = `/${repo.namespace}/${repo.name}`;
700 const name = `${repo.namespace}/${repo.name}`;
701 commands.unshift(
702 { label: "Issues", hint: name, to: `${base}/issues`, icon: <CircleDot size={15} /> },
703 { label: "New issue", hint: name, to: `${base}/issues/new`, icon: <Plus size={15} /> },
704 { label: "Pull requests", hint: name, to: `${base}/pulls`, icon: <GitPullRequest size={15} /> },
705 { label: "Commits", hint: name, to: `${base}/commits`, icon: <History size={15} /> },
706 ...(repo.member
707 ? [
708 { label: "Plan work", hint: name, to: `${base}/plans`, icon: <ListTree size={15} /> },
709 { label: "Repository settings", hint: name, to: `${base}/settings`, icon: <Settings size={15} /> },
710 ]
711 : []),
712 );
713 }
714 for (const membership of user.workspaces ?? []) {
715 commands.push(
716 { 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 request717 { label: "Usage", hint: membership.slug, to: `/${membership.slug}/-/usage`, icon: <BarChart3 size={15} /> },
A catalogue of model providers, and settings that feel like settings718 { label: "Billing", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/billing`, icon: <CreditCard size={15} /> },
719 { label: "Access tokens", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/tokens`, icon: <KeyRound size={15} /> },
720 { 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 shell721 );
722 }
723 for (const listed of shell.repos) {
724 commands.push({
725 label: `${listed.namespace}/${listed.name}`,
726 hint: "Repository",
727 to: `/${listed.namespace}/${listed.name}`,
728 icon: <BookMarked size={15} />,
729 });
730 }
731 return commands;
732}
733
734function CommandPalette({
735 open,
736 onClose,
737 commands,
738}: {
739 open: boolean;
740 onClose: () => void;
741 commands: Command[];
742}) {
743 const navigate = useNavigate();
744 const [query, setQuery] = useState("");
745 const [selected, setSelected] = useState(0);
746 const input = useRef<HTMLInputElement>(null);
747 const matches = useMemo(() => {
748 const words = query.toLowerCase().split(/\s+/).filter(Boolean);
749 return commands
750 .filter((command) => {
751 const text = `${command.label} ${command.hint ?? ""}`.toLowerCase();
752 return words.every((word) => text.includes(word));
753 })
754 .slice(0, 12);
755 }, [commands, query]);
756
757 useEffect(() => {
758 if (!open) return;
759 setQuery("");
760 setSelected(0);
761 input.current?.focus();
762 }, [open]);
763 useEffect(() => setSelected(0), [query]);
764
765 if (!open) return null;
766 const go = (command: Command | undefined) => {
767 if (!command) return;
768 onClose();
769 navigate(command.to);
770 };
771 return (
772 <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 px-4 pt-[12vh] backdrop-blur-sm" onClick={onClose}>
773 <div
774 role="dialog"
775 aria-label="Go to"
776 className="w-full max-w-xl overflow-hidden rounded-xl border border-line-strong bg-raised shadow-2xl shadow-black/60"
777 onClick={(event) => event.stopPropagation()}
778 >
779 <div className="flex items-center gap-3 border-b border-line px-4">
780 <Search size={16} className="text-faint" />
781 <input
782 ref={input}
783 value={query}
784 onChange={(event) => setQuery(event.target.value)}
785 onKeyDown={(event) => {
786 if (event.key === "ArrowDown") {
787 event.preventDefault();
788 setSelected((index) => Math.min(index + 1, matches.length - 1));
789 } else if (event.key === "ArrowUp") {
790 event.preventDefault();
791 setSelected((index) => Math.max(index - 1, 0));
792 } else if (event.key === "Enter") {
793 event.preventDefault();
794 go(matches[selected]);
795 } else if (event.key === "Escape") {
796 onClose();
797 }
798 }}
799 placeholder="Go to a repository, a page, or an action…"
800 autoComplete="off"
801 data-1p-ignore
802 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"
803 />
804 <kbd className="rounded border border-line px-1.5 font-mono text-[0.6875rem] text-faint">esc</kbd>
805 </div>
806 <ul className="max-h-[50vh] overflow-y-auto p-1.5">
807 {matches.length === 0 && (
808 <li className="px-3 py-6 text-center text-sm text-faint">Nothing matches.</li>
809 )}
810 {matches.map((command, index) => (
811 <li key={`${command.to}-${command.label}`}>
812 <button
813 type="button"
814 onMouseEnter={() => setSelected(index)}
815 onClick={() => go(command)}
816 className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm ${
817 index === selected ? "bg-line text-fg" : "text-muted"
818 }`}
819 >
820 <span className="shrink-0 text-faint">{command.icon}</span>
821 <span className="min-w-0 grow truncate">{command.label}</span>
822 {command.hint && <span className="shrink-0 truncate text-xs text-faint">{command.hint}</span>}
823 {index === selected && <CornerDownLeft size={13} className="shrink-0 text-faint" />}
824 </button>
825 </li>
826 ))}
827 </ul>
828 </div>
829 </div>
830 );
831}
832
833/**
834 * A bar across the top of the page while the next one loads, as GitHub
835 * has: it appears at once, creeps towards the end while waiting, then fills
836 * and fades when the page arrives.
837 */
838export function Progress() {
839 const navigation = useNavigation();
840 const busy = navigation.state !== "idle";
841 const [width, setWidth] = useState(0);
842 const [visible, setVisible] = useState(false);
843 useEffect(() => {
844 if (busy) {
845 setVisible(true);
846 setWidth(12);
847 // Slows as it goes, never quite arriving until the page does.
848 const timer = setInterval(() => setWidth((now) => now + (90 - now) * 0.12), 200);
849 return () => clearInterval(timer);
850 }
851 setWidth((now) => (now > 0 ? 100 : 0));
852 const fade = setTimeout(() => setVisible(false), 250);
853 const reset = setTimeout(() => setWidth(0), 550);
854 return () => {
855 clearTimeout(fade);
856 clearTimeout(reset);
857 };
858 }, [busy]);
859 return (
860 <div
861 aria-hidden="true"
862 className={`pointer-events-none fixed inset-x-0 top-0 z-[60] h-[3px] transition-opacity duration-300 ${
863 visible ? "opacity-100" : "opacity-0"
864 }`}
865 >
866 <div
867 className="h-full bg-accent shadow-[0_0_10px_var(--color-accent)] transition-[width] duration-200 ease-out"
868 style={{ width: `${width}%` }}
869 />
870 </div>
871 );
872}
873
874/**
875 * The signed-in app: a sidebar with the workspace, its repositories and the
876 * sections of the one being looked at; a slim bar with search and the
877 * account; and the page.
878 */
879export function AppShell({
880 user,
881 shell,
882 banner,
883 children,
884}: {
885 user: User;
886 shell: ShellData;
887 banner?: ReactNode;
888 children: ReactNode;
889}) {
890 const submit = useSubmit();
891 const { pathname } = useLocation();
892 const [drawer, setDrawer] = useState(false);
893 const [palette, setPalette] = useState(false);
894 const commands = useMemo(() => commandsFor(user, shell), [user, shell]);
895
896 // A new page closes the drawer on small screens.
897 useEffect(() => setDrawer(false), [pathname]);
898 useEffect(() => {
899 const onKey = (event: KeyboardEvent) => {
900 if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
901 event.preventDefault();
902 setPalette((open) => !open);
903 }
904 };
905 window.addEventListener("keydown", onKey);
906 return () => window.removeEventListener("keydown", onKey);
907 }, []);
908
909 return (
910 <div className="min-h-screen">
911 <Progress />
912 <aside className="fixed inset-y-0 left-0 z-40 hidden w-64 border-r border-line bg-[color-mix(in_srgb,var(--color-surface)_70%,var(--color-bg))] lg:block">
A Vercel-like sidebar and a new mark913 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
Agents as a team: lifecycle, merge queue, billing and a new shell914 </aside>
915 {drawer && (
916 <div className="fixed inset-0 z-50 lg:hidden">
917 <button
918 type="button"
919 aria-label="Close menu"
920 className="absolute inset-0 bg-black/60"
921 onClick={() => setDrawer(false)}
922 />
923 <aside className="absolute inset-y-0 left-0 w-72 border-r border-line bg-surface">
924 <button
925 type="button"
926 aria-label="Close menu"
927 onClick={() => setDrawer(false)}
928 className="absolute top-3 right-3 rounded-md p-1 text-faint hover:bg-raised hover:text-fg"
929 >
930 <X size={16} />
931 </button>
A Vercel-like sidebar and a new mark932 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
Agents as a team: lifecycle, merge queue, billing and a new shell933 </aside>
934 </div>
935 )}
936
Polish: phones, copy boxes, the plan page, the landing page, a real glide937 <div className="flex min-h-screen min-w-0 flex-col lg:pl-64">
Agents as a team: lifecycle, merge queue, billing and a new shell938 <header className="sticky top-0 z-30 flex h-12 items-center gap-2 border-b border-line bg-bg/85 px-3 backdrop-blur sm:px-4">
939 <button
940 type="button"
941 aria-label="Open menu"
942 onClick={() => setDrawer(true)}
943 className="rounded-md p-1.5 text-muted hover:bg-raised hover:text-fg lg:hidden"
944 >
945 <Menu size={18} />
946 </button>
A Vercel-like sidebar and a new mark947 <Breadcrumbs pathname={pathname} />
Agents as a team: lifecycle, merge queue, billing and a new shell948 <div className="ml-auto flex items-center gap-1.5">
A Vercel-like sidebar and a new mark949 <a
950 href="https://docs.g1t.sh/"
951 className="hidden rounded-md px-2 py-1 text-[0.8125rem] text-muted transition-colors hover:bg-raised hover:text-fg sm:block"
952 >
953 Docs
954 </a>
Agents as a team: lifecycle, merge queue, billing and a new shell955 <DropdownMenu>
956 <DropdownMenuTrigger
957 aria-label="Create"
A Vercel-like sidebar and a new mark958 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 shell959 >
A Vercel-like sidebar and a new mark960 <Plus size={14} />
961 New
Agents as a team: lifecycle, merge queue, billing and a new shell962 </DropdownMenuTrigger>
963 <DropdownMenuContent align="end">
964 {shell.repo && (
965 <DropdownMenuItem asChild>
966 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/issues/new`}>
967 <CircleDot />
968 New issue
969 </Link>
970 </DropdownMenuItem>
971 )}
972 {shell.repo?.member && (
973 <DropdownMenuItem asChild>
974 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/plans`}>
975 <ListTree />
976 Plan work
977 </Link>
978 </DropdownMenuItem>
979 )}
980 <DropdownMenuItem asChild>
981 <Link to="/new">
982 <BookMarked />
983 New repository
984 </Link>
985 </DropdownMenuItem>
986 <DropdownMenuItem asChild>
987 <Link to="/workspaces/new">
988 <Users />
989 New workspace
990 </Link>
991 </DropdownMenuItem>
992 </DropdownMenuContent>
993 </DropdownMenu>
994 </div>
995 </header>
996 {banner}
Polish: phones, copy boxes, the plan page, the landing page, a real glide997 <main className="min-w-0 grow">{children}</main>
Agents as a team: lifecycle, merge queue, billing and a new shell998 </div>
999 <CommandPalette open={palette} onClose={() => setPalette(false)} commands={commands} />
1000 </div>
1001 );
1002}