apps/web/app/routes/new-github.tsx · flagon-io/g1t

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

1

import { ArrowLeft, Lock, Plus } from "lucide-react";

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

2

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

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

3

4

import type { Route } from "./+types/new-github";

5

import { GithubMark } from "../components/github";

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

6

import { ButtonLink, ErrorText, SubmitButton } from "../components/ui";

7

import { Badge } from "../components/ui/badge";

8

import { Card } from "../components/ui/card";

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

9

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

10

import { FieldLegend, FieldSet } from "../components/ui/field";

11

import { RadioCard, RadioGroup } from "../components/ui/radio-group";

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

12

import { MODES, installationSummary, notYetAdded } from "../lib/github";

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

13

import { githubApp } from "../lib/github.server";

14

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

15

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

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

16

import { currentWorkspace } from "../lib/current-workspace.server";

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

17

18

export function meta(args: Route.MetaArgs) {

19

return page(args, { title: "Import from GitHub · g1t" });

20

}

21

22

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

23

const user = requireUser(context, request);

24

const url = new URL(request.url);

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

25

const current = currentWorkspace(user, request);

26

if (!current) throw redirect("/workspaces/new");

27

const workspace = current.slug;

28

const workspaceName = current.name?.trim() || current.slug;

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

29

// What the person can see on GitHub is asked for alongside the status:

30

// an installation made there directly is offered here to be added.

31

const [status, visible] = await Promise.all([

32

githubApp.status(user, workspace),

33

githubApp.visibleInstallations(user).catch(() => null),

34

]);

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

35

if (!status.ok || !status.value.configured) throw redirect("/new");

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

36

const { installations, linked } = status.value;

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

37

const recorded = new Set(installations.map((item) => item.id));

38

const claimable =

39

linked && visible?.ok

40

? notYetAdded(visible.value, workspace)

41

.filter((item) => !recorded.has(item.id))

42

.map((item) => ({ ...item, summary: installationSummary(item) }))

43

: [];

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

44

const wanted = Number(url.searchParams.get("installation"));

45

const installation = installations.find((item) => item.id === wanted) ?? installations[0] ?? null;

46

const pageNumber = Math.max(1, Number(url.searchParams.get("page")) || 1);

47

let repositories = null;

48

let error: string | null = null;

49

if (linked && installation) {

50

const listed = await githubApp.repositories(user, workspace, installation.id, pageNumber);

51

if (listed.ok) repositories = listed.value;

52

else error = listed.error.message;

53

}

54

return {

55

workspace,

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

56

workspaceName,

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

57

owner: roleIn(user, workspace) === "owner",

58

linked,

59

installations,

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

60

claimable,

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

61

installation,

62

repositories,

63

error,

64

requested: url.searchParams.get("requested") === "1",

65

};

66

}

67

68

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

69

assertSameOrigin(request);

70

const user = requireUser(context, request);

71

const form = await request.formData();

72

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

73

const installationId = Number(form.get("installation"));

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

74

if (form.get("intent") === "add-installation") {

75

const added = await githubApp.addInstallation(user, workspace, installationId);

76

if (!added.ok) return { error: null, addError: added.error.message, results: [] };

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

77

throw redirect(`/new/github?installation=${installationId}`);

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

78

}

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

79

if (form.get("intent") === "remove-installation") {

80

const removed = await githubApp.removeInstallation(user, workspace, installationId);

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

81

// Shown by the list it was removed from, which is there with or without an account chosen.

82

if (!removed.ok) return { error: null, removeError: removed.error.message, results: [] };

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

83

throw redirect("/new/github");

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

84

}

85

const mode = (["import", "mirror", "push"] as const).find((option) => option === form.get("mode")) ?? "import";

86

const chosen = form.getAll("repo").map(Number).filter((id) => Number.isSafeInteger(id) && id > 0).slice(0, 20);

87

if (chosen.length === 0) return { error: "Choose at least one repository.", results: [] };

88

const issues = form.get("issues") === "on";

89

// One at a time: each is a copy of a whole repository.

90

const results: { id: number; ok: boolean; repo?: string; error?: string }[] = [];

91

for (const githubRepoId of chosen) {

92

const imported = await githubApp.import(user, workspace, { installationId, githubRepoId, mode, issues });

93

results.push(

94

imported.ok

95

? { id: githubRepoId, ok: true, repo: imported.value.repo }

96

: { id: githubRepoId, ok: false, error: imported.error.message },

97

);

98

}

99

if (results.length === 1 && results[0].ok) throw redirect(`/${results[0].repo}`);

100

return { error: null, results };

101

}

102

103

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

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

104

const { workspace, workspaceName, installations, claimable, installation, repositories, linked, owner } = loaderData;

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

105

const these = claimable.length === 1 ? "this account" : "these accounts";

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

106

const here = "/new/github";

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

107

const names = new Map((repositories?.repositories ?? []).map((repo) => [repo.id, repo.fullName]));

108

return (

109

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

110

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

111

<ArrowLeft size={14} /> New project

112

</Link>

113

114

115

</span>

116

<h1 className="mt-4 text-2xl font-semibold tracking-tight">Import from GitHub</h1>

117

118

Bring repositories into <span className="font-mono text-fg">{workspace}</span> through g1t's GitHub App. You choose

119

which repositories it can see on GitHub; nothing else is read.

120

</p>

121

122

123

{!linked ? (

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

124

125

126

<h2 className="font-medium">Connect your GitHub account</h2>

127

128

g1t lists the repositories you can reach on GitHub as you, so it needs your GitHub account linked first. If

129

the app is installed on GitHub already, it is listed here to add once your account is linked.

130

</p>

131

132

<a

133

href={`/auth/github?link=1&next=${encodeURIComponent(here)}`}

134

className="inline-flex items-center gap-2 rounded-md bg-fg px-3.5 py-2 text-sm font-medium text-bg hover:bg-fg-hover"

135

>

136

<GithubMark /> Connect GitHub

137

</a>

138

</div>

139

</section>

140

</Card>

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

141

) : (

142

<>

143

144

145

<h2 className="font-medium">GitHub accounts</h2>

146

{owner && (

147

<a

148

href={`/integrations/github/install?workspace=${workspace}`}

149

className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg"

150

>

151

<Plus size={14} /> Add a GitHub account

152

</a>

153

)}

154

</div>

155

{loaderData.requested && (

156

157

Your request went to the organization's owners on GitHub. Once one approves it, add the account here again.

158

</p>

159

)}

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

160

{claimable.length > 0 && (

161

162

<h3 className="text-sm font-medium">Already installed on GitHub</h3>

163

164

{owner

165

? `The app is installed on ${these}, but not added to ${workspaceName} yet.`

166

: `The app is installed on ${these}. An owner of ${workspaceName} can add ${claimable.length === 1 ? "it" : "them"} here.`}

167

</p>

168

169

{claimable.map((item) => (

170

171

172

<span className="font-mono">{item.account}</span>

173

<span className="whitespace-nowrap text-xs text-faint">{item.summary}</span>

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

174

{item.suspended && <Badge size="md">Suspended</Badge>}

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

175

{owner && (

176

177

178

179

180

<SubmitButton

181

pending="Adding…"

182

match={{ intent: "add-installation", installation: String(item.id) }}

183

>

184

Add to {workspaceName}

185

</SubmitButton>

186

</Form>

187

)}

188

</li>

189

))}

190

</ul>

191

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

192

</div>

193

)}

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

194

{installations.length === 0 ? (

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

195

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

196

{owner ? (

197

<>

A GitHub App installed straight on GitHub can be added to a workspace: Import from GitHub lists the installations your GitHub account can see that this workspace hasn't added, each with Add for owners, and coming back from GitHub without g1t's own start asks which of your workspaces to add it to instead of stopping; the GitHub guide says how.3d ago

198

<p>

199

{claimable.length > 0

200

? "Or install g1t's GitHub App on another GitHub account or organization, and choose the repositories it may see."

201

: "Install g1t's GitHub App on your GitHub account or an organization, and choose the repositories it may see."}

202

</p>

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

203

204

<a

205

href={`/integrations/github/install?workspace=${workspace}`}

You choose how g1t looks: Auto follows your system, Light and Dark stay put, set from the account menu, the phone's You and help sheet, Settings → Account or the command palette; the page is drawn in your choice from the first byte, every colour has a light value that reads at 4.5:1 or better, code and diffs are highlighted for both, diagrams and the document editor follow along, the product tour and the g1t mark's avatar stay dark, and Dark is what you see until you choose; the workspaces guide says how.3d ago

206

className="inline-flex items-center gap-2 rounded-md bg-fg px-3.5 py-2 text-sm font-medium text-bg hover:bg-fg-hover"

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

207

>

208

<GithubMark /> Install on GitHub

209

</a>

210

</div>

211

</>

212

) : (

213

<p>No GitHub account is connected to this workspace yet. Ask one of its owners to add one.</p>

214

)}

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

215

</Card>

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

216

) : (

217

218

{installations.map((item) => (

219

220

<Link

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

221

to={`${here}?installation=${item.id}`}

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

222

className={`whitespace-nowrap ${item.id === installation?.id ? "font-medium text-fg" : "text-muted hover:text-fg"}`}

223

>

224

{item.account}

225

</Link>

226

227

{item.accountType === "Organization" ? "Organization" : "Personal"} ·{" "}

228

{item.repositorySelection === "all" ? "all repositories" : "selected repositories"}

229

</span>

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

230

{item.suspended && <Badge size="md">Suspended</Badge>}

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

231

232

233

Choose repositories on GitHub

234

</a>

235

{owner && (

236

237

238

239

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

240

<SubmitButton

241

pending="Removing…"

242

match={{ intent: "remove-installation", installation: String(item.id) }}

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

243

variant="link"

244

size="inline"

245

className="gap-1 text-xs text-faint hover:text-danger"

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

246

>

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

247

Remove

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

248

</SubmitButton>

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

249

</Form>

250

)}

251

</span>

252

</li>

253

))}

254

</ul>

255

)}

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

256

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

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

257

</section>

258

259

{installation && (

260

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

261

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

262

263

264

265

<FieldLegend>Repositories on {installation.account}</FieldLegend>

266

<ErrorText>{loaderData.error}</ErrorText>

267

{repositories && repositories.repositories.length === 0 && (

268

269

The app cannot see any repositories here yet.{" "}

270

271

Choose some on GitHub

272

</a>

273

.

274

</p>

275

)}

276

277

{(repositories?.repositories ?? []).map((repo) => (

278

279

<CheckboxOption

280

name="repo"

281

value={String(repo.id)}

282

disabled={repo.linkedTo != null}

283

label={

284

285

<span className="font-mono">{repo.fullName}</span>

286

{repo.private && (

287

288

<Lock size={11} /> Private

289

</span>

290

)}

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

291

{repo.linkedTo && <Badge size="md">On g1t as {repo.linkedTo}</Badge>}

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

292

</span>

293

}

294

description={repo.description ?? undefined}

295

/>

296

</div>

297

))}

298

</div>

299

{repositories && repositories.total > repositories.perPage && (

300

301

{repositories.page > 1 ? (

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

302

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

303

</Link>

305

) : (

306

307

)}

308

{repositories.page * repositories.perPage < repositories.total && (

New project and Import from GitHub work in the workspace you're in, as the sidebar shows it, with no workspace to pick on the page; a link that names another of your workspaces switches you to it first. The projects guide says so.3d ago

309

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

310

</Link>

312

)}

313

</div>

314

)}

315

</FieldSet>

316

317

318

<FieldLegend>How it comes across</FieldLegend>

319

320

{MODES.map((mode) => (

321

322

))}

323

</RadioGroup>

324

</FieldSet>

325

326

<CheckboxOption

327

name="issues"

328

defaultChecked

329

label="Copy issues too"

330

description="Up to 200 per repository, with their labels and whether they are open; a milestone is noted in the description. Pull requests stay on GitHub; their branches come across."

331

/>

332

333

{actionData?.results && actionData.results.length > 0 && (

334

335

{actionData.results.map((result) => (

336

337

<span className="font-mono">{names.get(result.id) ?? result.id}</span>:{" "}

338

{result.ok ? (

339

340

{result.repo}

341

</Link>

342

) : (

343

<span className="text-danger">{result.error}</span>

344

)}

345

</li>

346

))}

347

</ul>

348

)}

349

<ErrorText>{actionData?.error}</ErrorText>

350

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

351

352

Bring to g1t

353

</SubmitButton>

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.3d ago

354

Spend caps: a monthly budget for comped workspaces and a daily breaker on what g1t pays1w ago

355

Cancel

356

</ButtonLink>

357

</div>

358

</Form>

359

)}

360

</>

361

)}

362

</main>

363

);

364

}