宜博 / lemonboss

<template>
  <div class="detail">
    <div v-if="!node" class="ph">
      在中间画布上点一个节点，这里显示它的详情。
    </div>

    <template v-else>
      <header class="head">
        <h3>{{ node.name || node.defNodeId }}</h3>
        <span class="badge" :class="node.status">{{ node.status }}</span>
      </header>
      <div class="sub">
        <span v-if="node.systemAgentId">本体 <code>{{ node.systemAgentId }}</code></span>
        <span>attempt <b>{{ (node.attempt || 0) + 1 }}</b></span>
        <span>{{ node.nodeKind === 'subgraph' ? '⊞ 子图节点' : 'agent 调用' }}</span>
        <!-- R-17.1：子 run 是复用的还是新起的，直接标在头上 —— 复用之后「这一层跑到哪了」
             不再等于「子图整个重来」，不标出来用户会以为子图从头跑了一遍 -->
        <span v-if="reusedChildRun" class="tag-reuse">子 run 复用中（服务 attempt #{{ (node.childRunAttempt || 0) + 1 }}）</span>
      </div>

      <!-- 「它还活着」条（W12-UI）。真 CLI 一个节点是 3-7 分钟量级，点完「下一步」之后
           界面上原本几分钟没有任何动静，只能盯状态灯。这里给两个**真实**信号：
           已运行多久 + 本节点最近一条事件是什么、多久之前。
           **刻意不做进度条**：引擎不知道 agent 还要跑多久，匀速条是骗人。
           放在 tabs 之上 = 四个 tab 都看得见（在「运行日志」tab 里翻日志时也不会丢）。 -->
      <div v-if="live" class="live">
        <span class="pulse" />
        <b class="clock">运行中 {{ live.elapsed }}</b>
        <span class="last">
          <template v-if="live.last">最近事件 <code>{{ live.last.kind }}</code> · {{ live.last.text }}
            <em v-if="live.last.ago">（{{ live.last.ago }} 前）</em>
          </template>
          <template v-else>SSE 已接上，但本节点还没有任何事件</template>
        </span>
        <em class="why" :title="LIVE_HINT">?</em>
      </div>

      <nav class="tabs">
        <button v-for="t in tabs" :key="t.key" :class="{ on: tab === t.key }" @click="tab = t.key">
          {{ t.label }}
        </button>
      </nav>

      <!-- 1 概览 -->
      <section v-if="tab === 'overview'" class="body">
        <dl class="kv">
          <dt>status</dt><dd><span class="badge" :class="node.status">{{ node.status }}</span></dd>
          <dt>attempt</dt><dd>{{ node.attempt || 0 }}</dd>
          <dt>started_at</dt><dd>{{ node.startedAt || '—' }}</dd>
          <dt>completed_at</dt><dd>{{ node.completedAt || '—' }}</dd>
          <dt>耗时</dt><dd>{{ duration }}</dd>
          <!-- 失败原因（W12-UI）。以前这里只读 node.failReason 一处，取不到就是一个「—」——
               而 fail_reason=null 在这套引擎里是**合法且常见**的（= 未匹配精确 fail 边，走兜底边），
               于是「失败、无原因」成了失败节点的常态显示。现在三级回落，来源逐条标明。 -->
          <dt>fail_reason</dt>
          <dd class="fail-cell">
            <template v-if="failInfo">
              <span class="src-badge" :class="failInfo.kind">{{ failInfo.source }}</span>
              <code v-if="failInfo.reason">{{ failInfo.reason }}</code>
              <span v-else class="muted small">null（没有匹配上精确 fail 边 → 走兜底边）</span>
              <p v-if="failInfo.text" class="excerpt">{{ failInfo.text }}</p>
              <em class="hint block">{{ failInfo.hint }}</em>
            </template>
            <template v-else-if="isFailed">
              —
              <em class="hint block">
                引擎没给 fail_reason，事件轨里也没有本轮（attempt #{{ (node.attempt || 0) + 1 }}）的
                <code>node.output</code> / <code>node.error</code> / <code>node.triage</code>。
                去「运行日志」tab 看完整事件轨。
              </em>
            </template>
            <template v-else>—</template>
          </dd>
          <!-- R-17.1 跨层地址：归因把根因指到了「哪个 org node 的哪个 work graph node」。
               这是回退到底会退到哪一层的唯一依据，落库了就要在概览里看得见 -->
          <dt>fail_node_ref</dt>
          <dd>
            <template v-if="failRef">
              <code>{{ failRef.orgNode || '(按回退边的目标)' }}</code> / <code>{{ failRef.workNode }}</code>
              <em class="hint">归因指向的 work graph 节点（跨层）</em>
            </template>
            <template v-else>—</template>
          </dd>
          <dt>agent_run_id</dt><dd class="mono">{{ node.agentRunId || '—' }}</dd>
          <dt>child_run_id</dt>
          <dd class="mono">
            {{ node.childRunId || '—' }}
            <em v-if="node.childRunId" class="hint">
              {{ reusedChildRun ? '复用中：本轮不重新规划，只重跑被点名的节点' : `为 attempt #${(node.childRunAttempt || 0) + 1} 起` }}
            </em>
          </dd>
          <!-- 节点行上的判词（graph_run_nodes.remediation_note）。落库了就要在概览里看得见，
               否则「产生 → 传递 → 落库 → 读回」的最后一环还是空的（R5-F2） -->
          <!-- 同 fail_reason：节点行上没有时回落到本轮 node.triage 事件里的判词，并标来源 -->
          <dt>remediation_note</dt>
          <dd class="wrap">
            <template v-if="noteInfo">
              <span class="src-badge" :class="noteInfo.kind">{{ noteInfo.source }}</span>
              {{ noteInfo.text }}
            </template>
            <template v-else>—</template>
          </dd>
        </dl>

        <h4>回退记录（{{ myLoops.length }}）</h4>
        <ul v-if="myLoops.length" class="loops">
          <li v-for="r in myLoops" :key="r.id" :class="r.verdict">
            <div class="loop-head">
              <span class="lc">{{ r.loop_count }}/3</span>
              <span class="verdict">{{ r.verdict }}</span>
              <span class="dir">{{ r.from_node_run_id === node.id ? '从这里退出' : '退回到这里' }}</span>
            </div>
            <!-- R-17.1 回退粒度：退到 org node 整张图，还是跨层退到子图里的某一个节点。
                 账本上有 target_node_ref 就是后者（引擎真的只重置了那一个 node） -->
            <p class="scope" :class="{ cross: refOf(r) }">
              <template v-if="refOf(r)">
                跨层定点重置 → <code>{{ refOf(r).orgNode }}</code> / <code>{{ refOf(r).workNode }}</code>
                <span class="muted small">（复用子 run {{ refOf(r).childRunId }}，只重跑这一个节点，
                  contract 未变的下游不动）</span>
              </template>
              <template v-else>整张 work graph 重跑（归因没点名具体节点，或地址解析不了）</template>
            </p>
            <p v-if="r.remediation_note" class="note">{{ r.remediation_note }}</p>
          </li>
        </ul>
        <p v-else class="muted">这个节点没有参与过回退。</p>
      </section>

      <!-- 2 输入输出 -->
      <section v-else-if="tab === 'io'" class="body">
        <h4>原始产出</h4>
        <p v-if="node.outputRef" class="mono path">{{ node.outputRef }}</p>
        <p v-else class="muted">还没有产出（output_ref 为空）。</p>
        <p class="muted small">
          产物正文需要 <code>GET /api/graph-runs/:id/nodes/:nodeId/output</code>，
          T6 端点清单里没有这一条；接上之前这里只显示路径。
        </p>

        <h4>实际被下游消费的形态</h4>
        <p class="muted small">
          正向边上与原始产出相同；经过回退后会拼上上一轮的 remediation_note，两者不能假设相等（§四.B.3）。
        </p>
        <div v-if="consumedNote" class="consumed">
          <div class="tag">原始产出 + 上一轮修复意见 <em class="src">来源：{{ consumedSource }}</em></div>
          <p class="note">{{ consumedNote }}</p>
        </div>
        <p v-else class="muted">本节点没有收到上一轮判词，消费形态 = 原始产出。</p>

        <h4>读过的 artifacts/</h4>
        <ul v-if="(node.artifactsRead || []).length" class="mono list">
          <li v-for="a in node.artifactsRead" :key="a">{{ a }}</li>
        </ul>
        <p v-else class="muted small">
          运行时未记录该节点读过哪些共享产物（graph_run_nodes 上没有这一列）。
        </p>
      </section>

      <!-- 3 运行日志 -->
      <section v-else-if="tab === 'log'" class="body">
        <NodeRunLog :node="node" :events="events" />
      </section>

      <!-- 4 子图 -->
      <section v-else-if="tab === 'sub'" class="body">
        <div class="sub-head">
          <span class="mono">{{ node.childRunId }}</span>
          <button class="btn go" @click="$emit('dive', { runId: node.childRunId, label: node.name })">
            进入子图 →
          </button>
        </div>
        <p class="muted small">
          下面是子 run 的只读缩略图；「进入子图」把它推到中间画布，那一层的五个控制按钮会作用在子 run 上，
          面包屑可以逐层返回（§四.B.3）。
        </p>
        <!-- R-17.1 明确接受的代价：跨层寻址破坏了层级封装，「暂停 / 下一步」作用于哪一层
             的语义因此变含糊，**必须在 UI 上显式说清楚**，否则用户会以为在这一层点单步
             也能推动子图里的节点。 -->
        <div class="layer-note">
          <div class="tag">层级语义（R-17.1 跨层寻址）</div>
          <ul>
            <li>
              <b>「下一步」只推你当前所在的这一层。</b>在本层单步只会推进本层节点；
              这个节点是 <code>subgraph</code>，它的一步 = 「把子 run 交给引擎」，
              子图内部的节点要<b>进入子图后</b>再单步。
            </li>
            <li>
              <b>「暂停 / 停止」是全局意图，向下级联</b>到这张子 run 和它的所有后代；
              <b>「启动」是它的镜像</b>，会把被级联暂停的后代一起拉回来。
            </li>
            <li>
              <b>这张子 run 会被跨层复用。</b>上一层的回退可能只重置子图里<b>某一个</b>节点
              （见「概览 → 回退记录」那一行的回退粒度），
              <em>不是</em>整张子图重跑——所以子图里各节点的 attempt 可能不一样。
            </li>
          </ul>
        </div>
        <WorkGraphCanvas
          :nodes="child.nodes"
          :edges="child.edges"
          :loop-records="child.loopRecords"
          @select="$emit('dive', { runId: node.childRunId, label: node.name })"
        >
          <template #empty>子图还没有节点</template>
        </WorkGraphCanvas>
      </section>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, watch, onBeforeUnmount } from 'vue';
import WorkGraphCanvas from '../WorkGraphCanvas.vue';
import NodeRunLog from './NodeRunLog.vue';
import { nodeEvents, attemptOf, lastWhere, describeEvent, fmtDuration, since } from './node-signals';

/** 节点详情四 tab（T4 / §四.B.3） */
const props = defineProps({
  node: { type: Object, default: null },          // getRunState 的合并节点
  loopRecords: { type: Array, default: () => [] },
  events: { type: Array, default: () => [] },
});
defineEmits(['dive']);

const tab = ref('overview');
const child = ref({ nodes: [], edges: [], loopRecords: [] });

const hasSub = computed(() => props.node && props.node.nodeKind === 'subgraph' && props.node.childRunId);
const tabs = computed(() => [
  { key: 'overview', label: '概览' },
  { key: 'io', label: '输入输出' },
  { key: 'log', label: '运行日志' },
  ...(hasSub.value ? [{ key: 'sub', label: '子图' }] : []),
]);

/**
 * R-17.1 跨层地址的读回端。两处来源、两种语义，不要混：
 *   node.failNodeRef            = 归因的**主张**（graph_run_nodes.fail_node_ref）
 *   loopRecord.target_node_ref  = 引擎真的退到了哪（解析后，含 childRunId / nodeRunId）
 * 坏值一律当没有：面板不该因为一条 JSON 解析不了就整块白掉。
 */
function readRef(raw) {
  if (!raw) return null;
  try {
    const v = typeof raw === 'string' ? JSON.parse(raw) : raw;
    return v && v.workNode ? v : null;
  } catch { return null; }
}
const failRef = computed(() => readRef(props.node?.failNodeRef));
const refOf = (rec) => readRef(rec && rec.target_node_ref);
/** 子 run 服务的是更早的一轮 = 本轮在复用它（executeSubgraph 的代次判据在前端的镜像） */
const reusedChildRun = computed(() => {
  const n = props.node;
  return Boolean(n && n.childRunId && n.childRunAttempt != null && n.childRunAttempt < (n.attempt || 0));
});

const myLoops = computed(() =>
  props.node
    ? props.loopRecords.filter((r) => r.from_node_run_id === props.node.id || r.to_node_run_id === props.node.id)
    : []);

/**
 * 本节点这一轮实际拿到的「应该如何修复」——它就是下一轮输入与原始产出的差量。
 *
 * **权威来源是节点行上的 remediation_note，loop record 只是回落**（R5-F2）：
 * loop record 仅在命中 backward 边时才有，而 forward fail 边 / 死路 blocked /
 * infra_flake 原地重跑这三条路径上一条记录都不会有 —— 只按 loop record 读，
 * 恰恰在这三条路径上会显示「本节点未经过回退」，而节点其实是拿到了判词的。
 * 判词由 graph_run_nodes.remediation_note 落库、getRunState 读回成 node.remediationNote。
 */
const consumedNote = computed(() => {
  if (noteInfo.value) return noteInfo.value.text;
  const rec = myLoops.value.find((r) => r.to_node_run_id === props.node?.id && r.remediation_note);
  return rec ? rec.remediation_note : null;
});
const consumedSource = computed(() => {
  if (!noteInfo.value) return '回退账本 loop record';
  return noteInfo.value.kind === 'engine' ? '节点行 remediation_note' : '事件轨 node.triage（节点行上还没有）';
});

// ── 秒表 / 「还活着」条（W12-UI） ─────────────────────────────────
//
// 真 CLI 一个节点是 3-7 分钟量级。在此之前 duration 用的是 Date.now()，
// 而 Date.now() 不是响应式的 —— 节点在跑的整段时间里这一格是**冻住的**。
// 只在节点 running 时开 ticker，跑完就停（不给已收敛的节点白烧一个 1s 定时器）。
const nowTs = ref(Date.now());
let ticker = null;
watch(() => props.node?.status === 'running', (on) => {
  clearInterval(ticker);
  ticker = null;
  if (!on) return;
  nowTs.value = Date.now();
  ticker = setInterval(() => { nowTs.value = Date.now(); }, 1000);
}, { immediate: true });
onBeforeUnmount(() => clearInterval(ticker));

const LIVE_HINT = '这里只报「已经跑了多久」和「最近一条事件」两个真实信号。'
  + '引擎不知道 agent 还要跑多久（CLI 不上报进度），所以刻意不画进度条 —— 匀速条是骗人的。';

const duration = computed(() => {
  const n = props.node;
  if (!n?.startedAt) return '—';
  const end = n.completedAt ? Date.parse(n.completedAt) : nowTs.value;
  return fmtDuration(end - Date.parse(n.startedAt)) || '—';
});

/** 本节点的事件（全部 attempt）与本轮 attempt 的事件 —— 三个 computed 共用 */
const myEvents = computed(() => nodeEvents(props.events, props.node));
const attemptEvents = computed(() => {
  const n = props.node;
  if (!n) return [];
  return myEvents.value.filter((e) => attemptOf(e, n) === (n.attempt || 0));
});

const live = computed(() => {
  const n = props.node;
  if (!n || n.status !== 'running') return null;
  const last = myEvents.value[myEvents.value.length - 1] || null;
  return {
    elapsed: (n.startedAt && fmtDuration(nowTs.value - Date.parse(n.startedAt))) || '—',
    last: last ? { kind: last.kind, text: describeEvent(last), ago: since(last.ts, nowTs.value) } : null,
  };
});

// ── 失败原因的三级回落（W12-UI） ──────────────────────────────────
//
// 「引擎把 fail_reason 落库」与「界面读回它」是两件并行推进的事，所以**两条路都要能走**：
//   1. 引擎判定 —— graph_run_nodes.fail_reason（getRunState 读回成 node.failReason）。
//      它同时是**选边的匹配键**，所以取值一定在引擎的域内（ATTRIBUTION_REASONS）。
//   2. 归因产出 —— 本轮 node.triage 事件里的 fail_reason（validator 写的 attempt-N.json）。
//      引擎还没把它落到节点行上时（或落库那一环还没接通）走这条。
//   3. 摘自输出 —— node.output.output_excerpt / node.error.error。
//      fail_reason 合法地为 null（走兜底边）时，这是**唯一**能告诉人「到底出了什么事」的东西；
//      真跑时「Agent not found」正是从 node.error 这条出来的。
const FAIL_HINT = {
  engine: '来自 graph_run_nodes.fail_reason —— 它同时是引擎选 fail 边用的匹配键',
  triage: '来自本轮 node.triage 事件（validator 的归因文件）；节点行上还没有这个值',
  output: '引擎没有给出 fail_reason（= 走兜底边），下面是本轮 agent 输出 / 执行器异常的摘要',
};
const isFailed = computed(() => ['fail', 'blocked'].includes(props.node?.status));

function excerptOf(list) {
  const e = lastWhere(list, (x) => {
    const d = x.data || {};
    if (x.kind === 'node.output') return Boolean(d.output_excerpt);
    if (x.kind === 'node.error') return Boolean(d.error);
    return x.kind === 'node.boundary' && d.violation === 'boundary_escape';
  });
  if (!e) return null;
  const d = e.data || {};
  if (e.kind === 'node.error') return `[${d.error_type || 'Error'}] ${d.error}`;
  if (e.kind === 'node.boundary') return `[边界守卫] 本次调用在宿主仓库留下 ${d.count || 0} 处改动，按越界判失败`;
  return d.output_excerpt;
}

const failInfo = computed(() => {
  const n = props.node;
  if (!n) return null;
  const text = excerptOf(attemptEvents.value);
  if (n.failReason) {
    return { kind: 'engine', source: '引擎判定', reason: n.failReason, text, hint: FAIL_HINT.engine };
  }
  const tri = lastWhere(attemptEvents.value, (e) => e.kind === 'node.triage' && e.data && e.data.fail_reason);
  if (tri) {
    return { kind: 'triage', source: '归因产出', reason: tri.data.fail_reason, text, hint: FAIL_HINT.triage };
  }
  if (text) return { kind: 'output', source: '摘自输出', reason: null, text, hint: FAIL_HINT.output };
  return null;
});

/** remediation_note 同款回落：节点行 → 本轮 node.triage 事件 */
const noteInfo = computed(() => {
  if (props.node?.remediationNote) {
    return { kind: 'engine', source: '引擎判定', text: props.node.remediationNote };
  }
  const tri = lastWhere(attemptEvents.value, (e) => e.kind === 'node.triage' && e.data && e.data.remediation_note);
  return tri ? { kind: 'triage', source: '归因产出', text: tri.data.remediation_note } : null;
});

// tab 数量随节点变化，切到别的节点时若当前 tab 不存在要回落，否则面板会空白
watch(() => props.node?.id, () => {
  if (!tabs.value.some((t) => t.key === tab.value)) tab.value = 'overview';
  loadChild();
});
watch(tab, (t) => { if (t === 'sub') loadChild(); });

async function loadChild() {
  child.value = { nodes: [], edges: [], loopRecords: [] };
  if (!hasSub.value) return;
  try {
    const r = await fetch(`/api/graph-runs/${props.node.childRunId}`);
    if (!r.ok) return;
    const j = await r.json();
    child.value = { nodes: j.nodes || [], edges: j.edges || [], loopRecords: j.loopRecords || [] };
  } catch { /* 缩略图拉不到不该影响其它 tab */ }
}
</script>

<style scoped>
.detail { display:flex; flex-direction:column; min-height:0; height:100%; }
.ph { color:#999; font-size:13px; padding:24px 8px; text-align:center; }
.head { display:flex; align-items:center; gap:8px; }
.head h3 { margin:0; font-size:14px; font-family: ui-monospace, monospace; word-break:break-all; }
.sub { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:#777; margin:6px 0 10px; }
.sub code { background:#f0f0f2; padding:1px 5px; border-radius:3px; }

/* 「还活着」条：呼吸点 + 秒表 + 最近一条事件。刻意没有进度条（见 LIVE_HINT） */
.live {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  border:1px solid #bcd6f2; background:#f2f8ff; border-radius:6px;
  padding:6px 9px; margin-bottom:8px; font-size:11px; color:#2c5282;
}
.live .pulse {
  width:7px; height:7px; border-radius:50%; background:#0069d9; flex:0 0 auto;
  align-self:center; animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 0%,100% { opacity:1; } 50% { opacity:.2; } }
@media (prefers-reduced-motion: reduce) { .live .pulse { animation:none; } }
.live .clock { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.live .last { color:#4a6c8f; flex:1 1 100%; line-height:1.6; overflow-wrap:anywhere; }
.live .last code { background:#e2edfa; padding:0 4px; border-radius:3px; }
.live .last em { color:#7a97b5; font-style:normal; }
.live .why {
  cursor:help; font-style:normal; color:#7a97b5; border:1px solid #bcd6f2;
  border-radius:50%; width:14px; height:14px; line-height:13px; text-align:center;
  font-size:10px; align-self:center; margin-left:auto; flex:0 0 auto;
}

/* 失败原因的来源标：三条回落路径必须一眼分得清（W12-UI） */
.src-badge {
  font-size:9px; padding:1px 6px; border-radius:8px; margin-right:6px;
  border:1px solid transparent; white-space:nowrap;
}
.src-badge.engine { background:#e8f0fb; color:#2b6cb0; border-color:#c9dcf3; }
.src-badge.triage { background:#f3ecfd; color:#6b46c1; border-color:#ddd0f5; }
.src-badge.output { background:#fdf3e6; color:#a35b00; border-color:#f0dcc0; }
.fail-cell code { background:#fdecec; color:#a02020; padding:1px 5px; border-radius:3px; }
.excerpt {
  margin:5px 0 0; padding:6px 8px; background:#0f1115; color:#e6e6e6; border-radius:4px;
  font-family: ui-monospace, monospace; font-size:10.5px; line-height:1.6;
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:170px; overflow-y:auto;
}
.hint.block { display:block; margin:4px 0 0; line-height:1.6; }
.hint.block code { background:#f0f0f2; padding:0 3px; border-radius:3px; }

.tabs { display:flex; gap:4px; border-bottom:1px solid #eee; margin-bottom:10px; }
.tabs button {
  border:none; background:none; padding:6px 10px; font-size:12px; cursor:pointer;
  color:#666; border-bottom:2px solid transparent;
}
.tabs button.on { color:#1a1a1a; font-weight:600; border-bottom-color:#2b6cb0; }

.body { flex:1; overflow-y:auto; min-height:0; }
h4 { font-size:11px; color:#888; text-transform:uppercase; margin:14px 0 6px; }
.kv { display:grid; grid-template-columns:104px 1fr; gap:4px 10px; font-size:12px; margin:0; }
.kv dt { color:#888; }
.kv dd { margin:0; word-break:break-all; }
.mono { font-family: ui-monospace, monospace; font-size:11px; }
.path { background:#f7f7f9; padding:5px 8px; border-radius:4px; word-break:break-all; }
.badge { font-size:10px; padding:2px 8px; border-radius:9px; background:#eee; color:#555; text-transform:uppercase; }
.badge.running { background:#cce5ff; color:#004085; }
.badge.success { background:#d4edda; color:#155724; }
.badge.fail    { background:#f8d7da; color:#721c24; }
.badge.blocked { background:#ffe8cc; color:#a35b00; }
.badge.skipped { background:#e9e9ec; color:#777; }

.loops { list-style:none; padding:0; margin:0; }
.loops li { border:1px solid #f0e0c8; background:#fffaf3; border-radius:5px; padding:7px 9px; margin-bottom:6px; }
.loops li.force_terminated { border-color:#e0a0a0; background:#fff5f5; }
.loop-head { display:flex; gap:8px; align-items:center; font-size:11px; }
.lc { font-weight:700; color:#8a4b00; }
.verdict { text-transform:uppercase; color:#555; }
.dir { color:#999; margin-left:auto; }
.note { font-size:12px; color:#444; margin:5px 0 0; white-space:pre-wrap; }
.consumed { border:1px solid #d6e3f5; background:#f7fbff; border-radius:5px; padding:7px 9px; }
.consumed .tag { font-size:10px; color:#2b6cb0; font-weight:600; }
.consumed .src { color:#8aa; font-style:normal; font-weight:400; margin-left:6px; }
.hint { color:#8aa; font-style:normal; font-size:10px; margin-left:6px; }
.tag-reuse { color:#2b6cb0; background:#eef4fb; border-radius:3px; padding:1px 6px; }
.scope { font-size:11px; color:#777; margin:5px 0 0; }
.scope.cross { color:#2b6cb0; }
.scope code { background:#eef4fb; padding:1px 4px; border-radius:3px; }
.layer-note { border:1px solid #e3dcf5; background:#faf8ff; border-radius:5px; padding:8px 10px; margin:8px 0; }
.layer-note .tag { font-size:10px; color:#6b46c1; font-weight:600; margin-bottom:4px; }
.layer-note ul { margin:0; padding-left:16px; }
.layer-note li { font-size:11px; color:#555; line-height:1.7; }
.layer-note code { background:#f0f0f2; padding:1px 4px; border-radius:3px; }
.kv dd.wrap { white-space:pre-wrap; color:#444; }
.list { padding-left:16px; margin:0; }
.muted { color:#999; font-size:12px; }
.muted.small { font-size:11px; line-height:1.6; }
.muted code { background:#f0f0f2; padding:1px 4px; border-radius:3px; }
.sub-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.btn { border:1px solid #ddd; background:#fff; border-radius:5px; cursor:pointer; font-size:12px; padding:4px 10px; }
.btn.go { background:#2b6cb0; border-color:#2b6cb0; color:#fff; margin-left:auto; }
</style>