apps/web/app/routes/workspace/customize/plugins.tsx · flagon-io/g1t

import { AvailabilityBadge, Chips, FeaturedBanner, FilterMenu, ListingCard, ListingGrid, ListingMark, NoAnswer, RequestButton, SectionHead, Waiting } from "../../../components/customize";

21

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

22

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

23

import { Button } from "../../../components/ui/button";

24

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../components/ui/dropdown-menu";

25

import { Hint } from "../../../components/ui/hint";

26

import { Switch } from "../../../components/ui/switch";

27

import { type PluginSort, categoriesOf, claudeCodeOnly, componentChips, filterPlugins, groupByMarketplace, matches, nextParams, pluginListingRef, pluginPath, readPluginFilters, readQuery, readView, requestedBy, waitingFor, withParams } from "../../../lib/customize";

28

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

29

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

30

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

31

32

export { shouldRevalidate } from "../../../lib/customize.server";

33

34

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

35

return page(args, { title: `Plugins · Customize · ${params.owner} · g1t` });

36

}

37

38

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ installs: PluginInstall[] | null; discover: PluginListing[] | null | undefined }> {

39

const viewer = requireUser(context, request);

40

const slug = params.owner.toLowerCase();

41

if (!roleIn(viewer, slug)) throw data(null, { status: 404 });

42

const discovering = readView(new URL(request.url).searchParams) === "discover";

43

const [installs, discover] = await Promise.all([

44

readOrNull(workspaceAgents.pluginInstalls(slug, viewer)),

45

// Only Discover reads the marketplaces; undefined says it wasn't asked for.

46

discovering ? readOrNull(workspaceAgents.discover(slug, viewer)).then((found) => found?.plugins ?? null) : Promise.resolve(undefined),

47

]);

48

return { installs, discover };

49

}

50

51

/** Install a plugin, update it to its marketplace's current version, switch it on or off, or uninstall it. */

52

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

53

const { viewer, slug, form } = await agentsAction(request, context, params.owner);

54

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

55

const ref = String(form.get("plugin") ?? "");

56

switch (intent) {

57

case "install":

58

return answer(intent, workspaceAgents.installPlugin(slug, viewer, ref));

59

case "update":

60

return answer(intent, workspaceAgents.updatePlugin(slug, viewer, ref));

61

case "switch":

62

return answer(intent, workspaceAgents.setPluginEnabled(slug, viewer, ref, form.get("enabled") === "on"));

63

case "uninstall":

64

return answer(intent, workspaceAgents.uninstallPlugin(slug, viewer, ref));

65

default:

66

return { ok: false, intent, error: "Unknown request." };

}

}

export default function CustomizePlugins({ loaderData }: Route.ComponentProps) {

71

const [params] = useSearchParams();

72

return readView(params) === "discover" ? <Discover listings={loaderData.discover ?? null} /> : <Yours installs={loaderData.installs} />;

73

}

74

75

// ── Yours ────────────────────────────────────────────────────────────────

76

77

function Yours({ installs }: { installs: PluginInstall[] | null }) {

78

const { slug, owner } = useCustomize();

79

const [params] = useSearchParams();

80

const query = readQuery(params);

81

if (!installs) return <NoAnswer what="Installed plugins" />;

82

const shown = installs.filter((install) => matches([install.name, install.display_name, install.description, install.marketplace, ...install.components.skills.map((s) => s.name), ...install.components.agents.map((a) => a.name)], query));

83

const updates = installs.filter((install) => install.update).length;

84

return (

85

86

<SectionHead id="installed" title="Installed" aside={updates > 0 ? <span className="text-warn">{updates === 1 ? "1 update available" : `${updates} updates available`}</span> : `${installs.length}`}>

87

Each brought its skills to the library, its agents to Templates and its remote servers to Connectors, pinned to the commit it was read at. Everything else in it reaches Claude Code when it runs on a runner.

88

</SectionHead>

89

{shown.length === 0 ? (

90

91

{query ? (

92

"Try another word, or look in Discover."

) : (

<>

Find one in{" "}

Discover

</Link>

: public skills, agents and connectors in the open plugin format, from any marketplace.

</>

)}

</EmptyState>

) : (

{shown.map((install) => (

))}

</ListingGrid>

)}

</section>

);

}

/** An installed plugin: what it brought, whether it is on, and the update, when there is one. */

115

function InstallCard({ install, slug, owner }: { install: PluginInstall; slug: string; owner: boolean }) {

116

const fetcher = useFetcher<ActionResult>({ key: `install-${install.id}` });

117

const error = fetcher.state === "idle" && fetcher.data && !fetcher.data.ok ? fetcher.data.error : null;

118

const pending = fetcher.formData?.get("intent") === "switch" ? fetcher.formData.get("enabled") === "on" : null;

119

const on = pending ?? install.enabled;

120

const name = install.display_name ?? install.name;

121

const runner = claudeCodeOnly(install.components);

122

return (

123

<ListingCard

124

mark={<ListingMark id={install.ref} name={name} />}

125

title={name}

126

to={pluginPath(slug, install.ref)}

127

description={install.description}

muted={!on}

badge={

<>

{install.update && (

<Badge tone="warn">Update available{install.update.version ? `: ${install.update.version}` : ""}</Badge>

</span>

</Hint>

)}

{!on && !install.update && <Badge>Switched off</Badge>}

139

{owner && <InstallMenu install={install} fetcher={fetcher} />}

140

</>

141

}

142

meta={`${install.version ? `v${install.version}` : (install.sha?.slice(0, 7) ?? "")} · ${install.marketplace} · by @${install.installed_by}`}

action={

owner ? (

<Switch checked={on} disabled={fetcher.state !== "idle"} aria-label={`${name} on`} onCheckedChange={(next) => fetcher.submit({ intent: "switch", plugin: install.ref, enabled: next ? "on" : "off" }, { method: "post" })} />

</span>

</Hint>

) : (

)

}

>

{runner.length > 0 && <Chips items={[`Claude Code only: ${runner.join(" · ")}`]} muted label="For Claude Code on a runner" />}

158

{install.problems.length > 0 && <p className="text-xs text-warn">{install.problems.length === 1 ? "1 problem" : `${install.problems.length} problems`} when it was read</p>}

159

{error && <p className="text-xs text-danger">{error}</p>}

</div>

</ListingCard>

);

}

/** Update an install, or uninstall it (asked twice). */

166

function InstallMenu({ install, fetcher }: { install: PluginInstall; fetcher: ReturnType<typeof useFetcher<ActionResult>> }) {

return (

</Button>

</DropdownMenuTrigger>

{install.update && (

<>

<DropdownMenuItem onSelect={() => fetcher.submit({ intent: "update", plugin: install.ref }, { method: "post" })}>

178

179

Update{install.update.version ? ` to ${install.update.version}` : ""}

</DropdownMenuItem>

</>

)}

<Confirm

title={`Uninstall ${install.display_name ?? install.name}?`}

186

confirm="Uninstall"

187

fields={{ intent: "uninstall", plugin: install.ref }}

188

fetcherKey={`uninstall-${install.id}`}

189

trigger={

190

<DropdownMenuItem onSelect={(event) => event.preventDefault()} className="text-danger data-highlighted:text-danger [&_svg]:text-danger">

Uninstall

</DropdownMenuItem>

}

>

Its skills leave the library, its agents leave Templates and its connectors are removed, at once. Agents hired from it stay as they are.

197

</Confirm>

198

</DropdownMenuContent>

</DropdownMenu>

);

}

// ── Discover ─────────────────────────────────────────────────────────────

204

205

function Discover({ listings }: { listings: PluginListing[] | null }) {

206

const { slug, owner, username, requests } = useCustomize();

207

const [params, setParams] = useSearchParams();

208

if (!listings) return <NoAnswer what="Public plugins" />;

209

const filters = readPluginFilters(params);

210

const shown = filterPlugins(listings, filters);

211

const categories = categoriesOf(listings);

212

const marketplaces = [...new Set(listings.map((listing) => listing.marketplace))].sort();

213

const asked = requests?.requests ?? [];

214

const set = (changes: Record<string, string | null>) => setParams(nextParams(params, changes), { replace: true, preventScrollReset: true });

215

const card = (listing: PluginListing) => (

);

return (

<FeaturedBanner

title="Install public plugins as they are"

action={

{marketplaces.length} {marketplaces.length === 1 ? "marketplace" : "marketplaces"}

</ButtonLink>

}

>

Every plugin in the marketplaces this workspace reads, in the open plugin format: skills, agents and connectors for g1t's agents, and everything else for Claude Code on a runner. Owners add marketplaces by address.

230

</FeaturedBanner>

231

232

{categories.length > 0 && <FilterMenu label="Category" all="All" value={filters.category} options={categories.map((c) => ({ value: c, label: c }))} onChange={(next) => set({ category: next })} />}

233

<FilterMenu label="Marketplace" all="All" value={filters.marketplace} options={marketplaces.map((m) => ({ value: m, label: m }))} onChange={(next) => set({ marketplace: next })} />

234

<FilterMenu label="Sort" all="By marketplace" value={filters.sort === "name" ? "name" : null} options={[{ value: "name", label: "By name" }]} onChange={(next) => set({ sort: (next as PluginSort | null) ?? null })} />

235

236

{shown.length} of {listings.length}

237

</span>

238

</div>

239

{shown.length === 0 ? (

240

<EmptyState title="No plugin matches">Try another word, category or marketplace, or add a marketplace that lists it.</EmptyState>

241

) : filters.sort === "name" ? (

242

<ListingGrid>{shown.map(card)}</ListingGrid>

243

) : (

244

groupByMarketplace(shown).map((group) => (

245

246

247

<ListingGrid>{group.items.map(card)}</ListingGrid>

</section>

))

)}

</div>

);

}

/** A plugin in Discover: what it is and who made it, whether it can be installed here, and Install or Request. */

256

function PluginCard({ listing, slug, owner, requested, waiting }: { listing: PluginListing; slug: string; owner: boolean; requested: boolean; waiting: number }) {

257

const fetcher = useFetcher<ActionResult>({ key: `discover-plugin-${listing.ref}` });

258

const error = fetcher.state === "idle" && fetcher.data && !fetcher.data.ok ? fetcher.data.error : null;

259

const name = listing.display_name ?? listing.name;

260

const available = listing.availability.kind === "available";

261

const action = !available ? null : owner ? (

262

<fetcher.Form method="post">

Install

</SubmitButton>

</fetcher.Form>

) : (

);

return (

<ListingCard

mark={<ListingMark id={listing.ref} name={name} />}

276

title={name}

277

to={pluginPath(slug, listing.ref)}

278

description={listing.description}

279

muted={listing.availability.kind === "soon" || listing.availability.kind === "unavailable"}

280

badge={available ? null : <AvailabilityBadge availability={listing.availability} />}

281

meta={

282

<>

283

{listing.author ? `by ${listing.author} · ` : ""}

284

{listing.marketplace}

285

{listing.version ? ` · v${listing.version}` : ""}

{waiting > 0 && (

<>

{" · "}

</>

)}

</>

}

action={action}

>

{(listing.skills.length > 0 || listing.category) && (

297

<Chips items={[...(listing.category ? [listing.category] : []), ...listing.skills.slice(0, 4), ...(listing.skills.length > 4 ? [`+${listing.skills.length - 4} more`] : [])]} muted={!available} label="What it brings" />

298

)}

299

{error && <p className="mt-2 text-xs text-danger">{error}</p>}

300

</ListingCard>

301

);

302

}