Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

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

777 lines29,291 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 {
Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request2 BarChart3,
Agents as a team: lifecycle, merge queue, billing and a new shell3 BookMarked,
4 BookOpen,
5 Check,
6 ChevronsUpDown,
A Vercel-like sidebar and a new mark7 Ellipsis,
Agents as a team: lifecycle, merge queue, billing and a new shell8 CircleDot,
9 Code2,
10 Compass,
11 CornerDownLeft,
12 CreditCard,
13 GitPullRequest,
14 History,
15 KeyRound,
16 Layers,
17 LayoutDashboard,
18 ListTree,
19 Lock,
20 LogOut,
21 Menu,
22 Plus,
23 Search,
24 Settings,
25 Users,
26 X,
27} from "lucide-react";
28import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
29import { Form, Link, NavLink, useLocation, useNavigate, useNavigation, useSubmit } from "react-router";
30
31import type { User } from "@g1t/contracts";
32import { MICROS_PER_DOLLAR } from "@g1t/contracts";
33
A Vercel-like sidebar and a new mark34import { Mark } from "./logo";
Agents as a team: lifecycle, merge queue, billing and a new shell35import { Avatar } from "./ui";
36import {
37 DropdownMenu,
38 DropdownMenuContent,
39 DropdownMenuItem,
40 DropdownMenuLabel,
41 DropdownMenuSeparator,
42 DropdownMenuTrigger,
43} from "./ui/dropdown-menu";
44
45/** What the sidebar needs, worked out by the root loader for a signed-in person. */
46export type ShellData = {
47 /** The workspace the sidebar is about: the one being looked at, or their first. */
48 workspace: { slug: string; role: "owner" | "member" } | null;
49 /** Its repositories, newest first. */
50 repos: { namespace: string; name: string; isPrivate: boolean }[];
51 /** The repository being looked at, if any, whoever owns it. */
52 repo: {
53 namespace: string;
54 name: string;
55 member: boolean;
56 issues: number;
57 pulls: number;
58 } | null;
59 /** The workspace's agent credit, if billing is on and they may see it. */
60 creditMicros: number | null;
Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request61 /** What its agents have cost since the start of the month. */
62 monthSpentMicros: number | null;
Agents as a team: lifecycle, merge queue, billing and a new shell63};
64
65function SidebarLink({
66 to,
67 icon,
68 end,
69 count,
70 also,
71 children,
72}: {
73 to: string;
74 icon: ReactNode;
75 end?: boolean;
76 count?: number;
77 /** Another path prefix under which this link is the current one. */
78 also?: string;
79 children: ReactNode;
80}) {
81 const { pathname } = useLocation();
82 return (
83 <NavLink
84 to={to}
85 end={end}
86 prefetch="intent"
87 className={({ isActive, isPending }) => {
88 const current = isActive || (also != null && pathname.startsWith(also + "/"));
A Vercel-like sidebar and a new mark89 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 shell90 current
91 ? "bg-raised font-medium text-fg"
92 : isPending
93 ? "bg-raised/60 text-fg"
94 : "text-muted hover:bg-raised/60 hover:text-fg"
95 }`;
96 }}
97 >
98 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
99 <span className="min-w-0 grow truncate">{children}</span>
100 {count != null && count > 0 && (
101 <span className="rounded bg-line px-1.5 text-[0.6875rem] tabular-nums text-muted">
102 {count}
103 </span>
104 )}
105 </NavLink>
106 );
107}
108
109function SidebarGroup({ title, action, children }: { title: string; action?: ReactNode; children: ReactNode }) {
110 return (
A Vercel-like sidebar and a new mark111 <section className="mt-6">
112 <div className="mb-1 flex h-6 items-center justify-between px-2">
113 <h2 className="text-xs font-medium text-faint">{title}</h2>
Agents as a team: lifecycle, merge queue, billing and a new shell114 {action}
115 </div>
116 <div className="space-y-px">{children}</div>
117 </section>
118 );
119}
120
121function WorkspaceSwitcher({ user, shell }: { user: User; shell: ShellData }) {
122 const current = shell.workspace?.slug;
123 return (
124 <DropdownMenu>
A Vercel-like sidebar and a new mark125 {/* The name goes to the workspace; only the arrows switch it. */}
126 <Link
127 to={current ? `/${current}` : "/workspaces/new"}
128 className="flex h-8 min-w-0 items-center gap-2 rounded-md px-1.5 transition-colors hover:bg-raised"
129 >
Agents as a team: lifecycle, merge queue, billing and a new shell130 {current ? (
A Vercel-like sidebar and a new mark131 <Avatar name={current} size={20} square />
Agents as a team: lifecycle, merge queue, billing and a new shell132 ) : (
A Vercel-like sidebar and a new mark133 <span className="size-5 rounded-md border border-dashed border-line-strong" />
Agents as a team: lifecycle, merge queue, billing and a new shell134 )}
A Vercel-like sidebar and a new mark135 <span className="min-w-0 truncate text-sm font-medium">{current ?? "Choose a workspace"}</span>
136 {shell.workspace && (
137 <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">
138 {shell.workspace.role}
Agents as a team: lifecycle, merge queue, billing and a new shell139 </span>
A Vercel-like sidebar and a new mark140 )}
141 </Link>
142 <DropdownMenuTrigger
143 aria-label="Switch workspace"
144 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"
145 >
146 <ChevronsUpDown size={14} />
Agents as a team: lifecycle, merge queue, billing and a new shell147 </DropdownMenuTrigger>
148 <DropdownMenuContent align="start" className="w-60">
149 <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
150 {(user.workspaces ?? []).map((membership) => (
151 <DropdownMenuItem asChild key={membership.slug}>
152 <Link to={`/${membership.slug}`}>
153 <Avatar name={membership.slug} size={16} square />
154 <span className="grow">{membership.slug}</span>
155 {membership.slug === current && <Check className="text-accent" />}
156 </Link>
157 </DropdownMenuItem>
158 ))}
159 <DropdownMenuSeparator />
160 <DropdownMenuItem asChild>
161 <Link to="/workspaces/new">
162 <Plus />
163 New workspace
164 </Link>
165 </DropdownMenuItem>
166 </DropdownMenuContent>
167 </DropdownMenu>
168 );
169}
170
A Vercel-like sidebar and a new mark171/** This month's spend against what is left, as Vercel shows a plan's usage. */
172function UsageCard({ slug, shell }: { slug: string; shell: ShellData }) {
173 if (shell.monthSpentMicros == null) return null;
174 const spent = shell.monthSpentMicros;
175 const left = shell.creditMicros;
176 const share = left != null && spent + left > 0 ? Math.min(1, spent / (spent + Math.max(left, 0))) : 0;
177 return (
178 <Link
179 to={`/${slug}/-/usage`}
180 className="block rounded-lg bg-surface p-3 ring-1 ring-line transition-colors hover:ring-line-strong"
181 >
182 <span className="flex items-baseline justify-between text-xs">
183 <span className="font-medium text-fg">Usage</span>
184 <span className="text-faint">this month</span>
185 </span>
186 <span className="mt-2 flex items-baseline justify-between">
187 <span className="font-mono text-sm tabular-nums">${(spent / MICROS_PER_DOLLAR).toFixed(2)}</span>
188 {left != null && (
189 <span className={`text-xs ${left <= 0 ? "text-warn" : "text-faint"}`}>
190 ${(left / MICROS_PER_DOLLAR).toFixed(2)} left
191 </span>
192 )}
193 </span>
194 <span className="mt-2 block h-1 overflow-hidden rounded-full bg-raised">
195 <span
196 className={`block h-full rounded-full ${left != null && left <= 0 ? "bg-warn" : "bg-accent"}`}
197 style={{ width: `${Math.max(share * 100, spent > 0 ? 3 : 0)}%` }}
198 />
199 </span>
200 </Link>
201 );
202}
203
204function AccountMenu({ user }: { user: User }) {
205 const submit = useSubmit();
206 return (
207 <DropdownMenu>
208 <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">
209 <Avatar name={user.username} size={22} />
210 <span className="min-w-0 grow truncate text-[0.8125rem] font-medium">{user.username}</span>
211 <Ellipsis size={15} className="shrink-0 text-faint" />
212 </DropdownMenuTrigger>
213 <DropdownMenuContent align="start" side="top" className="w-56">
214 <DropdownMenuLabel>
215 Signed in as <span className="font-mono font-medium text-fg">{user.username}</span>
216 </DropdownMenuLabel>
217 <DropdownMenuSeparator />
218 <DropdownMenuItem asChild>
219 <Link to="/settings">
220 <Settings />
221 Your settings
222 </Link>
223 </DropdownMenuItem>
224 <DropdownMenuItem asChild>
225 <a href="https://docs.g1t.sh/">
226 <BookOpen />
227 Documentation
228 </a>
229 </DropdownMenuItem>
230 <DropdownMenuSeparator />
231 {/* Submitted from here: the menu closes on select, and a button
232 that has left the page cannot submit a form. */}
233 <DropdownMenuItem onSelect={() => submit(null, { method: "post", action: "/logout" })}>
234 <LogOut />
235 Sign out
236 </DropdownMenuItem>
237 </DropdownMenuContent>
238 </DropdownMenu>
239 );
240}
241
242function Sidebar({ user, shell, onFind }: { user: User; shell: ShellData; onFind: () => void }) {
Agents as a team: lifecycle, merge queue, billing and a new shell243 const ws = shell.workspace;
244 const active = shell.repo;
245 const repoBase = active ? `/${active.namespace}/${active.name}` : null;
246 // The repository being looked at is listed even when it is someone else's.
247 const listed =
248 active && !shell.repos.some((repo) => repo.namespace === active.namespace && repo.name === active.name)
249 ? [{ namespace: active.namespace, name: active.name, isPrivate: false }, ...shell.repos]
250 : shell.repos;
251 return (
252 <div className="flex h-full flex-col">
A Vercel-like sidebar and a new mark253 {/* The same height and rule as the top bar, so the two read as one line. */}
254 <div className="flex h-12 shrink-0 items-center gap-1 border-b border-line px-2">
255 <Link to="/" aria-label="g1t home" className="shrink-0 rounded-md p-1.5 hover:bg-raised">
256 <Mark className="size-5" />
Agents as a team: lifecycle, merge queue, billing and a new shell257 </Link>
A Vercel-like sidebar and a new mark258 <span className="shrink-0 text-line-strong" aria-hidden="true">
259 /
260 </span>
261 <WorkspaceSwitcher user={user} shell={shell} />
Agents as a team: lifecycle, merge queue, billing and a new shell262 </div>
A Vercel-like sidebar and a new mark263 <div className="px-2 pt-3">
264 <button
265 type="button"
266 onClick={onFind}
267 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"
268 >
269 <Search size={14} />
270 <span className="grow text-left">Find…</span>
271 <kbd className="rounded bg-raised px-1.5 font-mono text-[0.625rem] text-muted ring-1 ring-line">⌘K</kbd>
272 </button>
Agents as a team: lifecycle, merge queue, billing and a new shell273 </div>
274 <nav className="min-h-0 grow overflow-y-auto px-2 pb-4">
275 <div className="mt-3 space-y-px">
276 <SidebarLink to="/" end icon={<LayoutDashboard size={15} />}>
277 Mission control
278 </SidebarLink>
279 <SidebarLink to="/explore" icon={<Compass size={15} />}>
280 Explore
281 </SidebarLink>
282 </div>
283
284 {ws && (
285 <SidebarGroup title="Workspace">
286 <SidebarLink to={`/${ws.slug}`} end icon={<LayoutDashboard size={15} />}>
287 Overview
288 </SidebarLink>
289 <SidebarLink to={`/${ws.slug}/-/people`} icon={<Users size={15} />}>
290 People
291 </SidebarLink>
292 <SidebarLink to={`/${ws.slug}/-/tokens`} icon={<KeyRound size={15} />}>
293 Access tokens
294 </SidebarLink>
Usage, like a hosting provider's: what agents cost, per day, task, repository and pull request295 <SidebarLink to={`/${ws.slug}/-/usage`} icon={<BarChart3 size={15} />}>
296 Usage
297 </SidebarLink>
Agents as a team: lifecycle, merge queue, billing and a new shell298 <SidebarLink to={`/${ws.slug}/-/billing`} icon={<CreditCard size={15} />}>
299 Billing
300 </SidebarLink>
301 {ws.role === "owner" && (
302 <SidebarLink to={`/${ws.slug}/-/settings`} icon={<Settings size={15} />}>
303 Settings
304 </SidebarLink>
305 )}
306 </SidebarGroup>
307 )}
308
309 <SidebarGroup
310 title="Repositories"
311 action={
312 ws && (
313 <Link
314 to={`/new?workspace=${ws.slug}`}
315 aria-label="New repository"
316 className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"
317 >
318 <Plus size={13} />
319 </Link>
320 )
321 }
322 >
323 {listed.length === 0 && (
324 <p className="px-2 py-1 text-xs text-faint">None yet.</p>
325 )}
326 {listed.map((repo) => {
327 const open =
328 active && repo.namespace === active.namespace && repo.name === active.name;
329 const base = `/${repo.namespace}/${repo.name}`;
330 return (
331 <div key={base}>
332 <SidebarLink
333 to={base}
334 end={!open}
335 icon={repo.isPrivate ? <Lock size={15} /> : <BookMarked size={15} />}
336 >
337 <span className="font-mono text-[0.8125rem]">
338 {repo.namespace !== ws?.slug && (
339 <span className="text-faint">{repo.namespace}/</span>
340 )}
341 {repo.name}
342 </span>
343 </SidebarLink>
344 {open && repoBase && (
345 <div className="my-0.5 ml-4 space-y-px border-l border-line pl-2">
346 <SidebarLink to={repoBase} end icon={<Code2 size={14} />} also={`${repoBase}/tree`}>
347 Code
348 </SidebarLink>
349 <SidebarLink
350 to={`${repoBase}/issues`}
351 icon={<CircleDot size={14} />}
352 count={active.issues}
353 >
354 Issues
355 </SidebarLink>
356 <SidebarLink
357 to={`${repoBase}/pulls`}
358 also={`${repoBase}/pull`}
359 icon={<GitPullRequest size={14} />}
360 count={active.pulls}
361 >
362 Pull requests
363 </SidebarLink>
364 <SidebarLink to={`${repoBase}/queue`} icon={<Layers size={14} />}>
365 Merge queue
366 </SidebarLink>
367 <SidebarLink
368 to={`${repoBase}/commits`}
369 also={`${repoBase}/commit`}
370 icon={<History size={14} />}
371 >
372 Commits
373 </SidebarLink>
374 {active.member && (
375 <SidebarLink to={`${repoBase}/plans`} icon={<ListTree size={14} />}>
376 Plan
377 </SidebarLink>
378 )}
379 {active.member && (
380 <SidebarLink to={`${repoBase}/settings`} icon={<Settings size={14} />}>
381 Settings
382 </SidebarLink>
383 )}
384 </div>
385 )}
386 </div>
387 );
388 })}
389 </SidebarGroup>
390 </nav>
391
A Vercel-like sidebar and a new mark392 <div className="space-y-2 p-2">
393 {ws && <UsageCard slug={ws.slug} shell={shell} />}
394 <AccountMenu user={user} />
395 </div>
396 </div>
397 );
398}
399
400/** Words for the sections a path can end in. */
401const SECTIONS: Record<string, string> = {
402 issues: "Issues",
403 pulls: "Pull requests",
404 queue: "Merge queue",
405 commits: "Commits",
406 plans: "Plan",
407 settings: "Settings",
408 people: "People",
409 tokens: "Access tokens",
410 usage: "Usage",
411 billing: "Billing",
412 tree: "Code",
413 blob: "Code",
414};
415
416/** Where the page is, as a trail of links: workspace / repository / section. */
417function Breadcrumbs({ pathname }: { pathname: string }) {
418 const parts = pathname.split("/").filter(Boolean);
419 const reserved = ["settings", "explore", "new", "search", "workspaces"];
420 if (parts.length === 0) return <span className="text-sm font-medium">Mission control</span>;
421 if (reserved.includes(parts[0]!)) {
422 const words: Record<string, string> = {
423 settings: "Your settings",
424 explore: "Explore",
425 new: "New repository",
426 search: "Search",
427 workspaces: "New workspace",
428 };
429 return <span className="text-sm font-medium">{words[parts[0]!]}</span>;
430 }
431 const [owner, second, third, fourth] = parts;
432 const trail: { label: string; to: string; mono?: boolean }[] = [{ label: owner!, to: `/${owner}`, mono: true }];
433 if (second === "-") {
434 if (third) trail.push({ label: SECTIONS[third] ?? third, to: `/${owner}/-/${third}` });
435 } else if (second) {
436 const repo = `/${owner}/${second}`;
437 trail.push({ label: second, to: repo, mono: true });
438 if (third === "pull" && fourth) trail.push({ label: `Pull request #${fourth}`, to: `${repo}/pull/${fourth}` });
439 else if (third === "issues" && fourth && fourth !== "new") trail.push({ label: `Issue #${fourth}`, to: `${repo}/issues/${fourth}` });
440 else if (third === "commit" && fourth) trail.push({ label: fourth.slice(0, 7), to: `${repo}/commit/${fourth}`, mono: true });
441 else if (third && SECTIONS[third]) trail.push({ label: SECTIONS[third]!, to: `${repo}/${third}` });
442 }
443 return (
444 <nav aria-label="Where you are" className="flex min-w-0 items-center gap-1.5 text-sm">
445 {trail.map((crumb, index) => (
446 <span key={crumb.to} className="flex min-w-0 items-center gap-1.5">
447 {index > 0 && <span className="text-line-strong">/</span>}
Agents as a team: lifecycle, merge queue, billing and a new shell448 <Link
A Vercel-like sidebar and a new mark449 to={crumb.to}
450 className={`truncate rounded px-1 py-0.5 transition-colors hover:bg-raised ${
451 index === trail.length - 1 ? "font-medium text-fg" : "text-muted hover:text-fg"
452 } ${crumb.mono ? "font-mono text-[0.8125rem]" : ""}`}
Agents as a team: lifecycle, merge queue, billing and a new shell453 >
A Vercel-like sidebar and a new mark454 {crumb.label}
Agents as a team: lifecycle, merge queue, billing and a new shell455 </Link>
A Vercel-like sidebar and a new mark456 </span>
457 ))}
458 </nav>
Agents as a team: lifecycle, merge queue, billing and a new shell459 );
460}
461
462type Command = { label: string; hint?: string; to: string; icon: ReactNode };
463
464/** Everything the palette can jump to, from what the sidebar already knows. */
465function commandsFor(user: User, shell: ShellData): Command[] {
466 const commands: Command[] = [
467 { label: "Mission control", to: "/", icon: <LayoutDashboard size={15} /> },
468 { label: "Explore repositories", to: "/explore", icon: <Compass size={15} /> },
469 { label: "New repository", to: "/new", icon: <Plus size={15} /> },
470 { label: "New workspace", to: "/workspaces/new", icon: <Plus size={15} /> },
471 { label: "Your settings", to: "/settings", icon: <Settings size={15} /> },
472 ];
473 const repo = shell.repo;
474 if (repo) {
475 const base = `/${repo.namespace}/${repo.name}`;
476 const name = `${repo.namespace}/${repo.name}`;
477 commands.unshift(
478 { label: "Issues", hint: name, to: `${base}/issues`, icon: <CircleDot size={15} /> },
479 { label: "New issue", hint: name, to: `${base}/issues/new`, icon: <Plus size={15} /> },
480 { label: "Pull requests", hint: name, to: `${base}/pulls`, icon: <GitPullRequest size={15} /> },
481 { label: "Commits", hint: name, to: `${base}/commits`, icon: <History size={15} /> },
482 ...(repo.member
483 ? [
484 { label: "Plan work", hint: name, to: `${base}/plans`, icon: <ListTree size={15} /> },
485 { label: "Repository settings", hint: name, to: `${base}/settings`, icon: <Settings size={15} /> },
486 ]
487 : []),
488 );
489 }
490 for (const membership of user.workspaces ?? []) {
491 commands.push(
492 { 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 request493 { label: "Usage", hint: membership.slug, to: `/${membership.slug}/-/usage`, icon: <BarChart3 size={15} /> },
Agents as a team: lifecycle, merge queue, billing and a new shell494 { label: "Billing", hint: membership.slug, to: `/${membership.slug}/-/billing`, icon: <CreditCard size={15} /> },
495 { label: "Access tokens", hint: membership.slug, to: `/${membership.slug}/-/tokens`, icon: <KeyRound size={15} /> },
496 );
497 }
498 for (const listed of shell.repos) {
499 commands.push({
500 label: `${listed.namespace}/${listed.name}`,
501 hint: "Repository",
502 to: `/${listed.namespace}/${listed.name}`,
503 icon: <BookMarked size={15} />,
504 });
505 }
506 return commands;
507}
508
509function CommandPalette({
510 open,
511 onClose,
512 commands,
513}: {
514 open: boolean;
515 onClose: () => void;
516 commands: Command[];
517}) {
518 const navigate = useNavigate();
519 const [query, setQuery] = useState("");
520 const [selected, setSelected] = useState(0);
521 const input = useRef<HTMLInputElement>(null);
522 const matches = useMemo(() => {
523 const words = query.toLowerCase().split(/\s+/).filter(Boolean);
524 return commands
525 .filter((command) => {
526 const text = `${command.label} ${command.hint ?? ""}`.toLowerCase();
527 return words.every((word) => text.includes(word));
528 })
529 .slice(0, 12);
530 }, [commands, query]);
531
532 useEffect(() => {
533 if (!open) return;
534 setQuery("");
535 setSelected(0);
536 input.current?.focus();
537 }, [open]);
538 useEffect(() => setSelected(0), [query]);
539
540 if (!open) return null;
541 const go = (command: Command | undefined) => {
542 if (!command) return;
543 onClose();
544 navigate(command.to);
545 };
546 return (
547 <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 px-4 pt-[12vh] backdrop-blur-sm" onClick={onClose}>
548 <div
549 role="dialog"
550 aria-label="Go to"
551 className="w-full max-w-xl overflow-hidden rounded-xl border border-line-strong bg-raised shadow-2xl shadow-black/60"
552 onClick={(event) => event.stopPropagation()}
553 >
554 <div className="flex items-center gap-3 border-b border-line px-4">
555 <Search size={16} className="text-faint" />
556 <input
557 ref={input}
558 value={query}
559 onChange={(event) => setQuery(event.target.value)}
560 onKeyDown={(event) => {
561 if (event.key === "ArrowDown") {
562 event.preventDefault();
563 setSelected((index) => Math.min(index + 1, matches.length - 1));
564 } else if (event.key === "ArrowUp") {
565 event.preventDefault();
566 setSelected((index) => Math.max(index - 1, 0));
567 } else if (event.key === "Enter") {
568 event.preventDefault();
569 go(matches[selected]);
570 } else if (event.key === "Escape") {
571 onClose();
572 }
573 }}
574 placeholder="Go to a repository, a page, or an action…"
575 autoComplete="off"
576 data-1p-ignore
577 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"
578 />
579 <kbd className="rounded border border-line px-1.5 font-mono text-[0.6875rem] text-faint">esc</kbd>
580 </div>
581 <ul className="max-h-[50vh] overflow-y-auto p-1.5">
582 {matches.length === 0 && (
583 <li className="px-3 py-6 text-center text-sm text-faint">Nothing matches.</li>
584 )}
585 {matches.map((command, index) => (
586 <li key={`${command.to}-${command.label}`}>
587 <button
588 type="button"
589 onMouseEnter={() => setSelected(index)}
590 onClick={() => go(command)}
591 className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm ${
592 index === selected ? "bg-line text-fg" : "text-muted"
593 }`}
594 >
595 <span className="shrink-0 text-faint">{command.icon}</span>
596 <span className="min-w-0 grow truncate">{command.label}</span>
597 {command.hint && <span className="shrink-0 truncate text-xs text-faint">{command.hint}</span>}
598 {index === selected && <CornerDownLeft size={13} className="shrink-0 text-faint" />}
599 </button>
600 </li>
601 ))}
602 </ul>
603 </div>
604 </div>
605 );
606}
607
608/**
609 * A bar across the top of the page while the next one loads, as GitHub
610 * has: it appears at once, creeps towards the end while waiting, then fills
611 * and fades when the page arrives.
612 */
613export function Progress() {
614 const navigation = useNavigation();
615 const busy = navigation.state !== "idle";
616 const [width, setWidth] = useState(0);
617 const [visible, setVisible] = useState(false);
618 useEffect(() => {
619 if (busy) {
620 setVisible(true);
621 setWidth(12);
622 // Slows as it goes, never quite arriving until the page does.
623 const timer = setInterval(() => setWidth((now) => now + (90 - now) * 0.12), 200);
624 return () => clearInterval(timer);
625 }
626 setWidth((now) => (now > 0 ? 100 : 0));
627 const fade = setTimeout(() => setVisible(false), 250);
628 const reset = setTimeout(() => setWidth(0), 550);
629 return () => {
630 clearTimeout(fade);
631 clearTimeout(reset);
632 };
633 }, [busy]);
634 return (
635 <div
636 aria-hidden="true"
637 className={`pointer-events-none fixed inset-x-0 top-0 z-[60] h-[3px] transition-opacity duration-300 ${
638 visible ? "opacity-100" : "opacity-0"
639 }`}
640 >
641 <div
642 className="h-full bg-accent shadow-[0_0_10px_var(--color-accent)] transition-[width] duration-200 ease-out"
643 style={{ width: `${width}%` }}
644 />
645 </div>
646 );
647}
648
649/**
650 * The signed-in app: a sidebar with the workspace, its repositories and the
651 * sections of the one being looked at; a slim bar with search and the
652 * account; and the page.
653 */
654export function AppShell({
655 user,
656 shell,
657 banner,
658 children,
659}: {
660 user: User;
661 shell: ShellData;
662 banner?: ReactNode;
663 children: ReactNode;
664}) {
665 const submit = useSubmit();
666 const { pathname } = useLocation();
667 const [drawer, setDrawer] = useState(false);
668 const [palette, setPalette] = useState(false);
669 const commands = useMemo(() => commandsFor(user, shell), [user, shell]);
670
671 // A new page closes the drawer on small screens.
672 useEffect(() => setDrawer(false), [pathname]);
673 useEffect(() => {
674 const onKey = (event: KeyboardEvent) => {
675 if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
676 event.preventDefault();
677 setPalette((open) => !open);
678 }
679 };
680 window.addEventListener("keydown", onKey);
681 return () => window.removeEventListener("keydown", onKey);
682 }, []);
683
684 return (
685 <div className="min-h-screen">
686 <Progress />
687 <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 mark688 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
Agents as a team: lifecycle, merge queue, billing and a new shell689 </aside>
690 {drawer && (
691 <div className="fixed inset-0 z-50 lg:hidden">
692 <button
693 type="button"
694 aria-label="Close menu"
695 className="absolute inset-0 bg-black/60"
696 onClick={() => setDrawer(false)}
697 />
698 <aside className="absolute inset-y-0 left-0 w-72 border-r border-line bg-surface">
699 <button
700 type="button"
701 aria-label="Close menu"
702 onClick={() => setDrawer(false)}
703 className="absolute top-3 right-3 rounded-md p-1 text-faint hover:bg-raised hover:text-fg"
704 >
705 <X size={16} />
706 </button>
A Vercel-like sidebar and a new mark707 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
Agents as a team: lifecycle, merge queue, billing and a new shell708 </aside>
709 </div>
710 )}
711
712 <div className="flex min-h-screen flex-col lg:pl-64">
713 <header className="sticky top-0 z-30 flex h-12 items-center gap-2 border-b border-line bg-bg/85 px-3 backdrop-blur sm:px-4">
714 <button
715 type="button"
716 aria-label="Open menu"
717 onClick={() => setDrawer(true)}
718 className="rounded-md p-1.5 text-muted hover:bg-raised hover:text-fg lg:hidden"
719 >
720 <Menu size={18} />
721 </button>
A Vercel-like sidebar and a new mark722 <Breadcrumbs pathname={pathname} />
Agents as a team: lifecycle, merge queue, billing and a new shell723 <div className="ml-auto flex items-center gap-1.5">
A Vercel-like sidebar and a new mark724 <a
725 href="https://docs.g1t.sh/"
726 className="hidden rounded-md px-2 py-1 text-[0.8125rem] text-muted transition-colors hover:bg-raised hover:text-fg sm:block"
727 >
728 Docs
729 </a>
Agents as a team: lifecycle, merge queue, billing and a new shell730 <DropdownMenu>
731 <DropdownMenuTrigger
732 aria-label="Create"
A Vercel-like sidebar and a new mark733 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 shell734 >
A Vercel-like sidebar and a new mark735 <Plus size={14} />
736 New
Agents as a team: lifecycle, merge queue, billing and a new shell737 </DropdownMenuTrigger>
738 <DropdownMenuContent align="end">
739 {shell.repo && (
740 <DropdownMenuItem asChild>
741 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/issues/new`}>
742 <CircleDot />
743 New issue
744 </Link>
745 </DropdownMenuItem>
746 )}
747 {shell.repo?.member && (
748 <DropdownMenuItem asChild>
749 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/plans`}>
750 <ListTree />
751 Plan work
752 </Link>
753 </DropdownMenuItem>
754 )}
755 <DropdownMenuItem asChild>
756 <Link to="/new">
757 <BookMarked />
758 New repository
759 </Link>
760 </DropdownMenuItem>
761 <DropdownMenuItem asChild>
762 <Link to="/workspaces/new">
763 <Users />
764 New workspace
765 </Link>
766 </DropdownMenuItem>
767 </DropdownMenuContent>
768 </DropdownMenu>
769 </div>
770 </header>
771 {banner}
772 <main className="grow">{children}</main>
773 </div>
774 <CommandPalette open={palette} onClose={() => setPalette(false)} commands={commands} />
775 </div>
776 );
777}