diff --git a/changelogs/unreleased.md b/changelogs/unreleased.md
index 135e0f541..a73260333 100644
--- a/changelogs/unreleased.md
+++ b/changelogs/unreleased.md
@@ -20,4 +20,4 @@
 - Show execution mode, plugin names, and response ownership as timeline chips. Reuse profile runner labels and classify built-in Agent replies as system/core while preserving plugin senders.
 - Remove the outer gray trace card and tinted list shell, using a flat tab layout with toolbar/table separators in both themes.
 - Top hint and separate recording switch → a toolbar Start/Pause/Connecting button. Filters, recording, and refresh share gray icon-and-text styling and 36px input height; search fills available width and includes the message count in its placeholder.
-- Use Vuetify datatable for the trace list, retaining fixed headers, stable trace row IDs, and explicit detail selection without adding pagination or automatic selection.
+- Use Vuetify datatable with native rows, typography, spacing, and hover styling for the trace list; customize individual cells while retaining fixed headers, stable trace row IDs, keyboard activation, and explicit detail selection without adding pagination or automatic selection.
diff --git a/dashboard/src/components/shared/TraceDisplayer.vue b/dashboard/src/components/shared/TraceDisplayer.vue
index f454d30df..a33dee2e1 100644
--- a/dashboard/src/components/shared/TraceDisplayer.vue
+++ b/dashboard/src/components/shared/TraceDisplayer.vue
@@ -135,14 +135,14 @@ const traceRows = computed(() => filteredEvents.value.map((event) => ({
 })));
 
 const traceHeaders = computed(() => [
-  { title: tm("columns.status"), key: "status", width: 100 },
-  { title: tm("columns.platform"), key: "platform", width: 56 },
-  { title: tm("columns.timestamp"), key: "timestamp", width: 132 },
-  { title: tm("columns.duration"), key: "duration", width: 92 },
-  { title: tm("columns.message"), key: "message", width: "26%" },
-  { title: "UMO", key: "umo", width: "28%" },
-  { title: tm("columns.sender"), key: "sender", width: 110 },
-  { title: "Spans", key: "spans", width: 64 },
+  { title: tm("columns.status"), key: "status", width: 120 },
+  { title: tm("columns.platform"), key: "platform", width: 80 },
+  { title: tm("columns.timestamp"), key: "timestamp", width: 160 },
+  { title: tm("columns.duration"), key: "duration", width: 120 },
+  { title: tm("columns.message"), key: "message", minWidth: 240 },
+  { title: "UMO", key: "umo", minWidth: 240 },
+  { title: tm("columns.sender"), key: "sender", minWidth: 120 },
+  { title: "Spans", key: "spans", width: 80 },
 ]);
 
 const selectedStats = computed(() => {
@@ -593,44 +593,56 @@ onBeforeUnmount(() => {
           item-value="event.span_id"
           :items-per-page="-1"
           :mobile="false"
-          density="compact"
+          hover
+          :row-props="({ item }) => ({
+            class: { 'trace-list-row': true, selected: item.event.span_id === selectedSpanId },
+            'data-trace-id': item.event.span_id,
+            'aria-selected': item.event.span_id === selectedSpanId,
+            tabindex: 0,
+            onKeydown: (event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                selectEvent(item.event.span_id);
+              }
+            },
+          })"
+          @click:row="(_, { item }) => selectEvent(item.event.span_id)"
           fixed-header
           height="100%"
           hide-default-footer
           disable-sort
         >
           <template #header.spans><span :title="tm('columns.spansHint')">Spans</span></template>
-          <template #item="{ item: { event, duration, spans } }">
-            <tr
-              :key="event.span_id"
-              class="trace-list-row"
-              :class="{ selected: event.span_id === selectedSpanId }"
-              :data-trace-id="event.span_id"
-              tabindex="0"
-              @click="selectEvent(event.span_id)"
-              @keydown.enter="selectEvent(event.span_id)"
-              @keydown.space.prevent="selectEvent(event.span_id)"
-            >
-              <td><v-chip size="x-small" variant="tonal" :color="event.status === 'error' ? 'error' : event.status === 'success' ? 'success' : 'warning'">{{ statusLabel(event) }}</v-chip></td>
-              <td class="trace-platform-cell">
-                <span class="trace-item-platform" :title="event.platform_id || event.platform_name">
-                  <img v-if="event.platform_icon && !failedPlatformLogos.has(event.platform_icon)" :src="event.platform_icon" :alt="event.platform_name" @error="failedPlatformLogos.add(event.platform_icon)" />
-                  <Activity v-else :size="16" aria-hidden="true" />
-                </span>
-              </td>
-              <td class="trace-time-cell">{{ formatTime(event.first_time) }}</td>
-              <td class="trace-duration-cell">{{ duration }}</td>
-              <td class="trace-message-cell" :title="event.message_outline || tm('untitled')">{{ event.message_outline || tm("untitled") }}</td>
-              <td class="trace-umo-cell">
-                <v-tooltip :text="event.umo" location="top">
-                  <template #activator="{ props }">
-                    <span v-bind="props" :class="{ 'trace-hover-name': umoNames[event.umo] && umoNames[event.umo] !== event.umo }">{{ umoNames[event.umo] || event.umo || "-" }}</span>
-                  </template>
-                </v-tooltip>
-              </td>
-              <td class="trace-sender-cell" :title="event.sender_name">{{ event.sender_name || "-" }}</td>
-              <td class="trace-spans-cell" :title="tm('columns.spansHint')">{{ spans }}</td>
-            </tr>
+          <template #item.status="{ item: { event } }">
+            <v-chip size="small" variant="tonal" :color="event.status === 'error' ? 'error' : event.status === 'success' ? 'success' : 'warning'">{{ statusLabel(event) }}</v-chip>
+          </template>
+          <template #item.platform="{ item: { event } }">
+            <span class="trace-item-platform" :title="event.platform_id || event.platform_name">
+              <img v-if="event.platform_icon && !failedPlatformLogos.has(event.platform_icon)" :src="event.platform_icon" :alt="event.platform_name" @error="failedPlatformLogos.add(event.platform_icon)" />
+              <Activity v-else :size="16" aria-hidden="true" />
+            </span>
+          </template>
+          <template #item.timestamp="{ item: { event } }">
+            <span class="text-no-wrap">{{ formatTime(event.first_time) }}</span>
+          </template>
+          <template #item.duration="{ item }">
+            <span class="text-no-wrap">{{ item.duration }}</span>
+          </template>
+          <template #item.message="{ item: { event } }">
+            <span class="trace-cell-text" :title="event.message_outline || tm('untitled')">{{ event.message_outline || tm("untitled") }}</span>
+          </template>
+          <template #item.umo="{ item: { event } }">
+            <v-tooltip :text="event.umo" location="top">
+              <template #activator="{ props }">
+                <span v-bind="props" class="trace-cell-text" :class="{ 'trace-hover-name': umoNames[event.umo] && umoNames[event.umo] !== event.umo }">{{ umoNames[event.umo] || event.umo || "-" }}</span>
+              </template>
+            </v-tooltip>
+          </template>
+          <template #item.sender="{ item: { event } }">
+            <span class="trace-cell-text" :title="event.sender_name">{{ event.sender_name || "-" }}</span>
+          </template>
+          <template #item.spans="{ item }">
+            <span :title="tm('columns.spansHint')">{{ item.spans }}</span>
           </template>
         </v-data-table>
       </section>
@@ -805,15 +817,12 @@ onBeforeUnmount(() => {
 .trace-explorer-body { display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; position: relative; }
 .trace-list { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
 .has-detail .trace-list { border-right: 1px solid var(--trace-border); }
-.trace-list-table { background: transparent; border-radius: 0; font-size: 12px; height: 100%; }
-.trace-list-table :deep(table) { border-collapse: separate; border-spacing: 0; min-width: 1100px; table-layout: fixed; width: 100%; }
-.trace-list-table :deep(table > thead > tr > th) { background: rgb(var(--v-theme-surface)); border-bottom: 1px solid var(--trace-border); color: var(--trace-muted); font-size: 11px; font-weight: 600; padding: 11px 12px; white-space: nowrap; }
-.trace-list-table :deep(table > tbody > tr > td) { border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.06); height: 48px; overflow: hidden; padding: 10px 12px; text-overflow: ellipsis; white-space: nowrap; }
-.trace-list-row { cursor: pointer; } .trace-list-row:hover { background: rgba(var(--v-theme-on-surface), 0.045); } .trace-list-row.selected { background: rgba(var(--v-theme-primary), 0.1); } .trace-list-row:focus-visible { outline: 2px solid rgb(var(--v-theme-primary)); outline-offset: -2px; }
+.trace-list-table { background: transparent; border-radius: 0; height: 100%; }
+.trace-list-table :deep(.trace-list-row.selected) { background: rgba(var(--v-theme-primary), 0.1); }
+.trace-list-table :deep(.trace-list-row:focus-visible) { outline: 2px solid rgb(var(--v-theme-primary)); outline-offset: -2px; }
+.trace-cell-text { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .trace-item-platform { align-items: center; color: var(--trace-muted); display: inline-flex; height: 20px; justify-content: center; vertical-align: middle; width: 20px; }
 .trace-item-platform img { height: 20px; object-fit: contain; width: 20px; }
-.trace-time-cell, .trace-duration-cell, .trace-spans-cell { color: var(--trace-muted); font-family: var(--astrbot-font-cjk-mono), monospace; font-size: 11px; }
-.trace-message-cell { font-weight: 500; } .trace-umo-cell, .trace-sender-cell { color: var(--trace-muted); }
 .trace-detail { background: rgb(var(--v-theme-surface)); flex: 0 0 58%; max-width: 850px; min-height: 0; min-width: 360px; overflow: auto; padding: 18px 22px 28px; }
 .trace-detail-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; }
 .trace-detail-header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
diff --git a/dashboard/tests/traceList.test.mjs b/dashboard/tests/traceList.test.mjs
index d559b1001..066950cb8 100644
--- a/dashboard/tests/traceList.test.mjs
+++ b/dashboard/tests/traceList.test.mjs
@@ -118,13 +118,48 @@ test("Vuetify datatable keeps the requested columns and explicit detail selectio
   assert.match(descriptor.template.content, /item-value="event.span_id"/);
   assert.match(descriptor.template.content, /:items-per-page="-1"/);
   assert.match(descriptor.template.content, /hide-default-footer/);
-  assert.match(descriptor.template.content, /#item="\{ item: \{ event, duration, spans \} \}"/);
+  assert.doesNotMatch(descriptor.template.content, /#item=/);
+  for (const key of ["status", "platform", "timestamp", "duration", "message", "umo", "sender", "spans"]) {
+    assert.match(descriptor.template.content, new RegExp("#item\\." + key + "="));
+  }
+  assert.match(descriptor.template.content, /@click:row="\(_, \{ item \}\) => selectEvent\(item.event.span_id\)"/);
   assert.match(descriptor.template.content, /<main v-if="selectedEvent"/);
   assert.match(descriptor.template.content, /tm\('closeDetails'\)/);
-  assert.match(descriptor.template.content, /@keydown.enter="selectEvent\(event.span_id\)"/);
   assert.match(descriptor.scriptSetup.content, /clearInterval\(durationTimer.value\)/);
 });
 
+test("native table rows retain trace identity, selection, and keyboard activation", () => {
+  const selections = [];
+  const expression = descriptor.template.content.match(/:row-props="([\s\S]*?)"/)[1];
+  const rowProps = vm.runInNewContext("(" + expression + ")", {
+    selectedSpanId: "first",
+    selectEvent: (id) => selections.push(id),
+  });
+  const props = rowProps({ item: { event: { span_id: "first" } } });
+  assert.equal(props["data-trace-id"], "first");
+  assert.equal(props["aria-selected"], true);
+  assert.equal(props.class.selected, true);
+  assert.equal(props.tabindex, 0);
+  let prevented = 0;
+  for (const key of ["Enter", " ", "ArrowDown"]) {
+    props.onKeydown({ key, preventDefault() { prevented++; } });
+  }
+  assert.deepEqual(selections, ["first", "first"]);
+  assert.equal(prevented, 2);
+  assert.equal(rowProps({ item: { event: { span_id: "second" } } }).class.selected, false);
+});
+
+test("table typography, density, spacing, and hover use Vuetify defaults", () => {
+  const table = descriptor.template.content.match(/<v-data-table[\s\S]*?>/)[0];
+  assert.match(table, /\s+hover\s/);
+  assert.doesNotMatch(table, /density=/);
+  assert.doesNotMatch(descriptor.styles[0].content, /:deep\(table|table-layout:\s*fixed|\.trace-list-row:hover/);
+  const tableStyle = descriptor.styles[0].content.match(/\.trace-list-table\s*\{([^}]+)\}/)[1];
+  assert.doesNotMatch(tableStyle, /font-size|padding|font-family/);
+  assert.deepEqual(compileTemplate({ source: descriptor.template.content, filename: "TraceDisplayer.vue", id: "trace-native" }).errors, []);
+  assert.deepEqual(compileStyle({ source: descriptor.styles[0].content, filename: "TraceDisplayer.vue", id: "trace-native", scoped: true }).errors, []);
+});
+
 test("trace tab stays flat without outer cards or a tinted list container", () => {
   const page = parse(readFileSync(new URL("../src/views/TracePage.vue", import.meta.url), "utf8")).descriptor;
   assert.doesNotMatch(page.template.content, /trace-card/);
diff --git a/docs/en/use/webui.md b/docs/en/use/webui.md
index e34e8668c..7450b6bfa 100644
--- a/docs/en/use/webui.md
+++ b/docs/en/use/webui.md
@@ -174,7 +174,7 @@ The toolbar contains search, fullscreen, font-size controls, and `Install Pip pa
 
 The trace tab has no outer gray card; its toolbar and list sit directly on the page with only the necessary separators. The former hint and switch are replaced by a toolbar button showing Pause (enabled and connected), Connecting (enabled but disconnected), or Start (disabled). Filters, recording, and refresh use matching light-gray icon-and-text buttons sharing the input's background color, all 36px high. Search fills the remaining width, pushing actions to the right. Its placeholder includes the message count instead of a separate counter. Click to pause or resume. Updates show loading and prevent repeated clicks; failures preserve the previous state and display an error. Pausing retains the list and open details in both themes.
 
-The `Trace` tab shows message execution chains: receipt, plugin handlers, Agent requests, responses, and completion. It opens as a full-width Vuetify datatable with columns ordered as status chip, platform logo, timestamp, duration, message, UMO, sender, and Spans. Duration updates while execution is active. Click a row to open its timeline details on the right; use the close button or Escape to return to the list. History loading, incoming records, and filtering never automatically open another trace. Scroll horizontally on narrow screens. Spans counts timeline nodes after pairing start/end records; collapsing groups does not reduce it. The search placeholder counts message traces only. Open `Filters` next to search to select `Has errors`, `Has model calls`, and `Has plugin calls`. Multiple selections require all conditions and can be combined with search. No selection shows all traces; `Reset` clears selections, and closing the sidebar preserves them. This sidebar replaces the former `All / Errors / Agent / Plugins` single-select tabs. Use the toolbar recording button to enable or disable trace recording.
+The `Trace` tab shows message execution chains: receipt, plugin handlers, Agent requests, responses, and completion. It opens as a full-width Vuetify datatable with columns ordered as status chip, platform logo, timestamp, duration, message, UMO, sender, and Spans. Headers, row height, and spacing use Vuetify defaults; only cell content such as status, platform icons, and messages is customized. Duration updates while execution is active. Click a row to open its timeline details on the right; use the close button or Escape to return to the list. History loading, incoming records, and filtering never automatically open another trace. Scroll horizontally on narrow screens. Spans counts timeline nodes after pairing start/end records; collapsing groups does not reduce it. The search placeholder counts message traces only. Open `Filters` next to search to select `Has errors`, `Has model calls`, and `Has plugin calls`. Multiple selections require all conditions and can be combined with search. No selection shows all traces; `Reset` clears selections, and closing the sidebar preserves them. This sidebar replaces the former `All / Errors / Agent / Plugins` single-select tabs. Use the toolbar recording button to enable or disable trace recording.
 
 Session aliases replace raw UMOs when available; hover over the dotted underline to see the full UMO. Plugins use their display name when available; hover to see the plugin ID. Handler names, event types, and duration are also shown. Plugin handler nodes use the plugin logo when available and the plugin card's default blue star icon if it is missing or fails to load. Titles show the category in parentheses, matching the plugin detail page: command/command group, event listener, event hook, or LLM tool.
 
diff --git a/docs/zh/use/webui.md b/docs/zh/use/webui.md
index 8dee91ff6..5afb45b1a 100644
--- a/docs/zh/use/webui.md
+++ b/docs/zh/use/webui.md
@@ -174,7 +174,7 @@ ChatUI 支持以下常用能力：
 
 追踪标签页不使用外层灰色卡片，工具栏和列表直接铺在页面上，仅保留必要的分隔线。原来的顶部说明和独立记录开关已移除；工具栏按钮显示“暂停”（启用且已连接）、“连接中”（启用但未连接）或“启动”（停用）。过滤器、记录按钮、刷新均采用图标加文字的浅灰按钮，与搜索框共用背景色，统一为 36px 高；搜索框填满剩余宽度，将操作按钮靠右排列。记录数量并入占位文字：“在 X 条记录中搜索消息、会话、插件”，不单独显示。点击记录按钮可暂停或恢复，更新期间显示加载状态并禁用重复点击；失败时保持原状态并提示错误。暂停不会清除已有列表或关闭详情，明暗主题保持相同布局。
 
-`追踪` 页面实时显示消息执行链：收到消息、触发插件处理器、Agent 相关请求、发送响应和完成。默认只展示全宽 Vuetify datatable 追踪列表，列顺序为状态标签（运行中/已完成/错误）、平台 logo、时间戳、运行时间、消息、UMO、发送人和 Spans；运行时间在执行期间持续更新。点击某行后才打开右侧时间线详情，点击关闭按钮或按 Escape 返回列表；加载历史记录、新记录到达及筛选变化都不会自动打开其他记录的详情。窄屏列表可横向滚动。Spans 统计开始/结束合并后的时间线节点，同类型折叠不减少该数量，搜索占位文字中的记录数仍只统计消息。点击搜索框左侧的“过滤器”，勾选“有错误”“有模型调用”“有插件调用”；多选需同时满足所有条件，并可叠加搜索。不勾选则显示全部，“重置”清除勾选，关闭侧栏仍保留条件。原先的“全部 / 错误 / Agent / 插件”单选标签已改为多选侧栏。工具栏记录按钮可启用或禁用追踪记录。
+`追踪` 页面实时显示消息执行链：收到消息、触发插件处理器、Agent 相关请求、发送响应和完成。默认只展示全宽 Vuetify datatable 追踪列表，列顺序为状态标签（运行中/已完成/错误）、平台 logo、时间戳、运行时间、消息、UMO、发送人和 Spans；表头、行高和间距采用 Vuetify 默认样式，仅定制状态、平台图标及消息等单元格内容。运行时间在执行期间持续更新。点击某行后才打开右侧时间线详情，点击关闭按钮或按 Escape 返回列表；加载历史记录、新记录到达及筛选变化都不会自动打开其他记录的详情。窄屏列表可横向滚动。Spans 统计开始/结束合并后的时间线节点，同类型折叠不减少该数量，搜索占位文字中的记录数仍只统计消息。点击搜索框左侧的“过滤器”，勾选“有错误”“有模型调用”“有插件调用”；多选需同时满足所有条件，并可叠加搜索。不勾选则显示全部，“重置”清除勾选，关闭侧栏仍保留条件。原先的“全部 / 错误 / Agent / 插件”单选标签已改为多选侧栏。工具栏记录按钮可启用或禁用追踪记录。
 
 UMO 有别名时显示别名，带点划线的文字可悬停查看完整 UMO。插件优先显示 display name，悬停可查看插件 ID，同时展示 Handler 名称、事件类型及耗时。插件处理器节点优先使用插件 logo，没有 logo 或加载失败时使用插件卡片的默认蓝色星形图标；标题括号内展示与插件详情页一致的分类：指令/指令组、事件监听器、事件钩子或 LLM 工具。