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

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

1

import { ArrowRight, Box, ShieldCheck, Sparkles, Users } from "lucide-react";

2

import type { ReactNode } from "react";

3

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

4

5

import type { Route } from "./+types/workspace-overview";

6

import { Avatar, Pill } from "../../components/ui";

7

import { UsageCard } from "../../components/usage-card";

8

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

9

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

10

import { usageFor } from "../../lib/workspace-usage.server";

11

import { workspaceProjects } from "../../lib/workspace-projects.server";

12

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

13

14

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

15

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

16

}

17

18

/** Most members listed before "and N more". */

19

const MAX_FACES = 10;

20

21

/**

22

* The workspace at a glance, for every member: who is in it, its projects

23

* and agents, and the month's usage against its plan. Each part is left out

24

* when its service does not answer.

25

*/

26

export async function loader({ params, context }: Route.LoaderArgs) {

27

const viewer = getViewer(context);

28

const slug = params.owner.toLowerCase();

29

const role = roleIn(viewer, slug);

30

if (!role) throw data(null, { status: 404 });

31

const [members, usage, projects, agents] = await Promise.all([

32

identity.listMembers(slug, viewer).catch(() => null),

33

usageFor(slug, viewer),

34

workspaceProjects(slug, viewer).catch(() => null),

35

workspaceAgents.list(slug, viewer!).catch(() => null),

36

]);

37

return {

38

slug,

39

role,

40

members: members?.ok ? members.value : null,

41

usage,

42

projects: projects?.ok ? projects.value.length : null,

43

agents: agents?.ok ? agents.value.filter((agent) => !agent.archived_at).length : null,

44

};

45

}

46

47

function Tile({ icon, label, value, to, action }: { icon: ReactNode; label: string; value: string; to: string; action: string }) {

48

return (

49

50

51

{icon}

52

{label}

53

</p>

54

<p className="mt-1.5 text-2xl font-semibold tracking-tight tabular-nums">{value}</p>

55

56

{action} <ArrowRight size={11} />

57

</p>

58

</Link>

59

);

60

}

61

62

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

63

const { slug, role, members, usage, projects, agents } = loaderData;

64

return (

65

66

67

<Tile icon={<Users size={12} />} label="Members" value={members ? String(members.length) : "—"} to={`/${slug}/-/people`} action={role === "owner" ? "Manage people" : "See everyone"} />

68

<Tile icon={<Sparkles size={12} />} label="Agents" value={agents == null ? "—" : String(agents)} to={`/${slug}/-/agents`} action="Open Agents" />

69

<Tile icon={<Box size={12} />} label="Projects" value={projects == null ? "—" : String(projects)} to={`/${slug}/-/projects`} action="Open Code" />

70

</div>

71

72

73

{usage ? (

74

75

) : (

76

77

<h2 className="font-medium">Usage</h2>

78

<p className="mt-1.5 text-sm text-muted">This month's usage isn't available right now.</p>

79

80

Open Usage <ArrowRight size={13} />

81

</Link>

82

</section>

83

)}

84

85

86

87

Policies

88

</h2>

89

90

What agents may reach, run and spend, the rules every repository follows, and how the workspace's security is set up.

91

</p>

92

93

94

Guardrails

95

</Link>

96

97

Rules

98

</Link>

99

100

Security settings

101

</Link>

102

103

Audit log

104

</Link>

105

</div>

106

</section>

107

</div>

108

109

110

<h2 className="font-medium">Members</h2>

111

112

{role === "owner" ? "Manage" : "See all"}

113

</Link>

114

</div>

115

{members ? (

116

<>

117

118

{members.slice(0, MAX_FACES).map((member) => (

119

120

121

122

{member.name?.trim() || member.username}

123

{member.name?.trim() && <span className="ml-1.5 font-mono text-xs text-faint">{member.username}</span>}

124

</Link>

125

{member.role === "owner" && <Pill>owner</Pill>}

126

</li>

127

))}

128

</ul>

129

{members.length > MAX_FACES && <p className="mt-2 text-xs text-faint">and {members.length - MAX_FACES} more</p>}

130

</>

131

) : (

132

<p className="mt-3 text-sm text-muted">The member list isn't available right now.</p>

133

)}

134

</section>

135

</div>

136

</div>

137

);

138

}