<script lang="ts">
  let { data } = $props<{ data: { agents: any[]; defaults: any } }>();
  const thinking: Record<string, string> = { off: '—', low: '🔅', medium: '🔆', high: '🔆🔆', adaptive: '~' };
</script>

<svelte:head><title>crablo // agents</title></svelte:head>

<h1>Agents <span class="dim">({data.agents.length})</span></h1>

<div class="grid-2">
{#each data.agents as agent}
  <div class="card">
    <div style="display:flex; align-items:baseline; gap:0.6rem; margin-bottom:0.6rem;">
      <span style="font-weight:600; color:var(--amber);">{agent.name || agent.id}</span>
      {#if agent.default}<span class="tag warn">default</span>{/if}
      {#if agent.id !== (agent.name || agent.id)}<span class="dim" style="font-size:0.75rem;">{agent.id}</span>{/if}
    </div>

    <div class="label">primary model</div>
    <div class="value" style="margin-bottom:0.4rem;">
      <span class="pill primary">{agent.model?.primary || data.defaults?.model?.primary || '—'}</span>
    </div>

    {#if agent.model?.fallbacks?.length}
      <div class="label">fallbacks</div>
      <div style="margin-bottom:0.4rem;">
        {#each agent.model.fallbacks as fb}
          <span class="pill">{fb}</span>
        {/each}
      </div>
    {/if}

    {#if agent.thinkingDefault}
      <div class="label">thinking</div>
      <div class="value">{thinking[agent.thinkingDefault] || agent.thinkingDefault}</div>
    {/if}
  </div>
{/each}
</div>

<div style="margin-top:2rem;">
  <h2>Default fallback chain</h2>
  <div style="margin-top:0.5rem;">
    {#each (data.defaults?.model?.fallbacks || []) as fb, i}
      <span class="pill">{i+1}. {fb}</span>
    {/each}
  </div>
</div>
