From 6922614148ff1003f5ac91a9d3d3277316201df0 Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Thu, 22 Oct 2026 03:55:04 -0400
Subject: [PATCH] fix(ui): apply theme surfaces to team run details

---
 mateclaw-ui/src/assets/main.css                        | 5 +++++
 mateclaw-ui/src/components/team-run/TeamRunRuntime.vue | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/mateclaw-ui/src/assets/main.css b/mateclaw-ui/src/assets/main.css
index 9ca8b3aa..ddc12cde 100644
--- a/mateclaw-ui/src/assets/main.css
+++ b/mateclaw-ui/src/assets/main.css
@@ -51,6 +51,11 @@
   --mc-panel-bottom: rgba(255, 252, 248, 0.9);
   --mc-panel-raised: rgba(255, 255, 255, 0.86);
 
+  /* Team Run surfaces follow the active theme, including opaque reading areas. */
+  --mc-team-run-reading-bg: var(--mc-bg-elevated);
+  --mc-team-run-glass-bg: var(--mc-panel-top);
+  --mc-team-run-status-bg: var(--mc-bg-sunken);
+
   /* borders */
   --mc-border: #d9cec2;
   --mc-border-light: #ebe3db;
diff --git a/mateclaw-ui/src/components/team-run/TeamRunRuntime.vue b/mateclaw-ui/src/components/team-run/TeamRunRuntime.vue
index b6ae595f..0f936010 100644
--- a/mateclaw-ui/src/components/team-run/TeamRunRuntime.vue
+++ b/mateclaw-ui/src/components/team-run/TeamRunRuntime.vue
@@ -1,3 +1,3 @@
 <script setup lang="ts">import { computed } from 'vue'; import { useI18n } from 'vue-i18n'; import type { TeamRun } from '@/api'; const props=defineProps<{run:TeamRun}>(); const {t}=useI18n(); const state=computed(()=>props.run.liveness?.state ?? (['completed','partial','failed','cancelled'].includes(props.run.status)?'terminal':'quiet'))</script>
 <template><section data-team-run-runtime class="run-runtime" :class="`is-${state}`"><span class="run-runtime__dot" :class="{'is-loading':state==='live'}"/><strong>{{ t('teamRuns.runtime') }}</strong><span>{{ t(`teamRuns.liveness.${state}`) }}</span><time v-if="run.liveness?.lastActivityAt">{{ run.liveness.lastActivityAt }}</time></section></template>
-<style scoped>.run-runtime{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 10px;background:var(--mc-team-run-status-bg,rgba(255,255,255,.82));font-size:11px;color:var(--mc-text-tertiary)}.run-runtime__dot{width:7px;height:7px;border-radius:50%;background:#94a3b8}.run-runtime.is-live .run-runtime__dot{background:#1b8f68}.run-runtime.is-stalled .run-runtime__dot{background:#c13d3d}.run-runtime time{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-reduced-motion:reduce){.run-runtime__dot{animation:none!important}}</style>
+<style scoped>.run-runtime{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 10px;background:var(--mc-team-run-status-bg,rgba(255,255,255,.82));font-size:11px;color:var(--mc-text-secondary)}.run-runtime__dot{width:7px;height:7px;border-radius:50%;background:#94a3b8}.run-runtime.is-live .run-runtime__dot{background:#1b8f68}.run-runtime.is-stalled .run-runtime__dot{background:#c13d3d}.run-runtime time{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-reduced-motion:reduce){.run-runtime__dot{animation:none!important}}</style>