From de35ff5cdaa1e9f3390d529d9aee6eb74a1ad201 Mon Sep 17 00:00:00 2001
From: LIghtJUNction <lightjunction.me@gmail.com>
Date: Mon, 30 Mar 2026 01:07:55 +0800
Subject: [PATCH] feat(dashboard): complete redesign of Trace page

- TraceDisplayer: new timeline-style layout with vertical track, dot markers, and expandable event cards
- TracePage: redesigned topbar with custom toggle switch, removed scoped CSS conflicts
- All colors use explicit hex values with !important to ensure visibility across themes
- Vue 3 Composition API with shallowRef to avoid reactive overhead
---
 .../src/components/shared/TraceDisplayer.vue  | 910 ++++++++++--------
 dashboard/src/views/TracePage.vue             | 128 ++-
 2 files changed, 574 insertions(+), 464 deletions(-)

diff --git a/dashboard/src/components/shared/TraceDisplayer.vue b/dashboard/src/components/shared/TraceDisplayer.vue
index 42bd8a900..cc9ccd65c 100644
--- a/dashboard/src/components/shared/TraceDisplayer.vue
+++ b/dashboard/src/components/shared/TraceDisplayer.vue
@@ -1,462 +1,526 @@
 <script setup>
-import axios from "axios";
-import { EventSourcePolyfill } from "event-source-polyfill";
-import { resolveApiUrl } from "@/utils/request";
+import { shallowRef, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import axios from 'axios';
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import { resolveApiUrl } from '@/utils/request';
+
+let isMounted = false;
+const events = shallowRef([]);
+const eventIndex = {};
+const highlightMap = shallowRef({});
+const highlightTimers = {};
+let eventSource = null;
+let retryTimer = null;
+let retryAttempts = 0;
+const maxRetryAttempts = 10;
+const baseRetryDelay = 1000;
+let lastEventId = null;
+
+onMounted(async () => {
+  isMounted = true;
+  await fetchTraceHistory();
+  connectSSE();
+  window.addEventListener('resize', resizeTimeline);
+  resizeTimeline();
+});
+
+onBeforeUnmount(() => {
+  isMounted = false;
+  if (eventSource) { eventSource.close(); eventSource = null; }
+  if (retryTimer) { clearTimeout(retryTimer); retryTimer = null; }
+  retryAttempts = 0;
+  window.removeEventListener('resize', resizeTimeline);
+});
+
+function resizeTimeline() {
+  nextTick(() => {
+    const timeline = document.querySelector('.trace-timeline');
+    if (timeline) {
+      const header = document.querySelector('.timeline-header');
+      if (header) timeline.style.height = `calc(100vh - ${header.getBoundingClientRect().bottom}px - 16px)`;
+    }
+  });
+}
+
+async function fetchTraceHistory() {
+  if (!isMounted) return;
+  try {
+    const res = await axios.get('/api/log-history');
+    if (!isMounted) return;
+    const logs = res.data?.data?.logs || [];
+    const traces = logs.filter((item) => item.type === 'trace');
+    processNewTraces(traces);
+  } catch (err) {
+    console.error('Failed to fetch trace history:', err);
+  }
+}
+
+function connectSSE() {
+  if (eventSource) { eventSource.close(); eventSource = null; }
+  const token = localStorage.getItem('token');
+  eventSource = new EventSourcePolyfill(resolveApiUrl('/api/live-log'), {
+    headers: { Authorization: token ? `Bearer ${token}` : '' },
+    heartbeatTimeout: 300000
+  });
+  eventSource.onopen = () => { retryAttempts = 0; if (!lastEventId) fetchTraceHistory(); };
+  eventSource.onmessage = (event) => {
+    if (!isMounted) return;
+    try {
+      if (event.lastEventId) lastEventId = event.lastEventId;
+      const payload = JSON.parse(event.data);
+      if (payload?.type !== 'trace') return;
+      processNewTraces([payload]);
+    } catch (e) { console.error('Failed to parse trace payload:', e); }
+  };
+  eventSource.onerror = () => {
+    if (eventSource) { eventSource.close(); eventSource = null; }
+    if (retryAttempts >= maxRetryAttempts) { console.error('Trace stream reached max retry attempts.'); return; }
+    const delay = Math.min(baseRetryDelay * Math.pow(2, retryAttempts), 30000);
+    if (retryTimer) { clearTimeout(retryTimer); retryTimer = null; }
+    retryTimer = setTimeout(async () => {
+      retryAttempts++;
+      if (!lastEventId) await fetchTraceHistory();
+      connectSSE();
+    }, delay);
+  };
+}
+
+function processNewTraces(newTraces) {
+  if (!isMounted || !newTraces || newTraces.length === 0) return;
+  const touched = [];
+  const currentEvents = [...events.value];
+  newTraces.forEach((trace) => {
+    if (!trace.span_id) return;
+    const recordKey = `${trace.time}-${trace.span_id}-${trace.action}`;
+    let evt = eventIndex[trace.span_id];
+    if (!evt) {
+      evt = { span_id: trace.span_id, name: trace.name, umo: trace.umo, sender_name: trace.sender_name, message_outline: trace.message_outline, first_time: trace.time, last_time: trace.time, collapsed: true, visibleCount: 20, records: [], hasAgentPrepare: trace.action === 'astr_agent_prepare' };
+      eventIndex[trace.span_id] = evt;
+      currentEvents.push(evt);
+    }
+    const exists = evt.records.some((item) => item.key === recordKey);
+    if (exists) return;
+    evt.records.push({ time: trace.time, action: trace.action, fieldsText: formatFields(trace.fields), timeLabel: formatTime(trace.time), key: recordKey });
+    if (trace.action === 'astr_agent_prepare') evt.hasAgentPrepare = true;
+    if (!evt.first_time || trace.time < evt.first_time) evt.first_time = trace.time;
+    if (!evt.last_time || trace.time > evt.last_time) evt.last_time = trace.time;
+    if (!evt.sender_name && trace.sender_name) evt.sender_name = trace.sender_name;
+    if (!evt.message_outline && trace.message_outline) evt.message_outline = trace.message_outline;
+    touched.push(trace.span_id);
+  });
+  if (touched.length > 0) {
+    currentEvents.forEach((e) => { e.records.sort((a, b) => b.time - a.time); });
+    currentEvents.sort((a, b) => b.first_time - a.first_time);
+    if (currentEvents.length > 300) {
+      const removed = currentEvents.splice(300);
+      removed.forEach((e) => { delete eventIndex[e.span_id]; });
+    }
+    events.value = currentEvents;
+    touched.forEach((spanId) => { pulseEvent(spanId); });
+  }
+}
+
+function pulseEvent(spanId) {
+  if (!spanId || !isMounted) return;
+  if (highlightTimers[spanId]) clearTimeout(highlightTimers[spanId]);
+  highlightMap.value = { ...highlightMap.value, [spanId]: true };
+  const remove = setTimeout(() => {
+    if (!isMounted) return;
+    const next = { ...highlightMap.value };
+    delete next[spanId];
+    highlightMap.value = next;
+    delete highlightTimers[spanId];
+  }, 1500);
+  highlightTimers[spanId] = remove;
+}
+
+function toggleEvent(spanId) {
+  const evt = eventIndex[spanId];
+  if (evt) { evt.collapsed = !evt.collapsed; events.value = [...events.value]; resizeTimeline(); }
+}
+
+function showMore(spanId) {
+  const evt = eventIndex[spanId];
+  if (evt) { evt.visibleCount = Math.min(evt.records.length, evt.visibleCount + 20); events.value = [...events.value]; }
+}
+
+function getVisibleRecords(evt) { if (!evt.records.length) return []; return evt.records.slice(0, evt.visibleCount); }
+function formatTime(ts) { if (!ts) return ''; const date = new Date(ts * 1000); return `${date.toLocaleString()}.${String(date.getMilliseconds()).padStart(3, '0')}`; }
+function shortSpan(spanId) { return spanId ? spanId.slice(0, 8) : ''; }
+function formatFields(fields) { if (!fields) return ''; try { return JSON.stringify(fields, null, 2); } catch (e) { return String(fields); } }
 </script>
 
 <template>
-  <div class="trace-wrapper">
-    <div class="trace-table" ref="scrollEl" :style="{ height: tableHeight }">
-      <div class="trace-row trace-header">
-        <div class="trace-cell time">Time</div>
-        <div class="trace-cell span">Event ID</div>
-        <div class="trace-cell umo">UMO</div>
-        <div class="trace-cell sender">Sender</div>
-        <div class="trace-cell outline">Outline</div>
-        <div class="trace-cell fields"></div>
+  <div class="timeline-container">
+    <!-- Timeline header -->
+    <div class="timeline-header">
+      <div class="tl-title">追踪</div>
+      <div class="tl-subtitle">实时模型调用链</div>
+    </div>
+
+    <!-- Timeline body -->
+    <div class="trace-timeline">
+      <!-- Empty state -->
+      <div v-if="events.length === 0" class="tl-empty">
+        <div class="tl-empty-icon">⏳</div>
+        <div class="tl-empty-text">暂无追踪数据</div>
+        <div class="tl-empty-hint">发送消息后即可看到调用链路</div>
       </div>
+
+      <!-- Timeline items -->
       <div
-        class="trace-group"
-        :class="{ highlight: highlightMap[event.span_id] }"
-        v-for="event in events"
+        v-for="(event, idx) in events"
         :key="event.span_id"
+        class="tl-item"
+        :class="{ 'tl-item-active': highlightMap[event.span_id], 'tl-item-expanded': !event.collapsed }"
       >
-        <div class="trace-row trace-event">
-          <div class="trace-cell time">{{ formatTime(event.first_time) }}</div>
-          <div class="trace-cell span" :title="event.span_id">
-            <div class="event-title">
-              {{ shortSpan(event.span_id) }}
+        <!-- Timeline line + dot -->
+        <div class="tl-track">
+          <div class="tl-dot" :class="{ 'tl-dot-active': event.hasAgentPrepare }"></div>
+          <div v-if="idx < events.length - 1" class="tl-line"></div>
+        </div>
+
+        <!-- Event card -->
+        <div class="tl-card">
+          <!-- Card header -->
+          <div class="tl-card-header" @click="toggleEvent(event.span_id)">
+            <div class="tl-card-top">
+              <span class="tl-event-id">{{ shortSpan(event.span_id) }}</span>
+              <span class="tl-umo">{{ event.umo || '-' }}</span>
+              <span class="tl-time">{{ formatTime(event.first_time) }}</span>
+            </div>
+            <div class="tl-card-bottom">
+              <span class="tl-sender">{{ event.sender_name || 'Unknown' }}</span>
+              <span class="tl-outline">{{ event.message_outline || '-' }}</span>
+              <span class="tl-expand-btn">{{ event.collapsed ? '展开' : '收起' }}</span>
             </div>
           </div>
-          <div class="trace-cell umo">{{ event.umo }}</div>
-          <div class="trace-cell sender">
-            <div
-              class="event-sub"
-              style="
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              "
-            >
-              {{ event.sender_name || "-" }}
+
+          <!-- Expanded records -->
+          <div v-if="!event.collapsed && event.records.length > 0" class="tl-records">
+            <div class="tl-records-header">调用链 · {{ event.records.length }} 条记录</div>
+            <div v-for="record in getVisibleRecords(event)" :key="record.key" class="tl-record">
+              <div class="tl-record-left">
+                <div class="tl-record-time">{{ record.timeLabel }}</div>
+                <div class="tl-record-action">{{ record.action }}</div>
+              </div>
+              <pre class="tl-record-fields">{{ record.fieldsText }}</pre>
             </div>
-          </div>
-          <div class="trace-cell outline">
-            <div class="event-sub outline">
-              {{ event.message_outline || "-" }}
+            <div v-if="event.visibleCount < event.records.length" class="tl-records-more">
+              <button @click.stop="showMore(event.span_id)">加载更多 (+{{ event.records.length - event.visibleCount }})</button>
             </div>
           </div>
-          <div class="trace-cell fields event-controls">
-            <v-btn
-              size="x-small"
-              variant="text"
-              color="primary"
-              @click="toggleEvent(event.span_id)"
-            >
-              {{ event.collapsed ? "Expand" : "Collapse" }}
-              <span v-if="event.hasAgentPrepare" class="agent-dot" />
-            </v-btn>
-          </div>
         </div>
-        <div class="trace-records" v-if="!event.collapsed">
-          <div
-            class="trace-record"
-            v-for="record in getVisibleRecords(event)"
-            :key="record.key"
-          >
-            <div class="trace-record-time">{{ record.timeLabel }}</div>
-            <div class="trace-record-action">{{ record.action }}</div>
-            <pre class="trace-record-fields">{{ record.fieldsText }}</pre>
-          </div>
-          <div
-            class="event-more"
-            v-if="event.visibleCount < event.records.length"
-          >
-            <v-btn
-              size="x-small"
-              variant="tonal"
-              color="primary"
-              @click="showMore(event.span_id)"
-            >
-              Show more
-            </v-btn>
-          </div>
-        </div>
-      </div>
-      <div v-if="events.length === 0" class="trace-empty">
-        No trace data yet.
       </div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: "TraceDisplayer",
-  props: {
-    autoScroll: { type: Boolean, default: true },
-    maxItems: { type: Number, default: 300 },
-  },
-  data() {
-    return {
-      events: [],
-      eventIndex: {},
-      highlightMap: {},
-      highlightTimers: {},
-      eventSource: null,
-      retryTimer: null,
-      retryAttempts: 0,
-      maxRetryAttempts: 10,
-      baseRetryDelay: 1000,
-      lastEventId: null,
-      tableHeight: "auto",
-    };
-  },
-  async mounted() {
-    await this.fetchTraceHistory();
-    this.connectSSE();
-    this.updateTableHeight();
-    window.addEventListener("resize", this.updateTableHeight);
-  },
-  beforeUnmount() {
-    if (this.eventSource) {
-      this.eventSource.close();
-      this.eventSource = null;
-    }
-    if (this.retryTimer) {
-      clearTimeout(this.retryTimer);
-      this.retryTimer = null;
-    }
-    this.retryAttempts = 0;
-    window.removeEventListener("resize", this.updateTableHeight);
-  },
-  methods: {
-    updateTableHeight() {
-      this.$nextTick(() => {
-        const el = this.$refs.scrollEl;
-        if (!el || typeof window === "undefined") return;
-        const viewportHeight =
-          window.innerHeight || document.documentElement.clientHeight;
-        const offsetTop = el.getBoundingClientRect().top;
-        this.tableHeight = `${Math.max(viewportHeight - offsetTop, 0)}px`;
-      });
-    },
-    async fetchTraceHistory() {
-      try {
-        const res = await axios.get("/api/log-history");
-        const logs = res.data?.data?.logs || [];
-        const traces = logs.filter((item) => item.type === "trace");
-        this.processNewTraces(traces);
-      } catch (err) {
-        console.error("Failed to fetch trace history:", err);
-      }
-    },
-    connectSSE() {
-      if (this.eventSource) {
-        this.eventSource.close();
-        this.eventSource = null;
-      }
-      const token = localStorage.getItem("token");
-      this.eventSource = new EventSourcePolyfill(
-        resolveApiUrl("/api/live-log"),
-        {
-          headers: { Authorization: token ? `Bearer ${token}` : "" },
-          heartbeatTimeout: 300000,
-        },
-      );
-      this.eventSource.onopen = () => {
-        this.retryAttempts = 0;
-        if (!this.lastEventId) this.fetchTraceHistory();
-      };
-      this.eventSource.onmessage = (event) => {
-        try {
-          if (event.lastEventId) this.lastEventId = event.lastEventId;
-          const payload = JSON.parse(event.data);
-          if (payload?.type !== "trace") return;
-          this.processNewTraces([payload]);
-        } catch (e) {
-          console.error("Failed to parse trace payload:", e);
-        }
-      };
-      this.eventSource.onerror = () => {
-        if (this.eventSource) {
-          this.eventSource.close();
-          this.eventSource = null;
-        }
-        if (this.retryAttempts >= this.maxRetryAttempts) {
-          console.error("Trace stream reached max retry attempts.");
-          return;
-        }
-        const delay = Math.min(
-          this.baseRetryDelay * Math.pow(2, this.retryAttempts),
-          30000,
-        );
-        if (this.retryTimer) {
-          clearTimeout(this.retryTimer);
-          this.retryTimer = null;
-        }
-        this.retryTimer = setTimeout(async () => {
-          this.retryAttempts++;
-          if (!this.lastEventId) await this.fetchTraceHistory();
-          this.connectSSE();
-        }, delay);
-      };
-    },
-    processNewTraces(newTraces) {
-      if (!newTraces || newTraces.length === 0) return;
-      let hasUpdate = false;
-      const touched = new Set();
-      newTraces.forEach((trace) => {
-        if (!trace.span_id) return;
-        const recordKey = `${trace.time}-${trace.span_id}-${trace.action}`;
-        let event = this.eventIndex[trace.span_id];
-        if (!event) {
-          event = {
-            span_id: trace.span_id,
-            name: trace.name,
-            umo: trace.umo,
-            sender_name: trace.sender_name,
-            message_outline: trace.message_outline,
-            first_time: trace.time,
-            last_time: trace.time,
-            collapsed: true,
-            visibleCount: 20,
-            records: [],
-            hasAgentPrepare: trace.action === "astr_agent_prepare",
-          };
-          this.eventIndex[trace.span_id] = event;
-          this.events.push(event);
-          hasUpdate = true;
-        }
-        const exists = event.records.some((item) => item.key === recordKey);
-        if (exists) return;
-        event.records.push({
-          time: trace.time,
-          action: trace.action,
-          fieldsText: this.formatFields(trace.fields),
-          timeLabel: this.formatTime(trace.time),
-          key: recordKey,
-        });
-        if (trace.action === "astr_agent_prepare") event.hasAgentPrepare = true;
-        if (!event.first_time || trace.time < event.first_time)
-          event.first_time = trace.time;
-        if (!event.last_time || trace.time > event.last_time)
-          event.last_time = trace.time;
-        if (!event.sender_name && trace.sender_name)
-          event.sender_name = trace.sender_name;
-        if (!event.message_outline && trace.message_outline)
-          event.message_outline = trace.message_outline;
-        touched.add(trace.span_id);
-        hasUpdate = true;
-      });
-      if (hasUpdate) {
-        this.events.forEach((event) => {
-          event.records.sort((a, b) => b.time - a.time);
-        });
-        this.events.sort((a, b) => b.first_time - a.first_time);
-        if (this.events.length > this.maxItems) {
-          const overflow = this.events.length - this.maxItems;
-          const removed = this.events.splice(this.maxItems, overflow);
-          removed.forEach((event) => {
-            delete this.eventIndex[event.span_id];
-          });
-        }
-        touched.forEach((spanId) => {
-          this.pulseEvent(spanId);
-        });
-      }
-    },
-    scrollToBottom() {
-      const el = this.$refs.scrollEl;
-      if (el) el.scrollTop = el.scrollHeight;
-    },
-    toggleEvent(spanId) {
-      const event = this.eventIndex[spanId];
-      if (event) event.collapsed = !event.collapsed;
-    },
-    showMore(spanId) {
-      const event = this.eventIndex[spanId];
-      if (event)
-        event.visibleCount = Math.min(
-          event.records.length,
-          event.visibleCount + 20,
-        );
-    },
-    pulseEvent(spanId) {
-      if (!spanId) return;
-      if (this.highlightTimers[spanId])
-        clearTimeout(this.highlightTimers[spanId]);
-      this.highlightMap = { ...this.highlightMap, [spanId]: true };
-      const remove = setTimeout(() => {
-        const next = { ...this.highlightMap };
-        delete next[spanId];
-        this.highlightMap = next;
-        const timers = { ...this.highlightTimers };
-        delete timers[spanId];
-        this.highlightTimers = timers;
-      }, 1200);
-      this.highlightTimers = { ...this.highlightTimers, [spanId]: remove };
-    },
-    getVisibleRecords(event) {
-      if (!event.records.length) return [];
-      return event.records.slice(0, event.visibleCount);
-    },
-    formatTime(ts) {
-      if (!ts) return "";
-      const date = new Date(ts * 1000);
-      return `${date.toLocaleString()}.${String(date.getMilliseconds()).padStart(3, "0")}`;
-    },
-    shortSpan(spanId) {
-      return spanId ? spanId.slice(0, 8) : "";
-    },
-    formatFields(fields) {
-      if (!fields) return "";
-      try {
-        const text = JSON.stringify(fields, null, 2);
-        return text.length > 2000 ? text : text;
-      } catch (e) {
-        return String(fields);
-      }
-    },
-  },
-};
-</script>
-
 <style>
-.trace-cell { color: #e2e2e7 !important; }
-.trace-header { color: #e2e2e7 !important; }
-.trace-table { background: rgba(13,13,15,0.95) !important; }
-.trace-group { background: rgba(13,13,15,0.5) !important; }
-.trace-empty { color: #e2e2e7 !important; }
-</style>
-
-<style scoped>
-.trace-wrapper {
-  height: 100%;
+.timeline-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #050507;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  overflow: hidden;
 }
 
-.trace-table {
-  background: var(--v-theme-surface);
-  border-radius: 0;
-  padding: 0;
-  height: 100%;
+.timeline-header {
+  padding: 20px 32px 16px;
+  background: #0d0d12;
+  border-bottom: 1px solid rgba(0, 242, 255, 0.12);
+  flex-shrink: 0;
+}
+
+.tl-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #00F2FF;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}
+
+.tl-subtitle {
+  font-size: 11px;
+  color: #4b5563;
+  margin-top: 4px;
+  letter-spacing: 0.5px;
+}
+
+.trace-timeline {
+  flex: 1;
   overflow-y: auto;
-  font-family: "Fira Code", monospace;
+  padding: 24px 32px;
 }
 
-.trace-row {
-  display: grid;
-  grid-template-columns: 200px 100px 300px 90px 180px 140px;
+.tl-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0;
+  color: #4b5563;
+}
+
+.tl-empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.tl-empty-text {
+  font-size: 16px;
+  color: #6b7280;
+  margin-bottom: 8px;
+}
+
+.tl-empty-hint {
+  font-size: 12px;
+  color: #4b5563;
+}
+
+.tl-item {
+  display: flex;
+  gap: 0;
+  margin-bottom: 0;
+}
+
+.tl-item:last-child .tl-line {
+  display: none;
+}
+
+/* Track: dot + line */
+.tl-track {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 32px;
+}
+
+.tl-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #1e293b;
+  border: 2px solid #334155;
+  flex-shrink: 0;
+  margin-top: 18px;
+  z-index: 1;
+  transition: all 0.3s ease;
+}
+
+.tl-dot-active {
+  background: #00F2FF;
+  border-color: #00F2FF;
+  box-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
+}
+
+.tl-item-active .tl-dot {
+  background: #00F2FF;
+  border-color: #00F2FF;
+  box-shadow: 0 0 12px rgba(0, 242, 255, 0.8);
+  transform: scale(1.3);
+}
+
+.tl-line {
+  width: 2px;
+  flex: 1;
+  background: rgba(51, 65, 85, 0.5);
+  margin-top: 4px;
+  min-height: 20px;
+}
+
+.tl-item-active .tl-line {
+  background: rgba(0, 242, 255, 0.3);
+}
+
+/* Card */
+.tl-card {
+  flex: 1;
+  margin-left: 12px;
+  margin-bottom: 16px;
+  background: #0d0d12;
+  border: 1px solid rgba(51, 65, 85, 0.4);
+  border-radius: 8px;
+  overflow: hidden;
+  transition: border-color 0.3s ease;
+}
+
+.tl-item-active .tl-card {
+  border-color: rgba(0, 242, 255, 0.4);
+  box-shadow: 0 0 16px rgba(0, 242, 255, 0.1);
+}
+
+.tl-item-expanded .tl-card {
+  border-color: rgba(0, 242, 255, 0.3);
+}
+
+.tl-card-header {
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.tl-card-header:hover {
+  background: rgba(0, 242, 255, 0.04);
+}
+
+.tl-card-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.tl-event-id {
+  font-size: 13px;
+  font-weight: 700;
+  color: #00F2FF;
+  background: rgba(0, 242, 255, 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 242, 255, 0.2);
+}
+
+.tl-umo {
+  font-size: 11px;
+  color: #6b7280;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tl-time {
+  font-size: 10px;
+  color: #4b5563;
+  flex-shrink: 0;
+}
+
+.tl-card-bottom {
+  display: flex;
+  align-items: center;
   gap: 12px;
 }
 
-.trace-group {
-  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
-  padding: 8px 0;
-}
-
-.trace-group.highlight {
-  background: rgba(59, 130, 246, 0.12);
-}
-
-.trace-event {
-  align-items: start;
-}
-
-.trace-header {
-  font-weight: 600;
-  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
-  padding-bottom: 10px;
-}
-
-.trace-cell {
+.tl-sender {
+  font-size: 12px;
+  color: #9ca3af;
+  max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tl-outline {
+  flex: 1;
   font-size: 12px;
-  color: var(--v-theme-primaryText);
+  color: #6b7280;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.event-title {
-  font-weight: 600;
-}
-.event-meta {
-  font-size: 12px;
-  margin-top: 4px;
-}
-.event-sub {
-  font-size: 12px;
-  margin-top: 2px;
-  word-break: break-word;
-  color: var(--v-theme-primaryText);
-}
-.event-controls {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.agent-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #22c55e;
-  margin-left: 6px;
-  vertical-align: middle;
-}
-
-.trace-cell.fields pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--v-theme-primaryText);
-}
-
-.trace-empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--v-theme-secondaryText);
-}
-
-@media (max-width: 1200px) {
-  .trace-row {
-    grid-template-columns: 140px 160px 300px 70px 140px 180px 1fr;
-  }
-  .trace-cell.fields {
-    grid-column: 1 / -1;
-  }
-}
-
-.trace-record {
-  display: grid;
-  grid-template-columns: 200px 120px 1fr;
-  gap: 8px;
-  padding: 2px 0;
-}
-.trace-record:last-child {
-  border-bottom: none;
-}
-.trace-record-time {
-  font-size: 11px;
-  color: var(--v-theme-secondaryText);
-}
-.trace-record-action {
-  font-weight: 600;
-  font-size: 11px;
-  color: var(--v-theme-primaryText);
-}
-.trace-record-fields {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
+.tl-expand-btn {
   font-size: 10px;
-  color: var(--v-theme-primaryText);
+  color: #00F2FF;
+  background: rgba(0, 242, 255, 0.05);
+  border: 1px solid rgba(0, 242, 255, 0.15);
+  padding: 2px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
 }
-.event-more {
+
+/* Records */
+.tl-records {
+  border-top: 1px solid rgba(51, 65, 85, 0.3);
+  background: rgba(0, 0, 0, 0.3);
+  padding: 12px 16px;
+}
+
+.tl-records-header {
+  font-size: 10px;
+  color: #4b5563;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(51, 65, 85, 0.2);
+}
+
+.tl-record {
   display: flex;
-  justify-content: center;
-  padding: 6px 0 2px;
+  gap: 12px;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(51, 65, 85, 0.15);
 }
-.trace-records {
-  padding: 4px 0 2px 0;
+
+.tl-record:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.tl-record-left {
+  flex-shrink: 0;
+  width: 180px;
+}
+
+.tl-record-time {
+  font-size: 10px;
+  color: #4b5563;
+  margin-bottom: 2px;
+}
+
+.tl-record-action {
+  font-size: 11px;
+  font-weight: 700;
+  color: #00F2FF;
+}
+
+.tl-record-fields {
+  flex: 1;
+  margin: 0;
+  font-size: 10px;
+  color: #9ca3af;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: inherit;
+  background: transparent;
+  border: none;
+  padding: 0;
+  line-height: 1.6;
+}
+
+.tl-records-more {
+  text-align: center;
+  padding-top: 10px;
+}
+
+.tl-records-more button {
+  background: rgba(0, 242, 255, 0.05);
+  border: 1px solid rgba(0, 242, 255, 0.15);
+  color: #00F2FF;
+  padding: 4px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+  transition: all 0.2s ease;
+}
+
+.tl-records-more button:hover {
+  background: rgba(0, 242, 255, 0.12);
+  border-color: rgba(0, 242, 255, 0.3);
+}
+
+@media (max-width: 700px) {
+  .tl-umo { display: none; }
+  .tl-record-left { width: 120px; }
+  .trace-timeline { padding: 16px; }
+  .timeline-header { padding: 16px; }
 }
 </style>
diff --git a/dashboard/src/views/TracePage.vue b/dashboard/src/views/TracePage.vue
index 9bc048575..41916d371 100644
--- a/dashboard/src/views/TracePage.vue
+++ b/dashboard/src/views/TracePage.vue
@@ -14,7 +14,7 @@ const fetchTraceSettings = async () => {
   try {
     const res = await axios.get('/api/trace/settings');
     if (res.data?.status === 'ok') {
-      traceEnabled.value = res.data.data?.trace_enable ?? true;
+      traceEnabled.value = res.data?.data?.trace_enable ?? true;
     }
   } catch (err) {
     console.error('Failed to fetch trace settings:', err);
@@ -27,7 +27,6 @@ const updateTraceSettings = async () => {
     await axios.post('/api/trace/settings', {
       trace_enable: traceEnabled.value
     });
-    // Refresh the TraceDisplayer component to reconnect SSE
     traceDisplayerKey.value += 1;
   } catch (err) {
     console.error('Failed to update trace settings:', err);
@@ -43,28 +42,26 @@ onMounted(() => {
 
 <template>
   <div style="height: 100%; display: flex; flex-direction: column;">
-    <div class="trace-header">
-      <div class="trace-info">
-        <v-icon size="small" color="info" class="mr-2">mdi-information-outline</v-icon>
-        <span class="trace-hint">{{ tm('hint') }}</span>
+    <div class="trace-topbar">
+      <div class="topbar-left">
+        <div class="topbar-title">{{ tm('title') || '追踪' }}</div>
+        <div class="topbar-desc">{{ tm('hint') }}</div>
       </div>
-      <div class="trace-controls">
-        <v-switch
-          v-model="traceEnabled"
-          :loading="loading"
-          :disabled="loading"
-          color="primary"
-          hide-details
-          density="compact"
-          @update:model-value="updateTraceSettings"
-        >
-          <template #label>
-            <span class="switch-label">{{ traceEnabled ? tm('recording') : tm('paused') }}</span>
-          </template>
-        </v-switch>
+      <div class="topbar-right">
+        <div class="switch-wrap">
+          <span class="switch-label">{{ traceEnabled ? tm('recording') : tm('paused') }}</span>
+          <button
+            class="switch-btn"
+            :class="{ 'switch-btn-on': traceEnabled }"
+            @click="updateTraceSettings"
+            :disabled="loading"
+          >
+            <span class="switch-knob"></span>
+          </button>
+        </div>
       </div>
     </div>
-    <div style="flex: 1; min-height: 0;">
+    <div style="flex: 1; min-height: 0; overflow: hidden;">
       <TraceDisplayer :key="traceDisplayerKey" />
     </div>
   </div>
@@ -73,43 +70,92 @@ onMounted(() => {
 <script>
 export default {
   name: 'TracePage',
-  components: {
-    TraceDisplayer
-  }
+  components: { TraceDisplayer }
 };
 </script>
 
 <style scoped>
-.trace-header {
+.trace-topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
-  background: rgba(59, 130, 246, 0.05);
-  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
-  border-radius: 8px 8px 0 0;
-  margin-bottom: 8px;
+  padding: 14px 32px;
+  background: #0a0a0f;
+  border-bottom: 1px solid rgba(0, 242, 255, 0.1);
+  flex-shrink: 0;
 }
 
-.trace-info {
+.topbar-left {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.topbar-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #00F2FF;
+  font-family: 'JetBrains Mono', monospace;
+  letter-spacing: 1px;
+}
+
+.topbar-desc {
+  font-size: 11px;
+  color: #4b5563;
+}
+
+.topbar-right {
   display: flex;
   align-items: center;
 }
 
-.trace-hint {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.trace-controls {
+.switch-wrap {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
 .switch-label {
-  font-size: 13px;
-  color: #4b5563;
-  white-space: nowrap;
+  font-size: 12px;
+  color: #9ca3af;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.switch-btn {
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  background: #1e293b;
+  border: 1px solid #334155;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.3s ease;
+  padding: 0;
+}
+
+.switch-btn:hover {
+  border-color: rgba(0, 242, 255, 0.3);
+}
+
+.switch-btn-on {
+  background: rgba(0, 242, 255, 0.15);
+  border-color: rgba(0, 242, 255, 0.4);
+}
+
+.switch-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #475569;
+  transition: all 0.3s ease;
+}
+
+.switch-btn-on .switch-knob {
+  left: 20px;
+  background: #00F2FF;
+  box-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
 }
 </style>