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

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

1

/**

2

* Static pictures of the product for the landing page: a channel where a

3

* person and an agent talk over a pull request, and an agent's profile.

4

* Drawn in the app's own tokens so they read as the real thing; nothing

5

* here loads data.

6

*/

7

import {

8

AtSign,

9

Bot,

10

BookOpen,

11

Check,

12

Code2,

13

GitMerge,

14

GitPullRequest,

15

Hash,

g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them.15h ago

16

Sun,

17

Bell,

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

18

MessagesSquare,

19

Paperclip,

20

SendHorizontal,

21

} from "lucide-react";

22

import type { ReactNode } from "react";

23

24

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

Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002)1d ago

25

import { AgentAvatar } from "./agent-avatar";

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

26

27

/** A round letter avatar: lavender for agents, gray for people. */

28

function Face({ letter, agent, size = "md" }: { letter: string; agent?: boolean; size?: "sm" | "md" | "lg" }) {

29

return (

30

<span

31

aria-hidden="true"

32

className={cn(

33

"flex shrink-0 items-center justify-center font-semibold",

34

size === "sm" && "size-5 text-[0.625rem]",

35

size === "md" && "size-8 text-xs",

36

size === "lg" && "size-12 text-lg",

37

agent ? "rounded-lg bg-accent/15 text-accent ring-1 ring-accent/30" : "rounded-full bg-raised text-fg-soft ring-1 ring-line-strong",

38

)}

39

>

40

{letter}

41

</span>

42

);

43

}

44

45

/** The small tag beside an agent's name. */

46

function AgentTag() {

47

return (

48

<span className="rounded bg-accent/15 px-1 py-px font-mono text-[0.5625rem] tracking-wide text-accent uppercase">Agent</span>

49

);

50

}

51

52

function Message({

53

face,

54

name,

55

agent,

56

role,

57

time,

58

children,

59

}: {

60

face: ReactNode;

61

name: string;

62

agent?: boolean;

63

role?: string;

64

time: string;

65

children: ReactNode;

66

}) {

67

return (

68

69

{face}

70

71

72

73

{agent && <AgentTag />}

74

{role && <span className="text-xs text-faint">{role}</span>}

75

76

</p>

77

<div className="mt-0.5 space-y-2 text-[0.8125rem] leading-6 text-fg-soft">{children}</div>

78

</div>

79

</div>

80

);

81

}

82

83

function Mention({ children }: { children: ReactNode }) {

84

return <span className="rounded bg-accent/15 px-0.5 text-accent">{children}</span>;

85

}

86

87

function Code({ children }: { children: ReactNode }) {

88

return <code className="rounded bg-raised px-1 py-px font-mono text-[0.75rem] text-fg">{children}</code>;

89

}

90

91

/** The pull request card an agent posts into the thread. */

92

function PullCard() {

93

return (

94

95

96

97

98

<p className="text-[0.8125rem] font-medium text-fg">Invite emails use the team name</p>

99

<p className="mt-0.5 font-mono text-[0.6875rem] text-faint">acme/web #418 · fixes #412</p>

100

</div>

101

<span className="shrink-0 rounded-full bg-success/15 px-2 py-0.5 text-[0.6875rem] font-medium text-success">Ready</span>

102

</div>

103

104

105

<Check size={12} className="text-success" />3 of 3 checks passed

106

</span>

107

108

109

</span>

110

<span>Reviewed by @lint</span>

111

</div>

112

</div>

113

);

114

}

115

116

const RAIL: { icon: ReactNode; label: string; on?: boolean }[] = [

g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them.15h ago

117

{ icon: <Sun size={16} />, label: "Today" },

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

118

{ icon: <Code2 size={16} />, label: "Code" },

119

{ icon: <MessagesSquare size={16} />, label: "Chat", on: true },

120

{ icon: <BookOpen size={16} />, label: "Docs" },

121

{ icon: <Bot size={16} />, label: "Agents" },

g1t is described as the product it is in alpha, and its shell takes the new shape: the README, the docs home and docs/PLAN.md label every feature Live, Preview or Coming; a floating dock with the g1t mark, Today, Chat, Notifications, Agents, Code, Artifacts, your pinned apps and the Apps launcher, with People, Workspace and the account menu (now holding help) at its foot; the workspace's logo and switcher heading a flat sidebar that folds away with Ctrl B, or leading the header's breadcrumbs where there is none; the page in a rounded panel with a full-width header; Today as the front page, with first-time acceptance of agents' pull requests, what needs you and what's at stake, spend today and one item to start with, every number from a service; Notifications in place of the Inbox at /notifications; a bottom bar and More sheet on phones; and sign-in, sign-up, two-factor, reset, invites and choosing a workspace on standalone pages with no app around them.15h ago

122

{ icon: <Bell size={16} />, label: "Notifications" },

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

123

];

124

125

const CHANNELS: { name: string; on?: boolean; unread?: number }[] = [

126

{ name: "web", on: true },

127

{ name: "releases", unread: 2 },

128

{ name: "support" },

129

{ name: "design" },

130

];

131

132

const DMS: { name: string; agent?: boolean; letter: string }[] = [

133

{ name: "Ship", agent: true, letter: "S" },

134

{ name: "Lint", agent: true, letter: "L" },

135

{ name: "Priya Shah", letter: "P" },

136

];

137

138

/**

139

* A channel in the Chat mode: the rail, the channel list, and a short

140

* exchange where an agent answers, links the pull request it made, and

141

* waits for a person to approve the merge.

142

*/

143

export function ChatShot({ className }: { className?: string }) {

144

return (

145

<figure

146

aria-label="A channel in g1t: a person asks an agent about a release, and the agent answers with the pull request it opened"

147

className={cn("overflow-hidden rounded-2xl bg-surface text-left shadow-2xl shadow-black/40 ring-1 ring-line", className)}

148

>

149

150

{/* The rail. */}

151

152

{RAIL.map((item) => (

153

<span

154

key={item.label}

155

className={cn(

156

"flex size-9 items-center justify-center rounded-lg",

157

item.on ? "bg-accent/15 text-accent" : "text-faint",

158

)}

159

>

160

{item.icon}

161

</span>

162

))}

163

</nav>

164

165

{/* The channel list. */}

166

167

168

<p className="mt-4 px-2 text-[0.6875rem] font-medium text-faint">Channels</p>

169

170

{CHANNELS.map((channel) => (

171

<li

172

key={channel.name}

173

className={cn(

174

"flex items-center gap-1.5 rounded-md px-2 py-1 text-[0.8125rem]",

175

channel.on ? "bg-raised text-fg" : "text-muted",

176

)}

177

>

178

179

<span className="flex-1">{channel.name}</span>

180

{channel.unread && (

181

<span className="rounded-full bg-accent px-1.5 text-[0.625rem] font-semibold text-bg">{channel.unread}</span>

182

)}

183

</li>

184

))}

185

</ul>

186

<p className="mt-4 px-2 text-[0.6875rem] font-medium text-faint">Direct messages</p>

187

188

{DMS.map((dm) => (

189

190

191

192

{dm.agent && <span className="size-1.5 rounded-full bg-success" />}

193

</li>

194

))}

195

</ul>

196

</div>

197

198

{/* The channel. */}

199

200

201

202

203

<span className="hidden truncate text-xs text-faint sm:inline">The web app, its releases and its bugs</span>

204

205

206

207

208

209

</span>

210

</div>

211

212

213

<Message face={<Face letter="P" />} name="Priya Shah" time="10:42">

214

<p>

215

<Mention>@ship</Mention> what is left before Thursday's release?

216

</p>

217

</Message>

218

<Message face={<Face letter="S" agent />} name="Ship" agent role="Release manager" time="10:42">

219

<p>

220

One thing: <span className="text-accent">#412</span>, invite emails show the workspace name instead of the

221

team's. The fix is ready. The subject now comes from <Code>invite_subject()</Code>, with a test for both

222

names.

223

</p>

224

225

<p>It needs one approval from a person, then it lands through the merge queue.</p>

226

</Message>

227

<Message face={<Face letter="P" />} name="Priya Shah" time="10:44">

228

<p>Approved. Thanks!</p>

229

</Message>

230

231

232

<span>

233

<span className="text-fg-soft">#418</span> merged to main · deploying to production

234

</span>

235

</div>

236

</div>

237

238

239

240

<span className="flex-1">Message #web</span>

241

242

243

244

</div>

245

</div>

246

</div>

247

</div>

248

</figure>

249

);

250

}

251

252

function Field({ label, children, soon }: { label: string; children: ReactNode; soon?: boolean }) {

253

return (

254

255

256

{label}

257

{soon && <span className="sr-only"> (coming soon)</span>}

258

</dt>

259

<dd className="min-w-0 text-fg-soft">{children}</dd>

260

</div>

261

);

262

}

263

Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002)1d ago

264

/** An agent's profile: who it is, what it answers for, how it talks, what it may use and spend. */

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

265

export function AgentCardShot({ className }: { className?: string }) {

266

const spent = 12.4;

267

const budget = 40;

268

return (

269

<figure

Agents mode: an overview of every agent's work and spend, and each agent's sessions, memory, routines, spend, activity and versions1d ago

270

aria-label="An agent's profile in g1t: Margo, hired from the QA Engineer template, on the QA team, with her responsibilities, voice, model routing, budget and what she may do alone"

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

271

className={cn("overflow-hidden rounded-2xl bg-surface text-left ring-1 ring-line", className)}

272

>

273

Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002)1d ago

274

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

275

276

Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002)1d ago

277

Margo <AgentTag />

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

278

</p>

Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002)1d ago

279

<p className="text-sm text-muted">@margo · QA Engineer on the QA team</p>

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

280

</div>

281

282

283

Idle

284

</span>

285

</div>

286

<dl>

Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002)1d ago

287

288

289

<li>Reviewing pull requests for risk and test coverage</li>

290

<li>Test plans for new features</li>

291

<li>Chasing flaky checks</li>

292

</ul>

293

</Field>

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

294

Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002)1d ago

295

<span className="text-fg">Crisp.</span> Short answers, points at the exact line, proposes the fix.

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

296

</Field>

297

298

<span className="text-fg">Auto</span>, never below Standard

299

300

<span className="rounded-md bg-raised px-1.5 py-0.5 text-xs text-muted ring-1 ring-line">g1t's models</span>

301

<span className="rounded-md bg-raised px-1.5 py-0.5 text-xs text-muted ring-1 ring-line">Your own provider</span>

302

</span>

303

</Field>

Merge the workspace shell: navigation and phone shell, g1t as orchestrator, agents in roles with audience-checked reads, reactions and custom emoji, live notifications and browser push, the homepage tour (agents 0002, chat 0002)1d ago

304

305

306

<span className="rounded-md bg-raised px-1.5 py-0.5 font-mono text-xs text-muted ring-1 ring-line">flake-hunter</span>

307

<span className="rounded-md bg-raised px-1.5 py-0.5 font-mono text-xs text-muted ring-1 ring-line">migration-checker</span>

308

309

</span>

310

</Field>

Chat and workspace agents: channels, DMs and named agents you talk to1d ago

311

312

313

${spent.toFixed(2)} of ${budget} this month

314

</span>

315

316

317

</span>

318

319

</Field>

320

<Field label="Asks first">Merge · Deploy to production</Field>

321

</dl>

322

</figure>

323

);

324

}