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}` : ""}`

60

: null,

61

// The card shows the title and the state.

62

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

type: "article",

});

}

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

68

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

69

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

70

return { namespace, name };

71

}

72

73

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

74

const viewer = getViewer(context);

75

const workspace = params.owner.toLowerCase();

76

const number = Number(params.number);

77

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

78

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

79

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

80

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

81

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

82

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

83

work.getWorkItem(workspace, number, viewer),

84

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

85

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

86

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

87

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

88

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

89

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

90

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

91

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

92

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

93

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

94

// (services/work `get_work`).

95

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

96

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

97

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

98

Promise.all(

99

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

100

),

101

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

102

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

103

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

104

]);

105

if (!found.ok) {

106

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

107

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

108

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

109

throw notFound("page");

110

}

111

const { item } = found.value;

112

const origin = originOf(item.repos);

113

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

114

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

115

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

116

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

117

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

118

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

119

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

120

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

121

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

122

part(

123

Promise.all(

124

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

125

).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;

130

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

131

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

132

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

133

return {

134

repos:

135

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

136

? null

137

: 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 : [],

143

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

144

links,

145

subscription,

146

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

147

sessionTrees,

148

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

149

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

150

endedClaims: ended

151

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

152

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

153

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

154

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

155

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

156

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

157

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

158

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

159

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). */

165

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

166

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

167

}

168

169

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

170

assertSameOrigin(request);

171

const user = requireUser(context, request);

172

const workspace = params.owner.toLowerCase();

173

const number = Number(params.number);

174

const thread = { workspace, number };

175

const form = await request.formData();

176

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

177

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

178

const choice = subscriptionFromForm(form);

179

if (choice) {

180

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

181

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

182

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

183

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

184

}

185

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

186

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

187

switch (intent) {

188

case "open-pull": {

189

const repo = formRepo(form, workspace);

190

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

191

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

192

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

193

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

194

}

195

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

196

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

197

// start; then its page.

198

case "start-session": {

199

const repo = formRepo(form, workspace);

200

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

201

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

202

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

203

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

204

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

205

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

206

const started = result.value;

207

const to = sitePath(started.sessionUrl, request.url) ?? (started.session ? `/${repo.namespace}/${repo.name}/sessions/${started.session.id}` : null);

208

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") ?? "") });

213

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

214

}

215

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

216

case "react": {

217

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

218

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

219

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

220

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

221

content,

222

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

223

});

224

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

225

}

226

case "assign": {

227

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

228

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

229

});

230

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

231

}

232

case "labels": {

233

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

234

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

235

}

236

case "blocked-by": {

237

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

238

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

239

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

240

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

241

}

242

case "milestone": {

243

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

244

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

245

}

246

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

247

case "link":

248

case "unlink": {

249

const repo = formRepo(form, workspace);

250

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

251

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

252

const result =

253

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

254

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

255

}

256

case "reopen": {

257

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

258

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

259

}

260

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

261

// a maintainer's, which work checks.

262

case "edit-comment":

263

case "delete-comment": {

264

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

265

const result =

266

intent === "edit-comment"

267

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

268

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

269

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

270

}

271

case "close-completed":

272

case "close-not-planned": {

273

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

274

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

275

}

276

}

277

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

278

}

279

280

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

281

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

282

if (!url) return null;

283

try {

284

const parsed = new URL(url, here);

285

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

286

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

} catch {

return null;

}

}

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

293

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

294

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

295

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

296

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

297

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

298

return "Ready for review";

299

}

300

301

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

302

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

303

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

return (

<li>

<Link

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

308

prefetch="intent"

309

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>

317

</span>

318

319

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

320

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

321

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

322

323

{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

333

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

334

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

335

* it (never its origin).

336

*/

337

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

338

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

return (

{repo.path}

</Link>

{repo.legacyNumber != null && (

347

348

<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 ? (

377

378

{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. */

390

function LinkRepository({

workspace,

repos,

linked,

error,

wide = false,

}: {

workspace: string;

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

399

repos: string[] | null;

400

linked: string[];

401

error?: string | null;

402

wide?: boolean;

403

}) {

404

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

405

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)}>

416

417

418

<DialogTitle>Link a repository</DialogTitle>

419

420

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

421

without having to land there.

</DialogDescription>

</DialogHeader>

{repos == null ? (

) : (

<SelectField

name="repo"

aria-label="Repository"

430

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

431

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"

438

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

439

/>

440

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

Link

</SubmitButton>

</DialogFooter>

</Form>

</DialogContent>

</Dialog>

);

}

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

453

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

return (

{shortPath(suggestion.path, workspace)}

460

</Link>

461

<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) {

478

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

479

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

480

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

481

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

482

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

483

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

484

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

485

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

486

const now = Date.now();

487

488

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

489

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

490

const canLink = can.triage;

491

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

492

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

493

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

494

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

495

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

496

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

497

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

498

repo,

499

pulls: pulls

500

.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,

508

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

509

checkStatus: pull.checkStatus,

510

requiredChecks: [],

511

mergeable: "unknown" as const,

overlaps: [],

queue: null,

})),

}));

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

517

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

518

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

519

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

520

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

521

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

522

const failure = coordination?.lastIntegrationFailure ?? null;

523

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

524

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

525

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

526

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

527

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

528

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

529

530

return (

531

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

532

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

533

// 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{" "}

545

{item.requestedBy && (

546

<>

547

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

</>

)}

</span>

</span>

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

554

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

555

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

556

))}

557

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

</div>

</header>

{item.resolutions.length > 0 && (

563

564

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

565

566

<Link

567

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

568

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"

569

>

570

{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" />}

571

572

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

573

{landed.pull != null ? (

574

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

575

) : (

576

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

577

)}

578

{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 && (

602

603

{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 ? (

619

620

621

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 && (

634

<>

635

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

636

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

637

638

<ul>

639

{suggestions.map((suggestion) => (

))}

</ul>

</Card>

</>

)}

{linkError && (

<ErrorText>{linkError}</ErrorText>

</div>

)}

</section>

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

654

655

656

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} />}

662

663

{isFailed(loaderData.coordination) ? (

664

<>

665

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

</div>

</>

) : (

decisions.length > 0 && (

672

<>

673

674

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

</div>

</div>

</>

)

)}

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

685

686

687

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

688

<CommentList

689

comments={comments}

690

workspace={workspace}

691

viewerId={viewer?.id ?? null}

692

viewerName={viewer?.username ?? null}

693

extra={(sessionTrees ?? [])

694

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

695

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

696

canModerate={loaderData.canModerate}

697

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. */}

724

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

725

</div>

726

727

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

728

{(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"

754

summary={detailsSummary([

755

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

756

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

757

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

758

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

759

])}

760

>

761

{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}

778

sessions={sessionTrees}

779

start={

780

loaderData.agentSetup && open && workIn ? (

781

<StartSessionDialog

782

setup={loaderData.agentSetup}

783

repo={workIn}

784

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

/>

) : undefined

}

/>

</Boundary>

)

)}

{isFailed(loaderData.links) ? (

793

794

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

</div>

</section>

) : (

loaderData.links.length > 0 && (

801

802

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

803

804

{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>

815

</span>

816

817

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

818

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

</span>

</span>

</a>

</li>

))}

</ul>

</section>

)

)}

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

831

832

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

</li>

))}

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

839

</ul>

840

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

841

842

Depends on{" "}

843

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

{index > 0 && ", "}

#{number}

</Link>

</span>

))}

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

852

</p>

853

)}

854

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

855

856

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

857

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

858

859

860

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

))}

Assign to g1t

</SubmitButton>

</div>

</Form>

)}

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

873

874

875

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

))}

Assign yourself

</SubmitButton>

</div>

</Form>

)}

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

888

889

890

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

891

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

892

{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. */}

904

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

905

906

907

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

908

<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 ? (

913

914

915

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

916

<SelectField

917

name="repo"

918

aria-label="Repository"

919

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

920

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>}

929

{workIn && (

930

931

Already pushed a branch?{" "}

932

933

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}

961

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

962

/>

963

)}

964

{isFailed(loaderData.milestones) ? (

) : (

)}

{viewer &&

(isFailed(loaderData.subscription) ? (

) : (

))}

</DetailsDisclosure>

</div>

);

}

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

981

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

982

return (

983

984

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

</div>

</section>

);

}