@inkeep/agents-manage-ui 0.39.3 → 0.39.5

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

@@ -0,0 +1,17 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import BaseSkeleton from '../(index)/loading';
+
+/**
+ * Base loading skeleton for this route segment.
+ * Scoped to the current level and not inherited by child segments.
+ *
+ * ✅ [projectId]/mcp-servers
+ * ❌ [projectId]/mcp-servers/new
+ */
+export default function Loading() {
+  return (
+    <BodyTemplate breadcrumbs={[]}>
+      <BaseSkeleton />
+    </BodyTemplate>
+  );
+}

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/edit/page.tsx

@@ -1,7 +1,6 @@
 import { MCPTransportType } from '@inkeep/agents-core/client-exports';
 import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { MCPServerForm } from '@/components/mcp-servers/form/mcp-server-form';
 import {
   type CredentialScope,
@@ -91,21 +90,18 @@ async function EditMCPPage({
           label: mcpTool.name,
           href: `/${tenantId}/projects/${projectId}/mcp-servers/${mcpServerId}`,
         },
-        { label: 'Edit' },
+        'Edit',
       ]}
+      className="max-w-2xl mx-auto"
     >
-      <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
-          <MCPServerForm
-            initialData={initialFormData}
-            mode="update"
-            tool={mcpTool}
-            credentials={credentials}
-            tenantId={tenantId}
-            projectId={projectId}
-          />
-        </div>
-      </MainContent>
+      <MCPServerForm
+        initialData={initialFormData}
+        mode="update"
+        tool={mcpTool}
+        credentials={credentials}
+        tenantId={tenantId}
+        projectId={projectId}
+      />
     </BodyTemplate>
   );
 }

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/page.tsx

@@ -1,6 +1,5 @@
 import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { ViewMCPServerDetailsProjectScope } from '@/components/mcp-servers/view-mcp-server-details-project-scope';
 import { ViewMCPServerDetailsUserScope } from '@/components/mcp-servers/view-mcp-server-details-user-scope';
 import { fetchMCPTool } from '@/lib/api/tools';
@@ -11,9 +10,30 @@ async function MCPPage({
 }: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]'>) {
   const { mcpServerId, tenantId, projectId } = await params;
 
-  let tool: Awaited<ReturnType<typeof fetchMCPTool>>;
   try {
-    tool = await fetchMCPTool(tenantId, projectId, mcpServerId);
+    const tool = await fetchMCPTool(tenantId, projectId, mcpServerId);
+    const content =
+      tool.credentialScope === 'user' ? (
+        <ViewMCPServerDetailsUserScope tool={tool} tenantId={tenantId} projectId={projectId} />
+      ) : (
+        <ViewMCPServerDetailsProjectScope tool={tool} tenantId={tenantId} projectId={projectId} />
+      );
+    return (
+      <BodyTemplate
+        breadcrumbs={[
+          {
+            label: 'MCP servers',
+            href: `/${tenantId}/projects/${projectId}/mcp-servers`,
+          },
+          {
+            label: tool.name,
+            href: `/${tenantId}/projects/${projectId}/mcp-servers/${mcpServerId}`,
+          },
+        ]}
+      >
+        {content}
+      </BodyTemplate>
+    );
   } catch (error) {
     return (
       <FullPageError
@@ -24,29 +44,6 @@ async function MCPPage({
       />
     );
   }
-
-  return (
-    <BodyTemplate
-      breadcrumbs={[
-        {
-          label: 'MCP servers',
-          href: `/${tenantId}/projects/${projectId}/mcp-servers`,
-        },
-        {
-          label: tool.name,
-          href: `/${tenantId}/projects/${projectId}/mcp-servers/${mcpServerId}`,
-        },
-      ]}
-    >
-      <MainContent>
-        {tool.credentialScope === 'user' ? (
-          <ViewMCPServerDetailsUserScope tool={tool} tenantId={tenantId} projectId={projectId} />
-        ) : (
-          <ViewMCPServerDetailsProjectScope tool={tool} tenantId={tenantId} projectId={projectId} />
-        )}
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default MCPPage;

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/new/page.tsx

@@ -1,3 +1,4 @@
+import { BodyTemplate } from '@/components/layout/body-template';
 import { MCPServerSelection } from '@/components/mcp-servers/selection/mcp-server-selection';
 import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 
@@ -12,7 +13,19 @@ async function NewMCPServerPage({
     console.error('Failed to load credentials:', error);
   }
 
-  return <MCPServerSelection credentials={credentials} tenantId={tenantId} projectId={projectId} />;
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'MCP servers',
+          href: `/${tenantId}/projects/${projectId}/mcp-servers`,
+        },
+        'New MCP server',
+      ]}
+    >
+      <MCPServerSelection credentials={credentials} tenantId={tenantId} projectId={projectId} />
+    </BodyTemplate>
+  );
 }
 
 export default NewMCPServerPage;

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

@@ -3,7 +3,6 @@ import Link from 'next/link';
 import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
-import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { MCPToolsList } from '@/components/mcp-servers/mcp-tools-list';
 import { Button } from '@/components/ui/button';
@@ -17,46 +16,39 @@ async function MCPServersPage({
 }: PageProps<'/[tenantId]/projects/[projectId]/mcp-servers'>) {
   const { tenantId, projectId } = await params;
 
-  let tools: Awaited<ReturnType<typeof fetchMCPTools>>;
   try {
-    tools = await fetchMCPTools(tenantId, projectId);
+    const tools = await fetchMCPTools(tenantId, projectId);
+    const content = tools.length ? (
+      <>
+        <PageHeader
+          title="MCP servers"
+          description={mcpServerDescription}
+          action={
+            <Button asChild>
+              <Link
+                href={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
+                className="flex items-center gap-2"
+              >
+                <Plus className="size-4" />
+                New MCP server
+              </Link>
+            </Button>
+          }
+        />
+        <MCPToolsList tools={tools} />
+      </>
+    ) : (
+      <EmptyState
+        title="No MCP servers yet."
+        description={mcpServerDescription}
+        link={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
+        linkText="Create MCP server"
+      />
+    );
+    return <BodyTemplate breadcrumbs={['MCP servers']}>{content}</BodyTemplate>;
   } catch (error) {
     return <FullPageError errorCode={getErrorCode(error)} context="MCP servers" />;
   }
-
-  return (
-    <BodyTemplate breadcrumbs={[{ label: 'MCP servers' }]}>
-      <MainContent className="min-h-full">
-        {tools.length > 0 ? (
-          <>
-            <PageHeader
-              title="MCP servers"
-              description={mcpServerDescription}
-              action={
-                <Button asChild>
-                  <Link
-                    href={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
-                    className="flex items-center gap-2"
-                  >
-                    <Plus className="size-4" />
-                    New MCP server
-                  </Link>
-                </Button>
-              }
-            />
-            <MCPToolsList tools={tools} />
-          </>
-        ) : (
-          <EmptyState
-            title="No MCP servers yet."
-            description={mcpServerDescription}
-            link={`/${tenantId}/projects/${projectId}/mcp-servers/new`}
-            linkText="Create MCP server"
-          />
-        )}
-      </MainContent>
-    </BodyTemplate>
-  );
 }
 
 export default MCPServersPage;

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

@@ -2,7 +2,7 @@
 
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect } from 'react';
-import AgentsLoadingSkeleton from './agents/loading';
+import BaseLoading from './loading';
 
 export default function ProjectPage() {
   const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
@@ -14,5 +14,5 @@ export default function ProjectPage() {
   }, [tenantId, projectId, router]);
 
   // Show loading state while redirecting
-  return <AgentsLoadingSkeleton />;
+  return <BaseLoading />;
 }

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

@@ -1,6 +1,5 @@
 import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { ProjectForm } from '@/components/projects/form/project-form';
 import type { ProjectFormData } from '@/components/projects/form/validation';
 import { fetchProject } from '@/lib/api/projects';
@@ -13,9 +12,22 @@ export default async function SettingsPage({
 }: PageProps<'/[tenantId]/projects/[projectId]/settings'>) {
   const { tenantId, projectId } = await params;
 
-  let projectData: Awaited<ReturnType<typeof fetchProject>>;
   try {
-    projectData = await fetchProject(tenantId, projectId);
+    const projectData = await fetchProject(tenantId, projectId);
+    return (
+      <BodyTemplate breadcrumbs={['Settings']} className="max-w-2xl mx-auto">
+        <ProjectForm
+          projectId={projectData.data.id}
+          initialData={
+            {
+              ...projectData.data,
+              id: projectData.data.id as string,
+            } as ProjectFormData
+          }
+          tenantId={tenantId}
+        />
+      </BodyTemplate>
+    );
   } catch (error) {
     return (
       <FullPageError
@@ -26,22 +38,4 @@ export default async function SettingsPage({
       />
     );
   }
-  return (
-    <BodyTemplate breadcrumbs={[{ label: 'Settings' }]}>
-      <MainContent>
-        <div className="max-w-2xl mx-auto py-4">
-          <ProjectForm
-            projectId={projectData.data.id}
-            initialData={
-              {
-                ...projectData.data,
-                id: projectData.data.id as string,
-              } as ProjectFormData
-            }
-            tenantId={tenantId}
-          />
-        </div>
-      </MainContent>
-    </BodyTemplate>
-  );
 }

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

@@ -2,7 +2,6 @@
 
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { AICallsBreakdown } from '@/components/traces/ai-calls-breakdown';
 
 export default function AICallsPage() {
@@ -26,12 +25,10 @@ export default function AICallsPage() {
     <BodyTemplate
       breadcrumbs={[
         { label: 'Traces', href: `/${tenantId}/projects/${projectId}/traces` },
-        { label: 'AI Calls Breakdown' },
+        'AI Calls Breakdown',
       ]}
     >
-      <MainContent>
-        <AICallsBreakdown onBack={handleBackToTraces} />
-      </MainContent>
+      <AICallsBreakdown onBack={handleBackToTraces} />
     </BodyTemplate>
   );
 }

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

@@ -2,7 +2,6 @@
 
 import { useParams, useRouter } from 'next/navigation';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { ConversationDetail } from '@/components/traces/conversation-detail';
 
 export default function ConversationPage() {
@@ -21,12 +20,10 @@ export default function ConversationPage() {
     <BodyTemplate
       breadcrumbs={[
         { label: 'Traces', href: `/${tenantId}/projects/${projectId}/traces` },
-        { label: 'Conversation' },
+        'Conversation',
       ]}
     >
-      <MainContent className="h-full flex flex-col">
-        <ConversationDetail conversationId={conversationId} onBack={handleBackToTraces} />
-      </MainContent>
+      <ConversationDetail conversationId={conversationId} onBack={handleBackToTraces} />
     </BodyTemplate>
   );
 }

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

@@ -2,17 +2,14 @@
 
 import { useState } from 'react';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { TracesOverview } from '@/components/traces/traces-overview';
 
 function TracesPage() {
   const [refreshKey, _setRefreshKey] = useState(0);
 
   return (
-    <BodyTemplate breadcrumbs={[{ label: 'Traces' }]}>
-      <MainContent>
-        <TracesOverview key={`overview-${refreshKey}`} refreshKey={refreshKey} />
-      </MainContent>
+    <BodyTemplate breadcrumbs={['Traces']}>
+      <TracesOverview key={`overview-${refreshKey}`} refreshKey={refreshKey} />
     </BodyTemplate>
   );
 }

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

@@ -2,7 +2,6 @@
 
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { ToolCallsBreakdown } from '@/components/traces/tool-calls-breakdown';
 
 export default function ToolCallsPage() {
@@ -25,12 +24,10 @@ export default function ToolCallsPage() {
     <BodyTemplate
       breadcrumbs={[
         { label: 'Traces', href: `/${tenantId}/projects/${projectId}/traces` },
-        { label: 'Tool Calls Breakdown' },
+        'Tool Calls Breakdown',
       ]}
     >
-      <MainContent>
-        <ToolCallsBreakdown onBack={handleBackToTraces} />
-      </MainContent>
+      <ToolCallsBreakdown onBack={handleBackToTraces} />
     </BodyTemplate>
   );
 }

package/src/app/[tenantId]/settings/layout.tsx

@@ -0,0 +1,11 @@
+import { BodyTemplate } from '@/components/layout/body-template';
+import { PageHeader } from '@/components/layout/page-header';
+
+export default function Layout({ children }: LayoutProps<'/[tenantId]/projects'>) {
+  return (
+    <BodyTemplate breadcrumbs={['Settings']}>
+      <PageHeader title="Organization Settings" description="Manage your organization settings" />
+      {children}
+    </BodyTemplate>
+  );
+}

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

@@ -1,15 +1,10 @@
-import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
-import { PageHeader } from '@/components/layout/page-header';
-import { SettingsLoadingSkeleton } from '@/components/settings/loading';
+import { Skeleton } from '@/components/ui/skeleton';
 
-export default function Loading() {
+export default function SettingsLoadingSkeleton() {
   return (
-    <BodyTemplate>
-      <MainContent>
-        <PageHeader title="Organization Settings" description="Manage your organization settings" />
-        <SettingsLoadingSkeleton />
-      </MainContent>
-    </BodyTemplate>
+    <div className="space-y-6">
+      <Skeleton className="h-25 w-full rounded-lg" />
+      <Skeleton className="h-64 w-full rounded-lg" />
+    </div>
   );
 }

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

@@ -1,22 +1,82 @@
-import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
-import { PageHeader } from '@/components/layout/page-header';
-import { SettingsContent } from '@/components/settings/settings-content';
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { ErrorContent } from '@/components/errors/full-page-error';
+import { MembersTable } from '@/components/settings/members-table';
+import { CopyableSingleLineCode } from '@/components/ui/copyable-single-line-code';
+import { useAuthClient } from '@/lib/auth-client';
+import SettingsLoadingSkeleton from './loading';
+
+type FullOrganization = NonNullable<
+  Awaited<
+    ReturnType<ReturnType<typeof useAuthClient>['organization']['getFullOrganization']>
+  >['data']
+>;
+
+export default function SettingsPage() {
+  const authClient = useAuthClient();
+  const { tenantId } = useParams<{ tenantId: string }>();
+  const [organization, setOrganization] = useState<FullOrganization | null>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchOrganization() {
+      if (!tenantId) return;
+
+      try {
+        const { data, error } = await authClient.organization.getFullOrganization({
+          query: {
+            organizationId: tenantId,
+            membersLimit: 100,
+          },
+        });
+
+        if (error) {
+          setError(error.message || 'Failed to fetch organization');
+          return;
+        }
+
+        if (data) {
+          setOrganization(data);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch organization');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchOrganization();
+  }, [tenantId, authClient]);
+
+  if (loading) {
+    return <SettingsLoadingSkeleton />;
+  }
+
+  if (error || !organization) {
+    return (
+      <ErrorContent
+        error={new Error(error || 'Failed to load organization')}
+        context="organization"
+      />
+    );
+  }
 
-function SettingsPage() {
   return (
-    <BodyTemplate>
-      <MainContent>
-        <div className="max-w-4xl mx-auto py-4">
-          <PageHeader
-            title="Organization Settings"
-            description="Manage your organization settings"
-          />
-          <SettingsContent />
+    <div className="space-y-6">
+      <div className="flex items-center gap-6 rounded-lg border p-4">
+        <div className="flex flex-col gap-2 flex-1">
+          <p className="text-sm font-medium">Organization name</p>
+          <CopyableSingleLineCode code={organization.name} />
+        </div>
+        <div className="flex flex-col gap-2 flex-1">
+          <p className="text-sm font-medium">Organization id</p>
+          <CopyableSingleLineCode code={organization.id} />
         </div>
-      </MainContent>
-    </BodyTemplate>
+      </div>
+      <MembersTable members={organization?.members || []} />
+    </div>
   );
 }
-
-export default SettingsPage;

package/src/components/agent/configuration/model-options.tsx

@@ -82,6 +82,10 @@ export const modelOptions = {
       value: GOOGLE_MODELS.GEMINI_3_PRO_PREVIEW,
       label: 'Gemini 3 Pro Preview',
     },
+    {
+      value: GOOGLE_MODELS.GEMINI_3_FLASH_PREVIEW,
+      label: 'Gemini 3 Flash Preview',
+    },
     {
       value: GOOGLE_MODELS.GEMINI_2_5_PRO,
       label: 'Gemini 2.5 Pro',