apps/web/app/routes/repo/actions.tsx · flagon-io/g1t

Merge Actions runs: summaries, attempts and re-runs, graceful cancel, log downloads, badges (actions 0009)4h ago

1

import { AlertTriangle, BadgeCheck, FileCode2, GitBranch, Play, PlayCircle } from "lucide-react";

Merge branch 'worktree-agent-a985c01f43538af01'1d ago

2

import { useEffect, useRef, useState } from "react";

3

import { Form, Link, useSearchParams } from "react-router";

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

4

5

import type { DispatchInput, Workflow, WorkflowRun } from "@g1t/contracts";

6

7

import type { Route } from "./+types/actions";

Social cards for every page: og.g1t.sh3d ago

8

import { page } from "../../lib/meta";

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

9

import { Notes, StatusIcon, duration, shortRef } from "../../components/actions";

Fast pages, required checks on the branch, self-hosted runners, honest incidents2d ago

10

import { AddCiPrompt } from "../../components/add-ci";

Merge Actions runs: summaries, attempts and re-runs, graceful cancel, log downloads, badges (actions 0009)4h ago

11

import { Button, ComputeNote, CopyLine, EmptyState, ErrorText, SubmitButton, TimeAgo, usePending } from "../../components/ui";

Workspace names and icons, and a component kit for every control3d ago

12

import { CheckboxOption } from "../../components/ui/checkbox";

Merge Actions runs: summaries, attempts and re-runs, graceful cancel, log downloads, badges (actions 0009)4h ago

13

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../components/ui/dialog";

14

import { useAddresses } from "../../lib/addresses";

15

import { badgeMarkdown, badgeUrl } from "../../lib/badge";

Workspace names and icons, and a component kit for every control3d ago

16

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select";

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

17

import { computeNoteFor } from "../../lib/compute.server";

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

18

import { actions } from "../../lib/services.server";

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

19

import { assertSameOrigin, getViewer, requireUser, unwrap } from "../../lib/session.server";

20

import { accessFor, refusal, repoFor } from "../../lib/access.server";

A click away from a live page arrives: pages stop refreshing themselves while a navigation is pending2d ago

21

import { useRefreshWhile } from "../../lib/refresh";

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

22

Social cards for every page: og.g1t.sh3d ago

23

export function meta({ params, ...args }: Route.MetaArgs) {

24

return page(args, { title: `Workflows · ${params.owner}/${params.repo} · g1t` });

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

25

}

26

27

export async function loader({ params, context, request }: Route.LoaderArgs) {

28

const viewer = getViewer(context);

29

const repo = { namespace: params.owner, name: params.repo };

30

const selected = new URL(request.url).searchParams.get("workflow") ?? undefined;

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

31

const found = await repoFor(context, params);

32

const can = found.ok ? accessFor(viewer, found.value).can : null;

33

// Starting runs needs Write; turning a workflow on or off, Maintain.

34

const member = can?.run ?? false;

Fast pages, required checks on the branch, self-hosted runners, honest incidents2d ago

35

// Who may open the pull request that adds a starter workflow.

36

const canPush = can?.push ?? false;

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

37

const [workflows, runs, computeNote] = await Promise.all([

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

38

actions.workflows(repo, viewer),

39

actions.runs(repo, viewer, { workflow: selected, limit: 50 }),

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

40

// Jobs run on g1t's machines as the workspace's plan allows, or from

41

// the open-source pool on a public repository; members are told

42

// before a run is refused for it.

43

member && found.ok

44

? computeNoteFor(params.owner, "workflow", !found.value.isPrivate).catch(() => null)

45

: Promise.resolve(null),

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

46

]);

47

return {

48

workflows: unwrap(workflows),

49

runs: runs.ok ? runs.value : [],

New workspaces are told to connect a model, before anything fails5d ago

50

member,

Fast pages, required checks on the branch, self-hosted runners, honest incidents2d ago

51

canPush,

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

52

manage: can?.manage_settings ?? false,

53

computeNote,

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

54

selected: selected ?? null,

55

};

56

}

57

58

export async function action({ request, params, context }: Route.ActionArgs) {

59

assertSameOrigin(request);

60

const user = requireUser(context, request);

61

const repo = { namespace: params.owner, name: params.repo };

62

const form = await request.formData();

63

const workflow = String(form.get("workflow") ?? "");

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

64

const refused = await refusal(context, params, form.get("intent") === "toggle" ? "manage_settings" : "run");

65

if (refused) return { error: refused };

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

66

if (form.get("intent") === "toggle") {

67

const changed = await actions.setWorkflowEnabled(user, repo, workflow, form.get("enabled") === "true");

68

return changed.ok ? {} : { error: changed.error.message };

69

}

70

const inputs: Record<string, unknown> = {};

71

for (const [key, value] of form.entries()) {

72

if (key.startsWith("input.")) inputs[key.slice(6)] = value === "on" ? true : value;

73

}

74

// An unticked checkbox sends nothing: it is false.

75

for (const key of String(form.get("booleans") ?? "").split(",").filter(Boolean)) {

76

if (!(key in inputs)) inputs[key] = false;

77

}

78

const ref = String(form.get("ref") ?? "").trim() || undefined;

79

const started = await actions.dispatch(user, repo, workflow, ref, inputs);

80

return started.ok ? { started: started.value } : { error: started.error.message };

81

}

82

83

/** Re-reads the page every few seconds while something is still running. */

84

function useLiveWhile(running: boolean) {

A click away from a live page arrives: pages stop refreshing themselves while a navigation is pending2d ago

85

useRefreshWhile(running, 3000);

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

86

}

87

88

const EVENT_WORDS: Record<string, string> = {

89

push: "push",

90

pull_request: "pull request",

91

pull_request_target: "pull request (target)",

92

pull_request_review: "review",

93

issues: "issue",

94

issue_comment: "comment",

95

schedule: "schedule",

96

workflow_dispatch: "manual",

97

};

98

99

function RunRow({ run, base, showWorkflow }: { run: WorkflowRun; base: string; showWorkflow: boolean }) {

100

return (

101

102

103

104

105

</span>

106

107

<span className="block truncate text-sm font-medium">{run.title || run.name}</span>

108

109

{showWorkflow && <span className="text-fg/80">{run.name}</span>}

110

{showWorkflow && " · "}#{run.number}

111

{run.attempt > 1 && ` (attempt ${run.attempt})`}

112

{" · "}

113

{EVENT_WORDS[run.event] ?? run.event}

114

{run.actor && ` by ${run.actor}`}

115

</span>

116

</span>

117

118

119

{shortRef(run.ref)}

120

</span>

121

122

123

{run.startedAt && <span className="block font-mono">{duration(run.startedAt, run.finishedAt)}</span>}

124

</span>

125

</Link>

126

</li>

127

);

128

}

129

130

function InputField({ name, spec }: { name: string; spec: DispatchInput }) {

131

const label = (

132

133

{spec.description || name}

134

{spec.required && <span className="text-danger"> *</span>}

135

</span>

136

);

137

const control = "w-full rounded-md border border-line bg-bg px-2.5 py-1.5 text-sm outline-none focus:border-accent-dim";

138

if (spec.type === "boolean") {

139

return (

Workspace names and icons, and a component kit for every control3d ago

140

<CheckboxOption

141

name={`input.${name}`}

142

defaultChecked={spec.default === true || spec.default === "true"}

143

label={spec.description || name}

144

/>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

145

);

146

}

147

if (spec.type === "choice" && spec.options) {

148

return (

Workspace names and icons, and a component kit for every control3d ago

149

<div>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

150

{label}

Workspace names and icons, and a component kit for every control3d ago

151

152

153

154

</SelectTrigger>

155

156

{/* A Radix item cannot have the value "". */}

157

{spec.options.filter((option) => option !== "").map((option) => (

158

159

{option}

160

</SelectItem>

161

))}

162

</SelectContent>

163

</Select>

164

</div>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

165

);

166

}

167

return (

168

169

{label}

170

<input

171

name={`input.${name}`}

172

required={spec.required}

173

defaultValue={spec.default == null ? "" : String(spec.default)}

174

type={spec.type === "number" ? "number" : "text"}

175

className={control}

176

autoComplete="off"

177

/>

178

</label>

179

);

180

}

181

182

function RunWorkflow({ workflow }: { workflow: Workflow }) {

183

const [open, setOpen] = useState(false);

Merge branch 'worktree-agent-a985c01f43538af01'1d ago

184

// Open, saying it is starting, until the run shows below or the error does.

185

const running = usePending({ intent: "dispatch", workflow: workflow.id });

186

const was = useRef(false);

187

useEffect(() => {

188

if (was.current && !running) setOpen(false);

189

was.current = running;

190

}, [running]);

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

191

const inputs = Object.entries(workflow.dispatch ?? {});

192

const booleans = inputs.filter(([, spec]) => spec.type === "boolean").map(([name]) => name);

193

return (

194

195

<Button type="button" variant="quiet" onClick={() => setOpen((v) => !v)}>

196

197

Run workflow

198

</Button>

199

{open && (

200

<Form

201

method="post"

202

className="absolute right-0 z-20 mt-2 w-80 space-y-3 rounded-xl border border-line bg-surface p-4 shadow-xl"

203

>

Merge branch 'worktree-agent-a985c01f43538af01'1d ago

204

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

205

206

207

208

<span className="mb-1 block text-xs font-medium text-muted">Branch or tag</span>

209

<input

210

name="ref"

211

placeholder="The default branch"

212

className="w-full rounded-md border border-line bg-bg px-2.5 py-1.5 font-mono text-sm outline-none focus:border-accent-dim"

213

autoComplete="off"

214

/>

215

</label>

216

{inputs.map(([name, spec]) => (

217

218

))}

Merge branch 'worktree-agent-a985c01f43538af01'1d ago

219

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

220

221

Run

Merge branch 'worktree-agent-a985c01f43538af01'1d ago

222

</SubmitButton>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

223

</Form>

224

)}

225

</div>

226

);

227

}

228

Merge Actions runs: summaries, attempts and re-runs, graceful cancel, log downloads, badges (actions 0009)4h ago

229

/** The address of a status badge for the workflow, and Markdown to show it, for a branch and event if chosen. */

230

function StatusBadge({ workflow, repo }: { workflow: Workflow; repo: string }) {

231

const { site } = useAddresses();

232

const [branch, setBranch] = useState("");

233

const [event, setEvent] = useState("");

234

const file = workflow.path.split("/").pop() ?? workflow.path;

235

const options = { branch: branch.trim() || undefined, event: event || undefined };

236

const control = "w-full rounded-md border border-line bg-bg px-2.5 py-1.5 text-sm outline-none focus:border-accent-dim";

237

return (

238

239

240

241

242

Create status badge

243

</Button>

244

</DialogTrigger>

245

246

247

<DialogTitle>Create status badge</DialogTitle>

248

249

A badge that shows how {workflow.name}'s latest finished run went. Paste it into a README.

250

</DialogDescription>

251

</DialogHeader>

252

253

254

<span className="mb-1 block text-xs font-medium text-muted">Branch</span>

255

<input

256

value={branch}

257

onChange={(e) => setBranch(e.target.value)}

258

placeholder="The default branch"

259

className={`${control} font-mono`}

260

autoComplete="off"

261

/>

262

</label>

263

<div>

264

<span className="mb-1 block text-xs font-medium text-muted">Event</span>

265

<Select value={event || "any"} onValueChange={(value) => setEvent(value === "any" ? "" : value)}>

266

267

268

</SelectTrigger>

269

270

<SelectItem value="any">Any event</SelectItem>

271

{workflow.events.map((name) => (

272

273

{name}

274

</SelectItem>

275

))}

276

</SelectContent>

277

</Select>

278

</div>

279

</div>

280

281

282

</div>

283

284

285

Anyone can see a public repository's badge. A private repository's shows only to people who can see the repository.

286

</p>

287

</DialogContent>

288

</Dialog>

289

);

290

}

291

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

292

function WorkflowHeader({ workflow, base, member, manage }: { workflow: Workflow; base: string; member: boolean; manage: boolean }) {

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

293

return (

294

295

296

297

<h3 className="text-lg font-semibold tracking-tight">{workflow.name}</h3>

298

299

300

{workflow.path}

301

</Link>

302

{workflow.events.length > 0 && (

303

<p className="mt-1.5 text-xs text-muted">On {workflow.events.map((e) => EVENT_WORDS[e] ?? e).join(", ")}</p>

304

)}

305

</div>

Merge Actions runs: summaries, attempts and re-runs, graceful cancel, log downloads, badges (actions 0009)4h ago

306

{!workflow.error && (

307

308

309

{member && workflow.dispatch && workflow.state === "active" && <RunWorkflow workflow={workflow} />}

310

{member && manage && <Form method="post">

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

311

312

313

Merge branch 'worktree-agent-a985c01f43538af01'1d ago

314

<SubmitButton

315

variant="quiet"

316

match={{ intent: "toggle", workflow: workflow.id }}

317

pending={workflow.state === "active" ? "Turning off…" : "Turning on…"}

318

>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

319

{workflow.state === "active" ? "Turn off" : "Turn on"}

Merge branch 'worktree-agent-a985c01f43538af01'1d ago

320

</SubmitButton>

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

321

</Form>}

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

322

</div>

323

)}

324

</div>

325

{workflow.error && <p className="rounded-lg bg-danger/10 px-3 py-2 text-sm text-danger">{workflow.error}</p>}

326

{workflow.state === "disabled" && (

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

327

<p className="rounded-lg bg-raised px-3 py-2 text-sm text-muted">Turned off: nothing starts it until someone with the Maintain role turns it on.</p>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

328

)}

329

330

</div>

331

);

332

}

333

334

const EXAMPLE = `name: CI

335

on:

336

push:

337

branches: [main]

338

pull_request:

339

jobs:

340

test:

341

runs-on: ubuntu-latest

342

steps:

Actions: workflow_run, workflow.completed, artifacts on the run page, Node 245d ago

343

- uses: actions/checkout@v7

344

- uses: actions/setup-node@v7

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

345

with:

Actions: workflow_run, workflow.completed, artifacts on the run page, Node 245d ago

346

node-version: 24

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

347

- run: npm ci

348

- run: npm test`;

349

350

export default function Actions({ loaderData, actionData, params }: Route.ComponentProps) {

Fast pages, required checks on the branch, self-hosted runners, honest incidents2d ago

351

const { workflows, runs, member, canPush, manage, computeNote, selected } = loaderData;

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

352

const [search] = useSearchParams();

353

const base = `/${params.owner}/${params.repo}`;

354

const workflow = workflows.find((w) => w.id === selected || w.path.endsWith(`/${selected}`)) ?? null;

355

useLiveWhile(runs.some((run) => run.status !== "completed"));

356

const started = actionData && "started" in actionData ? actionData.started : null;

357

return (

358

359

360

<div>

361

362

A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales3d ago

363

Workflows

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

364

</h2>

365

A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales3d ago

366

Workflows in <code className="text-fg">.g1t/workflows</code>, written as GitHub Actions and run as GitHub runs

367

them. A run on a pull request counts as its checks.

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

368

</p>

369

</div>

370

A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales3d ago

371

How workflows run on g1t

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

372

</a>

373

</header>

374

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

375

{member && computeNote && (

376

377

378

New workspaces are told to connect a model, before anything fails5d ago

379

</div>

380

)}

381

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

382

{workflows.length === 0 ? (

383

Fast pages, required checks on the branch, self-hosted runners, honest incidents2d ago

384

385

386

</div>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

387

388

Coming from GitHub? Rename <code>.github</code> to <code>.g1t</code> and push: your workflows run here as they

389

are. g1t never reads <code>.github</code>.

390

</EmptyState>

391

<div>

392

<p className="font-mono text-xs text-faint">.g1t/workflows/ci.yml</p>

393

394

<code>{EXAMPLE}</code>

395

</pre>

396

</div>

397

</div>

398

) : (

399

400

401

<Link

402

to="?"

403

className={`block rounded-md px-2.5 py-1.5 ${!selected ? "bg-raised text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"}`}

404

>

405

All workflows

406

</Link>

407

{workflows.map((w) => (

408

<Link

409

key={w.id}

410

to={`?workflow=${w.id}`}

411

className={`flex items-center gap-2 rounded-md px-2.5 py-1.5 ${

412

w.id === workflow?.id ? "bg-raised text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"

413

}`}

414

>

Workspace things at the bottom of the sidebar, and on mission control5d ago

415

416

{w.name}

417

{/* Two workflows of one name are told apart by their files. */}

418

{workflows.some((other) => other.id !== w.id && other.name === w.name) && (

419

420

)}

421

</span>

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

422

{w.error && <AlertTriangle size={12} className="shrink-0 text-danger" aria-label="Its file has a problem" />}

423

{w.state === "disabled" && <span className="ml-auto shrink-0 text-xs text-faint">off</span>}

424

</Link>

425

))}

426

</nav>

427

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look2d ago

428

{workflow && <WorkflowHeader workflow={workflow} base={base} member={member} manage={manage} />}

GitHub Actions on g1t, part three: .g1t/workflows, the pages, the docs5d ago

429

{started && (

430

431

Started{" "}

432

433

run #{started.number}

434

</Link>

435

.

436

</p>

437

)}

438

<ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>

439

{runs.length === 0 ? (

440

441

{workflow?.dispatch ? "Run it by hand, or wait for what starts it." : "Runs appear here when something starts one."}

442

</EmptyState>

443

) : (

444

445

{runs.map((run) => (

446

447

))}

448

</ul>

449

)}

450

</div>

451

</div>

452

)}

453

</div>

454

);

455

}