openclaw-openagent 1.0.0

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

@@ -0,0 +1,668 @@
+// ── OpenAgent Remote Agent Card Styles ──
+//
+// 补充样式。核心样式（.cl-thought-chain, .cl-agent-pill, .cl-tools-collapse-*）
+// 已由 thought-chain-card.js 注入，此处只补新增的类。
+//
+// 注意：不使用 .chat-tool-card 类名，避免 scanner.js 误匹配。
+
+(function _clInjectRemoteAgentStyles() {
+  if (document.getElementById('cl-remote-agent-styles')) return;
+  var style = document.createElement('style');
+  style.id = 'cl-remote-agent-styles';
+  style.textContent = [
+    // ── RenderHook 远端 Agent 卡片接管 native tool header ──
+    'details.chat-tools-collapse:has(.cl-remote-agent-card),',
+    'details.chat-tool-msg-collapse:has(.cl-remote-agent-card),',
+    '.chat-tools-collapse:has(.cl-remote-agent-card),',
+    '.chat-tool-msg-collapse:has(.cl-remote-agent-card) {',
+    '  width: 100% !important;',
+    '  max-width: none !important;',
+    '  box-sizing: border-box !important;',
+    '  border: 0 !important;',
+    '  background: transparent !important;',
+    '  box-shadow: none !important;',
+    '}',
+    '/* Align output host shells with execution shells. 3.28 renders output as',
+    '   chat-tools-collapse + .cl-output-card; some versions use chat-tool-msg-collapse.',
+    '   Move the host shell, not the inner OpenAgent card. */',
+    'details.chat-tools-collapse:has(.cl-output-card),',
+    '.chat-tools-collapse:has(.cl-output-card),',
+    'details.chat-tool-msg-collapse:has(.cl-remote-agent-card),',
+    '.chat-tool-msg-collapse:has(.cl-remote-agent-card) {',
+    '  margin-left: 12px !important;',
+    '}',
+    'details.chat-tools-collapse:has(.cl-remote-agent-card) > summary.chat-tools-summary,',
+    'details.chat-tool-msg-collapse:has(.cl-remote-agent-card) > summary.chat-tool-msg-summary,',
+    '.chat-tools-collapse:has(.cl-remote-agent-card) > .chat-tools-summary,',
+    '.chat-tool-msg-collapse:has(.cl-remote-agent-card) > .chat-tool-msg-summary {',
+    '  display: none !important;',
+    '}',
+    '.chat-tools-collapse__body.cl-remote-agent-host-shell > .chat-text,',
+    '.chat-tool-msg-body.cl-remote-agent-host-shell > .chat-text {',
+    '  display: none !important;',
+    '}',
+    '.cl-remote-agent-raw-hidden > .chat-text,',
+    '.cl-remote-agent-raw-hidden.chat-bubble > .chat-text {',
+    '  display: none !important;',
+    '}',
+    '/* Phase A: 不依赖 host-shell class，用 :has() 直接隐藏宿主 raw text */',
+    '.chat-tools-collapse__body:has(.cl-remote-agent-card) > .chat-text,',
+    '.chat-tool-msg-body:has(.cl-remote-agent-card) > .chat-text,',
+    '.chat-tool-card__detail:has(.cl-remote-agent-card) > .chat-text,',
+    '.chat-tools-collapse__body:has(.cl-remote-agent-output-placeholder) > .chat-text,',
+    '.chat-tool-msg-body:has(.cl-remote-agent-output-placeholder) > .chat-text,',
+    '.chat-tool-card__detail:has(.cl-remote-agent-output-placeholder) > .chat-text {',
+    '  display: none !important;',
+    '}',
+    'details.chat-tools-collapse:has(.cl-remote-agent-card) > .chat-tools-collapse__body,',
+    'details.chat-tool-msg-collapse:has(.cl-remote-agent-card) > .chat-tool-msg-body,',
+    '.chat-tools-collapse:has(.cl-remote-agent-card) > .chat-tools-collapse__body,',
+    '.chat-tool-msg-collapse:has(.cl-remote-agent-card) > .chat-tool-msg-body {',
+    '  border: 0 !important;',
+    '  outline: 0 !important;',
+    '  background: transparent !important;',
+    '  box-shadow: none !important;',
+    '  padding: 0 !important;',
+    '  margin: 0 !important;',
+    '}',
+    '.chat-bubble:has(.cl-remote-agent-card) {',
+    '  border: 0 !important;',
+    '  background: transparent !important;',
+    '  box-shadow: none !important;',
+    '  padding-top: 0 !important;',
+    '  padding-bottom: 0 !important;',
+    '}',
+    '.chat-bubble:has(.cl-remote-agent-card) > .chat-text,',
+    '.chat-bubble:has(.cl-remote-agent-output-placeholder) > .chat-text {',
+    '  display: none !important;',
+    '}',
+    '.cl-remote-agent-host-shell {',
+    '  width: min(100%, 912px) !important;',
+    '  max-width: 100% !important;',
+    '  box-sizing: border-box !important;',
+    '}',
+    '.cl-remote-agent-host-shell.chat-tool-card,',
+    '.cl-remote-agent-host-shell.chat-tool-card__detail,',
+    '.cl-remote-agent-host-shell.chat-tools-collapse__body,',
+    '.cl-remote-agent-host-shell.chat-tool-msg-body,',
+    'details.cl-remote-agent-host-shell {',
+    '  border: 0 !important;',
+    '  outline: 0 !important;',
+    '  background: transparent !important;',
+    '  box-shadow: none !important;',
+    '}',
+    '.cl-remote-agent-host-shell > summary.chat-tools-summary,',
+    '.cl-remote-agent-host-shell > summary.chat-tool-msg-summary {',
+    '  display: none !important;',
+    '}',
+    // ── 新卡片容器 ──
+    // 覆盖 OpenClaw .chat-tool-card 的 max-height: 120px 限制
+    '.cl-remote-agent-card {',
+    '  max-height: none;',
+    '  overflow: visible;',
+    '  width: fit-content;',
+    '  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);',
+    '  display: flex;',
+    '  flex-direction: column;',
+    '  gap: var(--cl-native-shell-gap, 4px);',
+    '  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);',
+    '  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);',
+    '  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-icon {',
+    '  position: relative;',
+    '  width: 15px;',
+    '  height: 14px;',
+    '  flex: 0 0 15px;',
+    '}',
+    '.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-header-icon::before { left: 2px; top: 5px; }',
+    '.cl-openagent-header-icon::after { left: 5px; top: 2px; }',
+    '.cl-openagent-header-title {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 3px;',
+    '  min-width: 0;',
+    '  white-space: nowrap;',
+    '}',
+    '.cl-openagent-header-primary {',
+    '  color: var(--text, #2F2F33);',
+    '  font-weight: 600;',
+    '  overflow: hidden;',
+    '  text-overflow: ellipsis;',
+    '}',
+    '.cl-openagent-header-secondary {',
+    '  color: var(--muted, rgba(47,47,51,0.40));',
+    '  font-weight: 400;',
+    '}',
+    // ── Figma 内容框 ──
+    '.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;',
+    '}',
+    // ── 共享展开态 card 基础 ──
+    '.cl-remote-agent-card:has(.cl-thought-chain-content--execution),',
+    '.cl-remote-agent-card:has(.cl-output-result) {',
+    '  /* padding/radius/gap 继承 base card，不覆盖 */',
+    '  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-remote-agent-card:has(.cl-thought-chain-content:not(.cl-content-collapsed)) .cl-openagent-header {',
+    '  width: 100%;',
+    '}',
+    // ── 展开内容宽度：外层 card 保持 fit-content，content 出现时自然撑开 ──
+    '.cl-thought-chain-content--execution {',
+    '  width: 100%;',
+    '}',
+    '.cl-remote-agent-card:has(.cl-output-result) .cl-thought-chain-content {',
+    '  width: min(900px, 100%);',
+    '}',
+    // ── 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;',
+    '}',
+    // ── Figma Agent pill（297:696）──
+    '.cl-agent-pill {',
+    '  display: inline-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;',
+    '  margin: 0;',
+    '}',
+    '.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;',
+    '}',
+    '.cl-agent-pill-name {',
+    '  display: inline-flex;',
+    '  align-items: center;',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 15px;',
+    '  color: rgba(47,47,51,0.90);',
+    '  line-height: 1.2;',
+    '  letter-spacing: 0;',
+    '  white-space: nowrap;',
+    '}',
+    '.cl-agent-pill-at { font-weight: 600; }',
+    '.cl-agent-pill-label { font-weight: 400; }',
+    '.cl-thought-chain-pill-slot {',
+    '  display: flex;',
+    '  align-items: center;',
+    '  width: 100%;',
+    '}',
+    '.cl-thought-chain-divider {',
+    '  display: none;',
+    '}',
+    '.cl-thought-chain-content--execution {',
+    '  border: 1.5px solid rgba(0,0,0,0.04);',
+    '  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;',
+    '}',
+    '.cl-thought-chain-content--execution .cl-agent-pill-name {',
+    '  font-size: 15px;',
+    '  line-height: 1.2;',
+    '}',
+    '.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-remote-agent-card:has(.cl-output-result) .cl-agent-pill-avatar {',
+    '  width: 24px;',
+    '  height: 24px;',
+    '  flex-basis: 24px;',
+    '}',
+    '.cl-remote-agent-card:has(.cl-output-result) .cl-agent-pill-name {',
+    '  font-size: 15px;',
+    '  line-height: 1.2;',
+    '}',
+
+    // ── 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;',
+    '}',
+    '.cl-tools-collapse-header {',
+    '  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 {',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 10px;',
+    '  font-weight: 600;',
+    '  line-height: 1.2;',
+    '  color: rgba(47,47,51,0.90);',
+    '}',
+    '.cl-tools-collapse-body {',
+    '  position: relative;',
+    '  display: flex;',
+    '  flex-direction: column;',
+    '  gap: 4px;',
+    '  width: 100%;',
+    '  overflow: hidden;',
+    '  padding: 0;',
+    '  transition: max-height 0.25s ease, opacity 0.2s ease;',
+    '}',
+    '.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 {',
+    '  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;',
+    '}',
+    '.cl-tools-collapse-step-icon {',
+    '  width: 14px;',
+    '  height: 14px;',
+    '  flex: 0 0 14px;',
+    '  display: flex;',
+    '  align-items: center;',
+    '  justify-content: center;',
+    '  background: #fff;',
+    '}',
+    '.cl-tools-collapse-step-dot {',
+    '  width: 5px;',
+    '  height: 5px;',
+    '  border-radius: 50%;',
+    '  background: #D9D9D9;',
+    '  animation: none;',
+    '}',
+    '.cl-tools-collapse-step-dot::before,',
+    '.cl-tools-collapse-step-dot::after,',
+    '.cl-tools-collapse-step-dot span {',
+    '  content: none;',
+    '  display: none;',
+    '}',
+    '.cl-tools-collapse-step-check {',
+    '  position: relative;',
+    '  width: 14px;',
+    '  height: 14px;',
+    '  border-radius: 50%;',
+    '  background: #D9D9D9;',
+    '}',
+    '.cl-tools-collapse-step-check::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;',
+    '}',
+    '.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-thought-chain-content--execution .cl-thought-chain-steps-section {',
+    '  gap: 6px;',
+    '  padding: 6px 0;',
+    '}',
+    '.cl-thought-chain-content--execution .cl-tools-collapse-header-title {',
+    '  font-size: 15px;',
+    '  line-height: 1.2;',
+    '}',
+    '.cl-thought-chain-content--execution .cl-tools-collapse-body {',
+    '  gap: 6px;',
+    '}',
+    '.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;',
+    '}',
+    '.cl-thought-chain-content--execution .cl-tools-collapse-step-title {',
+    '  font-size: 14px;',
+    '  line-height: 1.32;',
+    '}',
+    '.cl-thought-chain-content--execution .cl-tools-collapse-step-detail {',
+    '  display: none;',
+    '}',
+
+    // ── 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;',
+    '}',
+    '.cl-output-card--pending {',
+    '  display: none !important;',
+    '}',
+
+    // ── 结果展示区 ──
+    '.cl-output-result {',
+    '  margin-top: 4px;',
+    '  font-family: "PingFang SC", sans-serif;',
+    '  font-size: 13px;',
+    '  line-height: 1.6;',
+    '  color: #2F2F33;',
+    '  word-break: break-word;',
+    '}',
+    '.cl-output-result--pending {',
+    '  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;',
+    '}',
+    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result::-webkit-scrollbar-track {',
+    '  background: transparent;',
+    '}',
+    '.cl-remote-agent-card:has(.cl-output-result) .cl-output-result::-webkit-scrollbar-thumb {',
+    '  background: #ECECEC;',
+    '  border-radius: 150px;',
+    '}',
+    '.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-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-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-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-content-collapsed {',
+    '  display: none !important;',
+    '}',
+  ].join('\n');
+  document.head.appendChild(style);
+  // ── 局部 host-shell 标记（不做全局扫描）──
+  // 只处理当前 cardNode 的祖先链路，不 querySelectorAll 全局
+  window._clMarkRemoteAgentHostShell = function _clMarkRemoteAgentHostShell(cardNode) {
+    try {
+      var node = cardNode && cardNode.parentElement;
+      var hops = 0;
+      while (node && node !== document.body && hops < 10) {
+        if (node.matches && node.matches(
+          '.chat,.chat-main,.chat-thread,.chat-thread-inner,' +
+          '.chat-split-container,.content,.content--chat,.shell,.shell--chat'
+        )) {
+          break;
+        }
+
+        var shouldMark = false;
+        var tag = (node.tagName || '').toLowerCase();
+        if (tag === 'details') {
+          shouldMark = node.matches && node.matches(
+            'details.chat-tools-collapse, details.chat-tool-msg-collapse'
+          );
+        } else if (node.matches) {
+          shouldMark = node.matches(
+            '.chat-tool-card,' +
+            '.chat-tool-card__detail,' +
+            '.chat-tools-collapse__body,' +
+            '.chat-tool-msg-body'
+          );
+        }
+
+        if (shouldMark && node.classList) {
+          node.classList.add('cl-remote-agent-host-shell');
+          if (tag === 'details' && !node.open) {
+            node.open = true;
+            node.setAttribute('open', '');
+          }
+        }
+        node = node.parentElement;
+        hops++;
+      }
+    } catch (err) {}
+  };
+
+  // 调度器：render hook 生命周期内调用，带延迟重试 + per-node 防抖
+  window._cl_scheduleHostShellMark = function _cl_scheduleHostShellMark(cardNode) {
+    if (!cardNode || typeof window._clMarkRemoteAgentHostShell !== 'function') return;
+
+    // 防抖：同一 cardNode 150ms 内不重复调度（标记是幂等的，但有遍历成本）
+    if (cardNode.__clShellMarkScheduled) return;
+    cardNode.__clShellMarkScheduled = true;
+    setTimeout(function() { cardNode.__clShellMarkScheduled = false; }, 150);
+
+    function run() {
+      try { window._clMarkRemoteAgentHostShell(cardNode); } catch (err) {}
+    }
+
+    run();
+    if (typeof requestAnimationFrame === 'function') requestAnimationFrame(run);
+    setTimeout(run, 0);
+    setTimeout(run, 80);
+  };
+
+  console.log('[cl-styles] ✅ remote agent styles injected');
+})();