feat: add support for listing users

ui/admin/app/components/auth/AuthContext.tsx

@@ -4,6 +4,8 @@ import useSWR from "swr";
 import { Role, User } from "~/lib/model/users";
 import { UserService } from "~/lib/service/api/userService";
 
+export const AuthDisabledUsername = "nobody";
+
 interface AuthContextType {
     me: User;
     isLoading: boolean;

ui/admin/app/components/header/HeaderNav.tsx

@@ -91,8 +91,14 @@ function getHeaderContent(route: string) {
     if (new RegExp($path("/thread/:id", { id: "(.*)" })).test(route)) {
         return <ThreadContent />;
     }
+
+    if (new RegExp($path("/users")).test(route)) {
+        return <UsersContent />;
+    }
 }
 
+const UsersContent = () => <>Users</>;
+
 const AgentsContent = () => <>Agents</>;
 
 const AgentEditContent = () => {

ui/admin/app/components/sidebar/SidebarCollapsed.tsx

@@ -1,4 +1,4 @@
-import { Key, MessageSquare, User } from "lucide-react";
+import { BotIcon, Key, MessageSquare, User } from "lucide-react";
 import { Link } from "react-router-dom";
 import { $path } from "remix-routes";
 
@@ -9,7 +9,7 @@ export function SidebarCollapsed() {
         <div className="flex flex-col items-center mt-4 space-y-4">
             <Button asChild variant="ghost" size="icon" title="Agents">
                 <Link to={$path("/agents")}>
-                    <User className="w-5 h-5" />
+                    <BotIcon className="w-5 h-5" />
                 </Link>
             </Button>
 
@@ -19,6 +19,12 @@ export function SidebarCollapsed() {
                 </Link>
             </Button>
 
+            <Button asChild variant="ghost" size="icon" title="Users">
+                <Link to={$path("/users")}>
+                    <User className="w-5 h-5" />
+                </Link>
+            </Button>
+
             <Button asChild variant="ghost" size="icon" title="OAuth Apps">
                 <Link to={$path("/oauth-apps")}>
                     <Key className="w-5 h-5" />

ui/admin/app/components/sidebar/SidebarFull.tsx

@@ -1,4 +1,4 @@
-import { Key, MessageSquare, User } from "lucide-react";
+import { BotIcon, Key, MessageSquare, User } from "lucide-react";
 import { $path } from "remix-routes";
 
 import { cn } from "~/lib/utils";
@@ -16,13 +16,18 @@ export function SidebarFull({ className }: SidebarFullProps) {
                     <SidebarSection
                         title="Agents"
                         linkTo={$path("/agents")}
-                        icon={<User className="w-5 h-5" />}
+                        icon={<BotIcon className="w-5 h-5 mb-1" />}
                     />
                     <SidebarSection
                         title="Threads"
                         linkTo={$path("/threads")}
                         icon={<MessageSquare className="w-5 h-5" />}
                     />
+                    <SidebarSection
+                        title="Users"
+                        linkTo={$path("/users")}
+                        icon={<User className="w-5 h-5" />}
+                    />
                     <SidebarSection
                         title="OAuth Apps"
                         linkTo={$path("/oauth-apps")}

ui/admin/app/components/user/UserMenu.tsx

@@ -4,24 +4,23 @@ import React from "react";
 import { roleToString } from "~/lib/model/users";
 import { cn } from "~/lib/utils";
 
+import { AuthDisabledUsername, useAuth } from "~/components/auth/AuthContext";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+import { Button } from "~/components/ui/button";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger,
 } from "~/components/ui/popover";
 
-import { useAuth } from "../auth/AuthContext";
-import { Button } from "../ui/button";
-
 interface UserMenuProps {
     className?: string;
 }
 
 export const UserMenu: React.FC<UserMenuProps> = ({ className }) => {
     const { me } = useAuth();
 
-    if (me.username === "nobody") {
+    if (me.username === AuthDisabledUsername) {
         return null;
     }
 

ui/admin/app/lib/model/users.ts

@@ -1,6 +1,6 @@
 export type User = {
     id: number;
-    createdAt: Date;
+    created: Date;
     username: string;
     email: string;
     role: Role;

ui/admin/app/lib/routers/apiRoutes.ts

@@ -94,6 +94,9 @@ export const ApiRoutes = {
         getById: (toolReferenceId: string) =>
             buildUrl(`/toolreferences/${toolReferenceId}`),
     },
+    users: {
+        base: () => buildUrl("/users"),
+    },
     me: () => buildUrl("/me"),
     invoke: (id: string, threadId?: Nullish<string>) => {
         return threadId

ui/admin/app/lib/service/api/userService.ts

@@ -2,6 +2,16 @@ import { User } from "~/lib/model/users";
 import { ApiRoutes, revalidateWhere } from "~/lib/routers/apiRoutes";
 import { request } from "~/lib/service/api/primitives";
 
+async function getUsers() {
+    const res = await request<{ items: User[] }>({
+        url: ApiRoutes.users.base().url,
+        errorMessage: "Failed to fetch users",
+    });
+
+    return res.data.items ?? ([] as User[]);
+}
+getUsers.key = () => ({ url: ApiRoutes.users.base().path }) as const;
+
 async function getMe() {
     const res = await request<User>({
         url: ApiRoutes.me().url,
@@ -17,5 +27,6 @@ const revalidateMe = () =>
 
 export const UserService = {
     getMe,
+    getUsers,
     revalidateMe,
 };

ui/admin/app/routes/_auth.users.tsx

@@ -0,0 +1,56 @@
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
+import useSWR from "swr";
+
+import { User, roleToString } from "~/lib/model/users";
+import { UserService } from "~/lib/service/api/userService";
+import { timeSince } from "~/lib/utils";
+
+import { TypographyP } from "~/components/Typography";
+import { DataTable } from "~/components/composed/DataTable";
+
+export default function Users() {
+    const getUsers = useSWR(UserService.getUsers.key(), UserService.getUsers);
+
+    const users = getUsers.data || [];
+
+    return (
+        <div>
+            <div className="h-full p-8 flex flex-col gap-4">
+                <DataTable
+                    columns={getColumns()}
+                    data={users}
+                    sort={[{ id: "created", desc: true }]}
+                />
+            </div>
+        </div>
+    );
+
+    function getColumns(): ColumnDef<User, string>[] {
+        return [
+            columnHelper.accessor("email", {
+                header: "Email",
+            }),
+            columnHelper.accessor("username", {
+                header: "Username",
+            }),
+            columnHelper.display({
+                id: "role",
+                header: "Role",
+                cell: ({ row }) => (
+                    <TypographyP>{roleToString(row.original.role)}</TypographyP>
+                ),
+            }),
+            columnHelper.display({
+                id: "created",
+                header: "Created",
+                cell: ({ row }) => (
+                    <TypographyP>
+                        {timeSince(new Date(row.original.created))} ago
+                    </TypographyP>
+                ),
+            }),
+        ];
+    }
+}
+
+const columnHelper = createColumnHelper<User>();