@inkeep/agents-manage-ui 0.1.0

package/src/components/projects/form/project-form.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericTextarea } from '@/components/form/generic-textarea';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { Separator } from '@/components/ui/separator';
+import { createProjectAction, updateProjectAction } from '@/lib/actions/projects';
+import { defaultValues } from './form-configuration';
+import { type ProjectFormData, projectSchema } from './validation';
+import { ProjectModelsSection } from './project-models-section';
+import { ProjectStopWhenSection } from './project-stopwhen-section';
+
+interface ProjectFormProps {
+  tenantId: string;
+  projectId?: string;
+  onSuccess?: (projectId: string) => void;
+  onCancel?: () => void;
+  initialData?: ProjectFormData;
+}
+
+export function ProjectForm({
+  tenantId,
+  projectId,
+  onSuccess,
+  onCancel,
+  initialData,
+}: ProjectFormProps) {
+  const form = useForm<ProjectFormData>({
+    resolver: zodResolver(projectSchema),
+    defaultValues: initialData || defaultValues,
+  });
+
+  const { isSubmitting } = form.formState;
+  const router = useRouter();
+
+  const onSubmit = async (data: ProjectFormData) => {
+    try {
+      if (projectId) {
+        const res = await updateProjectAction(tenantId, projectId, data);
+        if (!res.success) {
+          toast.error(res.error || 'Failed to update project');
+          return;
+        }
+        toast.success('Project updated successfully');
+        if (onSuccess) {
+          onSuccess(data.id);
+        }
+      } else {
+        const res = await createProjectAction(tenantId, data);
+        if (!res.success) {
+          toast.error(res.error || 'Failed to create project');
+          return;
+        }
+        toast.success('Project created successfully');
+
+        if (onSuccess) {
+          onSuccess(data.id);
+        } else {
+          // Navigate to the new project's graphs page
+          router.push(`/${tenantId}/projects/${data.id}/graphs`);
+        }
+      }
+    } catch (error) {
+      console.error('Error creating project:', error);
+      const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+      toast.error(errorMessage);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <GenericInput
+          control={form.control}
+          name="id"
+          label="Project ID"
+          placeholder="my-project"
+          description="Choose a unique identifier for this project. This cannot be changed later."
+          disabled={!!projectId}
+        />
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Project Name"
+          placeholder="My Project"
+          description="A friendly name for your project"
+        />
+        <GenericTextarea
+          control={form.control}
+          name="description"
+          label="Description"
+          placeholder="Describe what this project is for..."
+          className="min-h-[100px]"
+        />
+
+        <Separator />
+
+        <ProjectModelsSection control={form.control} />
+
+        <Separator />
+
+        <ProjectStopWhenSection control={form.control} />
+
+        <div className="flex gap-3 justify-end">
+          {onCancel && (
+            <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
+              Cancel
+            </Button>
+          )}
+          <Button type="submit" disabled={isSubmitting}>
+            {projectId ? 'Update project' : 'Create project'}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

package/src/components/projects/form/project-models-section.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { Control, useController, useWatch } from 'react-hook-form';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
+import { Label } from '@/components/ui/label';
+import { ModelSelector } from '@/components/graph/sidepane/nodes/model-selector';
+import type { ProjectFormData } from './validation';
+
+interface ProjectModelsSectionProps {
+  control: Control<ProjectFormData>;
+}
+
+function BaseModelSection({ control }: { control: Control<ProjectFormData> }) {
+  const { field: modelField } = useController({ control, name: 'models.base.model' });
+  const { field: providerOptionsField } = useController({ control, name: 'models.base.providerOptions' });
+  
+  return (
+    <div className="space-y-2">
+      <ModelSelector
+        label="Base Model"
+        placeholder="Select base model"
+        value={modelField.value || ''}
+        onValueChange={modelField.onChange}
+      />
+      <p className="text-xs text-muted-foreground">
+        Primary model for general agent responses
+      </p>
+      <ExpandableJsonEditor
+        name="models.base.providerOptions"
+        label="Provider Options"
+        value={providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''}
+        onChange={(value) => {
+          let parsedOptions;
+          try {
+            parsedOptions = value ? JSON.parse(value) : undefined;
+          } catch (e) {
+            parsedOptions = undefined;
+          }
+          providerOptionsField.onChange(parsedOptions);
+        }}
+        placeholder={`{
+  "temperature": 0.7,
+  "maxTokens": 2048
+}`}
+      />
+    </div>
+  );
+}
+
+function StructuredOutputModelSection({ control }: { control: Control<ProjectFormData> }) {
+  const { field: modelField } = useController({ control, name: 'models.structuredOutput.model' });
+  const { field: providerOptionsField } = useController({ control, name: 'models.structuredOutput.providerOptions' });
+  
+  return (
+    <div className="space-y-2">
+      <ModelSelector
+        label="Structured Output Model"
+        placeholder="Select structured output model (optional)"
+        value={modelField.value || ''}
+        onValueChange={modelField.onChange}
+      />
+      <p className="text-xs text-muted-foreground">
+        Model for structured outputs and data components (defaults to base model)
+      </p>
+      <ExpandableJsonEditor
+        name="models.structuredOutput.providerOptions"
+        label="Provider Options"
+        value={providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''}
+        onChange={(value) => {
+          let parsedOptions;
+          try {
+            parsedOptions = value ? JSON.parse(value) : undefined;
+          } catch (e) {
+            parsedOptions = undefined;
+          }
+          providerOptionsField.onChange(parsedOptions);
+        }}
+        placeholder={`{
+  "temperature": 0.1,
+  "maxTokens": 1024
+}`}
+      />
+    </div>
+  );
+}
+
+function SummarizerModelSection({ control }: { control: Control<ProjectFormData> }) {
+  const { field: modelField } = useController({ control, name: 'models.summarizer.model' });
+  const { field: providerOptionsField } = useController({ control, name: 'models.summarizer.providerOptions' });
+  
+  return (
+    <div className="space-y-2">
+      <ModelSelector
+        label="Summarizer Model"
+        placeholder="Select summarizer model (optional)"
+        value={modelField.value || ''}
+        onValueChange={modelField.onChange}
+      />
+      <p className="text-xs text-muted-foreground">
+        Model for summarization tasks (defaults to base model)
+      </p>
+      <ExpandableJsonEditor
+        name="models.summarizer.providerOptions"
+        label="Provider Options"
+        value={providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''}
+        onChange={(value) => {
+          let parsedOptions;
+          try {
+            parsedOptions = value ? JSON.parse(value) : undefined;
+          } catch (e) {
+            parsedOptions = undefined;
+          }
+          providerOptionsField.onChange(parsedOptions);
+        }}
+        placeholder={`{
+  "temperature": 0.3,
+  "maxTokens": 1024
+}`}
+      />
+    </div>
+  );
+}
+
+export function ProjectModelsSection({ control }: ProjectModelsSectionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label className="text-sm font-medium">Default Models</Label>
+        <p className="text-sm text-muted-foreground mt-1">
+          Set default models that will be inherited by graphs and agents in this project
+        </p>
+      </div>
+
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex items-center justify-start gap-2 w-full"
+          >
+            <ChevronRight className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`} />
+            Configure Default Models
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-6 mt-4 border rounded-md p-4 bg-muted/30">
+          {/* Base Model */}
+          <BaseModelSection control={control} />
+
+          {/* Structured Output Model */}
+          <StructuredOutputModelSection control={control} />
+
+          {/* Summarizer Model */}
+          <SummarizerModelSection control={control} />
+
+          <div className="text-xs text-muted-foreground p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md border border-blue-200 dark:border-blue-800">
+            <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">How model inheritance works:</p>
+            <ul className="space-y-1 text-blue-800 dark:text-blue-200">
+              <li>• <strong>Models</strong>: Project → Graph → Agent (partial inheritance - missing models only)</li>
+              <li>• <strong>Individual model types</strong> inherit independently (base, structuredOutput, summarizer)</li>
+              <li>• <strong>Explicit settings</strong> always take precedence over inherited values</li>
+              <li>• <strong>Provider options</strong> are inherited along with the model if not explicitly set</li>
+            </ul>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

package/src/components/projects/form/project-stopwhen-section.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { Control } from 'react-hook-form';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { GenericInput } from '@/components/form/generic-input';
+import { Label } from '@/components/ui/label';
+import type { ProjectFormData } from './validation';
+
+interface ProjectStopWhenSectionProps {
+  control: Control<ProjectFormData>;
+}
+
+export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label className="text-sm font-medium">Execution Limits</Label>
+        <p className="text-sm text-muted-foreground mt-1">
+          Set default execution limits that will be inherited by graphs and agents in this project
+        </p>
+      </div>
+
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CollapsibleTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex items-center justify-start gap-2 w-full"
+          >
+            <ChevronRight className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`} />
+            Configure Execution Limits
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-6 mt-4 border rounded-md p-4 bg-muted/30">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Transfer Count Limit */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">Max Transfers</Label>
+              <p className="text-xs text-muted-foreground">
+                Maximum number of agent transfers per conversation (graph-level, default: 10)
+              </p>
+              <GenericInput<ProjectFormData>
+                control={control}
+                name="stopWhen.transferCountIs"
+                label="Max Transfers"
+                type="number"
+                placeholder="10"
+                min="1"
+              />
+            </div>
+
+            {/* Step Count Limit */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">Max Steps</Label>
+              <p className="text-xs text-muted-foreground">
+                Maximum number of execution steps per agent (agent-level limit)
+              </p>
+              <GenericInput<ProjectFormData>
+                control={control}
+                name="stopWhen.stepCountIs"
+                label="Max Steps"
+                type="number"
+                placeholder="50"
+                min="1"
+              />
+            </div>
+          </div>
+
+          <div className="text-xs text-muted-foreground p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md border border-blue-200 dark:border-blue-800">
+            <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">How inheritance works:</p>
+            <ul className="space-y-1 text-blue-800 dark:text-blue-200">
+              <li>• <strong>transferCountIs</strong>: Project → Graph only (graph-level limit)</li>
+              <li>• <strong>stepCountIs</strong>: Project → Agent only (agent-level limit)</li>
+              <li>• <strong>Explicit settings</strong> always take precedence over inherited values</li>
+              <li>• <strong>Default fallback</strong>: transferCountIs = 10 if no value is set</li>
+              <li>• <strong>Error limit</strong> is hardcoded to 3 errors across all levels</li>
+            </ul>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

package/src/components/projects/form/validation.ts

@@ -0,0 +1,39 @@
+import { z } from 'zod';
+
+const modelSettingsSchema = z.object({
+  model: z.string().optional(), // Allow empty model - system will fall back to defaults
+  providerOptions: z.record(z.string(), z.any()).optional(),
+});
+
+const projectModelsSchema = z.object({
+  base: modelSettingsSchema.optional(),
+  structuredOutput: modelSettingsSchema.optional(),
+  summarizer: modelSettingsSchema.optional(),
+}).optional();
+
+const projectStopWhenSchema = z.object({
+  transferCountIs: z.number().min(1).max(100).optional(),
+  stepCountIs: z.number().min(1).max(1000).optional(),
+}).optional();
+
+export const projectSchema = z.object({
+  id: z
+    .string()
+    .min(1, 'Project ID is required')
+    .regex(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/, {
+      message:
+        'ID must start and end with lowercase alphanumeric characters, and may contain hyphens',
+    }),
+  name: z
+    .string()
+    .min(1, 'Project name is required')
+    .max(100, 'Name must be less than 100 characters'),
+  description: z
+    .string()
+    .min(1, 'Project description is required')
+    .max(500, 'Description must be less than 500 characters'),
+  models: projectModelsSchema,
+  stopWhen: projectStopWhenSchema,
+});
+
+export type ProjectFormData = z.infer<typeof projectSchema>;

package/src/components/projects/new-project-dialog.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { Plus } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { ProjectForm } from './form/project-form';
+
+interface NewProjectDialogProps {
+  tenantId: string;
+  triggerButton?: React.ReactNode;
+  children?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function NewProjectDialog({
+  tenantId,
+  triggerButton,
+  children,
+  open: controlledOpen,
+  onOpenChange,
+}: NewProjectDialogProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const router = useRouter();
+
+  // Use controlled state if provided, otherwise use uncontrolled
+  const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
+  const setOpen = onOpenChange || setUncontrolledOpen;
+
+  const handleSuccess = (projectId: string) => {
+    setOpen(false);
+    router.push(`/${tenantId}/projects/${projectId}/graphs`);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {(children || triggerButton) && (
+        <DialogTrigger asChild>
+          {children || triggerButton || (
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />
+              Create Project
+            </Button>
+          )}
+        </DialogTrigger>
+      )}
+      <DialogContent className="max-w-2xl">
+        <DialogTitle>Create new project</DialogTitle>
+        <DialogDescription>
+          Create a new project to organize your agents, tools, and resources.
+        </DialogDescription>
+        <ProjectForm
+          tenantId={tenantId}
+          onSuccess={handleSuccess}
+          onCancel={() => setOpen(false)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/projects/project-item-menu.tsx

@@ -0,0 +1,73 @@
+import { MoreVertical, Pencil, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { DeleteProjectConfirmation } from './delete-project-confirmation';
+import { EditProjectDialog } from './edit-project-dialog';
+import type { ProjectFormData } from './form/validation';
+
+interface ProjectItemMenuProps {
+  projectName?: string;
+  projectData: ProjectFormData;
+  tenantId: string;
+}
+
+export function ProjectItemMenu({ projectName, projectData, tenantId }: ProjectItemMenuProps) {
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [isEditOpen, setIsEditOpen] = useState(false);
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className=" p-0 hover:bg-accent hover:text-accent-foreground rounded-sm -mr-2"
+          >
+            <MoreVertical className="h-4 w-4 text-muted-foreground" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="w-48 shadow-lg border border-border bg-popover/95 backdrop-blur-sm"
+        >
+          <DropdownMenuItem className=" cursor-pointer" onClick={() => setIsEditOpen(true)}>
+            <Pencil className="size-4" />
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-destructive hover:!bg-destructive/10 dark:hover:!bg-destructive/20 hover:!text-destructive cursor-pointer"
+            onClick={() => setIsDeleteOpen(true)}
+          >
+            <Trash2 className="size-4 text-destructive" />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {isEditOpen && (
+        <EditProjectDialog
+          isOpen={isEditOpen}
+          setIsOpen={setIsEditOpen}
+          tenantId={tenantId}
+          projectData={projectData}
+        />
+      )}
+
+      {isDeleteOpen && (
+        <DeleteProjectConfirmation
+          projectId={projectData.id}
+          projectName={projectName}
+          setIsOpen={setIsDeleteOpen}
+          isOpen={isDeleteOpen}
+        />
+      )}
+    </>
+  );
+}

package/src/components/projects/project-item.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { formatDate } from '@/app/utils/format-date';
+import {
+  ItemCardContent,
+  ItemCardDescription,
+  ItemCardFooter,
+  ItemCardHeader,
+  ItemCardLink,
+  ItemCardRoot,
+  ItemCardTitle,
+} from '@/components/ui/item-card';
+import type { Project } from '@/lib/types/project';
+import { ProjectItemMenu } from './project-item-menu';
+
+export interface ProjectItemProps extends Project {
+  tenantId: string;
+  projectId: string;
+}
+
+export function ProjectItem({
+  id,
+  projectId,
+  name,
+  description,
+  createdAt,
+  tenantId,
+}: ProjectItemProps) {
+  const linkPath = `/${tenantId}/projects/${id}`;
+
+  return (
+    <ItemCardRoot>
+      <ItemCardHeader>
+        <ItemCardLink href={linkPath}>
+          <ItemCardTitle className="text-sm">{name}</ItemCardTitle>
+        </ItemCardLink>
+        <ProjectItemMenu
+          projectName={name}
+          projectData={{ id: projectId, name, description }}
+          tenantId={tenantId}
+        />
+      </ItemCardHeader>
+      <ItemCardLink href={linkPath} className="group">
+        <ItemCardContent>
+          <ItemCardDescription hasContent={!!description}>
+            {description || 'No description'}
+          </ItemCardDescription>
+          <ItemCardFooter footerText={`Created ${formatDate(createdAt)}`} />
+        </ItemCardContent>
+      </ItemCardLink>
+    </ItemCardRoot>
+  );
+}

package/src/components/projects/project-list.tsx

@@ -0,0 +1,17 @@
+import type { Project } from '@/lib/types/project';
+import { ProjectItem } from './project-item';
+
+interface ProjectListProps {
+  tenantId: string;
+  projects: Project[];
+}
+
+export async function ProjectList({ tenantId, projects }: ProjectListProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+      {projects?.map((project: Project) => (
+        <ProjectItem key={project.id} {...project} tenantId={tenantId} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+'use client';
+
+import { SidebarGroup, SidebarGroupContent, SidebarMenu } from '@/components/ui/sidebar';
+import { NavItem, type NavItemProps } from './nav-item';
+
+interface NavGroupProps {
+  items: NavItemProps[];
+}
+
+export function NavGroup({ items }: NavGroupProps) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupContent className="flex flex-col gap-2">
+        <SidebarMenu>
+          {items.map((item) => {
+            return <NavItem key={item.title} {...item} />;
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}