Skip to content
Sign up

flagon-io/g1t

public
0
147 linesCodeBlameRaw
1import { ArrowRight, Box, ShieldCheck, Sparkles, Users } from "lucide-react";
2import type { ReactNode } from "react";
3import { Link, data } from "react-router";
4
5import type { Route } from "./+types/workspace-overview";
6
7import { UsageCard } from "../../components/usage-card";
8import { identity, workspaceAgents } from "../../lib/services.server";
9import { getViewer, roleIn } from "../../lib/session.server";
10import { usageFor } from "../../lib/workspace-usage.server";
11import { workspaceProjects } from "../../lib/workspace-projects.server";
12import { page } from "../../lib/meta";
13import { Avatar } from "../../components/ui/avatar";
14import { Badge } from "../../components/ui/badge";
15import { Card } from "../../components/ui/card";
16
17export function meta({ params, ...args }: Route.MetaArgs) {
18 return page(args, { title: `Workspace · ${params.owner} · g1t` });
19}
20
21/** Most members listed before "and N more". */
22const MAX_FACES = 10;
23
24/**
25 * The workspace at a glance, for every member: who is in it, its projects
26 * and agents, and the month's usage against its plan. Each part is left out
27 * when its service does not answer.
28 */
29export async function loader({ params, context }: Route.LoaderArgs) {
30 const viewer = getViewer(context);
31 const slug = params.owner.toLowerCase();
32 const role = roleIn(viewer, slug);
33 if (!role) throw data(null, { status: 404 });
34 const [members, usage, projects, agents] = await Promise.all([
35 identity.listMembers(slug, viewer).catch(() => null),
36 usageFor(slug, viewer),
37 workspaceProjects(slug, viewer).catch(() => null),
38 workspaceAgents.list(slug, viewer!).catch(() => null),
39 ]);
40 return {
41 slug,
42 role,
43 members: members?.ok ? members.value : null,
44 usage,
45 projects: projects?.ok ? projects.value.length : null,
46 agents: agents?.ok ? agents.value.filter((agent) => !agent.archived_at).length : null,
47 };
48}
49
50function Tile({ icon, label, value, to, action }: { icon: ReactNode; label: string; value: string; to: string; action: string }) {
51 return (
52 <Link to={to} className="group rounded-xl border border-line bg-surface p-4 transition-colors hover:border-line-strong">
53 <p className="flex items-center gap-1.5 text-xs text-muted">
54 {icon}
55 {label}
56 </p>
57 <p className="mt-1.5 text-2xl font-semibold tracking-tight tabular-nums">{value}</p>
58 <p className="mt-0.5 flex items-center gap-1 text-xs text-faint group-hover:text-muted">
59 {action} <ArrowRight size={11} />
60 </p>
61 </Link>
62 );
63}
64
65export default function WorkspaceOverview({ loaderData }: Route.ComponentProps) {
66 const { slug, role, members, usage, projects, agents } = loaderData;
67 return (
68 <div className="space-y-8">
69 <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
70 <Tile icon={<Users size={12} />} label="Members" value={members ? String(members.length) : "—"} to={role === "owner" ? `/${slug}/-/members` : `/${slug}/-/people`} action={role === "owner" ? "Manage people" : "See everyone"} />
71 <Tile icon={<Sparkles size={12} />} label="Agents" value={agents == null ? "—" : String(agents)} to={`/${slug}/-/agents`} action="Open Agents" />
72 <Tile icon={<Box size={12} />} label="Projects" value={projects == null ? "—" : String(projects)} to={`/${slug}/-/projects`} action="Open Code" />
73 </div>
74 <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_22rem]">
75 <div className="space-y-6">
76 {usage ? (
77 <UsageCard slug={slug} glance={usage} owner={role === "owner"} />
78 ) : (
79 <Card asChild className="p-5">
80 <section>
81 <h2 className="font-medium">Usage</h2>
82 <p className="mt-1.5 text-sm text-muted">This month&apos;s usage isn&apos;t available right now.</p>
83 <Link to={`/${slug}/-/usage`} className="mt-3 inline-flex items-center gap-1 text-sm text-accent hover:underline">
84 Open Usage <ArrowRight size={13} />
85 </Link>
86 </section>
87 </Card>
88 )}
89 <Card asChild className="p-5">
90 <section>
91 <h2 className="flex items-center gap-2 font-medium">
92 <ShieldCheck size={15} className="text-faint" />
93 Policies
94 </h2>
95 <p className="mt-1.5 text-sm text-muted">
96 What agents may reach, run and spend, the rules every repository follows, and how the workspace&apos;s security is set up.
97 </p>
98 <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-sm">
99 <Link to={`/${slug}/-/guardrails`} className="text-accent hover:underline">
100 Guardrails
101 </Link>
102 <Link to={`/${slug}/-/rules`} className="text-accent hover:underline">
103 Rules
104 </Link>
105 <Link to={`/${slug}/-/security/settings`} className="text-accent hover:underline">
106 Security settings
107 </Link>
108 <Link to={`/${slug}/-/audit`} className="text-accent hover:underline">
109 Audit log
110 </Link>
111 </div>
112 </section>
113 </Card>
114 </div>
115 <Card asChild className="self-start p-5">
116 <section>
117 <div className="flex items-center justify-between">
118 <h2 className="font-medium">Members</h2>
119 <Link to={role === "owner" ? `/${slug}/-/members` : `/${slug}/-/people`} className="text-xs text-muted hover:text-fg">
120 {role === "owner" ? "Manage" : "See all"}
121 </Link>
122 </div>
123 {members ? (
124 <>
125 <ul className="mt-3 space-y-2">
126 {members.slice(0, MAX_FACES).map((member) => (
127 <li key={member.username} className="flex items-center gap-2.5 text-sm">
128 <Avatar name={member.username} image={member.avatar} size={24} />
129 <Link to={`/u/${member.username}`} className="min-w-0 grow truncate hover:text-accent">
130 {member.name?.trim() || member.username}
131 {member.name?.trim() && <span className="ml-1.5 font-mono text-xs text-faint">{member.username}</span>}
132 </Link>
133 {member.role === "owner" && <Badge size="md">owner</Badge>}
134 </li>
135 ))}
136 </ul>
137 {members.length > MAX_FACES && <p className="mt-2 text-xs text-faint">and {members.length - MAX_FACES} more</p>}
138 </>
139 ) : (
140 <p className="mt-3 text-sm text-muted">The member list isn&apos;t available right now.</p>
141 )}
142 </section>
143 </Card>
144 </div>
145 </div>
146 );
147}