@cat-factory/app 0.46.5 → 0.46.7

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/stores/ui.ts

@@ -411,7 +411,7 @@ export const useUiStore = defineStore('ui', () => {
   // panel opened outside the hubs never grows a dead Back control, and so switching from
   // one hub's panel to the other's clears the stale marker.
   function resetHubReturn() {
-    resetHubReturn()
+    cameFromIntegrations.value = false
     cameFromPersonal.value = false
   }
   function openIntegrations() {

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/nuxt.config.ts

@@ -81,6 +81,24 @@ export default defineNuxtConfig({
     join(layerDir, 'app/assets/css/main.css'),
   ],
 
+  // Force Vite to pre-bundle `fast-querystring` (a CommonJS dep reached via
+  // @toad-contracts/frontend-http-client). Left un-optimized, Vite serves its raw CJS
+  // from @fs where cjs-module-lexer can't see the named `stringify` export (the module
+  // uses a `module.exports = x; module.exports.stringify = …` reassignment), so the SPA
+  // throws at runtime:
+  //   SyntaxError: … fast-querystring/lib/index.js does not provide an export named 'stringify'
+  // Pre-bundling makes esbuild emit an ESM wrapper with proper CJS interop.
+  //
+  // This config is resolved from the CONSUMER app's root (the deployment that `extends`
+  // this layer), where — under pnpm's strict layout — only this layer (`@cat-factory/app`)
+  // is hoisted; `frontend-http-client`/`fast-querystring` are not. So anchor the nested
+  // `a > b > c` specifier at `@cat-factory/app` and let Vite resolve each hop from there.
+  vite: {
+    optimizeDeps: {
+      include: ['@cat-factory/app > @toad-contracts/frontend-http-client > fast-querystring'],
+    },
+  },
+
   app: {
     head: {
       title: 'Agent Architecture Board',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.46.5",
+  "version": "0.46.7",
   "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",