niceeval 0.1.0

package/src/view/styles.css

@@ -0,0 +1,1074 @@
+@import "tailwindcss";
+
+/* 把现有设计令牌暴露给 Tailwind:既保留 var(--panel) 给旧 CSS 用,又生成 bg-panel / text-muted /
+   border-line 等 utility,新组件(shadcn)直接用 token 配色,深浅色仍由 light-dark() 驱动。 */
+@theme {
+  --color-bg: var(--bg);
+  --color-panel: var(--panel);
+  --color-panel-2: var(--panel-2);
+  --color-line: var(--line);
+  --color-line-strong: var(--line-strong);
+  --color-text: var(--text);
+  --color-muted: var(--muted);
+  --color-soft: var(--soft);
+  --color-good: var(--good);
+  --color-bad: var(--bad);
+  --color-warn: var(--warn);
+  --color-focus: var(--focus);
+}
+
+:root {
+  color-scheme: light dark;
+  --bg: light-dark(#fafafa, #050505);
+  --panel: light-dark(#ffffff, #0b0b0b);
+  --panel-2: light-dark(#f4f4f5, #111111);
+  --line: light-dark(#dedee2, #262626);
+  --line-strong: light-dark(#c9c9cf, #343434);
+  --text: light-dark(#111113, #ededed);
+  --muted: light-dark(#62636a, #a1a1aa);
+  --soft: light-dark(#8b8d98, #74747b);
+  --good: light-dark(#087f5b, #3ddc97);
+  --bad: light-dark(#b42318, #ff6b6b);
+  --warn: light-dark(#9a6700, #e8b84a);
+  --focus: light-dark(#111113, #ededed);
+  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
+}
+
+* { box-sizing: border-box; }
+html {
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  letter-spacing: 0;
+}
+a { color: inherit; }
+.topbar {
+  height: 64px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 clamp(20px, 5vw, 80px);
+  background: color-mix(in oklch, var(--bg), transparent 4%);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  backdrop-filter: blur(10px);
+}
+.brand {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  font-weight: 690;
+  font-size: 20px;
+}
+.mark {
+  width: 18px;
+  height: 18px;
+  border: 1.25px solid var(--text);
+  transform: rotate(45deg);
+  display: inline-block;
+}
+/* 顶部导航 .nav / .nav-tab → components/ui/tabs.tsx(Radix Tabs + Tailwind utilities)。 */
+.lang-switch {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--panel);
+  overflow: hidden;
+  flex: 0 0 auto;
+}
+.lang-switch button {
+  height: 30px;
+  min-width: 44px;
+  border: 0;
+  border-right: 1px solid var(--line);
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.lang-switch button:last-child { border-right: 0; }
+.lang-switch button:hover { color: var(--text); }
+.lang-switch button.is-active {
+  background: var(--panel-2);
+  color: var(--text);
+  font-weight: 620;
+}
+main {
+  width: min(1120px, calc(100vw - 40px));
+  margin: 0 auto;
+  padding: clamp(52px, 7vw, 82px) 0 72px;
+}
+.hero {
+  text-align: center;
+  max-width: 740px;
+  margin: 0 auto clamp(38px, 6vw, 58px);
+}
+h1 {
+  margin: 0;
+  font-size: clamp(42px, 5.6vw, 66px);
+  line-height: 0.94;
+  font-weight: 760;
+  letter-spacing: 0;
+}
+.subtitle {
+  margin: 20px auto 0;
+  color: color-mix(in oklch, var(--muted), var(--text) 12%);
+  font-size: clamp(17px, 2vw, 21px);
+  line-height: 1.58;
+  max-width: 660px;
+}
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 14px;
+  margin-top: 24px;
+  color: var(--muted);
+  font-size: 14px;
+}
+.meta b { color: var(--text); font-weight: 570; }
+.summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 0 auto 36px;
+  background: linear-gradient(180deg, color-mix(in oklch, var(--panel), var(--panel-2) 18%), var(--panel));
+  max-width: 100%;
+}
+.metric {
+  padding: 14px 20px 15px;
+  border-right: 1px solid var(--line);
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: baseline;
+  column-gap: 12px;
+}
+.metric:last-child { border-right: 0; }
+.metric .label {
+  color: var(--soft);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.metric .value {
+  margin-top: 0;
+  font-size: clamp(19px, 2vw, 24px);
+  line-height: 1;
+  font-weight: 680;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.section-head {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 16px;
+}
+h2 {
+  margin: 0;
+  font-size: clamp(24px, 2.6vw, 31px);
+  line-height: 1.1;
+  font-weight: 720;
+}
+.controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.search {
+  height: 36px;
+  min-width: 320px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  padding: 0 12px;
+  background: var(--panel);
+  color: var(--text);
+  outline: none;
+}
+.search:focus { border-color: var(--focus); }
+.table-wrap {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: auto;
+  background: var(--panel);
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 1040px;
+}
+th, td {
+  border-bottom: 1px solid var(--line);
+  padding: 0 16px;
+  height: 52px;
+  text-align: left;
+  vertical-align: middle;
+  font-size: 14px;
+}
+th {
+  color: var(--muted);
+  font-weight: 500;
+  background: var(--panel);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+th button {
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  height: 100%;
+}
+th button::after {
+  content: "↕";
+  margin-left: 6px;
+  color: var(--soft);
+  font-size: 11px;
+}
+th button[data-sorted="asc"]::after { content: "↑"; color: var(--text); }
+th button[data-sorted="desc"]::after { content: "↓"; color: var(--text); }
+tbody tr.main-row { cursor: pointer; }
+tbody tr.main-row:hover { background: color-mix(in oklch, var(--panel-2), var(--panel) 34%); }
+tbody tr.is-open { background: var(--panel-2); }
+tbody tr:last-child td { border-bottom: 0; }
+.group-selector {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.group-card {
+  flex: 1;
+  min-width: 140px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 16px 20px;
+  cursor: pointer;
+  background: var(--panel);
+  outline: none;
+  transition: border-color 120ms, background 120ms;
+}
+.group-card:hover { border-color: var(--line-strong); background: var(--panel-2); }
+.group-card.is-selected { border-color: var(--text); background: var(--panel-2); }
+.group-card-name { font-size: 13px; font-weight: 680; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
+.group-card-rate { font-size: 30px; font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px; }
+.group-card-meta { font-size: 12px; color: var(--muted); }
+.group-card-time { font-size: 11px; color: var(--soft); margin-top: 2px; }
+.section-sub-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 16px;
+  min-height: 36px;
+}
+.group-detail-label {
+  font-size: 15px;
+  font-weight: 680;
+  color: var(--text);
+}
+.chev {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-right: 1.5px solid var(--muted);
+  border-bottom: 1.5px solid var(--muted);
+  transform: rotate(-45deg);
+  margin-right: 12px;
+  transition: transform 160ms ease;
+}
+.is-open .chev { transform: rotate(45deg); }
+.chev-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-right: 9px;
+  color: var(--muted);
+  vertical-align: -2px;
+  transition: transform 160ms ease;
+}
+.is-open .chev-icon { transform: rotate(90deg); }
+.name { font-weight: 610; }
+.sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
+.num {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  font-feature-settings: "tnum";
+}
+.good { color: var(--good); }
+.bad { color: var(--bad); }
+.warn { color: var(--warn); }
+.infra-err { color: var(--warn); }
+.pill {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0 8px;
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+.detail-cell {
+  padding: 0;
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 24%);
+}
+.detail {
+  padding: 20px 30px 24px;
+  border-bottom: 1px solid var(--line);
+}
+.config-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 18px;
+}
+.config-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 26px;
+  border: 1px solid color-mix(in oklch, var(--line), transparent 16%);
+  border-radius: 999px;
+  padding: 4px 9px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.2;
+}
+.config-chip b {
+  color: var(--text);
+  font-weight: 560;
+}
+.detail-kpis {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  border-bottom: 1px solid var(--line);
+  margin: -2px 0 18px;
+}
+.detail-kpi {
+  padding: 0 18px 16px 0;
+  min-width: 0;
+}
+.detail-kpi span {
+  display: block;
+  color: var(--soft);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+}
+.detail-kpi b {
+  display: block;
+  margin-top: 7px;
+  font-size: 18px;
+  font-weight: 680;
+  font-variant-numeric: tabular-nums;
+}
+.detail h3 {
+  margin: 0 0 14px;
+  font-size: 13px;
+  color: var(--muted);
+  font-weight: 580;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.eval-list {
+  display: grid;
+  max-height: 430px;
+  overflow: auto;
+  padding-right: 4px;
+}
+.eval-grid-head,
+.eval-item {
+  display: grid;
+  grid-template-columns: 76px minmax(220px, 1.1fr) minmax(260px, 1fr) 84px 86px 82px 54px;
+  column-gap: 16px;
+  align-items: baseline;
+  padding: 11px 0;
+  border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 35%);
+  font-size: 13px;
+}
+.eval-grid-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 24%);
+  color: var(--soft);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.eval-id {
+  display: flex;
+  align-items: center;
+  overflow-wrap: anywhere;
+  font-weight: 560;
+}
+.eval-id:not(:has(.chev-icon)) {
+  padding-left: 23px; /* 14px 图标 + 9px 间距,单轮 eval 没有展开箭头,靠 padding 补位对齐 */
+}
+.assertions-cell {
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  overflow-wrap: anywhere;
+  line-height: 1.25;
+}
+.assertions {
+  min-width: 0;
+  flex: 1;
+  color: color-mix(in oklch, var(--muted), var(--text) 6%);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+.assertions-link { cursor: pointer; }
+.assertions-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
+.copy-reason {
+  width: 26px;
+  height: 26px;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--muted);
+  font-family: inherit;
+  opacity: 0;
+  transition: opacity 0.1s, color 0.1s, border-color 0.1s, background 0.1s;
+}
+.copy-reason svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.eval-item:hover .copy-reason,
+.copy-reason:focus-visible,
+.copy-reason.is-copied { opacity: 1; }
+.copy-reason:hover { color: var(--text); border-color: var(--line-strong); }
+.copy-reason.is-copied {
+  color: var(--good);
+  border-color: color-mix(in oklch, var(--good), var(--line) 40%);
+  background: color-mix(in oklch, var(--good), transparent 88%);
+}
+.copy-all-errors {
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--panel);
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: color 0.12s, border-color 0.12s, background 0.12s;
+}
+.copy-all-errors svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.copy-all-errors:hover {
+  color: var(--text);
+  border-color: var(--line-strong);
+}
+.copy-all-errors.is-copied {
+  color: var(--good);
+  border-color: color-mix(in oklch, var(--good), var(--line) 40%);
+  background: color-mix(in oklch, var(--good), transparent 88%);
+}
+.raw-details {
+  margin-top: 16px;
+  border-top: 1px solid color-mix(in oklch, var(--line), transparent 15%);
+  padding-top: 14px;
+  color: color-mix(in oklch, var(--muted), var(--text) 6%);
+}
+.raw-details summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 560;
+  user-select: none;
+}
+.raw-details pre { margin-top: 12px; }
+.raw-note {
+  margin-left: 8px;
+  color: var(--soft);
+  font-weight: 400;
+}
+.reason-empty { color: var(--soft); }
+.ran-at { display: block; margin-top: 2px; color: var(--soft); font-size: 11px; font-variant-numeric: tabular-nums; }
+
+.attempt-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+
+.eval-item-clickable {
+  cursor: pointer;
+  user-select: none;
+}
+.eval-item-clickable:hover {
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 30%);
+}
+/* eval 折叠行:Run 列的 通过/总 轮次比 */
+.run-ratio { color: var(--soft); }
+/* 展开后的各轮 attempt:左侧加描边 + 轻微缩进,标识它们从属于上面的 eval 行 */
+.eval-attempts {
+  display: grid;
+  margin-left: 8px;
+  border-left: 2px solid color-mix(in oklch, var(--accent, var(--line)), transparent 55%);
+  background: color-mix(in oklch, var(--panel-2), transparent 55%);
+}
+.eval-attempts .eval-item {
+  padding-left: 12px;
+}
+.eval-attempts .eval-item:last-child {
+  border-bottom: none;
+}
+/* Modal */
+/* modal chrome(backdrop / panel / header / title / close / body / outcome chip)→
+   迁到 components/ui/dialog.tsx + components/ui/badge.tsx + AttemptModal 的 Tailwind utilities。 */
+
+/* No-source modal body: same visual language as the code view (checks + transcript). */
+.nosource { display: flex; flex-direction: column; gap: 14px; }
+.nosource-note {
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--muted);
+  padding: 9px 12px;
+  border: 1px dashed color-mix(in oklch, var(--line-strong), transparent 25%);
+  border-radius: 8px;
+  background: color-mix(in oklch, var(--panel), var(--line) 20%);
+}
+.nosource-block {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--panel-2);
+}
+.nosource-head {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--muted);
+  padding: 7px 12px;
+  background: color-mix(in oklch, var(--panel-2), var(--line) 35%);
+  border-bottom: 1px solid var(--line);
+}
+.nosource-block > .assert-detail,
+.nosource-block > .transcript { padding: 10px 14px; }
+.conv-loading { color: var(--soft); font-size: 12px; padding: 8px 0; }
+.trace-details {
+  border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 35%);
+  padding: 4px 0 10px;
+}
+.trace-details summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 12px;
+  user-select: none;
+  padding: 4px 0;
+}
+.trace-details summary:hover { color: var(--text); }
+.trace {
+  margin: 8px 0 4px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in oklch, var(--line), transparent 20%);
+  border-radius: 7px;
+  background: color-mix(in oklch, var(--panel), black 6%);
+}
+.trace-span-meta {
+  color: var(--soft);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 8px;
+}
+.span-d { border-radius: 4px; }
+.span-d > .trace-row { cursor: default; }
+details.span-d > summary.trace-row { cursor: pointer; list-style: none; }
+details.span-d > summary.trace-row::-webkit-details-marker { display: none; }
+details.span-d[open] > summary.trace-row { background: color-mix(in oklch, var(--panel-2), var(--panel) 10%); }
+details.span-d > summary.trace-row:hover { background: color-mix(in oklch, var(--panel-2), var(--panel) 20%); }
+.trace-row {
+  display: grid;
+  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 2fr) 56px;
+  column-gap: 12px;
+  align-items: center;
+  height: 22px;
+  font-size: 12px;
+}
+.span-attrs {
+  padding: 6px 8px 10px 16px;
+  margin: 2px 0 6px;
+  border-left: 2px solid color-mix(in oklch, var(--line-strong), transparent 30%);
+  font-size: 12px;
+}
+.attr-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; column-gap: 12px; padding: 2px 0; }
+.attr-k { color: var(--soft); overflow-wrap: anywhere; }
+.attr-v { color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+.attr-io { margin: 4px 0; }
+.attr-io .attr-k { display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
+.attr-pre {
+  margin: 0;
+  padding: 8px 10px;
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: color-mix(in oklch, var(--panel), black 8%);
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.trace-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: color-mix(in oklch, var(--muted), var(--text) 12%);
+}
+.trace-track {
+  position: relative;
+  height: 12px;
+  border-radius: 3px;
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 20%);
+}
+.trace-bar {
+  position: absolute;
+  top: 0;
+  height: 12px;
+  min-width: 2px;
+  border-radius: 3px;
+  background: var(--good);
+}
+.trace-bar.bad { background: var(--bad); }
+/* canonical SpanKind 配色:跨 agent 同义同色(model/tool/agent/turn);raw 名不参与着色。 */
+.trace-bar.k-model { background: oklch(0.72 0.13 250); }   /* 模型调用 — 蓝 */
+.trace-bar.k-tool  { background: oklch(0.74 0.14 150); }   /* 工具执行 — 绿 */
+.trace-bar.k-agent { background: oklch(0.74 0.15 300); }   /* 子 agent — 紫 */
+.trace-bar.k-turn  { background: oklch(0.78 0.13 90); }    /* 回合骨架 — 黄 */
+.trace-bar.k-other { background: color-mix(in oklch, var(--soft), var(--panel) 30%); } /* plumbing — 灰 */
+.trace-dur { color: var(--soft); text-align: right; }
+/* kind 小标:span label 前的语义角色徽标,和 bar 同色系。 */
+.kind-chip {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 0 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--panel);
+  vertical-align: middle;
+}
+.kind-chip.k-model { background: oklch(0.72 0.13 250); }
+.kind-chip.k-tool  { background: oklch(0.74 0.14 150); }
+.kind-chip.k-agent { background: oklch(0.74 0.15 300); }
+.kind-chip.k-turn  { background: oklch(0.78 0.13 90); }
+
+/* ── Claude-Code 风格 transcript:按事件顺序读「LLM 说了什么 / 调了什么工具」,不强调时间 ── */
+.transcript { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 6px; }
+.ts-msg {
+  padding: 8px 11px;
+  border-radius: 7px;
+  border: 1px solid color-mix(in oklch, var(--line), transparent 30%);
+  background: color-mix(in oklch, var(--panel), black 4%);
+}
+.ts-assistant { border-left: 2px solid var(--good); }
+.ts-user { border-left: 2px solid var(--line-strong); }
+.ts-input { border-left: 2px solid var(--warn); }
+.ts-role {
+  display: block;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--soft);
+  margin-bottom: 4px;
+}
+.ts-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text);
+  max-height: 360px;
+  overflow: auto;
+}
+.ts-think { font-size: 12px; }
+.ts-think > summary {
+  cursor: pointer;
+  color: var(--soft);
+  font-style: italic;
+  list-style: none;
+  padding: 2px 0;
+}
+.ts-think > summary::-webkit-details-marker { display: none; }
+.ts-think > summary::before { content: "\2726  "; }
+.ts-think-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--muted);
+  font-style: italic;
+  padding: 4px 0 6px 16px;
+  max-height: 280px;
+  overflow: auto;
+}
+.ts-tool-d {
+  border: 1px solid color-mix(in oklch, var(--line), transparent 30%);
+  border-radius: 7px;
+  background: color-mix(in oklch, var(--panel), black 6%);
+}
+.ts-tool-d > summary.ts-row {
+  list-style: none;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 8px minmax(110px, max-content) 1fr;
+  align-items: center;
+  column-gap: 9px;
+  padding: 7px 11px;
+}
+.ts-tool-d > summary.ts-row::-webkit-details-marker { display: none; }
+.ts-tool-d[open] > summary.ts-row { border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 40%); }
+.ts-tool-d > summary.ts-row:hover { background: color-mix(in oklch, var(--panel-2), var(--panel) 20%); }
+.ts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
+.ts-dot.bad { background: var(--bad); }
+.ts-dot.warn { background: var(--warn); }
+.ts-dot.pending { background: var(--soft); }
+.ts-tool {
+  font-weight: 600;
+  font-size: 12.5px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ts-preview { font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ts-body { padding: 8px 11px 10px; display: flex; flex-direction: column; gap: 8px; }
+.ts-field .ts-k {
+  display: block;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--soft);
+  margin-bottom: 3px;
+}
+.ts-error {
+  padding: 8px 11px;
+  border-radius: 7px;
+  border: 1px solid color-mix(in oklch, var(--bad), transparent 55%);
+  color: var(--bad);
+  font-size: 12.5px;
+}
+.ts-compaction {
+  text-align: center;
+  font-size: 11px;
+  color: var(--soft);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 0;
+}
+pre {
+  margin: 0;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: color-mix(in oklch, var(--panel), black 8%);
+  color: var(--muted);
+  overflow-wrap: anywhere;
+  overflow: auto;
+  max-height: 360px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.empty {
+  border: 1px dashed var(--line-strong);
+  border-radius: 8px;
+  padding: 40px 24px;
+  color: var(--muted);
+  text-align: center;
+  background: var(--panel);
+}
+a.brand { text-decoration: none; color: inherit; }
+a.brand:hover { opacity: 0.75; }
+.traces-entry {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  margin-bottom: 12px;
+  padding: 14px 18px;
+}
+.traces-entry-head {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+.traces-verdict { font-weight: 600; min-width: 52px; }
+.traces-exp { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.traces-dur { color: var(--soft); }
+@media (max-width: 760px) {
+  .topbar { padding: 0 20px; }
+  .lang-switch button { min-width: 40px; }
+  main { width: min(100vw - 28px, 1120px); padding-top: 42px; }
+  .hero { text-align: left; margin-left: 0; }
+  .meta { justify-content: flex-start; }
+  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .metric { grid-template-columns: 1fr; row-gap: 8px; }
+  .metric:nth-child(2) { border-right: 0; }
+  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
+  .section-head { align-items: stretch; flex-direction: column; }
+  .search { width: 100%; min-width: 0; }
+  .detail { padding: 18px 16px 20px; }
+  .config-strip { gap: 6px; }
+  .detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
+  .eval-grid-head,
+  .eval-item { grid-template-columns: 72px minmax(180px, 1fr) minmax(220px, 1fr) 76px 78px 72px 50px; }
+}
+
+/* ───────────────────────── Modal: error + code view (outcome chip → components/ui/badge.tsx) ───────────────────────── */
+.modal-error {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: var(--bad);
+  background: color-mix(in oklch, var(--bad), transparent 92%);
+  border: 1px solid color-mix(in oklch, var(--bad), var(--line) 50%);
+  border-radius: 8px;
+  padding: 8px 10px;
+  margin-bottom: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.codeview { display: flex; flex-direction: column; gap: 14px; }
+
+.code-file {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--panel-2);
+}
+.code-file-head {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--muted);
+  padding: 7px 12px;
+  background: color-mix(in oklch, var(--panel-2), var(--line) 35%);
+  border-bottom: 1px solid var(--line);
+}
+.code-lines {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12.5px;
+  line-height: 1.7;
+}
+
+.code-line {
+  display: grid;
+  grid-template-columns: 46px 22px minmax(0, 1fr) auto;
+  align-items: center;
+  border-left: 3px solid transparent;
+}
+.code-line.line-clickable { cursor: pointer; }
+.code-line.line-clickable:hover { background: color-mix(in oklch, var(--panel), var(--line) 45%); }
+.code-line.line-clickable:hover .gchev { color: var(--text); }
+.code-line.line-send { border-left-color: var(--line-strong); }
+.code-line.is-open { background: color-mix(in oklch, var(--panel), var(--line) 34%); }
+
+/* github-diff 式整行红绿:行底色 + 更深的行号格 + 实色左缘(过=绿/加,不过=红/减)。 */
+.code-line.line-pass {
+  background: color-mix(in oklch, var(--good), var(--panel) 74%);
+  border-left-color: var(--good);
+}
+.code-line.line-pass .ln {
+  background: color-mix(in oklch, var(--good), var(--panel) 52%);
+  color: color-mix(in oklch, var(--good), var(--text) 45%);
+}
+.code-line.line-fail {
+  background: color-mix(in oklch, var(--bad), var(--panel) 74%);
+  border-left-color: var(--bad);
+}
+.code-line.line-fail .ln {
+  background: color-mix(in oklch, var(--bad), var(--panel) 52%);
+  color: color-mix(in oklch, var(--bad), var(--text) 45%);
+}
+/* soft 断言没过阈值:不影响 outcome,视觉上跟真正的 gate 失败(红)区分开,用 warn(黄)。 */
+.code-line.line-warn {
+  background: color-mix(in oklch, var(--warn), var(--panel) 74%);
+  border-left-color: var(--warn);
+}
+.code-line.line-warn .ln {
+  background: color-mix(in oklch, var(--warn), var(--panel) 52%);
+  color: color-mix(in oklch, var(--warn), var(--text) 45%);
+}
+.code-line.line-pass.line-clickable:hover { background: color-mix(in oklch, var(--good), var(--panel) 64%); }
+.code-line.line-fail.line-clickable:hover { background: color-mix(in oklch, var(--bad), var(--panel) 64%); }
+.code-line.line-warn.line-clickable:hover { background: color-mix(in oklch, var(--warn), var(--panel) 64%); }
+
+.ln {
+  text-align: right;
+  font-size: 11px;
+  color: var(--soft);
+  user-select: none;
+  padding: 1px 8px 1px 0;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.gmark { display: inline-flex; align-items: center; justify-content: center; }
+.gchev { width: 12px; height: 12px; color: var(--muted); transition: transform 0.12s; }
+.gchev.is-open { transform: rotate(90deg); }
+.gstat { font-size: 13px; font-weight: 800; line-height: 1; }
+.gstat.good { color: var(--good); }
+.gstat.bad { color: var(--bad); }
+.gstat.warn { color: var(--warn); }
+
+.ctext { white-space: pre; overflow-x: auto; color: var(--text); padding-left: 8px; }
+.ctext::-webkit-scrollbar { height: 0; }
+.lbadges { padding-right: 12px; }
+
+.lbadges { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; justify-self: end; }
+.abadge {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 650;
+  padding: 0 6px;
+  border-radius: 5px;
+  border: 1px solid transparent;
+}
+.abadge.good { color: var(--good); border-color: color-mix(in oklch, var(--good), var(--line) 55%); background: color-mix(in oklch, var(--good), transparent 90%); }
+.abadge.bad { color: var(--bad); border-color: color-mix(in oklch, var(--bad), var(--line) 55%); background: color-mix(in oklch, var(--bad), transparent 90%); }
+.abadge.warn { color: var(--warn); border-color: color-mix(in oklch, var(--warn), var(--line) 55%); background: color-mix(in oklch, var(--warn), transparent 90%); }
+.abadge-th { opacity: 0.55; font-weight: 400; }
+
+/* 可点击行的显式提示:send 行一个 "reply" 药丸,断言行一个右侧展开箭头;hover 时变亮。 */
+.reply-hint {
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  color: var(--muted);
+  border: 1px solid color-mix(in oklch, var(--line-strong), transparent 12%);
+  border-radius: 5px;
+  padding: 1px 7px;
+  background: color-mix(in oklch, var(--panel), var(--line) 28%);
+  transition: color 0.12s, border-color 0.12s, background 0.12s;
+}
+.code-line.line-clickable:hover .reply-hint {
+  color: var(--text);
+  border-color: var(--line-strong);
+  background: color-mix(in oklch, var(--panel), var(--line) 52%);
+}
+.line-chev {
+  width: 14px;
+  height: 14px;
+  color: var(--soft);
+  transition: transform 0.12s, color 0.12s;
+}
+.line-chev.is-open { transform: rotate(90deg); }
+.code-line.line-clickable:hover .line-chev { color: var(--text); }
+
+.line-detail {
+  font-family: var(--sans, -apple-system, system-ui, "Segoe UI", sans-serif);
+  white-space: normal;
+  padding: 10px 16px 12px 60px;
+  background: color-mix(in oklch, var(--panel), var(--line) 22%);
+  border-left: 3px solid var(--line-strong);
+  font-size: 12.5px;
+}
+.reply-panel { display: flex; flex-direction: column; gap: 9px; }
+.reply-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--good); display: block; margin-bottom: 2px; }
+.reply-text { color: var(--text); white-space: pre-wrap; word-break: break-word; }
+.reply-think { font-size: 12px; color: var(--muted); }
+.reply-think summary { cursor: pointer; user-select: none; }
+.reply-think-text { white-space: pre-wrap; color: var(--soft); margin-top: 4px; padding-left: 4px; }
+.reply-tool { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); display: flex; gap: 8px; flex-wrap: wrap; }
+.reply-tool-name { color: var(--warn); }
+.reply-tool-out { color: var(--muted); }
+.reply-err { color: var(--bad); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.reply-empty { color: var(--soft); }
+
+.assert-detail { display: flex; flex-direction: column; gap: 9px; }
+.assert-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
+.assert-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
+.assert-sev { font-size: 10px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.04em; }
+.assert-score { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
+.assert-reason { grid-column: 1 / -1; color: var(--muted); white-space: pre-wrap; font-size: 12px; }
+
+/* 可观测性:裁判看到的材料(默认折叠,展开排查「为什么是这个分」)。 */
+.assert-evidence { grid-column: 1 / -1; margin-top: 2px; }
+.assert-evidence > summary {
+  cursor: pointer;
+  user-select: none;
+  font-size: 11px;
+  color: var(--soft);
+  letter-spacing: 0.02em;
+}
+.assert-evidence > summary:hover { color: var(--text); }
+.assert-evidence-pre {
+  margin: 6px 0 0;
+  padding: 8px 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: color-mix(in oklch, var(--panel), var(--line) 24%);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.code-orphans { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
+.code-orphans-head { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
+
+/* lightweight TS syntax tokens */
+.tok-comment { color: var(--soft); font-style: italic; }
+.tok-str { color: light-dark(#0a7d3c, #7ee787); }
+.tok-kw { color: light-dark(#9333ea, #c792ea); }
+.tok-num { color: light-dark(#b25000, #f0a36b); }
+.tok-fn { color: light-dark(#0b62d6, #82aaff); }