openclaw-openagent 1.0.9 → 1.0.11

package/src/plugin-ui/modules/remote-agent/styles.js

@@ -6,7 +6,8 @@
 // 注意：不使用 .chat-tool-card 类名，避免 scanner.js 误匹配。
 
 (function _clInjectRemoteAgentStyles() {
-  if (document.getElementById('cl-remote-agent-styles')) return;
+  var oldStyle = document.getElementById('cl-remote-agent-styles');
+  if (oldStyle) oldStyle.remove();
   var style = document.createElement('style');
   style.id = 'cl-remote-agent-styles';
   style.textContent = [
@@ -69,7 +70,20 @@
     '  border: 0 !important;',
     '  background: transparent !important;',
     '  box-shadow: none !important;',
-    '  padding-top: 0 !important;',
+    '  padding: 10px 0 !important;',
+    '  width: 100%;',
+    '  max-width: 100% !important;',
+    '  overflow: hidden !important;',
+    '}',
+    '.chat-tool-msg-collapse.chat-tool-msg-collapse--manual.is-open:has(.cl-remote-agent-card) {',
+    '  margin-left: 0 !important;',
+    '}',
+    // ── 外层活动组容器 ──
+    '.chat-activity-group__body:has(.cl-remote-agent-card) {',
+    '  border-radius: 14px;',
+    '  border: 1px solid #E5E5EA;',
+    '  background: #F8F9FA;',
+    '  margin: 8px;',
     '  padding-bottom: 0 !important;',
     '}',
     '.chat-bubble:has(.cl-remote-agent-card) > .chat-text,',
@@ -100,567 +114,578 @@
     '.cl-remote-agent-card {',
     '  max-height: none;',
     '  overflow: visible;',
-    '  width: fit-content;',
+    '  width: 100%;',
     '  max-width: 100%;',
-    '  border: 1px solid color-mix(in srgb, var(--border, rgba(47,47,51,0.10)) 85%, transparent);',
-    '  border-radius: var(--cl-native-shell-radius, 14px);',
-    '  padding: var(--cl-native-shell-padding, 8px);',
-    '  background: var(--card, #fff);',
+    '  border: 1px solid rgba(0,0,0,0.05);',
+    '  border-radius: 14px;',
+    '  background: #fff;',
     '  display: flex;',
     '  flex-direction: column;',
-    '  gap: var(--cl-native-shell-gap, 4px);',
+    '  gap: 10px;',
     '  box-sizing: border-box;',
     '}',
 
     // ── 顶部 OpenAgent 标题条 ──
     '.cl-openagent-header {',
-    '  width: fit-content;',
     '  max-width: 100%;',
-    '  min-height: var(--cl-native-summary-min-height, 34px);',
     '  display: flex;',
     '  align-items: center;',
-    '  gap: var(--cl-native-summary-gap, 6px);',
-    '  padding: var(--cl-native-summary-padding, 6px 10px);',
+    '  gap: 6px;',
+    '  height: 34px;',
+    '  padding: 6px 0;',
+    '  border-radius: 10px;',
     '  box-sizing: border-box;',
-    '  border: 1px solid color-mix(in srgb, var(--border, rgba(47,47,51,0.10)) 85%, transparent);',
-    '  border-radius: var(--cl-native-summary-radius, 10px);',
-    '  background: color-mix(in srgb, var(--bg-hover, #F4F5F7) 50%, transparent);',
-    '  color: var(--text, #2F2F33);',
+    '  border: none;',
+    '  background: transparent;',
     '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: var(--cl-native-summary-font-size, 13px);',
-    '  line-height: var(--cl-native-summary-line-height, 1.2);',
     '}',
-    '.cl-openagent-header-caret {',
-    '  width: 6px;',
-    '  color: var(--muted, rgba(47,47,51,0.45));',
-    '  font-size: 8px;',
-    '  line-height: 1;',
-    '  flex: 0 0 auto;',
+    '.cl-openagent-header:hover {',
     '}',
-    '.cl-openagent-header-icon {',
-    '  position: relative;',
+    '/* Output mode (Figma 373:12082) */',
+    '.cl-openagent-header--output,',
+    '.cl-exec-v2 .cl-openagent-header--output {',
+    '  border-radius: 10px 10px 0 0 !important;',
+    '  border: 1px solid rgba(229, 229, 234, 0.75) !important;',
+    '  background: linear-gradient(90deg, rgba(220, 38, 38, 0.09) 0%, rgba(220, 38, 38, 0) 34%),',
+    '              linear-gradient(90deg, rgb(253, 253, 254) 0%, rgb(253, 253, 254) 100%) !important;',
+    '  box-shadow: 0px 8px 11px rgba(0, 0, 0, 0.12);',
+    '  padding: 8px 6px !important;',
+    '}',
+    '.cl-openagent-header--output .cl-openagent-agent,',
+    '.cl-exec-v2 .cl-openagent-header--output .cl-openagent-agent {',
+    '  display: none;',
+    '}',
+    '.cl-openagent-header--output:hover,',
+    '.cl-exec-v2 .cl-openagent-header--output:hover {',
+    '  border-color: rgba(0,0,0,0.1);',
+    '}',
+    '.cl-openagent-expand-icon {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  justify-content: center;',
     '  width: 15px;',
-    '  height: 14px;',
-    '  flex: 0 0 15px;',
+    '  height: 15px;',
+    '  flex-shrink: 0;',
+    '  transition: transform 0.2s ease;',
     '}',
-    '.cl-openagent-header-icon::before,',
-    '.cl-openagent-header-icon::after {',
-    '  content: "";',
-    '  position: absolute;',
-    '  width: 8px;',
-    '  height: 8px;',
-    '  border: 1.5px solid #10BDEB;',
-    '  border-radius: 2px;',
-    '  box-sizing: border-box;',
+    '.cl-openagent-expand-icon.cl-openagent-expanded {',
+    '  transform: rotate(180deg);',
+    '}',
+    '.cl-openagent-badge {',
+    '  width: 14px;',
+    '  height: 14px;',
+    '  border-radius: 14px;',
+    '  background: url(./icon.png) center/cover no-repeat;',
+    '  flex-shrink: 0;',
+    '  overflow: hidden;',
     '}',
-    '.cl-openagent-header-icon::before { left: 2px; top: 5px; }',
-    '.cl-openagent-header-icon::after { left: 5px; top: 2px; }',
-    '.cl-openagent-header-title {',
+    '.cl-openagent-text-row {',
     '  display: flex;',
     '  align-items: center;',
-    '  gap: 3px;',
+    '  gap: 6px;',
     '  min-width: 0;',
+    '  line-height: 1.32;',
+    '}',
+    '.cl-openagent-label {',
+    '  font-size: 12px;',
+    '  font-weight: 500;',
+    '  color: #333;',
     '  white-space: nowrap;',
     '}',
-    '.cl-openagent-header-primary {',
-    '  color: var(--text, #2F2F33);',
-    '  font-weight: 600;',
-    '  overflow: hidden;',
-    '  text-overflow: ellipsis;',
+    '.cl-openagent-agent {',
+    '  font-size: 12px;',
+    '  font-weight: 500;',
+    '  color: #333;',
+    '  white-space: nowrap;',
     '}',
-    '.cl-openagent-header-secondary {',
-    '  color: var(--muted, rgba(47,47,51,0.40));',
+    '.cl-openagent-status {',
+    '  font-size: 11px;',
     '  font-weight: 400;',
+    '  color: #666;',
+    '  white-space: nowrap;',
     '}',
-    // ── Figma 内容框 ──
+    // ── Execution detail card (Figma 346:181) ──
     '.cl-thought-chain-content {',
-    '  width: 100%;',
-    '  min-height: 0;',
-    '  box-sizing: border-box;',
-    '  border: 1px solid color-mix(in srgb, var(--border, rgba(0,0,0,0.04)) 60%, transparent);',
-    '  border-radius: 8px;',
-    '  background: var(--card, #fff);',
-    '  padding: 8px;',
     '  display: flex;',
     '  flex-direction: column;',
-    '  align-items: flex-start;',
-    '  gap: 12px;',
-    '}',
-    // ── 共享展开态宿主清理 ──
-    'details.chat-tools-collapse:has(.cl-thought-chain-content--execution),',
-    'details.chat-tools-collapse:has(.cl-output-result),',
-    'details.chat-tool-msg-collapse:has(.cl-thought-chain-content--execution),',
-    'details.chat-tool-msg-collapse:has(.cl-output-result),',
-    '.chat-tools-collapse:has(.cl-thought-chain-content--execution),',
-    '.chat-tools-collapse:has(.cl-output-result),',
-    '.chat-tool-msg-collapse:has(.cl-thought-chain-content--execution),',
-    '.chat-tool-msg-collapse:has(.cl-output-result) {',
-    '  max-width: 100% !important;',
-    '  display: block !important;',
-    '  box-sizing: border-box !important;',
+    '  gap: 16px;',
     '}',
-    // ── 共享展开态 card 基础 ──
-    '.cl-remote-agent-card:has(.cl-thought-chain-content--execution),',
-    '.cl-remote-agent-card:has(.cl-output-result) {',
-    '  /* padding/radius/gap 继承 base card，不覆盖 */',
+    '.cl-exec-detail-card {',
+    '  padding: 8px 16px 8px 12px;',
+    '  border-radius: 8px;',
+    '  background: #f8f8f8 url(./bg.png) no-repeat;',
+    '  background-size: 100% 100%;',
+    '  background-position: center;',
+    '  width: 460px;',
+    '  max-width: 100%;',
     '  box-sizing: border-box;',
     '}',
-    '.cl-remote-agent-card:has(.cl-thought-chain-content--execution:not(.cl-content-collapsed)) {',
-    '  width: 514px !important;',
-    '  max-width: 100%;',
+    '.cl-exec-detail-row {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 16px;',
     '}',
-    '.cl-remote-agent-card:has(.cl-thought-chain-content:not(.cl-content-collapsed)) .cl-openagent-header {',
-    '  width: 100%;',
+    '.cl-exec-agent-avatar {',
+    '  width: 68px;',
+    '  height: 68px;',
+    '  border-radius: 50%;',
+    '  object-fit: cover;',
+    '  flex-shrink: 0;',
     '}',
-    // ── 展开内容宽度：外层 card 保持 fit-content，content 出现时自然撑开 ──
-    '.cl-thought-chain-content--execution {',
-    '  width: 100%;',
+    '.cl-exec-detail-info {',
+    '  display: flex;',
+    '  flex-direction: column;',
+    '  gap: 6px;',
+    '  flex: 1;',
+    '  min-width: 0;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-thought-chain-content {',
-    '  width: min(900px, 100%);',
+    '.cl-exec-name-row {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  justify-content: space-between;',
+    '  gap: 8px;',
+    '  margin-bottom: 6px;',
     '}',
-    // ── output 专用 content 样式 ──
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-thought-chain-content {',
-    '  border: 1.5px solid color-mix(in srgb, var(--border, rgba(0,0,0,0.06)) 60%, transparent);',
-    '  border-radius: 12px;',
-    '  padding: 12px;',
-    '  gap: 12px;',
+    '.cl-exec-agent-name {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 17px;',
+    '  font-weight: 500;',
+    '  color: #000;',
+    '  margin: 0;',
+    '  line-height: 1;',
     '}',
-    // ── Figma Agent pill（297:696）──
-    '.cl-agent-pill {',
-    '  display: inline-flex;',
+    '.cl-exec-star-badge {',
+    '  display: flex;',
     '  align-items: center;',
-    '  justify-content: center;',
-    '  gap: 9px;',
-    '  height: 42px;',
-    '  min-height: 42px;',
-    '  padding: 0 15px;',
-    '  border: 0;',
-    '  border-radius: 9px;',
-    '  background: #FBFBFB;',
-    '  box-shadow: inset 0 0 0 1.2px rgba(47,47,51,0.06);',
-    '  width: fit-content;',
-    '  box-sizing: border-box;',
+    '  gap: 2px;',
+    '  padding: 2px 10px 2px 8px;',
+    '  border-radius: 30px;',
+    '  background: #ebebeb;',
+    '  flex-shrink: 0;',
+    '}',
+    ,
+    ,
+    ,
+    '.cl-exec-star-count {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 11px;',
+    '  font-weight: 500;',
+    '  color: #555;',
+    '  white-space: nowrap;',
+    '}',
+    '.cl-exec-agent-bio {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 14px;',
+    '  font-weight: 400;',
+    '  color: #555;',
     '  margin: 0;',
+    '  line-height: 1;',
     '}',
-    '.cl-agent-pill-avatar {',
-    '  width: 24px;',
-    '  height: 24px;',
-    '  border-radius: 50%;',
-    '  object-fit: cover;',
-    '  flex: 0 0 24px;',
-    '  border: 0.6px solid rgba(47,47,51,0.20);',
-    '  box-sizing: border-box;',
+
+    // ── Progress text (Figma 346:253) ──
+    '.cl-thought-chain-content.cl-content-collapsed {',
+    '  display: none;',
     '}',
-    '.cl-agent-pill-name {',
-    '  display: inline-flex;',
+    ,
+        '.cl-exec-progress-row {',
+    '  display: flex;',
     '  align-items: center;',
+    '  gap: 2px;',
+    '}',
+    '.cl-exec-progress-text {',
     '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 15px;',
-    '  color: rgba(47,47,51,0.90);',
+    '  font-size: 14px;',
+    '  font-weight: 400;',
     '  line-height: 1.2;',
-    '  letter-spacing: 0;',
+    '  margin: 0;',
     '  white-space: nowrap;',
-    '}',
-    '.cl-agent-pill-at { font-weight: 600; }',
-    '.cl-agent-pill-label { font-weight: 400; }',
-    '.cl-thought-chain-pill-slot {',
+    '  background-image: linear-gradient(90deg, #555 0%, #555 36%, #eee 55%, #555 77%, #555 100%);',
+    '  background-size: 200% 100%;',
+    '  -webkit-background-clip: text;',
+    '  background-clip: text;',
+    '  -webkit-text-fill-color: transparent;',
+    '  animation: cl-progress-shimmer 2.5s ease-in-out infinite;',
+    '}',
+    '.cl-exec-progress-arrow {',
     '  display: flex;',
     '  align-items: center;',
-    '  width: 100%;',
+    '  flex-shrink: 0;',
     '}',
-    '.cl-thought-chain-divider {',
-    '  display: none;',
+
+
+    // ── Progress shimmer keyframes ──
+    '@keyframes cl-progress-shimmer {',
+    '  0% { background-position: 200% 0; }',
+    '  100% { background-position: -200% 0; }',
     '}',
-    '.cl-thought-chain-content--execution {',
-    '  border: 1.5px solid rgba(0,0,0,0.04);',
+
+    // ── Output card（Figma 160:6681） ──
+    '.cl-output-card {',
+    '  background: #fff !important;',
+    '  border: 1.2px solid rgba(47,47,51,0.1) !important;',
+    '  border-radius: 24px !important;',
+    '  padding: 10px 15px !important;',
+    '  gap: 10px !important;',
+    '}',
+    '.cl-output-card > .cl-thought-chain-content {',
+    '  background: #fff;',
+    '  border: 1px solid #f4f4f4;',
     '  border-radius: 12px;',
-    '  padding: 12px;',
-    '  gap: 18px;',
-    '}',
-    '.cl-thought-chain-content--execution .cl-agent-pill {',
-    '  gap: 9px;',
-    '  height: 42px;',
-    '  min-height: 42px;',
-    '  padding: 0 15px;',
-    '  border: 0;',
-    '  border-radius: 9px;',
-    '  box-shadow: inset 0 0 0 1.2px rgba(47,47,51,0.06);',
-    '}',
-    '.cl-thought-chain-content--execution .cl-agent-pill-avatar {',
-    '  width: 24px;',
-    '  height: 24px;',
-    '  flex-basis: 24px;',
+    '  padding: 20px 30px;',
+    '  overflow: hidden;',
+    '  max-width: 100%;',
+    '  box-sizing: border-box;',
     '}',
-    '.cl-thought-chain-content--execution .cl-agent-pill-name {',
-    '  font-size: 15px;',
-    '  line-height: 1.2;',
+    '.cl-output-card > .cl-thought-chain-content * {',
+    '  max-width: 100%;',
+    '  box-sizing: border-box;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-agent-pill {',
-    '  gap: 9px;',
-    '  height: 42px;',
-    '  min-height: 42px;',
-    '  padding: 0 15px;',
-    '  border: 0;',
-    '  border-radius: 9px;',
-    '  box-shadow: inset 0 0 0 1.2px rgba(47,47,51,0.06);',
+    '.cl-output-card > .cl-thought-chain-content pre,',
+    '.cl-output-card > .cl-thought-chain-content code {',
+    '  overflow-x: auto;',
+    '  white-space: pre-wrap;',
+    '  word-break: break-all;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-agent-pill-avatar {',
-    '  width: 24px;',
-    '  height: 24px;',
-    '  flex-basis: 24px;',
+    // V2 output card：统一 border/padding 与 execution card 一致
+    '.cl-exec-v2.cl-output-card {',
+    '  border: 1px solid rgba(0,0,0,0.05) !important;',
+    '  border-radius: 14px !important;',
+    '  padding: 0 !important;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-agent-pill-name {',
-    '  font-size: 15px;',
-    '  line-height: 1.2;',
+    // V2 output card：去掉 content 区多余的内边距，detail card 自带动间距
+    '.cl-exec-v2.cl-output-card > .cl-thought-chain-content {',
+    '  background: transparent;',
+    '  border: none;',
+    '  border-radius: 0;',
+    '  padding: 0 14px !important;',
     '}',
 
-    // ── Figma 思考步骤（297:716）──
-    '.cl-thought-chain-steps-section {',
-    '  width: 100%;',
-    '  display: flex;',
-    '  flex-direction: column;',
-    '  align-items: flex-start;',
-    '  gap: 4px;',
-    '  padding: 4px 0;',
-    '  box-sizing: border-box;',
+    // ── Collapsed state（Figma 145:3466） ──
+    '.cl-remote-agent-card:has(.cl-content-collapsed) {',
+    '  padding: 0 !important;',
     '}',
-    '.cl-tools-collapse-header {',
+    // ── Output card Footer（Figma 131:2091） ──
+    '.cl-output-footer {',
     '  display: flex;',
     '  align-items: center;',
-    '  gap: 0;',
-    '  padding: 0;',
-    '  cursor: default;',
-    '  user-select: none;',
-    '}',
-    '.cl-tools-collapse-header:hover { opacity: 1; }',
-    '.cl-tools-collapse-header-icon { display: none; }',
-    '.cl-tools-collapse-header-title {',
+    '  gap: 4px;',
     '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 10px;',
-    '  font-weight: 600;',
-    '  line-height: 1.2;',
-    '  color: rgba(47,47,51,0.90);',
+    '  font-size: 14px;',
+    '  color: #999;',
     '}',
-    '.cl-tools-collapse-body {',
-    '  position: relative;',
+    '.cl-output-footer-text {',
+    '  white-space: nowrap;',
+    '}',
+    '.cl-output-footer-star {',
     '  display: flex;',
-    '  flex-direction: column;',
-    '  gap: 4px;',
-    '  width: 100%;',
-    '  overflow: hidden;',
-    '  padding: 0;',
-    '  transition: max-height 0.25s ease, opacity 0.2s ease;',
+    '  align-items: center;',
+    '  flex-shrink: 0;',
     '}',
-    '.cl-tools-collapse-body::before {',
-    '  content: "";',
-    '  position: absolute;',
-    '  left: 7px;',
-    '  top: 14px;',
-    '  bottom: 14px;',
-    '  width: 1px;',
-    '  background: rgba(47,47,51,0.10);',
-    '}',
-    '.cl-tools-collapse-body.cl-expanded { max-height: 2000px; opacity: 1; }',
-    '.cl-tools-collapse-body.cl-collapsed { max-height: 0; opacity: 0; }',
-    '.cl-tools-collapse-step {',
+    '.cl-output-footer-count {',
+    '  font-weight: 500;',
+    '  white-space: nowrap;',
+    '}',
+
+/* ── Sidebar 面板（Figma 145:5712） ── */
+    '.chat-sidebar {',
+    '  background: #fff !important;',
+    '  border: 1px solid rgba(0,0,0,0.05) !important;',
+    '  border-radius: 14px !important;',
+    '  padding: 16px 20px !important;',
+    '  box-sizing: border-box !important;',
+    '  display: flex !important;',
+    '  flex-direction: column !important;',
+    '  gap: 16px !important;',
+    '}',
+    '.chat-sidebar > .sidebar-panel {',
+    '  display: flex !important;',
+    '  flex-direction: column !important;',
+    '  gap: 16px !important;',
+    '  width: 100% !important;',
+    '  background: transparent !important;',
+    '}',
+    '.chat-sidebar .sidebar-header {',
+    '  display: flex !important;',
+    '  align-items: center !important;',
+    '  justify-content: space-between !important;',
+    '  padding: 6px 0 !important;',
+    '  border-radius: 10px !important;',
+    '  width: 100% !important;',
+    '  border: none !important;',
+    '  background: transparent !important;',
+    '}',
+    '.chat-sidebar .sidebar-title {',
+    '  font-family: "PingFang SC", sans-serif !important;',
+    '  font-weight: 500 !important;',
+    '  font-size: 18px !important;',
+    '  color: #333 !important;',
+    '  line-height: 1.32 !important;',
+    '}',
+    '.chat-sidebar .sidebar-header button {',
+    '  width: 16px !important;',
+    '  height: 16px !important;',
+    '  padding: 0 !important;',
+    '  border: none !important;',
+    '  background: transparent !important;',
+    '  cursor: pointer !important;',
+    '  flex-shrink: 0 !important;',
+    '}',
+    '.chat-sidebar .sidebar-content {',
+    '  font-family: "PingFang SC", sans-serif !important;',
+    '  font-size: 14px !important;',
+    '  font-weight: 400 !important;',
+    '  line-height: 1.8 !important;',
+    '  color: #333 !important;',
+    '  width: 100% !important;',
+    '  padding: 0 !important;',
+    '}',
+    '.chat-sidebar .sidebar-markdown {',
+    '  font-family: "PingFang SC", sans-serif !important;',
+    '  font-size: 14px !important;',
+    '  font-weight: 400 !important;',
+    '  line-height: 1.8 !important;',
+    '  color: #333 !important;',
+    '  background: transparent !important;',
+    '  border: none !important;',
+    '  padding: 0 !important;',
+    '}',
+    // 隐藏宿主 sidebar 自带的 "Rendered Markdown / View Raw Text" 工具栏
+    '.chat-sidebar .sidebar-markdown-shell__toolbar {',
+    '  display: none !important;',
+    '}',
+    // ═══════════════════════════════════════════════════════════════
+    // V2 执行卡片样式（2026.6.9+ 新版 UI）
+    // 所有 V2 样式在 .cl-exec-v2 下隔离，不影响旧版
+    // ═══════════════════════════════════════════════════════════════
+
+    // ── V2 容器 ──
+    '.cl-exec-v2 {',
     '  position: relative;',
-    '  display: block;',
-    '  width: 100%;',
-    '  padding: 0;',
-    '  z-index: 1;',
     '}',
-    '.cl-tools-collapse-step-row {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  gap: 8px;',
-    '  min-height: 14px;',
+
+    // ── V2 Header（Figma 371:6987 — 红晕渐变背景 + 独立边框）──
+    '.cl-exec-v2 .cl-openagent-header-v2 {',
+    '  background: linear-gradient(90deg, rgba(220, 38, 38, 0.09) 0%, rgba(220, 38, 38, 0) 34%),',
+    '              linear-gradient(90deg, rgb(253, 253, 254) 0%, rgb(253, 253, 254) 100%) !important;',
+    '  border-bottom: 1px solid rgba(229, 229, 234, 0.75) !important;',
+    '  padding: 8px 6px !important;',
+    '  margin: 0 !important;',
+    '  border-radius: 10px 10px 0 0;',
+    '  height: auto !important;',
+    '  min-height: auto !important;',
+    '  box-sizing: border-box;',
     '}',
-    '.cl-tools-collapse-step-icon {',
-    '  width: 14px;',
-    '  height: 14px;',
-    '  flex: 0 0 14px;',
-    '  display: flex;',
-    '  align-items: center;',
-    '  justify-content: center;',
-    '  background: #fff;',
+    '.cl-exec-v2 .cl-openagent-header-v2:hover {',
+    '  background: linear-gradient(90deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0) 34%),',
+    '              linear-gradient(90deg, rgb(250, 250, 251) 0%, rgb(250, 250, 251) 100%) !important;',
     '}',
-    '.cl-tools-collapse-step-dot {',
-    '  width: 5px;',
-    '  height: 5px;',
+
+    // ── V2 圆形灰色头像（替代小徽章）──
+    '.cl-exec-v2 .cl-openagent-avatar-v2 {',
+    '  display: inline-block;',
+    '  width: 24px;',
+    '  height: 24px;',
     '  border-radius: 50%;',
-    '  background: #D9D9D9;',
-    '  animation: none;',
+    '  background: #d0d0d0;',
+    '  flex-shrink: 0;',
+    '  margin-right: 4px;',
     '}',
-    '.cl-tools-collapse-step-dot::before,',
-    '.cl-tools-collapse-step-dot::after,',
-    '.cl-tools-collapse-step-dot span {',
-    '  content: none;',
-    '  display: none;',
+
+    // ── V2 隐藏旧版 OASN 小徽章和 @agentName ──
+    '.cl-exec-v2 .cl-openagent-badge,',
+    '.cl-exec-v2 .cl-openagent-agent {',
+    '  display: none !important;',
+    '}',
+    // ── V2 隐藏步骤标题栏（▼ + "思考中..."），保留进度文字行 ──
+    '.cl-exec-v2 .cl-tools-collapse-header-v2 {',
+    '  display: none !important;',
     '}',
-    '.cl-tools-collapse-step-check {',
+
+    // ── V2 Detail Card（大头像 + 右置星级 + 网格点背景）──
+    '.cl-exec-v2 .cl-exec-detail-card-v2 {',
+    '  max-width: 488px !important;',
+    '  width: 100% !important;',
+    '  padding: 8px 16px 8px 12px !important;',
+    '  padding-right: 90px !important;',
+    '  border-radius: 12px !important;',
+    '  background: #f7f7f8 !important;',
+    '  margin: 12px 14px 14px 14px !important;',
+    '  margin-left: 0 !important;',
     '  position: relative;',
-    '  width: 14px;',
-    '  height: 14px;',
-    '  border-radius: 50%;',
-    '  background: #D9D9D9;',
+    '  overflow: hidden;',
+    '  box-sizing: border-box;',
     '}',
-    '.cl-tools-collapse-step-check::after {',
+    /* 四角网格点装饰 */
+    '.cl-exec-v2 .cl-exec-detail-card-v2::before,',
+    '.cl-exec-v2 .cl-exec-detail-card-v2::after {',
     '  content: "";',
     '  position: absolute;',
-    '  left: 4px;',
-    '  top: 3px;',
-    '  width: 4px;',
-    '  height: 7px;',
-    '  border: solid #fff;',
-    '  border-width: 0 1.3px 1.3px 0;',
-    '  transform: rotate(45deg);',
-    '}',
-    '.cl-tools-collapse-step-title {',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 9.5px;',
-    '  font-weight: 400;',
-    '  line-height: 1.32;',
-    '  color: rgba(47,47,51,0.40);',
-    '  white-space: nowrap;',
-    '  overflow: hidden;',
-    '  text-overflow: ellipsis;',
+    '  width: 40px;',
+    '  height: 40px;',
+    '  background-image: radial-gradient(circle, #ddd 1px, transparent 1px);',
+    '  background-size: 8px 8px;',
+    '  opacity: 0.5;',
     '}',
-    '.cl-tools-collapse-step-detail {',
-    '  margin: 2px 0 0 22px;',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 9px;',
-    '  line-height: 1.32;',
-    '  color: rgba(47,47,51,0.40);',
+    '.cl-exec-v2 .cl-exec-detail-card-v2::before {',
+    '  top: 8px;',
+    '  left: 8px;',
     '}',
-    '.cl-thought-chain-content--execution .cl-thought-chain-steps-section {',
-    '  gap: 6px;',
-    '  padding: 6px 0;',
+    '.cl-exec-v2 .cl-exec-detail-card-v2::after {',
+    '  bottom: 8px;',
+    '  right: 8px;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-header-title {',
-    '  font-size: 15px;',
-    '  line-height: 1.2;',
+
+    '.cl-exec-v2 .cl-exec-detail-row-v2 {',
+    '  display: flex;',
+    '  align-items: flex-start;',
+    '  gap: 16px;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-body {',
+
+    '.cl-exec-v2 .cl-exec-detail-info-v2 {',
+    '  display: flex;',
+    '  flex-direction: column;',
     '  gap: 6px;',
+    '  flex: 1;',
+    '  min-width: 0;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-body::before {',
-    '  left: 10px;',
-    '  top: 21px;',
-    '  bottom: 21px;',
-    '  width: 1px;',
-    '  background: #DBDBDB;',
-    '  transform: scaleX(0.3);',
-    '  transform-origin: left center;',
-    '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-row {',
-    '  gap: 12px;',
-    '  min-height: 21px;',
-    '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-icon {',
-    '  width: 21px;',
-    '  height: 21px;',
-    '  flex-basis: 21px;',
-    '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-dot {',
-    '  width: 6px;',
-    '  height: 6px;',
-    '  background: #DCDCDC;',
-    '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-check {',
-    '  width: 15px;',
-    '  height: 15px;',
-    '  background: #DCDCDC;',
-    '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-check::after {',
-    '  left: 4px;',
-    '  top: 2px;',
-    '  width: 5px;',
-    '  height: 8px;',
-    '  border-width: 0 1.4px 1.4px 0;',
+
+    // ── V2 大头像 80×80 ──
+    '.cl-exec-v2 .cl-exec-agent-avatar-v2 {',
+    '  width: 80px !important;',
+    '  height: 80px !important;',
+    '  border-radius: 16px !important;',
+    '  object-fit: cover;',
+    '  flex-shrink: 0;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-title {',
-    '  font-size: 14px;',
-    '  line-height: 1.32;',
+
+    // ── V2 名称 ~20px/600/黑色 ──
+    '.cl-exec-v2 .cl-exec-agent-name-v2 {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 20px !important;',
+    '  font-weight: 600 !important;',
+    '  color: #000 !important;',
+    '  margin: 0;',
+    '  line-height: 1.3;',
     '}',
-    '.cl-thought-chain-content--execution .cl-tools-collapse-step-detail {',
-    '  display: none;',
+
+    // ── V2 描述 ~14px/400/灰色 ──
+    '.cl-exec-v2 .cl-exec-agent-bio-v2 {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 14px !important;',
+    '  font-weight: 400;',
+    '  color: #888 !important;',
+    '  margin: 0;',
+    '  line-height: 1.4;',
     '}',
 
-    // ── output 等待渲染完成前，隐藏整张 result card 和宿主 shell ──
-    'details.chat-tools-collapse:has(.cl-output-card--pending),',
-    'details.chat-tool-msg-collapse:has(.cl-output-card--pending),',
-    '.chat-tools-collapse:has(.cl-output-card--pending),',
-    '.chat-tool-msg-collapse:has(.cl-output-card--pending) {',
-    '  display: none !important;',
+    // ── V2 星级右置到卡片右上角 ──
+    '.cl-exec-v2 .cl-exec-star-badge-v2 {',
+    '  position: absolute;',
+    '  right: 24px;',
+    '  top: 20px;',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 4px;',
+    '  padding: 4px 12px;',
+    '  border-radius: 30px;',
+    '  background: #ebebeb;',
+    '  z-index: 1;',
     '}',
-    '.cl-output-card--pending {',
-    '  display: none !important;',
+    '.cl-exec-v2 .cl-exec-star-count-v2 {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 13px;',
+    '  font-weight: 500;',
+    '  color: #555;',
+    '  white-space: nowrap;',
     '}',
 
-    // ── 结果展示区 ──
-    '.cl-output-result {',
-    '  margin-top: 4px;',
+    // ── V2 Progress Row（Figma 373:9765 — shimmer 渐变文字 + 箭头）──
+    '.cl-exec-v2 .cl-exec-progress-row-v2 {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 2px;',
+    '  margin-top: 16px;',
+    '  padding: 0 4px;',
+    '}',
+    '.cl-exec-v2 .cl-exec-progress-row-v2 .cl-exec-progress-text {',
     '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 13px;',
-    '  line-height: 1.6;',
-    '  color: #2F2F33;',
-    '  word-break: break-word;',
+    '  font-size: 14px;',
+    '  font-weight: 400;',
+    '  line-height: 1.2;',
+    '  margin: 0;',
+    '  white-space: nowrap;',
+    '  background-image: linear-gradient(90deg, #555 0%, #555 36%, #eee 55%, #555 77%, #555 100%);',
+    '  background-size: 200% 100%;',
+    '  -webkit-background-clip: text;',
+    '  background-clip: text;',
+    '  -webkit-text-fill-color: transparent;',
+    '  animation: cl-progress-shimmer 2.5s ease-in-out infinite;',
+    '}',
+    '.cl-exec-v2 .cl-exec-progress-row-v2 .cl-exec-progress-arrow {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  flex-shrink: 0;',
+    '  opacity: 1;',
     '}',
-    '.cl-output-result--pending {',
+
+    // ── V2 隐藏旧版 name-row（星级原来在名称旁边）──
+    '.cl-exec-v2 .cl-exec-name-row,',
+    '.cl-exec-v2 .cl-exec-star-badge:not(.cl-exec-star-badge-v2) {',
     '  display: none !important;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result {',
-    '  width: 100%;',
-    '  max-height: 600px;',
-    '  overflow-y: auto;',
-    '  overflow-x: hidden;',
-    '  box-sizing: border-box;',
-    '  margin-top: 0;',
-    '  padding: 6px 30px 24px 18px;',
-    '  border: 0;',
-    '  border-radius: 0;',
-    '  background: transparent;',
-    '  font-size: 14.25px;',
-    '  line-height: 1.42;',
-    '  color: rgba(47,47,51,0.50);',
-    '  scrollbar-width: thin;',
-    '  scrollbar-color: #ECECEC transparent;',
-    '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result::-webkit-scrollbar {',
-    '  width: 4.5px;',
+
+    // ─ V2 步骤列表样式（覆盖 thought-chain-card.js 默认值）──
+    '.cl-exec-v2 .cl-tools-collapse-body-v2 {',
+    '  padding: 4px 0 8px;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result::-webkit-scrollbar-track {',
-    '  background: transparent;',
+    '.cl-exec-v2 .cl-tools-collapse-step {',
+    '  padding: 5px 0;',
+    '  gap: 10px;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result::-webkit-scrollbar-thumb {',
-    '  background: #ECECEC;',
-    '  border-radius: 150px;',
+    '.cl-exec-v2 .cl-tools-collapse-step-title {',
+    '  font-size: 13px;',
+    '  color: #555;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h1,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h2 {',
-    '  margin: 18px 0 9px;',
-    '  font-size: 20px;',
-    '  font-weight: 600;',
-    '  line-height: 1.2;',
-    '  color: rgba(47,47,51,0.90);',
+    '.cl-exec-v2 .cl-tools-collapse-step-check {',
+    '  width: 12px;',
+    '  height: 12px;',
+    '  background: #ccc;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h1:first-child,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h2:first-child {',
-    '  margin-top: 6px;',
+    '.cl-exec-v2 .cl-tools-collapse-step-dot {',
+    '  width: 14px;',
+    '  height: 14px;',
     '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result h3 {',
-    '  margin: 18px 0 9px;',
-    '  font-size: 15px;',
-    '  font-weight: 600;',
-    '  line-height: 1.2;',
-    '  color: rgba(47,47,51,0.90);',
-    '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result p,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result li {',
-    '  font-size: 14.25px;',
-    '  line-height: 1.42;',
-    '  color: rgba(47,47,51,0.50);',
-    '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result strong,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result b,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result a {',
-    '  color: rgba(47,47,51,0.90) !important;',
-    '  font-weight: 600;',
-    '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result ul,',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result ol {',
-    '  padding-left: 20px;',
-    '  margin: 6px 0;',
-    '}',
-    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result hr {',
-    '  border: 0;',
-    '  border-top: 1px solid rgba(47,47,51,0.12);',
-    '  margin: 15px 0;',
-    '}',
-    '.cl-output-result p { margin: 4px 0; }',
-    '.cl-output-result ul, .cl-output-result ol { padding-left: 20px; margin: 4px 0; }',
-    '.cl-output-result code {',
-    '  background: rgba(0,0,0,0.05);',
-    '  padding: 1px 4px;',
-    '  border-radius: 3px;',
-    '  font-size: 12px;',
+    '.cl-exec-v2 .cl-tools-collapse-step-dot::before,',
+    '.cl-exec-v2 .cl-tools-collapse-step-dot::after,',
+    '.cl-exec-v2 .cl-tools-collapse-step-dot span {',
+    '  width: 3px;',
+    '  height: 3px;',
+    '  background: #bbb;',
     '}',
 
-    // ── 附件下载区 ──
-    '.cl-openagent-media-links {',
+    // ── V2 Footer（-由xxx完成 + 星级）──
+    '.cl-exec-v2 .cl-output-footer-v2 {',
     '  display: flex;',
-    '  flex-wrap: wrap;',
-    '  gap: 8px;',
-    '  width: 100%;',
-    '  box-sizing: border-box;',
-    '  padding: 6px 18px 12px;',
-    '}',
-    '.cl-openagent-media-link {',
-    '  display: inline-grid;',
-    '  grid-template-columns: auto auto;',
-    '  grid-template-areas: "icon action" "icon file";',
     '  align-items: center;',
-    '  column-gap: 8px;',
-    '  row-gap: 1px;',
-    '  max-width: min(100%, 360px);',
-    '  box-sizing: border-box;',
-    '  padding: 8px 10px;',
-    '  border: 1px solid rgba(47,47,51,0.12);',
-    '  border-radius: 8px;',
-    '  background: rgba(47,47,51,0.03);',
-    '  color: rgba(47,47,51,0.90) !important;',
-    '  text-decoration: none !important;',
+    '  gap: 4px;',
     '  font-family: "PingFang SC", sans-serif;',
-    '}',
-    '.cl-openagent-media-link:hover {',
-    '  background: rgba(16,189,235,0.08);',
-    '  border-color: rgba(16,189,235,0.35);',
-    '}',
-    '.cl-openagent-media-link-icon {',
-    '  grid-area: icon;',
-    '  width: 28px;',
-    '  height: 28px;',
-    '  border-radius: 6px;',
-    '  background: rgba(16,189,235,0.12);',
-    '  color: #088BAE;',
-    '  display: inline-flex;',
-    '  align-items: center;',
-    '  justify-content: center;',
-    '  font-size: 11px;',
-    '  font-weight: 700;',
-    '}',
-    '.cl-openagent-media-link-text {',
-    '  grid-area: action;',
-    '  min-width: 0;',
     '  font-size: 13px;',
-    '  font-weight: 600;',
-    '  line-height: 1.2;',
+    '  color: #999;',
+    '  padding: 12px;',
+    '  margin-top: 8px;',
     '}',
-    '.cl-openagent-media-link-file {',
-    '  grid-area: file;',
-    '  min-width: 0;',
-    '  overflow: hidden;',
-    '  text-overflow: ellipsis;',
+    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-text {',
     '  white-space: nowrap;',
-    '  font-size: 11px;',
-    '  line-height: 1.2;',
-    '  color: rgba(47,47,51,0.50);',
     '}',
-
-    // ── 错误状态 ──
-    '.cl-remote-agent-card--error {',
-    '  border-color: rgba(220, 38, 38, 0.3);',
-    '  background: rgba(254, 242, 242, 0.5);',
-    '}',
-
-    // ── Header 折叠/展开 ──
-    '.cl-openagent-header:hover {',
-    '  background: color-mix(in srgb, var(--bg-hover, #ECEDF0) 75%, transparent);',
-    '  transition: background 0.15s ease;',
+    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-star {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  flex-shrink: 0;',
+    '  margin-left: 2px;',
     '}',
-    '.cl-content-collapsed {',
-    '  display: none !important;',
+    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-count {',
+    '  font-weight: 500;',
+    '  white-space: nowrap;',
     '}',
   ].join('\n');
   document.head.appendChild(style);