flagon-io/g1t

public

web: issues, pull requests, actions and deployments buttons say they are working until the page shows the change; a re-run shows its new log, a refused invitation reloads beside its reason

syntaqxcommitted 3d agoParent9c5afb5Browse files

5	5		* `agents.json` resource route, so every place behaves the same.
6	6		*/
7	7		import { Bot, CircleSlash, Clock, Coins, Gauge, Loader2, MessageSquare, OctagonX, Square, TriangleAlert } from "lucide-react";
8		−	import { type ReactNode, useEffect, useMemo, useState } from "react";
	8	+	import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
9	9		import { Link, useFetcher } from "react-router";
10	10		import { useRefreshWhile } from "../lib/refresh";
11	11
⋯
23	23
24	24		import { RunAudit } from "./audit";
25	25		import { STAGE_LABEL, StageDots } from "./lifecycle";
26		−	import { Avatar, TimeAgo } from "./ui";
	26	+	import { Avatar, SubmitButton, TimeAgo } from "./ui";
27	27		import {
28	28		AlertDialog,
29	29		AlertDialogAction,
⋯
157	157		export function MessageRun({ run }: { run: AgentRun }) {
158	158		const fetcher = useFetcher<ActionResult>();
159	159		const [open, setOpen] = useState(false);
	160	+	const form = useRef<HTMLFormElement>(null);
	161	+	// Sent: the box empties, and the notice below says where it went.
	162	+	useEffect(() => {
	163	+	if (fetcher.state === "idle" && fetcher.data?.ok) form.current?.reset();
	164	+	}, [fetcher.state, fetcher.data]);
160	165		const live = takesMessages(run.kind) && isActiveRun(run.status);
161	166		if (run.number == null) return null;
162	167		return (
⋯
174	179		: "This run does not read messages while it works. Your message waits on the pull request and is given to the agent's next run there."}
175	180		</DialogDescription>
176	181		</DialogHeader>
177		−	<fetcher.Form method="post" action={actionUrl(run)} className="space-y-3">
	182	+	<fetcher.Form ref={form} method="post" action={actionUrl(run)} className="space-y-3">
178	183		<input type="hidden" name="intent" value="message" />
179	184		<input type="hidden" name="number" value={run.number} />
180	185		<textarea
⋯
189	194		{fetcher.data?.error && <p className="text-sm text-danger">{fetcher.data.error}</p>}
190	195		{fetcher.data?.ok && fetcher.data.notice && <p className="text-sm text-accent">{fetcher.data.notice}</p>}
191	196		<div className="flex justify-end">
192		−	<button
193		−	type="submit"
194		−	disabled={fetcher.state !== "idle"}
	197	+	<SubmitButton
	198	+	fetcher={fetcher}
	199	+	pending="Sending…"
195	200		className="inline-flex items-center gap-2 rounded-md bg-fg px-3.5 py-2 text-sm font-medium text-bg hover:bg-white disabled:opacity-50"
196	201		>
197		−	{fetcher.state !== "idle" ? "Sending…" : "Send"}
198		−	</button>
	202	+	Send
	203	+	</SubmitButton>
199	204		</div>
200	205		</fetcher.Form>
201	206		</DialogContent>

1	1		import { AlertTriangle, ChevronRight, Cloud, Download, GitBranch, GitCommitHorizontal, Info, Package, RotateCw, ServerCog, Square, XCircle } from "lucide-react";
2	2		import { type ReactNode } from "react";
3		−	import { Form, Link, useLoaderData, useNavigation, useSearchParams } from "react-router";
	3	+	import { Form, Link, useLoaderData, useSearchParams } from "react-router";
4	4
5	5		import type { Annotation, Job, StepState } from "@g1t/contracts";
6	6
7	7		import type { Route } from "./+types/actions-run";
8	8		import { page } from "../../lib/meta";
9	9		import { LogText, Notes, StatusIcon, duration, shortRef, standingWord, useJobLog } from "../../components/actions";
10		−	import { Button, ErrorText, TimeAgo } from "../../components/ui";
	10	+	import { ErrorText, SubmitButton, TimeAgo, usePending } from "../../components/ui";
11	11		import { listArtifacts } from "../../lib/artifacts.server";
12	12		import { actions } from "../../lib/services.server";
13	13		import { assertSameOrigin, getViewer, requireUser, roleIn, unwrap } from "../../lib/session.server";
⋯
184	184		const { run, jobs, notes } = detail;
185	185		const base = `/${params.owner}/${params.repo}`;
186	186		const [search] = useSearchParams();
187		−	const busy = useNavigation().state === "submitting";
	187	+	// One of the run's buttons is working: the others wait for it.
	188	+	const busy = usePending();
188	189		const live = run.status !== "completed";
189	190		useRefreshWhile(live, 2500);
190	191
⋯
211	212		{member && !run.error && (
212	213		<Form method="post" className="flex gap-2">
213	214		{live ? (
214		−	<Button type="submit" name="intent" value="cancel" variant="quiet" disabled={busy}>
	215	+	<SubmitButton name="intent" value="cancel" variant="quiet" disabled={busy} pending="Cancelling…">
215	216		<Square size={13} />
216	217		Cancel run
217		−	</Button>
	218	+	</SubmitButton>
218	219		) : (
219	220		<>
220	221		{anyFailed && (
221		−	<Button type="submit" name="intent" value="rerun-failed" variant="quiet" disabled={busy}>
	222	+	<SubmitButton name="intent" value="rerun-failed" variant="quiet" disabled={busy} pending="Re-running…">
222	223		<RotateCw size={13} />
223	224		Re-run failed jobs
224		−	</Button>
	225	+	</SubmitButton>
225	226		)}
226		−	<Button type="submit" name="intent" value="rerun" variant="quiet" disabled={busy}>
	227	+	<SubmitButton name="intent" value="rerun" variant="quiet" disabled={busy} pending="Re-running…">
227	228		<RotateCw size={13} />
228	229		Re-run all jobs
229		−	</Button>
	230	+	</SubmitButton>
230	231		</>
231	232		)}
232	233		</Form>
⋯
307	308		</Link>
308	309		))}
309	310		</nav>
310		−	{selected && <JobView key={selected.id} job={selected} base={base} />}
	311	+	{/* Run again, a job keeps its id but its log starts afresh. */}
	312	+	{selected && <JobView key={`${selected.id}:${run.attempt}`} job={selected} base={base} />}
311	313		</div>
312	314		)}
313	315		</div>

1	1		import { AlertTriangle, FileCode2, GitBranch, Play, PlayCircle } from "lucide-react";
2		−	import { useState } from "react";
3		−	import { Form, Link, useNavigation, useSearchParams } from "react-router";
	2	+	import { useEffect, useRef, useState } from "react";
	3	+	import { Form, Link, useSearchParams } from "react-router";
4	4
5	5		import type { DispatchInput, Workflow, WorkflowRun } from "@g1t/contracts";
6	6
⋯
8	8		import { page } from "../../lib/meta";
9	9		import { Notes, StatusIcon, duration, shortRef } from "../../components/actions";
10	10		import { AddCiPrompt } from "../../components/add-ci";
11		−	import { Button, ComputeNote, EmptyState, ErrorText, TimeAgo } from "../../components/ui";
	11	+	import { Button, ComputeNote, EmptyState, ErrorText, SubmitButton, TimeAgo, usePending } from "../../components/ui";
12	12		import { CheckboxOption } from "../../components/ui/checkbox";
13	13		import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select";
14	14		import { computeNoteFor } from "../../lib/compute.server";
⋯
178	178
179	179		function RunWorkflow({ workflow }: { workflow: Workflow }) {
180	180		const [open, setOpen] = useState(false);
181		−	const busy = useNavigation().state === "submitting";
	181	+	// Open, saying it is starting, until the run shows below or the error does.
	182	+	const running = usePending({ intent: "dispatch", workflow: workflow.id });
	183	+	const was = useRef(false);
	184	+	useEffect(() => {
	185	+	if (was.current && !running) setOpen(false);
	186	+	was.current = running;
	187	+	}, [running]);
182	188		const inputs = Object.entries(workflow.dispatch ?? {});
183	189		const booleans = inputs.filter(([, spec]) => spec.type === "boolean").map(([name]) => name);
184	190		return (
⋯
190	196		{open && (
191	197		<Form
192	198		method="post"
193		−	onSubmit={() => setOpen(false)}
194	199		className="absolute right-0 z-20 mt-2 w-80 space-y-3 rounded-xl border border-line bg-surface p-4 shadow-xl"
195	200		>
	201	+	<input type="hidden" name="intent" value="dispatch" />
196	202		<input type="hidden" name="workflow" value={workflow.id} />
197	203		<input type="hidden" name="booleans" value={booleans.join(",")} />
198	204		<label className="block">
⋯
207	213		{inputs.map(([name, spec]) => (
208	214		<InputField key={name} name={name} spec={spec} />
209	215		))}
210		−	<Button type="submit" disabled={busy}>
	216	+	<SubmitButton match={{ intent: "dispatch", workflow: workflow.id }} pending="Starting…">
211	217		<PlayCircle size={14} />
212	218		Run
213		−	</Button>
	219	+	</SubmitButton>
214	220		</Form>
215	221		)}
216	222		</div>
⋯
218	224		}
219	225
220	226		function WorkflowHeader({ workflow, base, member, manage }: { workflow: Workflow; base: string; member: boolean; manage: boolean }) {
221		−	const busy = useNavigation().state === "submitting";
222	227		return (
223	228		<div className="space-y-4">
224	229		<div className="flex flex-wrap items-start justify-between gap-3">
⋯
239	244		<input type="hidden" name="intent" value="toggle" />
240	245		<input type="hidden" name="workflow" value={workflow.id} />
241	246		<input type="hidden" name="enabled" value={workflow.state === "active" ? "false" : "true"} />
242		−	<Button type="submit" variant="quiet" disabled={busy}>
	247	+	<SubmitButton
	248	+	variant="quiet"
	249	+	match={{ intent: "toggle", workflow: workflow.id }}
	250	+	pending={workflow.state === "active" ? "Turning off…" : "Turning on…"}
	251	+	>
243	252		{workflow.state === "active" ? "Turn off" : "Turn on"}
244		−	</Button>
	253	+	</SubmitButton>
245	254		</Form>}
246	255		</div>
247	256		)}

1	1		import { ExternalLink, Globe, Rocket, RotateCw, Trash2 } from "lucide-react";
2	2		import type { ReactNode } from "react";
3		−	import { Form, Link, useNavigation } from "react-router";
	3	+	import { Form, Link } from "react-router";
4	4
5	5		import type { Deployment, FeatureState } from "@g1t/contracts";
6	6
⋯
8	8
9	9		import type { Route } from "./+types/deployments";
10	10		import { page } from "../../lib/meta";
11		−	import { Button, ButtonLink, ComputeNote, EmptyState, ErrorText, TimeAgo } from "../../components/ui";
	11	+	import { ButtonLink, ComputeNote, EmptyState, ErrorText, SubmitButton, TimeAgo } from "../../components/ui";
12	12		import { computeNoteFor } from "../../lib/compute.server";
13	13		import { billing, deployments, projects } from "../../lib/services.server";
14	14		import { assertSameOrigin, getViewer, requireUser, unwrap } from "../../lib/session.server";
⋯
72	72
73	73		export default function RepoDeployments({ loaderData, actionData, params }: Route.ComponentProps) {
74	74		const { settings, deployments: builds, live, plan, can } = loaderData;
75		−	const busy = useNavigation().state === "submitting";
76	75		const base = `/${params.owner}/${params.repo}`;
77	76		const production = live.find((app) => app.kind === "production");
78	77		const previews = live.filter((app) => app.kind === "preview");
⋯
132	131		</p>
133	132		) : (
134	133		<Form method="post" className="mt-4">
135		−	<Button variant="accent" type="submit" name="intent" value="enable" disabled={busy \|\| !can.manage_integrations} title={whyNot(can, "manage_integrations")}>
	134	+	<SubmitButton
	135	+	variant="accent"
	136	+	name="intent"
	137	+	value="enable"
	138	+	pending="Turning on…"
	139	+	disabled={!can.manage_integrations}
	140	+	title={whyNot(can, "manage_integrations")}
	141	+	>
136	142		<Rocket size={14} />
137	143		Turn on deployments
138		−	</Button>
	144	+	</SubmitButton>
139	145		</Form>
140	146		)}
141	147		</section>
⋯
148	154		app={production}
149	155		off={!settings.production}
150	156		actions={
151		−	can.run ? <AppActions branch={null} up={!!production} busy={busy} /> : null
	157	+	can.run ? <AppActions branch={null} up={!!production} /> : null
152	158		}
153	159		/>
154	160		<div className="rounded-xl border border-line bg-surface p-5">
⋯
176	182		{host(app.url)}
177	183		</a>
178	184		<span className="ml-auto shrink-0">
179		−	{can.run && <AppActions branch={app.branch} up busy={busy} compact />}
	185	+	{can.run && <AppActions branch={app.branch} up compact />}
180	186		</span>
181	187		</li>
182	188		))}
⋯
283	289		);
284	290		}
285	291
286		−	function AppActions({ branch, up, busy, compact }: { branch: string \| null; up: boolean; busy: boolean; compact?: boolean }) {
	292	+	function AppActions({ branch, up, compact }: { branch: string \| null; up: boolean; compact?: boolean }) {
	293	+	// Which app's buttons say they are working: production has no branch.
	294	+	const app = branch ?? "production";
287	295		return (
288	296		<Form method="post" className="flex items-center gap-2">
289	297		{branch != null && <input type="hidden" name="branch" value={branch} />}
290		−	<Button variant="quiet" type="submit" name="intent" value="redeploy" disabled={busy} title="Build again from the current head">
	298	+	<input type="hidden" name="app" value={app} />
	299	+	<SubmitButton
	300	+	variant="quiet"
	301	+	name="intent"
	302	+	value="redeploy"
	303	+	match={{ app }}
	304	+	icon={compact}
	305	+	pending="Redeploying…"
	306	+	title="Build again from the current head"
	307	+	>
291	308		<RotateCw size={13} />
292	309		{!compact && "Redeploy"}
293		−	</Button>
	310	+	</SubmitButton>
294	311		{up && (
295		−	<Button variant="quiet" type="submit" name="intent" value="take-down" disabled={busy} title="Take it down now">
	312	+	<SubmitButton
	313	+	variant="quiet"
	314	+	name="intent"
	315	+	value="take-down"
	316	+	match={{ app }}
	317	+	icon={compact}
	318	+	pending="Taking down…"
	319	+	title="Take it down now"
	320	+	>
296	321		<Trash2 size={13} />
297	322		{!compact && "Take down"}
298		−	</Button>
	323	+	</SubmitButton>
299	324		)}
300	325		</Form>
301	326		);

1	1		import { Box, CircleAlert, MailOpen } from "lucide-react";
2		−	import { Form, data, redirect, useNavigation } from "react-router";
	2	+	import { Form, data, redirect } from "react-router";
3	3
4	4		import { REPO_ROLE_LABELS, REPO_ROLE_SUMMARIES } from "@g1t/contracts";
5	5
6	6		import type { Route } from "./+types/invitations";
7		−	import { Avatar, Button, ButtonLink, ErrorText } from "../../components/ui";
	7	+	import { Avatar, ButtonLink, ErrorText, SubmitButton, usePending } from "../../components/ui";
8	8		import { page } from "../../lib/meta";
9	9		import { identity } from "../../lib/services.server";
10	10		import { assertSameOrigin, requireUser } from "../../lib/session.server";
⋯
34	34		const form = await request.formData();
35	35		const accept = form.get("intent") === "accept";
36	36		const invitation = await invitationTo(user, params.owner, params.repo);
37		−	if (!invitation) return data({ error: "This invitation is no longer open." }, { status: 404 });
	37	+	// Refusals are said with a 200, so the page loads again and shows the
	38	+	// invitation as it now stands beside the reason: after a 4xx answer
	39	+	// React Router keeps the page's data as it was.
	40	+	if (!invitation) return { error: "This invitation is no longer open." };
38	41		const answered = await identity.respondRepoInvitation(user, invitation.id, accept);
39		−	if (!answered.ok) return data({ error: answered.error.message }, { status: 422 });
	42	+	if (!answered.ok) return { error: answered.error.message };
40	43		// The role is theirs from the next request on: straight to the repository.
41	44		throw redirect(accept ? `/${invitation.repo}` : "/");
42	45		}
⋯
45	48
46	49		export default function RepoInvitation({ loaderData, actionData, params }: Route.ComponentProps) {
47	50		const { invitation, viewer } = loaderData;
48		−	const navigation = useNavigation();
49		−	const answering = navigation.state !== "idle" ? navigation.formData?.get("intent") : null;
	51	+	// Either answer: the other button waits for it.
	52	+	const answering = usePending();
50	53		const full = `${params.owner}/${params.repo}`;
51	54		if (!invitation) {
52	55		return (
⋯
117	120		</p>
118	121		<ErrorText>{actionData?.error}</ErrorText>
119	122		<div className="flex flex-col gap-3 sm:flex-row">
120		−	<Button type="submit" name="intent" value="accept" disabled={answering != null}>
121		−	{answering === "accept" ? "Accepting…" : "Accept invitation"}
122		−	</Button>
123		−	<Button type="submit" name="intent" value="decline" variant="quiet" disabled={answering != null}>
124		−	{answering === "decline" ? "Declining…" : "Decline"}
125		−	</Button>
	123	+	<SubmitButton name="intent" value="accept" disabled={answering} pending="Accepting…">
	124	+	Accept invitation
	125	+	</SubmitButton>
	126	+	<SubmitButton name="intent" value="decline" variant="quiet" disabled={answering} pending="Declining…">
	127	+	Decline
	128	+	</SubmitButton>
126	129		</div>
127	130		</Form>
128	131		</div>

1	1		import { env } from "cloudflare:workers";
2	2		import { Bot, ExternalLink, GitCommitHorizontal, GitMerge, Play, Sparkles } from "lucide-react";
3		−	import { Form, Link, redirect, useNavigation } from "react-router";
	3	+	import { Form, Link, redirect } from "react-router";
4	4
5	5		import { type Pull, PROVIDERS, workOwner } from "@g1t/contracts";
6	6
⋯
10	10		import { AgentStepLine } from "../../components/agents";
11	11		import {
12	12		Avatar,
13		−	Button,
14	13		CopyLine,
15	14		EmptyState,
16	15		ComputeNote,
17	16		ErrorText,
18	17		Input,
	18	+	SubmitButton,
19	19		Textarea,
20	20		TimeAgo,
21	21		} from "../../components/ui";
⋯
235	235		const { issue, pulls, comments, viewer, labels, agentsEnabled, members, canManage, can } = loaderData;
236	236
237	237		// Follow agents at work without a manual reload.
238		−	const navigation = useNavigation();
239	238		const running = pulls.some(
240	239		(pull) =>
241	240		pull.status === "draft" \|\|
⋯
253	252		);
254	253		useRefreshWhile(Boolean(running \|\| assigned));
255	254
256		−	const starting = navigation.formData?.get("action") === "run-hosted";
	255	+	// A refusal to start g1t shows by its button; every other error below the discussion.
	256	+	const runError = actionData && "action" in actionData && actionData.action === "run-hosted";
257	257		const base = `/${params.owner}/${params.repo}`;
258	258		const open = issue.state === "open";
259	259		const reference = `${params.owner}/${params.repo}#${issue.number}`;
⋯
352	352		<Form method="post" className="flex flex-wrap justify-end gap-2">
353	353		{open ? (
354	354		<>
355		−	<Button variant="quiet" type="submit" name="action" value="close-not-planned">
	355	+	<SubmitButton variant="quiet" name="action" value="close-not-planned" pending="Closing…">
356	356		Close as not planned
357		−	</Button>
358		−	<Button variant="quiet" type="submit" name="action" value="close-completed">
	357	+	</SubmitButton>
	358	+	<SubmitButton variant="quiet" name="action" value="close-completed" pending="Closing…">
359	359		Close issue
360		−	</Button>
	360	+	</SubmitButton>
361	361		</>
362	362		) : (
363		−	<Button variant="quiet" type="submit" name="action" value="reopen">
	363	+	<SubmitButton variant="quiet" name="action" value="reopen" pending="Reopening…">
364	364		Reopen issue
365		−	</Button>
	365	+	</SubmitButton>
366	366		)}
367	367		</Form>
368	368		)}
369	369		</div>
370	370		</div>
371	371		<div className="mt-2">
372		−	{!(actionData && "action" in actionData) && <ErrorText>{actionData?.error}</ErrorText>}
	372	+	{!runError && <ErrorText>{actionData?.error}</ErrorText>}
373	373		</div>
374	374		</div>
375	375
⋯
489	489		<Form method="post" className="mt-3 space-y-2">
490	490		<input type="hidden" name="action" value="run-hosted" />
491	491		<div className="*:w-full">
492		−	<Button variant="accent" type="submit" disabled={starting}>
	492	+	<SubmitButton variant="accent" match={{ action: "run-hosted" }} pending="Starting a sandbox…">
493	493		<Sparkles size={14} />
494		−	{starting ? "Starting a sandbox…" : "Assign to g1t"}
495		−	</Button>
	494	+	Assign to g1t
	495	+	</SubmitButton>
496	496		</div>
497	497		<details>
498	498		<summary className="cursor-pointer text-xs text-faint hover:text-fg">
⋯
511	511		agent and fixes. You get it back ready to merge.
512	512		</p>
513	513		<ComputeNote note={loaderData.computeNote} />
514		−	{actionData && "action" in actionData && actionData.action === "run-hosted" && (
515		−	<ErrorText>{actionData.error}</ErrorText>
516		−	)}
	514	+	{runError && <ErrorText>{actionData.error}</ErrorText>}
517	515		</Form>
518	516		)}
519	517
⋯
547	545		))}
548	546		<input type="hidden" name="assignee" value={viewer.username} />
549	547		<div className="*:w-full">
550		−	<Button variant="quiet" type="submit">
	548	+	<SubmitButton variant="quiet" name="who" value="self" pending="Assigning…">
551	549		Assign yourself
552		−	</Button>
	550	+	</SubmitButton>
553	551		</div>
554	552		</Form>
555	553		)}
⋯
560	558		<Form method="post" className="mt-2 space-y-2" key={issue.assignees.join()}>
561	559		<input type="hidden" name="action" value="assign" />
562	560		<PeoplePicker name="assignee" members={members} chosen={issue.assignees} />
563		−	<Button variant="quiet" type="submit">
	561	+	<SubmitButton variant="quiet" name="who" value="picked" pending="Saving…">
564	562		Save assignees
565		−	</Button>
	563	+	</SubmitButton>
566	564		</Form>
567	565		</details>
568	566		</div>
⋯
587	585		</p>
588	586		<Input name="agent" placeholder="Who is working, e.g. claude-code" maxLength={60} />
589	587		<div className="*:w-full">
590		−	<Button type="submit">Open pull request</Button>
	588	+	<SubmitButton match={{ action: "open-pull" }} pending="Opening…">
	589	+	Open pull request
	590	+	</SubmitButton>
591	591		</div>
592	592		<p className="text-xs text-muted">
593	593		Already pushed a branch?{" "}
⋯
631	631		))}
632	632		</div>
633	633		<Input name="labels" placeholder="New labels, comma separated" />
634		−	<Button variant="quiet" type="submit">
	634	+	<SubmitButton variant="quiet" match={{ action: "labels" }} pending="Saving…">
635	635		Save labels
636		−	</Button>
	636	+	</SubmitButton>
637	637		</Form>
638	638		</details>
639	639		)}

1	1		import { env } from "cloudflare:workers";
2	2		import type { G1tEvent } from "@g1t/contracts";
3	3		import { ArrowRight, CircleCheck, FileCode2, Sparkles } from "lucide-react";
4		−	import { Form, Link, data, useNavigation } from "react-router";
	4	+	import { Form, Link, data } from "react-router";
5	5
6	6		import type { Route } from "./+types/plan";
7	7		import { refusal, requireRepo } from "../../lib/access.server";
⋯
10	10		import { Markdown } from "../../components/markdown";
11	11		import { Activity, Exchanges } from "../../components/activity";
12	12		import { Outcome } from "../../components/outcome";
13		−	import { Button, ErrorText, TimeAgo } from "../../components/ui";
	13	+	import { ErrorText, SubmitButton, TimeAgo, usePending } from "../../components/ui";
14	14		import { Checkbox } from "../../components/ui/checkbox";
15	15		import { Label } from "../../components/work";
16	16		import { billing, events, identity, work } from "../../lib/services.server";
⋯
91	91		export default function PlanPage({ loaderData, actionData, params }: Route.ComponentProps) {
92	92		const { plan, costMicros, activity } = loaderData;
93	93		const base = `/${params.owner}/${params.repo}`;
94		−	const applying = useNavigation().state === "submitting";
	94	+	// Either way of applying it, so the other button waits too.
	95	+	const applying = usePending();
95	96
96	97		// The agent is still writing it.
97	98		const planning = plan.status === "planning";
⋯
262	263
263	264		{plan.status === "ready" && (
264	265		<div className="mt-6 flex flex-wrap items-center gap-3">
265		−	<Button variant="accent" type="submit" name="action" value="assign" disabled={applying \|\| !loaderData.can.run} title={whyNot(loaderData.can, "run")}>
	266	+	<SubmitButton variant="accent" name="action" value="assign" pending="Opening issues…" disabled={applying \|\| !loaderData.can.run} title={whyNot(loaderData.can, "run")}>
266	267		<Sparkles size={15} />
267		−	{applying ? "Opening issues…" : "Open these and assign g1t"}
268		−	</Button>
269		−	<Button variant="quiet" type="submit" name="action" value="open" disabled={applying \|\| !loaderData.can.run} title={whyNot(loaderData.can, "run")}>
	268	+	Open these and assign g1t
	269	+	</SubmitButton>
	270	+	<SubmitButton variant="quiet" name="action" value="open" pending="Opening issues…" disabled={applying \|\| !loaderData.can.run} title={whyNot(loaderData.can, "run")}>
270	271		Only open the issues
271		−	</Button>
	272	+	</SubmitButton>
272	273		<span className="text-xs text-muted">
273	274		Untick any you do not want. Agents work on the independent ones at once
274	275		and the rest follow as what they depend on merges.

24	24		Wrench,
25	25		} from "lucide-react";
26	26		import { Suspense } from "react";
27		−	import { Await, Form, Link, redirect, useNavigation } from "react-router";
	27	+	import { Await, Form, Link, redirect } from "react-router";
28	28
29	29		import {
30	30		type Capability,
⋯
48	48		import { Markdown } from "../../components/markdown";
49	49		import {
50	50		Avatar,
51		−	Button,
52	51		ButtonLink,
53	52		CopyLine,
54	53		EmptyState,
55	54		ComputeNote,
56	55		ErrorText,
	56	+	SubmitButton,
57	57		Textarea,
58	58		TimeAgo,
	59	+	usePending,
59	60		} from "../../components/ui";
60	61		import { CheckboxOption } from "../../components/ui/checkbox";
61	62		import { WorkflowStatuses } from "../../components/actions";
⋯
584	585		];
585	586		// A catch-up: the click shows at once; the answer says whether it is
586	587		// done already or a sandbox is on it.
587		−	const navigation = useNavigation();
588		−	const catchUpPending = navigation.state !== "idle" && navigation.formData?.get("action") === "update";
	588	+	const catchUpPending = usePending({ action: "update" });
589	589		const catchUp = actionData?.action === "update" ? actionData : null;
590	590		const caughtUp = catchUp && "updated" in catchUp ? catchUp.updated : null;
591	591		const agentCatchUp = catchUp && "agent" in catchUp ? catchUp.agent : null;
⋯
770	770		{canRun &&
771	771		pull.runtime === "hosted" &&
772	772		(working \|\| ["working", "revising", "catching_up", "answering"].includes(lifecycle?.stage ?? "")) && (
773		−	<Form method="post" className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-merged/30">
	773	+	// Keyed by the messages so the box empties once one shows below.
	774	+	<Form method="post" className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-merged/30" key={messages.length}>
774	775		<p className="flex items-center gap-2 text-sm font-medium">
775	776		<Sparkles size={15} className="text-merged" />
776	777		Message the agent
⋯
789	790		placeholder="Keep the old flag working too…"
790	791		className="h-9 min-w-0 grow rounded-md bg-bg px-3 text-sm ring-1 ring-line outline-none placeholder:text-faint focus:ring-merged/60"
791	792		/>
792		−	<Button type="submit">Send</Button>
	793	+	<SubmitButton match={{ action: "message" }} pending="Sending…">
	794	+	Send
	795	+	</SubmitButton>
793	796		</div>
794	797		</Form>
795	798		)}
⋯
912	915		Edit description
913	916		</summary>
914	917		<Form method="post" className="mt-3 space-y-2">
	918	+	<input type="hidden" name="action" value="describe" />
915	919		<Textarea
916	920		name="summary"
917	921		rows={6}
918	922		placeholder="What changed and why"
919	923		defaultValue={pull.body ?? ""}
920	924		/>
921		−	<Button type="submit">Save</Button>
	925	+	<SubmitButton match={{ action: "describe" }} pending="Saving…">
	926	+	Save
	927	+	</SubmitButton>
922	928		</Form>
923	929		</details>
924	930		)}
⋯
936	942		</StatusRow>
937	943		{canManage && (
938	944		<Form method="post" className="space-y-2 px-4 py-3">
	945	+	<input type="hidden" name="action" value="ready" />
939	946		<Textarea name="summary" rows={3} placeholder="What changed and why" />
940		−	<Button type="submit">Mark ready for review</Button>
	947	+	<SubmitButton match={{ action: "ready" }} pending="Marking ready…">
	948	+	Mark ready for review
	949	+	</SubmitButton>
941	950		</Form>
942	951		)}
943	952		</StatusBox>
⋯
1022	1031		{canUpdate && (
1023	1032		<Form method="post" className="mt-2">
1024	1033		<input type="hidden" name="action" value="update" />
1025		−	<Button variant="quiet" type="submit" disabled={catchUpPending}>
1026		−	{catchUpPending && <Loader size={14} className="animate-spin" />}
1027		−	{catchUpPending ? `Merging ${defaultBranch} in…` : `Catch up with ${defaultBranch} now`}
1028		−	</Button>
	1034	+	<SubmitButton variant="quiet" match={{ action: "update" }} pending={`Merging ${defaultBranch} in…`}>
	1035	+	Catch up with {defaultBranch} now
	1036	+	</SubmitButton>
1029	1037		</Form>
1030	1038		)}
1031	1039		{catchUp && "error" in catchUp && <ErrorText>{catchUp.error}</ErrorText>}
⋯
1062	1070		<Layers size={15} />
1063	1071		See the queue
1064	1072		</ButtonLink>
1065		−	<Button variant="quiet" type="submit" name="action" value="unqueue">
	1073	+	<SubmitButton variant="quiet" name="action" value="unqueue" pending="Removing…">
1066	1074		Remove from the queue
1067		−	</Button>
	1075	+	</SubmitButton>
1068	1076		</Form>
1069	1077		)}
1070	1078		{canMerge && !landing && lifecycle?.stage !== "queued" && (
⋯
1084	1092		/>
1085	1093		)}
1086	1094		<div className="flex flex-wrap items-center gap-3">
1087		−	<Button
	1095	+	<SubmitButton
1088	1096		variant="accent"
1089		−	type="submit"
1090	1097		name="action"
1091	1098		value="merge"
1092	1099		disabled={mergeBlocked != null}
1093	1100		title={mergeBlocked ?? undefined}
	1101	+	pending={mergeQueue ? "Adding to the queue…" : "Merging…"}
1094	1102		>
1095	1103		{mergeQueue ? <Layers size={15} /> : <GitMerge size={15} />}
1096	1104		{mergeQueue ? "Add to the merge queue" : `Merge into ${defaultBranch}`}
1097		−	</Button>
	1105	+	</SubmitButton>
1098	1106		<span className={`text-xs ${mergeBlocked ? "text-danger" : "text-muted"}`}>
1099	1107		{mergeBlocked ?? (mergeQueue
1100	1108		? `Tested together with everything ahead of it, then lands on ${defaultBranch}.`
⋯
1118	1126		/>
1119	1127		{canManage && active && (
1120	1128		<Form method="post" className="flex justify-end">
1121		−	<Button variant="quiet" type="submit" name="action" value="close">
	1129	+	<SubmitButton variant="quiet" name="action" value="close" pending="Closing…">
1122	1130		Close pull request
1123		−	</Button>
	1131	+	</SubmitButton>
1124	1132		</Form>
1125	1133		)}
1126	1134		{actionData &&
1127		−	!["merge", "comment", "rerun-failed", "rerun-workflow", "update", "agent-review", "reviewers", "assign"].includes(
	1135	+	!["merge", "comment", "stack", "rerun-failed", "rerun-workflow", "update", "agent-review", "reviewers", "assign"].includes(
1128	1136		String(actionData.action),
1129	1137		) && <ErrorText>{actionData.error}</ErrorText>}
1130	1138		</div>
⋯
1161	1169		<Form method="post" className="mt-3">
1162	1170		<input type="hidden" name="action" value="stack" />
1163	1171		<input type="hidden" name="branch" value={preview.branch} />
1164		−	<button
1165		−	type="submit"
1166		−	className="w-full rounded-md border border-line px-3 py-1.5 text-xs text-muted transition-colors hover:border-line-strong hover:text-fg"
	1172	+	<SubmitButton
	1173	+	match={{ action: "stack" }}
	1174	+	pending="Starting the builds…"
	1175	+	className="flex w-full items-center justify-center gap-1.5 rounded-md border border-line px-3 py-1.5 text-xs text-muted transition-colors hover:border-line-strong hover:text-fg disabled:opacity-50"
1167	1176		>
1168	1177		Preview them against this change
1169		−	</button>
	1178	+	</SubmitButton>
1170	1179		</Form>
1171	1180		)}
1172	1181		{actionData?.action === "stack" &&
⋯
1224	1233		<input key={name} type="hidden" name="reviewer" value={name} />
1225	1234		))}
1226	1235		<div className="*:w-full">
1227		−	<Button variant="quiet" type="submit">
	1236	+	<SubmitButton variant="quiet" match={{ action: "agent-review" }} pending="Asking g1t…">
1228	1237		<Sparkles size={14} className="text-accent" />
1229	1238		Request review from g1t
1230		−	</Button>
	1239	+	</SubmitButton>
1231	1240		</div>
1232	1241		<ComputeNote note={loaderData.computeNote} />
1233	1242		</Form>
⋯
1246	1255		members={members.filter((name) => name !== workOwner(pull).username)}
1247	1256		chosen={pull.reviewers.filter((name) => name !== "g1t")}
1248	1257		/>
1249		−	<Button variant="quiet" type="submit">
	1258	+	<SubmitButton variant="quiet" match={{ action: "reviewers" }} pending="Saving…">
1250	1259		Save reviewers
1251		−	</Button>
	1260	+	</SubmitButton>
1252	1261		</Form>
1253	1262		</details>
1254	1263		</div>
⋯
1281	1290		))}
1282	1291		<input type="hidden" name="assignee" value={viewer.username} />
1283	1292		<div className="*:w-full">
1284		−	<Button variant="quiet" type="submit">
	1293	+	<SubmitButton variant="quiet" name="who" value="self" pending="Assigning…">
1285	1294		Assign yourself
1286		−	</Button>
	1295	+	</SubmitButton>
1287	1296		</div>
1288	1297		</Form>
1289	1298		)}
⋯
1294	1303		<Form method="post" className="mt-2 space-y-2" key={pull.assignees.join()}>
1295	1304		<input type="hidden" name="action" value="assign" />
1296	1305		<PeoplePicker name="assignee" members={members} chosen={pull.assignees} />
1297		−	<Button variant="quiet" type="submit">
	1306	+	<SubmitButton variant="quiet" name="who" value="picked" pending="Saving…">
1298	1307		Save assignees
1299		−	</Button>
	1308	+	</SubmitButton>
1300	1309		</Form>
1301	1310		</details>
1302	1311		</div>

28	28		import { catchUpPhase, catchUpRun, catchUpTitle, catchUpWhy } from "../lib/catch-up";
29	29		import { duration } from "./actions";
30	30		import { Elapsed, useRuns } from "./agents";
31		−	import { Button, CopyLine, ErrorText, TimeAgo } from "./ui";
	31	+	import { Button, CopyLine, ErrorText, SubmitButton, TimeAgo } from "./ui";
32	32		import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
33	33
34	34		// --- Output ---------------------------------------------------------------
⋯
408	408		<Form method="post" key={status.context}>
409	409		<input type="hidden" name="action" value="rerun-workflow" />
410	410		<input type="hidden" name="run" value={runIdOf(status) ?? ""} />
411		−	<Button variant="quiet" type="submit" title={`Re-run the failed jobs of ${status.context}`}>
	411	+	<SubmitButton
	412	+	variant="quiet"
	413	+	match={{ action: "rerun-workflow", run: runIdOf(status) ?? "" }}
	414	+	pending="Re-running…"
	415	+	title={`Re-run the failed jobs of ${status.context}`}
	416	+	>
412	417		<RotateCw size={13} />
413	418		Re-run failed jobs{failedRuns.length > 1 ? ` of ${status.context}` : ""}
414		−	</Button>
	419	+	</SubmitButton>
415	420		</Form>
416	421		))}
417	422		</div>

8	8		import { Markdown } from "./markdown";
9	9		import { IssueIcon, PullIcon } from "./work-icons";
10	10		import { MentionTextarea } from "./mention-textarea";
11		−	import { Avatar, Button, TimeAgo } from "./ui";
	11	+	import { Avatar, SubmitButton, TimeAgo } from "./ui";
12	12		import { CheckboxOption } from "./ui/checkbox";
13	13
14	14		export { IssueIcon, PullIcon };
⋯
412	412		}
413	413		/>
414	414		<div className="flex flex-wrap gap-2">
415		−	<Button type="submit">Comment</Button>
	415	+	{/* A plain comment's verdict is none the action knows, so each button tells its own post apart. */}
	416	+	<SubmitButton name="verdict" value="comment" match={{ action: "comment" }} pending="Commenting…">
	417	+	Comment
	418	+	</SubmitButton>
416	419		{review?.canJudge && (
417	420		<>
418		−	<Button variant="quiet" type="submit" name="verdict" value="approve">
	421	+	<SubmitButton variant="quiet" name="verdict" value="approve" match={{ action: "comment" }} pending="Approving…">
419	422		<CircleCheck size={14} className="text-accent" />
420	423		Approve
421		−	</Button>
422		−	<Button variant="quiet" type="submit" name="verdict" value="request_changes">
	424	+	</SubmitButton>
	425	+	<SubmitButton
	426	+	variant="quiet"
	427	+	name="verdict"
	428	+	value="request_changes"
	429	+	match={{ action: "comment" }}
	430	+	pending="Requesting changes…"
	431	+	>
423	432		<CircleSlash size={14} className="text-danger" />
424	433		Request changes
425		−	</Button>
	434	+	</SubmitButton>
426	435		</>
427	436		)}
428	437		</div>

20	20		RotateCw,
21	21		} from "lucide-react";
22	22		import { type ReactNode, Suspense } from "react";
23		−	import { Await, Form, Link, useNavigation } from "react-router";
	23	+	import { Await, Form, Link } from "react-router";
24	24
25	25		import {
26	26		type AgentRun,
⋯
46	46		import { ProductionShot } from "../../components/production-shot";
47	47		import { GithubLinkStrip } from "../../components/github";
48	48		import { githubApp } from "../../lib/github.server";
49		−	import { Avatar, Button, ButtonLink, CopyLine, TimeAgo } from "../../components/ui";
	49	+	import { Avatar, ButtonLink, CopyLine, SubmitButton, TimeAgo } from "../../components/ui";
50	50		import { ChangeSize } from "../../components/work";
51	51		import {
52	52		type ActivityItem,
⋯
664	664		const productionUrl = production ? (settings?.primaryDomain ? `https://${settings.primaryDomain}` : production.url) : null;
665	665		const previews = live.filter((app) => app.kind === "preview");
666	666		const latestProduction = builds.find((build) => build.kind === "production") ?? null;
667		−	const busy = useNavigation().state === "submitting";
668	667		const addresses = useAddresses();
669	668		const source = project?.source.kind === "hosted" ? project.source : null;
670	669		const moving = agentsLive.length > 0 \|\| columns.working.length + columns.checking.length > 0;
⋯
748	747		)}
749	748		{settings?.enabled ? (
750	749		loaderData.can.run && <Form method="post">
751		−	<Button type="submit" variant="quiet" disabled={busy} title="Build production again from the default branch">
	750	+	<SubmitButton
	751	+	variant="quiet"
	752	+	name="intent"
	753	+	value="redeploy"
	754	+	pending="Redeploying…"
	755	+	title="Build production again from the default branch"
	756	+	>
752	757		<RotateCw size={14} />
753	758		Redeploy
754		−	</Button>
	759	+	</SubmitButton>
755	760		</Form>
756	761		) : loaderData.can.manage_integrations && (
757	762		<ButtonLink to={`${base}/settings/deployments`} variant="accent">

3	3		* nothing proves a change works, and a button that opens a pull request
4	4		* adding a starter workflow for the stack g1t finds (routes/repo/add-ci.ts).
5	5		*/
6		−	import { FlaskConical, LoaderCircle, Plus } from "lucide-react";
	6	+	import { FlaskConical, Plus } from "lucide-react";
7	7		import { useFetcher } from "react-router";
8	8
9		−	import { Button, ErrorText } from "./ui";
	9	+	import { ErrorText, SubmitButton } from "./ui";
10	10
11	11		export function AddCiPrompt({
12	12		owner,
⋯
22	22		compact?: boolean;
23	23		}) {
24	24		const fetcher = useFetcher<{ error?: string }>();
25		−	const adding = fetcher.state !== "idle";
	25	+
26	26		return (
27	27		<div className={compact ? "flex gap-3 px-4 py-3" : "flex gap-3 rounded-xl border border-dashed border-line-strong bg-surface p-4"}>
28	28		<FlaskConical size={16} className="mt-0.5 shrink-0 text-warn" />
⋯
34	34		</p>
35	35		{canAdd && (
36	36		<fetcher.Form method="post" action={`/${owner}/${repo}/add-ci`} className="mt-3 flex flex-wrap items-center gap-3">
37		−	<Button variant="primary" type="submit" disabled={adding}>
38		−	{adding ? <LoaderCircle size={14} className="animate-spin" /> : <Plus size={14} />}
39		−	{adding ? "Opening a pull request…" : "Add CI"}
40		−	</Button>
	37	+	<SubmitButton variant="primary" fetcher={fetcher} pending="Opening a pull request…">
	38	+	<Plus size={14} />
	39	+	Add CI
	40	+	</SubmitButton>
41	41		<span className="text-xs text-faint">
42	42		Opens a pull request with a starter workflow for the stack g1t finds. You can change it before merging.
43	43		</span>

21	21		HighlightedLine,
22	22		} from "../lib/diff";
23	23		import { Markdown } from "./markdown";
24		−	import { Avatar, Button, EmptyState, Textarea, TimeAgo } from "./ui";
	24	+	import { Avatar, Button, EmptyState, SubmitButton, Textarea, TimeAgo } from "./ui";
25	25		import { Checkbox } from "./ui/checkbox";
26	26
27	27		const ROW_STYLES: Record<DiffLine["kind"], string> = {
⋯
134	134		open: boolean;
135	135		onClose: () => void;
136	136		}) {
	137	+	// The box stays, saying it is posting, until the new comment shows above it.
	138	+	const count = useRef(comments.length);
	139	+	useEffect(() => {
	140	+	if (comments.length > count.current) onClose();
	141	+	count.current = comments.length;
	142	+	// eslint-disable-next-line react-hooks/exhaustive-deps -- only a new comment closes it
	143	+	}, [comments.length]);
137	144		return (
138	145		<div className="max-w-2xl space-y-2">
139	146		{comments.map((comment) => (
140	147		<LineComment key={comment.id} comment={comment} />
141	148		))}
142	149		{open && (
143		−	<Form method="post" className="space-y-2 font-sans" onSubmit={onClose}>
	150	+	<Form method="post" className="space-y-2 font-sans">
144	151		<input type="hidden" name="action" value="comment" />
145	152		<input type="hidden" name="path" value={path} />
146	153		<input type="hidden" name="line" value={line} />
147	154		<Textarea name="body" rows={3} required autoFocus placeholder={`Comment on line ${line}`} />
148	155		<div className="flex gap-2">
149		−	<Button type="submit">Comment</Button>
	156	+	<SubmitButton match={{ action: "comment", path, line: String(line) }} pending="Commenting…">
	157	+	Comment
	158	+	</SubmitButton>
150	159		<Button variant="quiet" type="button" onClick={onClose}>
151	160		Cancel
152	161		</Button>

33	33		import { useLiveRefresh } from "./agents";
34	34		import { Unavailable } from "./mission";
35	35		import { TokenUsagePanel } from "./token-usage";
36		−	import { Avatar, TimeAgo } from "./ui";
	36	+	import { Avatar, SubmitButton, TimeAgo } from "./ui";
37	37		import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "./ui/dropdown-menu";
38	38		import type { Loaded } from "../routes/home";
39	39
⋯
117	117		);
118	118		}
119	119
120		−	/** A form that acts on a pull request from here, saying so before the page catches up. */
	120	+	/**
	121	+	* A form that acts on a pull request from here: working until the action
	122	+	* has answered and the page has reloaded what it changed, then done, or
	123	+	* the error beside it.
	124	+	*/
121	125		function QuickForm({ quick, variant = "quiet" }: { quick: QuickAction; variant?: "quiet" \| "accent" }) {
122	126		const fetcher = useFetcher<{ error?: string } \| null>();
123	127		const [sent, setSent] = useState(false);
124		−	const busy = fetcher.state !== "idle";
125		−	// Shown as done the moment it is sent, and undone if it fails: the page
126		−	// reloads behind it, which takes longer than the action.
127		−	const done = sent && (busy \|\| !fetcher.data?.error);
	128	+	const done = sent && fetcher.state === "idle" && !fetcher.data?.error;
128	129		return (
129	130		<fetcher.Form method="post" action={quick.to} onSubmit={() => setSent(true)} className="contents">
130	131		{Object.entries(quick.fields).map(([name, value]) => (
131	132		<input key={name} type="hidden" name={name} value={value} />
132	133		))}
133		−	<button
134		−	type="submit"
135		−	disabled={busy \|\| done}
	134	+	<SubmitButton
	135	+	fetcher={fetcher}
	136	+	disabled={done}
136	137		className={cn(
137	138		"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-default",
138	139		variant === "accent"
⋯
143	144		>
144	145		{done ? <Check size={14} /> : null}
145	146		{done ? quick.done : quick.label}
146		−	</button>
	147	+	</SubmitButton>
147	148		{fetcher.data?.error && <span className="basis-full text-xs text-danger">{fetcher.data.error}</span>}
148	149		</fetcher.Form>
149	150		);

1	1		import { env } from "cloudflare:workers";
2	2		import { Download, Sparkles } from "lucide-react";
3		−	import { Form, Link, redirect, useNavigation, useSearchParams } from "react-router";
	3	+	import { Form, Link, redirect, useSearchParams } from "react-router";
4	4
5	5		import { PROVIDERS } from "@g1t/contracts";
6	6
7	7		import type { Route } from "./+types/issue-new";
8	8		import { page } from "../../lib/meta";
9		−	import { Button, ErrorText, Field, Input, Textarea } from "../../components/ui";
	9	+	import { ErrorText, Field, Input, SubmitButton, Textarea } from "../../components/ui";
10	10		import { CheckboxOption } from "../../components/ui/checkbox";
11	11		import { Label } from "../../components/work";
12	12		import { integrations, work } from "../../lib/services.server";
⋯
78	78		}
79	79
80	80		export default function NewIssue({ loaderData, actionData }: Route.ComponentProps) {
81		−	const busy = useNavigation().state === "submitting";
82	81		// "Put an agent on …" in the palette arrives with ?agent=1.
83	82		const [params] = useSearchParams();
84	83		const refused = actionData && "notStarted" in actionData ? actionData.notStarted : null;
⋯
101	100		<Input name="reference" required placeholder="TECH-1234" aria-label="Ticket key or address" />
102	101		</div>
103	102		<CheckboxOption name="assign" label="Put an agent on it" className="items-center" labelClassName="text-muted" />
104		−	<Button type="submit" variant="quiet" disabled={busy}>
	103	+	<SubmitButton variant="quiet" match={{ intent: "import" }} pending="Importing…">
105	104		Import
106		−	</Button>
	105	+	</SubmitButton>
107	106		</div>
108	107		{actionData && "importError" in actionData && (
109	108		<div className="mt-2">
⋯
180	179		</div>
181	180		)}
182	181		<ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>
183		−	<Button type="submit">Open issue</Button>
	182	+	<SubmitButton name="intent" value="open" pending="Opening…">
	183	+	Open issue
	184	+	</SubmitButton>
184	185		</Form>
185	186		</div>
186	187		);

1	1		import { env } from "cloudflare:workers";
2	2		import { GitPullRequest, MessageSquare, Plus, Sparkles, X } from "lucide-react";
3		−	import { Form, Link, useNavigation, useRouteLoaderData } from "react-router";
	3	+	import { Form, Link, useRouteLoaderData } from "react-router";
4	4
5	5		import type { Route } from "./+types/issues";
6	6		import { page } from "../../lib/meta";
7		−	import { Button, ButtonLink, ComputeNote, EmptyState, ErrorText, TimeAgo } from "../../components/ui";
	7	+	import { ButtonLink, ComputeNote, EmptyState, ErrorText, SubmitButton, TimeAgo } from "../../components/ui";
8	8		import { Checkbox } from "../../components/ui/checkbox";
9	9		import {
10	10		Assignee,
⋯
91	91		const base = `${repo}/issues`;
92	92		const stateQuery = state === "closed" ? "state=closed" : "";
93	93		const assignable = agentsEnabled && state === "open" && issues.length > 0;
94		−	const assigning = useNavigation().state === "submitting";
	94	+
95	95		// An archived repository's issues are locked: no new ones.
96	96		const layout = useRouteLoaderData("routes/repo/layout") as { repo?: { archivedAt?: string \| null } } \| undefined;
97	97		const archived = Boolean(layout?.repo?.archivedAt);
⋯
138	138		Tick the issues to hand over. g1t takes each one in a run of its own,
139	139		and they all work at once.
140	140		</p>
141		−	<Button variant="accent" type="submit" disabled={assigning}>
142		−	{assigning ? "Starting sandboxes…" : "Assign to g1t"}
143		−	</Button>
	141	+	<SubmitButton variant="accent" pending="Starting sandboxes…">
	142	+	Assign to g1t
	143	+	</SubmitButton>
144	144		{loaderData.computeNote && (
145	145		<div className="basis-full">
146	146		<ComputeNote note={loaderData.computeNote} />

1	1		import { env } from "cloudflare:workers";
2	2		import { Sparkles } from "lucide-react";
3		−	import { Form, Link, redirect, useNavigation } from "react-router";
	3	+	import { Form, Link, redirect } from "react-router";
4	4
5	5		import type { Plan } from "@g1t/contracts";
6	6
⋯
8	8		import { refusal, requireRepo } from "../../lib/access.server";
9	9		import { whyNot } from "../../lib/access";
10	10		import { page } from "../../lib/meta";
11		−	import { Button, ComputeNote, EmptyState, ErrorText, Textarea, TimeAgo } from "../../components/ui";
	11	+	import { ComputeNote, EmptyState, ErrorText, SubmitButton, Textarea, TimeAgo } from "../../components/ui";
12	12		import { computeNoteFor } from "../../lib/compute.server";
13	13		import { work } from "../../lib/services.server";
14	14		import {
⋯
58	58		export default function Plans({ loaderData, actionData, params }: Route.ComponentProps) {
59	59		const { plans } = loaderData;
60	60		const base = `/${params.owner}/${params.repo}`;
61		−	const starting = useNavigation().state === "submitting";
	61	+
62	62		return (
63	63		<div className="grid gap-10 lg:grid-cols-[1fr_20rem]">
64	64		<div className="min-w-0">
⋯
79	79		}
80	80		/>
81	81		<div className="flex flex-wrap items-center gap-3">
82		−	<Button variant="accent" type="submit" disabled={starting \|\| !loaderData.can.run} title={whyNot(loaderData.can, "run")}>
	82	+	<SubmitButton variant="accent" pending="Starting the planner…" disabled={!loaderData.can.run} title={whyNot(loaderData.can, "run")}>
83	83		<Sparkles size={15} />
84		−	{starting ? "Starting the planner…" : "Plan it"}
85		−	</Button>
	84	+	Plan it
	85	+	</SubmitButton>
86	86		<span className="text-xs text-muted">
87	87		Nothing is opened until you have read the plan.
88	88		</span>

6	6		import { cloneUrl, useAddresses } from "../../lib/addresses";
7	7		import { Combobox } from "../../components/ui/combobox";
8	8		import {
9		−	Button,
	9	+	SubmitButton,
10	10		CopyLine,
11	11		EmptyState,
12	12		ErrorText,
⋯
120	120		<Input name="issue" type="number" min={1} defaultValue={issue} placeholder="12" />
121	121		</Field>
122	122		<ErrorText>{actionData?.error}</ErrorText>
123		−	<Button type="submit">Open pull request</Button>
	123	+	<SubmitButton pending="Opening…">Open pull request</SubmitButton>
124	124		</Form>
125	125		);
126	126		}