@inkeep/agents-manage-ui 0.1.0

package/src/components/sidebar-nav/nav-item.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import type { LucideIcon } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+
+export interface NavItemProps {
+  title: string;
+  url: string;
+  icon?: LucideIcon;
+  isExternal?: boolean;
+}
+
+export function NavItem({ title, url, icon: Icon, isExternal }: NavItemProps) {
+  const pathname = usePathname();
+  const isActive = pathname.startsWith(url);
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild tooltip={title} isActive={isActive}>
+        <Link
+          href={url}
+          rel={isExternal ? 'noopener noreferrer' : undefined}
+          target={isExternal ? '_blank' : undefined}
+        >
+          {Icon && <Icon />}
+          <span>{title}</span>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}

package/src/components/sidebar-nav/project-selector.tsx

@@ -0,0 +1,113 @@
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { NewProjectDialog } from '@/components/projects/new-project-dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { Project } from '@/lib/types/project';
+
+interface ProjectSelectorProps {
+  projects: Project[];
+  selectedProjectId?: string;
+  tenantId?: string;
+}
+
+export function ProjectSelector({ projects, selectedProjectId, tenantId }: ProjectSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
+  const router = useRouter();
+
+  const selectedProject = projects.find((p) => p.projectId === selectedProjectId);
+
+  return (
+    <div className="flex w-full">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full h-auto justify-between bg-transparent text-foreground pr-2"
+          >
+            {selectedProject ? (
+              <div className="flex flex-col text-left min-w-0 flex-1">
+                <span className="font-medium truncate text-foreground">
+                  {selectedProject.name || selectedProject.projectId}
+                </span>
+                <span className="text-muted-foreground truncate text-xs">{tenantId}</span>
+              </div>
+            ) : (
+              <div className="text-muted-foreground">Select a project</div>
+            )}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+          <Command>
+            <CommandEmpty>No projects found</CommandEmpty>
+            <CommandList className="max-h-64">
+              <CommandGroup>
+                {projects.map((project) => (
+                  <CommandItem
+                    key={project.projectId}
+                    onSelect={() => {
+                      router.push(`/${tenantId}/projects/${project.projectId}`);
+                      setOpen(false);
+                    }}
+                    className="flex items-start gap-3 px-3 py-2 group cursor-pointer"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">{project.name || project.projectId}</span>
+                        {project.projectId === selectedProjectId && (
+                          <span className="text-muted-foreground">
+                            <Check className="h-4 w-4" />
+                          </span>
+                        )}
+                      </div>
+                      {project.description && (
+                        <span className="text-xs text-muted-foreground line-clamp-1">
+                          {project.description}
+                        </span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
+                <CommandItem
+                  onSelect={() => {
+                    setOpen(false);
+                    setShowNewProjectDialog(true);
+                  }}
+                  className="flex items-center gap-2 px-3 py-2 cursor-pointer"
+                >
+                  <Plus className="h-4 w-4 text-foreground" />
+                  <span className="font-medium text-foreground uppercase font-mono tracking-wider">
+                    Create Project
+                  </span>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {tenantId && (
+        <NewProjectDialog
+          tenantId={tenantId}
+          open={showNewProjectDialog}
+          onOpenChange={setShowNewProjectDialog}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/sidebar-nav/project-switcher.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { NewProjectDialog } from '@/components/projects/new-project-dialog';
+import { Skeleton } from '@/components/ui/skeleton';
+import { fetchProjectsAction } from '@/lib/actions/projects';
+import type { Project } from '@/lib/types/project';
+import { ProjectSelector } from './project-selector';
+
+export function ProjectSwitcher() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const params = useParams();
+  const tenantId = params.tenantId;
+  const projectId = params.projectId;
+
+  useEffect(() => {
+    if (!tenantId) return;
+
+    fetchProjectsAction(tenantId as string)
+      .then((res) => {
+        setIsLoading(false);
+        if (res.success && res.data) {
+          let projectResults = res.data;
+          // If current projectId is not in the list, add a placeholder
+          if (projectId && !projectResults.some((p: Project) => p.projectId === projectId)) {
+            projectResults = [
+              ...projectResults,
+              {
+                projectId: projectId as string,
+                name: projectId as string,
+                description: '',
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+              },
+            ];
+          }
+          setProjects(projectResults);
+        } else {
+          setProjects([]);
+        }
+      })
+      .catch((error) => {
+        console.error('Error fetching projects:', error);
+        setIsLoading(false);
+        setProjects([]);
+      });
+  }, [tenantId, projectId]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {isLoading ? (
+        <Skeleton className="h-14 w-full" />
+      ) : (
+        <>
+          {projects.length === 0 ? (
+            <div className="flex flex-col gap-2 px-2">
+              <p className="text-sm text-muted-foreground">No projects yet</p>
+              <NewProjectDialog tenantId={tenantId as string} />
+            </div>
+          ) : (
+            <ProjectSelector
+              projects={projects}
+              selectedProjectId={projectId as string}
+              tenantId={tenantId as string}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/sidebar-nav/sidebar-nav.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import {
+  Activity,
+  BookOpen,
+  Component,
+  Key,
+  Layers,
+  Library,
+  LifeBuoy,
+  Lock,
+  type LucideIcon,
+  Workflow,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import type * as React from 'react';
+import { MCPIcon } from '@/components/icons/mcp-icon';
+import { Logo } from '@/components/logo';
+import { NavGroup } from '@/components/sidebar-nav/nav-group';
+import { ProjectSwitcher } from '@/components/sidebar-nav/project-switcher';
+import { ThemeToggle } from '@/components/theme-toggle';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import { DOCS_BASE_URL } from '@/constants/page-descriptions';
+import type { NavItemProps } from './nav-item';
+
+const bottomNavItems: NavItemProps[] = [
+  {
+    title: 'Support',
+    url: 'mailto:support@inkeep.com',
+    icon: LifeBuoy,
+  },
+  {
+    title: 'Documentation',
+    url: `${DOCS_BASE_URL}/`,
+    icon: BookOpen,
+    isExternal: true,
+  },
+];
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const params = useParams();
+  const { tenantId, projectId } = params;
+
+  const topNavItems: NavItemProps[] =
+    projectId && projectId !== 'undefined'
+      ? [
+          {
+            title: 'Graphs',
+            url: `/${tenantId}/projects/${projectId}/graphs`,
+            icon: Workflow,
+          },
+          {
+            title: 'Graph API Keys',
+            url: `/${tenantId}/projects/${projectId}/api-keys`,
+            icon: Key,
+          },
+          {
+            title: 'MCP Servers',
+            url: `/${tenantId}/projects/${projectId}/mcp-servers`,
+            icon: MCPIcon as LucideIcon,
+          },
+          {
+            title: 'Data Components',
+            url: `/${tenantId}/projects/${projectId}/data-components`,
+            icon: Component,
+          },
+          {
+            title: 'Artifact Components',
+            url: `/${tenantId}/projects/${projectId}/artifact-components`,
+            icon: Library,
+          },
+          {
+            title: 'Credentials',
+            url: `/${tenantId}/projects/${projectId}/credentials`,
+            icon: Lock,
+          },
+          {
+            title: 'Traces',
+            url: `/${tenantId}/projects/${projectId}/traces`,
+            icon: Activity,
+          },
+        ]
+      : [
+          {
+            title: 'Projects',
+            url: `/${tenantId}/projects`,
+            icon: Layers,
+          },
+        ];
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <div className="flex items-center justify-between w-full gap-2">
+              <SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5 flex-1">
+                <Link href={tenantId ? `/${tenantId}/projects` : '/'}>
+                  <Logo className="!w-[110px] !h-[32px]" />
+                </Link>
+              </SidebarMenuButton>
+              <ThemeToggle />
+            </div>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent className="flex flex-col justify-between">
+        {topNavItems.length > 0 && <NavGroup items={topNavItems} />}
+        <NavGroup items={bottomNavItems} />
+      </SidebarContent>
+      {tenantId && projectId && (
+        <SidebarFooter>
+          <ProjectSwitcher />
+        </SidebarFooter>
+      )}
+    </Sidebar>
+  );
+}

package/src/components/theme-provider.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { ThemeProviderProps } from 'next-themes';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/src/components/theme-toggle.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sidebar-foreground/80 dark:text-sidebar-foreground"
+        >
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Monitor className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function SimpleThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}