Implement CEP-15 Web Catalog Integration

eslint.config.js

@@ -45,5 +45,12 @@ export default ts.config(
 				svelteConfig
 			}
 		}
+	},
+	{
+		// button.svelte is a generic pass-through component — callers are responsible for resolve()
+		files: ['src/lib/components/ui/button/button.svelte'],
+		rules: {
+			'svelte/no-navigation-without-resolve': 'off'
+		}
 	}
 );

package.json

@@ -45,7 +45,7 @@
 		"vite": "^7.3.1"
 	},
 	"dependencies": {
-		"@contextvm/sdk": "^0.8.0",
+		"@contextvm/sdk": "^0.11",
 		"@sjsf/ajv8-validator": "^3.3.2",
 		"@sjsf/form": "^3.3.2",
 		"@sjsf/shadcn4-theme": "^3.3.2",

src/lib/components/CatalogBrowseSection.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { formatSchemaLabel, type CEP15SchemaInfo } from '$lib/utils/cep15';
+
+	interface CatalogSchemaBadge extends CEP15SchemaInfo {
+		providerCount?: number;
+	}
+
+	let {
+		title,
+		categories = [],
+		schemas = []
+	}: {
+		title: string;
+		categories?: string[];
+		schemas?: CatalogSchemaBadge[];
+	} = $props();
+
+	const hasContent = $derived(categories.length > 0 || schemas.length > 0);
+</script>
+
+{#if hasContent}
+	<div class="rounded-lg border border-border bg-card p-4">
+		<h3 class="mb-3 text-sm font-semibold tracking-wide text-muted-foreground uppercase">
+			{title}
+		</h3>
+
+		{#if categories.length > 0}
+			<div class={schemas.length > 0 ? 'mb-4' : ''}>
+				<p class="mb-2 text-xs text-muted-foreground">Categories</p>
+				<div class="flex flex-wrap gap-2">
+					{#each categories as category (category)}
+						<a
+							href={resolve(`/servers/t/${category}`)}
+							class="inline-flex items-center rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium transition-colors hover:border-primary/50 hover:bg-primary/10 hover:text-primary"
+						>
+							#{category}
+						</a>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		{#if schemas.length > 0}
+			<div>
+				<p class="mb-2 text-xs text-muted-foreground">Common Schemas</p>
+				<div class="flex flex-wrap gap-2">
+					{#each schemas as schema (schema.hash)}
+						<a
+							href={resolve(`/servers/i/${schema.hash}`)}
+							class="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 font-mono text-xs transition-colors hover:border-primary/50 hover:bg-primary/5 hover:text-primary"
+						>
+							<span class="font-medium">{formatSchemaLabel(schema.name, schema.hash)}</span>
+							{#if schema.providerCount}
+								<span
+									class="rounded-full bg-primary/10 px-1.5 py-0.5 font-sans text-xs font-semibold text-primary"
+								>
+									{schema.providerCount}
+								</span>
+							{/if}
+						</a>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

src/lib/components/ServerInformationCard.svelte

@@ -11,8 +11,17 @@
 	import { mcpClientService } from '$lib/services/mcpClient.svelte';
 	import CopyIcon from '@lucide/svelte/icons/copy';
 	import { parsePmiTagsFromEvent } from '$lib/services/payments/cep8-tags';
+	import ServerTagCloud from '$lib/components/ServerTagCloud.svelte';
 
-	let { server, identity }: { server: ServerAnnouncement; identity?: ServerIdentity } = $props();
+	let {
+		server,
+		identity,
+		tags = []
+	}: {
+		server: ServerAnnouncement;
+		identity?: ServerIdentity;
+		tags?: ServerAnnouncement['tags'];
+	} = $props();
 	let activeIdentityTab = $state<'npub' | 'hex' | 'nprofile'>('npub');
 
 	const publishedAt = $derived(formatUnixTimestamp(server.created_at, true));
@@ -147,6 +156,11 @@
 					</div>
 				</div>
 			{/if}
+			<div>
+				<div class="mt-2">
+					<ServerTagCloud {tags} />
+				</div>
+			</div>
 		</div>
 	</Card.Content>
 </Card.Root>

src/lib/components/ServerNoteCard.svelte

@@ -146,10 +146,11 @@
 			{segment.value}
 		{:else if segment.type === 'link'}
 			<span class="inline-flex max-w-full flex-wrap items-center gap-2 align-middle">
+				<!-- External URL from note content — resolve() not applicable -->
 				<a
 					href={segment.href}
 					target="_blank"
-					rel="noopener noreferrer"
+					rel="noopener noreferrer external"
 					class="break-all text-primary underline underline-offset-2 hover:text-primary/80"
 				>
 					{segment.value}

src/lib/components/ServerReviewsSection.svelte

@@ -55,7 +55,7 @@
 	const canPublishReview = $derived(!!composerContent.trim() && !isPublishing);
 
 	$effect(() => {
-		refreshCount;
+		void refreshCount;
 		isLoading = true;
 		isRefreshing = true;
 		const loaderSubscription = createServerReviewsLoader(pubkey, relayHints).subscribe();

src/lib/components/ServerTagCloud.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { extractCommonSchemas, extractCategories } from '$lib/utils/cep15';
+	import type { Event } from 'nostr-tools';
+	import CatalogBrowseSection from '$lib/components/CatalogBrowseSection.svelte';
+
+	let { tags }: { tags: Event['tags'] } = $props();
+
+	// Build a synthetic event-like object so we can reuse existing extractors
+	const fakeEvent = $derived({ tags } as Event);
+
+	const categories = $derived(extractCategories(fakeEvent));
+	const schemas = $derived(extractCommonSchemas(fakeEvent));
+</script>
+
+<div class="mt-4">
+	<CatalogBrowseSection title="Browse Catalog" {categories} {schemas} />
+</div>

src/lib/components/ToolCallForm.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { createForm, BasicForm, type Schema } from '@sjsf/form';
 	import { formDefaults } from '$lib/form-defaults';
 	import { mcpClientService, type McpConnectionState } from '$lib/services/mcpClient.svelte';
@@ -47,6 +48,12 @@
 		return runtimeCapTags.length > 0 ? runtimeCapTags : parseCapTagsFromTags(announcementTags);
 	});
 	const toolCap = $derived(findCapTagForTool(capTags, tool.name));
+
+	const commonSchemaTag = $derived(
+		announcementTags?.find((t) => t[0] === 'i' && t[2] === tool.name)
+	);
+	const schemaHash = $derived(commonSchemaTag?.[1]);
+
 	$effect(() => {
 		// Auto-collapse when we have a final result.
 		if (showResult && formResult) paymentOpen = false;
@@ -117,6 +124,34 @@
 						Paid · {formatCapTagPrice(toolCap)}
 					</span>
 				{/if}
+				{#if schemaHash}
+					<a
+						href={resolve(`/servers/i/${schemaHash}`)}
+						class="flex items-center gap-1 rounded bg-secondary/50 px-2 py-0.5 font-mono text-xs text-secondary-foreground transition-colors hover:bg-secondary hover:text-secondary-foreground"
+						title="View all servers that provide this schema"
+						onclick={(e) => e.stopPropagation()}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="12"
+							height="12"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="lucide lucide-hash"
+							><line x1="4" x2="20" y1="9" y2="9" /><line x1="4" x2="20" y1="15" y2="15" /><line
+								x1="10"
+								x2="8"
+								y1="3"
+								y2="21"
+							/><line x1="16" x2="14" y1="3" y2="21" /></svg
+						>
+						{schemaHash.substring(0, 8)}
+					</a>
+				{/if}
 			</div>
 			{#if tool.description}
 				<p class="text-sm text-muted-foreground">{tool.description}</p>

src/lib/components/ui/button/button.svelte

@@ -54,6 +54,7 @@
 </script>
 
 {#if href}
+	<!-- href is passed by the caller who is responsible for using resolve() -->
 	<a
 		bind:this={ref}
 		data-slot="button"

src/lib/constants.ts

@@ -1,6 +1,9 @@
 import { SERVER_ANNOUNCEMENT_KIND } from '@contextvm/sdk';
 import type { Filter } from 'nostr-tools';
 import { LongFormArticle, ShortTextNote } from 'nostr-tools/kinds';
+import { TOOLS_LIST_KIND } from '@contextvm/sdk';
+
+export const COMMON_SCHEMA_NAMESPACE = 'io.contextvm/common-schema';
 
 export const CONTEXTVM_PUBKEY = '6b3780ef2972e73d370b84a3e51e7aa9ae34bf412938dcfbd9c5f63b221416c8';
 
@@ -20,3 +23,22 @@ export function createServerNotesFilter(pubkey: string): Filter {
 		limit: 5
 	};
 }
+
+export const commonSchemasFilter: Filter = {
+	kinds: [TOOLS_LIST_KIND],
+	'#k': [COMMON_SCHEMA_NAMESPACE]
+};
+
+export function createSchemaProvidersFilter(hash: string): Filter {
+	return {
+		kinds: [TOOLS_LIST_KIND],
+		'#i': [hash]
+	};
+}
+
+export function createTagServersFilter(tag: string): Filter {
+	return {
+		kinds: [TOOLS_LIST_KIND],
+		'#t': [tag]
+	};
+}