feat(sds): initial commit for sds demo

examples/sds-demo/.gitignore

@@ -0,0 +1,25 @@
+node_modules
+
+.cursorrules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/sds-demo/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/sds-demo/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

examples/sds-demo/.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

examples/sds-demo/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

examples/sds-demo/eslint.config.js

@@ -0,0 +1,39 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		ignores: ['eslint.config.js', 'svelte.config.js'],
+
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

examples/sds-demo/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "sds-demo",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"@types/protobufjs": "^6.0.0",
+		"@waku/interfaces": "^0.0.28",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.0"
+	},
+	"dependencies": {
+		"@tanstack/svelte-virtual": "^3.13.5",
+		"@types/identicon.js": "^2.3.5",
+		"@waku/message-hash": "^0.1.17",
+		"@waku/sdk": "^0.0.30",
+		"@waku/utils": "^0.0.22",
+		"effect": "^3.14.1",
+		"identicon.js": "^2.3.3",
+		"protobufjs": "^7.4.0",
+		"svelte-sonner": "^0.3.28"
+	}
+}

examples/sds-demo/src/app.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

examples/sds-demo/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

examples/sds-demo/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

examples/sds-demo/src/lib/components/ActionButtons.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { startSending, subscribe, sweepIn, sweepOut } from '$lib/sds.svelte';
+  import { wakuNode } from '$lib/waku/waku.svelte';
+
+  let sendingInterval: NodeJS.Timeout | null = null;
+  let isSending = false;
+  let isListening = false;
+  let messageOption = '1'; // Options: '1', '5', '10', 'continuous'
+  let showDropdown = false;
+  let sweepInterval: NodeJS.Timeout | null = null;
+
+  function sweep() {
+    sweepIn();
+    sweepOut();
+  }
+
+  // Set up periodic sweep on component mount
+  onMount(() => {
+    sweepInterval = setInterval(sweep, 5000); // Call sweep every 5 seconds
+    return () => {
+      if (sweepInterval) clearInterval(sweepInterval);
+    };
+  });
+
+  function toggleSending() {
+    if (isSending) {
+      // Stop sending
+      if (sendingInterval) {
+        clearInterval(sendingInterval);
+        sendingInterval = null;
+      }
+      isSending = false;
+    } else {
+      // Handle different message count options
+      if (messageOption === 'continuous') {
+        // Start sending periodically (every 2 seconds)
+        startSending(); // Send immediately once
+        sendingInterval = setInterval(() => {
+          startSending();
+        }, 2000);
+        isSending = true;
+      } else {
+        // Send a specific number of messages
+        const count = parseInt(messageOption);
+        let sent = 0;
+        
+        const sendBatch = () => {
+          startSending();
+          sent++;
+          
+          if (sent >= count) {
+            clearInterval(sendingInterval!);
+            sendingInterval = null;
+            isSending = false;
+          }
+        };
+        
+        sendBatch(); // Send first message immediately
+        if (count > 1) {
+          sendingInterval = setInterval(sendBatch, 2000);
+          isSending = true;
+        }
+      }
+    }
+  }
+
+  function selectOption(option: string) {
+    messageOption = option;
+    showDropdown = false;
+  }
+
+  function toggleListening() {
+    if (!isListening) {
+      subscribe();
+      isListening = true;
+    } else {
+      wakuNode.unsubscribe();
+      isListening = false;
+    }
+  }
+
+  onDestroy(() => {
+    // Clean up interval when component is destroyed
+    if (sendingInterval) {
+      clearInterval(sendingInterval);
+    }
+    // Clean up sweep interval
+    if (sweepInterval) {
+      clearInterval(sweepInterval);
+    }
+    // Ensure we unsubscribe when component is destroyed
+    if (isListening) {
+      wakuNode.unsubscribe();
+    }
+  });
+</script>
+
+<div class="action-buttons">
+  <button class="listen-button" on:click={toggleListening}>
+    {isListening ? 'Stop Listening' : 'Listen'}
+  </button>
+  
+  <div class="send-dropdown-container">
+    <button class="send-button" on:click={toggleSending}>
+      {isSending ? 'Stop Sending' : 'Send'}
+    </button>
+    
+    <button class="dropdown-toggle" on:click={() => showDropdown = !showDropdown}>
+      {messageOption === 'continuous' ? '∞' : messageOption}
+      <span class="arrow">▼</span>
+    </button>
+    
+    {#if showDropdown}
+      <div class="dropdown-menu">
+        <div class="dropdown-item" on:click={() => selectOption('1')}>1</div>
+        <div class="dropdown-item" on:click={() => selectOption('5')}>5</div>
+        <div class="dropdown-item" on:click={() => selectOption('10')}>10</div>
+        <div class="dropdown-item" on:click={() => selectOption('continuous')}>∞</div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .action-buttons {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+  }
+
+  button {
+    padding: 0.4rem 1rem;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s ease;
+    min-width: 80px;
+  }
+
+  button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .listen-button {
+    background-color: #10B981;
+    color: white;
+  }
+
+  .listen-button:hover:not(:disabled) {
+    background-color: #059669;
+  }
+
+  .send-button {
+    background-color: #3B82F6;
+    color: white;
+  }
+
+  .send-button:hover {
+    background-color: #2563EB;
+  }
+  
+  .send-dropdown-container {
+    position: relative;
+    display: flex;
+  }
+  
+  .dropdown-toggle {
+    background-color: #2563EB;
+    color: white;
+    border-radius: 0 4px 4px 0;
+    border-left: 1px solid rgba(255, 255, 255, 0.3);
+    display: flex;
+    align-items: center;
+    padding: 0.4rem 0.6rem;
+    min-width: auto;
+  }
+  
+  .dropdown-toggle .arrow {
+    font-size: 0.7rem;
+    margin-left: 4px;
+  }
+  
+  .send-button {
+    border-radius: 4px 0 0 4px;
+  }
+  
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    min-width: 120px;
+    margin-top: 4px;
+  }
+  
+  .dropdown-item {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+  
+  .dropdown-item:hover {
+    background-color: #f0f9ff;
+  }
+</style> 

examples/sds-demo/src/lib/components/ActionModule.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import ActionButtons from './ActionButtons.svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import { processQueue } from '$lib/sds.svelte';
+  import { connectionState } from '../waku/waku.svelte';
+
+  let isComponentMounted = false;
+
+  async function runProcessQueue() {
+    if (!isComponentMounted) return;
+    
+    await processQueue();
+    
+    // Schedule the next run if component is still mounted
+    if (isComponentMounted) {
+      setTimeout(runProcessQueue, 1000);
+    }
+  }
+
+  onMount(() => {
+    isComponentMounted = true;
+    runProcessQueue();
+  });
+
+  onDestroy(() => {
+    isComponentMounted = false;
+  });
+</script>
+
+{#if $connectionState.status === "connected"}
+  <div class="compact-action-module">
+    <ActionButtons />
+  </div>
+{/if}
+
+<style>
+  .compact-action-module {
+    display: flex;
+    margin-right: 1rem;
+  }
+</style> 

examples/sds-demo/src/lib/components/CallToAction.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let message: string;
+  export let linkText: string = "";
+  export let linkHref: string = "";
+  export let marginTop: string = "mt-6";
+  export let messageMarginBottom: string = "mb-2";
+  export let useSlot: boolean = false;
+</script>
+
+<div class="{marginTop} pt-6 border-t border-gray-200 text-center w-full">
+  <p class="text-gray-600 {messageMarginBottom}">{message}</p>
+  {#if useSlot}
+    <slot />
+  {:else}
+    <a href={linkHref} class="text-blue-600 hover:text-blue-800 font-medium"
+      >{linkText} →</a
+    >
+  {/if}
+</div> 

examples/sds-demo/src/lib/components/ConnectionButton.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { startWaku, connectionState } from "../waku/waku.svelte";
+
+  export let size = "normal"; // can be "normal" or "large"
+
+  async function handleConnect() {
+    try {
+      await startWaku();
+    } catch (error) {
+      // Error is already handled in startWaku function
+      console.error("Connection error in component:", error);
+    }
+  }
+</script>
+
+<div class="connection-ui {size}">
+  {#if $connectionState.status === "disconnected"}
+    <button
+      on:click={handleConnect}
+      class="text-blue-600 hover:text-blue-800 font-medium">Connect →</button
+    >
+  {:else if $connectionState.status === "connecting"}
+    <span class="status animated-dots">Starting node . . .</span>
+  {:else if $connectionState.status === "waiting_for_peers"}
+    <span class="status animated-dots">Waiting for peers . . .</span>
+  {:else if $connectionState.status === "setting_up_subscriptions"}
+    <span class="status animated-dots">Setting up subscriptions . . .</span>
+  {:else if $connectionState.status === "connected"}
+    <span class="status connected">Connected</span>
+  {:else if $connectionState.status === "error"}
+    <div class="error-container">
+      <span class="error">Error: {$connectionState.error}</span>
+      <button on:click={handleConnect} class="text-blue-600 hover:text-blue-800 font-medium">Retry</button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .connection-ui {
+    display: flex;
+    align-items: center;
+  }
+
+  .connection-ui.large button {
+    font-size: 1.1rem;
+  }
+
+  .connection-ui.large .status {
+    font-size: 1.1rem;
+    padding: 0.75rem 1.5rem;
+  }
+
+  .error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .connection-ui.normal .error-container {
+    align-items: flex-end;
+  }
+
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    padding: 0;
+  }
+
+  .status {
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    background-color: #e5e7eb;
+    color: #374151;
+  }
+
+  .status.connected {
+    background-color: #d1fae5;
+    color: #065f46;
+  }
+
+  .error {
+    color: #b91c1c;
+    background-color: #fee2e2;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 300px;
+  }
+
+  .connection-ui.large .error {
+    font-size: 1rem;
+    max-width: 600px;
+  }
+
+  .animated-dots {
+    animation: dotAnimation 1.5s infinite;
+  }
+  
+  @keyframes dotAnimation {
+    0% { opacity: 0.3; }
+    50% { opacity: 1; }
+    100% { opacity: 0.3; }
+  }
+</style>

examples/sds-demo/src/lib/components/ConnectionIndicator.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { connectionState, startWaku } from "../waku/waku.svelte";
+  import { HealthStatus } from "@waku/sdk";
+  import { health, unregisterHealthListener } from "../waku/waku.svelte";
+  import { page } from '$app/state';
+
+  let healthStatus = $state(HealthStatus.Unhealthy);
+  let isHomePage = $state(false);
+  let shouldShowConnectButton = $state(false);
+
+  function startHealthCheck() {
+     health((health: HealthStatus) => {
+      healthStatus = health;
+    });
+  }
+
+  function stopHealthCheck() {
+    unregisterHealthListener((health: HealthStatus) => {
+      healthStatus = health;
+    });
+  }
+
+  $effect(() => {
+    if ($connectionState.status === "connected") {
+      startHealthCheck();
+    } else {
+      stopHealthCheck();
+    }
+  });
+
+  onMount(() => {
+    if ($connectionState.status === "connected") {
+      startHealthCheck();
+    }
+  });
+
+  onDestroy(() => {
+    stopHealthCheck();
+  });
+
+  function getHealthColor(status: HealthStatus) {
+    if ($connectionState.status !== "connected") {
+      return "gray";
+    }
+    switch (status) {
+      case HealthStatus.SufficientlyHealthy:
+        return "green";
+      case HealthStatus.MinimallyHealthy:
+        return "goldenrod";
+      case HealthStatus.Unhealthy:
+      default:
+        return "red";
+    }
+  }
+
+  function getHealthText(status: HealthStatus) {
+    if ($connectionState.status !== "connected") {
+      return "Node is not connected";
+    }
+    switch (status) {
+      case HealthStatus.SufficientlyHealthy:
+        return "Node is healthy";
+      case HealthStatus.MinimallyHealthy:
+        return "Node is minimally healthy";
+      case HealthStatus.Unhealthy:
+      default:
+        return "Node is unhealthy";
+    }
+  }
+
+  async function handleConnect() {
+    try {
+      await startWaku();
+    } catch (error) {
+      console.error("Connection error in header:", error);
+    }
+  }
+
+  // Check if current route is not the home page
+  $effect(() => {
+    isHomePage = page.url.pathname ? page.url.pathname === "/" : true;
+    updateButtonVisibility();
+  });
+  
+  $effect(() => {
+    updateButtonVisibility();
+  });
+  
+  function updateButtonVisibility() {
+    shouldShowConnectButton = !isHomePage && $connectionState.status !== "connected";
+  }
+</script>
+
+<div class="connection-status">
+  {#if shouldShowConnectButton}
+    <div class="header-connection-ui">
+      {#if $connectionState.status === "disconnected"}
+        <button
+          on:click={handleConnect}
+          class="connect-button px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition-colors duration-200 mr-2"
+        >
+          Connect
+        </button>
+      {:else if $connectionState.status === "connecting"}
+        <span class="status animated-dots">Starting node</span>
+      {:else if $connectionState.status === "waiting_for_peers"}
+        <span class="status animated-dots">Waiting for peers</span>
+      {:else if $connectionState.status === "setting_up_subscriptions"}
+        <span class="status animated-dots">Setting up subscriptions</span>
+      {:else if $connectionState.status === "error"}
+        <div class="error-container">
+          <button 
+            on:click={handleConnect}
+            class="connect-button px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition-colors duration-200 mr-2"
+          >
+            Retry
+          </button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+  <div class="status-wrapper">
+    <div
+      class="health-indicator"
+      style="background-color: {getHealthColor(healthStatus)}"
+    >
+      <span class="tooltip">{getHealthText(healthStatus)}</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .connection-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .status-wrapper {
+    position: relative;
+    margin-right: 1rem;
+  }
+
+  .health-indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    transition: background-color 0.3s ease;
+    cursor: help;
+    position: relative;
+  }
+
+  .tooltip {
+    visibility: hidden;
+    position: absolute;
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    
+    /* Position the tooltip below */
+    top: 100%;
+    right: 0;  /* Align to the right instead of center since we're near screen edge */
+    transform: translateX(0);  /* Remove horizontal centering */
+    margin-top: 8px;
+    
+    /* Ensure tooltip stays in viewport */
+    max-width: calc(100vw - 2rem);  /* Leave 1rem padding on each side */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    
+    /* Add a small triangle pointer */
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 100%;
+      right: 2px;  /* Align arrow with the indicator */
+      transform: translateX(0);
+      border-width: 4px;
+      border-style: solid;
+      border-color: transparent transparent #333 transparent;
+    }
+  }
+
+  /* Add animation for smooth appearance */
+  .health-indicator:hover .tooltip {
+    visibility: visible;
+    animation: fadeIn 0.2s ease-in-out;
+  }
+
+  .header-connection-ui {
+    display: flex;
+    align-items: center;
+  }
+
+  .connect-button {
+    font-size: 0.75rem;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .status {
+    font-size: 0.75rem;
+    padding: 0.35rem 0.7rem;
+    border-radius: 4px;
+    background-color: #e5e7eb;
+    color: #374151;
+    white-space: nowrap;
+    margin-right: 0.5rem;
+  }
+
+  .error-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .animated-dots {
+    animation: dotAnimation 1.5s infinite;
+  }
+  
+  @keyframes dotAnimation {
+    0% { opacity: 0.3; }
+    50% { opacity: 1; }
+    100% { opacity: 0.3; }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+</style>

examples/sds-demo/src/lib/components/Header.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  // Simple header component that accepts a slot
+</script>
+
+<div class="header">
+  <slot />
+</div>
+
+<style>
+  .header {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+</style>

examples/sds-demo/src/lib/components/History.svelte

@@ -0,0 +1,395 @@
+<script lang="ts">
+	import { subscribeToAllEventsStream } from '$lib/sds/stream.svelte';
+	import { MessageChannelEvent } from '@waku/sds';
+	import { onMount, onDestroy } from 'svelte';
+	import { getIdenticon } from '$lib/identicon.svelte';
+	import { getMessageId } from '$lib/sds/message';
+	import type { MessageChannelEventObject } from '$lib/sds/stream';
+
+	// Map event types to colors using index signature
+	const eventColors: { [key in string]: string } = {
+		[MessageChannelEvent.MessageSent]: '#3B82F6', // blue
+		[MessageChannelEvent.MessageDelivered]: '#10B981', // green
+		[MessageChannelEvent.MessageReceived]: '#8B5CF6', // purple
+		[MessageChannelEvent.MessageAcknowledged]: '#059669', // dark green
+		[MessageChannelEvent.PartialAcknowledgement]: '#6D28D9', // dark purple
+		[MessageChannelEvent.MissedMessages]: '#EF4444' // red
+	};
+
+	// Event type to display name using index signature
+	const eventNames: { [key in string]: string } = {
+		[MessageChannelEvent.MessageSent]: 'Sent',
+		[MessageChannelEvent.MessageDelivered]: 'Delivered',
+		[MessageChannelEvent.MessageReceived]: 'Received',
+		[MessageChannelEvent.MessageAcknowledged]: 'Acknowledged',
+		[MessageChannelEvent.PartialAcknowledgement]: 'Partially Acknowledged',
+		[MessageChannelEvent.MissedMessages]: 'Missed'
+	};
+
+	// Store for history items
+	let history: Array<MessageChannelEventObject> = $state([]);
+	let identicon: any = $state(null);
+	let currentFilter: string = $state('all');
+	let currentIdFilter: string | null = $state(null);
+
+	// Map of filter values to event types
+	const filterMap: { [key: string]: string | null } = {
+		all: null,
+		sent: MessageChannelEvent.MessageSent,
+		received: MessageChannelEvent.MessageReceived,
+		delivered: MessageChannelEvent.MessageDelivered,
+		acknowledged: MessageChannelEvent.MessageAcknowledged
+	};
+
+	// Calculate counts of each event type
+	let eventCounts = $derived({
+		all: history.length,
+		sent: history.filter((event) => event.type === MessageChannelEvent.MessageSent).length,
+		received: history.filter((event) => event.type === MessageChannelEvent.MessageReceived).length,
+		delivered: history.filter((event) => event.type === MessageChannelEvent.MessageDelivered)
+			.length,
+		acknowledged: history.filter((event) => event.type === MessageChannelEvent.MessageAcknowledged)
+			.length
+	});
+
+	// Filtered history based on selected filter and ID filter
+	let filteredHistory = $derived(
+		(() => {
+			// First filter by type
+			let result =
+				currentFilter === 'all'
+					? [...history]
+					: history.filter((event) => event.type === filterMap[currentFilter]);
+
+			// Then filter by ID if present
+			if (currentIdFilter) {
+				result = result.filter((event) => {
+					const id = getMessageId(event);
+
+					// Check direct ID match
+					if (id === currentIdFilter) {
+						return true;
+					}
+
+					// Check causal history for ID match
+					if (
+						(event.type === MessageChannelEvent.MessageSent ||
+							event.type === MessageChannelEvent.MessageReceived) &&
+						event.payload.causalHistory
+					) {
+						return event.payload.causalHistory.some(
+							(dependency) => dependency.messageId === currentIdFilter
+						);
+					}
+
+					return false;
+				});
+			}
+
+			return result;
+		})()
+	);
+
+	let identicons = $derived(
+		identicon &&
+			filteredHistory.map((event: MessageChannelEventObject) => {
+				const id = getMessageId(event);
+				// Handle the case where id could be null
+				return new identicon(id || '', { size: 40, format: 'svg' }).toString();
+			})
+	);
+
+	// Unsubscribe function
+	let unsubscribe: (() => void) | null = $state(null);
+
+	// Handle filter change
+	function handleFilterChange(event: Event) {
+		const select = event.target as HTMLSelectElement;
+		currentFilter = select.value;
+	}
+
+	// Handle event item click to filter by ID
+	function handleEventClick(id: string | null) {
+		if (id !== null) {
+			currentIdFilter = id;
+		}
+	}
+
+	// Handle dependency click to filter by dependency messageId
+	function handleDependencyClick(messageId: string, event: Event) {
+		// Stop event propagation so it doesn't trigger parent click handler
+		event.stopPropagation();
+		currentIdFilter = messageId;
+	}
+
+	// Clear ID filter
+	function clearIdFilter() {
+		currentIdFilter = null;
+	}
+
+	onMount(async () => {
+		identicon = await getIdenticon();
+		// Subscribe to the event stream and collect events
+		unsubscribe = subscribeToAllEventsStream((event) => {
+			// Add event to history with newest at the top
+			if (event.type === MessageChannelEvent.MissedMessages) {
+				return;
+			}
+			history = [event, ...history];
+		});
+	});
+
+	onDestroy(() => {
+		// Clean up the subscription when component is destroyed
+		if (unsubscribe) {
+			unsubscribe();
+		}
+	});
+</script>
+
+<div class="history-container">
+	<select class="item-filter" onchange={handleFilterChange} value={currentFilter}>
+		<option value="all">All ({eventCounts.all})</option>
+		<option value="sent">Sent ({eventCounts.sent})</option>
+		<option value="received">Received ({eventCounts.received})</option>
+		<option value="delivered">Delivered ({eventCounts.delivered})</option>
+		<option value="acknowledged">Acknowledged ({eventCounts.acknowledged})</option>
+	</select>
+
+	{#if currentIdFilter}
+		<div class="id-filter-badge">
+			<span class="id-label">ID: {currentIdFilter}</span>
+			<button class="clear-filter-btn" onclick={clearIdFilter}>×</button>
+		</div>
+	{/if}
+
+	{#each filteredHistory as event, index}
+		{@const color = eventColors[event.type] || '#888'}
+		{@const name = eventNames[event.type] || event.type}
+		{@const id = getMessageId(event)}
+		{@const matchesFilter = currentIdFilter && id === currentIdFilter}
+		<div class="history-item" onclick={() => handleEventClick(id)}>
+			<div class="item-container">
+				<div
+					class="event-box {matchesFilter ? 'highlight' : ''}"
+					style="background-color: {color};"
+				>
+					<div class="identicon">
+						<img src="data:image/svg+xml;base64,{identicons[index]}" alt="Identicon" />
+					</div>
+					<div class="event-info">
+						<div class="event-type">
+							{name}
+						</div>
+						<div class="event-id">
+							{id}
+						</div>
+					</div>
+					{#if event.type === MessageChannelEvent.MessageDelivered}
+						<div class="lamport-timestamp">
+							{event.payload.sentOrReceived}
+						</div>
+					{/if}
+					{#if event.type === MessageChannelEvent.MessageSent || event.type === MessageChannelEvent.MessageReceived}
+						<div class="lamport-timestamp">
+							{event.payload.lamportTimestamp}
+						</div>
+					{/if}
+				</div>
+				{#if event.type === MessageChannelEvent.MessageSent || event.type === MessageChannelEvent.MessageReceived}
+					{#each event.payload.causalHistory as dependency}
+						{@const dependencyMatchesFilter =
+							currentIdFilter && dependency.messageId === currentIdFilter}
+						<div
+							class="dependency-box {dependencyMatchesFilter ? 'highlight' : ''}"
+							style="background-color: {color};"
+							onclick={(event) => handleDependencyClick(dependency.messageId, event)}
+						>
+							{dependency.messageId}
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.history-container {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.virtualizer-container {
+		flex: 1;
+		overflow: auto;
+		padding: 10px;
+	}
+
+	.history-item {
+		padding: 8px;
+		width: 100%;
+		cursor: pointer;
+	}
+
+	.item-container {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 6px;
+		width: 100%;
+	}
+
+	.event-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		border-radius: 8px;
+		width: 100%;
+		min-height: 70px;
+		color: white;
+		padding: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		position: relative;
+		transition: box-shadow 0.3s ease;
+	}
+
+	.dependency-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		width: auto;
+		max-width: 80%;
+		min-height: 40px;
+		font-size: 11px;
+		font-family: monospace;
+		opacity: 0.85;
+		padding: 6px 12px;
+		border-radius: 8px;
+		color: white;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		transition: box-shadow 0.3s ease;
+	}
+
+	.highlight {
+		border-left: 4px solid white;
+		border-right: 4px solid white;
+		position: relative;
+		background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
+	}
+
+	.highlight .event-type {
+		font-size: 16px;
+		color: white;
+		font-weight: bold;
+		font-style: italic;
+		letter-spacing: 0.5px;
+	}
+
+	.highlight .event-id,
+	.dependency-box.highlight {
+		/* color: white; */
+		font-weight: bold;
+		font-style: italic;
+		letter-spacing: 0.5px;
+	}
+
+	.dependency-box.highlight {
+		font-size: 12px;
+		/* background-color: rgba(255, 255, 255, 0.2) !important; */
+	}
+
+	.identicon {
+		width: 40px;
+		height: 40px;
+		border-radius: 4px;
+		overflow: hidden;
+		margin-right: 12px;
+	}
+
+	.identicon img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	.identicon-placeholder {
+		width: 40px;
+		height: 40px;
+		border-radius: 4px;
+		background-color: rgba(255, 255, 255, 0.2);
+		margin-right: 12px;
+	}
+
+	.event-info {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.event-type {
+		font-size: 14px;
+		font-weight: bold;
+		text-align: left;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.event-id {
+		font-family: monospace;
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.7);
+		max-width: 220px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.lamport-timestamp {
+		position: absolute;
+		top: 8px;
+		right: 12px;
+		font-size: 12px;
+		color: rgba(255, 255, 255, 0.9);
+		font-weight: 500;
+	}
+
+	.id-filter-badge {
+		display: flex;
+		align-items: center;
+		background-color: #f3f4f6;
+		border-radius: 16px;
+		padding: 4px 12px;
+		margin: 8px 0;
+		max-width: fit-content;
+		font-size: 12px;
+	}
+
+	.id-label {
+		font-family: monospace;
+		margin-right: 8px;
+		max-width: 200px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.clear-filter-btn {
+		background: none;
+		border: none;
+		color: #6b7280;
+		font-size: 16px;
+		font-weight: bold;
+		cursor: pointer;
+		padding: 0 4px;
+	}
+
+	.clear-filter-btn:hover {
+		color: #1f2937;
+	}
+</style>

examples/sds-demo/src/lib/components/MessageDetails.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import type { Message } from "@waku/sds";
+
+    const { message }: { message: Message } = $props();
+</script>
+
+<div class="message-details">
+    <h1>{message.messageId}</h1>
+</div>

examples/sds-demo/src/lib/components/Missing.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { subscribeToMissingMessageStream } from '$lib/sds/stream.svelte';
+	import { MessageChannelEvent, type HistoryEntry } from '@waku/sds';
+	import { onMount, onDestroy } from 'svelte';
+	import { getIdenticon } from '$lib/identicon.svelte';
+	import { bytesToHex } from '@waku/utils/bytes';
+	// Map event types to colors using index signature
+	const eventColors: { [key in string]: string } = {
+		[MessageChannelEvent.MessageSent]: '#3B82F6', // blue
+		[MessageChannelEvent.MessageDelivered]: '#10B981', // green
+		[MessageChannelEvent.MessageReceived]: '#8B5CF6', // purple
+		[MessageChannelEvent.MessageAcknowledged]: '#059669', // dark green
+		[MessageChannelEvent.PartialAcknowledgement]: '#6D28D9', // dark purple
+		[MessageChannelEvent.MissedMessages]: '#EF4444' // red
+	};
+
+	// Store for history items
+	let missedMessages: HistoryEntry[] = $state([]);
+	let identicon: any = $state(null);
+
+	let identicons = $derived(
+		identicon &&
+			missedMessages.map((entry) => {
+				const id = entry.messageId;
+				return new identicon(id, { size: 40, format: 'svg' }).toString();
+			})
+	);
+
+	// Unsubscribe function
+	let unsubscribe: (() => void) | null = $state(null);
+
+	onMount(async () => {
+		identicon = await getIdenticon();
+		// Subscribe to the event stream and collect events
+		if (unsubscribe) {
+			unsubscribe();
+		}
+		unsubscribe = subscribeToMissingMessageStream((event) => {
+			missedMessages = event.payload;
+		});
+	});
+
+	onDestroy(() => {
+		// Clean up the subscription when component is destroyed
+		if (unsubscribe) {
+			unsubscribe();
+		}
+	});
+</script>
+
+<div class="history-container">
+	{#each missedMessages as entry, index}
+		{@const color = eventColors[MessageChannelEvent.MissedMessages]}
+		<div class="history-item">
+			<div class="item-container">
+				<div class="event-box" style="background-color: {color};">
+					<div class="identicon">
+						<img src="data:image/svg+xml;base64,{identicons[index]}" alt="Identicon" />
+					</div>
+					<div class="event-info">
+						<div class="event-id">
+							{entry.messageId}
+						</div>
+						{#if entry.retrievalHint}
+							<div class="event-id">
+								{bytesToHex(entry.retrievalHint)}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.history-container {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.virtualizer-container {
+		flex: 1;
+		overflow: auto;
+		padding: 10px;
+	}
+
+	.history-item {
+		padding: 8px;
+		width: 100%;
+	}
+
+	.item-container {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 6px;
+		width: 100%;
+	}
+
+	.event-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		border-radius: 8px;
+		width: 100%;
+		min-height: 70px;
+		color: white;
+		padding: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		position: relative;
+	}
+
+	.event-box.dependency {
+		margin-left: 0;
+		margin-right: 0;
+		margin-left: auto;
+		width: auto;
+		max-width: 80%;
+		min-height: 40px;
+		font-size: 11px;
+		font-family: monospace;
+		opacity: 0.85;
+		padding: 6px 12px;
+	}
+
+	.identicon {
+		width: 40px;
+		height: 40px;
+		border-radius: 4px;
+		overflow: hidden;
+		margin-right: 12px;
+	}
+
+	.identicon img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	.identicon-placeholder {
+		width: 40px;
+		height: 40px;
+		border-radius: 4px;
+		background-color: rgba(255, 255, 255, 0.2);
+		margin-right: 12px;
+	}
+
+	.event-info {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.event-type {
+		font-size: 14px;
+		font-weight: bold;
+		text-align: left;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.event-id {
+		font-family: monospace;
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.7);
+		max-width: 220px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.lamport-timestamp {
+		position: absolute;
+		top: 8px;
+		right: 12px;
+		font-size: 12px;
+		color: rgba(255, 255, 255, 0.9);
+		font-weight: 500;
+	}
+</style>

examples/sds-demo/src/lib/components/PageLayout.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  
+  type MaxWidthOption = "sm" | "md" | "lg" | "xl" | "2xl";
+  
+  export let maxWidth: MaxWidthOption = "md";
+  export let padding = "p-8";
+  export let margin = "sm:my-12 my-4";
+  export let title = "";
+  
+  const maxWidthClasses: Record<MaxWidthOption, string> = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    "2xl": "max-w-2xl",
+  };
+</script>
+
+<div class="relative min-h-screen">
+  <div 
+    class="{maxWidthClasses[maxWidth]} mx-auto {padding} bg-white rounded-lg sm:shadow-md absolute top-0 left-0 right-0 {margin}" 
+    in:fade={{ duration: 300 }}
+    out:fade={{ duration: 300 }}
+  >
+    {#if title}
+      <h1 class="text-2xl font-bold text-gray-800 mb-6 tracking-tight text-center">
+        {title}
+      </h1>
+    {/if}
+    
+    <slot />
+  </div>
+</div> 

examples/sds-demo/src/lib/components/WakuAwareButton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { wakuConnection } from "../connectionUtils";
+  
+  export let onClick: () => void;
+  export let label: string = "Action";
+  export let extraCondition: boolean = true;
+  export let className: string = "";
+  export let requireConnection: boolean = true;
+
+  // Whether to check connection status for this button
+  $: buttonProps = requireConnection 
+    ? $wakuConnection.getButtonProps(extraCondition)
+    : { 
+        disabled: !extraCondition, 
+        'aria-disabled': !extraCondition,
+        title: !extraCondition ? 'This action requires additional conditions to be met' : '',
+        class: !extraCondition ? 'opacity-50 cursor-not-allowed' : ''
+      };
+
+  function handleClick() {
+    if (!buttonProps.disabled) {
+      onClick();
+    }
+  }
+</script>
+
+<button
+  class="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600 {buttonProps.class} {className}"
+  on:click={handleClick}
+  disabled={buttonProps.disabled}
+  aria-disabled={buttonProps.disabled}
+  title={buttonProps.title}
+>
+  <slot>{label}</slot>
+</button> 

examples/sds-demo/src/lib/connectionUtils.ts

@@ -0,0 +1,45 @@
+import { derived } from 'svelte/store';
+import { connectionState } from './waku/waku.svelte';
+
+// A derived store that provides both connection state and utility functions
+export const wakuConnection = derived(
+  connectionState,
+  ($connectionState) => {
+    const isConnected = $connectionState.status === 'connected';
+    const isConnecting = $connectionState.status === 'connecting' || $connectionState.status === 'waiting_for_peers' || $connectionState.status === 'setting_up_subscriptions';
+    const hasError = $connectionState.status === 'error';
+    // const errorMessage = $connectionState.error;
+
+    return {
+      // Current connection state
+      status: $connectionState.status,
+      error: $connectionState.error,
+      
+      // Utility getters
+      isConnected,
+      isConnecting,
+      hasError,
+      
+      // Utility functions
+      disableIfNotConnected: (extraCondition = true) => {
+        return !isConnected || !extraCondition;
+      },
+      
+      // Function to get button attributes based on connection state
+      getButtonProps: (extraDisableCondition = true) => {
+        const disabled = !isConnected || !extraDisableCondition;
+        
+        return {
+          disabled,
+          title: disabled && !extraDisableCondition 
+            ? 'This action requires additional conditions to be met'
+            : disabled 
+              ? 'This action requires a connected Waku node' 
+              : '',
+          'aria-disabled': disabled,
+          class: disabled ? 'opacity-50 cursor-not-allowed' : ''
+        };
+      }
+    };
+  }
+); 

examples/sds-demo/src/lib/identicon.svelte.ts

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let Identicon: any = $state(null);
+
+export async function loadIdenticon() {
+  const identiconModule = await import("identicon.js");
+  Identicon = identiconModule.default;
+}
+
+export async function getIdenticon() {
+  if (!Identicon) {
+    await loadIdenticon();
+  }
+  return Identicon;
+}

examples/sds-demo/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

examples/sds-demo/src/lib/sds.svelte.ts

@@ -0,0 +1,56 @@
+import { encoder, wakuNode } from '$lib/waku/waku.svelte';
+import { type Message, MessageChannelEvent, encodeMessage, decodeMessage } from '@waku/sds';
+import { getChannel } from '$lib/sds/channel.svelte';
+import { messageHash } from '@waku/message-hash';
+
+const channel = getChannel();
+
+export function subscribe() {
+	wakuNode.subscribeToFilter((message) => {
+		const sdsMessage = decodeMessage(message.payload) as unknown as Message;
+		channel.receiveMessage(sdsMessage);
+	});
+}
+
+export async function processQueue() {
+	await channel.processTasks();
+}
+
+export function startSending() {
+	const randomHash = new Uint8Array(32);
+	crypto.getRandomValues(randomHash);
+	send(randomHash);
+}
+
+export function sweepOut() {
+	channel.sweepOutgoingBuffer();
+}
+
+export function sweepIn() {
+	channel.sweepIncomingBuffer();
+}
+
+async function send(payload: Uint8Array): Promise<void> {
+	await channel.sendMessage(payload, async (message: Message) => {
+		const encodedMessage = encodeMessage(message);
+		const protoMessage = await encoder.toProtoObj({
+			payload: encodedMessage,
+			timestamp: new Date()
+		});
+		const hash = messageHash(encoder.pubsubTopic, protoMessage);
+		const result = await wakuNode.sendWithLightPush(encodedMessage);
+		if (result.failures.length > 0) {
+			console.error('error sending message', result.failures);
+		}
+		return {
+			success: result.successes.length > 0,
+			retrievalHint: hash
+		};
+	});
+}
+
+export const history: {
+	messageId: string;
+	lamportTimestamp?: number;
+	event: MessageChannelEvent;
+}[] = $state([]);

examples/sds-demo/src/lib/sds/channel.svelte.ts

@@ -0,0 +1,9 @@
+import { MessageChannel } from '@waku/sds';
+
+const channelId = 'channel-id';
+
+const channel = $state(new MessageChannel(channelId));
+
+export function getChannel() {
+	return channel;
+}

examples/sds-demo/src/lib/sds/message.ts

@@ -0,0 +1,19 @@
+import { MessageChannelEvent } from "@waku/sds";
+import type { MessageChannelEventObject } from "./stream";
+
+export function getMessageId(event: MessageChannelEventObject) {
+    if(event.type === MessageChannelEvent.MessageSent) {
+        return event.payload.messageId;
+    } else if(event.type === MessageChannelEvent.MessageDelivered) {
+        return event.payload.messageId;
+    } else if(event.type === MessageChannelEvent.MessageReceived) {
+        return event.payload.messageId;
+    } else if(event.type === MessageChannelEvent.MessageAcknowledged) {
+        return event.payload;
+    } else if(event.type === MessageChannelEvent.PartialAcknowledgement) {
+        return event.payload.messageId;
+    } else if(event.type === MessageChannelEvent.MissedMessages) {
+        return event.payload[0].messageId;
+    }
+    return null;
+}

examples/sds-demo/src/lib/sds/stream.svelte.ts

@@ -0,0 +1,44 @@
+import { getChannel } from './channel.svelte';
+import { toEventStream, filterByEventType } from './stream';
+import { Effect, Stream, pipe } from 'effect';
+import type { MessageChannelEventObject } from './stream';
+import { MessageChannelEvent } from '@waku/sds';
+
+const eventStream = $state(toEventStream(getChannel()));
+
+const missingMessageEventStream = $derived(
+  pipe(
+    eventStream,
+    filterByEventType(MessageChannelEvent.MissedMessages)
+  )
+);
+
+export function subscribeToMissingMessageStream(onEvent: (event: Extract<MessageChannelEventObject, { type: MessageChannelEvent.MissedMessages }>) => void): () => void {
+  return subscribeToEventStream(missingMessageEventStream, onEvent);
+}
+
+export function subscribeToAllEventsStream(onEvent: (event: MessageChannelEventObject) => void): () => void {
+  return subscribeToEventStream(eventStream, onEvent);
+}
+
+
+function subscribeToEventStream<A extends MessageChannelEventObject>(stream: Stream.Stream<A>, onEvent: (event: A) => void): () => void {
+  const fiber = Effect.runFork(
+    pipe(
+      stream,
+      Stream.tap((event) => 
+        Effect.sync(() => {
+          onEvent(event);
+        })
+      ),
+      Stream.runDrain
+    )
+  );
+  return () => {
+    Effect.runFork(
+      Effect.sync(() => {
+        (fiber as unknown as { interrupt: () => void }).interrupt();
+      })
+    );
+  };
+}

examples/sds-demo/src/lib/sds/stream.ts

@@ -0,0 +1,65 @@
+import { Stream, pipe } from 'effect';
+import { MessageChannel, MessageChannelEvent, type MessageChannelEvents } from '@waku/sds';
+
+/**
+ * Extract payload types from MessageChannelEvents
+ */
+type EventPayloadMap = {
+	[K in keyof MessageChannelEvents]: MessageChannelEvents[K] extends CustomEvent<infer T>
+		? T
+		: never;
+};
+
+/**
+ * Union type for all possible event objects
+ */
+export type MessageChannelEventObject = {
+	[E in MessageChannelEvent]: { type: E; payload: EventPayloadMap[E] };
+}[MessageChannelEvent];
+
+/**
+ * Helper function to create a stream for a specific event type
+ */
+const fromMessageChannelEvent = <E extends MessageChannelEvent>(
+	channel: MessageChannel,
+	eventType: E
+): Stream.Stream<MessageChannelEventObject> => {
+	return Stream.map(
+		Stream.fromEventListener(channel, eventType, { passive: true }),
+		(event: Event) => {
+			const customEvent = event as CustomEvent<EventPayloadMap[E]>;
+			return {
+				type: eventType,
+				payload: customEvent.detail
+			} as MessageChannelEventObject;
+		}
+	);
+};
+
+/**
+ * Creates an Effect Stream from a MessageChannel's events
+ */
+export const toEventStream = (
+	channel: MessageChannel
+): Stream.Stream<MessageChannelEventObject> => {
+	return Stream.mergeAll(
+		Object.values(MessageChannelEvent).map((eventType) =>
+			fromMessageChannelEvent(channel, eventType as MessageChannelEvent)
+		),
+		{ concurrency: 'unbounded' }
+	);
+};
+
+// Add some convenience filtering methods
+export const filterByEventType =
+	<E extends MessageChannelEvent>(eventType: E) =>
+	<R, E2>(
+		stream: Stream.Stream<MessageChannelEventObject, E2, R>
+	): Stream.Stream<Extract<MessageChannelEventObject, { type: E }>, E2, R> =>
+		pipe(
+			stream,
+			Stream.filter(
+				(event): event is Extract<MessageChannelEventObject, { type: E }> =>
+					event.type === eventType
+			)
+		);

examples/sds-demo/src/lib/waku/waku.svelte.ts

@@ -0,0 +1,175 @@
+import {
+	createLightNode,
+	DecodedMessage,
+	type LightNode,
+	Protocols,
+	HealthStatus,
+	HealthStatusChangeEvents,
+	type ISubscription,
+	type SDKProtocolResult,
+	createDecoder,
+	createEncoder
+} from '@waku/sdk';
+import { writable } from 'svelte/store';
+
+const contentTopic = '/sds-demo/1/messages/proto';
+
+export const encoder = createEncoder({
+	contentTopic,
+	pubsubTopicShardInfo: { clusterId: 42, shard: 0 }
+});
+
+export const decoder = createDecoder(contentTopic, { clusterId: 42, shard: 0 });
+
+export class WakuNode {
+	public node = $state<LightNode | undefined>(undefined);
+
+	async setNode(node: LightNode) {
+		this.node = node;
+	}
+
+	public subscription: ISubscription | undefined;
+
+	public async subscribeToFilter(callback: (message: DecodedMessage) => void) {
+		if (!node) {
+			throw new Error('Waku node not started');
+		}
+
+		const result = await node.filter.subscribe([decoder], (message) => {
+			callback(message);
+		});
+
+		if (result.error) {
+			console.error('Error subscribing to filter:', result.error);
+			throw new Error('Failed to subscribe to filter');
+		}
+
+		// At this point TypeScript knows we have a SubscriptionSuccess
+		this.subscription = result.subscription;
+
+		if (result.results.failures.length > 0 || result.results.successes.length === 0) {
+			throw new Error('Failed to subscribe to filter: No successful peer connections');
+		}
+	}
+
+	public async unsubscribe() {
+		if (!node) {
+			throw new Error('Waku node not started');
+		}
+		await this.subscription?.unsubscribe([decoder.contentTopic]);
+	}
+
+	public async sendWithLightPush(payload: Uint8Array): Promise<SDKProtocolResult> {
+		if (!node) {
+			throw new Error('Waku node not started');
+		}
+		return await node.lightPush.send(encoder, {
+			payload: payload,
+			timestamp: new Date()
+		});
+	}
+}
+
+let node = $state<LightNode | undefined>(undefined);
+export const connectionState = writable({
+	status: 'disconnected' as
+		| 'error'
+		| 'disconnected'
+		| 'connecting'
+		| 'waiting_for_peers'
+		| 'setting_up_subscriptions'
+		| 'connected',
+	error: null as string | null
+});
+
+export const wakuNode = new WakuNode();
+
+export async function startWaku(): Promise<void> {
+	connectionState.update((state) => ({
+		...state,
+		status: 'connecting',
+		error: null
+	}));
+
+	try {
+		node = await createLightNode({
+			defaultBootstrap: false,
+			networkConfig: {
+				clusterId: 42,
+				shards: [0]
+			},
+			libp2p: {
+				connectionGater: {
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
+					denyDialMultiaddr: async (_) => {
+						return false;
+					}
+				},
+				filterMultiaddrs: false
+			}
+		});
+
+		await node.start();
+		await wakuNode.setNode(node);
+
+		// Connect to peers
+		await node.dial(
+			// "/dns4/node-01.do-ams3.waku.sandbox.status.im/tcp/8095/wss/p2p/16Uiu2HAmNaeL4p3WEYzC9mgXBmBWSgWjPHRvatZTXnp8Jgv3iKsb"
+			'/dns4/waku-test.bloxy.one/tcp/8095/wss/p2p/16Uiu2HAmSZbDB7CusdRhgkD81VssRjQV5ZH13FbzCGcdnbbh6VwZ'
+		);
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(window as any).waku = node;
+		connectionState.update((state) => ({
+			...state,
+			status: 'waiting_for_peers'
+		}));
+
+		// Wait for peer connections
+		try {
+			await node.waitForPeers([Protocols.LightPush, Protocols.Filter]);
+			connectionState.update((state) => ({
+				...state,
+				status: 'setting_up_subscriptions'
+			}));
+		} catch (error) {
+			console.error('Error waiting for peers:', error);
+		}
+
+		connectionState.update((state) => ({
+			...state,
+			status: 'connected'
+		}));
+	} catch (error) {
+		console.error('Error starting Waku node:', error);
+		connectionState.update((state) => ({
+			...state,
+			status: 'error',
+			error: error instanceof Error ? error.message : String(error)
+		}));
+		throw error;
+	}
+}
+
+export function health(callback: (health: HealthStatus) => void): void {
+	if (!node) {
+		return;
+	}
+	node.health.addEventListener(
+		HealthStatusChangeEvents.StatusChange,
+		(health: CustomEvent<HealthStatus>) => {
+			callback(health.detail);
+		}
+	);
+}
+
+export function unregisterHealthListener(callback: (health: HealthStatus) => void): void {
+	if (!node) {
+		return;
+	}
+	node.health.removeEventListener(
+		HealthStatusChangeEvents.StatusChange,
+		(health: CustomEvent<HealthStatus>) => {
+			callback(health.detail);
+		}
+	);
+}

examples/sds-demo/src/routes/+layout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    // import "../tailwind.css";
+    import "../app.css";
+    import Header from "$lib/components/Header.svelte";
+    import ConnectionIndicator from "$lib/components/ConnectionIndicator.svelte";
+    import ActionModule from "$lib/components/ActionModule.svelte";
+    import { Toaster } from 'svelte-sonner';
+    import { onMount } from 'svelte';
+    import { loadIdenticon } from '$lib/identicon.svelte';
+  
+    onMount(async () => {
+      await loadIdenticon();
+    });
+  </script>
+  
+  <div id="layout-container" class="fixed inset-0 overflow-hidden flex flex-col">
+    <Header>
+      <ActionModule />
+      <ConnectionIndicator />
+    </Header>
+    <div class="flex-1 overflow-auto">
+      <slot />
+    </div>
+  </div>
+  
+  <Toaster />
+  

examples/sds-demo/src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = false;

examples/sds-demo/src/routes/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import ConnectionButton from "$lib/components/ConnectionButton.svelte";
+	import { connectionState } from "$lib/waku/waku.svelte";
+	import PageLayout from "$lib/components/PageLayout.svelte";
+	import CallToAction from "$lib/components/CallToAction.svelte";
+	import { goto } from "$app/navigation";
+	// Redirect to history page when connected
+	$effect(() => {
+	  if ($connectionState.status === "connected") {
+		goto('/history');
+	  }
+	});
+  </script>
+  
+  <PageLayout title="Scalable Data Sync" maxWidth="md">
+	<div class="flex justify-center">
+	  <div class="w-64 h-64 overflow-hidden flex items-center justify-center perspective-500">
+		<img 
+		  src="/waku-mark-primary-black.svg" 
+		  alt="Waku Logo" 
+		  class="w-full h-full transform scale-125 {$connectionState.status === 'connecting' || $connectionState.status === 'waiting_for_peers' || $connectionState.status === 'setting_up_subscriptions' || $connectionState.status === 'connected' ? 'animate-spin-y' : ''}" 
+		/>
+	  </div>
+	</div>
+	
+	<CallToAction 
+	  message="Connect to the Waku network to get started"
+	  useSlot={true}
+	  marginTop="sm:mt-0 mt-10"
+	  messageMarginBottom="mb-4"
+	>
+	  <div class="w-full flex justify-center">
+		<ConnectionButton size="large" />
+	  </div>
+	</CallToAction>
+  </PageLayout>
+  
+  <style>
+	.perspective-500 {
+	  perspective: 500px;
+	}
+	
+	@keyframes spin-y {
+	  0% {
+		transform: scale(1.25) rotateY(0deg);
+	  }
+	  50% {
+		transform: scale(1.25) rotateY(180deg);
+	  }
+	  100% {
+		transform: scale(1.25) rotateY(360deg);
+	  }
+	}
+	
+	.animate-spin-y {
+	  animation: spin-y 10s infinite linear;
+	  transform-style: preserve-3d;
+	}
+  </style>
+  

examples/sds-demo/src/routes/history/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { connectionState } from "$lib/waku/waku.svelte";
+    import History from "$lib/components/History.svelte";
+    import Missing from "$lib/components/Missing.svelte";
+    import PageLayout from "$lib/components/PageLayout.svelte";
+    import { goto } from "$app/navigation";
+    import { onMount } from "svelte";
+    // Redirect to home page if not connected
+    onMount(() => {
+      if ($connectionState.status !== "connected") {
+        goto('/');
+      }
+    });
+  
+    // Also watch for disconnection
+    $effect(() => {
+      if ($connectionState.status !== "connected") {
+        goto('/');
+      }
+    });
+  </script>
+  
+<div class="flex flex-col sm:flex-row gap-4 sm:gap-6 px-4">
+  <div class="flex-1 w-full">
+    <PageLayout title="History" maxWidth="2xl" padding="sm:p-6 px-4" margin="sm:my-6 my-4">
+      <History />
+    </PageLayout>
+  </div>
+  
+  <div class="flex-1 w-full">
+    <PageLayout title="Missing" maxWidth="2xl" padding="sm:p-6 px-4" margin="sm:my-6 my-4">
+      <Missing />
+    </PageLayout>
+  </div>
+</div>
+  

examples/sds-demo/svelte.config.js

@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

examples/sds-demo/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

examples/sds-demo/vite.config.ts

@@ -0,0 +1,7 @@
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});