Merge pull request #1274 from pikasTech/fix/issue-1273-web-markdown-sidebar

修复 Web 工作台详情按钮、侧栏滚动与 Markdown 样式

web/hwlab-cloud-web/scripts/check.ts

@@ -97,7 +97,10 @@ assertIncludes(appSource, "for (;;) ", "trace subscription must keep unbounded p
 assertIncludes(appSource, "/v1/agent/chat/trace/", "trace replay must use Cloud Web same-origin trace API");
 assertIncludes(appSource, "/v1/workbench/workspace", "workspace bootstrap must use Cloud Web same-origin workbench API");
 assert.doesNotMatch(appSource, /\/auth\/workspace-bootstrap/u, "stale auth workspace bootstrap route must not remain in Cloud Web app source");
-assertIncludes(appSource, "trace-meta-details", "Trace identity and raw-event controls must stay behind a compact details disclosure");
+assert.doesNotMatch(appSource, /trace-meta-details/u, "Trace details must not render a second message-detail exclamation button");
+assertIncludes(appSource, "trace-meta-panel", "Trace identity and raw-event controls must remain in the expanded trace body");
+assertIncludes(appSource, "scrollbar-width: none;", "Platform sidebar must scroll without a visible scrollbar");
+assertIncludes(appSource, "border-collapse: collapse;", "Markdown tables must use GitHub-like bordered table styling");
 assertIncludes(appSource, "grid-template-columns: minmax(0, 1fr);", "Trace rows must give the readable body the full content width");
 assertIncludes(appSource, "const primaryAction = computed", "Workbench composer must derive a single primary send/cancel/steer action");
 assertIncludes(appSource, "primaryAction.value === \"cancel\"", "Composer primary button must switch to cancel while a turn is running and the draft is empty");

web/hwlab-cloud-web/src/components/agent/TraceTimeline.vue

@@ -20,7 +20,6 @@ const noiseCount = computed(() => traceNoiseEventCount(events.value as Record<st
 const lastEvent = computed(() => events.value.at(-1) ?? null);
 const lastReadableRow = computed(() => readableRows.value.at(-1) ?? null);
 const lastEventLabel = computed(() => firstNonEmptyString(lastReadableRow.value?.header, props.trace?.lastEventLabel, lastEvent.value?.label, lastEvent.value?.type, lastEvent.value?.kind) ?? "未观测");
-const detailTitle = computed(() => props.trace?.traceId ? `运行详情 ${props.trace.traceId}` : "运行详情");
 const summaryItems = computed(() => {
   const agentRun = recordValue(props.trace?.agentRun);
   return [
@@ -112,27 +111,24 @@ function recordValue(value: unknown): Record<string, unknown> | null {
         <span v-if="noiseCount > 0" class="trace-disclosure-hidden">+{{ noiseCount }}</span>
       </summary>
       <div class="trace-disclosure-body">
-        <details class="trace-meta-details">
-          <summary :aria-label="detailTitle" :title="detailTitle">!</summary>
-          <div class="trace-meta-panel">
-            <dl class="trace-meta-grid">
-              <div><dt>trace</dt><dd>{{ trace.traceId || "pending" }}</dd></div>
-              <div><dt>rows</dt><dd>{{ readableRows.length }} / {{ eventCount }}</dd></div>
-              <div v-if="noiseCount > 0"><dt>hidden</dt><dd>{{ noiseCount }}</dd></div>
-              <div><dt>last</dt><dd>{{ lastEventLabel }}</dd></div>
-            </dl>
-            <div v-if="summaryItems.length > 0" class="trace-summary-strip" aria-label="Trace identity summary">
-              <span v-for="item in summaryItems" :key="item.label" class="trace-summary-chip"><b>{{ item.label }}</b>{{ item.value }}</span>
-            </div>
-            <p v-if="trace.eventsCompacted" class="trace-warning">当前 result 返回被压缩，已通过 trace replay 入口请求完整事件；完成前不要把压缩窗口当完整 trace。</p>
-            <p v-if="noiseCount > 0 && !rawMode" class="trace-warning">已聚合隐藏 {{ noiseCount }} 条 backend/chunk/token 噪声事件；原始 payload 仍可在原始事件中审计。</p>
-            <div class="trace-meta-actions">
-              <button class="btn btn-secondary btn-sm" type="button" @click="following = !following">{{ following ? "跟随" : "暂停" }}</button>
-              <button class="btn btn-secondary btn-sm" type="button" @click="jumpToBottom">到底部</button>
-              <button class="btn btn-secondary btn-sm" type="button" @click="rawMode = !rawMode">{{ rawMode ? "可读视图" : "原始事件" }}</button>
-            </div>
+        <div class="trace-meta-panel" aria-label="运行记录摘要">
+          <dl class="trace-meta-grid">
+            <div><dt>trace</dt><dd>{{ trace.traceId || "pending" }}</dd></div>
+            <div><dt>rows</dt><dd>{{ readableRows.length }} / {{ eventCount }}</dd></div>
+            <div v-if="noiseCount > 0"><dt>hidden</dt><dd>{{ noiseCount }}</dd></div>
+            <div><dt>last</dt><dd>{{ lastEventLabel }}</dd></div>
+          </dl>
+          <div v-if="summaryItems.length > 0" class="trace-summary-strip" aria-label="Trace identity summary">
+            <span v-for="item in summaryItems" :key="item.label" class="trace-summary-chip"><b>{{ item.label }}</b>{{ item.value }}</span>
           </div>
-        </details>
+          <p v-if="trace.eventsCompacted" class="trace-warning">当前 result 返回被压缩，已通过 trace replay 入口请求完整事件；完成前不要把压缩窗口当完整 trace。</p>
+          <p v-if="noiseCount > 0 && !rawMode" class="trace-warning">已聚合隐藏 {{ noiseCount }} 条 backend/chunk/token 噪声事件；原始 payload 仍可在原始事件中审计。</p>
+          <div class="trace-meta-actions">
+            <button class="btn btn-secondary btn-sm" type="button" @click="following = !following">{{ following ? "跟随" : "暂停" }}</button>
+            <button class="btn btn-secondary btn-sm" type="button" @click="jumpToBottom">到底部</button>
+            <button class="btn btn-secondary btn-sm" type="button" @click="rawMode = !rawMode">{{ rawMode ? "可读视图" : "原始事件" }}</button>
+          </div>
+        </div>
         <ol ref="listRef" @scroll="onScroll">
           <template v-if="!rawMode">
             <li v-for="(row, index) in readableRows" :key="rowKey(row, index)" class="trace-render-row" :data-event-status="row.tone" :data-terminal="row.terminal ? 'true' : 'false'" :data-row-kind="rowIsTool(row) ? 'tool' : 'message'">

web/hwlab-cloud-web/src/styles/workbench.css

@@ -16,17 +16,27 @@
   top: 0;
   display: flex;
   height: 100vh;
+  min-height: 0;
   flex-direction: column;
   gap: 20px;
   border-right: 1px solid #d8e1eb;
   background: #f8fafc;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 18px 14px;
+  scrollbar-width: none;
+}
+
+.platform-sidebar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
 
 .platform-sidebar[data-collapsed="true"] {
   width: auto;
-  overflow: hidden;
   align-items: center;
+  overflow-x: hidden;
   padding-right: 8px;
   padding-left: 8px;
 }
@@ -752,6 +762,7 @@
 .message-markdown {
   margin: 0;
   color: #1f2937;
+  font-size: 13px;
   line-height: 1.55;
 }
 
@@ -772,18 +783,21 @@
   padding-left: 20px;
 }
 
-.message-markdown pre,
 .message-markdown code {
   border-radius: 3px;
-  background: #0f172a;
-  color: #dbeafe;
+  background: rgba(175, 184, 193, 0.2);
+  color: #24292f;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
+  font-size: 85%;
 }
 
 .message-markdown pre {
   max-width: 100%;
   overflow: auto;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  background: #f6f8fa;
+  color: #24292f;
   padding: 10px;
 }
 
@@ -794,6 +808,38 @@
 .message-markdown pre code {
   padding: 0;
   background: transparent;
+  color: inherit;
+  font-size: 100%;
+}
+
+.message-markdown table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  border-spacing: 0;
+  line-height: 1.45;
+}
+
+.message-markdown th,
+.message-markdown td {
+  border: 1px solid #d0d7de;
+  padding: 6px 13px;
+  color: #24292f;
+  text-align: left;
+}
+
+.message-markdown th {
+  background: #f6f8fa;
+  font-weight: 700;
+}
+
+.message-markdown tr {
+  background: white;
+}
+
+.message-markdown tr:nth-child(2n) {
+  background: #f6f8fa;
 }
 
 .message-markdown a {
@@ -818,7 +864,6 @@
 }
 
 .trace-disclosure summary::-webkit-details-marker,
-.trace-meta-details summary::-webkit-details-marker,
 .trace-tool-details summary::-webkit-details-marker {
   display: none;
 }
@@ -868,39 +913,10 @@
   gap: 5px;
 }
 
-.trace-meta-details {
-  display: grid;
-  justify-items: start;
-}
-
-.trace-meta-details summary {
-  display: inline-flex;
-  width: 22px;
-  height: 22px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #cbd5e1;
-  border-radius: 999px;
-  background: white;
-  cursor: pointer;
-  color: #475569;
-  font-size: 12px;
-  font-weight: 850;
-  line-height: 1;
-  list-style: none;
-  padding: 0;
-}
-
-.trace-meta-details[open] summary {
-  border-color: #0891b2;
-  color: #0f766e;
-}
-
 .trace-meta-panel {
   display: grid;
   gap: 6px;
   width: 100%;
-  margin-top: 5px;
   border: 1px solid #e2e8f0;
   border-radius: 3px;
   background: white;