apps/web/app/components/agents/abilities.tsx · flagon-io/g1t

Each agent has an Abilities tab: g1t's built-ins, always on within the asker's access; its computer, coming; each connected integration's actions one row each, read, import, comment or resolve, with a level for each, alone, alone when the person asked for it, ask first or never, and whose connection it runs on; and MCP servers an owner adds. Reading is alone, writing inside g1t follows today's choices, anything that leaves g1t asks first, and production deploys can't go above ask. The agents service enforces every level: ask first posts a card to allow or deny and parks a session until it's answered, a refusal names its rule in the transcript and the audit log, and a missing ability posts a request to owners. The agent abilities guide says how.3d ago

1

import { ExternalLink, Plus, RefreshCw, Trash2 } from "lucide-react";

2

import { useId } from "react";

3

import { Link, useFetcher } from "react-router";

4

5

import type { Ability, AbilityLevel, AbilitySection, AbilitySource, McpServer } from "@g1t/contracts";

6

import { ABILITY_LEVEL_LABELS } from "@g1t/contracts/abilities";

7

8

import { cn } from "../../lib/cn";

9

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

10

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

11

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

12

import { Field, FieldDescription, FieldError, FieldLabel } from "../ui/field";

13

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

14

import { Input } from "../ui/input";

15

import { SelectField } from "../ui/select";

16

import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";

17

import { type ActionResult, useDialogFetcher } from "./dialogs";

18

19

/** The level choices, short, as the segmented control shows them. */

20

const SHORT: Record<AbilityLevel, string> = { alone: "Alone", asked: "When asked", ask: "Ask first", never: "Never" };

21

22

/** The words a row's kind gets as a tag. */

23

const KINDS = { read: "Reads", write: "Writes in g1t", send: "Leaves g1t", restricted: "Restricted" } as const;

24

25

type Fetcher = ReturnType<typeof useFetcher<ActionResult>>;

26

27

/** What a pending change says a row is, before the page reloads. */

28

function pendingOf(fetcher: Fetcher, id: string): { level?: AbilityLevel; credentials?: string } | null {

29

const data = fetcher.formData;

30

if (!data || data.get("ability") !== id) return null;

31

const intent = data.get("intent");

32

if (intent === "level") return { level: String(data.get("level")) as AbilityLevel };

33

if (intent === "credentials") return { credentials: String(data.get("credentials")) };

34

return null;

35

}

36

37

/** The level control: a segmented control for those who may change it, the level as a badge for everyone else. */

38

export function LevelControl({ ability, agentName, canEdit, fetcher }: { ability: Ability; agentName: string; canEdit: boolean; fetcher: Fetcher }) {

39

const pending = pendingOf(fetcher, ability.id);

40

const level = pending?.level ?? ability.level;

41

if (ability.status === "coming") return <Badge tone="neutral">Coming</Badge>;

42

if (!canEdit || !ability.can_change || ability.choices.length <= 1) {

43

return (

44

45

{ability.choices.length <= 1 && ability.group === "g1t" ? "Always on" : ABILITY_LEVEL_LABELS[level]}

46

</Badge>

47

);

48

}

49

return (

50

<ToggleGroup

51

type="single"

52

size="sm"

53

variant="outline"

54

value={level}

55

aria-label={`${ability.label} for ${agentName}`}

56

disabled={fetcher.state !== "idle"}

57

onValueChange={(next) => {

58

if (!next || next === level) return;

59

fetcher.submit({ intent: "level", ability: ability.id, level: next }, { method: "post" });

60

}}

61

>

62

{ability.choices.map((choice) => (

63

64

{SHORT[choice]}

65

</ToggleGroupItem>

66

))}

67

</ToggleGroup>

68

);

69

}

70

71

/** Whose connection an integration ability runs on: the workspace's, or the asking person's own. */

72

export function CredentialsControl({ ability, source, canEdit, fetcher }: { ability: Ability; source: AbilitySource; canEdit: boolean; fetcher: Fetcher }) {

73

if (ability.credentials === null) return null;

74

const pending = pendingOf(fetcher, ability.id);

75

const value = pending?.credentials ?? ability.credentials;

76

const options = [

77

{ value: "workspace", label: "Workspace connection", description: `Acts as the workspace's ${source.name} connection. Owners choose this.` },

78

{

79

value: "asker",

80

label: "Asker's connection",

81

description: ability.personal_available ? `Acts as the asking person's own ${source.name} account; a Connect card when they have none.` : `${source.name} can't be connected per person yet.`,

82

disabled: !ability.personal_available,

83

},

84

];

85

if (!canEdit || !ability.can_change) {

86

return <span className="text-xs text-faint">{value === "asker" ? "Asker's connection" : "Workspace connection"}</span>;

87

}

88

return (

89

<SelectField

90

size="sm"

91

className="w-auto min-w-44"

92

aria-label={`Whose ${source.name} connection ${ability.label.toLowerCase()} runs on`}

93

options={options}

94

value={value}

95

disabled={fetcher.state !== "idle"}

96

onValueChange={(next) => {

97

if (next === value) return;

98

fetcher.submit({ intent: "credentials", ability: ability.id, credentials: next }, { method: "post" });

99

}}

100

/>

101

);

102

}

103

104

/** One ability's row: what it is, its tools, its level, and whose connection. */

105

export function AbilityRow({ ability, source, agentName, canEdit, fetcher }: { ability: Ability; source: AbilitySource; agentName: string; canEdit: boolean; fetcher: Fetcher }) {

106

const off = ability.level === "never" || ability.status === "coming" || (ability.group === "integration" && !source.connected);

107

return (

108

109

110

111

<h4 className="text-sm font-medium">{ability.label}</h4>

112

{ability.status === "ready" && <Badge tone={ability.kind === "restricted" ? "danger" : ability.kind === "send" ? "warn" : "neutral"}>{KINDS[ability.kind]}</Badge>}

113

</div>

114

<p className="mt-0.5 text-sm text-muted">{ability.about}</p>

115

{ability.tools.length > 0 && (

116

117

{ability.tools.map((tool) => (

118

119

{tool}

120

</li>

121

))}

122

</ul>

123

)}

124

</div>

125

126

127

128

</div>

129

</li>

130

);

131

}

132

133

/** A source's block: its name, whether it is connected, and its rows. */

134

export function SourceBlock({

135

section,

136

source,

137

agent,

138

canEdit,

139

isOwner,

140

slug,

141

fetcher,

142

}: {

143

section: AbilitySection;

144

source: AbilitySource;

145

agent: { handle: string; display_name: string };

146

canEdit: boolean;

147

isOwner: boolean;

148

slug: string;

149

fetcher: Fetcher;

150

}) {

151

const integration = section.group === "integration";

152

const mcp = section.group === "mcp";

153

const askHref = `/${slug}/-/marketplace/integrations/${source.id}`;

154

return (

155

156

{(integration || mcp) && (

157

158

159

160

{source.name}

161

</h3>

162

{integration && <Badge tone={source.connected ? "success" : "neutral"}>{source.connected ? "Connected" : "Not connected"}</Badge>}

163

{mcp && (

164

165

{source.href}

166

167

</a>

168

)}

169

</div>

170

171

{integration && !source.connected && (isOwner ? <ButtonLink to={source.href ?? askHref} variant="quiet">Connect</ButtonLink> : <ButtonLink to={askHref} variant="quiet">Ask an owner</ButtonLink>)}

172

{integration && source.connected && source.href && (

173

174

Manage

175

</Link>

176

)}

177

{mcp && isOwner && (

178

<>

179

<fetcher.Form method="post">

180

181

182

183

184

185

</SubmitButton>

186

</Hint>

187

</fetcher.Form>

188

<fetcher.Form method="post" onSubmit={(event) => !confirm(`Remove the ${source.name} server from ${agent.display_name}? Its tools stop being offered at once.`) && event.preventDefault()}>

189

190

191

192

193

194

</SubmitButton>

195

</Hint>

196

</fetcher.Form>

197

</>

198

)}

199

</div>

200

</header>

201

)}

202

{source.note && <p className="px-4 py-3 text-sm text-muted">{source.note}</p>}

203

{source.abilities.length > 0 && (

204

205

{source.abilities.map((ability) => (

206

207

))}

208

</ul>

209

)}

210

</article>

211

);

212

}

213

214

/** Owners add an MCP server by name and address; its tools are listed from it before it is saved. */

215

export function AddMcpServerDialog({ agentName, count, max }: { agentName: string; count: number; max: number }) {

216

const { fetcher, open, setOpen, error, busy } = useDialogFetcher("mcp-add");

217

const id = useId();

218

return (

219

220

221

222

223

Add a server

224

</Button>

225

</DialogTrigger>

226

227

228

<DialogTitle>Add an MCP server</DialogTitle>

229

230

Its tools become abilities of {agentName}: each a write that asks first, unless the server says the tool only reads. The address must be HTTPS on a public host. Servers that need a key aren't supported yet.

231

</DialogDescription>

232

</DialogHeader>

233

<fetcher.Form method="post" className="grid gap-5">

234

235

<Field>

236

237

238

<FieldDescription>Lowercase letters, digits and hyphens. Tools are offered as name__tool.</FieldDescription>

239

</Field>

240

<Field>

241

<FieldLabel htmlFor={`${id}-url`}>Address</FieldLabel>

242

243

<FieldDescription>Where it speaks MCP over HTTP.</FieldDescription>

244

</Field>

245

<FieldError>{error}</FieldError>

246

247

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

248

Cancel

249

</Button>

250

251

Add server

252

</SubmitButton>

253

</DialogFooter>

254

</fetcher.Form>

255

</DialogContent>

256

</Dialog>

257

);

258

}

259

260

export { McpServerCount };

261

262

/** "2 of 10 servers". */

263

function McpServerCount({ servers, max }: { servers: McpServer[]; max: number }) {

264

return <span className="text-faint">{servers.length ? `${servers.length} of ${max}` : ""}</span>;

265

}