@inkeep/agents-manage-ui 0.1.0

package/src/components/artifact-components/artifact-component-item-menu.tsx

@@ -0,0 +1,61 @@
+import { MoreVertical, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { DeleteArtifactComponentConfirmation } from './delete-artifact-component-confirmation';
+
+interface ArtifactComponentItemMenuProps {
+  artifactComponentId: string;
+  artifactComponentName?: string;
+}
+
+export function ArtifactComponentItemMenu({
+  artifactComponentId,
+  artifactComponentName,
+}: ArtifactComponentItemMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <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"
+        >
+          <DialogTrigger asChild>
+            <DropdownMenuItem className="text-destructive hover:!bg-destructive/10 dark:hover:!bg-destructive/20 hover:!text-destructive cursor-pointer">
+              <Trash2 className="size-4 text-destructive" />
+              Delete
+            </DropdownMenuItem>
+          </DialogTrigger>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {isOpen && (
+        <DeleteArtifactComponentConfirmation
+          artifactComponentId={artifactComponentId}
+          artifactComponentName={artifactComponentName}
+          setIsOpen={setIsOpen}
+        />
+      )}
+    </Dialog>
+  );
+}

package/src/components/artifact-components/artifact-component-item.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { formatDate } from '@/app/utils/format-date';
+import {
+  ItemCardContent,
+  ItemCardDescription,
+  ItemCardFooter,
+  ItemCardHeader,
+  ItemCardLink,
+  ItemCardRoot,
+  ItemCardTitle,
+} from '@/components/ui/item-card';
+import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import { ArtifactComponentItemMenu } from './artifact-component-item-menu';
+
+export function ArtifactComponentItem({
+  id,
+  name,
+  description,
+  createdAt,
+  tenantId,
+  projectId,
+}: ArtifactComponent & { tenantId: string; projectId: string }) {
+  const linkPath = `/${tenantId}/projects/${projectId}/artifact-components/${id}`;
+
+  return (
+    <ItemCardRoot>
+      <ItemCardHeader>
+        <ItemCardLink href={linkPath}>
+          <ItemCardTitle className="text-md">{name}</ItemCardTitle>
+        </ItemCardLink>
+        <ArtifactComponentItemMenu artifactComponentId={id} artifactComponentName={name} />
+      </ItemCardHeader>
+      <ItemCardContent>
+        <ItemCardDescription hasContent={!!description} className="line-clamp-2">
+          {description || 'No description'}
+        </ItemCardDescription>
+        <ItemCardFooter footerText={`Created ${formatDate(createdAt)}`} />
+      </ItemCardContent>
+    </ItemCardRoot>
+  );
+}

package/src/components/artifact-components/artifact-component-list.tsx

@@ -0,0 +1,27 @@
+import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import { ArtifactComponentItem } from './artifact-component-item';
+
+interface ArtifactComponentsListProps {
+  tenantId: string;
+  projectId: string;
+  artifacts: ArtifactComponent[];
+}
+
+export async function ArtifactComponentsList({
+  tenantId,
+  projectId,
+  artifacts,
+}: ArtifactComponentsListProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+      {artifacts?.map((artifact: ArtifactComponent) => (
+        <ArtifactComponentItem
+          key={artifact.id}
+          {...artifact}
+          tenantId={tenantId}
+          projectId={projectId}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/artifact-components/delete-artifact-component-confirmation.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+import { deleteArtifactComponentAction } from '@/lib/actions/artifact-components';
+
+interface DeleteArtifactComponentConfirmationProps {
+  artifactComponentId: string;
+  artifactComponentName?: string;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+export function DeleteArtifactComponentConfirmation({
+  artifactComponentId,
+  artifactComponentName,
+  setIsOpen,
+}: DeleteArtifactComponentConfirmationProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+
+  const handleDelete = async () => {
+    setIsSubmitting(true);
+    try {
+      const result = await deleteArtifactComponentAction(tenantId, projectId, artifactComponentId);
+      if (result.success) {
+        setIsOpen(false);
+        toast.success('Artifact component deleted.');
+      } else {
+        toast.error(result.error);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <DeleteConfirmation
+      itemName={artifactComponentName || 'this artifact component'}
+      isSubmitting={isSubmitting}
+      onDelete={handleDelete}
+    />
+  );
+}

package/src/components/artifact-components/form/artifact-component-form.tsx

@@ -0,0 +1,127 @@
+'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 { JsonSchemaInput } from '@/components/form/json-schema-input';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import {
+  createArtifactComponentAction,
+  updateArtifactComponentAction,
+} from '@/lib/actions/artifact-components';
+import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import { formatJsonField } from '@/lib/utils';
+import { defaultValues } from './form-configuration';
+import { type ArtifactComponentFormData, artifactComponentSchema } from './validation';
+
+interface ArtifactComponentFormProps {
+  tenantId: string;
+  projectId: string;
+  id?: string;
+  initialData?: ArtifactComponentFormData;
+}
+
+const formatFormData = (data?: ArtifactComponentFormData): ArtifactComponentFormData => {
+  if (!data) return defaultValues;
+
+  const formatted = { ...data };
+  if (formatted.summaryProps) {
+    formatted.summaryProps = formatJsonField(formatted.summaryProps);
+  }
+  if (formatted.fullProps) {
+    formatted.fullProps = formatJsonField(formatted.fullProps);
+  }
+  return formatted;
+};
+
+export function ArtifactComponentForm({
+  id,
+  tenantId,
+  projectId,
+  initialData,
+}: ArtifactComponentFormProps) {
+  const form = useForm<ArtifactComponentFormData>({
+    resolver: zodResolver(artifactComponentSchema),
+    defaultValues: formatFormData(initialData),
+  });
+
+  const { isSubmitting } = form.formState;
+  const router = useRouter();
+
+  const onSubmit = async (data: ArtifactComponentFormData) => {
+    try {
+      const payload = { ...data } as ArtifactComponent;
+      if (id) {
+        const res = await updateArtifactComponentAction(tenantId, projectId, payload);
+        if (!res.success) {
+          toast.error(res.error || 'Failed to update artifact component');
+          return;
+        }
+        toast.success('Artifact component updated');
+      } else {
+        const res = await createArtifactComponentAction(tenantId, projectId, payload);
+        if (!res.success) {
+          toast.error(res.error || 'Failed to create artifact component');
+          return;
+        }
+        toast.success('Artifact component created');
+        router.push(`/${tenantId}/projects/${projectId}/artifact-components`);
+      }
+    } catch (error) {
+      console.error('Error submitting artifact component:', 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="Id"
+          placeholder="my-artifact-component"
+          disabled={!!id}
+          description={
+            id
+              ? ''
+              : 'Choose a unique identifier for this component. Using an existing id will replace that component.'
+          }
+        />
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Name"
+          placeholder="Document Artifact"
+        />
+        <GenericTextarea
+          control={form.control}
+          name="description"
+          label="Description"
+          placeholder="Structured factual information extracted from search results"
+          className="min-h-[80px]"
+        />
+        <JsonSchemaInput
+          control={form.control}
+          name="summaryProps"
+          label="Summary props (JSON Schema)"
+          placeholder="Enter a valid JSON Schema..."
+        />
+        <JsonSchemaInput
+          control={form.control}
+          name="fullProps"
+          label="Full props (JSON Schema)"
+          placeholder="Enter a valid JSON Schema..."
+        />
+        <Button type="submit" disabled={isSubmitting}>
+          Save
+        </Button>
+      </form>
+    </Form>
+  );
+}

package/src/components/artifact-components/form/form-configuration.tsx

@@ -0,0 +1,9 @@
+import type { ArtifactComponentFormData } from './validation';
+
+export const defaultValues: ArtifactComponentFormData = {
+  id: '',
+  name: '',
+  description: '',
+  summaryProps: '',
+  fullProps: '',
+};

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

@@ -0,0 +1,42 @@
+import { z } from 'zod';
+import { getJsonParseError, validateJsonSchemaForLlm } from '@/lib/json-schema-validation';
+import { idSchema } from '@/lib/validation';
+
+const jsonSchemaValidation = (fieldName: string) =>
+  z
+    .string()
+    .min(1, `${fieldName} 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 const artifactComponentSchema = z.object({
+  id: idSchema,
+  name: z.string().min(1, 'Name is required.'),
+  description: z.string().min(1, 'Description is required.'),
+  summaryProps: jsonSchemaValidation('Summary props'),
+  fullProps: jsonSchemaValidation('Full props'),
+});
+
+export type ArtifactComponentFormData = z.infer<typeof artifactComponentSchema>;

package/src/components/credentials/credential-item.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { MoreVertical, Trash2 } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { formatDate } from '@/app/utils/format-date';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  ItemCardContent,
+  ItemCardFooter,
+  ItemCardHeader,
+  ItemCardLink,
+  ItemCardRoot,
+  ItemCardTitle,
+} from '@/components/ui/item-card';
+import { deleteCredentialAction } from '@/lib/actions/credentials';
+import type { Credential } from '@/lib/api/credentials';
+import { ProviderIcon } from '../icons/provider-icon';
+import { DeleteConfirmation } from '../ui/delete-confirmation';
+
+interface CredentialDialogMenuProps {
+  credentialId: string;
+  credentialName?: string;
+}
+
+function CredentialDialogMenu({ credentialId, credentialName }: CredentialDialogMenuProps) {
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  const handleDelete = async () => {
+    setIsSubmitting(true);
+    try {
+      const result = await deleteCredentialAction(tenantId, projectId, credentialId);
+      if (result.success) {
+        setIsOpen(false);
+        toast.success('Credential deleted.');
+      } else {
+        toast.error(result.error);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <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"
+        >
+          <DialogTrigger asChild>
+            <DropdownMenuItem className="text-destructive hover:!bg-destructive/10 dark:hover:!bg-destructive/20 hover:!text-destructive cursor-pointer">
+              <Trash2 className="size-4 text-destructive" />
+              Delete
+            </DropdownMenuItem>
+          </DialogTrigger>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {isOpen && (
+        <DeleteConfirmation
+          itemName={credentialName || 'this credential'}
+          isSubmitting={isSubmitting}
+          onDelete={handleDelete}
+        />
+      )}
+    </Dialog>
+  );
+}
+
+export function CredentialItem({
+  id,
+  createdAt,
+  tenantId,
+  projectId,
+  providerForIcon,
+}: Credential & { tenantId: string; projectId: string; providerForIcon: string }) {
+  const linkPath = `/${tenantId}/projects/${projectId}/credentials/${id}`;
+
+  return (
+    <ItemCardRoot>
+      <ItemCardHeader>
+        <ItemCardLink href={linkPath}>
+          <ItemCardTitle className="text-md">
+            <div className="flex items-center gap-3 min-w-0">
+              <ProviderIcon provider={providerForIcon} size={24} className="flex-shrink-0" />
+              <span className="truncate">{id}</span>
+            </div>
+          </ItemCardTitle>
+        </ItemCardLink>
+        <CredentialDialogMenu credentialId={id} credentialName={id} />
+      </ItemCardHeader>
+      <ItemCardContent>
+        {/* <ItemCardDescription hasContent={!!description} className="line-clamp-2">
+            {description || 'No description'}
+          </ItemCardDescription> */}
+        <ItemCardFooter footerText={`Created ${formatDate(createdAt)}`} />
+      </ItemCardContent>
+    </ItemCardRoot>
+  );
+}

package/src/components/credentials/credential-tools-list.tsx

@@ -0,0 +1,111 @@
+import Link from 'next/link';
+import { Label } from '@/components/ui/label';
+
+interface Tool {
+  id: string;
+  name: string;
+  status: 'healthy' | 'unhealthy' | 'unknown' | 'disabled' | 'needs_auth';
+  config: {
+    mcp: {
+      server: {
+        url: string;
+      };
+    };
+  };
+}
+
+interface CredentialToolsListProps {
+  tools?: Tool[];
+  label?: string;
+  tenantId?: string;
+  projectId?: string;
+}
+
+interface ToolItemProps {
+  tool: Tool;
+  tenantId?: string;
+  projectId?: string;
+}
+
+function ToolItem({ tool, tenantId, projectId }: ToolItemProps) {
+  const canNavigate = tenantId && projectId;
+  const href = canNavigate
+    ? `/${tenantId}/projects/${projectId}/mcp-servers/${tool.id}`
+    : undefined;
+
+  const content = (
+    <>
+      <div className="flex items-center gap-3">
+        <div
+          className={`w-2 h-2 rounded-full ${
+            tool.status === 'healthy'
+              ? 'bg-green-500 dark:bg-green-400'
+              : tool.status === 'unhealthy'
+                ? 'bg-red-500 dark:bg-red-400'
+                : tool.status === 'needs_auth'
+                  ? 'bg-yellow-500 dark:bg-yellow-400'
+                  : 'bg-muted-foreground'
+          }`}
+        />
+        <div>
+          <p className="font-medium text-sm">{tool.name}</p>
+          <p className="text-xs text-muted-foreground">{tool.config.mcp.server.url}</p>
+        </div>
+      </div>
+      <div
+        className={`px-2 py-1 text-xs rounded-full ${
+          tool.status === 'healthy'
+            ? 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400'
+            : tool.status === 'unhealthy'
+              ? 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-400'
+              : tool.status === 'needs_auth'
+                ? 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400'
+                : 'bg-muted text-muted-foreground'
+        }`}
+      >
+        {tool.status}
+      </div>
+    </>
+  );
+
+  if (canNavigate && href) {
+    return (
+      <Link
+        href={href}
+        className="flex items-center justify-between p-3 bg-background border rounded-md hover:bg-muted/50 transition-colors cursor-pointer"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between p-3 bg-background border rounded-md">
+      {content}
+    </div>
+  );
+}
+
+export function CredentialToolsList({
+  tools,
+  label = 'MCP Servers Using This Credential',
+  tenantId,
+  projectId,
+}: CredentialToolsListProps) {
+  return (
+    <div className="space-y-3">
+      <Label>{label}</Label>
+      {tools && tools.length > 0 ? (
+        <div className="space-y-2">
+          {tools.map((tool) => (
+            <ToolItem key={tool.id} tool={tool} tenantId={tenantId} projectId={projectId} />
+          ))}
+        </div>
+      ) : (
+        <div className="text-sm text-muted-foreground p-4 bg-muted/30 rounded-md">
+          No MCP servers are currently using this credential
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/credentials/credentials-list.tsx

@@ -0,0 +1,36 @@
+import type { Credential } from '@/lib/api/credentials';
+import { CredentialItem } from './credential-item';
+
+type CredentialsListProps = {
+  tenantId: string;
+  projectId: string;
+  credentials: Credential[];
+};
+
+export function CredentialsList({ tenantId, projectId, credentials }: CredentialsListProps) {
+  const getProviderFromCredential = (credential: Credential): string => {
+    if (
+      credential.retrievalParams?.provider &&
+      typeof credential.retrievalParams.provider === 'string' &&
+      credential.retrievalParams.provider !== 'private-api-bearer'
+    ) {
+      return credential.retrievalParams.provider;
+    }
+
+    return credential.id;
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+      {credentials?.map((cred: Credential) => (
+        <CredentialItem
+          key={cred.id}
+          {...cred}
+          providerForIcon={getProviderFromCredential(cred)}
+          tenantId={tenantId}
+          projectId={projectId}
+        />
+      ))}
+    </div>
+  );
+}