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/routes/repo/commit.tsx

200 lines8,666 bytesCodeBlame
1import { Check, Copy, GitCommitHorizontal, GitPullRequest, MessagesSquare, Sparkles } from "lucide-react";
2import { Suspense, useState } from "react";
3import { Await, Link, data, redirect } from "react-router";
4
5import type { Comparison, Pull } from "@g1t/contracts";
6
7import { parseCommitMessage } from "../../lib/commit-message";
8import type { Route } from "./+types/commit";
9import { page } from "../../lib/meta";
10import { DiffView } from "../../components/diff-view";
11import { Avatar, TimeAgo } from "../../components/ui";
12import { immutable } from "../../lib/immutable.server";
13import { pullForCommit } from "../../lib/provenance.server";
14import { repos } from "../../lib/services.server";
15import { getViewer, unwrap } from "../../lib/session.server";
16
17export function headers({ loaderHeaders }: Route.HeadersArgs) {
18 return { "Server-Timing": loaderHeaders.get("Server-Timing") ?? "" };
19}
20
21export function meta({ loaderData, params, ...args }: Route.MetaArgs) {
22 const subject = loaderData?.commit.message.split("\n")[0];
23 return page(args, {
24 title: `${subject ? `${subject} · ` : ""}${params.hash.slice(0, 7)} · ${params.owner}/${params.repo} · g1t`,
25 });
26}
27
28/** How far back a short hash is looked for. */
29const SHORT_HASH_SEARCH = 300;
30
31export async function loader({ params, context }: Route.LoaderArgs) {
32 const viewer = getViewer(context);
33 const path = { namespace: params.owner, name: params.repo };
34 const hash = params.hash.toLowerCase();
35 if (!/^[0-9a-f]{4,40}$/.test(hash)) throw data(null, { status: 404 });
36 if (hash.length < 40) {
37 // A short hash: find the commit it names and go to its full address.
38 const log = await repos.log(path, viewer, null, SHORT_HASH_SEARCH);
39 const matches = log.ok ? log.value.filter((commit) => commit.hash.startsWith(hash)) : [];
40 if (matches.length === 1) throw redirect(`/${params.owner}/${params.repo}/commit/${matches[0]!.hash}`);
41 throw new Response("Commit not found.", { status: 404 });
42 }
43 const started = Date.now();
44 const found = unwrap(await repos.get(path, viewer));
45 // The viewer may read the repository, and a commit never changes: after
46 // the first visit it and its diff come from the cache.
47 let cached = true;
48 const loaded = await immutable(`commit:${found.id}:${hash}`, async () => {
49 cached = false;
50 // At once: a commit is compared with its first parent, so the diff
51 // does not wait for the commit.
52 const [log, compared] = await Promise.all([
53 repos.log(path, viewer, hash, 1),
54 repos.compare(found.id, viewer, null, hash),
55 ]);
56 const commit = log.ok ? log.value[0] : undefined;
57 if (!commit) return null;
58 const comparison: Comparison = compared.ok
59 ? compared.value
60 : { base: null, head: commit.hash, files: [], truncated: false };
61 return { commit, comparison };
62 });
63 if (!loaded) throw new Response("Commit not found.", { status: 404 });
64 return data(
65 {
66 ...loaded,
67 // Streamed: the page shows the commit while this is worked out.
68 pull: pullForCommit(path, viewer, loaded.commit.hash),
69 },
70 { headers: { "Server-Timing": `load;dur=${Date.now() - started};desc="${cached ? "cached" : "read"}"` } },
71 );
72}
73
74function CopyHash({ hash }: { hash: string }) {
75 const [copied, setCopied] = useState(false);
76 return (
77 <button
78 type="button"
79 onClick={() => {
80 void navigator.clipboard?.writeText(hash).then(() => {
81 setCopied(true);
82 setTimeout(() => setCopied(false), 1500);
83 });
84 }}
85 className="flex items-center gap-1.5 rounded-md border border-line bg-bg px-2 py-1 font-mono text-xs text-muted transition-colors hover:border-line-strong hover:text-fg"
86 aria-label="Copy the full hash"
87 >
88 {hash.slice(0, 12)}
89 {copied ? <Check size={12} className="text-accent" /> : <Copy size={12} />}
90 </button>
91 );
92}
93
94/** The pull request a commit arrived in, once it has been worked out. */
95function MergedIn({ base, pull }: { base: string; pull: Pull }) {
96 const byAgent = pull.runtime === "hosted";
97 return (
98 <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-line px-5 py-3 text-sm">
99 <span className="flex items-center gap-2">
100 <GitPullRequest size={15} className="text-merged" />
101 <span className="text-muted">Merged in</span>
102 <Link to={`${base}/pull/${pull.number}`} className="font-medium hover:underline">
103 {pull.title} <span className="font-normal text-faint">#{pull.number}</span>
104 </Link>
105 </span>
106 {byAgent && (
107 <span className="flex items-center gap-1.5 rounded-full border border-merged/30 bg-merged/10 px-2 py-0.5 text-xs text-merged">
108 <Sparkles size={12} />
109 written by {pull.agent}
110 </span>
111 )}
112 <Link
113 to={`${base}/pull/${pull.number}?tab=session`}
114 className="ml-auto flex items-center gap-1.5 rounded-md border border-line px-2.5 py-1 text-xs text-muted transition-colors hover:border-line-strong hover:text-fg"
115 >
116 <MessagesSquare size={13} />
117 Why it was written
118 </Link>
119 </div>
120 );
121}
122
123export default function CommitPage({ loaderData, params }: Route.ComponentProps) {
124 const { commit, pull, comparison } = loaderData;
125 const base = `/${params.owner}/${params.repo}`;
126 const { subject, body, coAuthors, trailers } = parseCommitMessage(commit.message);
127 return (
128 <div>
129 <section className="overflow-hidden rounded-xl border border-line bg-surface">
130 <div className="p-5">
131 <p className="flex items-center gap-2 text-xs text-faint">
132 <GitCommitHorizontal size={14} />
133 <Link to={`${base}/commits`} className="hover:text-fg">
134 Commit
135 </Link>
136 </p>
137 <h2 className="mt-2 text-xl font-semibold tracking-tight text-balance">{subject}</h2>
138 {body && <p className="mt-3 max-w-3xl text-sm whitespace-pre-wrap text-muted">{body}</p>}
139 {trailers.length > 0 && (
140 <dl className="mt-3 space-y-0.5 font-mono text-xs text-faint">
141 {trailers.map((trailer) => (
142 <div key={`${trailer.key}:${trailer.value}`}>
143 <dt className="inline">{trailer.key}:</dt> <dd className="inline text-muted">{trailer.value}</dd>
144 </div>
145 ))}
146 </dl>
147 )}
148 </div>
149 <div className="flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-line bg-bg/40 px-5 py-3 text-sm">
150 <span className="flex items-center gap-2">
151 <Avatar name={commit.author.name} size={20} />
152 <span className="font-medium">{commit.author.name}</span>
153 {coAuthors.length > 0 && (
154 <span className="text-muted">
155 and <span className="font-medium text-fg">{coAuthors.join(", ")}</span>
156 </span>
157 )}
158 <span className="text-muted">
159 committed <TimeAgo at={commit.authoredAt} />
160 </span>
161 </span>
162 <span className="flex items-center gap-2 text-xs text-muted">
163 {commit.parents.length === 0 ? (
164 "The first commit"
165 ) : (
166 <>
167 {commit.parents.length === 1 ? "Parent" : "Parents"}
168 {commit.parents.map((parent) => (
169 <Link
170 key={parent}
171 to={`${base}/commit/${parent}`}
172 prefetch="intent"
173 className="font-mono text-fg/80 hover:text-accent hover:underline"
174 >
175 {parent.slice(0, 7)}
176 </Link>
177 ))}
178 </>
179 )}
180 </span>
181 <span className="ml-auto flex items-center gap-2">
182 <Link
183 to={`${base}/tree/${commit.hash}/`}
184 className="rounded-md px-2 py-1 text-xs text-muted hover:bg-raised hover:text-fg"
185 >
186 Browse files
187 </Link>
188 <CopyHash hash={commit.hash} />
189 </span>
190 </div>
191 <Suspense fallback={<div className="h-12 animate-pulse border-t border-line bg-raised/30" />}>
192 <Await resolve={pull}>{(pull) => (pull ? <MergedIn base={base} pull={pull} /> : null)}</Await>
193 </Suspense>
194 </section>
195 <div className="mt-6">
196 <DiffView comparison={comparison} empty="This commit changes no files." fileBase={`${base}/blob/${commit.hash}`} />
197 </div>
198 </div>
199 );
200}