Ai Loop History code

@props([
    'iterations' => [],
    'title' => 'Loop history',
    'activeIteration' => null,
    'embedded' => false,
])

@php
    /*
    | Cross-iteration timeline for an agent loop.
    |
    | Usage:
    |   <x-ui.ai-loop-history :active-iteration="4" :iterations="[
    |       ['iteration' => 3, 'status' => 'complete', 'duration' => '2m 48s', 'summary' => 'All tests passed'],
    |       ['iteration' => 4, 'status' => 'running', 'duration' => '1m 02s', 'summary' => 'Updating showcase'],
    |   ]" />
    */
    $normalizedIterations = collect($iterations)
        ->map(function ($item) {
            return [
                'iteration' => (int) ($item['iteration'] ?? 0),
                'status' => $item['status'] ?? 'complete',
                'duration' => $item['duration'] ?? null,
                'summary' => $item['summary'] ?? null,
            ];
        })
        ->filter(fn (array $item) => $item['iteration'] > 0)
        ->sortByDesc('iteration')
        ->values()
        ->all();
@endphp

<div {{ $attributes->merge(['class' => $embedded ? 'min-w-0' : 'min-w-0 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900']) }}>
    @unless ($embedded)
        <div class="border-b border-gray-200 px-4 py-4 dark:border-gray-800 sm:px-5">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $title }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">{{ count($normalizedIterations) }} iterations</p>
        </div>
    @endunless

    <ul @class(['divide-y divide-gray-200 dark:divide-gray-800', 'border-t border-gray-200 dark:border-gray-800' => $embedded]) role="list">
        @forelse ($normalizedIterations as $item)
            @php
                $isActive = (int) $activeIteration === $item['iteration'];
            @endphp
            <li @class([
                'px-4 py-3 sm:px-5',
                'bg-brand-50/60 dark:bg-brand-950/20' => $isActive,
            ])>
                <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                            Iteration {{ $item['iteration'] }}
                            @if ($isActive)
                                <span class="mt-1 block text-xs font-semibold uppercase tracking-wide text-brand-700 sm:ms-2 sm:mt-0 sm:inline dark:text-brand-300">Current</span>
                            @endif
                        </p>
                        @if ($item['summary'])
                            <p class="mt-1 break-words text-sm text-gray-600 dark:text-gray-400">{{ $item['summary'] }}</p>
                        @endif
                    </div>

                    <div class="flex shrink-0 flex-row items-center gap-2 sm:flex-col sm:items-end sm:gap-1">
                        <x-ui.ai-loop-status-badge :status="$item['status']" />
                        @if ($item['duration'])
                            <span class="text-xs text-gray-400 dark:text-gray-500">{{ $item['duration'] }}</span>
                        @endif
                    </div>
                </div>
            </li>
        @empty
            <li class="px-4 py-6 text-sm text-gray-500 dark:text-gray-400 sm:px-5">No iterations yet.</li>
        @endforelse
    </ul>
</div>