Feature/dashboard tips carousel

frontend/app/docs/dashboard-tips/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import React from 'react';
+import { Breadcrumbs } from '@/components/shared';
+
+export default function DashboardTipsDocs() {
+  return (
+    <div className="space-y-6">
+      <Breadcrumbs 
+        items={[
+          { label: 'Documentation', href: '/docs' },
+          { label: 'Dashboard Tips' }
+        ]} 
+      />
+
+      <div>
+        <h1 className="text-h1 text-gray-900 dark:text-gray-100">Dashboard Tips</h1>
+        <p className="text-body text-gray-500 dark:text-gray-400 mt-2">
+          Learn how to make the most of your ProactivePulse AI dashboard
+        </p>
+      </div>
+
+      <div className="bg-white dark:bg-slate border border-gray-200 dark:border-slate-light rounded-lg shadow-sm p-6">
+        <div className="prose prose-slate dark:prose-invert max-w-none">
+          <h2>Getting Started with Dashboard Tips</h2>
+          <p>
+            Dashboard tips provide helpful guidance on using the ProactivePulse AI platform effectively. 
+            These tips appear at the top of your dashboard and can be dismissed or re-enabled at any time.
+          </p>
+
+          <h3>Managing Dashboard Tips</h3>
+          <p>
+            You can control the visibility of dashboard tips in two ways:
+          </p>
+
+          <ul>
+            <li>
+              <strong>Dismiss individual tips</strong> by clicking the X icon in the top-right corner of the tip card
+            </li>
+            <li>
+              <strong>Toggle all tips on/off</strong> using the help icon (❓) in the top navigation bar
+            </li>
+          </ul>
+
+          <h3>Re-enabling Tips</h3>
+          <p>
+            If you've dismissed the tips and want to see them again:
+          </p>
+
+          <ol>
+            <li>Click the help icon (❓) in the top navigation bar</li>
+            <li>Toggle the "Show Tips" switch to the on position</li>
+            <li>The tips carousel will immediately reappear on your dashboard</li>
+          </ol>
+
+          <h3>Tip Categories</h3>
+          <p>
+            Dashboard tips cover various aspects of the platform:
+          </p>
+
+          <ul>
+            <li>Running analysis to generate insights</li>
+            <li>Exploring and filtering insights</li>
+            <li>Monitoring analysis history</li>
+            <li>Checking system health and configuration</li>
+            <li>Using search and filter functionality</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/docs/index.ts

@@ -0,0 +1 @@
+// This file is intentionally left empty to ensure proper directory recognition

frontend/app/docs/layout.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="max-w-4xl mx-auto">
+      {children}
+    </div>
+  );
+}

frontend/app/docs/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Breadcrumbs } from '@/components/shared/Breadcrumbs';
+import { 
+  BookOpenIcon, 
+  LightBulbIcon,
+  Cog6ToothIcon,
+  ChartBarIcon
+} from '@heroicons/react/24/outline';
+
+export default function DocsPage() {
+  const docsSections = [
+    {
+      title: 'Dashboard Tips',
+      description: 'Learn how to make the most of your dashboard with helpful tips and guidance',
+      icon: LightBulbIcon,
+      href: '/docs/dashboard-tips'
+    },
+    {
+      title: 'Getting Started',
+      description: 'Quick start guide to setting up and using ProactivePulse AI',
+      icon: BookOpenIcon,
+      href: '#'
+    },
+    {
+      title: 'Configuration',
+      description: 'Learn how to configure the system for your environment',
+      icon: Cog6ToothIcon,
+      href: '#'
+    },
+    {
+      title: 'Analysis Guide',
+      description: 'Detailed guide on running and interpreting analysis results',
+      icon: ChartBarIcon,
+      href: '#'
+    }
+  ];
+
+  return (
+    <div className="space-y-6">
+      <Breadcrumbs items={[{ label: 'Documentation' }]} />
+
+      <div>
+        <h1 className="text-h1 text-gray-900 dark:text-gray-100">Documentation</h1>
+        <p className="text-body text-gray-500 dark:text-gray-400 mt-2">
+          Learn how to use ProactivePulse AI effectively
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {docsSections.map((section, index) => {
+          const Icon = section.icon;
+          return (
+            <Link 
+              key={index}
+              href={section.href}
+              className="block bg-white dark:bg-slate border border-gray-200 dark:border-slate-light rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow duration-150"
+            >
+              <div className="flex items-start gap-4">
+                <div className="h-10 w-10 rounded-lg bg-info-light dark:bg-info-bg flex items-center justify-center flex-shrink-0">
+                  <Icon className="h-5 w-5 text-info dark:text-info-dark" />
+                </div>
+                <div>
+                  <h3 className="text-body font-medium text-gray-900 dark:text-gray-100 mb-1">
+                    {section.title}
+                  </h3>
+                  <p className="text-body-sm text-gray-500 dark:text-gray-400">
+                    {section.description}
+                  </p>
+                </div>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/components/dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useMemo } from 'react';
-import { Card, CardHeader, LoadingSpinner, Badge, Button, AnimatedButton, Breadcrumbs } from '@/components/shared';
+import React, { useMemo, useEffect, useRef } from 'react';
+import { Card, CardHeader, LoadingSpinner, Badge, Button, AnimatedButton, Breadcrumbs, TipsCarousel } from '@/components/shared';
 import { useInsights } from '@/lib/hooks/useInsights';
 import { useHealthStatus as useSystemHealth } from '@/lib/hooks/useSystemHealth';
 import { useAnalysisHistory } from '@/lib/hooks/useAnalysis';
@@ -23,16 +23,36 @@ import Link from 'next/link';
 import { Priority } from '@/lib/types/insight';
 import { motion } from 'framer-motion';
 import { cn } from '@/lib/utils/helpers';
+import type { TipsCarouselRef } from '@/components/shared/TipsCarousel';
 
 export function Dashboard() {
   const { insights, total: totalInsights, isLoading: insightsLoading, mutate: refreshInsights } = useInsights({ limit: 10 });
   const { health, isHealthy, isLoading: healthLoading } = useSystemHealth();
   const { runs, total: totalRuns, isLoading: historyLoading } = useAnalysisHistory(10, 0);
+  const tipsCarouselRef = useRef<TipsCarouselRef>(null);
 
   const handleRefresh = () => {
     refreshInsights();
   };
 
+  // Listen for tips visibility changes from the HelpPopover
+  useEffect(() => {
+    const handleTipsVisibilityChange = (event: CustomEvent) => {
+      if (tipsCarouselRef.current) {
+        if (event.detail.show) {
+          tipsCarouselRef.current.show();
+        } else {
+          tipsCarouselRef.current.hide();
+        }
+      }
+    };
+
+    window.addEventListener('tipsVisibilityChanged', handleTipsVisibilityChange as EventListener);
+    return () => {
+      window.removeEventListener('tipsVisibilityChanged', handleTipsVisibilityChange as EventListener);
+    };
+  }, []);
+
   // Calculate statistics
   const stats = useMemo(() => {
     const criticalInsights = insights.filter(i => i.priority === 'critical').length;
@@ -54,6 +74,60 @@ export function Dashboard() {
 
   const hasNoData = !insightsLoading && !historyLoading && insights.length === 0 && runs.length === 0;
 
+  // Dashboard tips configuration
+  const dashboardTips = useMemo(() => [
+    {
+      id: 'tip-1',
+      title: 'Run Analysis to Generate Insights',
+      description: 'Execute an analysis to correlate metrics with tickets and discover actionable insights. Configure the time window and select metrics to analyze.',
+      icon: PlayIcon,
+      action: {
+        label: 'Run Analysis',
+        href: '/analysis'
+      }
+    },
+    {
+      id: 'tip-2',
+      title: 'Explore Your Insights',
+      description: 'View all generated insights with filtering by priority and correlation score. Each insight provides detailed analysis of anomalies and related tickets.',
+      icon: LightBulbIcon,
+      action: {
+        label: 'View Insights',
+        href: '/insights'
+      }
+    },
+    {
+      id: 'tip-3',
+      title: 'Monitor Analysis History',
+      description: 'Track all past analysis runs, view their status, and review detailed results including anomalies detected and insights generated.',
+      icon: ChartBarIcon,
+      action: {
+        label: 'View History',
+        href: '/analysis/history'
+      }
+    },
+    {
+      id: 'tip-4',
+      title: 'Monitor System Health',
+      description: 'Check system status, configuration, and service health from the Settings page. Monitor system mode, version, and feature flags.',
+      icon: CheckCircleIcon,
+      action: {
+        label: 'View Settings',
+        href: '/settings'
+      }
+    },
+    {
+      id: 'tip-5',
+      title: 'Use Search and Filters',
+      description: 'Quickly find insights using the search bar or filter by priority and correlation score. Use the insights page to explore and discover patterns.',
+      icon: InformationCircleIcon,
+      action: {
+        label: 'Explore Insights',
+        href: '/insights'
+      }
+    }
+  ], []);
+
   return (
     <div className="space-y-6">
       {/* AWS-style Page Header with Breadcrumbs */}
@@ -77,7 +151,10 @@ export function Dashboard() {
         </AnimatedButton>
       </div>
 
-      {/* Info Banner (AWS-style) */}
+      {/* Dashboard Tips Carousel - Always visible (unless hidden by user) */}
+      <TipsCarousel ref={tipsCarouselRef} tips={dashboardTips} storageKey="dashboard-tips-hidden" />
+
+      {/* Info Banner (AWS-style) - Only shows when no data */}
       {hasNoData && (
         <motion.div
           initial={{ opacity: 0, y: -10 }}
@@ -567,4 +644,4 @@ function StatsCard({ title, value, subtitle, icon: Icon, iconColor, valueColor,
       </div>
     </motion.div>
   );
-}
+}

frontend/components/layout/Header.tsx

@@ -2,12 +2,13 @@
 
 import React from 'react';
 import { AnimatedThemeToggler } from '@/components/ui/AnimatedThemeToggler';
+import { HelpPopover } from '@/components/shared/HelpPopover';
 import { useHealthStatus as useSystemHealth } from '@/lib/hooks/useSystemHealth';
 import { Badge } from '../shared';
 import { cn } from '@/lib/utils/helpers';
 import { motion } from 'framer-motion';
 import { useSidebar } from '.';
-import { BellIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
+import { BellIcon } from '@heroicons/react/24/outline';
 
 interface HeaderProps {}
 
@@ -60,13 +61,8 @@ export const Header: React.FC<HeaderProps> = () => {
           <span className="absolute top-1 right-1 h-2 w-2 bg-error rounded-full"></span>
         </button>
 
-        {/* Help icon */}
-        <button
-          className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-light transition-colors text-gray-600 dark:text-gray-400"
-          aria-label="Help"
-        >
-          <QuestionMarkCircleIcon className="h-5 w-5" />
-        </button>
+        {/* Help popover */}
+        <HelpPopover />
 
         {/* Theme toggle */}
         <AnimatedThemeToggler />