Add centralized error handler for sync Vue app

ts/AppSync.vue

@@ -1,14 +1,50 @@
+<style>
+.global-error-toast {
+	position: fixed;
+	top: 20px;
+	right: 20px;
+	background: #c00;
+	color: white;
+	padding: 16px 20px;
+	border-radius: 8px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	z-index: 9999;
+	max-width: 400px;
+	animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+	from {
+		transform: translateX(400px);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+</style>
+
 <template>
-	<router-view />
+	<div id="app">
+		<div v-if="error" class="global-error-toast">
+			{{ error.message }}
+			<button @click="errorClear">x</button>
+		</div>
+		<router-view />
+	</div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { apiClient } from "@/client";
 import router from "@/route/config";
+import { useErrorHandler } from "@/composable/error-handler";
 
 import { SSEManager, type SSEMessageResource } from "@/SSEManager";
 
+const { error, errorClear } = useErrorHandler();
+
 onMounted(() => {
 	SSEManager.connect("/api/events");
 	SSEManager.subscribe((msg: SSEMessageResource) => {

ts/composable/error-handler.ts

@@ -0,0 +1,29 @@
+import { ref } from "vue";
+
+interface ErrorState {
+	hasError: boolean;
+	message: string;
+	timestamp: Date;
+}
+
+const globalError = ref<ErrorState | null>(null);
+
+export function useErrorHandler() {
+	const setError = (error: Error) => {
+		globalError.value = {
+			hasError: true,
+			message: error.message,
+			timestamp: new Date(),
+		};
+	};
+
+	const errorClear = () => {
+		globalError.value = null;
+	};
+
+	return {
+		error: globalError,
+		setError,
+		errorClear,
+	};
+}