continue scaffolding and refine the basic foundation

app/plugins/sync-app-state.client.ts

@@ -0,0 +1,34 @@
+/**
+ * Plugin to sync appState with route changes
+ * Ensures that activeAgentId and activeTopicId stay in sync with the URL
+ */
+export default defineNuxtPlugin(() => {
+    const route = useRoute();
+    const appState = useAppState();
+
+    // Sync agent ID from route params
+    watch(
+        () => route.params.id,
+        (newId) => {
+            if (newId) {
+                const agentId = Array.isArray(newId) ? newId[0] : newId;
+                appState.setActiveAgent(agentId);
+            }
+        },
+        { immediate: true }
+    );
+
+    // Sync topic ID from route params
+    watch(
+        () => route.params.topicId,
+        (newId) => {
+            if (newId) {
+                const topicId = Array.isArray(newId) ? newId[0] : newId;
+                appState.setActiveTopic(topicId);
+            } else {
+                appState.setActiveTopic(null);
+            }
+        },
+        { immediate: true }
+    );
+});

app/plugins/sync-app-state.server.ts

@@ -0,0 +1,14 @@
+export default defineNuxtPlugin(() => {
+    const route = useRoute();
+    const appState = useAppState();
+
+    if (route.params.id) {
+        const agentId = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id;
+        appState.setActiveAgent(agentId);
+    }
+
+    if (route.params.topicId) {
+        const topicId = Array.isArray(route.params.topicId) ? route.params.topicId[0] : route.params.topicId;
+        appState.setActiveTopic(topicId);
+    }
+});