Sign in

flagon-io/g1t

public

g1t/apps/web/app/routes/repo/pull.tsx

424 lines15,690 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.

Issues and pull requests replace intents and attempts1import {
2 Bot,
3 ChevronRight,
4 FileDiff,
5 GitCommitHorizontal,
6 GitMerge,
7 MessageSquare,
8 MessagesSquare,
9 StickyNote,
10 User,
11 Wrench,
12} from "lucide-react";
13import { useEffect } from "react";
14import { Form, Link, redirect, useRevalidator } from "react-router";
15
16import type { Comparison, SessionEntry } from "@g1t/contracts";
17
18import type { Route } from "./+types/pull";
19import { DiffView } from "../../components/diff-view";
20import { Markdown } from "../../components/markdown";
21import {
22 Avatar,
23 Button,
24 CopyLine,
25 EmptyState,
26 ErrorText,
27 Textarea,
28 TimeAgo,
29} from "../../components/ui";
30import { Comments, IssueIcon, PullState } from "../../components/work";
31import { repos, work } from "../../lib/services.server";
32import { assertSameOrigin, getViewer, requireUser } from "../../lib/session.server";
33
34const REFRESH_MS = 4000;
35const EMPTY_COMPARISON: Comparison = { base: null, head: "", files: [], truncated: false };
36const TABS = ["conversation", "session", "changes"] as const;
37type Tab = (typeof TABS)[number];
38
39export function meta({ loaderData, params }: Route.MetaArgs) {
40 const title = loaderData
41 ? `${loaderData.pull.title} · Pull request #${loaderData.pull.number} · `
42 : "";
43 return [{ title: `${title}${params.owner}/${params.repo} · g1t` }];
44}
45
46export async function loader({ params, context, request }: Route.LoaderArgs) {
47 const viewer = getViewer(context);
48 const path = { namespace: params.owner, name: params.repo };
49 const number = Number(params.number);
50 const asked = new URL(request.url).searchParams.get("tab");
51 const tab: Tab = TABS.find((name) => name === asked) ?? "conversation";
52
53 const [found, repo] = await Promise.all([
54 work.getPull(path, number, viewer),
55 repos.get(path, viewer),
56 ]);
57 if (!found.ok) {
58 // Issues and pull requests share numbers; this one may be an issue.
59 const issue = await work.getIssue(path, number, viewer);
60 if (issue.ok) throw redirect(`/${params.owner}/${params.repo}/issues/${number}`);
61 throw new Response("Pull request not found.", { status: 404 });
62 }
63 const { pull } = found.value;
64 const [session, comparison] = await Promise.all([
65 tab === "session" ? work.readSession(path, number, viewer) : null,
66 tab === "changes" ? repos.compare(pull.forkRepoId, viewer, pull.mergeBase) : null,
67 ]);
68 const member = (viewer?.workspaces ?? []).some(
69 (membership) => membership.slug === params.owner,
70 );
71 return {
72 ...found.value,
73 tab,
74 session: session?.ok ? session.value : [],
75 // An empty comparison if it could not be made.
76 comparison: comparison && (comparison.ok ? comparison.value : EMPTY_COMPARISON),
77 viewer,
78 // Members of the repository's workspace can merge.
79 canMerge: member,
80 canManage: member || viewer?.id === pull.author.id,
81 defaultBranch: repo.ok ? repo.value.defaultBranch : "main",
82 };
83}
84
85export async function action({ request, params, context }: Route.ActionArgs) {
86 assertSameOrigin(request);
87 const user = requireUser(context, request);
88 const form = await request.formData();
89 const path = { namespace: params.owner, name: params.repo };
90 const number = Number(params.number);
91 const action = form.get("action");
92 const result =
93 action === "merge"
94 ? await work.mergePull(user, path, number, form.get("keepIssueOpen") === "on")
95 : action === "close"
96 ? await work.closePull(user, path, number)
97 : action === "comment"
98 ? await work.addComment(user, path, number, String(form.get("body") ?? ""))
99 : await work.readyPull(user, path, number, String(form.get("summary") ?? ""));
100 return result.ok ? null : { error: result.error.message, action };
101}
102
103function TabLink({
104 to,
105 active,
106 children,
107}: {
108 to: string;
109 active: boolean;
110 children: React.ReactNode;
111}) {
112 return (
113 <Link
114 to={to}
115 preventScrollReset
116 className={
117 "-mb-px flex items-center gap-2 border-b-2 px-1 pb-2.5 text-sm transition-colors " +
118 (active
119 ? "border-accent font-medium text-fg"
120 : "border-transparent text-muted hover:text-fg")
121 }
122 >
123 {children}
124 </Link>
125 );
126}
127
128/** One step of the session, on the timeline's rail. */
129function Entry({ entry, agent }: { entry: SessionEntry; agent: string }) {
130 const isTool = entry.kind === "tool_call" || entry.kind === "tool_result";
131 const Icon =
132 entry.kind === "prompt"
133 ? User
134 : entry.kind === "note"
135 ? StickyNote
136 : isTool
137 ? Wrench
138 : Bot;
139 return (
140 <li className="relative pl-10">
141 <span
142 className={`absolute top-0.5 left-0 flex size-7 items-center justify-center rounded-full border bg-bg ${
143 entry.kind === "prompt"
144 ? "border-accent/50 text-accent"
145 : "border-line text-faint"
146 }`}
147 >
148 <Icon size={14} />
149 </span>
150 {isTool ? (
151 <details className="group rounded-lg border border-line bg-surface">
152 <summary className="flex cursor-pointer list-none items-center gap-2 px-3 py-1.5 text-sm">
153 <ChevronRight
154 size={14}
155 className="text-faint transition-transform group-open:rotate-90"
156 />
157 <span className="font-mono text-xs text-accent">
158 {entry.tool ?? "tool"}
159 </span>
160 <span className="truncate font-mono text-xs text-muted">
161 {entry.kind === "tool_result" ? "→ " : ""}
162 {entry.text.split("\n")[0]}
163 </span>
164 </summary>
165 <pre className="overflow-x-auto border-t border-line p-3 font-mono text-xs whitespace-pre-wrap text-muted">
166 {entry.text}
167 </pre>
168 </details>
169 ) : (
170 <div>
171 <p className="text-xs font-medium text-faint">
172 {entry.kind === "prompt"
173 ? "Prompt"
174 : entry.kind === "note"
175 ? "Note"
176 : agent}
177 </p>
178 {entry.kind === "message" ? (
179 <div className="mt-1">
180 <Markdown source={entry.text} />
181 </div>
182 ) : (
183 <p
184 className={`mt-1 text-[0.9375rem] leading-relaxed wrap-break-word whitespace-pre-wrap ${
185 entry.kind === "prompt" ? "font-medium" : ""
186 }`}
187 >
188 {entry.text}
189 </p>
190 )}
191 </div>
192 )}
193 {entry.commit && (
194 <p className="mt-1.5 flex items-center gap-1 font-mono text-xs text-faint">
195 <GitCommitHorizontal size={12} />
196 {entry.commit.slice(0, 7)}
197 </p>
198 )}
199 </li>
200 );
201}
202
203export default function PullPage({ loaderData, actionData, params }: Route.ComponentProps) {
204 const {
205 pull,
206 issue,
207 comments,
208 tab,
209 session,
210 comparison,
211 viewer,
212 canMerge,
213 canManage,
214 defaultBranch,
215 } = loaderData;
216 const base = `/${params.owner}/${params.repo}`;
217 const here = `${base}/pull/${pull.number}`;
218 const remote = `https://g1t.sh/${pull.fork.namespace}/${pull.fork.name}.git`;
219 const active = pull.status === "draft" || pull.status === "open";
220
221 // Follow an agent at work without a manual reload.
222 const revalidator = useRevalidator();
223 const working = pull.status === "draft";
224 useEffect(() => {
225 if (!working) return;
226 const timer = setInterval(() => {
227 if (document.visibilityState === "visible") revalidator.revalidate();
228 }, REFRESH_MS);
229 return () => clearInterval(timer);
230 }, [working, revalidator]);
231
232 return (
233 <div className="grid gap-8 lg:grid-cols-[1fr_19rem]">
234 <div className="min-w-0">
235 <h2 className="text-2xl font-semibold tracking-tight text-balance">
236 {pull.title} <span className="font-normal text-faint">#{pull.number}</span>
237 </h2>
238 <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-muted">
239 <PullState status={pull.status} />
240 <span className="flex items-center gap-2">
241 <Avatar name={pull.author.username} size={18} />
242 <span>
243 <span className="font-medium text-fg">{pull.author.username}</span>{" "}
244 {pull.status === "merged" ? "merged" : "wants to merge"} into{" "}
245 <span className="font-mono text-fg">{defaultBranch}</span>
246 </span>
247 </span>
248 <span className="flex items-center gap-1.5 font-mono text-xs">
249 <Bot size={14} />
250 {pull.agent}
251 {pull.runtime === "hosted" && <span className="text-faint">on g1t</span>}
252 </span>
253 </div>
254
255 {issue && (
256 <Link
257 to={`${base}/issues/${issue.number}`}
258 className="mt-4 flex items-center gap-2.5 rounded-xl border border-line bg-surface px-4 py-2.5 text-sm transition-colors hover:border-line-strong"
259 >
260 <IssueIcon issue={issue} />
261 <span className="text-muted">
262 {pull.status === "merged" && issue.resolvedBy === pull.number
263 ? "Resolved"
264 : "For issue"}
265 </span>
266 <span className="truncate font-medium">{issue.title}</span>
267 <span className="text-faint">#{issue.number}</span>
268 {issue.pullCount > 1 && (
269 <span className="ml-auto shrink-0 text-xs text-faint">
270 1 of {issue.pullCount} pull requests
271 </span>
272 )}
273 </Link>
274 )}
275
276 {pull.status === "merged" && (
277 <p className="mt-4 flex items-center gap-2.5 rounded-xl border border-merged/40 bg-merged/5 px-4 py-2.5 text-sm">
278 <GitMerge size={16} className="shrink-0 text-merged" />
279 <span>
280 Merged into <span className="font-mono">{defaultBranch}</span> by{" "}
281 <span className="font-medium">{pull.mergedBy}</span>{" "}
282 {pull.mergedAt && <TimeAgo at={pull.mergedAt} />}
283 {pull.headCommit && (
284 <span className="font-mono text-muted"> · {pull.headCommit.slice(0, 7)}</span>
285 )}
286 </span>
287 </p>
288 )}
289 {pull.supersededBy != null && (
290 <p className="mt-4 rounded-xl border border-line bg-surface px-4 py-2.5 text-sm text-muted">
291 Closed because{" "}
292 <Link
293 to={`${base}/pull/${pull.supersededBy}`}
294 className="font-medium text-fg hover:underline"
295 >
296 #{pull.supersededBy}
297 </Link>{" "}
298 was merged for this issue instead.
299 </p>
300 )}
301
302 <nav className="mt-8 flex gap-6 border-b border-line">
303 <TabLink to={here} active={tab === "conversation"}>
304 <MessageSquare size={15} />
305 Conversation
306 </TabLink>
307 <TabLink to={here + "?tab=session"} active={tab === "session"}>
308 <MessagesSquare size={15} />
309 Session
310 </TabLink>
311 <TabLink to={here + "?tab=changes"} active={tab === "changes"}>
312 <FileDiff size={15} />
313 Changes
314 </TabLink>
315 </nav>
316 <div className="mt-5">
317 {comparison ? (
318 <DiffView comparison={comparison} />
319 ) : tab === "session" ? (
320 session.length === 0 ? (
321 <EmptyState title="Nothing recorded yet">
322 The agent's prompts, reasoning and tool calls appear here as it
323 works.
324 </EmptyState>
325 ) : (
326 <ol className="relative space-y-5 before:absolute before:top-2 before:bottom-2 before:left-3.25 before:w-px before:bg-line">
327 {session.map((entry) => (
328 <Entry key={entry.seq} entry={entry} agent={pull.agent} />
329 ))}
330 </ol>
331 )
332 ) : (
333 <div className="space-y-4">
334 {pull.body ? (
335 <section className="rounded-xl border border-line bg-surface p-5">
336 <Markdown source={pull.body} />
337 </section>
338 ) : (
339 <p className="rounded-xl border border-dashed border-line px-5 py-4 text-sm text-muted">
340 {working
341 ? "No description yet. It is written when the pull request is marked ready for review."
342 : "No description."}
343 </p>
344 )}
345 <Comments comments={comments} canComment={Boolean(viewer)} />
346 {actionData?.action === "comment" && <ErrorText>{actionData.error}</ErrorText>}
347 </div>
348 )}
349 </div>
350 </div>
351
352 <aside className="space-y-6">
353 {canMerge && pull.status === "open" && (
354 <section className="rounded-xl border border-accent/30 bg-accent/5 p-4">
355 <h3 className="text-sm font-medium">Merge this pull request</h3>
356 <p className="mt-1 text-xs text-muted">
357 Lands its commits on {defaultBranch}.
358 {issue?.state === "open" &&
359 ` Closes issue #${issue.number}, and any other pull requests still open for it.`}
360 </p>
361 <Form method="post" className="mt-3 space-y-3">
362 {issue?.state === "open" && (
363 <label className="flex items-start gap-2 text-xs text-muted">
364 <input type="checkbox" name="keepIssueOpen" className="mt-0.5 accent-accent" />
365 <span>
366 Keep #{issue.number} open. This is only part of the work.
367 </span>
368 </label>
369 )}
370 <div className="*:w-full">
371 <Button variant="accent" type="submit" name="action" value="merge">
372 <GitMerge size={15} />
373 Merge into {defaultBranch}
374 </Button>
375 </div>
376 </Form>
377 {actionData?.action === "merge" && <ErrorText>{actionData.error}</ErrorText>}
378 </section>
379 )}
380
381 {canManage && active && (
382 <section className="rounded-xl border border-line bg-surface p-4">
383 <h3 className="text-sm font-medium">
384 {pull.status === "draft" ? "Ready for review" : "Update description"}
385 </h3>
386 <Form method="post" className="mt-3 space-y-2">
387 <Textarea
388 name="summary"
389 rows={4}
390 placeholder="What changed and why"
391 defaultValue={pull.body ?? ""}
392 />
393 <div className="flex flex-wrap gap-2">
394 <Button type="submit">
395 {pull.status === "draft" ? "Mark ready" : "Save"}
396 </Button>
397 <Button variant="quiet" type="submit" name="action" value="close">
398 Close pull request
399 </Button>
400 </div>
401 </Form>
402 {actionData && actionData.action !== "merge" && actionData.action !== "comment" && (
403 <ErrorText>{actionData.error}</ErrorText>
404 )}
405 </section>
406 )}
407
408 <section>
409 <h3 className="text-sm font-medium">Working copy</h3>
410 <p className="mt-1 text-xs text-muted">
411 This fork belongs to the pull request. Pushes to it show up here.
412 </p>
413 <div className="mt-2">
414 <CopyLine text={`git clone ${remote}`} />
415 </div>
416 <p className="mt-3 flex items-center gap-1.5 font-mono text-xs text-faint">
417 <GitCommitHorizontal size={13} />
418 {pull.headCommit?.slice(0, 12) ?? "no commits pushed yet"}
419 </p>
420 </section>
421 </aside>
422 </div>
423 );
424}