- {#if server.picture}
-
- 
-
- {:else}
-
- {/if}
-
-
-
- {#if server.supportsEncryption}
-
- 🔒
-
- {/if}
-
- - {server.name} -
+
+ | null = null;
+
+function bootstrapServerAnnouncements(): Promise {
+ if (serverAnnouncementsReadyPromise) return serverAnnouncementsReadyPromise;
+
+ serverAnnouncementsReadyPromise = new Promise((resolve) => {
+ let settled = false;
+ const settle = (value: boolean) => {
+ if (settled) return;
+ settled = true;
+ resolve(value);
+ };
+
+ // Keep one long-lived stream subscription so the event store can continue
+ // collecting announcements instead of stopping after the first emission.
+ serverAnnouncementsSubscription = createServerAnnouncementsLoader().subscribe({
+ next: () => settle(true),
+ error: (error) => {
+ console.error('Failed to load server announcements stream:', error);
+ settle(false);
+ }
+ });
+
+ // Unblock UI if no events arrive quickly.
+ setTimeout(() => settle(false), 8000);
+ });
+
+ return serverAnnouncementsReadyPromise;
+}
+
export function useServerAnnouncement(pubkey: string, relayHints: string[] = []) {
return createQuery({
queryKey: serverKeys.announcement(pubkey),
@@ -242,10 +273,10 @@ async function fetchPromptsFromMCP(pubkey: string): Promise {
}
export function useServerAnnouncements() {
- return createQuery({
+ return createQuery({
queryKey: serverKeys.all,
queryFn: async () => {
- return await lastValueFrom(createServerAnnouncementsLoader());
+ return await bootstrapServerAnnouncements();
}
});
}
diff --git a/src/lib/stores/relay-store.svelte.ts b/src/lib/stores/relay-store.svelte.ts
index db90bcd..cee72e1 100644
--- a/src/lib/stores/relay-store.svelte.ts
+++ b/src/lib/stores/relay-store.svelte.ts
@@ -1,9 +1,10 @@
-import { dev } from '$app/environment';
import { defaultRelays, devRelay } from '../services/relay-pool';
// Reactive relay store using Svelte 5 $state
export const relayStore = $state({
- selectedRelays: dev ? devRelay : defaultRelays,
+ // Default to public relays in all environments.
+ // Localhost relay can still be enabled explicitly via relayActions.useDevRelay().
+ selectedRelays: defaultRelays,
relayChangeCallback: null as ((relays: string[]) => void) | null
});
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 61706bf..56fc8d9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -26,7 +26,7 @@
return $serverAnnouncements?.slice(0, 4) ?? [];
});
- const loading = $derived.by(() => $serverAnnouncementsQuery.isFetching);
+ const loading = $derived.by(() => $serverAnnouncementsQuery.isLoading && latestServers.length === 0);
const faqsHref = $derived<`/faqs`>('/faqs');
const aboutHref = $derived<`/about`>('/about');
diff --git a/src/routes/servers/+page.svelte b/src/routes/servers/+page.svelte
index f9e81fa..c218364 100644
--- a/src/routes/servers/+page.svelte
+++ b/src/routes/servers/+page.svelte
@@ -14,13 +14,17 @@
encodeServerIdentity,
resolveServerIdentifier
} from '$lib/utils';
+ import { Search } from 'lucide-svelte';
const serverAnnouncements = eventStore.model(ServerAnnouncementsModel);
const serverAnnouncementsQuery = useServerAnnouncements();
- let loading = $state($serverAnnouncementsQuery.isFetching);
+ const hasServers = $derived(($serverAnnouncements?.length ?? 0) > 0);
+ const loading = $derived($serverAnnouncementsQuery.isLoading && !hasServers);
let searchTerm = $state('');
+ let visibleCount = $state(6);
+
const resolvedSearchIdentifierQuery = $derived.by(() => {
const trimmedSearchTerm = searchTerm.trim();
@@ -55,6 +59,15 @@
);
});
+ const visibleServers = $derived(filteredServerAnnouncements?.slice(0, visibleCount) ?? []);
+ const hasMore = $derived((filteredServerAnnouncements?.length ?? 0) > visibleCount);
+
+ $effect(() => {
+ // Reset pagination when search term changes
+ searchTerm;
+ visibleCount = 6;
+ });
+
const decodedSearchIdentifier = $derived(
$resolvedSearchIdentifierQuery.data ?? decodeServerIdentifier(searchTerm)
);
@@ -87,38 +100,42 @@
+
diff --git a/src/lib/queries/serverQueries.ts b/src/lib/queries/serverQueries.ts
index d3aa462..1608355 100644
--- a/src/lib/queries/serverQueries.ts
+++ b/src/lib/queries/serverQueries.ts
@@ -12,7 +12,7 @@ import {
createServerAnnouncementsLoader
} from '$lib/services/loaders.svelte';
import type { Tool, Resource, ResourceTemplate, Prompt } from '@modelcontextprotocol/sdk/types.js';
-import { lastValueFrom } from 'rxjs';
+import { lastValueFrom, type Subscription } from 'rxjs';
import type { NostrEvent } from 'nostr-tools';
import { getSeenRelays, mergeRelaySets } from 'applesauce-core/helpers/relays';
import { relayStore } from '$lib/stores/relay-store.svelte';
@@ -28,6 +28,37 @@ interface ParsedRelayList {
hasPublishedRelayList: boolean;
}
+let serverAnnouncementsSubscription: Subscription | null = null;
+let serverAnnouncementsReadyPromise: Promise{server.name}
{#if server.about} -+
{truncateString(server.about)}
{/if} -
- Visit server
- →
+
+
+
+
+
+ Visit server →
+
+
+ Live
+
+
-
+
{:else if loading}
-
+
{#if filteredServerAnnouncements?.length > 0}
-
-
- - Available MCP Servers - {#if searchTerm} - - ({filteredServerAnnouncements.length} results) - - {/if} -
-
- {#each filteredServerAnnouncements as server (server.id)}
-
- {:else}
-
-
+
+ + {filteredServerAnnouncements.length} Servers available +
+ +
+ {#each visibleServers as server (server.id)}
+
+
+ {#if hasMore}
+
+
+
+ {/if}
{:else if searchTerm}
{@const decodedIdentifier = decodedSearchIdentifier}
{@const resolvedServer = $searchServerQuery?.data?.server}
@@ -130,12 +147,10 @@
Resolved a server from this identifier using its relay hints.
-
-
+ No servers found matching "{searchTerm}"
{/if} @@ -146,25 +161,15 @@ {/if}
- {#each Array(3) as _, i (i)}
-
{/if}
{:else if !$serverAnnouncements?.length && !loading}
-
- {/each}
- No MCP servers found. Check back later for server announcements.
- {#each Array(3) as _, i (i)}
-
-
+
+ {#each Array(6) as _, i (i)}
+
{/if}