feat(ui): endpoint catalog with copyable urls on the now page

ui/src/routes/+page.svelte

@@ -7,6 +7,7 @@
     UsageResponse,
   } from "$lib/api/types";
   import EmptyState from "$lib/components/empty-state.svelte";
+  import Endpoints from "$lib/components/endpoints.svelte";
   import ErrorNote from "$lib/components/error-note.svelte";
   import KindBadge from "$lib/components/kind-badge.svelte";
   import LimitBar from "$lib/components/limit-bar.svelte";
@@ -88,15 +89,6 @@
   });
   const windows = $derived(gateway.limits?.windows ?? []);
   const tape = $derived(gateway.tape.slice(0, 40));
-
-  function frontendUrl(port: number | null, publicBase: string | null) {
-    if (publicBase) {
-      return publicBase;
-    }
-    return port
-      ? `${window.location.protocol}//${window.location.hostname}:${port}`
-      : "";
-  }
 </script>
 
 <svelte:head><title>Now · Beaver</title></svelte:head>
@@ -347,34 +339,10 @@
         <h2
           class="font-medium text-muted-foreground text-xs uppercase tracking-wide"
         >
-          Frontends
+          Endpoints
         </h2>
         {#if agents}
-          <ul class="flex flex-col">
-            {#each agents.frontends as fe (fe.type + fe.name)}
-              <li
-                class="ledger-grid grid-cols-[minmax(0,1fr)_auto] border-b py-1.5 text-sm"
-              >
-                <span class="flex min-w-0 flex-col">
-                  <span class="truncate font-medium">{fe.name}</span>
-                  <span class="truncate text-muted-foreground text-xs">
-                    {frontendUrl(fe.port, fe.public_base_url) || fe.type}
-                    {#if Object.keys(fe.default_agents).length > 0}
-                      ·
-                      {Object.entries(fe.default_agents)
-                        .map(([k, v]) => `${k}→${v}`)
-                        .join(", ")}
-                    {/if}
-                  </span>
-                </span>
-                <span class="flex gap-1">
-                  {#each fe.kinds as k (k)}
-                    <KindBadge kind={k} />
-                  {/each}
-                </span>
-              </li>
-            {/each}
-          </ul>
+          <Endpoints catalog={agents} />
         {:else}
           <Skeleton class="h-20 w-full" />
         {/if}