Initial Commit, includes stubs from chat app

2026-05-22 23:51:50 +02:00
commit d4fed5db23
31 changed files with 9153 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.vscode
+.cursor
--- a/README.md
+++ b/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
--- a/components.json
+++ b/components.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "font": "playfair-display",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/style.css",
+    "baseColor": "mauve",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "pointer": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>my-vue-app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "my-vue-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@lucide/vue": "^1.16.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "reka-ui": "^2.9.8",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
+    "vue": "^3.5.34",
+    "vue-router": "^5.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.4",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "shadcn-vue": "^2.7.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12",
+    "vue-tsc": "^3.2.8"
+  }
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <HelloWorld />
+</template>
--- a/src/assets/hero.png
+++ b/src/assets/hero.png
--- a/src/assets/vite.svg
+++ b/src/assets/vite.svg
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/boot/app.ts
+++ b/src/boot/app.ts
@@ -0,0 +1,29 @@
+import { App } from '../services/app'
+
+import type { App as VueApp } from 'vue'
+import type { Router } from 'vue-router'
+
+export default async ({
+  app: vueApp,
+  router,
+}: {
+  app: VueApp
+  router: Router
+}): Promise<void> => {
+  console.log('booting app')
+
+  try {
+    // Instantiate new app instance.
+    const app = await App.create(router, { apiUrl: 'http://localhost:3000' })
+
+    // Inject the app instance so that all children can access it.
+    vueApp.provide('app', app)
+  } catch (error) {
+    // Log the error to the console.
+    console.error(error)
+    // Create a dialog that never resolves so execution does not continue.
+    await new Promise(() => {
+      alert(`Failed to initialize app: ${error}`)
+    })
+  }
+}
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,18 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import router from './router/index.js';
+import bootApp from './boot/app.js';
+
+import './style.css';
+
+const app = createApp(App);
+
+app.use(router);
+
+await bootApp({
+  app,
+  router,
+});
+
+app.mount('#app');
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -0,0 +1,14 @@
+
+<template>
+  <div class="home-page">
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+import HomePage from '@/pages/HomePage.vue';
+
+/**
+ * Application routes.
+ */
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomePage,
+  },
+];
+
+/**
+ * Vue Router instance.
+ */
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
+
--- a/src/services/api-client.ts
+++ b/src/services/api-client.ts
@@ -0,0 +1,213 @@
+import { EventEmitter } from "../utils/event-emitter";
+import { z } from "zod";
+
+export interface ApiClientOptions {
+  baseUrl: string;
+  tokens: AuthTokens;
+}
+
+export type AuthTokens = {
+  accessToken: string;
+  accessTokenExpiresAt: number;
+  refreshToken: string;
+  refreshTokenExpiresAt: number;
+}
+
+export type ApiClientEventMap = {
+  'tokens-refreshed': AuthTokens;
+}
+
+export class ApiClient extends EventEmitter<ApiClientEventMap> {
+  static AUTH_TOKENS_SCHEMA = z.object({
+    accessToken: z.string(),
+    accessTokenExpiresAt: z.number(),
+    refreshToken: z.string(),
+    refreshTokenExpiresAt: z.number(),
+  })
+
+  /**
+   * API responses for token refresh can omit `accessTokenExpiresAt` today, so
+   * this schema intentionally keeps the expiration optional and lets us derive it
+   * from the token payload when needed.
+   */
+  private static AUTH_TOKEN_REFRESH_RESPONSE_SCHEMA = z.object({
+    accessToken: z.string(),
+    accessTokenExpiresAt: z.number().optional(),
+    refreshToken: z.string().optional(),
+    refreshTokenExpiresAt: z.number().optional(),
+  })
+
+  private baseUrl: string;
+  private tokens: AuthTokens;
+
+  constructor(options: ApiClientOptions) {
+    super();
+
+    // validate the tokens
+    const { refreshToken, refreshTokenExpiresAt } = options.tokens;
+    const accessTokenExpiresAt = ApiClient.resolveAccessTokenExpiresAt(
+      options.tokens.accessToken,
+      options.tokens.accessTokenExpiresAt,
+    );
+
+    if (typeof accessTokenExpiresAt !== "number" || Number.isNaN(accessTokenExpiresAt)) {
+      throw new Error("Failed to resolve access token expiration from token payload");
+    }
+    
+    // If we have no refresh token or its expired, don't create the client
+    if (!refreshToken || !refreshTokenExpiresAt || refreshTokenExpiresAt < Date.now()) {
+      throw new Error('No refresh token found for user during creation');
+    }
+
+    // Create the client
+    this.baseUrl = options.baseUrl;
+    this.tokens = {
+      ...options.tokens,
+      accessTokenExpiresAt,
+    };
+  }
+
+  /**
+   * Send a JSON request to the API and return the parsed response.
+   * @param path - The path to the API endpoint.
+   * @param options - The options for the request.
+   * @returns The parsed response.
+   */
+  public async request<T>(path: string, options: RequestInit = {}): Promise<T> {
+    const headers: Record<string, any> = {
+      ...(options.headers || {}),
+    }
+
+    if (options.body !== undefined && options.body !== null && options.body !== '') {
+      headers['Content-Type'] = 'application/json';
+    }
+
+    const response = await this.requestRaw(path, {
+      ...options,
+      headers,
+    });
+    return response.json() as Promise<T>;
+  }
+
+  /**
+   * Send a request to the API and return the raw response.
+   * @param path - The path to the API endpoint.
+   * @param options - The options for the request.
+   * @returns The raw response.
+   */
+  public async requestRaw(path: string, options: RequestInit = {}): Promise<Response> {
+    // First, we are going to check if we need to refresh the tokens
+    if (this.tokens.accessTokenExpiresAt < Date.now()) {
+      console.log('Access Token Expired At:', new Date(this.tokens.accessTokenExpiresAt).toLocaleString('en-AU'));
+      await this.refreshTokens();
+    }
+
+    if (options.headers && options.headers instanceof Headers) {
+      options.headers = Object.fromEntries(options.headers.entries());
+    }
+
+    // Make the request
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      ...options,
+      headers: {
+        ...options.headers,
+        'Authorization': `Bearer ${this.tokens.accessToken}`,
+      },
+    });
+
+    return response;
+  }
+
+  /**
+   * Refresh the tokens for the API client.
+   * @returns The new tokens.
+   */
+  public async refreshTokens(): Promise<AuthTokens> {
+    // We need to refresh the tokens
+    const response = await fetch(`${this.baseUrl}/users/refresh`, {
+      method: 'POST',
+      body: JSON.stringify({ refreshToken: this.tokens.refreshToken }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    // If the response is not ok, throw an error
+    if (!response.ok) {
+      throw new Error(`API request failed (${response.status} ${response.statusText}): ${await response.text()}`);
+    }
+
+    // Parse the response
+    const data = ApiClient.AUTH_TOKEN_REFRESH_RESPONSE_SCHEMA.parse(await response.json());
+
+    const accessTokenExpiresAt = ApiClient.resolveAccessTokenExpiresAt(
+      data.accessToken,
+      data.accessTokenExpiresAt,
+    );
+    if (typeof accessTokenExpiresAt !== "number" || Number.isNaN(accessTokenExpiresAt)) {
+      throw new Error("Failed to resolve access token expiration from token refresh response");
+    }
+
+    // Update the tokens
+    this.tokens = {
+      accessToken: data.accessToken,
+      accessTokenExpiresAt,
+      refreshToken: data.refreshToken ?? this.tokens.refreshToken,
+      refreshTokenExpiresAt: data.refreshTokenExpiresAt ?? this.tokens.refreshTokenExpiresAt,
+    };
+    this.emit('tokens-refreshed', this.tokens);
+    return this.tokens;
+  }
+
+  /**
+   * Resolve the access token expiration timestamp.
+   *
+   * If `accessTokenExpiresAt` is missing, we parse the token payload from the
+   * first segment and read `expiresAt`.
+   *
+   * @param accessToken - Signed token in `payload.signature` format.
+   * @param accessTokenExpiresAt - Optional explicit expiresAt value from API payload.
+   * @returns The parsed expiration timestamp in milliseconds.
+   */
+  private static resolveAccessTokenExpiresAt(
+    accessToken: string,
+    accessTokenExpiresAt?: number,
+  ): number | undefined {
+    if (typeof accessTokenExpiresAt === "number") {
+      return accessTokenExpiresAt;
+    }
+
+    return ApiClient.parseAccessTokenExpiresAt(accessToken);
+  }
+
+  /**
+   * Read the `expiresAt` field from the base64url payload of the token.
+   *
+   * The token format is `base64urlPayload.base64PayloadSignature`.
+   *
+   * @param accessToken - Signed access token.
+   * @returns The expiresAt value from payload, when parseable.
+   */
+  private static parseAccessTokenExpiresAt(accessToken: string): number | undefined {
+    const [encodedPayload] = accessToken.split(".");
+    if (!encodedPayload) {
+      return undefined;
+    }
+
+    const normalizedPayload = encodedPayload
+      .replace(/-/g, '+')
+      .replace(/_/g, '/');
+    const paddedPayload = normalizedPayload + "=".repeat((4 - (normalizedPayload.length % 4)) % 4);
+
+    try {
+      const payloadJson = atob(paddedPayload);
+      const payload = JSON.parse(payloadJson) as { expiresAt?: number };
+      if (typeof payload.expiresAt !== "number") {
+        return undefined;
+      }
+      return payload.expiresAt;
+    } catch {
+      return undefined;
+    }
+  }
+}
--- a/src/services/app.ts
+++ b/src/services/app.ts
@@ -0,0 +1,43 @@
+import { inject } from 'vue';
+import { type Router } from 'vue-router';
+
+export type AppDependencies = {
+  router: Router;
+  apiUrl: string;
+};
+
+export class App {
+  //---------------------------------------------------------------------------
+  // Initialization
+  //---------------------------------------------------------------------------
+
+  public router: Router;
+  public apiUrl: string;
+
+  constructor(
+    dependencies: AppDependencies
+  ) {
+    this.router = dependencies.router;
+    this.apiUrl = dependencies.apiUrl;
+  }
+
+  static async create(router: Router, { apiUrl }: { apiUrl: string }) {
+    // Create new instance of app.
+    return new this(
+      {
+        router,
+        apiUrl,
+      }
+    );
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Composition API
+// Boilerplate for Vue3, so we can call useApp() to get the app instance inside a component.
+// -----------------------------------------------------------------------------
+export function useApp() {
+  const app = inject<App>('app');
+  if (!app) throw new Error('App not properly initialized');
+  return app;
+}
--- a/src/services/modals/catalog.ts
+++ b/src/services/modals/catalog.ts
@@ -0,0 +1,181 @@
+import { EventEmitter } from "../utils/event-emitter.js";
+import z from "zod";
+import { ref, shallowRef, triggerRef, type Ref, type ShallowRef } from "vue";
+
+export type MessageEventMap = {
+  'deleted': void;
+}
+
+export type MessageDependencies = {
+  apiClient: ApiClient
+}
+
+export type MessageCreateOptions = {
+  hydratePartsFromStorage?: boolean
+}
+
+export type MessageSchema = z.infer<typeof Message.MESSAGE_SCHEMA>
+
+export class Message extends EventEmitter<MessageEventMap> {
+  static MESSAGE_SCHEMA = z.object({
+    id: z.string(),
+    chatId: z.string(),
+    branchId: z.string().nullable().optional(),
+    branchOrdinal: z.number().nullable().optional(),
+    parentMessageId: z.string().nullable().optional(),
+    role: z.enum(["user", "assistant", "system", "tool"]),
+    status: z.string().nullable().optional(),
+    createdAt: z.number(),
+    updatedAt: z.number().optional(),
+
+    contentParts: z.array(MessagePart.MESSAGE_PART_SCHEMA).optional(),
+  })
+
+  /**
+   * Async generator that yields messages one-by-one in reverse chronological
+   * order (newest first). Raw message data is bulk-loaded and sorted upfront
+   * (fast), then each Message instance is created and yielded individually so
+   * the consumer can render recent messages immediately.
+   */
+  static async *fromStorage(deps: MessageDependencies): AsyncGenerator<Message> {
+    const { storage } = deps
+    const messageIds = await storage.keys()
+    if (messageIds.length === 0) return
+
+    // Bulk-load raw message data so we can sort before creating instances.
+    // IndexedDB reads are fast; the expensive work is creating Message
+    // instances and loading their parts.
+    const rawMessages = (await Promise.all(
+      messageIds.map(async (messageId) => storage.get<MessageSchema>(messageId))
+    )).filter((m): m is MessageSchema => m !== null)
+
+    // Sort newest-first so the most recent messages are yielded first
+    rawMessages.sort((a, b) => b.createdAt - a.createdAt)
+
+    for (const message of rawMessages) {
+      yield await Message.create(deps, message)
+    }
+  }
+
+  static async create(
+    deps: MessageDependencies,
+    message: MessageSchema,
+    options: MessageCreateOptions = {},
+  ): Promise<Message> {
+    const { storage } = deps
+
+    const messageStore = storage.child(message.id)
+
+    const messageInstance = new Message({ ...deps, storage: messageStore }, message)
+    if (message.contentParts?.length) {
+      await messageInstance.mergeInitialParts(message.contentParts)
+    }
+
+    if (options.hydratePartsFromStorage === false) {
+      await messageInstance.saveToStorage()
+      return messageInstance
+    }
+
+    await messageInstance.start();
+    return messageInstance;
+  }
+
+  private deps: MessageDependencies;
+
+  public data: Ref<MessageSchema> = ref<MessageSchema>({
+    id: '',
+    chatId: '',
+    branchId: null,
+    branchOrdinal: null,
+    parentMessageId: null,
+    role: 'user',
+    status: 'pending',
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+  })
+
+  public parts: ShallowRef<ExtMap<MessagePart>> = shallowRef<ExtMap<MessagePart>>(new ExtMap<MessagePart>())
+
+  constructor(deps: MessageDependencies, message: MessageSchema) {
+    super();
+    this.deps = deps;
+
+    const messageData: MessageSchema = { ...message }
+    delete messageData.contentParts
+    // Set the message's data
+    this.data.value = messageData;
+  }
+
+  async start(): Promise<void> {
+    // Load all parts in parallel but merge each one as soon as its data
+    // resolves. This is faster than sequential iteration (parts per message
+    // are few) while still triggering reactivity incrementally.
+    const partsStorage = this.deps.storage.child('message-parts')
+    const partIds = await partsStorage.keys()
+
+    await Promise.all(partIds.map(async (partId) => {
+      const partData = await partsStorage.get<MessagePartSchema>(partId)
+      if (!partData) return
+      await this.mergePart(partData)
+    }))
+
+    this.saveToStorage();
+  }
+
+  private async mergeInitialParts(parts: MessagePartSchema[]): Promise<void> {
+    for (const part of parts) {
+      await this.mergePart(part)
+    }
+  }
+
+  public async saveToStorage(): Promise<void> {
+    await this.deps.storage.set(this.data.value);
+  }
+
+  private async mergePart(part: MessagePartSchema): Promise<void> {
+    const existing = this.parts.value.get(part.id);
+    if (existing) {
+      existing.data.value = part;
+      await existing.saveToStorage();
+    } else {
+      const partInstance = await MessagePart.create({ ...this.deps, storage: this.deps.storage.child('message-parts') }, part);
+      this.parts.value.set(partInstance.data.value.id, partInstance);
+
+      partInstance.on('deleted', () => this.removePart(partInstance.data.value));
+    }
+
+    triggerRef(this.parts);
+  }
+
+  public async addPart(part: MessagePartSchema): Promise<void> {
+    await this.mergePart(part);
+    triggerRef(this.parts);
+  }
+
+  public async updatePart(part: MessagePartSchema): Promise<void> {
+    await this.mergePart(part);
+    triggerRef(this.parts);
+  }
+  
+  public removePart(part: MessagePartSchema): void {
+    this.parts.value.delete(part.id);
+    this.deps.storage
+      .child('message-parts')
+      .child(part.id)
+      .clear()
+      .catch((error) => console.error('Failed to clear deleted message part from storage:', error));
+    triggerRef(this.parts);
+  }
+
+  public async delete(): Promise<void> {
+    await this.deps.apiClient.requestRaw(`/messages/${this.data.value.id}`, {
+      method: 'DELETE',
+    });
+    await this.deps.storage.delete();
+    this.parts.value.forEach(part => part.delete());
+    this.parts.value.clear();
+    triggerRef(this.parts);
+
+    this.emit('deleted', undefined);
+  }
+}
--- a/src/services/modals/invitation.ts
+++ b/src/services/modals/invitation.ts
@@ -0,0 +1,188 @@
+import { EventEmitter } from "../utils/event-emitter.js";
+import z from "zod";
+import { ref, shallowRef, triggerRef, type Ref, type ShallowRef } from "vue";
+
+import type { BaseStore } from "./storage/base-store.js";
+import type { ApiClient } from "./api-client.js";
+
+import { ExtMap } from "../utils/ext-map.js";
+import { MessagePart, type MessagePartSchema } from './message-part.js';
+
+export type MessageEventMap = {
+  'deleted': void;
+}
+
+export type MessageDependencies = {
+  storage: BaseStore
+  apiClient: ApiClient
+}
+
+export type MessageCreateOptions = {
+  hydratePartsFromStorage?: boolean
+}
+
+export type MessageSchema = z.infer<typeof Message.MESSAGE_SCHEMA>
+
+export class Message extends EventEmitter<MessageEventMap> {
+  static MESSAGE_SCHEMA = z.object({
+    id: z.string(),
+    chatId: z.string(),
+    branchId: z.string().nullable().optional(),
+    branchOrdinal: z.number().nullable().optional(),
+    parentMessageId: z.string().nullable().optional(),
+    role: z.enum(["user", "assistant", "system", "tool"]),
+    status: z.string().nullable().optional(),
+    createdAt: z.number(),
+    updatedAt: z.number().optional(),
+
+    contentParts: z.array(MessagePart.MESSAGE_PART_SCHEMA).optional(),
+  })
+
+  /**
+   * Async generator that yields messages one-by-one in reverse chronological
+   * order (newest first). Raw message data is bulk-loaded and sorted upfront
+   * (fast), then each Message instance is created and yielded individually so
+   * the consumer can render recent messages immediately.
+   */
+  static async *fromStorage(deps: MessageDependencies): AsyncGenerator<Message> {
+    const { storage } = deps
+    const messageIds = await storage.keys()
+    if (messageIds.length === 0) return
+
+    // Bulk-load raw message data so we can sort before creating instances.
+    // IndexedDB reads are fast; the expensive work is creating Message
+    // instances and loading their parts.
+    const rawMessages = (await Promise.all(
+      messageIds.map(async (messageId) => storage.get<MessageSchema>(messageId))
+    )).filter((m): m is MessageSchema => m !== null)
+
+    // Sort newest-first so the most recent messages are yielded first
+    rawMessages.sort((a, b) => b.createdAt - a.createdAt)
+
+    for (const message of rawMessages) {
+      yield await Message.create(deps, message)
+    }
+  }
+
+  static async create(
+    deps: MessageDependencies,
+    message: MessageSchema,
+    options: MessageCreateOptions = {},
+  ): Promise<Message> {
+    const { storage } = deps
+
+    const messageStore = storage.child(message.id)
+
+    const messageInstance = new Message({ ...deps, storage: messageStore }, message)
+    if (message.contentParts?.length) {
+      await messageInstance.mergeInitialParts(message.contentParts)
+    }
+
+    if (options.hydratePartsFromStorage === false) {
+      await messageInstance.saveToStorage()
+      return messageInstance
+    }
+
+    await messageInstance.start();
+    return messageInstance;
+  }
+
+  private deps: MessageDependencies;
+
+  public data: Ref<MessageSchema> = ref<MessageSchema>({
+    id: '',
+    chatId: '',
+    branchId: null,
+    branchOrdinal: null,
+    parentMessageId: null,
+    role: 'user',
+    status: 'pending',
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+  })
+
+  public parts: ShallowRef<ExtMap<MessagePart>> = shallowRef<ExtMap<MessagePart>>(new ExtMap<MessagePart>())
+
+  constructor(deps: MessageDependencies, message: MessageSchema) {
+    super();
+    this.deps = deps;
+
+    const messageData: MessageSchema = { ...message }
+    delete messageData.contentParts
+    // Set the message's data
+    this.data.value = messageData;
+  }
+
+  async start(): Promise<void> {
+    // Load all parts in parallel but merge each one as soon as its data
+    // resolves. This is faster than sequential iteration (parts per message
+    // are few) while still triggering reactivity incrementally.
+    const partsStorage = this.deps.storage.child('message-parts')
+    const partIds = await partsStorage.keys()
+
+    await Promise.all(partIds.map(async (partId) => {
+      const partData = await partsStorage.get<MessagePartSchema>(partId)
+      if (!partData) return
+      await this.mergePart(partData)
+    }))
+
+    this.saveToStorage();
+  }
+
+  private async mergeInitialParts(parts: MessagePartSchema[]): Promise<void> {
+    for (const part of parts) {
+      await this.mergePart(part)
+    }
+  }
+
+  public async saveToStorage(): Promise<void> {
+    await this.deps.storage.set(this.data.value);
+  }
+
+  private async mergePart(part: MessagePartSchema): Promise<void> {
+    const existing = this.parts.value.get(part.id);
+    if (existing) {
+      existing.data.value = part;
+      await existing.saveToStorage();
+    } else {
+      const partInstance = await MessagePart.create({ ...this.deps, storage: this.deps.storage.child('message-parts') }, part);
+      this.parts.value.set(partInstance.data.value.id, partInstance);
+
+      partInstance.on('deleted', () => this.removePart(partInstance.data.value));
+    }
+
+    triggerRef(this.parts);
+  }
+
+  public async addPart(part: MessagePartSchema): Promise<void> {
+    await this.mergePart(part);
+    triggerRef(this.parts);
+  }
+
+  public async updatePart(part: MessagePartSchema): Promise<void> {
+    await this.mergePart(part);
+    triggerRef(this.parts);
+  }
+  
+  public removePart(part: MessagePartSchema): void {
+    this.parts.value.delete(part.id);
+    this.deps.storage
+      .child('message-parts')
+      .child(part.id)
+      .clear()
+      .catch((error) => console.error('Failed to clear deleted message part from storage:', error));
+    triggerRef(this.parts);
+  }
+
+  public async delete(): Promise<void> {
+    await this.deps.apiClient.requestRaw(`/messages/${this.data.value.id}`, {
+      method: 'DELETE',
+    });
+    await this.deps.storage.delete();
+    this.parts.value.forEach(part => part.delete());
+    this.parts.value.clear();
+    triggerRef(this.parts);
+
+    this.emit('deleted', undefined);
+  }
+}
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,20 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--font-serif);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/utils/event-emitter.ts
+++ b/src/utils/event-emitter.ts
@@ -0,0 +1,152 @@
+// TODO: You'll probably want to use WeakRef's here.
+
+export type EventMap = Record<string, unknown>;
+
+type Listener<T> = (detail: T) => void;
+
+interface ListenerEntry<T> {
+  listener: Listener<T>;
+  wrappedListener: Listener<T>;
+  debounceTime?: number;
+  once?: boolean;
+}
+
+export type OffCallback = () => void;
+
+export class EventEmitter<T extends EventMap> {
+  private listeners: Map<keyof T, Set<ListenerEntry<T[keyof T]>>> = new Map();
+
+  on<K extends keyof T>(
+    type: K,
+    listener: Listener<T[K]>,
+    debounceMilliseconds?: number,
+  ): OffCallback {
+    const wrappedListener =
+      debounceMilliseconds && debounceMilliseconds > 0
+        ? this.debounce(listener, debounceMilliseconds)
+        : listener;
+
+    if (!this.listeners.has(type)) {
+      this.listeners.set(type, new Set());
+    }
+
+    const listenerEntry: ListenerEntry<T[K]> = {
+      listener,
+      wrappedListener,
+      debounceTime: debounceMilliseconds,
+    };
+
+    this.listeners.get(type)?.add(listenerEntry as ListenerEntry<T[keyof T]>);
+
+    // Return an "off" callback that can be called to stop listening for events.
+    return () => this.off(type, listener);
+  }
+
+  once<K extends keyof T>(
+    type: K,
+    listener: Listener<T[K]>,
+    debounceMilliseconds?: number,
+  ): OffCallback {
+    const wrappedListener: Listener<T[K]> = (detail: T[K]) => {
+      this.off(type, listener);
+      listener(detail);
+    };
+
+    const debouncedListener =
+      debounceMilliseconds && debounceMilliseconds > 0
+        ? this.debounce(wrappedListener, debounceMilliseconds)
+        : wrappedListener;
+
+    if (!this.listeners.has(type)) {
+      this.listeners.set(type, new Set());
+    }
+
+    const listenerEntry: ListenerEntry<T[K]> = {
+      listener,
+      wrappedListener: debouncedListener,
+      debounceTime: debounceMilliseconds,
+      once: true,
+    };
+
+    this.listeners.get(type)?.add(listenerEntry as ListenerEntry<T[keyof T]>);
+
+    // Return an "off" callback that can be called to stop listening for events.
+    return () => this.off(type, listener);
+  }
+
+  off<K extends keyof T>(type: K, listener: Listener<T[K]>): void {
+    const listeners = this.listeners.get(type);
+    if (!listeners) return;
+
+    const listenerEntry = Array.from(listeners).find(
+      (entry) =>
+        entry.listener === listener || entry.wrappedListener === listener,
+    );
+
+    if (listenerEntry) {
+      listeners.delete(listenerEntry);
+    }
+  }
+
+  emit<K extends keyof T>(type: K, payload: T[K]): boolean {
+    const listeners = this.listeners.get(type);
+    if (!listeners) return false;
+
+    listeners.forEach((entry) => {
+      entry.wrappedListener(payload);
+    });
+
+    return listeners.size > 0;
+  }
+
+  removeAllListeners(): void {
+    this.listeners.clear();
+  }
+
+  async waitFor<K extends keyof T>(
+    type: K,
+    predicate: (payload: T[K]) => boolean,
+    timeoutMs?: number,
+  ): Promise<T[K]> {
+    return new Promise((resolve, reject) => {
+      let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+      const listener = (payload: T[K]) => {
+        if (predicate(payload)) {
+          // Clean up
+          this.off(type, listener);
+          if (timeoutId !== undefined) {
+            clearTimeout(timeoutId);
+          }
+          resolve(payload);
+        }
+      };
+
+      // Set up timeout if specified
+      if (timeoutMs !== undefined) {
+        timeoutId = setTimeout(() => {
+          this.off(type, listener);
+          reject(new Error(`Timeout waiting for event "${String(type)}"`));
+        }, timeoutMs);
+      }
+
+      this.on(type, listener);
+    });
+  }
+
+  private debounce<K extends keyof T>(
+    func: Listener<T[K]>,
+    wait: number,
+  ): Listener<T[K]> {
+    let timeout: ReturnType<typeof setTimeout>;
+
+    return (detail: T[K]) => {
+      if (timeout !== null) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => {
+        func(detail);
+      }, wait);
+    };
+  }
+}
--- a/src/utils/exponential-backoff.ts
+++ b/src/utils/exponential-backoff.ts
@@ -0,0 +1,156 @@
+/**
+ * Exponential backoff is a technique used to retry a function after a delay.
+ *
+ * The delay increases exponentially with each attempt, up to a maximum delay.
+ *
+ * The jitter is a random amount of time added to the delay to prevent thundering herd problems.
+ *
+ * The growth rate is the factor by which the delay increases with each attempt.
+ */
+export class ExponentialBackoff {
+    /**
+     * Create a new ExponentialBackoff instance
+     *
+     * @param config - The configuration for the exponential backoff
+     * @returns The ExponentialBackoff instance
+     */
+    static from(config?: Partial<ExponentialBackoffOptions>): ExponentialBackoff {
+      const backoff = new ExponentialBackoff(config);
+      return backoff;
+    }
+  
+    /**
+     * Run the function with exponential backoff
+     *
+     * @param fn - The function to run
+     * @param onError - The callback to call when an error occurs
+     * @param options - The configuration for the exponential backoff
+     *
+     * @throws The last error if the function fails and we have hit the max attempts
+     *
+     * @returns The result of the function
+     */
+    static run<T>(
+      fn: () => Promise<T>,
+      onError = (_error: Error) => {},
+      options?: Partial<ExponentialBackoffOptions>,
+    ): Promise<T> {
+      const backoff = ExponentialBackoff.from(options);
+      return backoff.run(fn, onError);
+    }
+  
+    private readonly options: ExponentialBackoffOptions;
+  
+    constructor(options?: Partial<ExponentialBackoffOptions>) {
+      this.options = {
+        maxDelay: 10000,
+        maxAttempts: 10,
+        baseDelay: 1000,
+        growthRate: 2,
+        jitter: 0.1,
+        ...options,
+      };
+    }
+  
+    /**
+     * Run the function with exponential backoff
+     *
+     * If the function fails but we have not hit the max attempts, the error will be passed to the onError callback
+     * and the function will be retried with an exponential delay
+     *
+     * If the function fails and we have hit the max attempts, the last error will be thrown
+     *
+     * @param fn - The function to run
+     * @param onError - The callback to call when an error occurs
+     *
+     * @throws The last error if the function fails and we have hit the max attempts
+     *
+     * @returns The result of the function
+     */
+    async run<T>(
+      fn: () => Promise<T>,
+      onError = (_error: Error) => {},
+    ): Promise<T> {
+      let lastError: Error = new Error("Exponential backoff: Max retries hit");
+  
+      let attempt = 0;
+  
+      while (
+        attempt < this.options.maxAttempts ||
+        this.options.maxAttempts == 0
+      ) {
+        try {
+          return await fn();
+        } catch (error) {
+          // Store the error in case we fail every attempt
+          lastError = error instanceof Error ? error : new Error(`${error}`);
+          onError(lastError);
+  
+          // Wait before going to the next attempt
+          const delay = this.calculateDelay(attempt);
+          await new Promise((resolve) => setTimeout(resolve, delay));
+        }
+  
+        attempt++;
+      }
+  
+      // We completed the loop without ever succeeding. Throw the last error we got
+      throw lastError;
+    }
+  
+    /**
+     * Calculate the delay before we should attempt to retry
+     *
+     * NOTE: The maximum delay is (maxDelay * (1 + jitter))
+     *
+     * @param attempt
+     * @returns The time in milliseconds before another attempt should be made
+     */
+    private calculateDelay(attempt: number): number {
+      // Get the power of the growth rate
+      const power = Math.pow(this.options.growthRate, attempt);
+  
+      // Get the delay before jitter or limit
+      const rawDelay = this.options.baseDelay * power;
+  
+      // Cap the delay to the maximum. Do this before the jitter so jitter does not become larger than delay
+      const cappedDelay = Math.min(rawDelay, this.options.maxDelay);
+  
+      // Get the jitter direction. This will be between -1 and 1
+      const jitterDirection = 2 * Math.random() - 1;
+  
+      // Calculate the jitter
+      const jitter = jitterDirection * this.options.jitter * cappedDelay;
+  
+      // Add the jitter to the delay
+      return cappedDelay + jitter;
+    }
+  }
+  
+  export type ExponentialBackoffOptions = {
+    /**
+     * The maximum delay between attempts in milliseconds
+     */
+    maxDelay: number;
+  
+    /**
+     * The maximum number of attempts. Passing 0 will result in infinite attempts.
+     */
+    maxAttempts: number;
+  
+    /**
+     * The base delay between attempts in milliseconds
+     */
+    baseDelay: number;
+  
+    /**
+     * The growth rate of the delay
+     */
+    growthRate: number;
+  
+    /**
+     * The jitter of the delay as a percentage of growthRate
+     */
+    jitter: number;
+  };
+  
--- a/src/utils/sse-session.ts
+++ b/src/utils/sse-session.ts
@@ -0,0 +1,435 @@
+import { ExponentialBackoff } from "./exponential-backoff.js";
+
+// Type declarations for browser environment (not available in Node.js)
+declare const document:
+  | {
+      visibilityState: "visible" | "hidden";
+      addEventListener: (
+        event: string,
+        handler: (event: Event) => void,
+      ) => void;
+      removeEventListener: (
+        event: string,
+        handler: (event: Event) => void,
+      ) => void;
+    }
+  | undefined;
+
+/**
+ * A Server-Sent Events client implementation using fetch API.
+ * Supports custom headers, POST requests, and is non-blocking.
+ */
+export class SSESession {
+  /**
+   * Creates and connects a new SSESession instance.
+   * @param url The URL to connect to
+   * @param options Configuration options
+   * @returns A new connected SSESession instance
+   */
+  public static async from(
+    url: string,
+    options: Partial<SSESessionOptions> = {},
+  ): Promise<SSESession> {
+    const client = new SSESession(url, options);
+    await client.connect();
+    return client;
+  }
+
+  // State.
+  private url: string;
+  private controller: AbortController;
+  private connected: boolean = false;
+  protected options: SSESessionOptions;
+  protected messageBuffer: Uint8Array = new Uint8Array();
+
+  // Listener for when the tab is hidden or shown.
+  private visibilityChangeHandler: ((event: Event) => void) | null = null;
+
+  // Text decoders and encoders for parsing the message buffer.
+  private textDecoder: TextDecoder = new TextDecoder();
+  private textEncoder: TextEncoder = new TextEncoder();
+
+  /**
+   * Creates a new SSESession instance.
+   * @param url The URL to connect to
+   * @param options Configuration options
+   */
+  constructor(url: string, options: Partial<SSESessionOptions> = {}) {
+    this.url = url;
+    this.options = {
+      // Use default fetch function.
+      fetch: (...args) => fetch(...args),
+      method: "GET",
+      headers: {
+        Accept: "text/event-stream",
+        "Cache-Control": "no-cache",
+      },
+      onConnected: () => {},
+      onMessage: () => {},
+      onError: (error) => console.error("SSESession error:", error),
+      onDisconnected: () => {},
+      onReconnect: (options) => Promise.resolve(options),
+
+      // Reconnection options
+      attemptReconnect: true,
+      retryDelay: 1000,
+      persistent: false,
+      ...options,
+    };
+    this.controller = new AbortController();
+
+    // Set up visibility change handling if in mobile browser environment
+    if (typeof document !== "undefined") {
+      this.visibilityChangeHandler = this.handleVisibilityChange.bind(this);
+      document.addEventListener(
+        "visibilitychange",
+        this.visibilityChangeHandler,
+      );
+    }
+  }
+
+  /**
+   * Handles visibility change events in the browser.
+   */
+  private async handleVisibilityChange(): Promise<void> {
+    // Guard for Node.js environment where document is undefined
+    if (typeof document === "undefined") return;
+
+    // When going to background, close the current connection cleanly
+    // This allows us to reconnect mobile devices when they come back after leaving the tab or browser app.
+    if (document.visibilityState === "hidden") {
+      this.controller.abort();
+    }
+
+    // When coming back to foreground, attempt to reconnect if not connected
+    if (document.visibilityState === "visible" && !this.connected) {
+      await this.connect();
+    }
+  }
+
+  /**
+   * Connects to the SSE endpoint.
+   */
+  public async connect(): Promise<void> {
+    if (this.connected) return;
+
+    this.connected = true;
+    this.controller = new AbortController();
+
+    const { method, headers, body } = this.options;
+
+    const fetchOptions: RequestInit = {
+      method,
+      headers: headers || {},
+      body: body || null,
+      signal: this.controller.signal,
+      cache: "no-store",
+    };
+
+    const exponentialBackoff = ExponentialBackoff.from({
+      baseDelay: this.options.retryDelay,
+      maxDelay: 10000,
+      maxAttempts: 0,
+      growthRate: 1.3,
+      jitter: 0.3,
+    });
+
+    // Establish the connection and get the reader using the exponential backoff
+    const reader = await exponentialBackoff.run(async () => {
+      const reconnectOptions = await this.handleCallback(
+        this.options.onReconnect,
+        fetchOptions,
+      );
+
+      const updatedFetchOptions = {
+        ...fetchOptions,
+        ...reconnectOptions,
+      };
+
+      const res = await this.options.fetch(this.url, updatedFetchOptions);
+      if (!res.ok) {
+        throw new Error(`HTTP error! Status: ${res.status}`);
+      }
+
+      if (!res.body) {
+        throw new Error("Response body is null");
+      }
+
+      return res.body.getReader();
+    });
+
+    // Call the onConnected callback
+    this.handleCallback(this.options.onConnected);
+
+    const readStream = async () => {
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+
+          if (done) {
+            this.connected = false;
+
+            // Call the onDisconnected callback.
+            this.handleCallback(this.options.onDisconnected, undefined);
+
+            // If the connection was closed by the server, we want to attempt a reconnect if the connection should be persistent.
+            if (this.options.persistent) {
+              await this.connect();
+            }
+
+            break;
+          }
+
+          const events = this.parseEvents(value);
+
+          for (const event of events) {
+            if (this.options.onMessage) {
+              this.handleCallback(this.options.onMessage, event);
+            }
+          }
+        }
+      } catch (error) {
+        this.connected = false;
+
+        // Call the onDisconnected callback.
+        this.handleCallback(this.options.onDisconnected, error);
+
+        // If the connection was aborted using the controller, we don't need to call onError.
+        if (this.controller.signal.aborted) {
+          return;
+        }
+
+        // Call the onError callback.
+        // NOTE: we dont use the handleCallback here because it would result in 2 error callbacks.
+        try {
+          this.options.onError(error);
+        } catch (error) {
+          console.log(`SSE Session: onError callback error:`, error);
+        }
+
+        // Attempt to reconnect if enabled
+        if (this.options.attemptReconnect) {
+          await this.connect();
+        }
+      }
+    };
+
+    readStream();
+
+    return;
+  }
+
+  protected parseEvents(chunk: Uint8Array): SSEvent[] {
+    // Append new chunk to existing buffer
+    this.messageBuffer = new Uint8Array([...this.messageBuffer, ...chunk]);
+
+    const events: SSEvent[] = [];
+    const lines = this.textDecoder
+      .decode(this.messageBuffer)
+      .split(/\r\n|\r|\n/);
+
+    let currentEvent: Partial<SSEvent> = {};
+    let completeEventCount = 0;
+
+    // Iterate over the lines to find complete events
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+
+      // Empty line signals the end of an event
+      if (line === "") {
+        if (currentEvent.data) {
+          // Remove trailing newline if present
+          currentEvent.data = currentEvent.data.replace(/\n$/, "");
+          events.push(currentEvent as SSEvent);
+          currentEvent = {};
+          completeEventCount = i + 1;
+        }
+        continue;
+      }
+
+      if (!line) continue;
+
+      // Parse field: value format
+      const colonIndex = line.indexOf(":");
+      if (colonIndex === -1) continue;
+
+      const field = line.slice(0, colonIndex);
+      // Skip initial space after colon if present
+      const valueStartIndex =
+        colonIndex + 1 + (line[colonIndex + 1] === " " ? 1 : 0);
+      const value = line.slice(valueStartIndex);
+
+      if (field === "data") {
+        currentEvent.data = currentEvent.data
+          ? currentEvent.data + "\n" + value
+          : value;
+      } else if (field === "event") {
+        currentEvent.event = value;
+      } else if (field === "id") {
+        currentEvent.id = value;
+      } else if (field === "retry") {
+        const retryMs = parseInt(value, 10);
+        if (!isNaN(retryMs)) {
+          currentEvent.retry = retryMs;
+        }
+      }
+    }
+
+    // Store the remainder of the buffer for the next chunk
+    const remainder = lines.slice(completeEventCount).join("\n");
+    this.messageBuffer = this.textEncoder.encode(remainder);
+
+    return events;
+  }
+
+  /**
+   * Override the onMessage callback.
+   *
+   * @param onMessage The callback to set.
+   */
+  public setOnMessage(onMessage: (event: SSEvent) => void): void {
+    this.options.onMessage = onMessage;
+  }
+
+  /**
+   * Closes the SSE connection and cleans up event listeners.
+   */
+  public close(): void {
+    // Clean up everything including the visibility handler
+    this.controller.abort();
+
+    // Remove the visibility handler (This is only required on browsers)
+    if (this.visibilityChangeHandler && typeof document !== "undefined") {
+      document.removeEventListener(
+        "visibilitychange",
+        this.visibilityChangeHandler,
+      );
+      this.visibilityChangeHandler = null;
+    }
+  }
+
+  /**
+   * Checks if the client is currently connected.
+   * @returns Whether the client is connected
+   */
+  public isConnected(): boolean {
+    return this.connected;
+  }
+
+  /**
+   * Will handle thrown errors from the callback and call the onError callback.
+   * This is to avoid the sse-session from disconnecting from errors that are not a result of the sse-session itself.
+   *
+   * @param callback The callback to handle.
+   * @param args The arguments to pass to the callback.
+   */
+  private handleCallback<T extends (...args: Parameters<T>) => ReturnType<T>>(
+    callback: T,
+    ...args: Parameters<T>
+  ): ReturnType<T> | undefined {
+    try {
+      return callback(...args);
+    } catch (error) {
+      try {
+        this.options.onError(error);
+      } catch (error) {
+        console.log(`SSE Session: onError callback error:`, error);
+      }
+    }
+  }
+}
+
+/**
+ * Configuration options for the SSESession.
+ */
+export interface SSESessionOptions {
+  /**
+   * The fetch function to use.
+   *
+   * NOTE: This is compatible with Browser/Node's native "fetcH" function.
+   *       We use this in place of "typeof fetch" so that we can accept non-standard URLs ("url" is a "string" here).
+   *       For example, a LibP2P adapter might not use a standardized URL format (and might only include "path").
+   *       This would cause a type error as native fetch expects type "URL".
+   */
+  fetch: (url: string, options: RequestInit) => Promise<Response>;
+
+  /**
+   * HTTP method to use (GET or POST).
+   */
+  method: "GET" | "POST";
+
+  /**
+   * HTTP headers to send with the request.
+   */
+  headers?: Record<string, string>;
+
+  /**
+   * Body to send with POST requests.
+   */
+  body?: string | FormData;
+
+  /**
+   * Called when the connection is established.
+   */
+  onConnected: () => void;
+
+  /**
+   * Called when a message is received.
+   */
+  onMessage: (event: SSEvent) => void;
+
+  /**
+   * Called when an error occurs.
+   */
+  onError: (error: unknown) => void;
+
+  /**
+   * Called when the connection is closed.
+   */
+  onDisconnected: (error: unknown) => void;
+
+  /*
+   * Called when the connection is going to try to reconnect.
+   */
+  onReconnect: (options: RequestInit) => Promise<RequestInit>;
+
+  /**
+   * Whether to attempt to reconnect.
+   */
+  attemptReconnect: boolean;
+
+  /**
+   * The delay in milliseconds between reconnection attempts.
+   */
+  retryDelay: number;
+
+  /**
+   * Whether to reconnect when the session is terminated by the server.
+   */
+  persistent: boolean;
+}
+
+/**
+ * Represents a Server-Sent Event.
+ */
+export interface SSEvent {
+  /**
+   * Event data.
+   */
+  data: string;
+
+  /**
+   * Event type.
+   */
+  event?: string;
+
+  /**
+   * Event ID.
+   */
+  id?: string;
+
+  /**
+   * Reconnection time in milliseconds.
+   */
+  retry?: number;
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`