@inkeep/agents-manage-ui 0.26.0 → 0.26.2

package/src/components/credentials/views/generic-auth-form.tsx

@@ -113,7 +113,7 @@ export function GenericAuthForm({
 
   const renderField = (field: FieldConfig) => {
     const isPrivateKey = field.key === 'private_key';
-    const label = `${field.label}${field.required ? ' *' : ''}`;
+    const label = field.label;
 
     if (field.component === 'textarea') {
       return (
@@ -122,6 +122,7 @@ export function GenericAuthForm({
             control={form.control}
             name={field.key}
             label={label}
+            isRequired={field.required}
             placeholder={field.placeholder}
             className={isPrivateKey ? 'font-mono text-sm min-h-[120px]' : 'min-h-[80px]'}
           />
@@ -136,6 +137,7 @@ export function GenericAuthForm({
           control={form.control}
           name={field.key}
           label={label}
+          isRequired={field.required}
           type={field.type}
           placeholder={field.placeholder}
           disabled={loading}
@@ -146,7 +148,7 @@ export function GenericAuthForm({
   };
 
   const renderSection = (section: FormSection, index: number) => (
-    <div key={index} className="space-y-4">
+    <div key={index} className="space-y-8">
       {section.title && (
         <div>
           <h3 className="text-lg font-medium">{section.title}</h3>
@@ -155,7 +157,6 @@ export function GenericAuthForm({
           )}
         </div>
       )}
-
       {section.fields.map(renderField)}
     </div>
   );
@@ -175,10 +176,10 @@ export function GenericAuthForm({
       </div>
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
           {formConfig.sections.map(renderSection)}
 
-          <div className="flex gap-3 pt-4">
+          <div className="flex gap-3">
             <Button type="submit" disabled={loading}>
               {loading ? 'Creating Credential...' : 'Create Credential'}
             </Button>

package/src/components/credentials/views/nango-providers-grid.tsx

@@ -15,10 +15,9 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 
 interface NangoProvidersGridProps {
   providers: ApiProvider[];
-  error: string | null;
 }
 
-export function NangoProvidersGrid({ providers, error }: NangoProvidersGridProps) {
+export function NangoProvidersGrid({ providers }: NangoProvidersGridProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const { tenantId, projectId } = useParams<{
     tenantId: string;
@@ -85,17 +84,6 @@ export function NangoProvidersGrid({ providers, error }: NangoProvidersGridProps
     return providersWithSearchText.filter((provider) => provider.searchText.includes(query));
   }, [providersWithSearchText, searchQuery]);
 
-  if (error) {
-    return (
-      <div className="text-center p-8">
-        <p className="text-destructive">{error}</p>
-        <Button variant="outline" onClick={() => window.location.reload()} className="mt-4">
-          Try Again
-        </Button>
-      </div>
-    );
-  }
-
   return (
     <div className="space-y-6">
       {/* Search bar */}

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

@@ -159,7 +159,7 @@ export function DataComponentForm({
             </Button>
             {id && (
               <DialogTrigger asChild>
-                <Button type="button" variant="secondary">
+                <Button type="button" variant="destructive-outline">
                   Delete Component
                 </Button>
               </DialogTrigger>

package/src/components/data-components/preview/component-preview-generator.tsx

@@ -16,6 +16,15 @@ import { Textarea } from '@/components/ui/textarea';
 import { updateDataComponent } from '@/lib/api/data-components';
 import { DynamicComponentRenderer } from './dynamic-component-renderer';
 
+const StyledTabsTrigger = (props: React.ComponentProps<typeof TabsTrigger>) => {
+  return (
+    <TabsTrigger
+      {...props}
+      className="bg-transparent data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none data-[state=active]:text-primary data-[state=active]:bg-transparent uppercase font-mono text-xs mt-0.5 pt-2"
+    />
+  );
+};
+
 interface ComponentPreviewGeneratorProps {
   tenantId: string;
   projectId: string;
@@ -166,15 +175,20 @@ export function ComponentPreviewGenerator({
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold">Component Preview</h3>
+        <div className="space-y-2">
+          <h3 className="text-md font-medium">Component Preview</h3>
           <p className="text-sm text-muted-foreground">
-            Generate a React/Tailwind component based on your schema
+            Generate a React/Tailwind component based on your schema.
           </p>
         </div>
         <div className="flex gap-2">
           {!hasPreview && (
-            <Button onClick={() => generatePreview()} disabled={isGenerating} className="gap-2">
+            <Button
+              onClick={() => generatePreview()}
+              disabled={isGenerating}
+              size="sm"
+              className="gap-2"
+            >
               {isGenerating ? (
                 <>
                   <Loader2 className="h-4 w-4 animate-spin" />
@@ -192,7 +206,12 @@ export function ComponentPreviewGenerator({
             <>
               <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                 <PopoverTrigger asChild>
-                  <Button variant="outline" disabled={isDeleting || isGenerating} className="gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={isDeleting || isGenerating}
+                    className="gap-2 font-mono uppercase"
+                  >
                     {isGenerating ? (
                       <>
                         <Loader2 className="h-4 w-4 animate-spin" />
@@ -221,28 +240,27 @@ export function ComponentPreviewGenerator({
                         className="mt-2 min-h-[100px]"
                       />
                     </div>
-                    <div className="flex gap-2">
+                    <div className="flex justify-end gap-2">
                       <Button
                         size="sm"
-                        onClick={async () => {
+                        variant="outline"
+                        onClick={() => {
                           setIsPopoverOpen(false);
-                          await generatePreview(regenerateInstructions || undefined);
                           setRegenerateInstructions('');
                         }}
-                        disabled={isGenerating}
-                        className="flex-1"
                       >
-                        {regenerateInstructions ? 'Apply Changes' : 'Regenerate'}
+                        Cancel
                       </Button>
                       <Button
                         size="sm"
-                        variant="outline"
-                        onClick={() => {
+                        onClick={async () => {
                           setIsPopoverOpen(false);
+                          await generatePreview(regenerateInstructions || undefined);
                           setRegenerateInstructions('');
                         }}
+                        disabled={isGenerating}
                       >
-                        Cancel
+                        {regenerateInstructions ? 'Apply Changes' : 'Regenerate'}
                       </Button>
                     </div>
                   </div>
@@ -267,58 +285,57 @@ export function ComponentPreviewGenerator({
           )}
         </div>
       </div>
-
       {isGenerating && streamingCode && (
         <Streamdown
           isAnimating
           className="[&_[data-code-block-header=true]]:hidden [&_pre]:bg-muted/40!"
         >{`\`\`\`jsx\n${streamingCode}\`\`\``}</Streamdown>
       )}
-
       {isGenerating && !streamingCode && (
         <Card className="p-6">
-          <div className="flex flex-col items-center justify-center space-y-4">
-            <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <p className="text-sm text-muted-foreground">Generating component preview...</p>
+          <div className="flex flex-row items-center justify-center gap-2">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground/70">Generating component preview...</p>
           </div>
         </Card>
       )}
-
       {hasPreview && !isGenerating && isComplete && preview && (
-        <Tabs defaultValue="preview" className="w-full">
-          <TabsList>
-            <TabsTrigger value="preview">Preview</TabsTrigger>
-            <TabsTrigger value="code">Code</TabsTrigger>
-            <TabsTrigger value="data">Sample Data</TabsTrigger>
-          </TabsList>
-          <TabsContent value="preview">
-            <Card className="p-6">
-              <DynamicComponentRenderer code={previewCode} props={previewData} />
-            </Card>
-          </TabsContent>
-          <TabsContent value="code">
-            <CodeEditor
-              value={previewCode}
-              onChange={(newCode) => {
-                if (!preview) return;
-                const updatedPreview = { ...preview, code: newCode };
-                setPreview(updatedPreview);
-                onPreviewChanged?.(updatedPreview);
-              }}
-              language="jsx"
-              className="max-h-[500px]"
-            />
-          </TabsContent>
-          <TabsContent value="data">
-            <JsonEditor
-              value={stringifiedData}
-              onChange={handleDataChange}
-              className="max-h-[500px]"
-            />
-          </TabsContent>
-        </Tabs>
-      )}
+        <Card className="px-2 py-4 pt-0">
+          <Tabs defaultValue="preview" className="w-full">
+            <TabsList className="bg-transparent relative rounded-none border-b p-0 w-full justify-start gap-2">
+              <StyledTabsTrigger value="preview">Preview</StyledTabsTrigger>
+              <StyledTabsTrigger value="code">Code</StyledTabsTrigger>
+              <StyledTabsTrigger value="data">Sample Data</StyledTabsTrigger>
+            </TabsList>
 
+            <TabsContent value="preview">
+              <div className="p-4">
+                <DynamicComponentRenderer code={previewCode} props={previewData} />
+              </div>
+            </TabsContent>
+            <TabsContent value="code">
+              <CodeEditor
+                value={previewCode}
+                onChange={(newCode) => {
+                  if (!preview) return;
+                  const updatedPreview = { ...preview, code: newCode };
+                  setPreview(updatedPreview);
+                  onPreviewChanged?.(updatedPreview);
+                }}
+                language="jsx"
+                className="max-h-[500px] border-0 shadow-none"
+              />
+            </TabsContent>
+            <TabsContent value="data">
+              <JsonEditor
+                value={stringifiedData}
+                onChange={handleDataChange}
+                className="max-h-[500px] border-0 shadow-none"
+              />
+            </TabsContent>
+          </Tabs>
+        </Card>
+      )}
       {!hasPreview && !isGenerating && !isComplete && (
         <InfoCard>
           <p className="text-sm text-muted-foreground">No preview generated</p>

package/src/components/mcp-servers/form/mcp-server-form.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { generateId } from '@/lib/utils/id-utils';
-import { detectAuthenticationRequired, MCPTransportType } from '@inkeep/agents-core/client-exports';
+import { MCPTransportType } from '@inkeep/agents-core/client-exports';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -15,10 +14,11 @@ import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import { Form } from '@/components/ui/form';
 import { InfoCard } from '@/components/ui/info-card';
 import { useOAuthLogin } from '@/hooks/use-oauth-login';
-import { deleteToolAction } from '@/lib/actions/tools';
+import { deleteToolAction, detectOAuthServerAction } from '@/lib/actions/tools';
 import type { Credential } from '@/lib/api/credentials';
 import { createMCPTool, updateMCPTool } from '@/lib/api/tools';
 import type { MCPTool } from '@/lib/types/tools';
+import { generateId } from '@/lib/utils/id-utils';
 import { ActiveToolsSelector } from './active-tools-selector';
 import { type MCPToolFormData, mcpToolSchema } from './validation';
 
@@ -88,14 +88,14 @@ export function MCPServerForm({
     try {
       // handle oauth login
       if (data.credentialReferenceId === 'oauth') {
-        const toolId = generateId();
+        const result = await detectOAuthServerAction(data.config.mcp.server.url);
 
-        const isAuthenticationRequired = await detectAuthenticationRequired({
-          serverUrl: data.config.mcp.server.url,
-          toolId,
-        });
+        if (!result.success) {
+          toast.error(result.error || 'Failed to detect OAuth support');
+          return;
+        }
 
-        if (!isAuthenticationRequired) {
+        if (!result.data) {
           toast.error(
             'This MCP server does not support OAuth authentication. Please select a different credential.'
           );
@@ -103,7 +103,7 @@ export function MCPServerForm({
         }
 
         const mcpToolData = {
-          id: toolId,
+          id: generateId(),
           name: data.name,
           config: {
             type: 'mcp' as const,
@@ -165,7 +165,7 @@ export function MCPServerForm({
 
   const handleDelete = async () => {
     if (!tool) return;
-    
+
     setIsDeleting(true);
     try {
       // Don't revalidate to avoid Next.js trying to refetch the deleted resource on current page
@@ -186,107 +186,107 @@ export function MCPServerForm({
     <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <GenericInput
-          control={form.control}
-          name="name"
-          label="Name"
-          placeholder="MCP server"
-          isRequired
-        />
-        <GenericInput
-          control={form.control}
-          name="config.mcp.server.url"
-          label="URL"
-          placeholder="https://api.example.com/mcp"
-          isRequired
-        />
-        <GenericSelect
-          control={form.control}
-          selectTriggerClassName="w-full"
-          name="config.mcp.transport.type"
-          label="Transport type"
-          placeholder="Select transport type"
-          options={[
-            {
-              value: MCPTransportType.streamableHttp,
-              label: 'Streamable HTTP',
-            },
-            { value: MCPTransportType.sse, label: 'Server-Sent Events (SSE)' },
-          ]}
-        />
-        <GenericInput
-          control={form.control}
-          name="imageUrl"
-          label="Image URL (optional)"
-          placeholder="https://example.com/icon.png or data:image/png;base64,..."
-        />
-
-        <div className="space-y-3">
+          <GenericInput
+            control={form.control}
+            name="name"
+            label="Name"
+            placeholder="MCP server"
+            isRequired
+          />
+          <GenericInput
+            control={form.control}
+            name="config.mcp.server.url"
+            label="URL"
+            placeholder="https://api.example.com/mcp"
+            isRequired
+          />
           <GenericSelect
             control={form.control}
             selectTriggerClassName="w-full"
-            name="credentialReferenceId"
-            label="Credential"
-            placeholder="Select a credential"
+            name="config.mcp.transport.type"
+            label="Transport type"
+            placeholder="Select transport type"
             options={[
-              { value: 'oauth', label: 'OAuth' },
-              { value: 'none', label: 'No Authentication' },
-              ...credentials.map((credential) => ({
-                value: credential.id,
-                label: credential.id,
-              })),
+              {
+                value: MCPTransportType.streamableHttp,
+                label: 'Streamable HTTP',
+              },
+              { value: MCPTransportType.sse, label: 'Server-Sent Events (SSE)' },
             ]}
           />
-          <InfoCard title="How this works">
-            <div className="space-y-2">
-              <p>
-                Select <code className="bg-background px-1.5 py-0.5 rounded border">OAuth</code> to
-                authenticate with the MCP server's OAuth flow, which will start after you click
-                "Create".
-              </p>
-              <p>
-                Select{' '}
-                <code className="bg-background px-1.5 py-0.5 rounded border">
-                  No Authentication
-                </code>{' '}
-                to skip authentication (i.e. none required or add a credential later).
-              </p>
-              <p>Or select from the existing credentials you have already created.</p>
-            </div>
-          </InfoCard>
-        </div>
-
-        {mode === 'update' && (
-          <ActiveToolsSelector
+          <GenericInput
             control={form.control}
-            name="config.mcp.toolsConfig"
-            label="Tools"
-            availableTools={tool?.availableTools || []}
-            description="Select which tools should be enabled for this MCP server"
+            name="imageUrl"
+            label="Image URL (optional)"
+            placeholder="https://example.com/icon.png or data:image/png;base64,..."
           />
-        )}
 
-        <div className="flex w-full justify-between">
-          <Button type="submit" disabled={isSubmitting}>
-            {mode === 'update' ? 'Save' : 'Create'}
-          </Button>
-          {mode === 'update' && tool && (
-            <DialogTrigger asChild>
-              <Button type="button" variant="secondary">
-                Delete Server
-              </Button>
-            </DialogTrigger>
+          <div className="space-y-3">
+            <GenericSelect
+              control={form.control}
+              selectTriggerClassName="w-full"
+              name="credentialReferenceId"
+              label="Credential"
+              placeholder="Select a credential"
+              options={[
+                { value: 'oauth', label: 'OAuth' },
+                { value: 'none', label: 'No Authentication' },
+                ...credentials.map((credential) => ({
+                  value: credential.id,
+                  label: credential.id,
+                })),
+              ]}
+            />
+            <InfoCard title="How this works">
+              <div className="space-y-2">
+                <p>
+                  Select <code className="bg-background px-1.5 py-0.5 rounded border">OAuth</code>{' '}
+                  to authenticate with the MCP server's OAuth flow, which will start after you click
+                  "Create".
+                </p>
+                <p>
+                  Select{' '}
+                  <code className="bg-background px-1.5 py-0.5 rounded border">
+                    No Authentication
+                  </code>{' '}
+                  to skip authentication (i.e. none required or add a credential later).
+                </p>
+                <p>Or select from the existing credentials you have already created.</p>
+              </div>
+            </InfoCard>
+          </div>
+
+          {mode === 'update' && (
+            <ActiveToolsSelector
+              control={form.control}
+              name="config.mcp.toolsConfig"
+              label="Tools"
+              availableTools={tool?.availableTools || []}
+              description="Select which tools should be enabled for this MCP server"
+            />
           )}
-        </div>
-      </form>
-    </Form>
-    {isDeleteOpen && tool && (
-      <DeleteConfirmation
-        itemName={tool.name || 'this MCP server'}
-        isSubmitting={isDeleting}
-        onDelete={handleDelete}
-      />
-    )}
-  </Dialog>
+
+          <div className="flex w-full justify-between">
+            <Button type="submit" disabled={isSubmitting}>
+              {mode === 'update' ? 'Save' : 'Create'}
+            </Button>
+            {mode === 'update' && tool && (
+              <DialogTrigger asChild>
+                <Button type="button" variant="destructive-outline">
+                  Delete Server
+                </Button>
+              </DialogTrigger>
+            )}
+          </div>
+        </form>
+      </Form>
+      {isDeleteOpen && tool && (
+        <DeleteConfirmation
+          itemName={tool.name || 'this MCP server'}
+          isSubmitting={isDeleting}
+          onDelete={handleDelete}
+        />
+      )}
+    </Dialog>
   );
 }

package/src/components/mcp-servers/selection/mcp-server-selection.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { generateId } from '@/lib/utils/id-utils';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -12,6 +11,7 @@ import { useOAuthLogin } from '@/hooks/use-oauth-login';
 import type { Credential } from '@/lib/api/credentials';
 import { createMCPTool } from '@/lib/api/tools';
 import type { PrebuiltMCPServer } from '@/lib/data/prebuilt-mcp-servers';
+import { generateId } from '@/lib/utils/id-utils';
 import { PrebuiltServersGrid } from './prebuilt-servers-grid';
 
 interface MCPServerSelectionProps {

package/src/components/ui/sidebar.tsx

@@ -356,7 +356,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden scrollbar-thin scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent',
         className
       )}
       {...props}

package/src/hooks/use-nango-connect.ts

@@ -68,7 +68,7 @@ export function useNangoConnect() {
         return result;
       } catch (error) {
         if (error instanceof Error) {
-          throw new Error(`Nango headless auth failed: ${error.message}`);
+          throw new Error(`Authentication failed: ${error.message}`);
         }
         throw error;
       }

package/src/lib/actions/tools.ts

@@ -4,6 +4,7 @@
 
 'use server';
 
+import { detectAuthenticationRequired } from '@inkeep/agents-core/client-exports';
 import { revalidatePath } from 'next/cache';
 import { deleteMCPTool, fetchMCPTools } from '../api/tools';
 import { ApiError } from '../types/errors';
@@ -73,3 +74,25 @@ export async function deleteToolAction(
     };
   }
 }
+
+/**
+ * Detect if an MCP server requires OAuth authentication
+ */
+export async function detectOAuthServerAction(serverUrl: string): Promise<ActionResult<boolean>> {
+  try {
+    const requiresAuth = await detectAuthenticationRequired({
+      serverUrl,
+    });
+
+    return {
+      success: true,
+      data: requiresAuth,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to detect OAuth support',
+      code: 'oauth_detection_failed',
+    };
+  }
+}

package/src/lib/data/prebuilt-mcp-servers.ts

@@ -226,6 +226,12 @@ const getBaseMCPServers = (isDark: boolean): PrebuiltMCPServer[] => [
     transport: MCPTransportType.streamableHttp,
     imageUrl: 'https://www.prisma.io/docs/img/favicon.png',
   },
+  {
+    id: 'ramp',
+    name: 'Ramp',
+    url: 'https://mcp.ramp.com/mcp',
+    transport: MCPTransportType.streamableHttp,
+  },
   {
     id: 'rube',
     name: 'Rube',
@@ -275,6 +281,12 @@ const getBaseMCPServers = (isDark: boolean): PrebuiltMCPServer[] => [
     transport: MCPTransportType.streamableHttp,
     imageUrl: 'https://stytch.com/favicon.ico',
   },
+  {
+    id: 'supabase',
+    name: 'Supabase',
+    url: 'https://mcp.supabase.com/mcp',
+    transport: MCPTransportType.streamableHttp,
+  },
   {
     id: 'telnyx',
     name: 'Telnyx',