feat(health): 增加历史状态条指标 Tooltip

- 为健康监控时间轴返回 timeline_details 分段指标
- Hover 历史状态柱时展示总请求/成功/失败/可用率/状态
- 展示平均耗时/TTFB/速度和完整时间范围
- 修复历史状态柱 Tooltip 触发区域不可用的问题
- 补齐前端类型、详情抽屉透传和 mock 数据

apps/aether-gateway/src/handlers/admin/endpoint/health_builders/status.rs

@@ -1,6 +1,8 @@
 use crate::handlers::admin::request::AdminAppState;
 use crate::handlers::admin::shared::unix_secs_to_rfc3339;
-use crate::handlers::public::{api_format_display_name, build_public_health_timeline};
+use crate::handlers::public::{
+    api_format_display_name, build_public_health_timeline, build_public_health_timeline_details,
+};
 use crate::handlers::shared::unix_ms_to_rfc3339;
 use crate::provider_key_auth::provider_key_effective_api_formats;
 use aether_data_contracts::repository::candidates::PublicHealthTimelineBucket;
@@ -174,6 +176,13 @@ pub(crate) async fn build_admin_endpoint_health_status_payload(
             let timeline_source = timeline_by_format.get(&api_format).unwrap_or(&empty_timeline);
             let (timeline, time_range_start, time_range_end) =
                 build_public_health_timeline(timeline_source, ENDPOINT_HEALTH_TIMELINE_SEGMENTS);
+            let timeline_details = build_public_health_timeline_details(
+                timeline_source,
+                since_unix_secs,
+                now_unix_secs,
+                ENDPOINT_HEALTH_TIMELINE_SEGMENTS,
+                &[],
+            );
             let healthy_count = timeline.iter().filter(|status| **status == "healthy").count();
             let warning_count = timeline.iter().filter(|status| **status == "warning").count();
             let unhealthy_count = timeline.iter().filter(|status| **status == "unhealthy").count();
@@ -201,6 +210,7 @@ pub(crate) async fn build_admin_endpoint_health_status_payload(
                 "display_name": api_format_display_name(&api_format),
                 "health_score": health_score,
                 "timeline": timeline,
+                "timeline_details": timeline_details,
                 "time_range_start": time_range_start.and_then(unix_ms_to_rfc3339),
                 "time_range_end": time_range_end.map(|ms| unix_ms_to_rfc3339(ms)).unwrap_or_else(|| unix_secs_to_rfc3339(now_unix_secs)),
                 "total_endpoints": endpoint_ids.len(),

apps/aether-gateway/src/handlers/public/catalog_helpers.rs

@@ -25,6 +25,79 @@ use std::time::{SystemTime, UNIX_EPOCH};
 
 const USER_CANCELLED_STATUS_CODE: u16 = 499;
 
+#[derive(Clone, Copy, Debug, Default)]
+struct HealthTimelineMetricBucket {
+    total_count: u64,
+    success_count: u64,
+    failed_count: u64,
+    latency_sum_ms: u64,
+    latency_samples: u64,
+    first_byte_sum_ms: u64,
+    first_byte_samples: u64,
+    output_tokens: u64,
+    response_time_sum_ms: u64,
+}
+
+#[derive(Clone, Copy, Debug)]
+struct HealthTimelineDetailCounts {
+    status: &'static str,
+    total_attempts: u64,
+    success_count: u64,
+    failed_count: u64,
+}
+
+#[derive(Clone, Copy, Debug)]
+struct HealthTimelineWindow {
+    since_unix_secs: u64,
+    until_unix_secs: u64,
+    segments: u32,
+}
+
+impl HealthTimelineMetricBucket {
+    fn add_usage_event(&mut self, event: &StoredRequestUsageAudit) {
+        self.total_count = self.total_count.saturating_add(1);
+        if model_health_event_success(event) {
+            self.success_count = self.success_count.saturating_add(1);
+        } else {
+            self.failed_count = self.failed_count.saturating_add(1);
+        }
+        if let Some(response_time_ms) = event.response_time_ms {
+            self.latency_sum_ms = self.latency_sum_ms.saturating_add(response_time_ms);
+            self.latency_samples = self.latency_samples.saturating_add(1);
+            self.response_time_sum_ms = self.response_time_sum_ms.saturating_add(response_time_ms);
+        }
+        if let Some(first_byte_time_ms) = event.first_byte_time_ms {
+            self.first_byte_sum_ms = self.first_byte_sum_ms.saturating_add(first_byte_time_ms);
+            self.first_byte_samples = self.first_byte_samples.saturating_add(1);
+        }
+        self.output_tokens = self.output_tokens.saturating_add(event.output_tokens);
+    }
+
+    fn avg_latency_ms(self) -> Option<f64> {
+        if self.latency_samples == 0 {
+            None
+        } else {
+            Some(self.latency_sum_ms as f64 / self.latency_samples as f64)
+        }
+    }
+
+    fn avg_first_byte_ms(self) -> Option<f64> {
+        if self.first_byte_samples == 0 {
+            None
+        } else {
+            Some(self.first_byte_sum_ms as f64 / self.first_byte_samples as f64)
+        }
+    }
+
+    fn avg_tps(self) -> Option<f64> {
+        if self.output_tokens == 0 || self.response_time_sum_ms == 0 {
+            None
+        } else {
+            Some(self.output_tokens as f64 / (self.response_time_sum_ms as f64 / 1000.0))
+        }
+    }
+}
+
 pub(crate) fn request_candidate_status_label(status: RequestCandidateStatus) -> &'static str {
     match status {
         RequestCandidateStatus::Available => "available",
@@ -568,6 +641,13 @@ pub(crate) async fn build_api_format_health_monitor_payload(
             .unwrap_or(&empty_timeline);
         let (timeline, time_range_start, time_range_end) =
             build_public_health_timeline(timeline_source, API_FORMAT_HEALTH_TIMELINE_SEGMENTS);
+        let timeline_details = build_public_health_timeline_details(
+            timeline_source,
+            since_unix_secs,
+            now_unix_secs,
+            API_FORMAT_HEALTH_TIMELINE_SEGMENTS,
+            &usage_events,
+        );
 
         let mut format_payload = json!({
             "api_format": api_format.clone(),
@@ -582,6 +662,7 @@ pub(crate) async fn build_api_format_health_monitor_payload(
             "last_event_at": last_event_at.and_then(unix_ms_to_rfc3339),
             "events": events,
             "timeline": timeline,
+            "timeline_details": timeline_details,
             "time_range_start": time_range_start.and_then(unix_ms_to_rfc3339),
             "time_range_end": time_range_end.map(|ms| unix_ms_to_rfc3339(ms)).unwrap_or_else(|| unix_secs_to_rfc3339(now_unix_secs)),
         });
@@ -667,6 +748,12 @@ pub(crate) async fn build_model_health_monitor_payload(
             now_unix_secs,
             MODEL_HEALTH_TIMELINE_SEGMENTS,
         );
+        let timeline_details = build_usage_health_timeline_details(
+            &events,
+            since_unix_secs,
+            now_unix_secs,
+            MODEL_HEALTH_TIMELINE_SEGMENTS,
+        );
         let provider_count = model_health_provider_count(&events);
         let first_byte_average = model_health_average_first_byte_ms(&events);
         let last_event_at = events
@@ -702,6 +789,7 @@ pub(crate) async fn build_model_health_monitor_payload(
             "last_event_at": last_event_at,
             "events": event_payload,
             "timeline": timeline,
+            "timeline_details": timeline_details,
             "time_range_start": unix_secs_to_rfc3339(time_range_start),
             "time_range_end": unix_secs_to_rfc3339(time_range_end),
         });
@@ -1184,6 +1272,12 @@ fn related_health_item_payload(
         now_unix_secs,
         MODEL_HEALTH_TIMELINE_SEGMENTS,
     );
+    let timeline_details = build_usage_health_timeline_details(
+        events,
+        since_unix_secs,
+        now_unix_secs,
+        MODEL_HEALTH_TIMELINE_SEGMENTS,
+    );
     let total_attempts = row.request_count;
     let success_count = row.success_count.min(total_attempts);
     let failed_count = total_attempts.saturating_sub(success_count);
@@ -1210,6 +1304,7 @@ fn related_health_item_payload(
         "avg_tps": model_health_average_tps(row),
         "last_event_at": last_event_at,
         "timeline": timeline,
+        "timeline_details": timeline_details,
         "time_range_start": unix_secs_to_rfc3339(time_range_start),
         "time_range_end": unix_secs_to_rfc3339(time_range_end),
     })
@@ -1357,6 +1452,12 @@ async fn build_provider_health_payload(
         now_unix_secs,
         MODEL_HEALTH_TIMELINE_SEGMENTS,
     );
+    let timeline_details = build_usage_health_timeline_details(
+        &provider_events,
+        since_unix_secs,
+        now_unix_secs,
+        MODEL_HEALTH_TIMELINE_SEGMENTS,
+    );
     let last_event_at = provider_events
         .iter()
         .max_by_key(|event| event.created_at_unix_ms)
@@ -1377,6 +1478,7 @@ async fn build_provider_health_payload(
         "model_count": model_breakdown.len(),
         "last_event_at": last_event_at,
         "timeline": timeline,
+        "timeline_details": timeline_details,
         "time_range_start": unix_secs_to_rfc3339(time_range_start),
         "time_range_end": unix_secs_to_rfc3339(time_range_end),
         "models": models,
@@ -1417,6 +1519,12 @@ fn model_health_payload_from_row(
         now_unix_secs,
         MODEL_HEALTH_TIMELINE_SEGMENTS,
     );
+    let timeline_details = build_usage_health_timeline_details(
+        events,
+        since_unix_secs,
+        now_unix_secs,
+        MODEL_HEALTH_TIMELINE_SEGMENTS,
+    );
     let last_event_at = events
         .first()
         .and_then(|item| unix_secs_to_rfc3339(item.created_at_unix_ms));
@@ -1448,6 +1556,7 @@ fn model_health_payload_from_row(
         "last_event_at": last_event_at,
         "events": event_payload,
         "timeline": timeline,
+        "timeline_details": timeline_details,
         "time_range_start": unix_secs_to_rfc3339(time_range_start),
         "time_range_end": unix_secs_to_rfc3339(time_range_end),
     });
@@ -1548,6 +1657,203 @@ fn model_health_event_success(event: &StoredRequestUsageAudit) -> bool {
             .is_empty()
 }
 
+fn health_timeline_status(success_count: u64, failed_count: u64) -> &'static str {
+    let actual_completed = success_count.saturating_add(failed_count);
+    if actual_completed == 0 {
+        return "unknown";
+    }
+    let success_rate = success_count as f64 / actual_completed as f64;
+    if success_rate >= 0.95 {
+        "healthy"
+    } else if success_rate >= 0.7 {
+        "warning"
+    } else {
+        "unhealthy"
+    }
+}
+
+fn health_timeline_success_rate(success_count: u64, failed_count: u64) -> Option<f64> {
+    let actual_completed = success_count.saturating_add(failed_count);
+    if actual_completed == 0 {
+        None
+    } else {
+        Some(success_count as f64 / actual_completed as f64)
+    }
+}
+
+fn health_timeline_segment_index(
+    timestamp_unix_secs: u64,
+    since_unix_secs: u64,
+    until_unix_secs: u64,
+    segments: u32,
+) -> Option<usize> {
+    if segments == 0
+        || timestamp_unix_secs < since_unix_secs
+        || timestamp_unix_secs > until_unix_secs
+    {
+        return None;
+    }
+    let safe_range = until_unix_secs.saturating_sub(since_unix_secs).max(1);
+    let offset = timestamp_unix_secs.saturating_sub(since_unix_secs);
+    let mut segment_idx = ((offset as u128 * segments as u128) / safe_range as u128) as usize;
+    if segment_idx >= segments as usize {
+        segment_idx = segments.saturating_sub(1) as usize;
+    }
+    Some(segment_idx)
+}
+
+fn health_timeline_segment_bounds(
+    since_unix_secs: u64,
+    until_unix_secs: u64,
+    segments: u32,
+    segment_idx: u32,
+) -> (u64, u64) {
+    let segment_count = segments.max(1);
+    let safe_range = until_unix_secs.saturating_sub(since_unix_secs).max(1);
+    let start_offset =
+        (safe_range as u128 * u128::from(segment_idx) / u128::from(segment_count)) as u64;
+    let end_offset = (safe_range as u128 * u128::from(segment_idx.saturating_add(1))
+        / u128::from(segment_count)) as u64;
+    let start = since_unix_secs.saturating_add(start_offset);
+    let end = if segment_idx.saturating_add(1) >= segment_count {
+        until_unix_secs
+    } else {
+        since_unix_secs.saturating_add(end_offset)
+    };
+    (start, end.max(start))
+}
+
+fn aggregate_usage_timeline_metrics(
+    events: &[StoredRequestUsageAudit],
+    since_unix_secs: u64,
+    until_unix_secs: u64,
+    segments: u32,
+) -> Vec<HealthTimelineMetricBucket> {
+    let mut buckets = (0..segments)
+        .map(|_| HealthTimelineMetricBucket::default())
+        .collect::<Vec<_>>();
+    for event in events {
+        let Some(segment_idx) = health_timeline_segment_index(
+            event.created_at_unix_ms,
+            since_unix_secs,
+            until_unix_secs,
+            segments,
+        ) else {
+            continue;
+        };
+        if let Some(bucket) = buckets.get_mut(segment_idx) {
+            bucket.add_usage_event(event);
+        }
+    }
+    buckets
+}
+
+fn health_timeline_detail_payload(
+    segment_idx: u32,
+    counts: HealthTimelineDetailCounts,
+    metrics: HealthTimelineMetricBucket,
+    window: HealthTimelineWindow,
+) -> serde_json::Value {
+    let (range_start, range_end) = health_timeline_segment_bounds(
+        window.since_unix_secs,
+        window.until_unix_secs,
+        window.segments,
+        segment_idx,
+    );
+    json!({
+        "segment_index": segment_idx,
+        "status": counts.status,
+        "time_range_start": unix_secs_to_rfc3339(range_start),
+        "time_range_end": unix_secs_to_rfc3339(range_end),
+        "total_attempts": counts.total_attempts,
+        "success_count": counts.success_count,
+        "failed_count": counts.failed_count,
+        "success_rate": health_timeline_success_rate(counts.success_count, counts.failed_count),
+        "avg_latency_ms": metrics.avg_latency_ms(),
+        "avg_first_byte_ms": metrics.avg_first_byte_ms(),
+        "avg_tps": metrics.avg_tps(),
+    })
+}
+
+pub(crate) fn build_public_health_timeline_details(
+    buckets_by_segment: &BTreeMap<u32, PublicHealthTimelineBucket>,
+    since_unix_secs: u64,
+    until_unix_secs: u64,
+    segments: u32,
+    usage_events: &[StoredRequestUsageAudit],
+) -> Vec<serde_json::Value> {
+    let usage_metrics =
+        aggregate_usage_timeline_metrics(usage_events, since_unix_secs, until_unix_secs, segments);
+    let window = HealthTimelineWindow {
+        since_unix_secs,
+        until_unix_secs,
+        segments,
+    };
+    (0..segments)
+        .map(|segment_idx| {
+            let count_bucket = buckets_by_segment.get(&segment_idx);
+            let metrics = usage_metrics
+                .get(segment_idx as usize)
+                .copied()
+                .unwrap_or_default();
+            let total_attempts = count_bucket
+                .map(|bucket| bucket.total_count)
+                .unwrap_or(metrics.total_count);
+            let success_count = count_bucket
+                .map(|bucket| bucket.success_count)
+                .unwrap_or(metrics.success_count);
+            let failed_count = count_bucket
+                .map(|bucket| bucket.failed_count)
+                .unwrap_or(metrics.failed_count);
+            let status = health_timeline_status(success_count, failed_count);
+            health_timeline_detail_payload(
+                segment_idx,
+                HealthTimelineDetailCounts {
+                    status,
+                    total_attempts,
+                    success_count,
+                    failed_count,
+                },
+                metrics,
+                window,
+            )
+        })
+        .collect()
+}
+
+fn build_usage_health_timeline_details(
+    events: &[StoredRequestUsageAudit],
+    since_unix_secs: u64,
+    until_unix_secs: u64,
+    segments: u32,
+) -> Vec<serde_json::Value> {
+    let usage_metrics =
+        aggregate_usage_timeline_metrics(events, since_unix_secs, until_unix_secs, segments);
+    let window = HealthTimelineWindow {
+        since_unix_secs,
+        until_unix_secs,
+        segments,
+    };
+    usage_metrics
+        .into_iter()
+        .enumerate()
+        .map(|(index, metrics)| {
+            let status = health_timeline_status(metrics.success_count, metrics.failed_count);
+            health_timeline_detail_payload(
+                index as u32,
+                HealthTimelineDetailCounts {
+                    status,
+                    total_attempts: metrics.total_count,
+                    success_count: metrics.success_count,
+                    failed_count: metrics.failed_count,
+                },
+                metrics,
+                window,
+            )
+        })
+        .collect()
+}
+
 fn build_model_health_timeline(
     events: &[StoredRequestUsageAudit],
     since_unix_secs: u64,
@@ -1583,20 +1889,7 @@ fn build_model_health_timeline(
 
     let timeline = buckets
         .into_iter()
-        .map(|bucket| {
-            let total = bucket.success_count.saturating_add(bucket.failed_count);
-            if total == 0 {
-                return "unknown";
-            }
-            let success_rate = bucket.success_count as f64 / total as f64;
-            if success_rate >= 0.95 {
-                "healthy"
-            } else if success_rate >= 0.7 {
-                "warning"
-            } else {
-                "unhealthy"
-            }
-        })
+        .map(|bucket| health_timeline_status(bucket.success_count, bucket.failed_count))
         .collect::<Vec<_>>();
 
     (timeline, since_unix_secs, until_unix_secs)

apps/aether-gateway/src/handlers/public/mod.rs

@@ -10,9 +10,9 @@ pub(crate) use self::catalog_helpers::{
     admin_requested_force_stream, api_format_display_name, build_api_format_health_monitor_payload,
     build_model_health_monitor_payload, build_provider_health_monitor_payload,
     build_public_catalog_models_payload, build_public_catalog_search_models_payload,
-    build_public_health_timeline, build_public_providers_payload,
-    build_related_health_monitor_payload, normalize_admin_base_url, provider_key_api_formats,
-    request_candidate_event_unix_ms, request_candidate_status_label,
+    build_public_health_timeline, build_public_health_timeline_details,
+    build_public_providers_payload, build_related_health_monitor_payload, normalize_admin_base_url,
+    provider_key_api_formats, request_candidate_event_unix_ms, request_candidate_status_label,
     sanitize_public_model_config_for_user, ApiFormatHealthMonitorOptions,
     HealthMonitorRelationDimension, ModelHealthMonitorOptions,
 };

frontend/src/api/endpoints/types/provider.ts

@@ -562,6 +562,20 @@ export interface EndpointHealthEvent {
   error_message?: string | null
 }
 
+export interface HealthTimelineDetail {
+  segment_index?: number
+  status?: string
+  time_range_start?: string | null
+  time_range_end?: string | null
+  total_attempts?: number | null
+  success_count?: number | null
+  failed_count?: number | null
+  success_rate?: number | null
+  avg_latency_ms?: number | null
+  avg_first_byte_ms?: number | null
+  avg_tps?: number | null
+}
+
 export interface EndpointStatusMonitor {
   api_format: string
   total_attempts: number
@@ -577,6 +591,7 @@ export interface EndpointStatusMonitor {
   last_event_at?: string | null
   events: EndpointHealthEvent[]
   timeline?: string[]
+  timeline_details?: HealthTimelineDetail[]
   time_range_start?: string | null
   time_range_end?: string | null
 }
@@ -610,6 +625,7 @@ export interface PublicEndpointStatusMonitor {
   last_event_at?: string | null
   events: PublicHealthEvent[]
   timeline?: string[]
+  timeline_details?: HealthTimelineDetail[]
   time_range_start?: string | null
   time_range_end?: string | null
 }
@@ -642,6 +658,7 @@ export interface ModelStatusMonitor {
   last_event_at?: string | null
   events: ModelHealthEvent[]
   timeline?: string[]
+  timeline_details?: HealthTimelineDetail[]
   time_range_start?: string | null
   time_range_end?: string | null
 }
@@ -666,6 +683,7 @@ export interface ProviderStatusMonitor {
   model_count: number
   last_event_at?: string | null
   timeline?: string[]
+  timeline_details?: HealthTimelineDetail[]
   time_range_start?: string | null
   time_range_end?: string | null
   models: ModelStatusMonitor[]
@@ -692,6 +710,7 @@ export interface HealthRelatedMonitor {
   avg_tps?: number | null
   last_event_at?: string | null
   timeline?: string[]
+  timeline_details?: HealthTimelineDetail[]
   time_range_start?: string | null
   time_range_end?: string | null
 }

frontend/src/features/providers/components/EndpointHealthTimeline.vue

@@ -2,6 +2,7 @@
   <HealthStatusTimeline
     v-if="hasStatusTimeline"
     :timeline="monitor?.timeline"
+    :timeline-details="monitor?.timeline_details"
     :time-range-start="monitor?.time_range_start"
     :time-range-end="monitor?.time_range_end"
     :lookback-hours="lookbackHours"
@@ -21,8 +22,10 @@
       >
         <Tooltip>
           <TooltipTrigger as-child>
-            <div
-              class="flex-1 h-full rounded-sm transition-all duration-150 cursor-pointer hover:scale-y-110 hover:brightness-110"
+            <button
+              type="button"
+              :title="segment.tooltip"
+              class="h-full flex-1 cursor-pointer rounded-sm border-0 p-0 transition-all duration-150 hover:scale-y-110 hover:brightness-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
               :class="segment.color"
             />
           </TooltipTrigger>
@@ -50,7 +53,7 @@ import { computed } from 'vue'
 import type { EndpointStatusMonitor, EndpointHealthEvent, PublicEndpointStatusMonitor, PublicHealthEvent } from '@/api/endpoints'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import HealthStatusTimeline from './HealthStatusTimeline.vue'
-import { formatTimestamp } from './health-monitor-utils'
+import { formatTimestamp, formatTimelineTooltip } from './health-monitor-utils'
 
 // 组件同时支持管理员端和用户端的监控数据类型
 // - EndpointStatusMonitor: 管理员端，包含 provider_count, key_count 等敏感信息
@@ -72,21 +75,24 @@ const segments = computed(() => {
   const gridCount = props.segmentCount ?? GRID_COUNT
   const lookbackHours = props.lookbackHours ?? 6
   const events = props.monitor?.events ?? []
-
-  // 无数据时显示空白格子
-  if (events.length === 0) {
-    return Array.from({ length: gridCount }, () => ({
-      color: 'bg-gray-300 dark:bg-gray-600',
-      tooltip: '暂无请求记录'
-    }))
-  }
-
-  // 计算时间范围：使用 UTC 时间戳避免时区问题
   const nowUtc = Date.now()
   const startTimeUtc = nowUtc - lookbackHours * 60 * 60 * 1000
   const timeRange = lookbackHours * 60 * 60 * 1000
   const timePerGrid = timeRange / gridCount
 
+  // 无数据时显示空白格子
+  if (events.length === 0) {
+    return Array.from({ length: gridCount }, (_, index) => {
+      const cellStartTime = new Date(startTimeUtc + index * timePerGrid)
+      const cellEndTime = new Date(startTimeUtc + (index + 1) * timePerGrid)
+      return {
+        color: 'bg-gray-300 dark:bg-gray-600',
+        tooltip: buildSegmentTooltip('unknown', cellStartTime, cellEndTime, [])
+      }
+    })
+  }
+
+  // 计算时间范围：使用 UTC 时间戳避免时区问题
   const gridEvents: Array<Array<EndpointHealthEvent | PublicHealthEvent>> = Array.from({ length: gridCount }, () => [])
 
   for (const event of events) {
@@ -107,7 +113,7 @@ const segments = computed(() => {
     if (cellEvents.length === 0) {
       result.push({
         color: 'bg-gray-300 dark:bg-gray-600',
-        tooltip: `${formatTimestamp(cellStartTime.toISOString())} - ${formatTimestamp(cellEndTime.toISOString())}\n暂无请求记录`
+        tooltip: buildSegmentTooltip('unknown', cellStartTime, cellEndTime, [])
       })
       continue
     }
@@ -115,7 +121,12 @@ const segments = computed(() => {
     if (cellEvents.length === 1) {
       result.push({
         color: getStatusColor(cellEvents[0].status),
-        tooltip: buildTooltip(cellEvents[0])
+        tooltip: buildSegmentTooltip(
+          getTimelineStatusFromEvents(cellEvents),
+          cellStartTime,
+          cellEndTime,
+          cellEvents
+        )
       })
       continue
     }
@@ -138,11 +149,15 @@ const segments = computed(() => {
       color = 'bg-gray-300 dark:bg-gray-600'
     }
 
-    const firstTime = formatTimestamp(cellEvents[0]?.timestamp)
-    const lastTime = formatTimestamp(cellEvents[cellEvents.length - 1]?.timestamp)
-    const tooltip = `${firstTime} - ${lastTime}\n共 ${total} 次请求\n成功: ${successCount}, 失败: ${failedCount}, 跳过: ${skippedCount}`
-
-    result.push({ color, tooltip })
+    result.push({
+      color,
+      tooltip: buildSegmentTooltip(
+        getTimelineStatusFromEvents(cellEvents),
+        cellStartTime,
+        cellEndTime,
+        cellEvents
+      )
+    })
   }
 
   return result
@@ -163,30 +178,6 @@ function getStatusColor(status: string) {
   }
 }
 
-function buildTooltip(event: EndpointHealthEvent | PublicHealthEvent) {
-  const time = formatTimestamp(event.timestamp)
-  const statusText = getStatusText(event.status)
-  const latency = event.latency_ms ? ` • ${event.latency_ms}ms` : ''
-  const code = event.status_code ? ` • ${event.status_code}` : ''
-  const error = event.error_type ? ` • ${event.error_type}` : ''
-  return `${time} ${statusText}${latency}${code}${error}`
-}
-
-function getStatusText(status: string) {
-  switch (status) {
-    case 'success':
-      return '成功'
-    case 'failed':
-      return '失败'
-    case 'skipped':
-      return '跳过'
-    case 'started':
-      return '执行中'
-    default:
-      return '未知'
-  }
-}
-
 // 计算时间范围显示
 const earliestTime = computed(() => {
   const explicitStart =
@@ -204,4 +195,51 @@ const latestTime = computed(() => {
   return formatTimestamp(new Date().toISOString())
 })
 
+function buildSegmentTooltip(
+  status: string,
+  cellStartTime: Date,
+  cellEndTime: Date,
+  cellEvents: Array<EndpointHealthEvent | PublicHealthEvent>
+) {
+  const successCount = cellEvents.filter(event => event.status === 'success').length
+  const failedCount = cellEvents.filter(event => event.status === 'failed').length
+  const completedCount = successCount + failedCount
+  const latencyValues = cellEvents
+    .map(event => event.latency_ms)
+    .filter((value): value is number => typeof value === 'number' && !Number.isNaN(value))
+  const avgLatencyMs = latencyValues.length > 0
+    ? latencyValues.reduce((sum, value) => sum + value, 0) / latencyValues.length
+    : null
+
+  return formatTimelineTooltip({
+    status,
+    timeRangeStart: cellStartTime.toISOString(),
+    timeRangeEnd: cellEndTime.toISOString(),
+    metrics: {
+      total_attempts: cellEvents.length,
+      success_count: successCount,
+      failed_count: failedCount,
+      success_rate: completedCount > 0 ? successCount / completedCount : null,
+      avg_latency_ms: avgLatencyMs,
+      avg_first_byte_ms: null,
+      avg_tps: null
+    },
+    entityLabel: '端点',
+    entityName: props.monitor?.api_format
+  })
+}
+
+function getTimelineStatusFromEvents(
+  cellEvents: Array<EndpointHealthEvent | PublicHealthEvent>
+) {
+  const successCount = cellEvents.filter(event => event.status === 'success').length
+  const failedCount = cellEvents.filter(event => event.status === 'failed').length
+  const completedCount = successCount + failedCount
+  if (completedCount === 0) return 'unknown'
+  const successRate = successCount / completedCount
+  if (successRate >= 0.95) return 'healthy'
+  if (successRate >= 0.7) return 'warning'
+  return 'unhealthy'
+}
+
 </script>

frontend/src/features/providers/components/HealthMonitorCard.vue

@@ -210,6 +210,7 @@ function openDetails(monitor: EndpointMonitor) {
       avgFirstByteMs: monitor.avg_first_byte_ms,
       avgTps: monitor.avg_tps,
       timeline: monitor.timeline || null,
+      timelineDetails: monitor.timeline_details || null,
       timeRangeStart: monitor.time_range_start || null,
       timeRangeEnd: monitor.time_range_end || null
     }

frontend/src/features/providers/components/HealthMonitorDetailDrawer.vue

@@ -177,6 +177,7 @@ const sourceMonitor = computed<HealthRelatedMonitor | null>(() => {
     avg_first_byte_ms: source.avgFirstByteMs,
     avg_tps: source.avgTps,
     timeline: source.timeline || undefined,
+    timeline_details: source.timelineDetails || undefined,
     time_range_start: source.timeRangeStart || null,
     time_range_end: source.timeRangeEnd || null
   }
@@ -281,6 +282,7 @@ function buildSourceFromRelatedMonitor(monitor: HealthRelatedMonitor): HealthMon
     avgFirstByteMs: monitor.avg_first_byte_ms,
     avgTps: monitor.avg_tps,
     timeline: monitor.timeline || null,
+    timelineDetails: monitor.timeline_details || null,
     timeRangeStart: monitor.time_range_start || null,
     timeRangeEnd: monitor.time_range_end || null
   }

frontend/src/features/providers/components/HealthRelatedMonitorCard.vue

@@ -49,6 +49,7 @@
     <HealthStatusTimeline
       class="mt-2"
       :timeline="monitor.timeline"
+      :timeline-details="monitor.timeline_details"
       :time-range-start="monitor.time_range_start"
       :time-range-end="monitor.time_range_end"
       :generated-at="generatedAt"

frontend/src/features/providers/components/HealthStatusTimeline.vue

@@ -8,8 +8,10 @@
       >
         <Tooltip>
           <TooltipTrigger as-child>
-            <div
-              class="h-full flex-1 cursor-pointer rounded-sm transition-all duration-150 hover:scale-y-110 hover:brightness-110"
+            <button
+              type="button"
+              :title="segment.tooltip"
+              class="h-full flex-1 cursor-pointer rounded-sm border-0 p-0 transition-all duration-150 hover:scale-y-110 hover:brightness-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
               :class="getTimelineColor(segment.status)"
             />
           </TooltipTrigger>
@@ -38,12 +40,14 @@ import { computed } from 'vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import {
   formatTimestamp,
+  formatTimelineTooltip,
   getTimelineColor,
-  getTimelineLabel
+  type HealthTimelineTooltipMetrics
 } from './health-monitor-utils'
 
 const props = withDefaults(defineProps<{
   timeline?: string[] | null
+  timelineDetails?: HealthTimelineTooltipMetrics[] | null
   timeRangeStart?: string | null
   timeRangeEnd?: string | null
   generatedAt?: string | null
@@ -96,17 +100,29 @@ const segments = computed(() => {
   return segmentStatuses.map((status, index) => {
     const cellStart = new Date(startMs.value + index * interval).toISOString()
     const cellEnd = new Date(startMs.value + (index + 1) * interval).toISOString()
+    const detail = props.timelineDetails?.[index] ?? null
+    const timeRangeStart = detail?.time_range_start || cellStart
+    const timeRangeEnd = detail?.time_range_end || cellEnd
     return {
       status,
-      tooltip: buildTooltip(status, cellStart, cellEnd)
+      tooltip: buildTooltip(status, timeRangeStart, timeRangeEnd, detail)
     }
   })
 })
 
-function buildTooltip(status: string, cellStart: string, cellEnd: string) {
-  const entity = props.entityLabel && props.entityName
-    ? `\n${props.entityLabel}：${props.entityName}`
-    : ''
-  return `${formatTimestamp(cellStart)} - ${formatTimestamp(cellEnd)}${entity}\n状态：${getTimelineLabel(status)}`
+function buildTooltip(
+  status: string,
+  cellStart: string,
+  cellEnd: string,
+  detail: HealthTimelineTooltipMetrics | null
+) {
+  return formatTimelineTooltip({
+    status,
+    timeRangeStart: cellStart,
+    timeRangeEnd: cellEnd,
+    metrics: detail,
+    entityLabel: props.entityLabel,
+    entityName: props.entityName
+  })
 }
 </script>

frontend/src/features/providers/components/ModelHealthMonitorCard.vue

@@ -72,6 +72,7 @@
           <HealthStatusTimeline
             class="mt-2"
             :timeline="monitor.timeline"
+            :timeline-details="monitor.timeline_details"
             :time-range-start="monitor.time_range_start"
             :time-range-end="monitor.time_range_end"
             :generated-at="generatedAt"
@@ -203,6 +204,7 @@ function openDetails(monitor: ModelStatusMonitor) {
       avgFirstByteMs: monitor.avg_first_byte_ms,
       avgTps: monitor.avg_tps,
       timeline: monitor.timeline || null,
+      timelineDetails: monitor.timeline_details || null,
       timeRangeStart: monitor.time_range_start || null,
       timeRangeEnd: monitor.time_range_end || null,
     },

frontend/src/features/providers/components/ProviderHealthMonitorCard.vue

@@ -79,6 +79,7 @@
           <HealthStatusTimeline
             class="mt-2"
             :timeline="provider.timeline"
+            :timeline-details="provider.timeline_details"
             :time-range-start="provider.time_range_start"
             :time-range-end="provider.time_range_end"
             :generated-at="generatedAt"
@@ -192,6 +193,7 @@ function openDetails(provider: ProviderStatusMonitor) {
       avgFirstByteMs: provider.avg_first_byte_ms,
       avgTps: provider.avg_tps,
       timeline: provider.timeline || null,
+      timelineDetails: provider.timeline_details || null,
       timeRangeStart: provider.time_range_start || null,
       timeRangeEnd: provider.time_range_end || null
     }

frontend/src/features/providers/components/health-monitor-utils.ts

@@ -22,6 +22,7 @@ export interface HealthMonitorDetailSource {
   avgFirstByteMs?: number | null
   avgTps?: number | null
   timeline?: string[] | null
+  timelineDetails?: HealthTimelineTooltipMetrics[] | null
   timeRangeStart?: string | null
   timeRangeEnd?: string | null
 }
@@ -36,6 +37,18 @@ export interface HealthMonitorAvailability {
   success_rate: number
 }
 
+export interface HealthTimelineTooltipMetrics {
+  time_range_start?: string | null
+  time_range_end?: string | null
+  total_attempts?: number | null
+  success_count?: number | null
+  failed_count?: number | null
+  success_rate?: number | null
+  avg_latency_ms?: number | null
+  avg_first_byte_ms?: number | null
+  avg_tps?: number | null
+}
+
 export interface HealthMonitorSectionSummary {
   total: number
   healthy: number
@@ -136,6 +149,69 @@ export function formatTps(value?: number | null) {
   }).format(value)} tps`
 }
 
+export function formatFullTimestamp(timestamp?: string | null) {
+  if (!timestamp) return '未知时间'
+  const date = new Date(timestamp)
+  if (Number.isNaN(date.getTime())) return '未知时间'
+  const pad = (value: number) => value.toString().padStart(2, '0')
+  return [
+    `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`,
+    `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+  ].join(' ')
+}
+
+export function formatTimelineTooltip(input: {
+  status: string
+  timeRangeStart: string
+  timeRangeEnd: string
+  metrics?: HealthTimelineTooltipMetrics | null
+  entityLabel?: string
+  entityName?: string | null
+}) {
+  const metrics = input.metrics
+  const lines = [
+    `总请求/成功/失败/可用率/状态：${formatTimelineRequestBreakdown(metrics, input.status)}`,
+    `平均耗时/TTFB/速度：${formatTimelineAverageMetrics(metrics)}`,
+    `时间范围：${formatFullTimestamp(input.timeRangeStart)} - ${formatFullTimestamp(input.timeRangeEnd)}`
+  ]
+  if (input.entityLabel && input.entityName) {
+    lines.push(`${input.entityLabel}：${input.entityName}`)
+  }
+  return lines.join('\n')
+}
+
+function formatTimelineAverageMetrics(metrics?: HealthTimelineTooltipMetrics | null) {
+  return [
+    formatMs(metrics?.avg_latency_ms),
+    formatMs(metrics?.avg_first_byte_ms),
+    formatTps(metrics?.avg_tps)
+  ].join('/')
+}
+
+function formatTimelineRequestBreakdown(
+  metrics: HealthTimelineTooltipMetrics | null | undefined,
+  status: string
+) {
+  if (!metrics) return '-'
+  const total = formatTimelineCount(metrics.total_attempts)
+  const success = formatTimelineCount(metrics.success_count)
+  const failed = formatTimelineCount(metrics.failed_count)
+  const availability = formatTimelineMetricAvailability(metrics)
+  return `${total}/${success}/${failed}/${availability}/${getTimelineLabel(status)}`
+}
+
+function formatTimelineCount(value?: number | null) {
+  if (typeof value !== 'number' || Number.isNaN(value)) return '-'
+  return `${new Intl.NumberFormat('zh-CN').format(value)} 次`
+}
+
+function formatTimelineMetricAvailability(metrics?: HealthTimelineTooltipMetrics | null) {
+  if (!metrics) return '-'
+  if (typeof metrics.total_attempts === 'number' && metrics.total_attempts <= 0) return '-'
+  if (typeof metrics.success_rate !== 'number' || Number.isNaN(metrics.success_rate)) return '-'
+  return formatPercent(metrics.success_rate)
+}
+
 export function formatCompactNumber(value: number) {
   return new Intl.NumberFormat('zh-CN', {
     notation: 'compact',

frontend/src/mocks/handler.ts

@@ -153,6 +153,77 @@ function generateHealthTimeline(
   })
 }
 
+function generateHealthTimelineDetails(
+  timeline: string[],
+  avgLatencyMs: number | null,
+  avgFirstByteMs: number | null,
+  avgTps: number | null,
+  rangeStart = Date.now() - 6 * 60 * 60 * 1000,
+  rangeEnd = Date.now()
+) {
+  const safeRange = Math.max(rangeEnd - rangeStart, 1)
+  const interval = safeRange / Math.max(timeline.length, 1)
+  return timeline.map((status, index) => {
+    const totalAttempts = status === 'unknown' ? 0 : 3 + (index % 6)
+    const successRate = status === 'healthy'
+      ? 0.98
+      : status === 'warning'
+        ? 0.84
+        : status === 'unhealthy'
+          ? 0.42
+          : null
+    const successCount = successRate == null ? 0 : Math.round(totalAttempts * successRate)
+    const failedCount = successRate == null ? 0 : Math.max(totalAttempts - successCount, 0)
+    const latencyFactor = status === 'warning' ? 1.25 : status === 'unhealthy' ? 1.7 : 1
+    return {
+      segment_index: index,
+      status,
+      time_range_start: new Date(rangeStart + index * interval).toISOString(),
+      time_range_end: new Date(rangeStart + (index + 1) * interval).toISOString(),
+      total_attempts: totalAttempts,
+      success_count: successCount,
+      failed_count: failedCount,
+      success_rate: successRate,
+      avg_latency_ms: avgLatencyMs == null || totalAttempts === 0
+        ? null
+        : Math.round(avgLatencyMs * latencyFactor),
+      avg_first_byte_ms: avgFirstByteMs == null || totalAttempts === 0
+        ? null
+        : Math.round(avgFirstByteMs * latencyFactor),
+      avg_tps: avgTps == null || totalAttempts === 0
+        ? null
+        : Number((avgTps / latencyFactor).toFixed(1))
+    }
+  })
+}
+
+function withHealthTimelineDetails<T extends {
+  timeline?: string[]
+  time_range_start?: string
+  time_range_end?: string
+  avg_latency_ms?: number | null
+  avg_first_byte_ms?: number | null
+  avg_tps?: number | null
+}>(item: T) {
+  const rangeStart = item.time_range_start
+    ? new Date(item.time_range_start).getTime()
+    : Date.now() - 6 * 60 * 60 * 1000
+  const rangeEnd = item.time_range_end
+    ? new Date(item.time_range_end).getTime()
+    : Date.now()
+  return {
+    ...item,
+    timeline_details: generateHealthTimelineDetails(
+      item.timeline || [],
+      item.avg_latency_ms ?? null,
+      item.avg_first_byte_ms ?? null,
+      item.avg_tps ?? null,
+      rangeStart,
+      rangeEnd
+    )
+  }
+}
+
 // Mock 端点健康数据
 // 注意：success_rate 使用 0-1 之间的小数，前端会乘以 100 显示为百分比
 // 事件的成功/失败/跳过比例必须与 success_rate 保持一致
@@ -469,6 +540,7 @@ function mockApiFormatDisplayName(apiFormat: string) {
 }
 
 function relatedEndpointMonitor(format: typeof MOCK_ENDPOINT_STATUS.formats[number]) {
+  const detailed = withHealthTimelineDetails(format)
   return {
     kind: 'endpoint',
     key: format.api_format,
@@ -483,12 +555,14 @@ function relatedEndpointMonitor(format: typeof MOCK_ENDPOINT_STATUS.formats[numb
     avg_tps: format.avg_tps,
     last_event_at: format.last_event_at,
     timeline: format.timeline,
+    timeline_details: detailed.timeline_details,
     time_range_start: format.time_range_start,
     time_range_end: format.time_range_end
   }
 }
 
 function relatedModelMonitor(model: typeof MOCK_MODEL_STATUS.models[number]) {
+  const detailed = withHealthTimelineDetails(model)
   return {
     kind: 'model',
     key: model.model,
@@ -503,12 +577,14 @@ function relatedModelMonitor(model: typeof MOCK_MODEL_STATUS.models[number]) {
     avg_tps: model.avg_tps,
     last_event_at: model.last_event_at,
     timeline: model.timeline,
+    timeline_details: detailed.timeline_details,
     time_range_start: model.time_range_start,
     time_range_end: model.time_range_end
   }
 }
 
 function relatedProviderMonitor(provider: typeof MOCK_PROVIDER_HEALTH_STATUS.providers[number]) {
+  const detailed = withHealthTimelineDetails(provider)
   return {
     kind: 'provider',
     key: provider.provider_name,
@@ -523,6 +599,7 @@ function relatedProviderMonitor(provider: typeof MOCK_PROVIDER_HEALTH_STATUS.pro
     avg_tps: provider.avg_tps,
     last_event_at: provider.last_event_at,
     timeline: provider.timeline,
+    timeline_details: detailed.timeline_details,
     time_range_start: provider.time_range_start,
     time_range_end: provider.time_range_end
   }
@@ -1341,19 +1418,31 @@ const mockHandlers: Record<string, (config: AxiosRequestConfig) => Promise<Axios
   'GET /api/admin/endpoints/health/api-formats': async () => {
     await delay()
     requireAdmin()
-    return createMockResponse(MOCK_ENDPOINT_STATUS)
+    return createMockResponse({
+      ...MOCK_ENDPOINT_STATUS,
+      formats: MOCK_ENDPOINT_STATUS.formats.map(withHealthTimelineDetails)
+    })
   },
 
   'GET /api/admin/endpoints/health/models': async () => {
     await delay()
     requireAdmin()
-    return createMockResponse(MOCK_MODEL_STATUS)
+    return createMockResponse({
+      ...MOCK_MODEL_STATUS,
+      models: MOCK_MODEL_STATUS.models.map(withHealthTimelineDetails)
+    })
   },
 
   'GET /api/admin/endpoints/health/providers': async () => {
     await delay()
     requireAdmin()
-    return createMockResponse(MOCK_PROVIDER_HEALTH_STATUS)
+    return createMockResponse({
+      ...MOCK_PROVIDER_HEALTH_STATUS,
+      providers: MOCK_PROVIDER_HEALTH_STATUS.providers.map(provider => ({
+        ...withHealthTimelineDetails(provider),
+        models: provider.models.map(withHealthTimelineDetails)
+      }))
+    })
   },
 
   'GET /api/admin/endpoints/health/related': async (config) => {
@@ -1725,6 +1814,7 @@ const mockHandlers: Record<string, (config: AxiosRequestConfig) => Promise<Axios
         last_event_at: f.last_event_at,
         events: f.events.slice(0, 10),
         timeline: f.timeline,
+        timeline_details: withHealthTimelineDetails(f).timeline_details,
         time_range_start: f.time_range_start,
         time_range_end: f.time_range_end
       }))
@@ -1748,6 +1838,7 @@ const mockHandlers: Record<string, (config: AxiosRequestConfig) => Promise<Axios
         last_event_at: model.last_event_at,
         events: model.events.slice(0, 10),
         timeline: model.timeline,
+        timeline_details: withHealthTimelineDetails(model).timeline_details,
         time_range_start: model.time_range_start,
         time_range_end: model.time_range_end
       }))