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.
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 1 | import { ArrowLeft, GitCommitHorizontal, GitPullRequest } from "lucide-react"; |
| 2 | import { Form, Link } from "react-router"; | |
| 3 | ||
| 4 | import type { Comparison } from "@g1t/contracts"; | |
| 5 | ||
| 6 | import type { Route } from "./+types/compare"; | |
| 7 | import { DiffView } from "../../components/diff-view"; | |
| Merge commit authors and hovercards: commits show their accounts, every name opens a card (repos 0016) | 8 | import { CommitAvatars, CommitNames } from "../../components/commit-person"; |
| 9 | import { ButtonLink, EmptyState, TimeAgo } from "../../components/ui"; | |
| Merge branch 'worktree-agent-ae1299e92e4462012' | 10 | import { Hint } from "../../components/ui/hint"; |
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 11 | import { page } from "../../lib/meta"; |
| Merge commit authors and hovercards: commits show their accounts, every name opens a card (repos 0016) | 12 | import { showCommits } from "../../lib/commit-people.server"; |
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 13 | import { repos } from "../../lib/services.server"; |
| 14 | import { getViewer, unwrap } from "../../lib/session.server"; | |
| 15 | ||
| 16 | /** How far back each side's history is read to find what head has that base does not. */ | |
| 17 | const HEAD_DEPTH = 100; | |
| 18 | const BASE_DEPTH = 300; | |
| 19 | ||
| 20 | export function meta({ params, ...args }: Route.MetaArgs) { | |
| 21 | const range = params["*"] ? ` ${params["*"]}` : ""; | |
| 22 | return page(args, { title: `Compare${range} · ${params.owner}/${params.repo} · g1t` }); | |
| 23 | } | |
| 24 | ||
| 25 | /** `main...feature` into its two sides; either may be missing. */ | |
| 26 | function sides(range: string): { base: string | null; head: string | null } { | |
| 27 | const at = range.indexOf("..."); | |
| 28 | if (at === -1) return { base: null, head: range || null }; | |
| 29 | return { base: range.slice(0, at) || null, head: range.slice(at + 3) || null }; | |
| 30 | } | |
| 31 | ||
| 32 | export async function loader({ params, context, request }: Route.LoaderArgs) { | |
| 33 | const path = { namespace: params.owner, name: params.repo }; | |
| 34 | const viewer = getViewer(context); | |
| 35 | const url = new URL(request.url); | |
| 36 | // The pickers submit as ?base=&head=; the address keeps base...head. | |
| 37 | if (url.searchParams.has("base") || url.searchParams.has("head")) { | |
| 38 | const base = url.searchParams.get("base") ?? ""; | |
| 39 | const head = url.searchParams.get("head") ?? ""; | |
| 40 | return Response.redirect(new URL(`/${params.owner}/${params.repo}/compare/${base}...${head}`, url).toString(), 302); | |
| 41 | } | |
| 42 | const [repo, list] = await Promise.all([repos.get(path, viewer), repos.branches(path, viewer)]); | |
| 43 | const found = unwrap(repo); | |
| 44 | const branches = unwrap(list) | |
| 45 | .map((branch) => branch.name) | |
| 46 | .filter((name) => !name.startsWith("g1t-queue/")); | |
| 47 | const asked = sides(params["*"] ?? ""); | |
| 48 | const base = asked.base ?? found.defaultBranch; | |
| 49 | const head = asked.head; | |
| 50 | if (!head || head === base) return { base, head, branches, comparison: null, commits: [], same: head === base }; | |
| Compare diffs from where the two branches last agreed, as a pull request would | 51 | const [headLog, baseLog] = await Promise.all([repos.log(path, viewer, head, HEAD_DEPTH), repos.log(path, viewer, base, BASE_DEPTH)]); |
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 52 | if (!headLog.ok || headLog.value.length === 0) throw new Response(`There is no branch, tag or commit named ${head}.`, { status: 404 }); |
| 53 | // What head has that base does not: its history down to the first commit base also has. | |
| 54 | const onBase = new Set(baseLog.ok ? baseLog.value.map((commit) => commit.hash) : []); | |
| 55 | const shared = headLog.value.findIndex((commit) => onBase.has(commit.hash)); | |
| Merge commit authors and hovercards: commits show their accounts, every name opens a card (repos 0016) | 56 | // With their people, in one identity call. |
| 57 | const commits = (await showCommits(shared === -1 ? headLog.value : headLog.value.slice(0, shared))).map((commit) => ({ | |
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 58 | hash: commit.hash, |
| 59 | message: commit.message.split("\n")[0] ?? "", | |
| Merge commit authors and hovercards: commits show their accounts, every name opens a card (repos 0016) | 60 | author: commit.author, |
| 61 | coAuthors: commit.coAuthors, | |
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 62 | at: commit.authoredAt, |
| 63 | })); | |
| Compare diffs from where the two branches last agreed, as a pull request would | 64 | // The changes from where the two last agreed, as a pull request would |
| 65 | // bring them: what base gained since is not head taking it away. When | |
| 66 | // that point is past what was read, the two tips are compared. | |
| 67 | const mergeBase = shared === -1 ? base : headLog.value[shared]!.hash; | |
| 68 | const compared = await repos.compare(found.id, viewer, mergeBase, head); | |
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 69 | const comparison: Comparison | null = compared.ok ? compared.value : null; |
| 70 | return { base, head, branches, comparison, commits, same: false }; | |
| 71 | } | |
| 72 | ||
| 73 | function RefPicker({ name, label, value, branches }: { name: string; label: string; value: string | null; branches: string[] }) { | |
| 74 | const options = value && !branches.includes(value) ? [value, ...branches] : branches; | |
| 75 | return ( | |
| 76 | <label className="inline-flex items-center gap-2 text-sm"> | |
| 77 | <span className="text-muted">{label}</span> | |
| 78 | <select | |
| 79 | name={name} | |
| 80 | defaultValue={value ?? ""} | |
| 81 | className="h-8 max-w-56 rounded-md border border-line bg-surface px-2 font-mono text-[0.8125rem] outline-none hover:border-line-strong focus:border-accent-dim" | |
| 82 | > | |
| 83 | {value == null && <option value="">Choose a branch</option>} | |
| 84 | {options.map((option) => ( | |
| 85 | <option key={option} value={option}> | |
| 86 | {option} | |
| 87 | </option> | |
| 88 | ))} | |
| 89 | </select> | |
| 90 | </label> | |
| 91 | ); | |
| 92 | } | |
| 93 | ||
| 94 | export default function Compare({ loaderData, params }: Route.ComponentProps) { | |
| 95 | const { base, head, branches, comparison, commits, same } = loaderData; | |
| 96 | const repoBase = `/${params.owner}/${params.repo}`; | |
| 97 | return ( | |
| 98 | <div className="space-y-5"> | |
| 99 | <div> | |
| 100 | <h2 className="text-lg font-semibold tracking-tight">Compare changes</h2> | |
| 101 | <p className="mt-1 text-sm text-muted">Choose two branches to see what one has that the other does not, then open a pull request for it.</p> | |
| 102 | </div> | |
| 103 | <Form method="get" className="flex flex-wrap items-center gap-3 rounded-xl border border-line bg-surface px-4 py-3"> | |
| 104 | <RefPicker name="base" label="base" value={base} branches={branches} /> | |
| 105 | <ArrowLeft size={14} className="text-faint" aria-hidden="true" /> | |
| 106 | <RefPicker name="head" label="compare" value={head} branches={branches} /> | |
| 107 | <button | |
| 108 | type="submit" | |
| 109 | className="h-8 rounded-md border border-line px-3 text-sm text-fg/90 transition-colors hover:border-line-strong hover:bg-raised" | |
| 110 | > | |
| 111 | Compare | |
| 112 | </button> | |
| 113 | {head && !same && commits.length > 0 && ( | |
| Teams and CODEOWNERS, labels and milestones, dependency updates, the security suite, and a clearer top bar | 114 | <ButtonLink |
| 115 | to={`${repoBase}/pulls/new?branch=${encodeURIComponent(head)}&base=${encodeURIComponent(base)}`} | |
| 116 | variant="accent" | |
| 117 | > | |
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 118 | <GitPullRequest size={15} /> |
| 119 | Open a pull request | |
| 120 | </ButtonLink> | |
| 121 | )} | |
| 122 | </Form> | |
| 123 | ||
| 124 | {!head ? ( | |
| 125 | <EmptyState title="Pick a branch to compare">Its commits and changes against {base} show here.</EmptyState> | |
| 126 | ) : same ? ( | |
| 127 | <EmptyState title="Nothing to compare">Both sides are {base}. Choose another branch to compare with it.</EmptyState> | |
| 128 | ) : commits.length === 0 ? ( | |
| 129 | <EmptyState title={`${base} has everything ${head} has`}>There is nothing on {head} to bring into {base}.</EmptyState> | |
| 130 | ) : ( | |
| 131 | <> | |
| 132 | <section> | |
| 133 | <h3 className="mb-2 text-sm font-medium text-muted"> | |
| 134 | {commits.length === HEAD_DEPTH ? `${HEAD_DEPTH}+` : commits.length} {commits.length === 1 ? "commit" : "commits"} | |
| 135 | </h3> | |
| 136 | <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface"> | |
| 137 | {commits.map((commit) => ( | |
| 138 | <li key={commit.hash} className="flex items-center gap-3 px-4 py-2.5 text-sm"> | |
| 139 | <GitCommitHorizontal size={15} className="shrink-0 text-faint" /> | |
| Merge commit authors and hovercards: commits show their accounts, every name opens a card (repos 0016) | 140 | <CommitAvatars commit={commit} size={16} max={2} /> |
| Merge branch 'worktree-agent-ae1299e92e4462012' | 141 | <Hint label={commit.message}> |
| 142 | <Link to={`${repoBase}/commit/${commit.hash}`} className="min-w-0 grow truncate hover:text-accent"> | |
| 143 | {commit.message} | |
| 144 | </Link> | |
| 145 | </Hint> | |
| Merge commit authors and hovercards: commits show their accounts, every name opens a card (repos 0016) | 146 | <span className="hidden shrink-0 text-xs text-muted sm:inline"> |
| 147 | <CommitNames commit={commit} className="hover:text-fg" /> | |
| 148 | </span> | |
| Compare: any two branches, the commits one has that the other does not, and the diff, with Open a pull request | 149 | <Link to={`${repoBase}/commit/${commit.hash}`} className="shrink-0 font-mono text-xs text-faint hover:text-fg"> |
| 150 | {commit.hash.slice(0, 7)} | |
| 151 | </Link> | |
| 152 | <span className="shrink-0 text-xs text-faint"> | |
| 153 | <TimeAgo at={commit.at} /> | |
| 154 | </span> | |
| 155 | </li> | |
| 156 | ))} | |
| 157 | </ul> | |
| 158 | </section> | |
| 159 | {comparison ? ( | |
| 160 | <DiffView comparison={comparison} fileBase={`${repoBase}/blob/${encodeURIComponent(head)}`} empty="The two sides have the same files." /> | |
| 161 | ) : ( | |
| 162 | <p className="text-sm text-muted">The changes could not be read just now. The commits above are what {head} adds.</p> | |
| 163 | )} | |
| 164 | </> | |
| 165 | )} | |
| 166 | </div> | |
| 167 | ); | |
| 168 | } |
This file's history is long; its oldest lines are credited to the oldest commit read.