@inkeep/agents-manage-ui 0.1.0

package/src/components/ui/form.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from 'react-hook-form';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/src/components/ui/inheritance-indicator.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import { ArrowDown, Check, Info } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { 
+  Tooltip, 
+  TooltipContent, 
+  TooltipProvider, 
+  TooltipTrigger 
+} from '@/components/ui/tooltip';
+
+export interface InheritanceIndicatorProps {
+  /** Whether this value is explicitly set (not inherited) */
+  isExplicit?: boolean;
+  /** The source of inheritance (e.g., "Project", "Graph") */
+  inheritedFrom?: string;
+  /** Additional tooltip information */
+  tooltip?: string;
+  /** Size variant */
+  size?: 'sm' | 'md';
+  /** Position of the indicator */
+  position?: 'inline' | 'absolute';
+}
+
+export function InheritanceIndicator({
+  isExplicit = false,
+  inheritedFrom,
+  tooltip,
+  size = 'sm',
+  position = 'inline',
+}: InheritanceIndicatorProps) {
+  if (isExplicit) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Badge 
+              variant="outline" 
+              className={`
+                ${size === 'sm' ? 'h-5 px-1.5 text-xs' : 'h-6 px-2 text-sm'}
+                ${position === 'absolute' ? 'absolute -top-2 -right-2' : 'inline-flex'}
+                bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-800 
+                text-green-800 dark:text-green-200 items-center gap-1
+              `}
+            >
+              <Check className={size === 'sm' ? 'h-2.5 w-2.5' : 'h-3 w-3'} />
+              {size === 'md' && 'Explicit'}
+            </Badge>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip || 'This value is explicitly set at this level'}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  if (inheritedFrom) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Badge 
+              variant="outline" 
+              className={`
+                ${size === 'sm' ? 'h-5 px-1.5 text-xs' : 'h-6 px-2 text-sm'}
+                ${position === 'absolute' ? 'absolute -top-2 -right-2' : 'inline-flex'}
+                bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-800 
+                text-blue-800 dark:text-blue-200 items-center gap-1
+              `}
+            >
+              <ArrowDown className={size === 'sm' ? 'h-2.5 w-2.5' : 'h-3 w-3'} />
+              {size === 'md' && `From ${inheritedFrom}`}
+            </Badge>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip || `This value is inherited from ${inheritedFrom} level`}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  // Default/fallback state
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Badge 
+            variant="outline" 
+            className={`
+              ${size === 'sm' ? 'h-5 px-1.5 text-xs' : 'h-6 px-2 text-sm'}
+              ${position === 'absolute' ? 'absolute -top-2 -right-2' : 'inline-flex'}
+              bg-gray-50 dark:bg-gray-950/20 border-gray-200 dark:border-gray-800 
+              text-gray-600 dark:text-gray-400 items-center gap-1
+            `}
+          >
+            <Info className={size === 'sm' ? 'h-2.5 w-2.5' : 'h-3 w-3'} />
+            {size === 'md' && 'Default'}
+          </Badge>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{tooltip || 'Using system default value'}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+// Helper function to determine inheritance status for models
+export function getModelInheritanceStatus(
+  currentLevel: 'project' | 'graph' | 'agent',
+  currentValue: any,
+  parentValue: any,
+  grandparentValue?: any
+): {
+  isExplicit: boolean;
+  inheritedFrom?: string;
+  tooltip?: string;
+} {
+  const hasCurrentValue = currentValue !== undefined && currentValue !== null && currentValue !== '';
+  const hasParentValue = parentValue !== undefined && parentValue !== null && parentValue !== '';
+  const hasGrandparentValue = grandparentValue !== undefined && grandparentValue !== null && grandparentValue !== '';
+
+  // For non-project levels: if current value matches parent value exactly, it's likely inherited
+  // This handles the case where the builder resolves inheritance and stores the actual values
+  if (currentLevel !== 'project') {
+    if (hasCurrentValue && hasParentValue && currentValue === parentValue) {
+      const inheritedFromLevel = currentLevel === 'agent' ? 'Graph' : 'Project';
+      return {
+        isExplicit: false,
+        inheritedFrom: inheritedFromLevel,
+        tooltip: `This model is inherited from the ${inheritedFromLevel.toLowerCase()} level`,
+      };
+    }
+    
+    // For agent level: also check if it matches grandparent (when graph doesn't have it set)
+    if (currentLevel === 'agent' && hasCurrentValue && !hasParentValue && hasGrandparentValue && currentValue === grandparentValue) {
+      return {
+        isExplicit: false,
+        inheritedFrom: 'Project',
+        tooltip: 'This model is inherited from the project level',
+      };
+    }
+  }
+
+  // If there's a value at current level that doesn't match parent, it's explicit
+  if (hasCurrentValue) {
+    return {
+      isExplicit: true,
+      tooltip: `This model is explicitly configured at the ${currentLevel} level`,
+    };
+  }
+
+  // No current value - show what would be inherited
+  switch (currentLevel) {
+    case 'agent':
+      if (hasParentValue) {
+        return {
+          isExplicit: false,
+          inheritedFrom: 'Graph',
+          tooltip: 'Will inherit from the graph level',
+        };
+      }
+      if (hasGrandparentValue) {
+        return {
+          isExplicit: false,
+          inheritedFrom: 'Project',
+          tooltip: 'Will inherit from the project level',
+        };
+      }
+      break;
+
+    case 'graph':
+      if (hasParentValue) {
+        return {
+          isExplicit: false,
+          inheritedFrom: 'Project',
+          tooltip: 'Will inherit from the project level',
+        };
+      }
+      break;
+
+    case 'project':
+      // Project level has no parent to inherit from
+      break;
+  }
+
+  // No inheritance found - using defaults
+  return {
+    isExplicit: false,
+    tooltip: 'Using system default configuration',
+  };
+}
+
+// Helper function for execution limits inheritance
+export function getExecutionLimitInheritanceStatus(
+  currentLevel: 'project' | 'graph' | 'agent',
+  limitType: 'transferCountIs' | 'stepCountIs',
+  currentValue: any,
+  parentValue: any
+): {
+  isExplicit: boolean;
+  inheritedFrom?: string;
+  tooltip?: string;
+} {
+  const hasCurrentValue = currentValue !== undefined && currentValue !== null;
+  const hasParentValue = parentValue !== undefined && parentValue !== null;
+
+  // Check if current value matches parent value (indicating inheritance after builder resolution)
+  if (hasCurrentValue && hasParentValue && currentValue === parentValue) {
+    // Inheritance rules for execution limits
+    if (limitType === 'transferCountIs' && currentLevel === 'graph') {
+      return {
+        isExplicit: false,
+        inheritedFrom: 'Project',
+        tooltip: 'This transfer limit is inherited from the project level',
+      };
+    }
+    if (limitType === 'stepCountIs' && currentLevel === 'agent') {
+      return {
+        isExplicit: false,
+        inheritedFrom: 'Project',
+        tooltip: 'This step limit is inherited from the project level',
+      };
+    }
+  }
+
+  // If there's a value at current level that doesn't match parent, it's explicit
+  if (hasCurrentValue) {
+    return {
+      isExplicit: true,
+      tooltip: `This ${limitType === 'transferCountIs' ? 'transfer limit' : 'step limit'} is explicitly set at the ${currentLevel} level`,
+    };
+  }
+
+  // No current value - check what would be inherited
+  if (limitType === 'transferCountIs') {
+    // transferCountIs: Project → Graph only
+    if (currentLevel === 'graph' && hasParentValue) {
+      return {
+        isExplicit: false,
+        inheritedFrom: 'Project',
+        tooltip: 'Will inherit transfer limit from the project level',
+      };
+    }
+  } else if (limitType === 'stepCountIs') {
+    // stepCountIs: Project → Agent only
+    if (currentLevel === 'agent' && hasParentValue) {
+      return {
+        isExplicit: false,
+        inheritedFrom: 'Project',
+        tooltip: 'Will inherit step limit from the project level',
+      };
+    }
+  }
+
+  // Using defaults
+  const defaultValue = limitType === 'transferCountIs' ? '10' : '50';
+  return {
+    isExplicit: false,
+    tooltip: `Using system default (${defaultValue})`,
+  };
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive disabled:bg-muted',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/components/ui/item-card-grid.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+import {
+  ItemCardContent,
+  ItemCardDescription,
+  ItemCardFooter,
+  ItemCardHeader,
+  ItemCardLink,
+  ItemCardRoot,
+  ItemCardTitle,
+} from './item-card';
+
+export interface ItemCardGridProps<T> {
+  /** Array of items to render as cards */
+  items: T[];
+  /** Function to extract a unique key from each item */
+  getKey: (item: T) => string | number;
+  /** Optional href function for each card (use for server-side navigation with LinkCard) */
+  getHref?: (item: T) => string;
+  /** Optional function to get the description for each card */
+  getDescription?: (item: T) => string | ReactNode;
+  /** Optional function to get the footer text for each card */
+  getFooterText?: (item: T) => string;
+  /** Render function for the card header content */
+  renderHeader?: (item: T) => ReactNode;
+  /** Render function for custom card content (bypasses description/footer structure) */
+  renderContent?: (item: T) => ReactNode;
+  /** Optional custom grid className (defaults to responsive 2-3 column grid) */
+  gridClassName?: string;
+  /** Optional className for individual cards */
+  cardClassName?: string;
+}
+
+export function ItemCardGrid<T>({
+  items,
+  getKey,
+  getHref,
+  getDescription,
+  getFooterText,
+  renderHeader,
+  renderContent,
+  gridClassName = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4',
+  cardClassName,
+}: ItemCardGridProps<T>) {
+  return (
+    <div className={gridClassName}>
+      {items.map((item) => {
+        const cardHeader = (
+          <ItemCardHeader>
+            <ItemCardTitle className="text-md">
+              {renderHeader ? renderHeader(item) : getKey(item)}
+            </ItemCardTitle>
+            {/* Dialogue button can go here */}
+          </ItemCardHeader>
+        );
+
+        const cardContent = renderContent ? (
+          <ItemCardContent>
+            {renderContent(item)}
+            <ItemCardFooter footerText={getFooterText ? getFooterText(item) : ''} />
+          </ItemCardContent>
+        ) : (
+          <ItemCardContent>
+            <ItemCardDescription hasContent={!!getDescription} className="line-clamp-2">
+              {getDescription ? getDescription(item) : ''}
+            </ItemCardDescription>
+            <ItemCardFooter footerText={getFooterText ? getFooterText(item) : ''} />
+          </ItemCardContent>
+        );
+
+        const fullCardContent = (
+          <>
+            {getHref ? <ItemCardLink href={getHref(item)}>{cardHeader}</ItemCardLink> : cardHeader}
+            {getHref ? (
+              <ItemCardLink href={getHref(item)} className="group flex h-full">
+                {cardContent}
+              </ItemCardLink>
+            ) : (
+              cardContent
+            )}
+          </>
+        );
+
+        return (
+          <ItemCardRoot key={getKey(item)} className={cn('h-full min-w-0', cardClassName)}>
+            {fullCardContent}
+          </ItemCardRoot>
+        );
+      })}
+    </div>
+  );
+}
+
+// Convenience type for simple card data with id
+export interface CardItem {
+  id: string | number;
+  [key: string]: any;
+}
+
+// Helper function for items that have an id property
+export const getItemId = <T extends CardItem>(item: T): string | number => item.id;

package/src/components/ui/item-card.tsx

@@ -0,0 +1,112 @@
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import type { ComponentProps } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+
+// Base wrapper that provides consistent card styling
+export function ItemCardRoot({ className, children, ...props }: ComponentProps<typeof Card>) {
+  return (
+    <Card
+      className={cn(
+        'group h-full border-1 shadow-none bg-background hover:ring-2 hover:ring-accent/50 dark:hover:ring-accent/30 transition-all duration-300 py-5 gap-0 rounded-lg linkbox',
+        className
+      )}
+      data-slot="linkbox"
+      {...props}
+    >
+      {children}
+    </Card>
+  );
+}
+
+// Flexible header component
+export function ItemCardHeader({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof CardHeader>) {
+  return (
+    <CardHeader
+      className={cn('px-5 flex items-center justify-between gap-2', className)}
+      {...props}
+    >
+      {children}
+    </CardHeader>
+  );
+}
+
+// Title component with default styling
+export function ItemCardTitle({ className, children, ...props }: ComponentProps<typeof CardTitle>) {
+  return (
+    <CardTitle
+      className={cn('font-medium line-clamp-1 leading-tight transition-colors flex-1', className)}
+      {...props}
+    >
+      {children}
+    </CardTitle>
+  );
+}
+
+// Content wrapper with consistent padding and layout
+export function ItemCardContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof CardContent>) {
+  return (
+    <CardContent
+      className={cn('px-5 gap-4 pt-4 flex flex-col flex-1 justify-between min-w-0', className)}
+      {...props}
+    >
+      {children}
+    </CardContent>
+  );
+}
+
+// Description component with default styling
+export function ItemCardDescription({
+  className,
+  children,
+  hasContent = true,
+  ...props
+}: ComponentProps<typeof CardDescription> & { hasContent?: boolean }) {
+  return (
+    <CardDescription
+      className={cn(
+        hasContent ? 'text-muted-foreground' : 'text-muted-foreground/60',
+        'text-sm',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </CardDescription>
+  );
+}
+
+// Footer with creation date and hover arrow
+export function ItemCardFooter({ footerText }: { footerText: string }) {
+  return (
+    <div className="relative flex items-center justify-between">
+      <div className="flex items-center text-xs text-muted-foreground">{footerText}</div>
+      <div className="opacity-0 group-hover:opacity-60 transform translate-x-1 group-hover:translate-x-0 transition-all duration-300">
+        <ArrowRight className="w-4 h-4 text-muted-foreground/60" />
+      </div>
+    </div>
+  );
+}
+
+// Link wrapper with hover effects
+export function ItemCardLink({ href, className, children, ...props }: ComponentProps<typeof Link>) {
+  return (
+    <Link
+      data-slot="linkoverlay"
+      className={cn('text-foreground hover:text-foreground/90', className)}
+      href={href}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+}

package/src/components/ui/label.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };