+
- JWT Token Auto-Refresh
-
-
+ JWT Token Auto-Refresh
+
+
Demonstrates automatic JWT token refresh functionality
-
-
-
+
+
{/* Authentication Status */}
Authentication:
-
+
{isAuthenticated ? 'Authenticated' : 'Not Authenticated'}
-
+
{/* Token Status */}
Token Status:
-
+
{tokenStatus.status}
-
+
{/* Refresh Status */}
@@ -103,7 +101,7 @@ export function TokenRefreshExample() {
Token Preview:
-
+
{token.substring(0, 50)}...
@@ -124,7 +122,7 @@ export function TokenRefreshExample() {
{/* Instructions */}
-
+
• Manual Refresh: Forces a token refresh
• Auto Refresh: Only refreshes if token is expired
• The API service automatically refreshes tokens on 401 errors
-
+
);
}
diff --git a/src/pages/Experiments/ExperimentDetail.tsx b/src/pages/Experiments/ExperimentDetail.tsx
new file mode 100644
index 0000000..2775a88
--- /dev/null
+++ b/src/pages/Experiments/ExperimentDetail.tsx
@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { analyticsService } from '@/services/analytics.service';
+import ABTestChart from '@/components/Analytics/ABTestChart';
+import { ABTestComparisonResponse } from '@/types';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { ChevronLeft, Info, AlertCircle, RefreshCw, BarChart2 } from 'lucide-react';
+import toast from 'react-hot-toast';
+
+const ExperimentDetail: React.FC = () => {
+ const router = useRouter();
+ const { id1, id2 } = router.query;
+
+ const [data, setData] = useState
(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const fetchData = async () => {
+ if (!id1 || !id2) return;
+
+ setLoading(true);
+ setError(null);
+ try {
+ const response = await analyticsService.getComparisonData(id1 as string, id2 as string);
+ setData(response.data);
+ } catch (err: any) {
+ const errorMsg = err.message || 'Error loading comparison data';
+ setError(errorMsg);
+ toast.error(errorMsg);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ if (router.isReady && id1 && id2) {
+ fetchData();
+ }
+ }, [router.isReady, id1, id2]);
+
+ if (!id1 || !id2) {
+ return (
+
+
+
+ Comparison Required
+ Please provide two prompt IDs via URL parameters to compare their performance.
+
+
+
+
+ {/* Header Navigation */}
+
+
+
+
+
+
+ A/B Testing Details
+
+
Comparing performance trends and reliability
+
+
+
+
+
+
+ {error ? (
+
+
+ Failed to load analysis
+ {error}
+
+
+ ) : data ? (
+
+ {/* Main Chart Component */}
+
+
+ {/* Insights Section */}
+ {data.comparisonResult && (
+
+
+
+ Comparative Insights
+
+
+
+
+
Overall Performance
+
+
+ {data.comparisonResult.winner === 'prompt1' ? data.prompt1.name : data.comparisonResult.winner === 'prompt2' ? data.prompt2.name : 'Neutral'}
+
+
+
+ Winner
+
+
+
Based on aggregate of all key metrics.
+
+
+
+
Confidence Level
+
{(data.comparisonResult.confidence * 100).toFixed(1)}%
+
+
+
+
+
Reliability Diff
+
= 0 ? 'text-green-400' : 'text-red-400'}`}>
+ {data.comparisonResult.improvements.accuracy >= 0 ? '+' : ''}{(data.comparisonResult.improvements.accuracy * 100).toFixed(1)}%
+
+
Accuracy improvement shift between versions.
+
+
+ )}
+
+ ) : (
+
+ )}
+
+