Sign in

flagon-io/g1t

public

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

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

1,113 lines43,785 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,
Projects: what a workspace builds and runs, first on every page18 Box,
Agents as a team: lifecycle, merge queue, billing and a new shell19 Layers,
20 LayoutDashboard,
Projects: what a workspace builds and runs, first on every page21 LayoutGrid,
Agents as a team: lifecycle, merge queue, billing and a new shell22 ListTree,
23 Lock,
24 LogOut,
25 Menu,
26 Plus,
27 Search,
Integrations: your own model provider, alerts that open issues, tickets agents read28 Plug,
Agents as a team: lifecycle, merge queue, billing and a new shell29 Settings,
30 Users,
Webhooks: every event, to your own addresses, signed and retried31 Webhook,
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs32 PlayCircle,
Pull requests say where they are live; the project menu shows what is coming33 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.page44 Rocket,
Agents as a team: lifecycle, merge queue, billing and a new shell45 X,
46} from "lucide-react";
47import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
48import { Form, Link, NavLink, useLocation, useNavigate, useNavigation, useSubmit } from "react-router";
49
50import type { User } from "@g1t/contracts";
51import { MICROS_PER_DOLLAR } from "@g1t/contracts";
52
A Vercel-like sidebar and a new mark53import { Mark } from "./logo";
Agents as a team: lifecycle, merge queue, billing and a new shell54import { Avatar } from "./ui";
55import {
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. */
65export 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 page68 /** 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 shell71 repo: {
72 namespace: string;
73 name: string;
74 member: boolean;
75 issues: number;
76 pulls: number;
77 } | null;
Billing accounts, terms and enterprises; g1t is no longer free78 /** Where the workspace stands against its usage limit, if billing is on. */
79 limit: {
80 exposureMicros: number;
81 ceilingMicros: number | null;
82 state: "ok" | "warning" | "stopped";
83 comped: boolean;
84 } | null;
Free while g1t is being built out; agents can check out their own forks85 /** Whether g1t charges nothing for now, while it is being built out. */
86 free?: boolean;
Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request87 /** What its agents have cost since the start of the month. */
Usage while free is shown at cost; agents get rustfmt and clippy88 /** This month's usage: charged, or at cost while g1t is free. */
89 monthUsageMicros: number | null;
Agents as a team: lifecycle, merge queue, billing and a new shell90};
91
92function SidebarLink({
93 to,
94 icon,
95 end,
96 count,
97 also,
98 children,
99}: {
100 to: string;
101 icon: ReactNode;
102 end?: boolean;
103 count?: number;
Projects: what a workspace builds and runs, first on every page104 /** Other path prefixes under which this link is the current one. */
105 also?: string | string[];
Agents as a team: lifecycle, merge queue, billing and a new shell106 children: ReactNode;
107}) {
108 const { pathname } = useLocation();
109 return (
110 <NavLink
111 to={to}
112 end={end}
113 prefetch="intent"
114 className={({ isActive, isPending }) => {
Projects: what a workspace builds and runs, first on every page115 const current =
116 isActive || [also ?? []].flat().some((prefix) => pathname === prefix || pathname.startsWith(prefix + "/"));
A Vercel-like sidebar and a new mark117 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 shell118 current
119 ? "bg-raised font-medium text-fg"
120 : isPending
121 ? "bg-raised/60 text-fg"
122 : "text-muted hover:bg-raised/60 hover:text-fg"
123 }`;
124 }}
125 >
126 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
127 <span className="min-w-0 grow truncate">{children}</span>
128 {count != null && count > 0 && (
129 <span className="rounded bg-line px-1.5 text-[0.6875rem] tabular-nums text-muted">
130 {count}
131 </span>
132 )}
133 </NavLink>
134 );
135}
136
Pull requests say where they are live; the project menu shows what is coming137/**
138 * Something a project will have, shown where it will live so people can
139 * see where g1t is going. Not a link: nothing is behind it yet.
140 */
141function SidebarSoon({ icon, children, about }: { icon: ReactNode; children: ReactNode; about: string }) {
142 return (
143 <div
144 title={about}
145 aria-disabled="true"
146 className="flex h-8 cursor-default items-center gap-2.5 rounded-md px-2 text-[0.8125rem] text-faint"
147 >
148 <span className="shrink-0 opacity-70">{icon}</span>
149 <span className="grow truncate">{children}</span>
150 <span className="rounded-full px-1.5 py-px text-[0.625rem] font-medium tracking-wide text-muted uppercase ring-1 ring-line">
151 Soon
152 </span>
153 </div>
154 );
155}
156
Agents as a team: lifecycle, merge queue, billing and a new shell157function SidebarGroup({ title, action, children }: { title: string; action?: ReactNode; children: ReactNode }) {
158 return (
A Vercel-like sidebar and a new mark159 <section className="mt-6">
160 <div className="mb-1 flex h-6 items-center justify-between px-2">
161 <h2 className="text-xs font-medium text-faint">{title}</h2>
Agents as a team: lifecycle, merge queue, billing and a new shell162 {action}
163 </div>
164 <div className="space-y-px">{children}</div>
165 </section>
166 );
167}
168
169function WorkspaceSwitcher({ user, shell }: { user: User; shell: ShellData }) {
170 const current = shell.workspace?.slug;
171 return (
172 <DropdownMenu>
A Vercel-like sidebar and a new mark173 {/* The name goes to the workspace; only the arrows switch it. */}
174 <Link
175 to={current ? `/${current}` : "/workspaces/new"}
176 className="flex h-8 min-w-0 items-center gap-2 rounded-md px-1.5 transition-colors hover:bg-raised"
177 >
Agents as a team: lifecycle, merge queue, billing and a new shell178 {current ? (
A Vercel-like sidebar and a new mark179 <Avatar name={current} size={20} square />
Agents as a team: lifecycle, merge queue, billing and a new shell180 ) : (
A Vercel-like sidebar and a new mark181 <span className="size-5 rounded-md border border-dashed border-line-strong" />
Agents as a team: lifecycle, merge queue, billing and a new shell182 )}
A Vercel-like sidebar and a new mark183 <span className="min-w-0 truncate text-sm font-medium">{current ?? "Choose a workspace"}</span>
184 {shell.workspace && (
185 <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">
186 {shell.workspace.role}
Agents as a team: lifecycle, merge queue, billing and a new shell187 </span>
A Vercel-like sidebar and a new mark188 )}
189 </Link>
190 <DropdownMenuTrigger
191 aria-label="Switch workspace"
192 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"
193 >
194 <ChevronsUpDown size={14} />
Agents as a team: lifecycle, merge queue, billing and a new shell195 </DropdownMenuTrigger>
196 <DropdownMenuContent align="start" className="w-60">
197 <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
198 {(user.workspaces ?? []).map((membership) => (
199 <DropdownMenuItem asChild key={membership.slug}>
200 <Link to={`/${membership.slug}`}>
201 <Avatar name={membership.slug} size={16} square />
202 <span className="grow">{membership.slug}</span>
203 {membership.slug === current && <Check className="text-accent" />}
204 </Link>
205 </DropdownMenuItem>
206 ))}
207 <DropdownMenuSeparator />
208 <DropdownMenuItem asChild>
209 <Link to="/workspaces/new">
210 <Plus />
211 New workspace
212 </Link>
213 </DropdownMenuItem>
214 </DropdownMenuContent>
215 </DropdownMenu>
216 );
217}
218
Billing accounts, terms and enterprises; g1t is no longer free219/**
220 * This month's usage, and how close the workspace is to its usage limit,
221 * as Vercel shows a plan's usage.
222 */
A Vercel-like sidebar and a new mark223function UsageCard({ slug, shell }: { slug: string; shell: ShellData }) {
Usage while free is shown at cost; agents get rustfmt and clippy224 if (shell.monthUsageMicros == null) return null;
225 const spent = shell.monthUsageMicros;
Billing accounts, terms and enterprises; g1t is no longer free226 const limit = shell.limit;
227 const ceiling = limit?.ceilingMicros ?? null;
228 const share = limit && ceiling ? Math.min(1, limit.exposureMicros / Math.max(ceiling, 1)) : 0;
229 const tone = limit?.state === "stopped" ? "text-danger" : limit?.state === "warning" ? "text-warn" : "text-faint";
230 const bar = limit?.state === "stopped" ? "bg-danger" : limit?.state === "warning" ? "bg-warn" : "bg-accent";
A Vercel-like sidebar and a new mark231 return (
232 <Link
233 to={`/${slug}/-/usage`}
234 className="block rounded-lg bg-surface p-3 ring-1 ring-line transition-colors hover:ring-line-strong"
235 >
236 <span className="flex items-baseline justify-between text-xs">
237 <span className="font-medium text-fg">Usage</span>
238 <span className="text-faint">this month</span>
239 </span>
240 <span className="mt-2 flex items-baseline justify-between">
241 <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 forks242 {shell.free ? (
243 <span className="text-xs text-accent">Free for now</span>
Billing accounts, terms and enterprises; g1t is no longer free244 ) : limit?.comped ? (
245 <span className="text-xs text-accent">Comped</span>
Free while g1t is being built out; agents can check out their own forks246 ) : (
Billing accounts, terms and enterprises; g1t is no longer free247 ceiling != null && (
248 <span className={`text-xs ${tone}`}>
249 {limit?.state === "stopped" ? "Limit reached" : `$${(ceiling / MICROS_PER_DOLLAR).toFixed(2)} limit`}
Free while g1t is being built out; agents can check out their own forks250 </span>
251 )
A Vercel-like sidebar and a new mark252 )}
253 </span>
Billing accounts, terms and enterprises; g1t is no longer free254 {ceiling != null && !limit?.comped && (
255 <span className="mt-2 block h-1 overflow-hidden rounded-full bg-raised">
256 <span
257 className={`block h-full rounded-full ${bar}`}
258 style={{ width: `${Math.max(share * 100, share > 0 ? 3 : 0)}%` }}
259 />
260 </span>
261 )}
A Vercel-like sidebar and a new mark262 </Link>
263 );
264}
265
266function AccountMenu({ user }: { user: User }) {
267 const submit = useSubmit();
268 return (
269 <DropdownMenu>
270 <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">
271 <Avatar name={user.username} size={22} />
272 <span className="min-w-0 grow truncate text-[0.8125rem] font-medium">{user.username}</span>
273 <Ellipsis size={15} className="shrink-0 text-faint" />
274 </DropdownMenuTrigger>
275 <DropdownMenuContent align="start" side="top" className="w-56">
276 <DropdownMenuLabel>
277 Signed in as <span className="font-mono font-medium text-fg">{user.username}</span>
278 </DropdownMenuLabel>
279 <DropdownMenuSeparator />
280 <DropdownMenuItem asChild>
281 <Link to="/settings">
282 <Settings />
283 Your settings
284 </Link>
285 </DropdownMenuItem>
286 <DropdownMenuItem asChild>
287 <a href="https://docs.g1t.sh/">
288 <BookOpen />
289 Documentation
290 </a>
291 </DropdownMenuItem>
292 <DropdownMenuSeparator />
293 {/* Submitted from here: the menu closes on select, and a button
294 that has left the page cannot submit a form. */}
295 <DropdownMenuItem onSelect={() => submit(null, { method: "post", action: "/logout" })}>
296 <LogOut />
297 Sign out
298 </DropdownMenuItem>
299 </DropdownMenuContent>
300 </DropdownMenu>
301 );
302}
303
A catalogue of model providers, and settings that feel like settings304/** A workspace's settings pages, which the sidebar slides over to. */
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs305const SETTINGS_PAGE = /^\/([^/]+)\/-\/(settings|people|tokens|billing|integrations|webhooks|secrets)(\/|$)/;
A catalogue of model providers, and settings that feel like settings306
Polish: phones, copy boxes, the plan page, the landing page, a real glide307/**
Sidebar: no settings flash on the way into a repository, and a better slide308 * The sidebar's menus are two layers, the way a phone pushes a screen: the
309 * one arriving slides in from the right over the full width, while the one
310 * leaving drifts a quarter of the way left and fades, both on one long
Sidebar: the panels really slide311 * ease-out, the fade quicker than the move so the two never blur together.
312 * Going back reverses it.
Polish: phones, copy boxes, the plan page, the landing page, a real glide313 */
Sidebar: no settings flash on the way into a repository, and a better slide314const LAYER =
Sidebar: the panels really slide315 "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 slide316/** One menu, filling its layer. */
317const PANEL = "h-full overflow-y-auto px-2 pb-4";
A catalogue of model providers, and settings that feel like settings318
319/** A workspace's settings, as the sidebar shows them in place of everything else. */
320function SettingsMenu({ slug, owner, open }: { slug: string; owner: boolean; open: boolean }) {
321 return (
322 <nav
323 aria-label="Workspace settings"
324 inert={!open}
Polish: phones, copy boxes, the plan page, the landing page, a real glide325 className={PANEL}
A catalogue of model providers, and settings that feel like settings326 >
327 <Link
328 to={`/${slug}`}
329 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"
330 >
331 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
332 <span className="truncate">{slug}</span>
333 </Link>
334 <SidebarGroup title="Settings">
335 {owner && (
336 <SidebarLink to={`/${slug}/-/settings`} icon={<Settings size={15} />}>
337 General
338 </SidebarLink>
339 )}
340 <SidebarLink to={`/${slug}/-/people`} icon={<Users size={15} />}>
341 Members
342 </SidebarLink>
Secrets and variables: one list, rows per environment, for workflows and deployments343 <SidebarLink to={`/${slug}/-/tokens`} icon={<KeyRound size={15} />}>
344 Access tokens
345 </SidebarLink>
A catalogue of model providers, and settings that feel like settings346 <SidebarLink to={`/${slug}/-/billing`} icon={<CreditCard size={15} />}>
Secrets and variables: one list, rows per environment, for workflows and deployments347 Billing and plans
A catalogue of model providers, and settings that feel like settings348 </SidebarLink>
349 <SidebarLink to={`/${slug}/-/integrations`} icon={<Plug size={15} />}>
350 Integrations
Webhooks: every event, to your own addresses, signed and retried351 </SidebarLink>
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs352 <SidebarLink to={`/${slug}/-/secrets`} icon={<Lock size={15} />}>
353 Secrets and variables
354 </SidebarLink>
Secrets and variables: one list, rows per environment, for workflows and deployments355 <SidebarLink to={`/${slug}/-/webhooks`} icon={<Webhook size={15} />}>
356 Webhooks
A catalogue of model providers, and settings that feel like settings357 </SidebarLink>
358 </SidebarGroup>
359 </nav>
360 );
361}
362
Sidebar: no settings flash on the way into a repository, and a better slide363/**
364 * What the repository menu needs. Known from the address before the page's
365 * data arrives, so the menu is right from the first frame; the counts fill
366 * in once it does.
367 */
368type MenuRepo = {
369 namespace: string;
370 name: string;
371 member: boolean;
372 issues?: number;
373 pulls?: number;
374};
375
376function sameRepo(a: { namespace: string; name: string } | null, b: { namespace: string; name: string } | null) {
377 return (
378 a != null &&
379 b != null &&
380 a.namespace.toLowerCase() === b.namespace.toLowerCase() &&
381 a.name.toLowerCase() === b.name.toLowerCase()
382 );
383}
A repository has its own sidebar, as settings do384
385/**
Projects: what a workspace builds and runs, first on every page386 * A project's own menu, which the sidebar slides to while you are in it,
387 * as it does for settings: everything about the project, running and its
388 * code, and nothing else, with the way back to everything.
A repository has its own sidebar, as settings do389 */
Sidebar: no settings flash on the way into a repository, and a better slide390function RepoMenu({ repo, isPrivate, open }: { repo: MenuRepo; isPrivate: boolean; open: boolean }) {
A repository has its own sidebar, as settings do391 const base = `/${repo.namespace}/${repo.name}`;
392 return (
393 <nav aria-label={`${repo.namespace}/${repo.name}`} inert={!open} className={PANEL}>
394 <Link
395 to="/"
396 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"
397 >
398 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
399 Mission control
400 </Link>
401 <Link
402 to={base}
403 className="mt-3 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-raised/60"
404 >
405 <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line">
Projects: what a workspace builds and runs, first on every page406 {isPrivate ? <Lock size={13} /> : <Box size={13} />}
A repository has its own sidebar, as settings do407 </span>
408 <span className="min-w-0 truncate font-mono text-[0.8125rem]">
409 <span className="text-faint">{repo.namespace}/</span>
410 <span className="font-semibold text-fg">{repo.name}</span>
411 </span>
412 </Link>
Projects: what a workspace builds and runs, first on every page413 <div className="mt-3 space-y-px">
414 <SidebarLink to={base} end icon={<LayoutGrid size={15} />}>
415 Overview
416 </SidebarLink>
417 {repo.member && (
418 <SidebarLink to={`${base}/deployments`} icon={<Rocket size={15} />}>
419 Deployments
420 </SidebarLink>
421 )}
422 </div>
A repository has its own sidebar, as settings do423 <SidebarGroup title="Code">
Projects: what a workspace builds and runs, first on every page424 <SidebarLink to={`${base}/code`} icon={<Code2 size={15} />} also={[`${base}/tree`, `${base}/blob`]}>
A repository has its own sidebar, as settings do425 Code
426 </SidebarLink>
427 <SidebarLink to={`${base}/commits`} also={`${base}/commit`} icon={<History size={15} />}>
428 Commits
429 </SidebarLink>
430 </SidebarGroup>
431 <SidebarGroup title="Work">
432 <SidebarLink to={`${base}/issues`} icon={<CircleDot size={15} />} count={repo.issues}>
433 Issues
434 </SidebarLink>
435 <SidebarLink to={`${base}/pulls`} also={`${base}/pull`} icon={<GitPullRequest size={15} />} count={repo.pulls}>
436 Pull requests
437 </SidebarLink>
438 {repo.member && (
439 <SidebarLink to={`${base}/plans`} icon={<ListTree size={15} />}>
440 Plan
441 </SidebarLink>
442 )}
443 <SidebarLink to={`${base}/queue`} icon={<Layers size={15} />}>
444 Merge queue
445 </SidebarLink>
Pull requests say where they are live; the project menu shows what is coming446 <SidebarSoon icon={<Kanban size={15} />} about="Issues and pull requests on boards, by state, owner or outcome.">
447 Boards
448 </SidebarSoon>
449 <SidebarSoon icon={<BookOpen size={15} />} about="Pages about the project that agents keep current as the code changes.">
450 Wiki
451 </SidebarSoon>
452 </SidebarGroup>
453 <SidebarGroup title="Agents">
454 <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.">
455 Agents at work
456 </SidebarSoon>
457 <SidebarSoon icon={<ScrollText size={15} />} about="Every agent session that changed this project, searchable, with why-blame back to the lines it wrote.">
458 Sessions
459 </SidebarSoon>
A repository has its own sidebar, as settings do460 </SidebarGroup>
461 <SidebarGroup title="Automate">
462 <SidebarLink to={`${base}/actions`} icon={<PlayCircle size={15} />}>
463 Actions
464 </SidebarLink>
465 </SidebarGroup>
Pull requests say where they are live; the project menu shows what is coming466 <SidebarGroup title="Secure">
467 <SidebarSoon icon={<ShieldCheck size={15} />} about="Secret scanning, vulnerable dependencies and code scanning, each finding fixed by an agent through the queue.">
468 Security and quality
469 </SidebarSoon>
470 <SidebarSoon icon={<PackageCheck size={15} />} about="Outdated packages updated by agents, tested and landed through the queue.">
471 Dependency updates
472 </SidebarSoon>
473 </SidebarGroup>
474 <SidebarGroup title="Deploy">
475 <SidebarSoon icon={<Server size={15} />} about="Staging and other environments, with required approvers and branch rules.">
476 Environments
477 </SidebarSoon>
478 <SidebarSoon icon={<Tag size={15} />} about="Tagged releases with notes written from what landed.">
479 Releases
480 </SidebarSoon>
481 <SidebarSoon icon={<Package size={15} />} about="npm, container and other packages published from the project.">
482 Packages
483 </SidebarSoon>
484 <SidebarSoon icon={<ToggleRight size={15} />} about="Turn features on per environment or per user, without a deploy.">
485 Feature flags
486 </SidebarSoon>
487 </SidebarGroup>
488 <SidebarGroup title="Operate">
489 <SidebarSoon icon={<Activity size={15} />} about="Requests, errors and CPU time of each deployment, and its logs.">
490 Logs and metrics
491 </SidebarSoon>
492 <SidebarSoon icon={<Siren size={15} />} about="Errors and incidents from the running app, each becoming an issue an agent can take.">
493 Errors and incidents
494 </SidebarSoon>
495 </SidebarGroup>
496 <SidebarGroup title="Insights">
497 <SidebarSoon icon={<BarChart3 size={15} />} about="How work flows: lead time, agents' share of changes, review time, what costs most.">
498 Insights
499 </SidebarSoon>
500 </SidebarGroup>
A repository has its own sidebar, as settings do501 {repo.member && (
Projects: what a workspace builds and runs, first on every page502 <SidebarGroup title="Project">
A repository has its own sidebar, as settings do503 <SidebarLink to={`${base}/settings`} icon={<Settings size={15} />}>
504 Settings
505 </SidebarLink>
506 </SidebarGroup>
507 )}
508 </nav>
509 );
510}
511
Account settings in the same shape as a workspace's512/** Your own settings, as the sidebar shows them on the settings page. */
513function AccountSettingsMenu({ open }: { open: boolean }) {
514 const { hash } = useLocation();
515 const item = (id: string, icon: ReactNode, label: string) => (
516 <Link
517 to={`/settings#${id}`}
518 className={`group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
519 hash === `#${id}` ? "bg-raised font-medium text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"
520 }`}
521 >
522 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
523 {label}
524 </Link>
525 );
526 return (
527 <nav
528 aria-label="Your settings"
529 inert={!open}
Polish: phones, copy boxes, the plan page, the landing page, a real glide530 className={PANEL}
Account settings in the same shape as a workspace's531 >
532 <Link
533 to="/"
534 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"
535 >
536 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
537 Mission control
538 </Link>
539 <SidebarGroup title="Account">
Secrets and variables: one list, rows per environment, for workflows and deployments540 {item("ssh-keys", <Fingerprint size={15} />, "SSH keys")}
541 {item("tokens", <KeyRound size={15} />, "Access tokens")}
Account settings in the same shape as a workspace's542 {item("applications", <Plug size={15} />, "Connected applications")}
543 </SidebarGroup>
544 </nav>
545 );
546}
547
A Vercel-like sidebar and a new mark548function Sidebar({ user, shell, onFind }: { user: User; shell: ShellData; onFind: () => void }) {
Agents as a team: lifecycle, merge queue, billing and a new shell549 const ws = shell.workspace;
A catalogue of model providers, and settings that feel like settings550 const { pathname } = useLocation();
551 const going = useNavigation().location?.pathname;
552 // On a workspace's settings page, or on the way to one, its settings take
553 // the sidebar over.
554 const inSettings = ws != null && SETTINGS_PAGE.exec(going ?? pathname)?.[1]?.toLowerCase() === ws.slug;
Account settings in the same shape as a workspace's555 const inAccount = (going ?? pathname) === "/settings";
A repository has its own sidebar, as settings do556 const active = shell.repo;
557 // In a repository, or on the way into one, its own menu takes the sidebar.
558 const target = going ?? pathname;
559 const repoPath = /^\/([^/]+)\/([^/-][^/]*)(\/|$)/.exec(target);
560 const reserved = new Set(["settings", "explore", "search", "new", "workspaces", "login", "logout", "register", "verify", "forgot", "reset", "device", "oauth"]);
561 const inRepo = repoPath != null && !reserved.has(repoPath[1]) && repoPath[2] !== "-";
562 const away = inSettings || inAccount || inRepo;
Sidebar: no settings flash on the way into a repository, and a better slide563 // The repository the menu is for: the one loaded if it is the one being
564 // gone to, else what the address says, at once.
565 const targetRepo = inRepo && repoPath ? { namespace: repoPath[1], name: repoPath[2] } : null;
566 const menuRepo: MenuRepo | null = targetRepo
567 ? sameRepo(active, targetRepo)
568 ? active
569 : {
570 ...targetRepo,
571 member: (user.workspaces ?? []).some((m) => m.slug === targetRepo.namespace.toLowerCase()),
572 }
573 : null;
A repository has its own sidebar, as settings do574 // What sits on the far side of the track. Kept while sliding back, so it
575 // does not vanish on the way out.
576 const side = useRef<"workspace" | "account" | "repo">("workspace");
Polish: phones, copy boxes, the plan page, the landing page, a real glide577 if (inAccount) side.current = "account";
578 else if (inSettings) side.current = "workspace";
A repository has its own sidebar, as settings do579 else if (inRepo) side.current = "repo";
580 // The repository last shown, kept for the slide back.
Sidebar: no settings flash on the way into a repository, and a better slide581 const shown = useRef<MenuRepo | null>(menuRepo);
582 if (menuRepo) shown.current = menuRepo;
583 // Moving between two of the far-side menus (settings to a repository,
584 // one repository to another) crossfades in place instead of sliding.
585 const detailKey = side.current === "repo" ? `repo:${shown.current?.namespace}/${shown.current?.name}` : side.current;
586 const lastAway = useRef(away);
587 const lastKey = useRef(detailKey);
588 const swapped = lastAway.current && away && lastKey.current !== detailKey;
589 useEffect(() => {
590 lastAway.current = away;
591 lastKey.current = detailKey;
592 });
Agents as a team: lifecycle, merge queue, billing and a new shell593 // The repository being looked at is listed even when it is someone else's.
594 const listed =
595 active && !shell.repos.some((repo) => repo.namespace === active.namespace && repo.name === active.name)
596 ? [{ namespace: active.namespace, name: active.name, isPrivate: false }, ...shell.repos]
597 : shell.repos;
598 return (
599 <div className="flex h-full flex-col">
A Vercel-like sidebar and a new mark600 {/* The same height and rule as the top bar, so the two read as one line. */}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace601 <div className="flex h-14 shrink-0 items-center gap-1.5 border-b border-line px-3">
A Vercel-like sidebar and a new mark602 <Link to="/" aria-label="g1t home" className="shrink-0 rounded-md p-1.5 hover:bg-raised">
603 <Mark className="size-5" />
Agents as a team: lifecycle, merge queue, billing and a new shell604 </Link>
A Vercel-like sidebar and a new mark605 <span className="shrink-0 text-line-strong" aria-hidden="true">
606 /
607 </span>
608 <WorkspaceSwitcher user={user} shell={shell} />
Agents as a team: lifecycle, merge queue, billing and a new shell609 </div>
A Vercel-like sidebar and a new mark610 <div className="px-2 pt-3">
611 <button
612 type="button"
613 onClick={onFind}
614 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"
615 >
616 <Search size={14} />
617 <span className="grow text-left">Find…</span>
618 <kbd className="rounded bg-raised px-1.5 font-mono text-[0.625rem] text-muted ring-1 ring-line">⌘K</kbd>
619 </button>
Agents as a team: lifecycle, merge queue, billing and a new shell620 </div>
Sidebar: no settings flash on the way into a repository, and a better slide621 <div className="relative min-h-0 grow overflow-hidden">
622 <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 glide623 <nav aria-label="g1t" inert={away} className={PANEL}>
Agents as a team: lifecycle, merge queue, billing and a new shell624 <div className="mt-3 space-y-px">
625 <SidebarLink to="/" end icon={<LayoutDashboard size={15} />}>
626 Mission control
627 </SidebarLink>
628 <SidebarLink to="/explore" icon={<Compass size={15} />}>
629 Explore
630 </SidebarLink>
631 </div>
632
633 <SidebarGroup
Projects: what a workspace builds and runs, first on every page634 title="Projects"
Agents as a team: lifecycle, merge queue, billing and a new shell635 action={
636 ws && (
637 <Link
638 to={`/new?workspace=${ws.slug}`}
Projects: what a workspace builds and runs, first on every page639 aria-label="New project"
Agents as a team: lifecycle, merge queue, billing and a new shell640 className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"
641 >
642 <Plus size={13} />
643 </Link>
644 )
645 }
646 >
647 {listed.length === 0 && (
648 <p className="px-2 py-1 text-xs text-faint">None yet.</p>
649 )}
650 {listed.map((repo) => {
651 const base = `/${repo.namespace}/${repo.name}`;
652 return (
653 <div key={base}>
654 <SidebarLink
655 to={base}
Projects: what a workspace builds and runs, first on every page656 icon={repo.isPrivate ? <Lock size={15} /> : <Box size={15} />}
Agents as a team: lifecycle, merge queue, billing and a new shell657 >
Projects: what a workspace builds and runs, first on every page658 <span className="text-[0.8125rem]">
Agents as a team: lifecycle, merge queue, billing and a new shell659 {repo.namespace !== ws?.slug && (
Projects: what a workspace builds and runs, first on every page660 <span className="font-mono text-faint">{repo.namespace}/</span>
Agents as a team: lifecycle, merge queue, billing and a new shell661 )}
Projects: what a workspace builds and runs, first on every page662 {"title" in repo && repo.title ? repo.title : repo.name}
Agents as a team: lifecycle, merge queue, billing and a new shell663 </span>
664 </SidebarLink>
665 </div>
666 );
667 })}
668 </SidebarGroup>
669 </nav>
Polish: phones, copy boxes, the plan page, the landing page, a real glide670 </div>
Sidebar: no settings flash on the way into a repository, and a better slide671 <div className={`${LAYER} ${away ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-full opacity-0"}`}>
672 <div key={detailKey} className={`h-full ${swapped ? "animate-[g1t-swap_220ms_ease-out]" : ""}`}>
673 {side.current === "repo" && shown.current ? (
674 <RepoMenu
675 repo={shown.current}
676 isPrivate={shell.repos.some((repo) => sameRepo(repo, shown.current) && repo.isPrivate)}
677 open={inRepo}
678 />
679 ) : side.current === "account" || !ws ? (
680 <AccountSettingsMenu open={inAccount} />
681 ) : (
682 <SettingsMenu slug={ws.slug} owner={ws.role === "owner"} open={inSettings} />
683 )}
684 </div>
685 </div>
A catalogue of model providers, and settings that feel like settings686 </div>
Agents as a team: lifecycle, merge queue, billing and a new shell687
Workspace things at the bottom of the sidebar, and on mission control688 {/* The workspace's own things sit at the bottom, by its usage and the account. */}
A Vercel-like sidebar and a new mark689 <div className="space-y-2 p-2">
Workspace things at the bottom of the sidebar, and on mission control690 {ws && (
691 <div className="space-y-px">
A repository has its own sidebar, as settings do692 <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 control693 <SidebarLink to={`/${ws.slug}/-/usage`} icon={<BarChart3 size={15} />}>
694 Usage
695 </SidebarLink>
696 {/* Everything else about the workspace lives in its settings, and only there. */}
697 <SidebarLink
698 to={ws.role === "owner" ? `/${ws.slug}/-/settings` : `/${ws.slug}/-/people`}
699 icon={<Settings size={15} />}
700 >
701 Settings
702 </SidebarLink>
703 </div>
704 )}
A Vercel-like sidebar and a new mark705 {ws && <UsageCard slug={ws.slug} shell={shell} />}
706 <AccountMenu user={user} />
707 </div>
708 </div>
709 );
710}
711
712/** Words for the sections a path can end in. */
713const SECTIONS: Record<string, string> = {
714 issues: "Issues",
715 pulls: "Pull requests",
716 queue: "Merge queue",
717 commits: "Commits",
718 plans: "Plan",
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs719 actions: "Actions",
Deployments: a preview for every pull request, production on g1t.page720 deployments: "Deployments",
Projects: what a workspace builds and runs, first on every page721 repository: "Repository",
Project dependencies: addresses, preview stacks, Affects, and agents who know722 dependencies: "Dependencies",
Projects: what a workspace builds and runs, first on every page723 code: "Code",
GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs724 secrets: "Secrets and variables",
A Vercel-like sidebar and a new mark725 settings: "Settings",
A catalogue of model providers, and settings that feel like settings726 people: "Members",
A Vercel-like sidebar and a new mark727 tokens: "Access tokens",
728 usage: "Usage",
Secrets and variables: one list, rows per environment, for workflows and deployments729 billing: "Billing and plans",
A catalogue of model providers, and settings that feel like settings730 integrations: "Integrations",
Webhooks: every event, to your own addresses, signed and retried731 webhooks: "Webhooks",
A Vercel-like sidebar and a new mark732 tree: "Code",
733 blob: "Code",
734};
735
736/** Where the page is, as a trail of links: workspace / repository / section. */
737function Breadcrumbs({ pathname }: { pathname: string }) {
738 const parts = pathname.split("/").filter(Boolean);
739 const reserved = ["settings", "explore", "new", "search", "workspaces"];
740 if (parts.length === 0) return <span className="text-sm font-medium">Mission control</span>;
741 if (reserved.includes(parts[0]!)) {
742 const words: Record<string, string> = {
Account settings in the same shape as a workspace's743 settings: "Account",
A Vercel-like sidebar and a new mark744 explore: "Explore",
Projects live: fixes from walking them end to end745 new: "New project",
A Vercel-like sidebar and a new mark746 search: "Search",
747 workspaces: "New workspace",
748 };
749 return <span className="text-sm font-medium">{words[parts[0]!]}</span>;
750 }
751 const [owner, second, third, fourth] = parts;
752 const trail: { label: string; to: string; mono?: boolean }[] = [{ label: owner!, to: `/${owner}`, mono: true }];
753 if (second === "-") {
A catalogue of model providers, and settings that feel like settings754 const page = `/${owner}/-/${third}`;
755 if (third && SETTINGS_PAGE.test(page)) {
756 trail.push({ label: "Settings", to: `/${owner}/-/settings` });
757 trail.push({ label: third === "settings" ? "General" : (SECTIONS[third] ?? third), to: page });
758 } else if (third) trail.push({ label: SECTIONS[third] ?? third, to: page });
A Vercel-like sidebar and a new mark759 } else if (second) {
760 const repo = `/${owner}/${second}`;
761 trail.push({ label: second, to: repo, mono: true });
762 if (third === "pull" && fourth) trail.push({ label: `Pull request #${fourth}`, to: `${repo}/pull/${fourth}` });
763 else if (third === "issues" && fourth && fourth !== "new") trail.push({ label: `Issue #${fourth}`, to: `${repo}/issues/${fourth}` });
764 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 deployments765 else if (third && SECTIONS[third]) {
766 trail.push({ label: SECTIONS[third]!, to: `${repo}/${third}` });
767 // A settings page names which one: Settings / Secrets and variables.
768 if (third === "settings" && fourth && SECTIONS[fourth]) {
769 trail.push({ label: SECTIONS[fourth]!, to: `${repo}/settings/${fourth}` });
770 }
771 }
A Vercel-like sidebar and a new mark772 }
773 return (
774 <nav aria-label="Where you are" className="flex min-w-0 items-center gap-1.5 text-sm">
775 {trail.map((crumb, index) => (
776 <span key={crumb.to} className="flex min-w-0 items-center gap-1.5">
777 {index > 0 && <span className="text-line-strong">/</span>}
Agents as a team: lifecycle, merge queue, billing and a new shell778 <Link
A Vercel-like sidebar and a new mark779 to={crumb.to}
780 className={`truncate rounded px-1 py-0.5 transition-colors hover:bg-raised ${
781 index === trail.length - 1 ? "font-medium text-fg" : "text-muted hover:text-fg"
782 } ${crumb.mono ? "font-mono text-[0.8125rem]" : ""}`}
Agents as a team: lifecycle, merge queue, billing and a new shell783 >
A Vercel-like sidebar and a new mark784 {crumb.label}
Agents as a team: lifecycle, merge queue, billing and a new shell785 </Link>
A Vercel-like sidebar and a new mark786 </span>
787 ))}
788 </nav>
Agents as a team: lifecycle, merge queue, billing and a new shell789 );
790}
791
792type Command = { label: string; hint?: string; to: string; icon: ReactNode };
793
794/** Everything the palette can jump to, from what the sidebar already knows. */
795function commandsFor(user: User, shell: ShellData): Command[] {
796 const commands: Command[] = [
797 { label: "Mission control", to: "/", icon: <LayoutDashboard size={15} /> },
798 { label: "Explore repositories", to: "/explore", icon: <Compass size={15} /> },
Projects: what a workspace builds and runs, first on every page799 { label: "New project", to: "/new", icon: <Plus size={15} /> },
Agents as a team: lifecycle, merge queue, billing and a new shell800 { label: "New workspace", to: "/workspaces/new", icon: <Plus size={15} /> },
801 { label: "Your settings", to: "/settings", icon: <Settings size={15} /> },
802 ];
803 const repo = shell.repo;
804 if (repo) {
805 const base = `/${repo.namespace}/${repo.name}`;
806 const name = `${repo.namespace}/${repo.name}`;
807 commands.unshift(
Projects: what a workspace builds and runs, first on every page808 { label: "Overview", hint: name, to: base, icon: <LayoutGrid size={15} /> },
809 { label: "Code", hint: name, to: `${base}/code`, icon: <Code2 size={15} /> },
Agents as a team: lifecycle, merge queue, billing and a new shell810 { label: "Issues", hint: name, to: `${base}/issues`, icon: <CircleDot size={15} /> },
811 { label: "New issue", hint: name, to: `${base}/issues/new`, icon: <Plus size={15} /> },
812 { label: "Pull requests", hint: name, to: `${base}/pulls`, icon: <GitPullRequest size={15} /> },
813 { label: "Commits", hint: name, to: `${base}/commits`, icon: <History size={15} /> },
814 ...(repo.member
815 ? [
816 { label: "Plan work", hint: name, to: `${base}/plans`, icon: <ListTree size={15} /> },
Projects: what a workspace builds and runs, first on every page817 { label: "Deployments", hint: name, to: `${base}/deployments`, icon: <Rocket size={15} /> },
818 { label: "Secrets and variables", hint: name, to: `${base}/settings/secrets`, icon: <Lock size={15} /> },
819 { label: "Project settings", hint: name, to: `${base}/settings`, icon: <Settings size={15} /> },
820 { label: "Repository settings", hint: name, to: `${base}/settings/repository`, icon: <Settings size={15} /> },
Agents as a team: lifecycle, merge queue, billing and a new shell821 ]
822 : []),
823 );
824 }
825 for (const membership of user.workspaces ?? []) {
826 commands.push(
827 { 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 request828 { label: "Usage", hint: membership.slug, to: `/${membership.slug}/-/usage`, icon: <BarChart3 size={15} /> },
Projects: what a workspace builds and runs, first on every page829 { 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 settings830 { label: "Access tokens", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/tokens`, icon: <KeyRound size={15} /> },
831 { 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 shell832 );
833 }
834 for (const listed of shell.repos) {
835 commands.push({
Projects: what a workspace builds and runs, first on every page836 label: listed.title ?? listed.name,
837 hint: `${listed.namespace} · Project`,
Agents as a team: lifecycle, merge queue, billing and a new shell838 to: `/${listed.namespace}/${listed.name}`,
Projects: what a workspace builds and runs, first on every page839 icon: <Box size={15} />,
Agents as a team: lifecycle, merge queue, billing and a new shell840 });
841 }
842 return commands;
843}
844
845function CommandPalette({
846 open,
847 onClose,
848 commands,
849}: {
850 open: boolean;
851 onClose: () => void;
852 commands: Command[];
853}) {
854 const navigate = useNavigate();
855 const [query, setQuery] = useState("");
856 const [selected, setSelected] = useState(0);
857 const input = useRef<HTMLInputElement>(null);
858 const matches = useMemo(() => {
859 const words = query.toLowerCase().split(/\s+/).filter(Boolean);
860 return commands
861 .filter((command) => {
862 const text = `${command.label} ${command.hint ?? ""}`.toLowerCase();
863 return words.every((word) => text.includes(word));
864 })
865 .slice(0, 12);
866 }, [commands, query]);
867
868 useEffect(() => {
869 if (!open) return;
870 setQuery("");
871 setSelected(0);
872 input.current?.focus();
873 }, [open]);
874 useEffect(() => setSelected(0), [query]);
875
876 if (!open) return null;
877 const go = (command: Command | undefined) => {
878 if (!command) return;
879 onClose();
880 navigate(command.to);
881 };
882 return (
883 <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 px-4 pt-[12vh] backdrop-blur-sm" onClick={onClose}>
884 <div
885 role="dialog"
886 aria-label="Go to"
887 className="w-full max-w-xl overflow-hidden rounded-xl border border-line-strong bg-raised shadow-2xl shadow-black/60"
888 onClick={(event) => event.stopPropagation()}
889 >
890 <div className="flex items-center gap-3 border-b border-line px-4">
891 <Search size={16} className="text-faint" />
892 <input
893 ref={input}
894 value={query}
895 onChange={(event) => setQuery(event.target.value)}
896 onKeyDown={(event) => {
897 if (event.key === "ArrowDown") {
898 event.preventDefault();
899 setSelected((index) => Math.min(index + 1, matches.length - 1));
900 } else if (event.key === "ArrowUp") {
901 event.preventDefault();
902 setSelected((index) => Math.max(index - 1, 0));
903 } else if (event.key === "Enter") {
904 event.preventDefault();
905 go(matches[selected]);
906 } else if (event.key === "Escape") {
907 onClose();
908 }
909 }}
910 placeholder="Go to a repository, a page, or an action…"
911 autoComplete="off"
912 data-1p-ignore
913 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"
914 />
915 <kbd className="rounded border border-line px-1.5 font-mono text-[0.6875rem] text-faint">esc</kbd>
916 </div>
917 <ul className="max-h-[50vh] overflow-y-auto p-1.5">
918 {matches.length === 0 && (
919 <li className="px-3 py-6 text-center text-sm text-faint">Nothing matches.</li>
920 )}
921 {matches.map((command, index) => (
922 <li key={`${command.to}-${command.label}`}>
923 <button
924 type="button"
925 onMouseEnter={() => setSelected(index)}
926 onClick={() => go(command)}
927 className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm ${
928 index === selected ? "bg-line text-fg" : "text-muted"
929 }`}
930 >
931 <span className="shrink-0 text-faint">{command.icon}</span>
932 <span className="min-w-0 grow truncate">{command.label}</span>
933 {command.hint && <span className="shrink-0 truncate text-xs text-faint">{command.hint}</span>}
934 {index === selected && <CornerDownLeft size={13} className="shrink-0 text-faint" />}
935 </button>
936 </li>
937 ))}
938 </ul>
939 </div>
940 </div>
941 );
942}
943
944/**
945 * A bar across the top of the page while the next one loads, as GitHub
946 * has: it appears at once, creeps towards the end while waiting, then fills
947 * and fades when the page arrives.
948 */
949export function Progress() {
950 const navigation = useNavigation();
951 const busy = navigation.state !== "idle";
952 const [width, setWidth] = useState(0);
953 const [visible, setVisible] = useState(false);
954 useEffect(() => {
955 if (busy) {
956 setVisible(true);
957 setWidth(12);
958 // Slows as it goes, never quite arriving until the page does.
959 const timer = setInterval(() => setWidth((now) => now + (90 - now) * 0.12), 200);
960 return () => clearInterval(timer);
961 }
962 setWidth((now) => (now > 0 ? 100 : 0));
963 const fade = setTimeout(() => setVisible(false), 250);
964 const reset = setTimeout(() => setWidth(0), 550);
965 return () => {
966 clearTimeout(fade);
967 clearTimeout(reset);
968 };
969 }, [busy]);
970 return (
971 <div
972 aria-hidden="true"
973 className={`pointer-events-none fixed inset-x-0 top-0 z-[60] h-[3px] transition-opacity duration-300 ${
974 visible ? "opacity-100" : "opacity-0"
975 }`}
976 >
977 <div
978 className="h-full bg-accent shadow-[0_0_10px_var(--color-accent)] transition-[width] duration-200 ease-out"
979 style={{ width: `${width}%` }}
980 />
981 </div>
982 );
983}
984
985/**
986 * The signed-in app: a sidebar with the workspace, its repositories and the
987 * sections of the one being looked at; a slim bar with search and the
988 * account; and the page.
989 */
990export function AppShell({
991 user,
992 shell,
993 banner,
994 children,
995}: {
996 user: User;
997 shell: ShellData;
998 banner?: ReactNode;
999 children: ReactNode;
1000}) {
1001 const submit = useSubmit();
1002 const { pathname } = useLocation();
1003 const [drawer, setDrawer] = useState(false);
1004 const [palette, setPalette] = useState(false);
1005 const commands = useMemo(() => commandsFor(user, shell), [user, shell]);
1006
1007 // A new page closes the drawer on small screens.
1008 useEffect(() => setDrawer(false), [pathname]);
1009 useEffect(() => {
1010 const onKey = (event: KeyboardEvent) => {
1011 if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
1012 event.preventDefault();
1013 setPalette((open) => !open);
1014 }
1015 };
1016 window.addEventListener("keydown", onKey);
1017 return () => window.removeEventListener("keydown", onKey);
1018 }, []);
1019
1020 return (
1021 <div className="min-h-screen">
1022 <Progress />
1023 <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 mark1024 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
Agents as a team: lifecycle, merge queue, billing and a new shell1025 </aside>
1026 {drawer && (
1027 <div className="fixed inset-0 z-50 lg:hidden">
1028 <button
1029 type="button"
1030 aria-label="Close menu"
1031 className="absolute inset-0 bg-black/60"
1032 onClick={() => setDrawer(false)}
1033 />
1034 <aside className="absolute inset-y-0 left-0 w-72 border-r border-line bg-surface">
1035 <button
1036 type="button"
1037 aria-label="Close menu"
1038 onClick={() => setDrawer(false)}
1039 className="absolute top-3 right-3 rounded-md p-1 text-faint hover:bg-raised hover:text-fg"
1040 >
1041 <X size={16} />
1042 </button>
A Vercel-like sidebar and a new mark1043 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
Agents as a team: lifecycle, merge queue, billing and a new shell1044 </aside>
1045 </div>
1046 )}
1047
Polish: phones, copy boxes, the plan page, the landing page, a real glide1048 <div className="flex min-h-screen min-w-0 flex-col lg:pl-64">
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace1049 <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-line bg-bg/85 px-4 backdrop-blur sm:px-6">
Agents as a team: lifecycle, merge queue, billing and a new shell1050 <button
1051 type="button"
1052 aria-label="Open menu"
1053 onClick={() => setDrawer(true)}
1054 className="rounded-md p-1.5 text-muted hover:bg-raised hover:text-fg lg:hidden"
1055 >
1056 <Menu size={18} />
1057 </button>
A Vercel-like sidebar and a new mark1058 <Breadcrumbs pathname={pathname} />
Agents as a team: lifecycle, merge queue, billing and a new shell1059 <div className="ml-auto flex items-center gap-1.5">
A Vercel-like sidebar and a new mark1060 <a
1061 href="https://docs.g1t.sh/"
1062 className="hidden rounded-md px-2 py-1 text-[0.8125rem] text-muted transition-colors hover:bg-raised hover:text-fg sm:block"
1063 >
1064 Docs
1065 </a>
Agents as a team: lifecycle, merge queue, billing and a new shell1066 <DropdownMenu>
1067 <DropdownMenuTrigger
1068 aria-label="Create"
A Vercel-like sidebar and a new mark1069 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 shell1070 >
A Vercel-like sidebar and a new mark1071 <Plus size={14} />
1072 New
Agents as a team: lifecycle, merge queue, billing and a new shell1073 </DropdownMenuTrigger>
1074 <DropdownMenuContent align="end">
1075 {shell.repo && (
1076 <DropdownMenuItem asChild>
1077 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/issues/new`}>
1078 <CircleDot />
1079 New issue
1080 </Link>
1081 </DropdownMenuItem>
1082 )}
1083 {shell.repo?.member && (
1084 <DropdownMenuItem asChild>
1085 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/plans`}>
1086 <ListTree />
1087 Plan work
1088 </Link>
1089 </DropdownMenuItem>
1090 )}
1091 <DropdownMenuItem asChild>
1092 <Link to="/new">
Projects: what a workspace builds and runs, first on every page1093 <Box />
1094 New project
Agents as a team: lifecycle, merge queue, billing and a new shell1095 </Link>
1096 </DropdownMenuItem>
1097 <DropdownMenuItem asChild>
1098 <Link to="/workspaces/new">
1099 <Users />
1100 New workspace
1101 </Link>
1102 </DropdownMenuItem>
1103 </DropdownMenuContent>
1104 </DropdownMenu>
1105 </div>
1106 </header>
1107 {banner}
Polish: phones, copy boxes, the plan page, the landing page, a real glide1108 <main className="min-w-0 grow">{children}</main>
Agents as a team: lifecycle, merge queue, billing and a new shell1109 </div>
1110 <CommandPalette open={palette} onClose={() => setPalette(false)} commands={commands} />
1111 </div>
1112 );
1113}