Skip to content
Sign up

flagon-io/g1t

public
0
196 linesCodeBlameRaw
1import {
2 CircleCheck,
3 CircleDot,
4 CircleSlash,
5 GitMerge,
6 GitPullRequest,
7 MessageCircleQuestion,
8 MessageSquare,
9 Play,
10 Terminal,
11} from "lucide-react";
12import type { ReactNode } from "react";
13import { Link } from "react-router";
14
15import type { AgentMessage, G1tEvent } from "@g1t/contracts";
16
17import { TimeAgo } from "./ui";
18import { Avatar } from "./ui/avatar";
19
20/** Whether an actor is g1t itself: its agent or its machinery. */
21const isG1t = (actor: string | null): actor is string => actor === "g1t";
22
23type Line = { icon: ReactNode; tone: string; actor: string | null; text: ReactNode; coordination?: boolean };
24
25/** One event as a sentence, or null for those not worth a line. */
26function line(event: G1tEvent, base: string): Line | null {
27 const ref = (number: number) => (
28 <Link to={`${base}/issues/${number}`} prefetch="intent" className="font-medium text-fg hover:underline">
29 #{number}
30 </Link>
31 );
32 const actor = event.actor;
33 switch (event.type) {
34 case "issue.opened":
35 return {
36 icon: <CircleDot size={14} />,
37 tone: isG1t(actor) ? "text-accent" : "text-muted",
38 actor,
39 text: isG1t(actor) ? <>filed {ref(event.data.number)} for something it found</> : <>opened {ref(event.data.number)}</>,
40 coordination: isG1t(actor),
41 };
42 case "pull.opened":
43 return {
44 icon: <Play size={14} />,
45 tone: "text-accent",
46 actor: event.data.agent,
47 text: (
48 <>
49 started on {event.data.issue != null ? ref(event.data.issue) : "a change"} in {ref(event.data.number)}
50 </>
51 ),
52 };
53 case "pull.ready":
54 return { icon: <GitPullRequest size={14} />, tone: "text-info", actor, text: <>marked {ref(event.data.number)} ready for review</> };
55 case "checks.completed":
56 return {
57 icon: <Terminal size={14} />,
58 tone: event.data.status === "passed" ? "text-success" : "text-danger",
59 actor: null,
60 text: (
61 <>
62 checks {event.data.status} on {ref(event.data.number)}
63 </>
64 ),
65 };
66 case "review.completed":
67 return {
68 icon: event.data.verdict === "approve" ? <CircleCheck size={14} /> : <CircleSlash size={14} />,
69 tone: event.data.verdict === "approve" ? "text-success" : "text-warn",
70 actor: "g1t",
71 text: (
72 <>
73 {event.data.verdict === "approve" ? "approved" : "asked for changes on"} {ref(event.data.number)}
74 </>
75 ),
76 };
77 case "comment.created":
78 // One of the workspace's agents, as itself: named, never the person it acted for.
79 if (event.data.agent) {
80 const said = event.data.verdict === "approve" ? "approved" : event.data.verdict === "request_changes" ? "asked for changes on" : event.data.advisory ? "reviewed" : "commented on";
81 return {
82 icon: event.data.verdict === "approve" ? <CircleCheck size={14} /> : event.data.verdict ? <CircleSlash size={14} /> : <MessageSquare size={14} />,
83 tone: "text-muted",
84 actor: `${event.data.agent.displayName} (agent)`,
85 text: (
86 <>
87 {said} {ref(event.data.number)}
88 {event.data.advisory && " (advisory)"}
89 </>
90 ),
91 };
92 }
93 if (event.data.verdict) {
94 return {
95 icon: event.data.verdict === "approve" ? <CircleCheck size={14} /> : <CircleSlash size={14} />,
96 tone: event.data.verdict === "approve" ? "text-success" : "text-warn",
97 actor,
98 text: (
99 <>
100 {event.data.verdict === "approve" ? "approved" : "asked for changes on"} {ref(event.data.number)}
101 </>
102 ),
103 };
104 }
105 return {
106 icon: <MessageSquare size={14} />,
107 tone: isG1t(actor) ? "text-accent" : "text-muted",
108 actor,
109 text: <>commented on {ref(event.data.number)}</>,
110 coordination: isG1t(actor),
111 };
112 case "pull.merged":
113 return { icon: <GitMerge size={14} />, tone: "text-accent", actor, text: <>landed {ref(event.data.number)} on main</> };
114 case "agent.asked":
115 return { icon: <MessageCircleQuestion size={14} />, tone: "text-accent", actor, text: <>asked the agent on {ref(event.data.number)}, and g1t woke it to answer</> };
116 case "pull.merge_requested":
117 return { icon: <GitMerge size={14} />, tone: "text-muted", actor, text: <>is bringing {ref(event.data.number)} up to date</> };
118 default:
119 return null;
120 }
121}
122
123/**
124 * What happened across an outcome's issues and pull requests, newest
125 * first. Agents talking to each other through the forge stand out.
126 */
127export function Activity({ events, base }: { events: G1tEvent[]; base: string }) {
128 const lines = events.map((event) => ({ event, line: line(event, base) })).filter((item) => item.line != null);
129 if (lines.length === 0) return null;
130 return (
131 <ol className="space-y-0.5">
132 {lines.map(({ event, line }) => (
133 <li
134 key={event.id}
135 className={`flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm ${
136 line!.coordination ? "bg-accent/[0.07] ring-1 ring-accent/25" : ""
137 }`}
138 >
139 <span className={`shrink-0 ${line!.tone}`}>{line!.icon}</span>
140 {line!.actor && (
141 <span className="flex shrink-0 items-center gap-1.5 font-mono text-xs text-fg-soft">
142 <Avatar name={line!.actor} size={14} />
143 {line!.actor}
144 </span>
145 )}
146 <span className="min-w-0 grow truncate text-muted">{line!.text}</span>
147 <span className="shrink-0 text-xs text-faint">
148 <TimeAgo at={event.time} />
149 </span>
150 </li>
151 ))}
152 </ol>
153 );
154}
155
156/**
157 * Questions and handoffs between the agents on an outcome's pull requests,
158 * each with where it stands: asked, read, answered or declined.
159 */
160export function Exchanges({ exchanges, base }: { exchanges: AgentMessage[]; base: string }) {
161 if (exchanges.length === 0) return null;
162 const pull = (number: number) => (
163 <Link to={`${base}/pull/${number}`} prefetch="intent" className="font-mono text-fg hover:underline">
164 #{number}
165 </Link>
166 );
167 return (
168 <ul className="space-y-3">
169 {exchanges.map((exchange) => {
170 const state = exchange.answer
171 ? exchange.declined
172 ? { label: "Declined", tone: "text-warn ring-warn/40" }
173 : { label: exchange.kind === "handoff" ? "Taken on" : "Answered", tone: "text-success ring-success/40" }
174 : exchange.deliveredAt
175 ? { label: "Read", tone: "text-info ring-info/40" }
176 : { label: "Waiting to be read", tone: "text-faint ring-line" };
177 return (
178 <li key={exchange.id} className="rounded-2xl bg-accent/[0.05] p-4 ring-1 ring-accent/25">
179 <p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
180 <Avatar name="g1t" size={14} />
181 <span>
182 The agent on {exchange.fromNumber != null ? pull(exchange.fromNumber) : exchange.author}{" "}
183 {exchange.kind === "handoff" ? "handed work to" : "asked"} the agent on {pull(exchange.toNumber)}
184 </span>
185 <span className={`ml-auto rounded-full px-2 py-0.5 ring-1 ${state.tone}`}>{state.label}</span>
186 </p>
187 <p className="mt-2 text-sm">{exchange.body}</p>
188 {exchange.answer && (
189 <p className="mt-2 border-l-2 border-accent/40 pl-3 text-sm text-fg-soft">{exchange.answer}</p>
190 )}
191 </li>
192 );
193 })}
194 </ul>
195 );
196}