@inkeep/agents-manage-ui 0.25.0 → 0.26.1

package/.next/standalone/agents-manage-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",

package/.next/standalone/packages/agents-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-core",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "description": "Agents Core contains the database schema, types, and validation schemas for Inkeep Agent Framework, along with core components.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-manage-ui",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "index.js",
   "types": "index.d.ts",
@@ -88,9 +88,9 @@
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.11",
     "zustand": "^5.0.7",
-    "@inkeep/agents-core": "^0.25.0",
-    "@inkeep/agents-manage-api": "^0.25.0",
-    "@inkeep/agents-run-api": "^0.25.0"
+    "@inkeep/agents-core": "^0.26.1",
+    "@inkeep/agents-manage-api": "^0.26.1",
+    "@inkeep/agents-run-api": "^0.26.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package/src/app/[tenantId]/projects/[projectId]/layout.tsx

@@ -1,5 +1,6 @@
 import FullPageError from '@/components/errors/full-page-error';
 import { fetchProject } from '@/lib/api/projects';
+import { ProjectProvider } from '@/contexts/project-context';
 
 export const dynamic = 'force-dynamic';
 
@@ -11,10 +12,9 @@ export default async function ProjectLayout({
 
   try {
     // Verify project exists
-    await fetchProject(tenantId, projectId);
-  } catch (_error) {
-    return <FullPageError error={_error as Error} context="project" />;
+    const project = await fetchProject(tenantId, projectId);
+    return <ProjectProvider value={project.data}>{children}</ProjectProvider>;
+  } catch (error) {
+    return <FullPageError error={error as Error} context="project" />;
   }
-
-  return <>{children}</>;
 }

package/src/app/[tenantId]/projects/[projectId]/page.tsx

@@ -5,9 +5,8 @@ import { useParams, useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
 export default function ProjectPage() {
-  const params = useParams();
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
   const router = useRouter();
-  const { tenantId, projectId } = params as { tenantId: string; projectId: string };
 
   useEffect(() => {
     // Use client-side navigation instead of server-side redirect

package/src/app/[tenantId]/projects/[projectId]/settings/page.tsx

@@ -26,13 +26,7 @@ export default async function SettingsPage({
     );
   }
   return (
-    <BodyTemplate
-      breadcrumbs={[
-        {
-          label: 'Project settings',
-        },
-      ]}
-    >
+    <BodyTemplate breadcrumbs={[{ label: 'Settings' }]}>
       <MainContent>
         <div className="max-w-2xl mx-auto py-4">
           <ProjectForm

package/src/app/[tenantId]/projects/[projectId]/traces/ai-calls/page.tsx

@@ -7,12 +7,9 @@ import { AICallsBreakdown } from '@/components/traces/ai-calls-breakdown';
 
 export default function AICallsPage() {
   const router = useRouter();
-  const params = useParams();
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
   const searchParams = useSearchParams();
 
-  const tenantId = params.tenantId as string;
-  const projectId = params.projectId as string;
-
   const handleBackToTraces = () => {
     // Preserve the current search params when going back to traces
     const current = new URLSearchParams(searchParams.toString());

package/src/app/[tenantId]/projects/[projectId]/traces/conversations/[conversationId]/page.tsx

@@ -7,11 +7,11 @@ import { ConversationDetail } from '@/components/traces/conversation-detail';
 
 export default function ConversationPage() {
   const router = useRouter();
-  const params = useParams();
-
-  const conversationId = params.conversationId as string;
-  const tenantId = params.tenantId as string;
-  const projectId = params.projectId as string;
+  const { conversationId, tenantId, projectId } = useParams<{
+    conversationId: string;
+    tenantId: string;
+    projectId: string;
+  }>();
 
   const handleBackToTraces = () => {
     router.push(`/${tenantId}/projects/${projectId}/traces`);

package/src/app/[tenantId]/projects/loading.tsx

@@ -6,7 +6,7 @@ import { projectDescription } from '@/constants/page-descriptions';
 
 export default function Loading() {
   return (
-    <BodyTemplate breadcrumbs={[{ label: 'Projects' }]}>
+    <BodyTemplate>
       <MainContent>
         <PageHeader title="Projects" description={projectDescription} />
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">

package/src/app/[tenantId]/projects/page.tsx

@@ -21,7 +21,7 @@ async function ProjectsPage({ params }: PageProps<'/[tenantId]/projects'>) {
   }
 
   return (
-    <BodyTemplate breadcrumbs={[{ label: 'Projects' }]}>
+    <BodyTemplate>
       <MainContent className="min-h-full">
         {projects.data.length > 0 ? (
           <>

package/src/app/layout.tsx

@@ -3,7 +3,7 @@ import { Inter, JetBrains_Mono } from 'next/font/google';
 import './globals.css';
 import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { AppSidebar } from '@/components/sidebar-nav/sidebar-nav';
-import { ThemeProvider } from '@/components/theme-provider';
+import { ThemeProvider } from 'next-themes';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { Toaster } from '@/components/ui/sonner';
 import { RuntimeConfigProvider } from '@/contexts/runtime-config-context';

package/src/components/layout/body-template.tsx

@@ -3,7 +3,7 @@ import { SiteHeader } from '@/components/layout/site-header';
 
 type BodyTemplateProps = {
   children: React.ReactNode;
-  breadcrumbs: { label: string; href?: string }[];
+  breadcrumbs?: { label: string; href?: string }[];
 };
 
 export function BodyTemplate({ children, breadcrumbs }: BodyTemplateProps) {

package/src/components/layout/page-header.tsx

@@ -1,6 +1,4 @@
 import type { ComponentProps, ReactNode } from 'react';
-import type { BreadcrumbItem } from '@/components/ui/breadcrumbs';
-import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import { cn } from '@/lib/utils';
 
 // Root component that provides the base layout
@@ -54,20 +52,12 @@ interface PageHeaderProps {
   description?: string | ReactNode;
   action?: ReactNode;
   className?: string;
-  breadcrumbs?: BreadcrumbItem[];
 }
 
-export function PageHeader({
-  title,
-  description,
-  action,
-  className,
-  breadcrumbs,
-}: PageHeaderProps) {
+export function PageHeader({ title, description, action, className }: PageHeaderProps) {
   return (
     <PageHeaderRoot className={className}>
       <PageHeaderContent>
-        {breadcrumbs && breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
         <PageHeaderTitle>{title}</PageHeaderTitle>
         {description && <PageHeaderDescription>{description}</PageHeaderDescription>}
       </PageHeaderContent>

package/src/components/layout/site-header.tsx

@@ -9,9 +9,7 @@ export function SiteHeader({ breadcrumbs }: { breadcrumbs?: BreadcrumbItem[] })
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
         <SidebarTrigger className="-ml-1 text-muted-foreground hover:text-foreground hover:bg-accent dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-accent/50" />
         <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
-        <div className="flex flex-col gap-0.5">
-          {breadcrumbs && breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
-        </div>
+        <Breadcrumbs items={breadcrumbs} />
       </div>
     </header>
   );

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="secondary">
+                  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/breadcrumbs.tsx

@@ -1,4 +1,10 @@
+'use client';
+
+import { useMemo } from 'react';
 import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { useProject } from '@/contexts/project-context';
 
 export type BreadcrumbItem = {
   label: string;
@@ -6,26 +12,52 @@ export type BreadcrumbItem = {
 };
 
 interface BreadcrumbsProps {
-  items: BreadcrumbItem[];
+  items?: BreadcrumbItem[];
 }
 
 export function Breadcrumbs({ items }: BreadcrumbsProps) {
-  if (!items?.length) return null;
+  const project = useProject();
+  const { tenantId } = useParams<{ tenantId: string }>();
+
+  const allItems = useMemo(() => {
+    const result: BreadcrumbItem[] = [
+      {
+        label: 'Projects',
+        href: `/${tenantId}/projects`,
+      },
+    ];
+    if (project) {
+      result.push({
+        label: project.name,
+        href: `/${tenantId}/projects/${project.id}`,
+      });
+    }
+    if (items) {
+      result.push(...items);
+    }
+    return result;
+  }, [items, tenantId, project]);
+
   return (
     <nav className="text-sm text-muted-foreground" aria-label="Breadcrumb">
       <ol className="flex items-center gap-2">
-        {items.map((item, idx) => {
-          const isLast = idx === items.length - 1;
+        {allItems.map((item, idx, arr) => {
+          const isLast = idx === arr.length - 1;
           return (
-            <li key={`${item.label}-${idx}`} className="flex items-center gap-2">
+            <li
+              key={`${item.label}-${idx}`}
+              className={cn(
+                'flex items-center gap-2',
+                !isLast && 'after:content-["›"] after:text-muted-foreground/60'
+              )}
+            >
               {item.href && !isLast ? (
                 <Link href={item.href} className="hover:text-foreground">
                   {item.label}
                 </Link>
               ) : (
-                <span className={isLast ? 'font-medium text-foreground' : ''}>{item.label}</span>
+                <span className={cn(isLast && 'font-medium text-foreground')}>{item.label}</span>
               )}
-              {!isLast && <span className="text-muted-foreground/60">›</span>}
             </li>
           );
         })}

package/src/contexts/project-context.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { createContext, type FC, type ReactNode, useContext } from 'react';
+import type { Project } from '@/lib/types/project';
+
+export const ProjectContext = createContext<Project | null>(null);
+
+export const ProjectProvider: FC<{
+  children: ReactNode;
+  value: Project;
+}> = (props) => <ProjectContext {...props} />;
+
+export function useProject() {
+  return useContext(ProjectContext);
+}

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',

package/src/lib/types/project.ts

@@ -15,6 +15,7 @@ export type { ProjectStopWhen };
 export interface Project {
   id?: string; // Backend field
   projectId: string; // Frontend field (mapped from id)
+  tenantId: string;
   name: string;
   description: string;
   models: ProjectModels;