@inkeep/agents-manage-ui 0.1.0

package/src/components/data-components/form/validation.ts

@@ -0,0 +1,38 @@
+import { z } from 'zod';
+import { getJsonParseError, validateJsonSchemaForLlm } from '@/lib/json-schema-validation';
+import { idSchema } from '@/lib/validation';
+
+export const dataComponentSchema = z.object({
+  id: idSchema,
+  name: z.string().min(1, 'Name is required.'),
+  description: z.string().min(1, 'Description is required.'),
+  props: z
+    .string()
+    .min(1, 'Props schema is required.')
+    .transform((str, ctx) => {
+      try {
+        const parsed = JSON.parse(str);
+
+        // Validate it's a proper LLM-compatible JSON schema
+        const validationResult = validateJsonSchemaForLlm(str);
+        if (!validationResult.isValid) {
+          const errorMessage = validationResult.errors[0]?.message || 'Invalid JSON schema';
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: errorMessage,
+          });
+          return z.NEVER;
+        }
+
+        return parsed;
+      } catch (error) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: getJsonParseError(error),
+        });
+        return z.NEVER;
+      }
+    }),
+});
+
+export type DataComponentFormData = z.infer<typeof dataComponentSchema>;

package/src/components/errors/full-page-error.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+
+interface FullPageErrorProps {
+  title?: string;
+  description?: string;
+  link?: string;
+  linkText?: string;
+}
+
+export default function FullPageError({ title, description, link, linkText }: FullPageErrorProps) {
+  return (
+    <BodyTemplate breadcrumbs={[{ label: title ?? 'Error' }]}>
+      <MainContent className="flex-1">
+        <div className="flex flex-col items-center justify-center h-full gap-4">
+          {title && <p className="text-lg text-foreground font-semibold">{title}</p>}
+          <div className="text-muted-foreground gap-2 flex flex-col items-center justify-center">
+            {description && <p>{description}</p>}
+            {link && linkText && (
+              <Link
+                href={link}
+                className="flex items-center gap-2 underline text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <ArrowLeft className="w-4 h-4 text-muted-foreground hover:text-foreground transition-colors" />
+                {linkText}
+              </Link>
+            )}
+          </div>
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
+}

package/src/components/form/expandable-field.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { Maximize } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+
+interface ExpandableFieldProps {
+  name: string;
+  label: string;
+  className?: string;
+  compactView: ReactNode;
+  expandedView: ReactNode;
+  actions?: ReactNode;
+  expandButtonLabel?: string;
+}
+
+export function ExpandableField({
+  name,
+  label,
+  className,
+  compactView,
+  expandedView,
+  actions,
+  expandButtonLabel = 'Expand to full screen',
+}: ExpandableFieldProps) {
+  return (
+    <Dialog>
+      <div className={className}>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label htmlFor={name}>{label}</Label>
+            {actions && <div className="flex gap-2">{actions}</div>}
+          </div>
+          <div className="relative">
+            {compactView}
+            <DialogTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute bottom-2.5 right-2.5 h-6 w-6 hover:text-foreground transition-all backdrop-blur-sm bg-white/90 hover:bg-white/95 dark:bg-card dark:hover:bg-accent border border-border shadow-md dark:shadow-lg"
+                type="button"
+              >
+                <Maximize className="h-4 w-4 text-muted-foreground " />
+                <span className="sr-only">{expandButtonLabel}</span>
+              </Button>
+            </DialogTrigger>
+          </div>
+        </div>
+      </div>
+
+      <DialogContent className="!max-w-none h-screen w-screen max-h-screen p-0 gap-0 border-0 rounded-none">
+        <DialogTitle className="sr-only">{label}</DialogTitle>
+        <DialogDescription className="sr-only">{label} Editor</DialogDescription>
+        <div className="flex flex-col min-h-0 w-full h-full px-8 pb-8 pt-12 space-y-2 min-w-0 mx-auto max-w-7xl">
+          <div className="flex items-center justify-between">
+            <Label htmlFor={`${name}-expanded`}>{label}</Label>
+            {actions}
+          </div>
+          <div className="flex-1 min-h-0">{expandedView}</div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/form/expandable-json-editor.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { JsonEditor } from '@/components/form/json-editor';
+import { Button } from '@/components/ui/button';
+import { formatJson } from '@/lib/utils';
+import { ExpandableField } from './expandable-field';
+
+interface ExpandableJsonEditorProps {
+  name: string;
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  label?: string;
+  error?: string;
+  placeholder?: string;
+}
+
+// Shared JSON validation logic
+const useJsonValidation = (value: string) => {
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!value?.trim()) {
+      setError(null);
+      return;
+    }
+
+    try {
+      JSON.parse(value);
+      setError(null);
+    } catch (error) {
+      setError('Invalid JSON syntax');
+    }
+  }, [value]);
+
+  return { error };
+};
+
+// Shared format handler
+const useJsonFormat = (value: string, onChange: (value: string) => void, hasError: boolean) => {
+  const handleFormat = () => {
+    if (!hasError && value?.trim()) {
+      const formatted = formatJson(value);
+      onChange(formatted);
+    }
+  };
+
+  return { handleFormat, canFormat: !hasError && !!value?.trim() };
+};
+
+function ExpandedJsonEditor({
+  value,
+  onChange,
+  placeholder,
+  name,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  name: string;
+}) {
+  const { error } = useJsonValidation(value);
+
+  return (
+    <div className="flex flex-col min-h-0 w-full h-full">
+      <JsonEditor
+        id={`${name}-expanded`}
+        autoFocus
+        value={value || ''}
+        onChange={onChange}
+        placeholder={placeholder}
+      />
+      {error && <p className="text-sm text-destructive mt-2">{error}</p>}
+    </div>
+  );
+}
+
+export function ExpandableJsonEditor({
+  name,
+  value,
+  onChange,
+  className,
+  label = 'JSON',
+  placeholder = 'Enter valid JSON...',
+  error: externalError,
+}: ExpandableJsonEditorProps) {
+  const { error: internalError } = useJsonValidation(value);
+  const { handleFormat, canFormat } = useJsonFormat(
+    value,
+    onChange,
+    !!(externalError || internalError)
+  );
+
+  const error = externalError || internalError;
+
+  const formatButton = (
+    <Button
+      type="button"
+      onClick={handleFormat}
+      disabled={!canFormat}
+      variant="outline"
+      size="sm"
+      className="h-6 px-2 text-xs rounded-sm"
+    >
+      Format
+    </Button>
+  );
+
+  return (
+    <ExpandableField
+      name={name}
+      label={label}
+      className={className}
+      actions={formatButton}
+      compactView={
+        <>
+          <JsonEditor
+            id={name}
+            autoFocus
+            value={value || ''}
+            onChange={onChange}
+            placeholder={placeholder}
+            className={`font-mono text-sm max-h-96 ${error ? 'mb-6' : ''}`}
+          />
+          {error && <p className="text-sm mt-1 text-destructive absolute -bottom-6">{error}</p>}
+        </>
+      }
+      expandedView={
+        <ExpandedJsonEditor
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          name={name}
+        />
+      }
+    />
+  );
+}

package/src/components/form/form-field-wrapper.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import type React from 'react';
+
+import type { Control, FieldPath, FieldValues, RegisterOptions } from 'react-hook-form';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+
+interface FormFieldWrapperProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label: string;
+  children: (field: FieldValues) => React.ReactNode;
+  description?: string;
+  rules?: RegisterOptions<T, FieldPath<T>>;
+}
+
+export function FormFieldWrapper<T extends FieldValues>({
+  control,
+  name,
+  label,
+  children,
+  description,
+  rules,
+}: FormFieldWrapperProps<T>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <FormItem className="relative">
+          <FormLabel>{label}</FormLabel>
+          <FormControl>{children(field)}</FormControl>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/src/components/form/generic-combo-box.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useState } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+import { FormFieldWrapper } from './form-field-wrapper';
+import type { SelectOption } from './generic-select';
+
+interface GenericComboBoxProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label: string;
+  options: SelectOption[];
+  searchPlaceholder?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export function GenericComboBox<T extends FieldValues>({
+  control,
+  name,
+  label,
+  options,
+  searchPlaceholder = 'Search...',
+  placeholder,
+  disabled = false,
+}: GenericComboBoxProps<T>) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <FormFieldWrapper control={control} name={name} label={label}>
+      {(field) => (
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              className="w-full justify-between text-gray-700 "
+              disabled={disabled}
+            >
+              {field.value ? (
+                options.find((option) => option.value === field.value)?.label
+              ) : (
+                <div className="text-muted-foreground">{placeholder}</div>
+              )}
+              <ChevronsUpDown className="opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)] ">
+            <Command>
+              <CommandInput placeholder={searchPlaceholder} className="h-9" />
+              <CommandList>
+                <CommandEmpty>No options found.</CommandEmpty>
+                <CommandGroup>
+                  {options.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      disabled={option.disabled}
+                      onSelect={(currentValue) => {
+                        field.onChange(currentValue === field.value ? '' : currentValue);
+                        setOpen(false);
+                      }}
+                    >
+                      {option.label}
+                      <Check
+                        className={cn(
+                          'ml-auto',
+                          field.value === option.value ? 'opacity-100' : 'opacity-0'
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      )}
+    </FormFieldWrapper>
+  );
+}

package/src/components/form/generic-input.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { Input } from '@/components/ui/input';
+import { FormFieldWrapper } from './form-field-wrapper';
+
+interface GenericInputProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label: string;
+  placeholder?: string;
+  type?: string;
+  min?: string;
+  disabled?: boolean;
+  description?: string;
+}
+
+export function GenericInput<T extends FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  type = 'text',
+  min,
+  disabled,
+  description,
+}: GenericInputProps<T>) {
+  return (
+    <FormFieldWrapper control={control} name={name} label={label} description={description}>
+      {(field) => (
+        <Input
+          type={type}
+          placeholder={placeholder}
+          min={min}
+          disabled={disabled}
+          {...field}
+          value={field.value ?? ''}
+          onChange={(e) => {
+            const value = e.target.value;
+            if (type === 'number') {
+              // For number inputs, convert empty string to undefined, otherwise parse as number
+              field.onChange(value === '' ? undefined : Number(value));
+            } else {
+              field.onChange(value);
+            }
+          }}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+}

package/src/components/form/generic-key-value-input.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useState } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { FormFieldWrapper } from './form-field-wrapper';
+
+interface GenericKeyValueInputProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label: string;
+  description?: string;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  examples?: string[];
+}
+
+export function GenericKeyValueInput<T extends FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  keyPlaceholder = 'Key',
+  valuePlaceholder = 'Value',
+  examples = [],
+}: GenericKeyValueInputProps<T>) {
+  const [currentKey, setCurrentKey] = useState('');
+  const [currentValue, setCurrentValue] = useState('');
+
+  return (
+    <FormFieldWrapper control={control} name={name} label={label}>
+      {(field) => {
+        const currentData: Record<string, string> = field.value || {};
+
+        const addKeyValue = () => {
+          if (currentKey.trim() && currentValue.trim()) {
+            const newData = {
+              ...currentData,
+              [currentKey.trim()]: currentValue.trim(),
+            };
+            field.onChange(newData);
+            setCurrentKey('');
+            setCurrentValue('');
+          }
+        };
+
+        const removeKeyValue = (keyToRemove: string) => {
+          const newData = { ...currentData };
+          delete newData[keyToRemove];
+          field.onChange(newData);
+        };
+
+        const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, isValueField = false) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            if (isValueField) {
+              addKeyValue();
+            } else {
+              // Move to value field
+              const valueInput = e.currentTarget.parentElement?.querySelector(
+                'input:nth-child(2)'
+              ) as HTMLInputElement;
+              valueInput?.focus();
+            }
+          }
+        };
+
+        const handleBlur = () => {
+          if (currentKey.trim() && currentValue.trim()) {
+            addKeyValue();
+          }
+        };
+
+        return (
+          <div className="space-y-3">
+            {/* Display existing key-value pairs */}
+            {Object.entries(currentData).length > 0 && (
+              <div className="space-y-2">
+                {Object.entries(currentData).map(([key, value]) => (
+                  <div key={key} className="flex items-center gap-2 p-2 border rounded bg-muted/30">
+                    <span className="font-medium text-sm">{key}:</span>
+                    <span className="text-sm text-muted-foreground flex-1">{value}</span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeKeyValue(key)}
+                      className="h-6 w-6 p-0 hover:bg-destructive/10 hover:text-destructive"
+                    >
+                      ×
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Add new key-value pair */}
+            <div className="space-y-2">
+              <div className="flex gap-2">
+                <Input
+                  placeholder={keyPlaceholder}
+                  value={currentKey}
+                  onChange={(e) => setCurrentKey(e.target.value)}
+                  onKeyDown={(e) => handleKeyDown(e, false)}
+                />
+                <Input
+                  placeholder={valuePlaceholder}
+                  value={currentValue}
+                  onChange={(e) => setCurrentValue(e.target.value)}
+                  onKeyDown={(e) => handleKeyDown(e, true)}
+                  onBlur={handleBlur}
+                />
+              </div>
+              {(currentKey.trim() || currentValue.trim()) && (
+                <p className="text-xs text-muted-foreground">
+                  Press Enter or click outside to add this entry
+                </p>
+              )}
+            </div>
+
+            {/* Description and examples */}
+            {(description || examples.length > 0) && (
+              <div className="text-sm text-muted-foreground">
+                {description && <p>{description}</p>}
+                {examples.length > 0 && (
+                  <p>
+                    Examples:{' '}
+                    {examples.map((example, index) => (
+                      <span key={example}>
+                        <code className="bg-muted px-1 py-0.5 rounded text-xs">{example}</code>
+                        {index < examples.length - 1 && ', '}
+                      </span>
+                    ))}
+                    .
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    </FormFieldWrapper>
+  );
+}

package/src/components/form/generic-select.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { FormFieldWrapper } from './form-field-wrapper';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface GenericSelectProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+  label: string;
+  placeholder?: string;
+  options: SelectOption[];
+  disabled?: boolean;
+  selectTriggerClassName?: string;
+}
+
+export function GenericSelect<T extends FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  options,
+  disabled = false,
+  selectTriggerClassName,
+}: GenericSelectProps<T>) {
+  return (
+    <FormFieldWrapper control={control} name={name} label={label}>
+      {(field) => (
+        <Select onValueChange={field.onChange} defaultValue={field.value} disabled={disabled}>
+          <SelectTrigger disabled={disabled} className={selectTriggerClassName}>
+            <SelectValue placeholder={placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value} disabled={option.disabled}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </FormFieldWrapper>
+  );
+}