<!--
  Mudabbir Dashboard - Activity Log Component

  Changes (2026-02-04):
  - Fixed scrolling: Added overflow-y-auto to make activity log scrollable
  - Added empty state message when no activity
  Changes (2026-02-03):
  - Extracted from monolithic index.html
  - Displays activityLog data with timestamp and colored log levels
-->
<!-- Activity View -->
<div class="flex-1 flex flex-col pt-24 px-4 md:px-8 pb-8 overflow-hidden bg-black font-mono" x-show="view === 'activity'">
    <div class="terminal-output flex-1 overflow-y-auto text-[12px] md:text-[13px] text-[#BBB] leading-relaxed space-y-1" x-ref="activityLog">
    <!-- Empty state -->
    <div x-show="activityLog.length === 0" class="flex flex-col items-center justify-center h-full text-white/30">
        <i data-lucide="activity" class="w-12 h-12 mb-3 opacity-50"></i>
        <p class="text-sm">No activity yet</p>
        <p class="text-xs mt-1">Tool calls and agent events will appear here</p>
    </div>
    <template x-for="(log, index) in activityLog" :key="index">
        <div class="flex gap-3" :class="'term-' + log.level">
        <span class="text-[#555] whitespace-nowrap" x-text="log.time"></span>
        <span x-html="log.message" class="break-words"></span>
        </div>
    </template>
    </div>
</div>
