return durations in us instead of ms for better granularity

Author: biancarosa

dashboard/README.md

@@ -10,6 +10,8 @@ A modern, sleek web dashboard for the fetchr.sh HTTP proxy tool. Built with Next
 - **Dynamic Headers**: Add, remove, and toggle headers with real-time validation
 - **Request Body**: Support for JSON, XML, plain text, and other content types
 - **Auto Content-Type**: Automatically detects and sets appropriate content-type headers
+- **Auto-Refresh Integration**: Automatically refreshes statistics and history when requests are sent
+- **No-Cache Requests**: All requests include no-cache headers to ensure fresh data
 
 ### 📊 Response Viewer
 - **Real-time Responses**: View API responses with syntax highlighting
@@ -22,15 +24,33 @@ A modern, sleek web dashboard for the fetchr.sh HTTP proxy tool. Built with Next
 ### 📚 Request History
 - **View Proxy Requests**: All requests that pass through the proxy appear in the left sidebar
 - **Real-time Updates**: History automatically refreshes with new proxy requests
+- **Auto-Refresh**: Automatically refreshes when requests are sent from the dashboard
+- **Manual Refresh**: Click the refresh button to manually update the history
 - **Replay Requests**: Click any history item to load it into the request builder
 - **Clear History**: Use the trash icon to clear all proxy request history
 - **External Links**: Click the external link icon to open URLs in new tabs
-- **Timing Details**: View detailed proxy overhead and upstream latency metrics
+- **Timing Details**: View detailed proxy overhead and upstream latency metrics with microsecond precision
+- **Fresh Data**: All history requests include cache-busting to ensure up-to-date information
 
 **Note**: Only requests that pass through the fetchr.sh proxy server are tracked in the history. Requests made directly from the dashboard are not stored in the history.
 
+### 📈 Request Statistics
+- **Real-time Metrics**: Live statistics for proxy requests with comprehensive data
+- **Auto-Refresh**: Statistics automatically refresh when requests are sent from the dashboard
+- **Manual Refresh**: Click the refresh button in the statistics panel header
+- **Request Counts**: Success and error counts with visual indicators
+- **Success Rate**: Color-coded success rate percentage
+- **High-Precision Timing**: Microsecond-precision performance metrics for accurate analysis
+  - Average request duration
+  - Average upstream latency  
+  - Average proxy overhead
+- **Data Transfer**: Total request and response sizes with formatted display
+- **Status Code Distribution**: Top status codes with counts
+- **HTTP Method Distribution**: Request method breakdown with counts
+- **Cache-Free Updates**: Statistics are fetched with no-cache headers for real-time accuracy
+
 ### 🔧 Proxy Integration
-- **Health Monitoring**: Real-time proxy server status monitoring
+- **Health Monitoring**: Real-time proxy server status monitoring with no-cache health checks
 - **Connection Status**: Visual indicators for proxy connectivity
 - **Auto-refresh**: Periodic health checks every 30 seconds
 - **Configuration Display**: Shows current proxy host and port
@@ -88,7 +108,7 @@ npm start
 - **Replay Requests**: Click any history item to load it into the request builder
 - **Clear History**: Use the trash icon to clear all proxy request history
 - **External Links**: Click the external link icon to open URLs in new tabs
-- **Timing Details**: View detailed proxy overhead and upstream latency metrics
+- **Timing Details**: View detailed proxy overhead and upstream latency metrics with microsecond precision
 
 **Note**: Only requests that pass through the fetchr.sh proxy server are tracked in the history. Requests made directly from the dashboard are not stored in the history.
 
@@ -211,17 +231,4 @@ When the fetchr.sh backend supports it, the dashboard will integrate with:
 - `GET /api/requests` - Fetch request history
 - `POST /api/requests` - Make requests through proxy
 - `GET /api/health` - Proxy health status
-- `GET /api/stats` - Request statistics
-- `POST /api/replay` - Replay captured requests
-
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Run tests and linting
-5. Submit a pull request
-
-## License
-
-This project is part of the fetchr.sh tool suite. See the main project for license information.
+- `GET /api/stats`

dashboard/next.config.ts

@@ -1,7 +1,36 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  // Disable all caching to ensure fresh data
+  experimental: {
+    staleTimes: {
+      dynamic: 0,
+      static: 0,
+    },
+  },
+  
+  // Add headers to prevent caching
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'no-cache, no-store, must-revalidate',
+          },
+          {
+            key: 'Pragma',
+            value: 'no-cache',
+          },
+          {
+            key: 'Expires',
+            value: '0',
+          },
+        ],
+      },
+    ];
+  },
 };
 
 export default nextConfig;

dashboard/src/app/page.tsx

@@ -4,24 +4,27 @@ import { Header } from '../components/Header';
 import { Sidebar } from '../components/Sidebar';
 import { RequestBuilder } from '../components/RequestBuilder';
 import { RequestStats } from '../components/RequestStats';
+import { RefreshProvider } from '../hooks/useRefreshContext';
 
 export default function Home() {
   return (
-    <div className="h-screen flex flex-col">
-      <Header />
-      <div className="flex flex-1 overflow-hidden">
-        <div className="flex flex-col w-80 border-r bg-background">
-          <div className="flex-1 min-h-0">
-            <Sidebar />
-          </div>
-          <div className="border-t">
-            <RequestStats className="rounded-none border-0" />
+    <RefreshProvider>
+      <div className="h-screen flex flex-col">
+        <Header />
+        <div className="flex flex-1 overflow-hidden">
+          <div className="flex flex-col w-80 border-r bg-background">
+            <div className="flex-1 min-h-0">
+              <Sidebar />
+            </div>
+            <div className="border-t">
+              <RequestStats className="rounded-none border-0" />
+            </div>
           </div>
+          <main className="flex-1 p-6 overflow-auto">
+            <RequestBuilder />
+          </main>
         </div>
-        <main className="flex-1 p-6 overflow-auto">
-          <RequestBuilder />
-        </main>
       </div>
-    </div>
+    </RefreshProvider>
   );
 }

dashboard/src/components/RequestBuilder.tsx

@@ -12,6 +12,7 @@ import { Badge } from './ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 import { Plus, X, Send, RotateCcw, Copy } from 'lucide-react';
 import { useRequestStore } from '../hooks/useRequestStore';
+import { useRefresh } from '../hooks/useRefreshContext';
 import { apiService } from '../services/api';
 import { HttpMethod, ApiError } from '../types/api';
 
@@ -38,6 +39,8 @@ export function RequestBuilder() {
     reset,
   } = useRequestStore();
 
+  const { triggerRefresh } = useRefresh();
+
   const handleSendRequest = async () => {
     if (!url.trim()) {
       setError('URL is required');
@@ -66,6 +69,9 @@ export function RequestBuilder() {
 
       const apiResponse = await apiService.makeRequest(requestConfig);
       setResponse(apiResponse);
+      
+      // Trigger refresh of statistics and history after successful request
+      triggerRefresh();
     } catch (err: unknown) {
       const error = err as ApiError;
       const errorMessage = error?.body || error?.message || 'Request failed';

dashboard/src/components/RequestStats.tsx

@@ -7,6 +7,7 @@ import { Button } from './ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 import { BarChart3, CheckCircle, XCircle, RefreshCw } from 'lucide-react';
 import { apiService, RequestStats as RequestStatsType } from '../services/api';
+import { useRefresh } from '../hooks/useRefreshContext';
 
 interface RequestStatsProps {
   className?: string;
@@ -16,6 +17,7 @@ export function RequestStats({ className }: RequestStatsProps) {
   const [stats, setStats] = useState<RequestStatsType | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const { onRefresh } = useRefresh();
 
   const fetchStats = async () => {
     setIsLoading(true);
@@ -35,6 +37,12 @@ export function RequestStats({ className }: RequestStatsProps) {
     fetchStats();
   }, []);
 
+  // Listen for refresh events from other components
+  useEffect(() => {
+    const cleanup = onRefresh(fetchStats);
+    return cleanup;
+  }, [onRefresh]);
+
   const formatBytes = (bytes: number): string => {
     if (bytes === 0) return '0 B';
     const k = 1024;
@@ -125,15 +133,15 @@ export function RequestStats({ className }: RequestStatsProps) {
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <span className="text-xs text-muted-foreground">Avg Duration</span>
-                <span className="text-xs font-medium">{stats.avg_duration_ms?.toFixed(1) || 0}ms</span>
+                <span className="text-xs font-medium">{(stats.avg_duration_us / 1000).toFixed(1)}ms</span>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-xs text-muted-foreground">Avg Upstream</span>
-                <span className="text-xs font-medium">{stats.avg_upstream_latency_ms?.toFixed(1) || 0}ms</span>
+                <span className="text-xs font-medium">{(stats.avg_upstream_latency_us / 1000).toFixed(1)}ms</span>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-xs text-muted-foreground">Avg Proxy</span>
-                <span className="text-xs font-medium">{stats.avg_proxy_overhead_ms?.toFixed(1) || 0}ms</span>
+                <span className="text-xs font-medium">{(stats.avg_proxy_overhead_us / 1000).toFixed(1)}ms</span>
               </div>
             </div>
 

dashboard/src/components/Sidebar.tsx

@@ -8,6 +8,7 @@ import { ScrollArea } from './ui/scroll-area';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 import { History, Trash2, ExternalLink, Server, RefreshCw } from 'lucide-react';
 import { useRequestStore } from '../hooks/useRequestStore';
+import { useRefresh } from '../hooks/useRefreshContext';
 import { apiService, BackendRequestRecord } from '../services/api';
 import { formatDistanceToNow } from 'date-fns';
 import { HttpMethod } from '../types/api';
@@ -20,6 +21,7 @@ export function Sidebar() {
     setBody,
   } = useRequestStore();
 
+  const { onRefresh } = useRefresh();
   const [backendHistory, setBackendHistory] = useState<BackendRequestRecord[]>([]);
   const [isLoadingBackend, setIsLoadingBackend] = useState(false);
   const [lastRefresh, setLastRefresh] = useState<Date | null>(null);
@@ -53,6 +55,12 @@ export function Sidebar() {
     fetchBackendHistory();
   }, []);
 
+  // Listen for refresh events from other components  
+  useEffect(() => {
+    const cleanup = onRefresh(fetchBackendHistory);
+    return cleanup;
+  }, [onRefresh]);
+
   const loadBackendHistoryItem = (item: BackendRequestRecord) => {
     setMethod(item.method as HttpMethod);
     setUrl(item.url);
@@ -214,13 +222,13 @@ export function Sidebar() {
                           <TooltipProvider>
                             <Tooltip>
                               <TooltipTrigger asChild>
-                                <span>{item.total_duration_ms}ms</span>
+                                <span>{(item.total_duration_us / 1000).toFixed(1)}ms</span>
                               </TooltipTrigger>
                               <TooltipContent>
                                 <div className="text-xs">
-                                  <div>Total: {item.total_duration_ms}ms</div>
-                                  <div>Upstream: {item.upstream_latency_ms}ms</div>
-                                  <div>Proxy: {item.proxy_overhead_ms}ms</div>
+                                  <div>Total: {(item.total_duration_us / 1000).toFixed(1)}ms</div>
+                                  <div>Upstream: {(item.upstream_latency_us / 1000).toFixed(1)}ms</div>
+                                  <div>Proxy: {(item.proxy_overhead_us / 1000).toFixed(1)}ms</div>
                                 </div>
                               </TooltipContent>
                             </Tooltip>

dashboard/src/hooks/useRefreshContext.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React, { createContext, useContext, useCallback } from 'react';
+
+interface RefreshContextType {
+  triggerRefresh: () => void;
+  onRefresh: (callback: () => void) => () => void;
+}
+
+const RefreshContext = createContext<RefreshContextType | undefined>(undefined);
+
+export function RefreshProvider({ children }: { children: React.ReactNode }) {
+  const callbacks = React.useRef<Set<() => void>>(new Set());
+
+  const triggerRefresh = useCallback(() => {
+    callbacks.current.forEach(callback => callback());
+  }, []);
+
+  const onRefresh = useCallback((callback: () => void) => {
+    callbacks.current.add(callback);
+    
+    // Return cleanup function
+    return () => {
+      callbacks.current.delete(callback);
+    };
+  }, []);
+
+  return (
+    <RefreshContext.Provider value={{ triggerRefresh, onRefresh }}>
+      {children}
+    </RefreshContext.Provider>
+  );
+}
+
+export function useRefresh() {
+  const context = useContext(RefreshContext);
+  if (context === undefined) {
+    throw new Error('useRefresh must be used within a RefreshProvider');
+  }
+  return context;
+}