feat: initial Crablo Control Center dashboard

src/routes/agents/+page.svelte

@@ -0,0 +1,48 @@
+<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>