feat: 1-to-1 message render + web data-lake backend

frontend/src/lib/components/ui/ToastHost.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { toasts } from "$lib/stores/toasts.svelte";
+</script>
+
+<div class="Notification-container">
+  {#each toasts.items as toast (toast.id)}
+    <button
+      type="button"
+      class="Notification {toast.type}"
+      onclick={() => toasts.dismiss(toast.id)}
+    >
+      {toast.message}
+    </button>
+  {/each}
+</div>
+
+<style lang="scss">
+  .Notification-container {
+    pointer-events: none;
+    position: fixed;
+    z-index: var(--z-notification);
+    right: 0;
+    bottom: 1.25rem;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .Notification {
+    pointer-events: auto;
+    cursor: pointer;
+
+    max-width: 22rem;
+    padding: 0.75rem 1.25rem;
+    border: 0;
+    border-radius: var(--border-radius-toast);
+
+    font-size: 0.9375rem;
+    text-align: start;
+    color: var(--color-white);
+
+    background-color: var(--color-toast-background);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 0.25rem 0.75rem var(--color-default-shadow);
+
+    &.error {
+      background-color: var(--color-error);
+    }
+
+    &.success {
+      background-color: var(--color-green);
+    }
+  }
+</style>