@inkeep/agents-manage-ui 0.1.0

package/src/components/mcp-servers/mcp-tool-item.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import { Lock, LockOpen, MoreVertical, Trash2 } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { getActiveTools } from '@/app/utils/active-tools';
+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 { deleteToolAction } from '@/lib/actions/tools';
+import type { MCPTool } from '@/lib/api/tools';
+import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
+import { Badge } from '../ui/badge';
+import { CardTitle } from '../ui/card';
+import { DeleteConfirmation } from '../ui/delete-confirmation';
+import { Label } from '../ui/label';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { MCPToolImage } from './mcp-tool-image';
+
+// URL Display Component with ellipsis and tooltip
+function URLDisplay({ url }: { url: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="bg-muted/50 rounded px-2 py-1 min-w-0">
+          <code className="text-xs text-muted-foreground block truncate">{url}</code>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" align="start" className="max-w-md">
+        <code className="text-xs break-all">{url}</code>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+interface MCPToolDialogMenuProps {
+  toolId: string;
+  toolName?: string;
+}
+
+function MCPToolDialogMenu({ toolId, toolName }: MCPToolDialogMenuProps) {
+  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 deleteToolAction(tenantId, projectId, toolId);
+      if (result.success) {
+        setIsOpen(false);
+        toast.success('MCP server deleted.');
+      } else {
+        toast.error('Failed to delete MCP server.');
+      }
+    } 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={toolName || 'this MCP server'}
+          isSubmitting={isSubmitting}
+          onDelete={handleDelete}
+        />
+      )}
+    </Dialog>
+  );
+}
+
+export function MCPToolItem({
+  tenantId,
+  projectId,
+  tool,
+}: {
+  tenantId: string;
+  projectId: string;
+  tool: MCPTool;
+}) {
+  const linkPath = `/${tenantId}/projects/${projectId}/mcp-servers/${tool.id}`;
+
+  const activeTools = getActiveTools({
+    availableTools: tool.availableTools,
+    activeTools: tool.config?.mcp?.activeTools,
+  });
+
+  return (
+    <ItemCardRoot>
+      <ItemCardHeader>
+        <ItemCardLink href={linkPath}>
+          <ItemCardTitle className="text-md">
+            <div className="flex items-start gap-3">
+              <MCPToolImage
+                imageUrl={tool.imageUrl}
+                name={tool.name}
+                provider={getToolTypeAndName(tool).type}
+                size={24}
+                className="mt-0.5 flex-shrink-0"
+              />
+              <div className="flex-1 min-w-0">
+                <CardTitle className="text-base truncate">
+                  {getToolTypeAndName(tool).name || tool.name}
+                </CardTitle>
+              </div>
+            </div>
+          </ItemCardTitle>
+        </ItemCardLink>
+        <MCPToolDialogMenu toolId={tool.id} toolName={tool.name} />
+      </ItemCardHeader>
+      <ItemCardContent>
+        <div className="space-y-3 min-w-0">
+          <URLDisplay url={tool.config.mcp.server.url} />
+
+          {/* Key metrics in a structured layout */}
+          <div className="space-y-2">
+            <Label className="text-muted-foreground">Auth Status</Label>
+            {tool.status === 'needs_auth' ? (
+              <div className="flex items-center gap-2">
+                <Badge
+                  variant="outline"
+                  className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800"
+                >
+                  Needs Login
+                </Badge>
+              </div>
+            ) : tool.credentialReferenceId ? (
+              <Badge
+                variant="outline"
+                className="text-xs bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800"
+              >
+                <Lock className="w-3 h-3 mr-1" />
+                Secured
+              </Badge>
+            ) : (
+              <Badge
+                variant="outline"
+                className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800"
+              >
+                <LockOpen className="w-3 h-3 mr-1" />
+                Unsecured
+              </Badge>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label className="text-muted-foreground">Active tools</Label>
+            <Badge
+              variant="code"
+              className="border-none px-2 text-[10px] text-gray-700 dark:text-gray-300"
+            >
+              {activeTools?.length ?? 0}
+            </Badge>
+          </div>
+        </div>
+        <ItemCardFooter
+          footerText={`Created ${formatDate(typeof tool.createdAt === 'string' ? tool.createdAt : tool.createdAt.toISOString())}`}
+        />
+      </ItemCardContent>
+    </ItemCardRoot>
+  );
+}

package/src/components/mcp-servers/mcp-tools-list.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import type { MCPTool } from '@/lib/api/tools';
+import { MCPToolItem } from './mcp-tool-item';
+
+interface MCPToolsListProps {
+  tools: MCPTool[];
+}
+
+export function MCPToolsList({ tools }: MCPToolsListProps) {
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+      {tools?.map((tool: MCPTool) => (
+        <MCPToolItem key={tool.id} tenantId={tenantId} projectId={projectId} tool={tool} />
+      ))}
+    </div>
+  );
+}

package/src/components/mcp-servers/view-mcp-server-details.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import { Lock, LockOpen, Pencil } from 'lucide-react';
+import Link from 'next/link';
+import { Badge } from '@/components/ui/badge';
+import type { MCPTool } from '@/lib/api/tools';
+import { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
+import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
+import { Button } from '../ui/button';
+import { AvailableToolsCard } from './available-tools-card';
+import { MCPToolImage } from './mcp-tool-image';
+
+export function ViewMCPServerDetails({
+  tool,
+  tenantId,
+  projectId,
+}: {
+  tool: MCPTool;
+  tenantId: string;
+  projectId: string;
+}) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'healthy':
+        return 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 border-green-200 dark:border-green-800';
+      case 'unhealthy':
+        return 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-400 border-red-200 dark:border-red-800';
+      case 'disabled':
+        return 'bg-muted text-muted-foreground border-border';
+      case 'needs_auth':
+        return 'bg-amber-100 dark:bg-amber-900/20 text-amber-800 dark:text-amber-400 border-amber-200 dark:border-amber-800';
+      default:
+        return 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800';
+    }
+  };
+
+  // Handle OAuth login for MCP tools that need authentication
+  const handleOAuthLogin = (toolId: string) => {
+    try {
+      // Get the OAuth URL and open in popup window
+      const oauthUrl = getOAuthLoginUrl({ tenantId, projectId, id: toolId });
+      const popup = window.open(
+        oauthUrl,
+        'oauth-popup',
+        'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
+      );
+
+      // Listen for OAuth success message from popup
+      const handleMessage = (event: MessageEvent) => {
+        if (event.data.type === 'oauth-success' && event.data.toolId === toolId) {
+          // Clean up listener
+          window.removeEventListener('message', handleMessage);
+          // Refresh the page to show updated tool status
+          window.location.reload();
+        }
+      };
+
+      if (popup) {
+        window.addEventListener('message', handleMessage);
+
+        // Fallback: Monitor popup for closure
+        const checkClosed = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', handleMessage);
+            // Only refresh if we didn't already get the success message
+            window.location.reload();
+          }
+        }, 1000);
+      }
+    } catch (error) {
+      console.error('OAuth login failed:', error);
+    }
+  };
+
+  let provider: string | undefined;
+  try {
+    provider = getToolTypeAndName(tool).type;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto py-4 space-y-8">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <MCPToolImage
+            imageUrl={tool.imageUrl}
+            name={tool.name}
+            provider={provider}
+            size={48}
+            className="rounded-lg shadow-sm"
+          />
+          <div>
+            <h2 className="text-xl font-bold tracking-tight">{tool.name}</h2>
+            <p className="text-sm text-muted-foreground">MCP Server Details</p>
+          </div>
+        </div>
+        <Button asChild>
+          <Link href={`/${tenantId}/projects/${projectId}/mcp-servers/${tool.id}/edit`}>
+            <Pencil className="w-4 h-4" />
+            Edit
+          </Link>
+        </Button>
+      </div>
+
+      {/* Basic Information */}
+      <div className="space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <div className="text-sm font-medium leading-none">Name</div>
+            <div className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm">
+              {tool.name}
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm font-medium leading-none">Status</div>
+            <div className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm items-center">
+              {tool.status === 'needs_auth' ? (
+                <Badge
+                  variant="outline"
+                  className="text-xs bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-800 cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/30 hover:border-amber-300 dark:hover:border-amber-700 transition-colors"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleOAuthLogin(tool.id);
+                  }}
+                >
+                  Click to Login
+                </Badge>
+              ) : (
+                <Badge className={getStatusColor(tool.status)}>{tool.status}</Badge>
+              )}
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm font-medium leading-none">Created At</div>
+            <div className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm">
+              {formatDate(
+                typeof tool.createdAt === 'string' ? tool.createdAt : tool.createdAt.toISOString()
+              )}
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm font-medium leading-none">Updated At</div>
+            <div className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm">
+              {formatDate(
+                typeof tool.updatedAt === 'string' ? tool.updatedAt : tool.updatedAt.toISOString()
+              )}
+            </div>
+          </div>
+        </div>
+        {tool.imageUrl && (
+          <div className="space-y-2">
+            <div className="text-sm font-medium leading-none">Image URL</div>
+            <div className="min-h-10 w-full rounded-md border bg-background px-3 py-2 text-sm font-mono break-all">
+              {tool.imageUrl.startsWith('data:image/') ? 'Base64 encoded image' : tool.imageUrl}
+            </div>
+          </div>
+        )}
+
+        {/* Server URL */}
+        <div className="space-y-2">
+          <div className="text-sm font-medium leading-none">Server URL</div>
+          <div className="min-h-10 w-full rounded-md border bg-background px-3 py-2 text-sm font-mono break-all">
+            {tool.config.mcp.server.url}
+          </div>
+        </div>
+
+        {/* Transport and Credential */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {tool.config.mcp.transport && (
+            <div className="space-y-2">
+              <div className="text-sm font-medium leading-none">Transport Type</div>
+              <div className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm">
+                {tool.config.mcp.transport.type}
+              </div>
+            </div>
+          )}
+          <div className="space-y-2">
+            <div className="text-sm font-medium leading-none">Credential</div>
+            <div className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm items-center">
+              {tool.credentialReferenceId ? (
+                <div className="flex items-center gap-2">
+                  <Lock className="w-4 h-4" />
+                  <Link
+                    href={`/${tenantId}/projects/${projectId}/credentials/${tool.credentialReferenceId}`}
+                    className="text-blue-600 hover:text-blue-800 hover:underline"
+                  >
+                    Click to view credential
+                  </Link>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <LockOpen className="w-4 h-4" />
+                  <span className="text-muted-foreground">Unsecured</span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Active Tools */}
+        <div className="space-y-2">
+          <div className="flex gap-2 items-center">
+            <div className="text-sm font-medium leading-none">Active Tools</div>
+            <Badge variant="code" className="border-none px-2 text-[10px] text-gray-700">
+              {tool.config.mcp.activeTools === undefined
+                ? (tool.availableTools?.length ?? 0)
+                : (tool.config.mcp.activeTools?.length ?? 0)}
+            </Badge>
+          </div>
+          <div className="min-h-10 w-full rounded-md border bg-background px-3 py-2">
+            {tool.config.mcp.activeTools === undefined ? (
+              // All tools are active (undefined means all)
+              tool.availableTools && tool.availableTools.length > 0 ? (
+                <div className="flex flex-wrap gap-2">
+                  {tool.availableTools.map((toolInfo) => (
+                    <Badge key={toolInfo.name} variant="outline">
+                      {toolInfo.name}
+                    </Badge>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-sm text-muted-foreground">No tools available</div>
+              )
+            ) : tool.config.mcp.activeTools && tool.config.mcp.activeTools.length > 0 ? (
+              // Specific tools are active
+              <div className="flex flex-wrap gap-2">
+                {tool.config.mcp.activeTools.map((toolName) => (
+                  <Badge key={toolName} variant="outline">
+                    {toolName}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              // No tools are active (empty array)
+              <div className="text-sm text-muted-foreground">None</div>
+            )}
+          </div>
+        </div>
+
+        {/* Available Tools */}
+        {tool.availableTools && tool.availableTools.length > 0 && (
+          <AvailableToolsCard tools={tool.availableTools} />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/projects/delete-project-confirmation.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Dialog } from '@radix-ui/react-dialog';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+import { deleteProjectAction } from '@/lib/actions/projects';
+
+interface DeleteProjectConfirmationProps {
+  projectId: string;
+  projectName?: string;
+  setIsOpen: (isOpen: boolean) => void;
+  isOpen: boolean;
+}
+
+export function DeleteProjectConfirmation({
+  projectId,
+  projectName,
+  setIsOpen,
+  isOpen,
+}: DeleteProjectConfirmationProps) {
+  const params = useParams();
+  const { tenantId } = params as { tenantId: string };
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsSubmitting(true);
+    try {
+      const result = await deleteProjectAction(tenantId, projectId);
+      if (result.success) {
+        toast.success('Project deleted.');
+        setIsOpen(false);
+      } else {
+        toast.error(result.error);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DeleteConfirmation
+        itemName={projectName || 'this project'}
+        isSubmitting={isSubmitting}
+        onDelete={handleDelete}
+      />
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,51 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ProjectForm } from './form/project-form';
+import type { ProjectFormData } from './form/validation';
+
+interface EditProjectDialogProps {
+  tenantId: string;
+  projectData: ProjectFormData;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+
+export function EditProjectDialog({
+  tenantId,
+  projectData,
+  isOpen,
+  setIsOpen,
+}: EditProjectDialogProps) {
+  const handleSuccess = () => {
+    setIsOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Edit project</DialogTitle>
+          <DialogDescription className="sr-only">Edit project details.</DialogDescription>
+        </DialogHeader>
+        <ProjectForm
+          projectId={projectData.id}
+          initialData={projectData}
+          tenantId={tenantId}
+          onSuccess={handleSuccess}
+          onCancel={handleCancel}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/projects/form/form-configuration.ts

@@ -0,0 +1,16 @@
+import type { ProjectFormData } from './validation';
+
+export const defaultValues: ProjectFormData = {
+  id: '',
+  name: '',
+  description: '',
+  models: {
+    base: undefined,
+    structuredOutput: undefined,
+    summarizer: undefined,
+  },
+  stopWhen: {
+    transferCountIs: undefined,
+    stepCountIs: undefined,
+  },
+};