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,162 lines45,791 bytesCodeBlame
1import {
2 Activity,
3 ArrowLeft,
4 GanttChart,
5 KanbanSquare,
6 Package,
7 Sparkles,
8 BarChart3,
9 BookMarked,
10 BookOpen,
11 Check,
12 ChevronsUpDown,
13 Ellipsis,
14 CircleDot,
15 Code2,
16 Compass,
17 CornerDownLeft,
18 CreditCard,
19 GitPullRequest,
20 History,
21 Fingerprint,
22 KeyRound,
23 Box,
24 LayoutDashboard,
25 LayoutGrid,
26 ListTree,
27 Lock,
28 LogOut,
29 Menu,
30 Plus,
31 Search,
32 Plug,
33 Settings,
34 Users,
35 Webhook,
36 PlayCircle,
37 Bot,
38 Brain,
39 Network,
40 ShieldCheck,
41 Rocket,
42 X,
43} from "lucide-react";
44import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
45import { Form, Link, NavLink, useLocation, useNavigate, useNavigation, useSubmit } from "react-router";
46
47import type { Membership, User } from "@g1t/contracts";
48import { MICROS_PER_DOLLAR } from "@g1t/contracts";
49
50import { Mark } from "./logo";
51import { Avatar } from "./ui";
52import {
53 DropdownMenu,
54 DropdownMenuContent,
55 DropdownMenuItem,
56 DropdownMenuLabel,
57 DropdownMenuSeparator,
58 DropdownMenuTrigger,
59} from "./ui/dropdown-menu";
60import { type RoadmapItem, roadmapIn } from "../lib/roadmap";
61
62/** What the sidebar needs, worked out by the root loader for a signed-in person. */
63export type ShellData = {
64 /** The workspace the sidebar is about: the one being looked at, or their first. */
65 workspace: Membership | null;
66 /** Its projects, by name: `name` is the slug in their address. */
67 repos: { namespace: string; name: string; title?: string; isPrivate: boolean }[];
68 /** The project being looked at, if any, whoever owns it. */
69 repo: {
70 namespace: string;
71 name: string;
72 member: boolean;
73 issues: number;
74 pulls: number;
75 } | null;
76 /** Where the workspace stands against its usage limit, if billing is on. */
77 limit: {
78 exposureMicros: number;
79 ceilingMicros: number | null;
80 state: "ok" | "warning" | "stopped";
81 comped: boolean;
82 } | null;
83 /** Whether g1t charges nothing for now, while it is being built out. */
84 free?: boolean;
85 /** What its agents have cost since the start of the month. */
86 /** This month's usage: charged, or at cost while g1t is free. */
87 monthUsageMicros: number | null;
88};
89
90function SidebarLink({
91 to,
92 icon,
93 end,
94 count,
95 also,
96 children,
97}: {
98 to: string;
99 icon: ReactNode;
100 end?: boolean;
101 count?: number;
102 /** Other path prefixes under which this link is the current one. */
103 also?: string | string[];
104 children: ReactNode;
105}) {
106 const { pathname } = useLocation();
107 return (
108 <NavLink
109 to={to}
110 end={end}
111 prefetch="intent"
112 className={({ isActive, isPending }) => {
113 const current =
114 isActive || [also ?? []].flat().some((prefix) => pathname === prefix || pathname.startsWith(prefix + "/"));
115 return `group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
116 current
117 ? "bg-raised font-medium text-fg"
118 : isPending
119 ? "bg-raised/60 text-fg"
120 : "text-muted hover:bg-raised/60 hover:text-fg"
121 }`;
122 }}
123 >
124 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
125 <span className="min-w-0 grow truncate">{children}</span>
126 {count != null && count > 0 && (
127 <span className="rounded bg-line px-1.5 text-[0.6875rem] tabular-nums text-muted">
128 {count}
129 </span>
130 )}
131 </NavLink>
132 );
133}
134
135/**
136 * Something a project will have, shown where it will live so people can
137 * see where g1t is going. Not a link: nothing is behind it yet.
138 */
139function SidebarSoon({ icon, children, about }: { icon: ReactNode; children: ReactNode; about: string }) {
140 return (
141 <div
142 title={about}
143 aria-disabled="true"
144 className="flex h-8 cursor-default items-center gap-2.5 rounded-md px-2 text-[0.8125rem] text-faint"
145 >
146 <span className="shrink-0 opacity-70">{icon}</span>
147 <span className="grow truncate">{children}</span>
148 <span className="rounded-full px-1.5 py-px text-[0.625rem] font-medium tracking-wide text-muted uppercase ring-1 ring-line">
149 Soon
150 </span>
151 </div>
152 );
153}
154
155/**
156 * A page that is coming, as a link to its roadmap page: faint, with Soon,
157 * and marked current on any of its section's Soon pages.
158 */
159function SidebarSoonLink({
160 to,
161 also,
162 icon,
163 about,
164 children,
165}: {
166 to: string;
167 also?: string[];
168 icon: ReactNode;
169 about: string;
170 children: ReactNode;
171}) {
172 const { pathname } = useLocation();
173 return (
174 <NavLink
175 to={to}
176 title={about}
177 prefetch="intent"
178 className={({ isActive }) => {
179 const current = isActive || (also ?? []).some((prefix) => pathname === prefix || pathname.startsWith(prefix + "/"));
180 return `group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
181 current ? "bg-raised font-medium text-fg" : "text-faint hover:bg-raised/60 hover:text-muted"
182 }`;
183 }}
184 >
185 <span className="shrink-0 opacity-80">{icon}</span>
186 <span className="min-w-0 grow truncate">{children}</span>
187 <span className="rounded-full px-1.5 py-px text-[0.625rem] font-medium tracking-wide text-muted uppercase ring-1 ring-line">
188 Soon
189 </span>
190 </NavLink>
191 );
192}
193
194/** Icons for what spans projects. */
195const WORKSPACE_ICONS: Record<string, ReactNode> = {
196 board: <KanbanSquare size={15} />,
197 roadmap: <GanttChart size={15} />,
198 packages: <Package size={15} />,
199 fleet: <Bot size={15} />,
200};
201
202/** The Soon pages of a section, as paths, so its link is current on them. */
203function soonPaths(base: string, section: RoadmapItem["section"]): string[] {
204 return roadmapIn(section).map((item) => `${base}/soon/${item.key}`);
205}
206
207function SidebarGroup({ title, action, children }: { title: string; action?: ReactNode; children: ReactNode }) {
208 return (
209 <section className="mt-6">
210 <div className="mb-1 flex h-6 items-center justify-between px-2">
211 <h2 className="text-xs font-medium text-faint">{title}</h2>
212 {action}
213 </div>
214 <div className="space-y-px">{children}</div>
215 </section>
216 );
217}
218
219/** What a workspace is called where people read it: its display name, else its slug. */
220function displayName(membership: Membership): string {
221 return membership.name?.trim() || membership.slug;
222}
223
224function WorkspaceSwitcher({ user, shell }: { user: User; shell: ShellData }) {
225 const workspace = shell.workspace;
226 const current = workspace?.slug;
227 const label = workspace ? displayName(workspace) : "Choose a workspace";
228 return (
229 <DropdownMenu>
230 {/* The name goes to the workspace; only the arrows switch it. The
231 name gets all the room there is, and the whole of it on hover. */}
232 <Link
233 to={current ? `/${current}` : "/workspaces/new"}
234 title={workspace ? `${label} · g1t.sh/${workspace.slug}` : undefined}
235 className="flex h-8 min-w-0 grow items-center gap-1.5 rounded-md px-1 transition-colors hover:bg-raised"
236 >
237 {workspace ? (
238 <Avatar name={workspace.slug} image={workspace.avatar} size={20} square />
239 ) : (
240 <span className="size-5 shrink-0 rounded-md border border-dashed border-line-strong" />
241 )}
242 <span className="min-w-0 truncate text-[0.8125rem] font-medium">{label}</span>
243 </Link>
244 <DropdownMenuTrigger
245 aria-label="Switch workspace"
246 className="flex h-8 w-5 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"
247 >
248 <ChevronsUpDown size={14} />
249 </DropdownMenuTrigger>
250 <DropdownMenuContent align="start" className="w-64">
251 <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
252 {(user.workspaces ?? []).map((membership) => (
253 <DropdownMenuItem asChild key={membership.slug}>
254 <Link to={`/${membership.slug}`} title={displayName(membership)}>
255 <Avatar name={membership.slug} image={membership.avatar} size={24} square />
256 <span className="flex min-w-0 grow flex-col leading-tight">
257 <span className="truncate">{displayName(membership)}</span>
258 <span className="truncate font-mono text-[0.6875rem] text-faint">{membership.slug}</span>
259 </span>
260 <span className="shrink-0 text-[0.6875rem] text-faint capitalize">{membership.role}</span>
261 {membership.slug === current ? (
262 <Check className="shrink-0 text-accent" />
263 ) : (
264 <span className="size-4 shrink-0" aria-hidden="true" />
265 )}
266 </Link>
267 </DropdownMenuItem>
268 ))}
269 <DropdownMenuSeparator />
270 <DropdownMenuItem asChild>
271 <Link to="/workspaces/new">
272 <Plus />
273 New workspace
274 </Link>
275 </DropdownMenuItem>
276 </DropdownMenuContent>
277 </DropdownMenu>
278 );
279}
280
281/**
282 * This month's usage, and how close the workspace is to its usage limit,
283 * as Vercel shows a plan's usage.
284 */
285function UsageCard({ slug, shell }: { slug: string; shell: ShellData }) {
286 if (shell.monthUsageMicros == null) return null;
287 const spent = shell.monthUsageMicros;
288 const limit = shell.limit;
289 const ceiling = limit?.ceilingMicros ?? null;
290 const share = limit && ceiling ? Math.min(1, limit.exposureMicros / Math.max(ceiling, 1)) : 0;
291 const tone = limit?.state === "stopped" ? "text-danger" : limit?.state === "warning" ? "text-warn" : "text-faint";
292 const bar = limit?.state === "stopped" ? "bg-danger" : limit?.state === "warning" ? "bg-warn" : "bg-accent";
293 return (
294 <Link
295 to={`/${slug}/-/usage`}
296 className="block rounded-lg bg-surface p-3 ring-1 ring-line transition-colors hover:ring-line-strong"
297 >
298 <span className="flex items-baseline justify-between text-xs">
299 <span className="font-medium text-fg">Usage</span>
300 <span className="text-faint">this month</span>
301 </span>
302 <span className="mt-2 flex items-baseline justify-between">
303 <span className="font-mono text-sm tabular-nums">${(spent / MICROS_PER_DOLLAR).toFixed(2)}</span>
304 {shell.free ? (
305 <span className="text-xs text-accent">Free for now</span>
306 ) : limit?.comped ? (
307 <span className="text-xs text-accent">Comped</span>
308 ) : (
309 ceiling != null && (
310 <span className={`text-xs ${tone}`}>
311 {limit?.state === "stopped" ? "Limit reached" : `$${(ceiling / MICROS_PER_DOLLAR).toFixed(2)} limit`}
312 </span>
313 )
314 )}
315 </span>
316 {ceiling != null && !limit?.comped && (
317 <span className="mt-2 block h-1 overflow-hidden rounded-full bg-raised">
318 <span
319 className={`block h-full rounded-full ${bar}`}
320 style={{ width: `${Math.max(share * 100, share > 0 ? 3 : 0)}%` }}
321 />
322 </span>
323 )}
324 </Link>
325 );
326}
327
328function AccountMenu({ user }: { user: User }) {
329 const submit = useSubmit();
330 return (
331 <DropdownMenu>
332 <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">
333 <Avatar name={user.username} image={user.avatar} size={22} />
334 <span className="min-w-0 grow truncate text-[0.8125rem] font-medium">{user.username}</span>
335 <Ellipsis size={15} className="shrink-0 text-faint" />
336 </DropdownMenuTrigger>
337 <DropdownMenuContent align="start" side="top" className="w-56">
338 <DropdownMenuLabel>
339 Signed in as <span className="font-mono font-medium text-fg">{user.username}</span>
340 </DropdownMenuLabel>
341 <DropdownMenuSeparator />
342 <DropdownMenuItem asChild>
343 <Link to="/settings">
344 <Settings />
345 Your settings
346 </Link>
347 </DropdownMenuItem>
348 <DropdownMenuItem asChild>
349 <a href="https://docs.g1t.sh/">
350 <BookOpen />
351 Documentation
352 </a>
353 </DropdownMenuItem>
354 <DropdownMenuSeparator />
355 {/* Submitted from here: the menu closes on select, and a button
356 that has left the page cannot submit a form. */}
357 <DropdownMenuItem onSelect={() => submit(null, { method: "post", action: "/logout" })}>
358 <LogOut />
359 Sign out
360 </DropdownMenuItem>
361 </DropdownMenuContent>
362 </DropdownMenu>
363 );
364}
365
366/** A workspace's settings pages, which the sidebar slides over to. */
367const SETTINGS_PAGE = /^\/([^/]+)\/-\/(settings|people|tokens|billing|integrations|webhooks|secrets|audit)(\/|$)/;
368
369/**
370 * The sidebar's menus are two layers, the way a phone pushes a screen: the
371 * one arriving slides in from the right over the full width, while the one
372 * leaving drifts a quarter of the way left and fades, both on one long
373 * ease-out, the fade quicker than the move so the two never blur together.
374 * Going back reverses it.
375 */
376const LAYER =
377 "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";
378/** One menu, filling its layer. */
379const PANEL = "h-full overflow-y-auto px-2 pb-4";
380
381/** A workspace's settings, as the sidebar shows them in place of everything else. */
382function SettingsMenu({ slug, owner, open }: { slug: string; owner: boolean; open: boolean }) {
383 return (
384 <nav
385 aria-label="Workspace settings"
386 inert={!open}
387 className={PANEL}
388 >
389 <Link
390 to={`/${slug}`}
391 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"
392 >
393 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
394 <span className="truncate">{slug}</span>
395 </Link>
396 <SidebarGroup title="Settings">
397 {owner && (
398 <SidebarLink to={`/${slug}/-/settings`} icon={<Settings size={15} />}>
399 General
400 </SidebarLink>
401 )}
402 <SidebarLink to={`/${slug}/-/people`} icon={<Users size={15} />}>
403 Members
404 </SidebarLink>
405 <SidebarLink to={`/${slug}/-/tokens`} icon={<KeyRound size={15} />}>
406 Access tokens
407 </SidebarLink>
408 <SidebarLink to={`/${slug}/-/billing`} icon={<CreditCard size={15} />}>
409 Billing and plans
410 </SidebarLink>
411 <SidebarLink to={`/${slug}/-/integrations`} icon={<Plug size={15} />}>
412 Integrations
413 </SidebarLink>
414 <SidebarLink to={`/${slug}/-/secrets`} icon={<Lock size={15} />}>
415 Secrets and variables
416 </SidebarLink>
417 <SidebarLink to={`/${slug}/-/guardrails`} icon={<ShieldCheck size={15} />}>
418 Guardrails
419 </SidebarLink>
420 <SidebarLink to={`/${slug}/-/webhooks`} icon={<Webhook size={15} />}>
421 Webhooks
422 </SidebarLink>
423 <SidebarLink to={`/${slug}/-/audit`} icon={<History size={15} />}>
424 Audit log
425 </SidebarLink>
426 </SidebarGroup>
427 </nav>
428 );
429}
430
431/**
432 * What the repository menu needs. Known from the address before the page's
433 * data arrives, so the menu is right from the first frame; the counts fill
434 * in once it does.
435 */
436type MenuRepo = {
437 namespace: string;
438 name: string;
439 member: boolean;
440 issues?: number;
441 pulls?: number;
442};
443
444function sameRepo(a: { namespace: string; name: string } | null, b: { namespace: string; name: string } | null) {
445 return (
446 a != null &&
447 b != null &&
448 a.namespace.toLowerCase() === b.namespace.toLowerCase() &&
449 a.name.toLowerCase() === b.name.toLowerCase()
450 );
451}
452
453/**
454 * A project's own menu, which the sidebar slides to while you are in it,
455 * as it does for settings: everything about the project, running and its
456 * code, and nothing else, with the way back to everything.
457 */
458function RepoMenu({ repo, isPrivate, open }: { repo: MenuRepo; isPrivate: boolean; open: boolean }) {
459 const base = `/${repo.namespace}/${repo.name}`;
460 return (
461 <nav aria-label={`${repo.namespace}/${repo.name}`} inert={!open} className={PANEL}>
462 <Link
463 to="/"
464 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"
465 >
466 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
467 Mission control
468 </Link>
469 <NavLink
470 to={base}
471 end
472 title="Overview"
473 className={({ isActive }) =>
474 `mt-3 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isActive ? "bg-raised" : "hover:bg-raised/60"}`
475 }
476 >
477 <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line">
478 {isPrivate ? <Lock size={13} /> : <Box size={13} />}
479 </span>
480 <span className="min-w-0 truncate font-mono text-[0.8125rem]">
481 <span className="text-faint">{repo.namespace}/</span>
482 <span className="font-semibold text-fg">{repo.name}</span>
483 </span>
484 </NavLink>
485 {/* A project's pages, flat and in the order people use them. A page
486 with more than one view shows them as tabs across its top. */}
487 <div className="mt-3 space-y-px">
488 <SidebarLink to={`${base}/code`} also={[`${base}/tree`, `${base}/blob`, `${base}/commits`, `${base}/commit`, ...soonPaths(base, "Code")]} icon={<Code2 size={15} />}>
489 Code
490 </SidebarLink>
491 <SidebarLink to={`${base}/issues`} also={[`${base}/plans`, ...soonPaths(base, "Issues")]} icon={<CircleDot size={15} />} count={repo.issues}>
492 Issues
493 </SidebarLink>
494 <SidebarLink to={`${base}/pulls`} also={[`${base}/pull`, `${base}/queue`]} icon={<GitPullRequest size={15} />} count={repo.pulls}>
495 Pull requests
496 </SidebarLink>
497 <SidebarLink to={`${base}/agents`} also={[`${base}/sessions`, `${base}/memory`, ...soonPaths(base, "Agents")]} icon={<Bot size={15} />}>
498 Agents
499 </SidebarLink>
500 <SidebarLink to={`${base}/actions`} icon={<PlayCircle size={15} />}>
501 Workflows
502 </SidebarLink>
503 {repo.member ? (
504 <SidebarLink to={`${base}/deployments`} also={soonPaths(base, "Deployments")} icon={<Rocket size={15} />}>
505 Deployments
506 </SidebarLink>
507 ) : null}
508 <SidebarSoonLink to={`${base}/soon/logs`} also={soonPaths(base, "Observability")} icon={<Activity size={15} />} about="Logs, errors, uptime and analytics of the project's deployed apps.">
509 Observability
510 </SidebarSoonLink>
511 {repo.member ? (
512 <SidebarLink to={`${base}/security`} also={soonPaths(base, "Security")} icon={<ShieldCheck size={15} />}>
513 Security
514 </SidebarLink>
515 ) : null}
516 <SidebarSoonLink to={`${base}/soon/delivery`} also={soonPaths(base, "Insights")} icon={<BarChart3 size={15} />} about="Delivery metrics, costs and the work agents do.">
517 Insights
518 </SidebarSoonLink>
519 {repo.member && (
520 <SidebarLink to={`${base}/settings`} icon={<Settings size={15} />}>
521 Settings
522 </SidebarLink>
523 )}
524 </div>
525 </nav>
526 );
527}
528
529/** Your own settings, as the sidebar shows them on the settings page. */
530function AccountSettingsMenu({ open }: { open: boolean }) {
531 const { hash } = useLocation();
532 const item = (id: string, icon: ReactNode, label: string) => (
533 <Link
534 to={`/settings#${id}`}
535 className={`group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
536 hash === `#${id}` ? "bg-raised font-medium text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"
537 }`}
538 >
539 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
540 {label}
541 </Link>
542 );
543 return (
544 <nav
545 aria-label="Your settings"
546 inert={!open}
547 className={PANEL}
548 >
549 <Link
550 to="/"
551 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"
552 >
553 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
554 Mission control
555 </Link>
556 <SidebarGroup title="Account">
557 {item("ssh-keys", <Fingerprint size={15} />, "SSH keys")}
558 {item("tokens", <KeyRound size={15} />, "Access tokens")}
559 {item("applications", <Plug size={15} />, "Connected applications")}
560 </SidebarGroup>
561 </nav>
562 );
563}
564
565function Sidebar({ user, shell, onFind }: { user: User; shell: ShellData; onFind: () => void }) {
566 const ws = shell.workspace;
567 const { pathname } = useLocation();
568 const going = useNavigation().location?.pathname;
569 // On a workspace's settings page, or on the way to one, its settings take
570 // the sidebar over.
571 const inSettings = ws != null && SETTINGS_PAGE.exec(going ?? pathname)?.[1]?.toLowerCase() === ws.slug;
572 const inAccount = (going ?? pathname) === "/settings";
573 const active = shell.repo;
574 // In a repository, or on the way into one, its own menu takes the sidebar.
575 const target = going ?? pathname;
576 const repoPath = /^\/([^/]+)\/([^/-][^/]*)(\/|$)/.exec(target);
577 const reserved = new Set(["settings", "explore", "search", "new", "u", "pricing", "avatars", "workspaces", "login", "logout", "register", "verify", "forgot", "reset", "device", "oauth"]);
578 const inRepo = repoPath != null && !reserved.has(repoPath[1]) && repoPath[2] !== "-";
579 const away = inSettings || inAccount || inRepo;
580 // The repository the menu is for: the one loaded if it is the one being
581 // gone to, else what the address says, at once.
582 const targetRepo = inRepo && repoPath ? { namespace: repoPath[1], name: repoPath[2] } : null;
583 const menuRepo: MenuRepo | null = targetRepo
584 ? sameRepo(active, targetRepo)
585 ? active
586 : {
587 ...targetRepo,
588 member: (user.workspaces ?? []).some((m) => m.slug === targetRepo.namespace.toLowerCase()),
589 }
590 : null;
591 // What sits on the far side of the track. Kept while sliding back, so it
592 // does not vanish on the way out.
593 const side = useRef<"workspace" | "account" | "repo">("workspace");
594 if (inAccount) side.current = "account";
595 else if (inSettings) side.current = "workspace";
596 else if (inRepo) side.current = "repo";
597 // The repository last shown, kept for the slide back.
598 const shown = useRef<MenuRepo | null>(menuRepo);
599 if (menuRepo) shown.current = menuRepo;
600 // Moving between two of the far-side menus (settings to a repository,
601 // one repository to another) crossfades in place instead of sliding.
602 const detailKey = side.current === "repo" ? `repo:${shown.current?.namespace}/${shown.current?.name}` : side.current;
603 const lastAway = useRef(away);
604 const lastKey = useRef(detailKey);
605 const swapped = lastAway.current && away && lastKey.current !== detailKey;
606 useEffect(() => {
607 lastAway.current = away;
608 lastKey.current = detailKey;
609 });
610 // The repository being looked at is listed even when it is someone else's.
611 const listed =
612 active && !shell.repos.some((repo) => repo.namespace === active.namespace && repo.name === active.name)
613 ? [{ namespace: active.namespace, name: active.name, isPrivate: false }, ...shell.repos]
614 : shell.repos;
615 return (
616 <div className="flex h-full flex-col">
617 {/* The same height and rule as the top bar, so the two read as one line. */}
618 <div className="flex h-16 shrink-0 items-center gap-1 border-b border-line pr-2 pl-2.5">
619 <Link to="/" aria-label="g1t home" className="shrink-0 rounded-md p-1.5 hover:bg-raised">
620 <Mark className="size-6" />
621 </Link>
622 <span className="shrink-0 text-line-strong" aria-hidden="true">
623 /
624 </span>
625 <WorkspaceSwitcher user={user} shell={shell} />
626 </div>
627 <div className="px-2 pt-3">
628 <button
629 type="button"
630 onClick={onFind}
631 className="flex h-9 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"
632 >
633 <Search size={14} />
634 <span className="grow text-left">Find…</span>
635 <kbd className="rounded bg-raised px-1.5 font-mono text-[0.625rem] text-muted ring-1 ring-line">⌘K</kbd>
636 </button>
637 </div>
638 <div className="relative min-h-0 grow overflow-hidden">
639 <div className={`${LAYER} ${away ? "pointer-events-none -translate-x-1/4 opacity-0" : "translate-x-0 opacity-100"}`}>
640 <nav aria-label="g1t" inert={away} className={PANEL}>
641 <div className="mt-3 space-y-px">
642 <SidebarLink to="/" end icon={<LayoutDashboard size={15} />}>
643 Mission control
644 </SidebarLink>
645 <SidebarLink to="/explore" icon={<Compass size={15} />}>
646 Explore
647 </SidebarLink>
648 </div>
649
650 <SidebarGroup
651 title="Projects"
652 action={
653 ws && (
654 <Link
655 to={`/new?workspace=${ws.slug}`}
656 aria-label="New project"
657 className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"
658 >
659 <Plus size={13} />
660 </Link>
661 )
662 }
663 >
664 {listed.length === 0 && (
665 <p className="px-2 py-1 text-xs text-faint">None yet.</p>
666 )}
667 {listed.map((repo) => {
668 const base = `/${repo.namespace}/${repo.name}`;
669 return (
670 <div key={base}>
671 <SidebarLink
672 to={base}
673 icon={repo.isPrivate ? <Lock size={15} /> : <Box size={15} />}
674 >
675 <span className="text-[0.8125rem]">
676 {repo.namespace !== ws?.slug && (
677 <span className="font-mono text-faint">{repo.namespace}/</span>
678 )}
679 {"title" in repo && repo.title ? repo.title : repo.name}
680 </span>
681 </SidebarLink>
682 </div>
683 );
684 })}
685 </SidebarGroup>
686 {ws && (
687 <SidebarGroup title="Across projects">
688 <SidebarLink to={`/${ws.slug}/-/agents`} icon={<Bot size={15} />}>
689 Agent fleet
690 </SidebarLink>
691 <SidebarLink to={`/${ws.slug}/-/context`} icon={<Network size={15} />}>
692 Context
693 </SidebarLink>
694 <SidebarLink to={`/${ws.slug}/-/memory`} icon={<Brain size={15} />}>
695 Memory
696 </SidebarLink>
697 <SidebarLink to={`/${ws.slug}/-/security`} icon={<ShieldCheck size={15} />}>
698 Security
699 </SidebarLink>
700 {roadmapIn("Workspace").map((item) => (
701 <SidebarSoonLink
702 key={item.key}
703 to={`/${ws.slug}/-/soon/${item.key}`}
704 icon={WORKSPACE_ICONS[item.key] ?? <Sparkles size={15} />}
705 about={item.summary}
706 >
707 {item.title === "Board" ? "Boards" : item.title}
708 </SidebarSoonLink>
709 ))}
710 </SidebarGroup>
711 )}
712 </nav>
713 </div>
714 <div className={`${LAYER} ${away ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-full opacity-0"}`}>
715 <div key={detailKey} className={`h-full ${swapped ? "animate-[g1t-swap_220ms_ease-out]" : ""}`}>
716 {side.current === "repo" && shown.current ? (
717 <RepoMenu
718 repo={shown.current}
719 isPrivate={shell.repos.some((repo) => sameRepo(repo, shown.current) && repo.isPrivate)}
720 open={inRepo}
721 />
722 ) : side.current === "account" || !ws ? (
723 <AccountSettingsMenu open={inAccount} />
724 ) : (
725 <SettingsMenu slug={ws.slug} owner={ws.role === "owner"} open={inSettings} />
726 )}
727 </div>
728 </div>
729 </div>
730
731 {/* The workspace's own things sit at the bottom, by its usage and the
732 account: a panel of their own, ruled off from whatever menu is above,
733 however long it grows. */}
734 <div className="shrink-0 space-y-2 border-t border-line bg-surface/50 p-2 pt-3">
735 {ws && (
736 <div className="space-y-px">
737 <p className="flex items-center gap-2 px-2 pb-1 text-[0.6875rem] font-medium uppercase tracking-wider text-faint">
738 <span>Workspace</span>
739 <span className="min-w-0 truncate font-mono normal-case tracking-normal text-muted">{ws.slug}</span>
740 </p>
741 <SidebarLink to={`/${ws.slug}/-/usage`} icon={<BarChart3 size={15} />}>
742 Usage
743 </SidebarLink>
744 {/* Everything else about the workspace lives in its settings, and only there. */}
745 <SidebarLink
746 to={ws.role === "owner" ? `/${ws.slug}/-/settings` : `/${ws.slug}/-/people`}
747 icon={<Settings size={15} />}
748 >
749 Settings
750 </SidebarLink>
751 </div>
752 )}
753 {ws && <UsageCard slug={ws.slug} shell={shell} />}
754 <AccountMenu user={user} />
755 </div>
756 </div>
757 );
758}
759
760/** Words for the sections a path can end in. */
761const SECTIONS: Record<string, string> = {
762 issues: "Issues",
763 pulls: "Pull requests",
764 queue: "Merge queue",
765 commits: "Commits",
766 plans: "Outcomes",
767 actions: "Workflows",
768 soon: "Soon",
769 deployments: "Deployments",
770 repository: "Repository",
771 dependencies: "Dependencies",
772 code: "Files",
773 secrets: "Secrets and variables",
774 settings: "Settings",
775 people: "Members",
776 tokens: "Access tokens",
777 usage: "Usage",
778 billing: "Billing and plans",
779 integrations: "Integrations",
780 webhooks: "Webhooks",
781 tree: "Code",
782 blob: "Code",
783};
784
785/** Where the page is, as a trail of links: workspace / repository / section. */
786function Breadcrumbs({ pathname }: { pathname: string }) {
787 const parts = pathname.split("/").filter(Boolean);
788 const reserved = ["settings", "explore", "new", "search", "workspaces"];
789 if (parts.length === 0) return <span className="text-sm font-medium">Mission control</span>;
790 if (reserved.includes(parts[0]!)) {
791 const words: Record<string, string> = {
792 settings: "Account",
793 explore: "Explore",
794 new: "New project",
795 search: "Search",
796 workspaces: "New workspace",
797 };
798 return <span className="text-sm font-medium">{words[parts[0]!]}</span>;
799 }
800 const [owner, second, third, fourth] = parts;
801 const trail: { label: string; to: string; mono?: boolean }[] = [{ label: owner!, to: `/${owner}`, mono: true }];
802 if (second === "-") {
803 const page = `/${owner}/-/${third}`;
804 if (third && SETTINGS_PAGE.test(page)) {
805 trail.push({ label: "Settings", to: `/${owner}/-/settings` });
806 trail.push({ label: third === "settings" ? "General" : (SECTIONS[third] ?? third), to: page });
807 } else if (third) trail.push({ label: SECTIONS[third] ?? third, to: page });
808 } else if (second) {
809 const repo = `/${owner}/${second}`;
810 trail.push({ label: second, to: repo, mono: true });
811 if (third === "pull" && fourth) trail.push({ label: `Pull request #${fourth}`, to: `${repo}/pull/${fourth}` });
812 else if (third === "issues" && fourth && fourth !== "new") trail.push({ label: `Issue #${fourth}`, to: `${repo}/issues/${fourth}` });
813 else if (third === "commit" && fourth) trail.push({ label: fourth.slice(0, 7), to: `${repo}/commit/${fourth}`, mono: true });
814 else if (third && SECTIONS[third]) {
815 trail.push({ label: SECTIONS[third]!, to: `${repo}/${third}` });
816 // A settings page names which one: Settings / Secrets and variables.
817 if (third === "settings" && fourth && SECTIONS[fourth]) {
818 trail.push({ label: SECTIONS[fourth]!, to: `${repo}/settings/${fourth}` });
819 }
820 }
821 }
822 return (
823 <nav aria-label="Where you are" className="flex min-w-0 items-center gap-1.5 text-sm">
824 {trail.map((crumb, index) => (
825 <span key={crumb.to} className="flex min-w-0 items-center gap-1.5">
826 {index > 0 && <span className="text-line-strong">/</span>}
827 <Link
828 to={crumb.to}
829 className={`truncate rounded px-1 py-0.5 transition-colors hover:bg-raised ${
830 index === trail.length - 1 ? "font-medium text-fg" : "text-muted hover:text-fg"
831 } ${crumb.mono ? "font-mono text-[0.8125rem]" : ""}`}
832 >
833 {crumb.label}
834 </Link>
835 </span>
836 ))}
837 </nav>
838 );
839}
840
841type Command = { label: string; hint?: string; to: string; icon: ReactNode };
842
843/** Everything the palette can jump to, from what the sidebar already knows. */
844function commandsFor(user: User, shell: ShellData): Command[] {
845 const commands: Command[] = [
846 { label: "Mission control", to: "/", icon: <LayoutDashboard size={15} /> },
847 { label: "Explore repositories", to: "/explore", icon: <Compass size={15} /> },
848 { label: "New project", to: "/new", icon: <Plus size={15} /> },
849 { label: "New workspace", to: "/workspaces/new", icon: <Plus size={15} /> },
850 { label: "Your settings", to: "/settings", icon: <Settings size={15} /> },
851 ];
852 const repo = shell.repo;
853 if (repo) {
854 const base = `/${repo.namespace}/${repo.name}`;
855 const name = `${repo.namespace}/${repo.name}`;
856 commands.unshift(
857 { label: "Overview", hint: name, to: base, icon: <LayoutGrid size={15} /> },
858 { label: "Code", hint: name, to: `${base}/code`, icon: <Code2 size={15} /> },
859 { label: "Issues", hint: name, to: `${base}/issues`, icon: <CircleDot size={15} /> },
860 { label: "New issue", hint: name, to: `${base}/issues/new`, icon: <Plus size={15} /> },
861 { label: "Pull requests", hint: name, to: `${base}/pulls`, icon: <GitPullRequest size={15} /> },
862 { label: "Commits", hint: name, to: `${base}/commits`, icon: <History size={15} /> },
863 ...(repo.member
864 ? [
865 { label: "Plan work", hint: name, to: `${base}/plans`, icon: <ListTree size={15} /> },
866 { label: "Deployments", hint: name, to: `${base}/deployments`, icon: <Rocket size={15} /> },
867 { label: "Secrets and variables", hint: name, to: `${base}/settings/secrets`, icon: <Lock size={15} /> },
868 { label: "Project settings", hint: name, to: `${base}/settings`, icon: <Settings size={15} /> },
869 { label: "Repository settings", hint: name, to: `${base}/settings/repository`, icon: <Settings size={15} /> },
870 ]
871 : []),
872 );
873 }
874 for (const membership of user.workspaces ?? []) {
875 commands.push(
876 { label: displayName(membership), hint: `Workspace · ${membership.slug}`, to: `/${membership.slug}`, icon: <Avatar name={membership.slug} image={membership.avatar} size={15} square /> },
877 { label: "Usage", hint: membership.slug, to: `/${membership.slug}/-/usage`, icon: <BarChart3 size={15} /> },
878 { label: "Billing and plans", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/billing`, icon: <CreditCard size={15} /> },
879 { label: "Access tokens", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/tokens`, icon: <KeyRound size={15} /> },
880 { label: "Integrations", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/integrations`, icon: <Plug size={15} /> },
881 );
882 }
883 for (const listed of shell.repos) {
884 commands.push({
885 label: listed.title ?? listed.name,
886 hint: `${listed.namespace} · Project`,
887 to: `/${listed.namespace}/${listed.name}`,
888 icon: <Box size={15} />,
889 });
890 }
891 return commands;
892}
893
894function CommandPalette({
895 open,
896 onClose,
897 commands,
898}: {
899 open: boolean;
900 onClose: () => void;
901 commands: Command[];
902}) {
903 const navigate = useNavigate();
904 const [query, setQuery] = useState("");
905 const [selected, setSelected] = useState(0);
906 const input = useRef<HTMLInputElement>(null);
907 const matches = useMemo(() => {
908 const words = query.toLowerCase().split(/\s+/).filter(Boolean);
909 return commands
910 .filter((command) => {
911 const text = `${command.label} ${command.hint ?? ""}`.toLowerCase();
912 return words.every((word) => text.includes(word));
913 })
914 .slice(0, 12);
915 }, [commands, query]);
916
917 useEffect(() => {
918 if (!open) return;
919 setQuery("");
920 setSelected(0);
921 input.current?.focus();
922 }, [open]);
923 useEffect(() => setSelected(0), [query]);
924
925 if (!open) return null;
926 const go = (command: Command | undefined) => {
927 if (!command) return;
928 onClose();
929 navigate(command.to);
930 };
931 return (
932 <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 px-4 pt-[12vh] backdrop-blur-sm" onClick={onClose}>
933 <div
934 role="dialog"
935 aria-label="Go to"
936 className="w-full max-w-xl overflow-hidden rounded-xl border border-line-strong bg-raised shadow-2xl shadow-black/60"
937 onClick={(event) => event.stopPropagation()}
938 >
939 <div className="flex items-center gap-3 border-b border-line px-4">
940 <Search size={16} className="text-faint" />
941 <input
942 ref={input}
943 value={query}
944 onChange={(event) => setQuery(event.target.value)}
945 onKeyDown={(event) => {
946 if (event.key === "ArrowDown") {
947 event.preventDefault();
948 setSelected((index) => Math.min(index + 1, matches.length - 1));
949 } else if (event.key === "ArrowUp") {
950 event.preventDefault();
951 setSelected((index) => Math.max(index - 1, 0));
952 } else if (event.key === "Enter") {
953 event.preventDefault();
954 go(matches[selected]);
955 } else if (event.key === "Escape") {
956 onClose();
957 }
958 }}
959 placeholder="Go to a repository, a page, or an action…"
960 autoComplete="off"
961 data-1p-ignore
962 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"
963 />
964 <kbd className="rounded border border-line px-1.5 font-mono text-[0.6875rem] text-faint">esc</kbd>
965 </div>
966 <ul className="max-h-[50vh] overflow-y-auto p-1.5">
967 {matches.length === 0 && (
968 <li className="px-3 py-6 text-center text-sm text-faint">Nothing matches.</li>
969 )}
970 {matches.map((command, index) => (
971 <li key={`${command.to}-${command.label}`}>
972 <button
973 type="button"
974 onMouseEnter={() => setSelected(index)}
975 onClick={() => go(command)}
976 className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm ${
977 index === selected ? "bg-line text-fg" : "text-muted"
978 }`}
979 >
980 <span className="shrink-0 text-faint">{command.icon}</span>
981 <span className="min-w-0 grow truncate">{command.label}</span>
982 {command.hint && <span className="shrink-0 truncate text-xs text-faint">{command.hint}</span>}
983 {index === selected && <CornerDownLeft size={13} className="shrink-0 text-faint" />}
984 </button>
985 </li>
986 ))}
987 </ul>
988 </div>
989 </div>
990 );
991}
992
993/**
994 * A bar across the top of the page while the next one loads, as GitHub
995 * has: it appears at once, creeps towards the end while waiting, then fills
996 * and fades when the page arrives.
997 */
998export function Progress() {
999 const navigation = useNavigation();
1000 const busy = navigation.state !== "idle";
1001 const [width, setWidth] = useState(0);
1002 const [visible, setVisible] = useState(false);
1003 useEffect(() => {
1004 if (busy) {
1005 setVisible(true);
1006 setWidth(12);
1007 // Slows as it goes, never quite arriving until the page does.
1008 const timer = setInterval(() => setWidth((now) => now + (90 - now) * 0.12), 200);
1009 return () => clearInterval(timer);
1010 }
1011 setWidth((now) => (now > 0 ? 100 : 0));
1012 const fade = setTimeout(() => setVisible(false), 250);
1013 const reset = setTimeout(() => setWidth(0), 550);
1014 return () => {
1015 clearTimeout(fade);
1016 clearTimeout(reset);
1017 };
1018 }, [busy]);
1019 return (
1020 <div
1021 aria-hidden="true"
1022 className={`pointer-events-none fixed inset-x-0 top-0 z-[60] h-[3px] transition-opacity duration-300 ${
1023 visible ? "opacity-100" : "opacity-0"
1024 }`}
1025 >
1026 <div
1027 className="h-full bg-accent shadow-[0_0_10px_var(--color-accent)] transition-[width] duration-200 ease-out"
1028 style={{ width: `${width}%` }}
1029 />
1030 </div>
1031 );
1032}
1033
1034/**
1035 * The signed-in app: a sidebar with the workspace, its repositories and the
1036 * sections of the one being looked at; a slim bar with search and the
1037 * account; and the page.
1038 */
1039export function AppShell({
1040 user,
1041 shell,
1042 banner,
1043 children,
1044}: {
1045 user: User;
1046 shell: ShellData;
1047 banner?: ReactNode;
1048 children: ReactNode;
1049}) {
1050 const submit = useSubmit();
1051 const { pathname } = useLocation();
1052 const [drawer, setDrawer] = useState(false);
1053 const [palette, setPalette] = useState(false);
1054 const commands = useMemo(() => commandsFor(user, shell), [user, shell]);
1055
1056 // A new page closes the drawer on small screens.
1057 useEffect(() => setDrawer(false), [pathname]);
1058 useEffect(() => {
1059 const onKey = (event: KeyboardEvent) => {
1060 if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
1061 event.preventDefault();
1062 setPalette((open) => !open);
1063 }
1064 };
1065 window.addEventListener("keydown", onKey);
1066 return () => window.removeEventListener("keydown", onKey);
1067 }, []);
1068
1069 return (
1070 <div className="min-h-screen">
1071 <Progress />
1072 <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">
1073 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
1074 </aside>
1075 {drawer && (
1076 <div className="fixed inset-0 z-50 lg:hidden">
1077 <button
1078 type="button"
1079 aria-label="Close menu"
1080 className="absolute inset-0 bg-black/60"
1081 onClick={() => setDrawer(false)}
1082 />
1083 <aside className="absolute inset-y-0 left-0 w-72 border-r border-line bg-surface">
1084 <button
1085 type="button"
1086 aria-label="Close menu"
1087 onClick={() => setDrawer(false)}
1088 className="absolute top-3 right-3 rounded-md p-1 text-faint hover:bg-raised hover:text-fg"
1089 >
1090 <X size={16} />
1091 </button>
1092 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
1093 </aside>
1094 </div>
1095 )}
1096
1097 <div className="flex min-h-screen min-w-0 flex-col lg:pl-64">
1098 <header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-line bg-bg/85 px-4 backdrop-blur sm:px-6">
1099 <button
1100 type="button"
1101 aria-label="Open menu"
1102 onClick={() => setDrawer(true)}
1103 className="rounded-md p-1.5 text-muted hover:bg-raised hover:text-fg lg:hidden"
1104 >
1105 <Menu size={18} />
1106 </button>
1107 <Breadcrumbs pathname={pathname} />
1108 <div className="ml-auto flex items-center gap-1.5">
1109 <a
1110 href="https://docs.g1t.sh/"
1111 className="hidden rounded-md px-2.5 py-1.5 text-sm text-muted transition-colors hover:bg-raised hover:text-fg sm:block"
1112 >
1113 Docs
1114 </a>
1115 <DropdownMenu>
1116 <DropdownMenuTrigger
1117 aria-label="Create"
1118 className="flex h-9 items-center gap-1.5 rounded-md bg-fg px-3 text-sm font-medium text-bg outline-none transition-colors hover:bg-white"
1119 >
1120 <Plus size={14} />
1121 New
1122 </DropdownMenuTrigger>
1123 <DropdownMenuContent align="end">
1124 {shell.repo && (
1125 <DropdownMenuItem asChild>
1126 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/issues/new`}>
1127 <CircleDot />
1128 New issue
1129 </Link>
1130 </DropdownMenuItem>
1131 )}
1132 {shell.repo?.member && (
1133 <DropdownMenuItem asChild>
1134 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/plans`}>
1135 <ListTree />
1136 Plan work
1137 </Link>
1138 </DropdownMenuItem>
1139 )}
1140 <DropdownMenuItem asChild>
1141 <Link to="/new">
1142 <Box />
1143 New project
1144 </Link>
1145 </DropdownMenuItem>
1146 <DropdownMenuItem asChild>
1147 <Link to="/workspaces/new">
1148 <Users />
1149 New workspace
1150 </Link>
1151 </DropdownMenuItem>
1152 </DropdownMenuContent>
1153 </DropdownMenu>
1154 </div>
1155 </header>
1156 {banner}
1157 <main className="min-w-0 grow">{children}</main>
1158 </div>
1159 <CommandPalette open={palette} onClose={() => setPalette(false)} commands={commands} />
1160 </div>
1161 );
1162}