1/2 automatically generate and render breadcrumbs in dashboard with Next.js /[tenantId]/@breadcrumbs/[...slug]/page.tsx parallel route

agents-manage-ui/src/components/credentials/views/new-credential-form.tsx

@@ -2,8 +2,11 @@
 
 import { generateIdFromName } from '@inkeep/agents-core/client-exports';
 import { CredentialStoreType } from '@inkeep/agents-core/types';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
+import { use } from 'react';
 import { toast } from 'sonner';
+import { CredentialForm } from '@/components/credentials/views/credential-form';
+import { CredentialFormInkeepCloud } from '@/components/credentials/views/credential-form-inkeep-cloud';
 import type { CredentialFormData } from '@/components/credentials/views/credential-form-validation';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import { useAuthSession } from '@/hooks/use-auth';
@@ -12,16 +15,13 @@ import { updateExternalAgent } from '@/lib/api/external-agents';
 import { updateMCPTool } from '@/lib/api/tools';
 import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
 import { generateId } from '@/lib/utils/id-utils';
-import { CredentialForm } from './credential-form';
-import { CredentialFormInkeepCloud } from './credential-form-inkeep-cloud';
 
-export function NewCredentialForm() {
+export default function NewCredentialForm({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/credentials/new/bearer'>) {
   const router = useRouter();
   const { PUBLIC_IS_INKEEP_CLOUD_DEPLOYMENT } = useRuntimeConfig();
-  const { tenantId, projectId } = useParams<{
-    tenantId: string;
-    projectId: string;
-  }>();
+  const { tenantId, projectId } = use(params);
   const { user } = useAuthSession();
   const handleCreateCredential = async (data: CredentialFormData) => {
     try {
@@ -108,21 +108,16 @@ export function NewCredentialForm() {
     }
   };
 
-  if (PUBLIC_IS_INKEEP_CLOUD_DEPLOYMENT === 'true') {
-    return (
-      <CredentialFormInkeepCloud
+  const FormToUse =
+    PUBLIC_IS_INKEEP_CLOUD_DEPLOYMENT === 'true' ? CredentialFormInkeepCloud : CredentialForm;
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <FormToUse
         onCreateCredential={handleCreateCredential}
         tenantId={tenantId}
         projectId={projectId}
       />
-    );
-  }
-
-  return (
-    <CredentialForm
-      onCreateCredential={handleCreateCredential}
-      tenantId={tenantId}
-      projectId={projectId}
-    />
+    </div>
   );
 }

agents-manage-ui/src/components/traces/ai-calls-breakdown.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { ArrowLeft, Brain, Calendar, Cpu, MessageSquare } from 'lucide-react';
-import { useParams } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import NextLink from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { use, useEffect, useMemo, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -27,13 +28,21 @@ const TIME_RANGES = {
   custom: { label: 'Custom range', hours: 0 },
 } as const;
 
-interface AICallsBreakdownProps {
-  onBack: () => void;
-}
+export default function AICallsBreakdown({
+  params,
+}: PageProps<'/[tenantId]/projects/[projectId]/traces/ai-calls'>) {
+  const { tenantId, projectId } = use(params);
+  const searchParams = useSearchParams();
+
+  const backLink = useMemo(() => {
+    // Preserve the current search params when going back to traces
+    const current = new URLSearchParams(searchParams.toString());
+    const queryString = current.toString();
 
-export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
-  const params = useParams();
-  const tenantId = params.tenantId as string;
+    return queryString
+      ? `/${tenantId}/projects/${projectId}/traces?${queryString}`
+      : `/${tenantId}/projects/${projectId}/traces`;
+  }, [projectId, tenantId, searchParams]);
 
   // Use nuqs for type-safe query state management
   const {
@@ -48,14 +57,14 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
     setModelFilter,
   } = useAICallsQueryState();
   const [agentCalls, setAgentCalls] = useState<
-    Array<{
+    {
       subAgentId: string;
       agentId: string;
       modelId: string;
       totalCalls: number;
-    }>
+    }[]
   >([]);
-  const [modelCalls, setModelCalls] = useState<Array<{ modelId: string; totalCalls: number }>>([]);
+  const [modelCalls, setModelCalls] = useState<{ modelId: string; totalCalls: number }[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [agent, setAgents] = useState<string[]>([]);
@@ -128,16 +137,10 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
 
         // Fetch all data in parallel using SigNoz aggregations
         const [agentData, modelData, uniqueAgents, uniqueModels] = await Promise.all([
-          client.getAICallsBySubAgent(
-            startTime,
-            endTime,
-            agentId,
-            modelId,
-            params.projectId as string
-          ),
-          client.getAICallsByModel(startTime, endTime, agentId, params.projectId as string),
-          client.getUniqueAgents(startTime, endTime, params.projectId as string),
-          client.getUniqueModels(startTime, endTime, params.projectId as string),
+          client.getAICallsBySubAgent(startTime, endTime, agentId, modelId, projectId),
+          client.getAICallsByModel(startTime, endTime, agentId, projectId),
+          client.getUniqueAgents(startTime, endTime, projectId),
+          client.getUniqueModels(startTime, endTime, projectId),
         ]);
 
         setAgentCalls(agentData);
@@ -153,7 +156,7 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
     };
 
     fetchData();
-  }, [selectedAgent, selectedModel, startTime, endTime, params.projectId, tenantId]);
+  }, [selectedAgent, selectedModel, startTime, endTime, projectId, tenantId]);
 
   const totalAICalls = agentCalls.reduce((sum, item) => sum + item.totalCalls, 0);
 
@@ -177,9 +180,11 @@ export function AICallsBreakdown({ onBack }: AICallsBreakdownProps) {
     <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center gap-4">
-        <Button variant="ghost" size="sm" onClick={onBack} className="gap-2">
-          <ArrowLeft className="h-4 w-4" />
-          Back to Overview
+        <Button variant="ghost" size="sm" asChild className="gap-2">
+          <NextLink href={backLink}>
+            <ArrowLeft className="h-4 w-4" />
+            Back to Overview
+          </NextLink>
         </Button>
         <div>
           <h1 className="text-2xl font-bold text-foreground">AI Calls Breakdown</h1>