{# Trace Context tab — lazy-loaded per case+config selection #}
<div class="exp-trace-context">

  {# Case + Config selector #}
  <div class="exp-tc-selector">
    <div class="exp-tc-select-group">
      <label class="exp-tc-label">Case</label>
      <select class="exp-tc-select" x-model="tcSelectedCaseId" @change="tcSelectedSpan = null; tcData = null;">
        <option value="">Select a case…</option>
        <template x-for="c in getFilteredCases()" :key="c.case_id">
          <option :value="c.case_id" x-text="c.case_id + (c.domain ? ' (' + c.domain + ')' : '')"></option>
        </template>
      </select>
    </div>
    <div class="exp-tc-select-group">
      <label class="exp-tc-label">Config</label>
      <select class="exp-tc-select" x-model="tcSelectedConfigId" @change="tcSelectedSpan = null; tcData = null;">
        <option value="">Select a config…</option>
        <template x-for="cfg in configList" :key="cfg.config_run_id">
          <option :value="String(cfg.config_run_id)" x-text="cfg.config_name + (cfg.is_baseline ? ' (baseline)' : '')"></option>
        </template>
      </select>
    </div>
    <button class="exp-tc-load-btn"
            :disabled="!tcSelectedCaseId || !tcSelectedConfigId || tcLoading"
            @click="loadTraceContext()">
      <span x-show="!tcLoading">Load Trace</span>
      <span x-show="tcLoading">Loading…</span>
    </button>
  </div>

  {# Empty state #}
  <template x-if="!tcData && !tcLoading">
    <p class="exp-tc-empty">Select a case and config above, then click Load Trace to view the span tree.</p>
  </template>

  {# No trace available #}
  <template x-if="tcData && tcData.total_spans === 0">
    <p class="exp-tc-empty">No trace data available for this case result.</p>
  </template>

  {# Trace tree #}
  <template x-if="tcData && tcData.total_spans > 0">
    <div>
      <p class="tc-font" style="color: #a1a1aa; margin-bottom: 12px; font-size: 12px;">
        <span x-text="tcData.total_spans"></span> observations · total <span x-text="tcData.max_latency"></span>
      </p>

      <div class="tc-layout" :class="tcSelectedSpan !== null ? 'tc-layout--with-viewer' : 'tc-layout--tree-only'">

        {# Left: observation table #}
        <div class="tc-tree tc-font">
          <div class="tc-grid tc-header tc-font">
            <span>Node</span>
            <span style="padding-left: 12px;">Duration</span>
            <span style="text-align: right;">Latency</span>
          </div>
          <template x-for="(node, idx) in tcData.tree" :key="idx">
            <div class="tc-grid tc-row"
                 :class="tcSelectedSpan === idx && 'tc-row--selected'"
                 style="cursor: pointer;"
                 @click="tcSelectedSpan = (tcSelectedSpan === idx ? null : idx)">
              <div class="tc-col-node" :style="'padding-left: ' + node.indent_px + 'px;'">
                <template x-if="node.depth > 0">
                  <span class="tc-connector" x-text="node.is_last_child ? '└' : '├'"></span>
                </template>
                <span class="tc-badge" :style="node.badge_style" x-text="node.badge_label"></span>
                <span class="tc-name" x-text="node.name"></span>
                <template x-if="node.cost">
                  <span class="tc-cost" x-text="node.cost"></span>
                </template>
                <template x-if="node.tool_annotation">
                  <span class="tc-tool-ann">→ <span x-text="node.tool_annotation"></span></span>
                </template>
              </div>
              <div class="tc-col-bar">
                <div class="tc-bar-track">
                  <template x-if="node.bar_pct > 0">
                    <div :style="'width:' + node.bar_pct + '%; height:100%; border-radius:4px; background:' + node.bar_color + ';'"></div>
                  </template>
                </div>
              </div>
              <div class="tc-col-latency">
                <template x-if="node.latency">
                  <span :style="node.latency_color" x-text="node.latency"></span>
                </template>
              </div>
            </div>
          </template>
        </div>

        {# Right: detail viewer #}
        <div x-show="tcSelectedSpan !== null && tcData.span_details[tcSelectedSpan]" x-cloak
             class="tc-viewer">
          {# Header #}
          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e4e4e7;">
            <div style="display: flex; align-items: center; gap: 8px; min-width: 0;">
              <span class="tc-badge" :style="tcData.span_details[tcSelectedSpan] ? tcData.span_details[tcSelectedSpan].badge_style : ''" x-text="tcData.span_details[tcSelectedSpan] ? tcData.span_details[tcSelectedSpan].badge_label : ''" style="font-size: 11px; padding: 3px 10px;"></span>
              <span style="font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" x-text="tcData.span_details[tcSelectedSpan] ? tcData.span_details[tcSelectedSpan].name : ''"></span>
              <template x-if="tcData.span_details[tcSelectedSpan] && tcData.span_details[tcSelectedSpan].model_name">
                <span style="padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 500; background: rgba(59,130,246,0.08); color: #3b82f6; flex-shrink: 0;" x-text="tcData.span_details[tcSelectedSpan].model_name"></span>
              </template>
            </div>
            <button @click="tcSelectedSpan = null" style="color: #a1a1aa; padding: 4px; border-radius: 4px; border: none; background: none; cursor: pointer;" onmouseenter="this.style.color='#18181b';this.style.background='#f4f4f5'" onmouseleave="this.style.color='#a1a1aa';this.style.background='none'">
              <svg style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
          </div>

          {# Metric cards #}
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;">
            <template x-if="tcData.span_details[tcSelectedSpan] && tcData.span_details[tcSelectedSpan].latency">
              <div class="tc-viewer-metric">
                <p class="tc-viewer-label">Latency</p>
                <p style="font-size: 14px; font-weight: 700; margin: 4px 0 0;" x-text="tcData.span_details[tcSelectedSpan].latency"></p>
              </div>
            </template>
            <template x-if="tcData.span_details[tcSelectedSpan] && tcData.span_details[tcSelectedSpan].cost">
              <div class="tc-viewer-metric">
                <p class="tc-viewer-label">Cost</p>
                <p style="font-size: 14px; font-weight: 700; margin: 4px 0 0; color: #16a34a;" x-text="tcData.span_details[tcSelectedSpan].cost"></p>
                <template x-if="tcData.span_details[tcSelectedSpan].input_cost || tcData.span_details[tcSelectedSpan].output_cost">
                  <p style="font-size: 10px; color: #a1a1aa; margin: 4px 0 0;">
                    <span x-show="tcData.span_details[tcSelectedSpan].input_cost">in: <span x-text="tcData.span_details[tcSelectedSpan].input_cost"></span></span>
                    <span x-show="tcData.span_details[tcSelectedSpan].output_cost" style="margin-left: 8px;">out: <span x-text="tcData.span_details[tcSelectedSpan].output_cost"></span></span>
                  </p>
                </template>
              </div>
            </template>
            <template x-if="tcData.span_details[tcSelectedSpan] && (tcData.span_details[tcSelectedSpan].tokens_in || tcData.span_details[tcSelectedSpan].tokens_out)">
              <div class="tc-viewer-metric">
                <p class="tc-viewer-label">Tokens</p>
                <p style="font-size: 14px; font-weight: 700; margin: 4px 0 0;" x-text="(tcData.span_details[tcSelectedSpan].tokens_total || 0).toLocaleString()"></p>
                <p style="font-size: 10px; color: #a1a1aa; margin: 4px 0 0;">
                  <span x-show="tcData.span_details[tcSelectedSpan].tokens_in">in: <span x-text="(tcData.span_details[tcSelectedSpan].tokens_in || 0).toLocaleString()"></span></span>
                  <span x-show="tcData.span_details[tcSelectedSpan].tokens_out" style="margin-left: 8px;">out: <span x-text="(tcData.span_details[tcSelectedSpan].tokens_out || 0).toLocaleString()"></span></span>
                </p>
              </div>
            </template>
            <template x-if="tcData.span_details[tcSelectedSpan] && tcData.span_details[tcSelectedSpan].model_params && Object.keys(tcData.span_details[tcSelectedSpan].model_params).length">
              <div class="tc-viewer-metric">
                <p class="tc-viewer-label">Model Params</p>
                <template x-for="(val, key) in tcData.span_details[tcSelectedSpan].model_params" :key="key">
                  <p style="font-size: 12px; margin: 4px 0 0;"><span style="color: #a1a1aa;" x-text="key"></span>: <span style="font-weight: 500;" x-text="val"></span></p>
                </template>
              </div>
            </template>
          </div>

          {# Tool Calls #}
          <template x-if="tcData.span_details[tcSelectedSpan] && tcData.span_details[tcSelectedSpan].tool_calls && tcData.span_details[tcSelectedSpan].tool_calls.length">
            <div style="margin-bottom: 16px;">
              <p class="tc-viewer-label" style="margin: 0 0 8px;">Tool Calls</p>
              <div style="display: flex; flex-direction: column; gap: 6px;">
                <template x-for="(tc, i) in tcData.span_details[tcSelectedSpan].tool_calls" :key="i">
                  <div style="border-radius: 8px; border: 1px solid #e4e4e7; padding: 8px 12px; font-size: 12px; background: rgba(254,243,199,0.3);">
                    <span style="font-weight: 600;" x-text="tc.name"></span>
                    <template x-if="tc.args && Object.keys(tc.args).length">
                      <span style="color: #a1a1aa; margin-left: 4px;">(<template x-for="(v, k) in tc.args" :key="k"><span><span x-text="k"></span>=<span style="font-weight: 500; color: #18181b;" x-text="JSON.stringify(v)"></span> </span></template>)</span>
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </template>

          {# Output #}
          <template x-if="tcData.span_details[tcSelectedSpan] && tcData.span_details[tcSelectedSpan].output">
            <div>
              <p class="tc-viewer-label" style="margin: 0 0 8px;">Output</p>
              <pre style="border-radius: 8px; background: #f9fafb; border: 1px solid #e4e4e7; padding: 12px 16px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 350px; overflow-y: auto; margin: 0; font-family: inherit;" x-text="typeof tcData.span_details[tcSelectedSpan].output === 'string' ? tcData.span_details[tcSelectedSpan].output : JSON.stringify(tcData.span_details[tcSelectedSpan].output, null, 2)"></pre>
            </div>
          </template>

          {# Empty state #}
          <template x-if="tcData.span_details[tcSelectedSpan] && !tcData.span_details[tcSelectedSpan].cost && !tcData.span_details[tcSelectedSpan].tokens_in && !tcData.span_details[tcSelectedSpan].tool_calls && !tcData.span_details[tcSelectedSpan].output">
            <p style="font-size: 14px; color: #a1a1aa; font-style: italic; padding: 8px 0; margin: 0;">Structural observation — no output data.</p>
          </template>
        </div>

      </div>
    </div>
  </template>
</div>