frontend/src/app/(dashboard)/agents/config/[agentId]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { Loader2, Save, Eye } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -13,6 +13,7 @@ import { toast } from 'sonner';
 import { AgentPreview } from '../../../../../components/agents/agent-preview';
 
 import { useAgentVersionData } from '../../../../../hooks/use-agent-version-data';
+import { useSearchParams } from 'next/navigation';
 import { useAgentVersionStore } from '../../../../../lib/stores/agent-version-store';
 
 import { AgentHeader, VersionAlert, ConfigurationTab } from '@/components/agents/config';
@@ -23,7 +24,6 @@ import { useAgentConfigTour } from '@/hooks/use-agent-config-tour';
 import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
 import { TourConfirmationDialog } from '@/components/tour/TourConfirmationDialog';
 
-// Tour steps for agent configuration
 const agentConfigTourSteps: Step[] = [
   {
     target: '[data-tour="agent-header"]',
@@ -76,21 +76,20 @@ const agentConfigTourSteps: Step[] = [
   },
   {
     target: '[data-tour="triggers-section"]',
-    content: 'Set up automated triggers for your agent to run on schedules or events.',
+    content: 'Add various triggers to your agent to help it perform tasks and automate workflows.',
-    title: 'Triggers & Automation',
+    title: 'Triggers',
     placement: 'right',
     disableBeacon: true,
   },
   {
     target: '[data-tour="preview-agent"]',
-    content: 'Build and test your agent by previewing how it will behave and respond. Here you can also ask the agent to self-configure',
+    content: 'You can also build your agent here, just ask it what you need and watch it self configure.',
-    title: 'Build & Test Your Agent',
+    title: 'Build or Test Your Agent',
     placement: 'left',
     disableBeacon: true,
   },
 ];
 
-// Form data interface
 interface FormData {
   name: string;
   description: string;
@@ -135,6 +134,8 @@ function AgentConfigurationContent() {
   const [originalData, setOriginalData] = useState<FormData>(formData);
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
 
+
+
   useEffect(() => {
     if (!agent) return;
     let configSource = agent;
@@ -551,38 +552,38 @@ export default function AgentConfigurationPage() {
         disableScrollParentFix
         styles={{
           options: {
-            primaryColor: '#000000',
+            primaryColor: 'hsl(var(--primary))',
-            backgroundColor: '#ffffff',
+            backgroundColor: 'hsl(var(--background))',
-            textColor: '#000000',
+            textColor: 'hsl(var(--foreground))',
             overlayColor: 'rgba(0, 0, 0, 0.7)',
-            arrowColor: '#ffffff',
+            arrowColor: 'hsl(var(--background))',
             zIndex: 1000,
           },
           tooltip: {
-            backgroundColor: '#ffffff',
+            backgroundColor: 'hsl(var(--background))',
             borderRadius: 8,
             fontSize: 14,
             padding: 20,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px hsl(var(--border))',
-            border: '1px solid #e5e7eb',
+            border: '1px solid hsl(var(--border))',
           },
           tooltipContainer: {
             textAlign: 'left',
           },
           tooltipTitle: {
-            color: '#000000',
+            color: 'hsl(var(--foreground))',
             fontSize: 16,
             fontWeight: 600,
             marginBottom: 8,
           },
           tooltipContent: {
-            color: '#000000',
+            color: 'hsl(var(--foreground))',
             fontSize: 14,
             lineHeight: 1.5,
           },
           buttonNext: {
-            backgroundColor: '#000000',
+            backgroundColor: 'hsl(var(--primary))',
-            color: '#ffffff',
+            color: 'hsl(var(--primary-foreground))',
             fontSize: 12,
             padding: '8px 16px',
             borderRadius: 6,
@@ -590,30 +591,32 @@ export default function AgentConfigurationPage() {
             fontWeight: 500,
           },
           buttonBack: {
-            color: '#6b7280',
+            color: 'hsl(var(--muted-foreground))',
             backgroundColor: 'transparent',
             fontSize: 12,
             padding: '8px 16px',
-            border: '1px solid #e5e7eb',
+            border: '1px solid hsl(var(--border))',
             borderRadius: 6,
           },
           buttonSkip: {
-            color: '#6b7280',
+            color: 'hsl(var(--muted-foreground))',
             backgroundColor: 'transparent',
             fontSize: 12,
             border: 'none',
           },
           buttonClose: {
-            color: '#6b7280',
+            color: 'hsl(var(--muted-foreground))',
             backgroundColor: 'transparent',
           },
         }}
       />
+      
       <TourConfirmationDialog
         open={showWelcome}
         onAccept={handleWelcomeAccept}
         onDecline={handleWelcomeDecline}
       />
+      
       <AgentConfigurationContent />
     </>
   );

frontend/src/components/agents/agent-preview.tsx

@@ -363,7 +363,7 @@ export const AgentPreview = ({ agent, agentMetadata }: AgentPreviewProps) => {
                   )}
                 </div>
                 <p className='w-[60%] text-2xl mb-3'>Start conversation with <span className='text-primary/80 font-semibold'>{agent.name}</span></p>
-                <p className='w-[70%] text-sm text-muted-foreground/60'>Build and test your agent by previewing how it will behave and respond. Here you can also ask the agent to self-configure</p>
+                <p className='w-[70%] text-sm text-muted-foreground/60'>Test your agent's configuration and chat back and forth to see how it performs with your current settings, tools, and knowledge base.</p>
               </div>
             }
           />

frontend/src/components/dashboard/dashboard-content.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, Suspense, useCallback, useEffect } from 'react';
+import React, { useState, Suspense, useCallback } from 'react';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
@@ -34,7 +34,6 @@ import { toast } from 'sonner';
 import { ReleaseBadge } from '../auth/release-badge';
 import { useDashboardTour } from '@/hooks/use-dashboard-tour';
 import { TourConfirmationDialog } from '@/components/tour/TourConfirmationDialog';
-import { Calendar, MessageSquare, Plus, Sparkles, Zap } from 'lucide-react';
 
 const PENDING_PROMPT_KEY = 'pendingAgentPrompt';
 
@@ -267,35 +266,38 @@ export function DashboardContent() {
         disableScrollParentFix
         styles={{
           options: {
-            primaryColor: '#000000',
+            primaryColor: 'hsl(var(--primary))',
-            backgroundColor: '#ffffff',
+            backgroundColor: 'hsl(var(--background))',
-            textColor: '#000000',
+            textColor: 'hsl(var(--foreground))',
             overlayColor: 'rgba(0, 0, 0, 0.7)',
-            arrowColor: '#ffffff',
+            arrowColor: 'hsl(var(--background))',
             zIndex: 1000,
           },
           tooltip: {
-            backgroundColor: '#ffffff',
+            backgroundColor: 'hsl(var(--background))',
             borderRadius: 8,
             fontSize: 14,
             padding: 20,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px hsl(var(--border))',
-            border: '1px solid #e5e7eb',
+            border: '1px solid hsl(var(--border))',
+          },
+          tooltipContainer: {
+            textAlign: 'left',
           },
           tooltipTitle: {
-            color: '#000000',
+            color: 'hsl(var(--foreground))',
             fontSize: 16,
             fontWeight: 600,
             marginBottom: 8,
           },
           tooltipContent: {
-            color: '#000000',
+            color: 'hsl(var(--foreground))',
             fontSize: 14,
             lineHeight: 1.5,
           },
           buttonNext: {
-            backgroundColor: '#000000',
+            backgroundColor: 'hsl(var(--primary))',
-            color: '#ffffff',
+            color: 'hsl(var(--primary-foreground))',
             fontSize: 12,
             padding: '8px 16px',
             borderRadius: 6,
@@ -303,21 +305,21 @@ export function DashboardContent() {
             fontWeight: 500,
           },
           buttonBack: {
-            color: '#6b7280',
+            color: 'hsl(var(--muted-foreground))',
             backgroundColor: 'transparent',
             fontSize: 12,
             padding: '8px 16px',
-            border: '1px solid #e5e7eb',
+            border: '1px solid hsl(var(--border))',
             borderRadius: 6,
           },
           buttonSkip: {
-            color: '#6b7280',
+            color: 'hsl(var(--muted-foreground))',
             backgroundColor: 'transparent',
             fontSize: 12,
             border: 'none',
           },
           buttonClose: {
-            color: '#6b7280',
+            color: 'hsl(var(--muted-foreground))',
             backgroundColor: 'transparent',
           },
         }}