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

Agents get guardrails, run credentials, an audit log, a context hub, repository instructions and mentions; security upkeep; snake_case API6d ago

1

/**

2

* The audit log's entries, as the workspace's Audit log page, an agent

3

* run's page and a pull request's Agent panel show them.

4

*/

5

6

import { ShieldAlert, ShieldCheck } from "lucide-react";

7

import { useEffect } from "react";

8

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

9

10

import type { AuditEntry } from "@g1t/contracts";

11

12

import { actionLabel, actorLabel, ruleLabel, targetLabel } from "../lib/audit";

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.1d ago

13

import { TimeAgo } from "./ui";

14

import { Avatar } from "./ui/avatar";

15

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

Merge branch 'worktree-agent-ae1299e92e4462012'3d ago

16

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

Merge branch 'worktree-agent-aca4790ea223aa235'4d ago

17

import { Loading, SkeletonRows } from "./ui/skeleton";

Agents get guardrails, run credentials, an audit log, a context hub, repository instructions and mentions; security upkeep; snake_case API6d ago

18

19

function clock(at: string): string {

20

return new Date(at).toISOString().slice(11, 19);

21

}

22

23

/** Allowed or denied, and by which rule. */

24

export function OutcomeMark({ entry }: { entry: AuditEntry }) {

25

const denied = entry.outcome === "denied";

26

return (

Merge branch 'worktree-agent-ae1299e92e4462012'3d ago

27

28

<span

29

className={`inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs ${

30

denied ? "bg-danger/10 text-danger ring-1 ring-danger/30" : "bg-raised text-muted ring-1 ring-line"

31

}`}

32

>

33

{denied ? <ShieldAlert size={11} /> : <ShieldCheck size={11} />}

34

{entry.outcome}

35

36

</Hint>

Agents get guardrails, run credentials, an audit log, a context hub, repository instructions and mentions; security upkeep; snake_case API6d ago

37

);

38

}

39

40

/** Who acted, with an agent shown as working for someone. */

41

export function ActorLine({ entry }: { entry: AuditEntry }) {

42

return (

43

44

45

46

{entry.onBehalfOf ? (

47

<>

48

{entry.agent ?? entry.actor}

49

on behalf of

50

{entry.onBehalfOf}

51

</>

52

) : (

53

{entry.actor}

54

)}

55

56

57

);

58

}

59

60

/** The workspace's log, one row an entry, newest first. */

61

export function AuditTable({ entries, base }: { entries: AuditEntry[]; base: string }) {

62

return (

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.1d ago

63

64

<ol>

65

{entries.map((entry) => (

66

67

68

69

70

71

72

73

{actionLabel(entry.action)}

74

{targetLabel(entry)}

75

</div>

76

77

78

{ruleLabel(entry.rule)}

79

</Hint>

80

{entry.surface.toUpperCase()}

81

{entry.result && entry.result !== "ok" && result: {entry.result}}

82

{entry.runId && entry.repo && (

83

84

{entry.runKind ?? "agent"} run

85

</Link>

86

)}

87

{entry.runId && (

88

89

everything this run did

90

</Link>

91

)}

92

{entry.credentialId && (

93

94

95

Credential

96

{entry.credentialId}

97

98

</Hint>

99

)}

100

Merge branch 'worktree-agent-ae1299e92e4462012'3d ago

101

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.1d ago

102

Request id

103

{entry.requestId}

Merge branch 'worktree-agent-ae1299e92e4462012'3d ago

104

105

</Hint>

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.1d ago

106

107

{entry.outcome === "denied" && entry.message && {entry.message}}

108

</div>

109

110

111

112

</li>

113

))}

114

</ol>

115

</Card>

Agents get guardrails, run credentials, an audit log, a context hub, repository instructions and mentions; security upkeep; snake_case API6d ago

116

);

117

}

118

119

/**

120

* What an agent's run did, oldest first: every call it made and every git

121

* request, allowed or refused. `entries` come from the run's audit log.

122

*/

123

export function WhatItDid({ entries, compact = false }: { entries: AuditEntry[]; compact?: boolean }) {

124

if (entries.length === 0) {

125

return (

126

127

Nothing recorded yet. Every call this run makes with its credentials, and every clone and push, is listed here.

128

129

);

130

}

131

const who = entries.find((entry) => entry.onBehalfOf);

132

const denied = entries.filter((entry) => entry.outcome === "denied").length;

133

const shown = compact ? entries.slice(-8) : entries;

134

return (

135

136

137

{who ? actorLabel(who) : entries[0].actor} · {entries.length} {entries.length === 1 ? "action" : "actions"}

138

{denied > 0 && · {denied} refused}

139

{compact && entries.length > shown.length && ` · the latest ${shown.length}`}

140

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.1d ago

141

142

<ol>

143

{shown.map((entry) => (

144

145

146

{clock(entry.time)}

147

</time>

148

149

150

{actionLabel(entry.action)}

151

{targetLabel(entry)}

Agents get guardrails, run credentials, an audit log, a context hub, repository instructions and mentions; security upkeep; snake_case API6d ago

152

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.1d ago

153

{entry.outcome === "denied" && (

154

155

{entry.message ?? "Refused."} ({ruleLabel(entry.rule)})

156

157

)}

158

</div>

159

160

</li>

161

))}

162

</ol>

163

</Card>

Agents get guardrails, run credentials, an audit log, a context hub, repository instructions and mentions; security upkeep; snake_case API6d ago

164

</div>

165

);

166

}

167

168

/**

169

* What the runs on a pull request did, fetched from the project's

170

* `audit.json`, for the Agent panel. Shown to members only.

171

*/

172

export function RunAudit({ owner, repo, runIds, live }: { owner: string; repo: string; runIds: string[]; live: boolean }) {

173

const fetcher = useFetcher<{ entries: AuditEntry[] }>();

174

const search = new URLSearchParams(runIds.map((id) => ["run", id])).toString();

175

const url = `/${owner}/${repo}/audit.json?${search}`;

176

const { load } = fetcher;

177

useEffect(() => {

178

if (runIds.length > 0) load(url);

179

}, [load, url, runIds.length]);

180

useEffect(() => {

181

if (!live) return;

182

const timer = setInterval(() => {

183

if (document.visibilityState === "visible") load(url);

184

}, 8000);

185

return () => clearInterval(timer);

186

}, [live, load, url]);

187

const entries = fetcher.data?.entries;

Merge branch 'worktree-agent-aca4790ea223aa235'4d ago

188

if (runIds.length === 0) return null;

189

// There from the start, so the panel does not grow when the log arrives.

Agents get guardrails, run credentials, an audit log, a context hub, repository instructions and mentions; security upkeep; snake_case API6d ago

190

return (

191

192

Merge branch 'worktree-agent-aca4790ea223aa235'4d ago

193

{entries ? (

194

195

) : (

196

197

198

</Loading>

199

)}

Agents get guardrails, run credentials, an audit log, a context hub, repository instructions and mentions; security upkeep; snake_case API6d ago

200

201

Open the audit log

202

</Link>

203

</details>

204

);

205

}