@cat-factory/app 0.46.5 → 0.46.6

package/app/composables/api/client.ts

@@ -49,6 +49,13 @@ export function createApiClient(): WretchInstance {
   const apiBase = useRuntimeConfig().public.apiBase
   return wretch(apiBase).middlewares([
     (next) => async (url, opts) => {
+      // Tag every request with this tab's stable connection id (matched to the `?cid=` on
+      // the realtime WebSocket) so the backend can skip echoing a board mutation's coarse
+      // event back to the connection that caused it — see `utils/connectionId.ts`.
+      opts.headers = {
+        ...(opts.headers as Record<string, string> | undefined),
+        'X-Connection-Id': connectionId(),
+      }
       const token = useAuthStore().token
       if (token) {
         opts.headers = {

package/app/composables/useWorkspaceStream.ts

@@ -119,7 +119,11 @@ export function useWorkspaceStream() {
     // A workspace switch (or stop()) may have happened while awaiting the mint.
     if (stopped || workspace.workspaceId !== workspaceId) return
 
-    const query = ticket ? `?ticket=${encodeURIComponent(ticket)}` : ''
+    // Carry this tab's stable connection id so the backend can suppress echoing a board
+    // mutation's coarse event back to the connection that caused it (same id the api
+    // client sends as `X-Connection-Id`) — see `utils/connectionId.ts`.
+    const cid = `cid=${encodeURIComponent(connectionId())}`
+    const query = ticket ? `?ticket=${encodeURIComponent(ticket)}&${cid}` : `?${cid}`
     socket = new WebSocket(`${wsBase}/workspaces/${workspaceId}/events${query}`)
 
     socket.onopen = () => {

package/app/utils/connectionId.ts

@@ -0,0 +1,21 @@
+/**
+ * A stable per-tab connection id, generated once on first use. It rides on every REST
+ * request (the `X-Connection-Id` header, added in the api client) AND on the realtime
+ * WebSocket connect (`?cid=`), so the backend can recognise the connection that caused a
+ * board mutation and skip echoing the resulting coarse `board` event back to it.
+ *
+ * Without this, a client consumes the WebSocket event for its OWN move and runs a
+ * debounced full board refresh; a snapshot fetched mid-flight (between two rapid drags)
+ * carries a stale position, so the block snaps back to where it was after the previous
+ * move. Suppressing the self-echo leaves the originating client on its optimistic state +
+ * its own REST response (already the freshest), while other clients still refresh.
+ */
+let cached: string | null = null
+
+export function connectionId(): string {
+  if (cached) return cached
+  cached =
+    globalThis.crypto?.randomUUID?.() ??
+    `cid-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
+  return cached
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.46.5",
+  "version": "0.46.6",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",