openclaw-openagent 1.0.12 → 1.0.14

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

@@ -1,896 +0,0 @@
-// ── 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() {
-  var oldStyle = document.getElementById('cl-remote-agent-styles');
-  if (oldStyle) oldStyle.remove();
-  var style = document.createElement('style');
-  style.id = 'cl-remote-agent-styles';
-  style.setAttribute('data-openagent-style', 'remote-agent');
-  style.setAttribute('data-openagent-host-version', CL.hostVersion || 'unknown');
-  style.setAttribute('data-openagent-host-adapter', (CL.hostAdapter && CL.hostAdapter.id) || 'oc-unknown');
-  var hostCss = (CL.hostAdapter && CL.hostAdapter.css) || {};
-  function _clSelectorList(selectors) {
-    if (!selectors) return '';
-    if (Array.isArray(selectors)) return selectors.filter(Boolean).join(',\n');
-    return String(selectors || '');
-  }
-  function _clRule(selectors, declarations) {
-    var selectorText = _clSelectorList(selectors);
-    if (!selectorText) return '';
-    return selectorText + ' {\n' + declarations.join('\n') + '\n}';
-  }
-  style.textContent = [
-    // ── 隐藏宿主上下文用量提示 ──
-    '.context-notice.context-notice--usage,',
-    '.context-notice .context-notice--usage {',
-    '  display: none !important;',
-    '}',
-
-    // ── RenderHook 远端 Agent 卡片接管 native tool header ──
-    _clRule(hostCss.remoteShell, [
-      '  width: 100% !important;',
-      '  max-width: 100% !important;',
-      '  min-width: 0 !important;',
-      '  box-sizing: border-box !important;',
-      '  border: 0 !important;',
-      '  background: transparent !important;',
-      '  box-shadow: none !important;',
-    ]),
-    '/* Align output host shells with execution shells. Keep v4 msg-collapse',
-    '   separate from newer tools-collapse so modern spacing never leaks into',
-    '   the 2026.4 DOM. Move the host shell, not the inner OpenAgent card. */',
-    _clRule(hostCss.outputHostMargin, [
-      '  margin-left: 12px !important;',
-    ]),
-    _clRule(hostCss.outputHostMarginReset, [
-      '  margin-left: 0 !important;',
-    ]),
-    _clRule(hostCss.summaryHidden, [
-      '  display: none !important;',
-    ]),
-    _clRule(hostCss.hostShellRawText, [
-      '  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 */',
-    _clRule(hostCss.rawTextCardHosts, [
-      '  display: none !important;',
-    ]),
-    _clRule(hostCss.rawTextPlaceholderHosts, [
-      '  display: none !important;',
-    ]),
-    _clRule(hostCss.hostBody, [
-      '  border: 0 !important;',
-      '  outline: 0 !important;',
-      '  background: transparent !important;',
-      '  box-shadow: none !important;',
-      '  padding: 0 !important;',
-      '  margin: 0 !important;',
-      '  width: 100% !important;',
-      '  max-width: 100% !important;',
-      '  min-width: 0 !important;',
-      '  box-sizing: border-box !important;',
-    ]),
-    '.chat-bubble:has(.cl-remote-agent-card) {',
-    '  border: 0 !important;',
-    '  background: transparent !important;',
-    '  box-shadow: none !important;',
-    '  padding: 10px 0 !important;',
-    '  width: 100%;',
-    '  max-width: 100% !important;',
-    '  min-width: 0 !important;',
-    '  overflow: hidden !important;',
-    '  box-sizing: border-box !important;',
-    '}',
-    '.chat-split-container:has(.cl-output-card),',
-    '.chat-main:has(.cl-output-card),',
-    '.chat-sidebar:has(.cl-output-card),',
-    '.chat-side-result:has(.cl-output-card),',
-    '.chat-side-result__body:has(.cl-output-card) {',
-    '  min-width: 0 !important;',
-    '  max-width: 100% !important;',
-    '  box-sizing: border-box !important;',
-    '}',
-    _clRule(hostCss.manualOpenReset, [
-      '  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,',
-    '.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;',
-    '  min-width: 0 !important;',
-    '  box-sizing: border-box !important;',
-    '}',
-    _clRule(hostCss.hostShellReset, [
-      '  border: 0 !important;',
-      '  outline: 0 !important;',
-      '  background: transparent !important;',
-      '  box-shadow: none !important;',
-    ]),
-    _clRule(hostCss.hostShellSummary, [
-      '  display: none !important;',
-    ]),
-    // ── 新卡片容器 ──
-    // 覆盖 OpenClaw .chat-tool-card 的 max-height: 120px 限制
-    '.cl-remote-agent-card {',
-    '  max-height: none;',
-    '  overflow: visible;',
-    '  width: 100%;',
-    '  max-width: 100%;',
-    '  border: 1px solid rgba(0,0,0,0.05);',
-    '  border-radius: 14px;',
-    '  background: #fff;',
-    '  display: flex;',
-    '  flex-direction: column;',
-    '  box-sizing: border-box;',
-    '}',
-    _clRule(hostCss.modernCardLayout ? ['.cl-remote-agent-card'] : [], [
-      '  overflow: hidden;',
-      '  min-width: 0;',
-      '  gap: 0;',
-      '  padding: 15px;',
-    ]),
-
-    // ── 顶部 OpenAgent 标题条 ──
-    '.cl-openagent-header {',
-    '  max-width: 100%;',
-    '  display: flex;',
-    '  align-items: center;',
-    '  gap: 6px;',
-    '  height: 34px;',
-    '  padding: 6px 0;',
-    '  border-radius: 10px;',
-    '  box-sizing: border-box;',
-    '  border: none;',
-    '  background: transparent;',
-    '  font-family: "PingFang SC", sans-serif;',
-    '}',
-    '.cl-openagent-header:hover {',
-    '}',
-    _clRule(!hostCss.modernCardLayout ? ['.cl-openagent-header'] : [], [
-      '  height: auto;',
-      '  padding: 16px 25px;',
-    ]),
-    _clRule(hostCss.modernCardLayout ? ['.cl-openagent-header'] : [], [
-      '  gap: 0;',
-      '  height: auto;',
-      '  padding: 15px;',
-    ]),
-    '/* Output mode (Figma 373:12082) */',
-    '.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-exec-v2 .cl-openagent-header--output .cl-openagent-agent {',
-    '  display: none;',
-    '}',
-    '.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: 15px;',
-    '  flex-shrink: 0;',
-    '  transition: transform 0.2s ease;',
-    '}',
-    '.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 / contain no-repeat;',
-    '  flex-shrink: 0;',
-    '  overflow: hidden;',
-    '}',
-    _clRule(hostCss.modernCardLayout ? ['.cl-openagent-badge'] : [], [
-      '  background: url(./icon.png) center/cover no-repeat;',
-      '  margin: 0 6px;',
-    ]),
-    '.cl-openagent-text-row {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  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-agent {',
-    '  font-size: 12px;',
-    '  font-weight: 500;',
-    '  color: #333;',
-    '  white-space: nowrap;',
-    '}',
-    '.cl-openagent-status {',
-    '  font-size: 11px;',
-    '  font-weight: 400;',
-    '  color: #666;',
-    '  white-space: nowrap;',
-    '}',
-    // ── Execution detail card (Figma 346:181) ──
-    '.cl-thought-chain-content {',
-    '  display: flex;',
-    '  flex-direction: column;',
-    '  gap: 16px;',
-    '  min-width: 0;',
-    '  max-width: 100%;',
-    '  box-sizing: border-box;',
-    '}',
-    _clRule(!hostCss.modernCardLayout ? ['.cl-thought-chain-content.cl-thought-chain-content--execution'] : [], [
-      '  padding: 0 15px 15px;',
-    ]),
-    _clRule(hostCss.modernCardLayout ? ['.cl-thought-chain-content'] : [], [
-      '  margin-left: 0;',
-      '  width: 100%;',
-      '  min-width: 0;',
-      '  box-sizing: border-box;',
-      '  overflow: hidden;',
-    ]),
-    '.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-exec-detail-row {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  gap: 16px;',
-    '}',
-    '.cl-exec-agent-avatar {',
-    '  width: 68px;',
-    '  height: 68px;',
-    '  object-fit: contain;',
-    '  flex-shrink: 0;',
-    '}',
-    '.cl-exec-detail-info {',
-    '  display: flex;',
-    '  flex-direction: column;',
-    '  gap: 6px;',
-    '  flex: 1;',
-    '  min-width: 0;',
-    '}',
-    '.cl-exec-name-row {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  justify-content: space-between;',
-    '  gap: 8px;',
-    '  margin-bottom: 6px;',
-    '}',
-    '.cl-exec-agent-name {',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 17px;',
-    '  font-weight: 500;',
-    '  color: #000;',
-    '  margin: 0;',
-    '  line-height: 1;',
-    '}',
-    '.cl-exec-star-badge {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  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;',
-    '}',
-    _clRule(!hostCss.modernCardLayout ? ['.cl-exec-agent-bio'] : [], [
-      '  width: 250px;',
-      '  max-width: 100%;',
-      '  min-width: 0;',
-      '  box-sizing: border-box;',
-      '  overflow: hidden;',
-      '  text-overflow: ellipsis;',
-      '  display: -webkit-box;',
-      '  -webkit-line-clamp: 2;',
-      '  -webkit-box-orient: vertical;',
-    ]),
-
-    // ── Progress text (Figma 346:253) ──
-    '.cl-thought-chain-content.cl-content-collapsed {',
-    '  display: none;',
-    '}',
-    ,
-        '.cl-exec-progress-row {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  gap: 2px;',
-    '}',
-    '.cl-exec-progress-text {',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  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-progress-arrow {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  flex-shrink: 0;',
-    '}',
-
-
-    // ── Progress shimmer keyframes ──
-    '@keyframes cl-progress-shimmer {',
-    '  0% { background-position: 200% 0; }',
-    '  100% { background-position: -200% 0; }',
-    '}',
-
-    // ── 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;',
-    '  width: 100% !important;',
-    '  max-width: 100% !important;',
-    '  min-width: 0 !important;',
-    '  box-sizing: border-box !important;',
-    '  overflow: hidden;',
-    '}',
-    _clRule(hostCss.modernCardLayout ? ['.cl-output-card'] : [], [
-      '  gap: 10px !important;',
-    ]),
-    _clRule(!hostCss.modernCardLayout ? ['.cl-output-card'] : [], [
-      '  border-radius: 14px !important;',
-    ]),
-    _clRule(!hostCss.modernCardLayout ? ['.cl-remote-agent-card.cl-thought-chain.cl-output-card'] : [], [
-      '  padding: 0 !important;',
-    ]),
-    '.cl-output-card > .cl-thought-chain-content {',
-    '  background: #fff;',
-    '  border: 1px solid #f4f4f4;',
-    '  border-radius: 12px;',
-    '  padding: 20px 30px;',
-    '  overflow: hidden;',
-    '  width: 100%;',
-    '  max-width: 100%;',
-    '  min-width: 0;',
-    '  box-sizing: border-box;',
-    '}',
-    _clRule(!hostCss.modernCardLayout ? ['.cl-output-card > .cl-thought-chain-content'] : [], [
-      '  margin: 10px 15px;',
-      '  width: calc(100% - 30px);',
-    ]),
-    '.cl-output-card .cl-output-result {',
-    '  width: 100%;',
-    '  max-width: 100%;',
-    '  min-width: 0;',
-    '  box-sizing: border-box;',
-    '  overflow-wrap: anywhere;',
-    '  word-break: break-word;',
-    '}',
-    '.cl-output-card > .cl-thought-chain-content * {',
-    '  max-width: 100%;',
-    '  min-width: 0;',
-    '  box-sizing: border-box;',
-    '}',
-    '.cl-output-card > .cl-thought-chain-content p,',
-    '.cl-output-card > .cl-thought-chain-content li,',
-    '.cl-output-card > .cl-thought-chain-content a {',
-    '  overflow-wrap: anywhere;',
-    '  word-break: break-word;',
-    '}',
-    '.cl-output-card > .cl-thought-chain-content hr {',
-    '  border: 0;',
-    '  border-top: 1px solid #bdbdbd;',
-    '}',
-    '.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;',
-    '}',
-    // 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;',
-    '}',
-    // 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;',
-    '}',
-
-    // ── Collapsed state（Figma 145:3466） ──
-    '.cl-remote-agent-card:has(.cl-content-collapsed) {',
-    '  padding: 0 !important;',
-    '}',
-    // ── Output card Footer（Figma 131:2091） ──
-    '.cl-output-footer {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  gap: 4px;',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 14px;',
-    '  color: #999;',
-    '}',
-    _clRule(!hostCss.modernCardLayout ? ['.cl-output-footer'] : [], [
-      '  padding: 10px 15px;',
-      '  line-height: 22px;',
-    ]),
-    '.cl-output-footer-text {',
-    '  white-space: nowrap;',
-    '}',
-    '.cl-output-footer-star {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  flex-shrink: 0;',
-    '}',
-    '.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;',
-    '  min-width: 0 !important;',
-    '  max-width: 100% !important;',
-    '  overflow-x: hidden !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;',
-    '  min-width: 0 !important;',
-    '  max-width: 100% !important;',
-    '  overflow-x: hidden !important;',
-    '  box-sizing: border-box !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;',
-    '  min-width: 0 !important;',
-    '  max-width: 100% !important;',
-    '  padding: 0 !important;',
-    '  overflow-x: hidden !important;',
-    '  box-sizing: border-box !important;',
-    '  overflow-wrap: anywhere !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;',
-    '  min-width: 0 !important;',
-    '  max-width: 100% !important;',
-    '  overflow-x: hidden !important;',
-    '  box-sizing: border-box !important;',
-    '  overflow-wrap: anywhere !important;',
-    '}',
-    '.chat-sidebar .sidebar-markdown * {',
-    '  max-width: 100% !important;',
-    '  min-width: 0 !important;',
-    '  box-sizing: border-box !important;',
-    '}',
-    '.chat-sidebar .sidebar-markdown pre,',
-    '.chat-sidebar .sidebar-markdown code {',
-    '  white-space: pre-wrap !important;',
-    '  word-break: break-word !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;',
-    '  gap: 10px;',
-    '  padding: 0;',
-    '}',
-
-    // ── 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;',
-    '  gap: 6px;',
-    '  box-sizing: border-box;',
-    '}',
-    '.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;',
-    '}',
-
-    // ── V2 圆形灰色头像（替代小徽章）──
-    '.cl-exec-v2 .cl-openagent-avatar-v2 {',
-    '  display: inline-block;',
-    '  width: 24px;',
-    '  height: 24px;',
-    '  border-radius: 50%;',
-    '  background: #d0d0d0;',
-    '  flex-shrink: 0;',
-    '  margin-right: 4px;',
-    '}',
-
-    // ── 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;',
-    '}',
-
-    // ── 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-top: 0 !important;',
-    '  margin-left: 0 !important;',
-    '  position: relative;',
-    '  overflow: hidden;',
-    '  box-sizing: border-box;',
-    '}',
-    /* 四角网格点装饰 */
-    '.cl-exec-v2 .cl-exec-detail-card-v2::before,',
-    '.cl-exec-v2 .cl-exec-detail-card-v2::after {',
-    '  content: "";',
-    '  position: absolute;',
-    '  width: 40px;',
-    '  height: 40px;',
-    '  background-image: radial-gradient(circle, #ddd 1px, transparent 1px);',
-    '  background-size: 8px 8px;',
-    '  opacity: 0.5;',
-    '}',
-    '.cl-exec-v2 .cl-exec-detail-card-v2::before {',
-    '  top: 8px;',
-    '  left: 8px;',
-    '}',
-    '.cl-exec-v2 .cl-exec-detail-card-v2::after {',
-    '  bottom: 8px;',
-    '  right: 8px;',
-    '}',
-
-    '.cl-exec-v2 .cl-exec-detail-row-v2 {',
-    '  display: flex;',
-    '  gap: 16px;',
-    '}',
-
-    '.cl-exec-v2 .cl-exec-detail-info-v2 {',
-    '  display: flex;',
-    '  flex-direction: column;',
-    '  gap: 6px;',
-    '  flex: 1;',
-    '  min-width: 0;',
-    '}',
-
-    // ── V2 大头像 68×68 ──
-    '.cl-exec-v2 .cl-exec-agent-avatar-v2 {',
-    '  width: 68px !important;',
-    '  height: 68px !important;',
-    '  border-radius: 50% !important;',
-    '  object-fit: cover;',
-    '  flex-shrink: 0;',
-    '}',
-
-    // ── 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;',
-    '}',
-
-    // ── 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;',
-    '}',
-
-    // ── 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-exec-v2 .cl-exec-star-count-v2 {',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 13px;',
-    '  font-weight: 500;',
-    '  color: #555;',
-    '  white-space: nowrap;',
-    '}',
-
-    // ── 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: 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;',
-    '}',
-
-    // ── 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;',
-    '}',
-
-    // ─ V2 步骤列表样式（覆盖 thought-chain-card.js 默认值）──
-    '.cl-exec-v2 .cl-tools-collapse-body-v2 {',
-    '  padding: 4px 0 8px;',
-    '}',
-    '.cl-exec-v2 .cl-tools-collapse-step {',
-    '  padding: 5px 0;',
-    '  gap: 10px;',
-    '}',
-    '.cl-exec-v2 .cl-tools-collapse-step-title {',
-    '  font-size: 13px;',
-    '  color: #555;',
-    '}',
-    '.cl-exec-v2 .cl-tools-collapse-step-check {',
-    '  width: 12px;',
-    '  height: 12px;',
-    '  background: #ccc;',
-    '}',
-    '.cl-exec-v2 .cl-tools-collapse-step-dot {',
-    '  width: 14px;',
-    '  height: 14px;',
-    '}',
-    '.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;',
-    '}',
-
-    // ── V2 Footer（-由xxx完成 + 星级）──
-    '.cl-exec-v2 .cl-output-footer-v2 {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  gap: 4px;',
-    '  font-family: "PingFang SC", sans-serif;',
-    '  font-size: 13px;',
-    '  color: #999;',
-    '  padding: 12px;',
-    '  margin-top: 8px;',
-    '}',
-    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-text {',
-    '  white-space: nowrap;',
-    '}',
-    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-star {',
-    '  display: flex;',
-    '  align-items: center;',
-    '  flex-shrink: 0;',
-    '  margin-left: 2px;',
-    '}',
-    '.cl-exec-v2 .cl-output-footer-v2 .cl-output-footer-count {',
-    '  font-weight: 500;',
-    '  white-space: nowrap;',
-    '}',
-
-    // ── chat-text 下 p 标签样式 ──
-    '.cl-remote-agent-card .chat-text p {',
-    '  color: #2F2F33 !important;',
-    '  text-align: justify;',
-    '  font-family: "PingFang SC" !important;',
-    '  font-size: 14px !important;',
-    '  font-style: normal !important;',
-    '  font-weight: 400 !important;',
-    '  line-height: 132% !important;',
-    '}',
-
-    // ── chat-text 下 code 标签样式（去背景、去边框、加粗）──
-    '.chat-text code,',
-    '.cl-remote-agent-card .chat-text code,',
-    '.cl-remote-agent-card .chat-text p code {',
-    '  background: transparent !important;',
-    '  border: none !important;',
-    '  font-weight: 700 !important;',
-    '}',
-  ].join('\n');
-  document.head.appendChild(style);
-  // ── 局部 host-shell 标记（不做全局扫描）──
-  // 只处理当前 cardNode 的祖先链路，不 querySelectorAll 全局
-  window._clMarkRemoteAgentHostShell = function _clMarkRemoteAgentHostShell(cardNode) {
-    try {
-      var hostAdapter = CL.hostAdapter || {};
-      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 (typeof hostAdapter.isMarkableHost === 'function') {
-          shouldMark = hostAdapter.isMarkableHost(node);
-        }
-
-        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');
-})();