<template>
  <div v-if="msg.type === 'compression_pending'" class="compression-notice compression-pending">
    <i class="ph ph-spinner ph-spin"></i>
    <span>{{ msg.text || 'Compressing context…' }}</span>
  </div>
  <details v-else class="compression-notice" :open="!msg.summary">
    <summary>
      <i class="ph ph-arrows-in"></i>
      Context compressed
      <span v-if="msg.before != null && msg.after != null" class="compression-counts">
        ({{ msg.before }} → {{ msg.after }} messages)
      </span>
      <i v-if="msg.summary" class="ph ph-caret-down compression-chevron"></i>
    </summary>
    <div v-if="msg.summary" class="compression-body" v-html="renderMarkdown(msg.summary)" />
  </details>
</template>

<script setup>
import { renderMarkdown } from '@/composables/useMarkdown.js'
defineProps({ msg: { type: Object, required: true } })
</script>

<style scoped>
.compression-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-bg-tertiary, #2a2b3d);
  color: var(--color-text-muted, #8b8fa3);
  font-size: 13px;
}
.compression-pending i {
  font-size: 16px;
}
</style>