apps/web/app/routes/workspace/work/item.tsx · flagon-io/g1t

? `${state} work item #${item.number} in ${params.owner}, opened by ${item.author.username}${item.requestedBy ? ` for ${item.requestedBy.username}` : ""}.${body ? ` ${body}` : ""}`

62

: null,

63

// The card shows the title and the state.

64

version: item ? [item.title, item.state, item.reason] : undefined,

type: "article",

});

}

/** `owner/name` as a repository path. */

70

function pathOf(path: string): { namespace: string; name: string } {

71

const [namespace = "", name = ""] = path.split("/");

72

return { namespace, name };

73

}

74

75

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

76

const viewer = getViewer(context);

77

const workspace = params.owner.toLowerCase();

78

const number = Number(params.number);

79

if (!Number.isInteger(number) || number < 1) throw notFound("page");

80

const member = roleIn(viewer, workspace) != null;

81

// The item is what the page is about: without it there is no page.

82

// Everything beside it is a part (lib/partial.ts), which says it could

83

// not be loaded in its own place when its service fails.

84

const [found, labels, milestones, members, teams, coordination, ended, agentSetup] = await Promise.all([

85

work.getWorkItem(workspace, number, viewer),

86

part(work.listLabels(workspace, viewer), "Labels"),

87

// Open ones to choose from, and the one it is in, with its progress.

88

part(work.listMilestones(workspace, viewer), "Milestones"),

89

// A member picks assignees from the workspace's people.

90

member ? part(identity.listMembers(workspace, viewer), "The workspace's people") : null,

91

// The teams a member can mention, for the comment box: only a

92

// suggestion, so the box quietly does without them.

93

member ? identity.listTeams(viewer, workspace).catch(() => null) : null,

94

// Its repositories with their pull requests and what landed where, who

95

// is on it, its sessions, what it waits on, and what it may also need

96

// (services/work `get_work`).

97

part(work.getWork(workspace, number, viewer), "Work"),

98

// Its claims that ended, shown muted under the active ones: history

99

// the panel can do without when it cannot be read.

100

Promise.all(

101

(["released", "expired", "handed_off"] as const).map((state) => work.listClaims(workspace, viewer, { state, item: number }).catch(() => null)),

102

),

103

// Whether a member can start a session on the workspace's Anthropic

104

// account: the button is simply not offered when this cannot be read.

105

member ? agentSessions.setup(workspace, viewer).catch(() => null) : null,

106

]);

107

if (!found.ok) {

108

// Work items and pull requests share the workspace's numbers: this may be a pull request.

109

const to = await refPath(viewer, { workspace }, number);

110

if (to && to !== itemPath(workspace, number)) throw redirect(to);

111

throw notFound("page");

112

}

113

const { item } = found.value;

114

const origin = originOf(item.repos);

115

// Who may do what follows the item: the better of their role in the

116

// workspace and on its origin repository (lib/work-access.ts).

117

const [originRepo, links, subscription, sessionTrees] = await Promise.all([

118

origin ? repos.getById(origin.repoId, viewer).catch(() => null) : null,

119

// What it is tied to outside g1t. Shown only once the item is known visible.

120

part(integrations.links(workspace, number), "Links from outside g1t"),

121

// Whether the viewer hears of it, for the sidebar's Notifications.

122

viewer ? part(inbox.subscription(viewer, { itemId: item.id, number }), "Notifications") : null,

123

// Every session tied to it in its repositories, with their subagents, for the Work panel's trees.

124

part(

125

Promise.all(

126

item.repos.slice(0, 6).map((linked) => work.listWorkSessions(pathOf(linked.path), viewer, { item: number, subagents: true })),

127

).then((lists) => lists.flatMap((list) => (list.ok ? list.value : []))),

"Sessions",

),

]);

const ref = originRepo?.ok ? { id: originRepo.value.id, namespace: originRepo.value.namespace, isPrivate: originRepo.value.isPrivate } : null;

132

const can = itemAbilities(viewer, workspace, ref);

133

// The repositories that can be linked, for whoever may link them.

134

const projects = can.triage ? await part(workspaceProjects(workspace, viewer), "Repositories") : null;

135

return {

136

repos:

137

projects == null || isFailed(projects) || !projects.ok

138

? null

139

: projects.value.filter((p) => p.workspace.toLowerCase() === workspace).map((p) => p.slug).sort(),

...found.value,

workspace,

viewer,

member,

labels: isFailed(labels) ? labels : labels.ok ? labels.value : [],

145

milestones: isFailed(milestones) ? milestones : milestones.ok ? milestones.value : [],

146

links,

147

subscription,

148

coordination: isFailed(coordination) ? coordination : coordination.ok ? coordination.value : null,

149

sessionTrees,

150

// Only when it can start: the button is not shown otherwise.

151

agentSetup: agentSetup?.ok && agentSetup.value.available ? agentSetup.value : null,

152

endedClaims: ended

153

.flatMap((claims) => (claims?.ok ? claims.value : []))

154

.sort((a, b) => Date.parse(b.endedAt ?? b.createdAt) - Date.parse(a.endedAt ?? a.createdAt)),

155

members: members == null ? [] : isFailed(members) ? members : members.ok ? members.value.map((m) => m.username) : [],

156

handles: teams?.ok ? teams.value.map((team) => `@${team.workspace}/${team.slug}`) : [],

157

// The author can close and reopen their own work item, and whoever g1t's

158

// agent filed one for, that one; Triage and up, anyone's.

159

canManage: viewer != null && (viewer.id === workOwner(item).id || can.triage),

160

// Maintain and up edit and delete anyone's comments; everyone, their own.

161

canModerate: can.manage_settings,

can,

};

}

/** The repository a form names, by path, if it is one the item is linked to (or, to link, one of the workspace). */

167

function formRepo(form: FormData, workspace: string): { namespace: string; name: string } | null {

168

return repoFilter(workspace, String(form.get("repo") ?? "").trim());

169

}

170

171

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

172

assertSameOrigin(request);

173

const user = requireUser(context, request);

174

const workspace = params.owner.toLowerCase();

175

const number = Number(params.number);

176

const thread = { workspace, number };

177

const form = await request.formData();

178

const intent = String(form.get("action") ?? "");

179

// Subscribing to it, from the sidebar's Notifications (components/notifications.tsx).

180

const choice = subscriptionFromForm(form);

181

if (choice) {

182

const found = await work.getWorkItem(workspace, number, user);

183

if (!found.ok) return data({ error: "That work item could not be found." }, { status: 404 });

184

const subscription = await inbox.subscribe(user, { itemId: found.value.item.id, number }, choice.subscribed, choice.ignored).catch(() => null);

185

return subscription ? { error: null, subscription } : data({ error: "That did not save. Try again in a moment." }, { status: 503 });

186

}

187

// Who may do each is checked by the work service, against the item's

188

// workspace and origin; what it refuses says why.

189

switch (intent) {

190

case "open-pull": {

191

const repo = formRepo(form, workspace);

192

if (!repo) return { error: "Choose the repository to open it in.", action: intent };

193

const result = await work.openPull(user, repo, { item: number, agent: String(form.get("agent") ?? ""), runtime: "external" });

194

if (!result.ok) return { error: result.error.message, action: intent };

195

throw redirect(`/${repo.namespace}/${repo.name}/pull/${result.value.number}`);

196

}

197

// A session on the workspace's Anthropic account, in one of its

198

// repositories, which the integrations service checks the person may

199

// start; then its page.

200

case "start-session": {

201

const repo = formRepo(form, workspace);

202

if (!repo) return { error: "Link a repository for it to work in first.", action: intent };

203

const mode = AGENT_MODES.find((one) => one.mode === form.get("mode"))?.mode ?? "implement";

204

const instruction = String(form.get("instruction") ?? "").trim();

205

const result = await agentSessions.start(user, repo, { item: number, mode, instruction: instruction || undefined, handoff: false }).catch(() => null);

206

if (!result) return { error: "The session could not be started. Try again in a moment.", action: intent };

207

if (!result.ok) return { error: result.error.message, action: intent };

208

const started = result.value;

209

const to = sitePath(started.sessionUrl, request.url) ?? (started.session ? sessionPath(repo.namespace, started.session.id) : null);

210

if (!to) return { error: "No session was started.", action: intent };

throw redirect(to);

}

case "comment": {

const result = await work.addComment(user, thread, { body: String(form.get("body") ?? "") });

215

return result.ok ? null : { error: result.error.message };

216

}

217

// A reaction to the item or one of its comments, or taking one back.

218

case "react": {

219

const content = REACTIONS.find((one) => one.content === form.get("content"))?.content;

220

if (!content) return { error: "Pick a reaction.", action: intent };

221

const result = await work.react(user, thread, {

222

commentId: String(form.get("comment") ?? "") || undefined,

223

content,

224

remove: form.get("remove") === "1",

225

});

226

return result.ok ? null : { error: result.error.message, action: intent };

227

}

228

case "assign": {

229

const result = await work.updateWorkItem(user, workspace, number, {

230

assignees: [...form.getAll("assignee").map(String), ...String(form.get("others") ?? "").split(/[\s,]+/)].filter(Boolean),

231

});

232

return result.ok ? null : { error: result.error.message };

233

}

234

case "labels": {

235

const result = await work.setLabels(user, thread, form.getAll("label").map(String));

236

return result.ok ? null : { error: result.error.message, action: intent };

237

}

238

case "blocked-by": {

239

const blockedBy = parseBlockedBy(String(form.get("blocked_by") ?? ""));

240

if (!blockedBy) return { error: "List work item numbers, such as #12, #14.", action: intent };

241

const result = await work.updateWorkItem(user, workspace, number, { blocked_by: blockedBy });

242

return result.ok ? null : { error: result.error.message, action: intent };

243

}

244

case "milestone": {

245

const result = await work.updateWorkItem(user, workspace, number, { milestone: Number(form.get("milestone")) || 0 });

246

return result.ok ? null : { error: result.error.message, action: intent };

247

}

248

// Linking a repository in a role (a suggestion's Add as target is one), or unlinking one.

249

case "link":

250

case "unlink": {

251

const repo = formRepo(form, workspace);

252

if (!repo) return { error: "Choose a repository of the workspace.", action: "link" };

253

const role = LINK_ROLES.find((one) => one === form.get("role")) ?? "target";

254

const result =

255

intent === "link" ? await work.linkWorkItem(user, workspace, number, repo, role) : await work.unlinkWorkItem(user, workspace, number, repo);

256

return result.ok ? { linked: intent } : { error: result.error.message, action: "link" };

257

}

258

case "reopen": {

259

const result = await work.reopenWorkItem(user, workspace, number);

260

return result.ok ? null : { error: result.error.message };

261

}

262

// A comment's own text, changed or taken away: its author's to do, or

263

// a maintainer's, which work checks.

264

case "edit-comment":

265

case "delete-comment": {

266

const id = String(form.get("comment") ?? "");

267

const result =

268

intent === "edit-comment"

269

? await work.editComment(user, { workspace }, id, String(form.get("body") ?? ""))

270

: await work.deleteComment(user, { workspace }, id);

271

return result.ok ? null : { error: result.error.message, action: intent, comment: id };

272

}

273

case "close-completed":

274

case "close-not-planned": {

275

const result = await work.closeWorkItem(user, workspace, number, intent === "close-not-planned" ? "not_planned" : "completed");

276

return result.ok ? null : { error: result.error.message };

277

}

278

}

279

throw data(null, { status: 400 });

280

}

281

282

/** The path of a page of this site an address names, to redirect to; null for none or another site's. */

283

function sitePath(url: string | null | undefined, here: string): string | null {

284

if (!url) return null;

285

try {

286

const parsed = new URL(url, here);

287

const own = parsed.origin === new URL(here).origin || parsed.hostname === "g1t.sh";

288

return own ? parsed.pathname + parsed.search : null;

} catch {

return null;

}

}

/** What became of a pull request, in a few words. */

295

function outcome(pull: { status: Pull["status"] } & Partial<Pick<Pull, "mergedBy" | "supersededBy">>): string {

296

if (pull.status === "merged") return pull.mergedBy ? `Merged by ${pull.mergedBy}` : "Merged";

297

if (pull.supersededBy != null) return `Closed · #${pull.supersededBy} was merged instead`;

298

if (pull.status === "closed") return "Closed without merging";

299

if (pull.status === "draft") return "Draft · in progress";

300

return "Ready for review";

301

}

302

303

/** One of a repository's pull requests for the item, as a line under the repository. */

304

function RepoPullLine({ repo, pull, full }: { repo: string; pull: WorkPull; full?: Pull }) {

305

const merged = pull.status === "merged";

return (

<li>

<Link

to={`/${repo}/pull/${pull.number}`}

310

prefetch="intent"

311

className={`flex min-w-0 items-start gap-2.5 rounded-lg px-2 py-2 transition-colors hover:bg-raised ${pull.status === "closed" ? "opacity-70" : ""}`}

>

</span>

{pull.title} <span className="font-normal text-faint">#{pull.number}</span>

319

</span>

320

321

<span className={merged ? "font-medium text-merged" : ""}>{outcome({ status: pull.status, mergedBy: full?.mergedBy, supersededBy: full?.supersededBy })}</span>

322

<span>· {pull.author.username}</span>

323

{full && <ChangeSize files={full.files} />}

324

325

{pull.queue && <span>· in the merge queue, {pull.queue.position === 1 ? "next" : `#${pull.queue.position}`}</span>}

</span>

</span>

</Link>

</li>

);

}

/**

* One repository the item is linked to: its path and role, whether what

335

* closes the item has landed there (or, for a target, that it is still

336

* missing), and its pull requests for it. With Triage, the cross unlinks

337

* it (never its origin).

338

*/

339

function RepoCard({ repo, pulls, full, canLink }: { repo: ItemRepo; pulls: WorkPull[]; full: Map<string, Pull>; canLink: boolean }) {

340

const missing = repo.role === "target" && !repo.landed;

return (

{repo.path ? (

{repo.path}

</Link>

) : (

// Deleted before work items: nothing to link to, and no name kept.

350

<span className="min-w-0 truncate text-sm text-muted">A deleted repository</span>

351

)}

352

353

{repo.legacyNumber != null && (

354

355

<span className="shrink-0 text-xs text-faint">was #{repo.legacyNumber}</span>

</Hint>

)}

{repo.landed ? (

Landed

</span>

) : missing ? (

Missing

</span>

) : null}

{canLink && repo.role !== "origin" && (

</Button>

</Hint>

</Form>

)}

</span>

</div>

{pulls.length > 0 ? (

384

385

{pulls.map((pull) => (

))}

</ul>

) : (

<p className="mt-1 text-xs text-faint">{repo.role === "touched" ? "Touched by a commit." : "No pull request for it here yet."}</p>

)}

</li>

);

}

/** Link a repository: one of the workspace's, in a role. A sheet from the bottom on a phone. */

397

function LinkRepository({

workspace,

repos,

linked,

error,

wide = false,

}: {

workspace: string;

/** The workspace's repositories by name; null when they could not be read. */

406

repos: string[] | null;

407

linked: string[];

408

error?: string | null;

409

wide?: boolean;

410

}) {

411

const [open, setOpen] = useState(Boolean(error));

412

const choices = (repos ?? []).filter((name) => !linked.includes(`${workspace}/${name}`.toLowerCase()));

return (

Link a repository

</Button>

</DialogTrigger>

<Form method="post" className="grid gap-5" onSubmit={() => setOpen(false)}>

423

424

425

<DialogTitle>Link a repository</DialogTitle>

426

427

A target is where the work is meant to land: the item closes once every target has landed. Touched marks one it reached

428

without having to land there.

</DialogDescription>

</DialogHeader>

{repos == null ? (

) : (

<SelectField

name="repo"

aria-label="Repository"

437

defaultValue={choices[0] ?? ""}

438

options={choices.length > 0 ? choices.map((name) => ({ value: name, label: name })) : [{ value: "", label: "No other repository to link" }]}

/>

)}

<SelectField

name="role"

aria-label="Role"

defaultValue="target"

445

options={(["target", "touched"] as LinkRole[]).map((role) => ({ value: role, label: ROLE_LABELS[role] }))}

446

/>

447

{error && <ErrorText>{error}</ErrorText>}

Link

</SubmitButton>

</DialogFooter>

</Form>

</DialogContent>

</Dialog>

);

}

/** A repository the work may also belong in, with why, and Add as target. */

460

function SuggestionLine({ suggestion, workspace, canLink }: { suggestion: SuggestedTarget; workspace: string; canLink: boolean }) {

return (

{shortPath(suggestion.path, workspace)}

467

</Link>

468

<span className="mt-0.5 block text-xs text-muted">{suggestion.why}</span>

</span>

{canLink && (

Add as target

</SubmitButton>

</Form>

)}

</li>

);

}

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

485

const { item, pulls, comments, viewer, labels, members, canManage, can, workspace } = loaderData;

486

// Its Work, when it could be read; a failure says so in its places.

487

const coordination = isFailed(loaderData.coordination) ? null : loaderData.coordination;

488

const sessionTrees = isFailed(loaderData.sessionTrees) ? null : loaderData.sessionTrees;

489

// What changes to it (comments, labels, links, its pull requests) shows as it happens.

490

useWorkspaceLive({ workspace, member: loaderData.member, match: workPages.item(item.number), followBottom: true });

491

// Follow pull requests at work without a manual reload.

492

useRefreshWhile(pulls.some((pull) => pull.status === "draft" || pull.checkStatus === "queued" || pull.checkStatus === "running"));

493

// Claims lapse and sessions go idle with no event to say so: looked at again now and then.

494

useRefreshWhile((coordination?.claims.length ?? 0) > 0 || (coordination?.sessions.some((session) => session.state !== "ended") ?? false), 30_000);

495

const now = Date.now();

496

497

const open = item.state === "open";

498

const reference = `${workspace}#${item.number}`;

499

const canLink = can.triage;

500

// Each repository with its pull requests for the item: from its work

501

// context, else from the item's own pull requests.

502

const bySlug = new Map(item.repos.map((repo) => [repo.repoId, repo.path]));

503

const full = new Map(pulls.map((pull) => [`${pull.repoId}#${pull.number}`, pull]));

504

const repoRows: { repo: ItemRepo; pulls: WorkPull[] }[] = coordination

505

? coordination.repos.map((repo: WorkRepo) => ({ repo, pulls: repo.pulls }))

506

: item.repos.map((repo) => ({

507

repo,

508

pulls: pulls

509

.filter((pull) => pull.repoId === repo.repoId)

.map((pull) => ({

repo: repo.path,

number: pull.number,

title: pull.title,

status: pull.status,

branch: pull.branch,

headCommit: pull.headCommit,

517

author: { id: pull.author.id, username: pull.author.username },

518

checkStatus: pull.checkStatus,

519

requiredChecks: [],

520

mergeable: "unknown" as const,

overlaps: [],

queue: null,

})),

}));

const missing = coordination?.missing ?? missingTargets(item.repos);

526

const suggestions = (coordination?.suggestedTargets ?? []).filter((one) => !item.repos.some((repo) => repo.repoId === one.repoId));

527

// Where each session's page is: under the repository it was recorded in.

528

const sessionBase = (session: { repoId: string }) => `/${bySlug.get(session.repoId) ?? item.repos[0]?.path ?? workspace}`;

529

// Its decisions as a story, oldest first; the failure that still stands, with what answered it.

530

const decisions = coordination ? [...coordination.decisions].reverse() : [];

531

const failure = coordination?.lastIntegrationFailure ?? null;

532

const resolution = failure ? resolutionOf(coordination!.decisions, failure) : null;

533

const failureBase = failure ? `/${item.repos[0]?.path ?? workspace}` : "";

534

// Where a pull request or a session would be opened: a target still missing, else where it was filed.

535

const workIn = missing[0] ?? item.repos.find((repo) => repo.role === "target")?.path ?? originOf(item.repos)?.path ?? null;

536

const linkError = actionData && "action" in actionData && actionData.action === "link" ? actionData.error : null;

537

const sideError = actionData && "action" in actionData && ["blocked-by", "start-session", "react", "link", "open-pull"].includes(String(actionData.action));

538

539

return (

540

// On a phone: the title, then the item, its repositories and the

541

// conversation, then the sidebar as a Details disclosure; beside it

542

// from lg up. Its main actions sit at the bottom, within a thumb's reach.

{item.title} <span className="font-normal text-faint">#{item.number}</span>

</h1>

<PersonLink name={item.author.username} className="font-medium text-fg hover:underline" /> opened this{" "}

554

{item.requestedBy && (

555

<>

556

for <PersonLink name={item.requestedBy.username} className="font-medium text-fg-soft hover:underline" />{" "}

</>

)}

</span>

</span>

{item.labels.map((name) => (

563

// Without the workspace's labels, a chip still names its label, in the plain color.

564

<LabelChip key={name} name={name} color={isFailed(labels) ? undefined : labels.find((label) => label.name === name)?.color} />

565

))}

566

{open && item.agent && <Assignee agent={item.agent} />}

</div>

</header>

{item.resolutions.length > 0 && (

572

573

{item.resolutions.map((landed, index) => (

574

575

<Link

576

to={landed.pull != null ? `/${landed.repo}/pull/${landed.pull}` : `/${landed.repo}/commit/${landed.commit ?? ""}`}

577

className="flex items-start gap-3 rounded-xl border border-merged/40 bg-merged/5 px-4 py-3 text-sm transition-colors hover:border-merged/70"

578

>

579

{landed.pull != null ? <GitMerge size={18} className="mt-0.5 shrink-0 text-merged" /> : <GitCommitHorizontal size={18} className="mt-0.5 shrink-0 text-merged" />}

580

581

Landed in <span className="font-mono font-medium">{landed.repo}</span> by{" "}

582

{landed.pull != null ? (

583

<span className="font-medium">#{landed.pull}</span>

584

) : (

585

<span className="font-mono font-medium">{landed.commit?.slice(0, 7)}</span>

586

)}

587

{landed.pushedBy && <span className="text-muted">, pushed by {landed.pushedBy}</span>}

</span>

</Link>

</li>

))}

</ul>

)}

{item.body ? (

<div className={`${item.resolutions.length > 0 ? "mt-5" : "lg:mt-5"} rounded-xl border border-line bg-surface p-4 sm:p-5`}>

</div>

) : (

(loaderData.reactions?.length ?? 0) > 0 && <Reactions reactions={loaderData.reactions} viewer={viewer?.username ?? null} className="mt-3 lg:mt-5" />

)}

Repositories

</h2>

{missing.length > 0 && open && (

611

612

{missing.length} {missing.length === 1 ? "target" : "targets"} still to land

</span>

)}

{canLink && (

<LinkRepository workspace={workspace} repos={loaderData.repos} linked={item.repos.map((repo) => repo.path.toLowerCase())} error={linkError} />

</span>

)}

</span>

</div>

{isFailed(loaderData.coordination) && (

</div>

)}

{repoRows.length === 0 ? (

628

629

630

Filed in the workspace itself. Link the repositories it should land in, and it closes once each of them has.

</EmptyState>

</div>

) : (

<ul>

{repoRows.map(({ repo, pulls: repoPulls }) => (

))}

</ul>

</Card>

)}

{suggestions.length > 0 && open && (

643

<>

644

<h3 className="mt-5 text-sm font-medium">Suggested</h3>

645

<p className="mt-0.5 text-xs text-muted">Repositories it may also need, and why.</p>

646

647

<ul>

648

{suggestions.map((suggestion) => (

))}

</ul>

</Card>

</>

)}

{linkError && (

<ErrorText>{linkError}</ErrorText>

</div>

)}

</section>

{pulls.length === 0 && open && (

663

664

665

Point your own agent at <code className="font-mono">{reference}</code>.

</EmptyState>

</div>

)}

{failure && <IntegrationFailure className="mt-4" failure={failure} base={failureBase} fixed={resolution?.passed ?? resolution?.fix} />}

671

672

{isFailed(loaderData.coordination) ? (

673

<>

674

<h2 className="mt-10 font-semibold tracking-tight">Decisions</h2>

</div>

</>

) : (

decisions.length > 0 && (

681

<>

682

683

<h2 className="font-semibold tracking-tight">Decisions</h2>

</div>

</div>

</>

)

)}

<h2 className="mt-10 font-semibold tracking-tight">Discussion</h2>

694

695

696

{isFailed(loaderData.sessionTrees) && <Unavailable what="Its sessions" compact />}

697

<CommentList

698

comments={comments}

699

workspace={workspace}

700

viewerId={viewer?.id ?? null}

701

viewerName={viewer?.username ?? null}

702

extra={(sessionTrees ?? [])

703

.filter((session) => !session.parentId)

704

.map((session) => ({ id: session.id, at: session.startedAt, node: <TimelineSession session={session} base={sessionBase(session)} /> }))}

705

canModerate={loaderData.canModerate}

706

failed={actionData && "comment" in actionData ? { comment: String(actionData.comment), error: actionData.error } : null}

/>

</div>

{canManage && (

{open ? (

<>

Close as not planned

</SubmitButton>

Close work item

</SubmitButton>

</>

) : (

Reopen work item

</SubmitButton>

)}

</Form>

)}

</div>

</div>

{/* A refused comment edit says so under the comment; the sidebar's own say so there. */}

733

{!(actionData && ("comment" in actionData || sideError)) && <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>}

734

</div>

735

736

{/* On a phone, its main actions at the bottom, above the tab bar and clear of the keyboard. */}

737

{(canManage || canLink) && (

{canLink && (

<LinkRepository workspace={workspace} repos={loaderData.repos} linked={item.repos.map((repo) => repo.path.toLowerCase())} error={null} wide />

</div>

)}

{canManage && (

{open ? (

Close

</SubmitButton>

) : (

Reopen

</SubmitButton>

)}

</Form>

)}

</div>

)}

</div>

<DetailsDisclosure

className="max-lg:order-2 lg:col-start-2 lg:row-span-2 lg:row-start-1"

763

summary={detailsSummary([

764

[coordination?.claims.length ?? 0, "claim", "claims"],

765

[item.assignees.length, "assignee", "assignees"],

766

[item.labels.length, "label", "labels"],

767

[item.milestone ? 1 : 0, "milestone", "milestones"],

768

])}

769

>

770

{isFailed(loaderData.coordination) ? (

</div>

</section>

) : (

coordination && (

<ItemWorkPanel

work={coordination}

ended={loaderData.endedClaims}

base={sessionBase}

now={now}

canEdit={canManage}

error={actionData && "action" in actionData && actionData.action === "blocked-by" ? actionData.error : null}

787

sessions={sessionTrees}

788

start={

789

loaderData.agentSetup && open && workIn ? (

790

<StartSessionDialog

791

setup={loaderData.agentSetup}

792

repo={workIn}

793

error={actionData && "action" in actionData && actionData.action === "start-session" ? actionData.error : null}

/>

) : undefined

}

/>

</Boundary>

)

)}

{isFailed(loaderData.links) ? (

802

803

<h3 className="text-sm font-medium">From outside g1t</h3>

</div>

</section>

) : (

loaderData.links.length > 0 && (

810

811

<h3 className="text-sm font-medium">From outside g1t</h3>

812

813

{loaderData.links.map((link) => (

<a

href={link.url}

target="_blank"

rel="noreferrer"

className="group flex items-center gap-2 rounded-lg border border-line px-2.5 py-2 transition-colors hover:border-line-strong"

>

{PROVIDERS[link.provider].label} <span className="font-mono text-muted">{link.key}</span>

824

</span>

825

826

{link.count > 1 ? `Seen ${link.count} times, last ` : "Linked "}

827

<TimeAgo at={link.count > 1 ? link.lastSeen : link.firstSeen} />

</span>

</span>

</a>

</li>

))}

</ul>

</section>

)

)}

<h3 className="text-sm font-medium">Assignees</h3>

840

841

{item.assignees.map((name) => (

</li>

))}

{item.assignees.length === 0 && <li className="px-1 text-xs text-faint">Nobody yet</li>}

848

</ul>

849

{!coordination && item.blockedBy.length > 0 && (

850

851

Depends on{" "}

852

{item.blockedBy.map((number, index) => (

{index > 0 && ", "}

#{number}

</Link>

</span>

))}

{open ? ", which has to land first." : "."}

861

</p>

862

)}

863

{viewer && can.triage && open && (

864

865

{/* g1t takes it on in a session on the workspace's Claude, as whoever assigned it. */}

866

{loaderData.agentSetup && !item.assignees.includes("g1t") && (

867

868

869

{item.assignees.map((name) => (

))}

Assign to g1t

</SubmitButton>

</div>

</Form>

)}

{!item.assignees.includes(viewer.username) && (

882

883

884

{item.assignees.map((name) => (

))}

Assign yourself

</SubmitButton>

</div>

</Form>

)}

<summary className="cursor-pointer text-xs text-faint hover:text-fg">Assign people</summary>

897

898

899

{/* Without the workspace's people the picker still holds who is

900

assigned now, so saving never clears them. */}

901

{isFailed(members) && <Unavailable what="The workspace's people" compact />}

Save assignees

</SubmitButton>

</Form>

</details>

</div>

)}

</section>

{/* Another way to start the work: not once a pull request is doing it. */}

913

{open && !pulls.some((pull) => pull.status === "open" || pull.status === "draft") && (

914

915

916

<h3 className="text-sm font-medium">Bring your own agent</h3>

917

<p className="mt-1 text-xs text-muted">With g1t connected to your agent, ask it to work on this work item.</p>

</div>

{viewer && item.repos.length > 0 ? (

922

923

924

<p className="text-xs text-muted">Or open a draft pull request yourself and get a fork to push to.</p>

925

<SelectField

926

name="repo"

927

aria-label="Repository"

928

defaultValue={workIn ?? item.repos[0]!.path}

929

options={item.repos.map((repo) => ({ value: repo.path, label: `${repo.path} (${ROLE_LABELS[repo.role].toLowerCase()})` }))}

/>

Open pull request

</SubmitButton>

</div>

{actionData && "action" in actionData && actionData.action === "open-pull" && <ErrorText>{actionData.error}</ErrorText>}

938

{workIn && (

939

940

Already pushed a branch?{" "}

941

942

Open a pull request from it

</Link>

.

</p>

)}

</Form>

) : (

!viewer && (

Sign in

</Link>{" "}

to open a pull request.

</p>

)

)}

</section>

</Card>

)}

{isFailed(labels) ? (

) : (

<LabelsBox

labels={labels}

chosen={item.labels}

canEdit={canManage}

canCreate={can.manage_labels}

970

manageUrl={can.manage_labels ? workPath(workspace, "labels") : undefined}

971

/>

972

)}

973

{isFailed(loaderData.milestones) ? (

) : (

)}

{viewer &&

(isFailed(loaderData.subscription) ? (

) : (

))}

</DetailsDisclosure>

</div>

);

}

/** A sidebar section, under its usual heading, that could not be loaded. */

990

function SideUnavailable({ heading, what }: { heading: string; what: string }) {

991

return (

992

993

<h3 className="text-sm font-medium">{heading}</h3>

</div>

</section>

);

}