src/components/LogPanel.vue

<script setup lang="ts">
import { ref } from "vue";

defineProps<{
  logOutput: string;
}>();

const emit = defineEmits<{
  copy: [];
  clear: [];
}>();

const collapsed = ref(true);
</script>

<template>
  <section class="rounded-xl border border-stone-300 bg-white p-4 shadow-sm">
    <div
      class="-m-4 flex cursor-pointer items-center justify-between rounded-xl p-4 transition hover:bg-stone-50"
      @click="collapsed = !collapsed"
    >
      <h2 class="m-0 text-sm font-semibold text-stone-700">Log</h2>
      <div class="flex items-center gap-2">
        <button
          type="button"
          class="inline-flex items-center justify-center rounded-md bg-white px-2.5 py-1.5 text-xs font-semibold text-stone-900 ring-1 ring-inset ring-stone-300 transition hover:bg-stone-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-400"
          @click.stop="emit('copy')"
        >
          Copy
        </button>
        <button
          type="button"
          class="inline-flex items-center justify-center rounded-md bg-white px-2.5 py-1.5 text-xs font-semibold text-stone-700 ring-1 ring-inset ring-stone-200 transition hover:bg-stone-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-400"
          @click.stop="emit('clear')"
        >
          Clear
        </button>
        <span class="ml-1 text-xs text-stone-500">{{ collapsed ? "▶" : "▼" }}</span>
      </div>
    </div>
    <div v-show="!collapsed" class="pt-3">
      <pre
        id="logOutput"
        class="max-h-52 overflow-auto rounded-lg border border-stone-200 bg-stone-50 p-3 text-xs leading-6 whitespace-pre-wrap break-words text-stone-700"
      >{{ logOutput }}</pre>
    </div>
  </section>
</template>