@cat-factory/app 0.26.2 → 0.26.4

package/app/components/board/nodes/BlockNode.vue

@@ -343,8 +343,11 @@ const ITEM_ICON: Record<string, string> = {
       <div class="space-y-3 p-4">
         <!-- frame header (doubles as the drag handle for the expanded frame) -->
         <div class="flex items-start justify-between gap-2">
+          <!-- `nopan` stops Vue Flow's pane from panning on a left-drag that starts on
+               this handle (it pans via d3-zoom's mousedown, which our pointerdown
+               stopPropagation can't intercept), so the grab drives the frame move. -->
           <div
-            class="flex cursor-grab items-center gap-2 active:cursor-grabbing"
+            class="nopan flex cursor-grab items-center gap-2 active:cursor-grabbing"
             title="Drag service"
             @pointerdown="onFrameHandle"
           >
@@ -428,19 +431,21 @@ const ITEM_ICON: Record<string, string> = {
             <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> Add the first task
           </button>
 
-          <!-- resize handles (drag the borders to resize the service, Miro-style) -->
+          <!-- resize handles (drag the borders to resize the service, Miro-style).
+               `nopan` (alongside `nodrag`) so the pane doesn't pan while resizing —
+               same reason as the header handle above. -->
           <div
-            class="nodrag absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20"
+            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20"
             title="Drag to resize"
             @pointerdown="onResize($event, 'e')"
           />
           <div
-            class="nodrag absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20"
+            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20"
             title="Drag to resize"
             @pointerdown="onResize($event, 's')"
           />
           <div
-            class="nodrag absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
+            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
             title="Drag to resize"
             @pointerdown="onResize($event, 'se')"
           >

package/app/components/board/nodes/DraggableTask.vue

@@ -34,9 +34,9 @@ function onHandle(e: PointerEvent) {
         pointerEvents: draggingId === taskId ? 'none' : undefined,
       }"
     >
-      <!-- drag handle -->
+      <!-- drag handle (`nopan` so the pane doesn't pan on a left-drag from here) -->
       <div
-        class="nodrag flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing"
+        class="nodrag nopan flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing"
         title="Drag task"
         @pointerdown="onHandle"
       >

package/app/components/board/nodes/ModuleFrame.vue

@@ -48,9 +48,9 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
       zIndex: draggingId === moduleId ? 50 : 5,
     }"
   >
-    <!-- module header / drag handle -->
+    <!-- module header / drag handle (`nopan` so a left-drag moves it, not the pane) -->
     <div
-      class="nodrag flex h-[30px] cursor-grab items-center gap-1 rounded-t-xl bg-violet-500/15 px-2 active:cursor-grabbing"
+      class="nodrag nopan flex h-[30px] cursor-grab items-center gap-1 rounded-t-xl bg-violet-500/15 px-2 active:cursor-grabbing"
       @pointerdown="onHandle"
       @click.stop="ui.select(moduleId)"
     >
@@ -73,19 +73,20 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
       <DraggableTask v-for="t in tasks" :key="t.id" :task-id="t.id" />
     </div>
 
-    <!-- resize handles (drag the borders to resize the module, Miro-style) -->
+    <!-- resize handles (drag the borders to resize the module, Miro-style).
+         `nopan` (with `nodrag`) so resizing doesn't pan the pane. -->
     <div
-      class="nodrag absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20"
+      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20"
       title="Drag to resize"
       @pointerdown="onResize($event, 'e')"
     />
     <div
-      class="nodrag absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20"
+      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20"
       title="Drag to resize"
       @pointerdown="onResize($event, 's')"
     />
     <div
-      class="nodrag absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
+      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
       title="Drag to resize"
       @pointerdown="onResize($event, 'se')"
     >

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -30,6 +30,7 @@ const RECOMMENDED_SLUGS = [
   'openai/gpt-5.5',
   'google/gemini-3-pro',
   'deepseek/deepseek-chat',
+  'moonshotai/kimi-k2.7-code',
 ]
 
 // Whether the workspace/user has an OpenRouter key connected at any reachable scope.
@@ -105,18 +106,35 @@ async function connectKey() {
   if (!keyValue.value.trim() || !workspace.workspaceId) return
   connectingKey.value = true
   try {
+    const scope = keyScope.value
     const input = {
       provider: 'openrouter' as const,
       label: keyLabel.value.trim() || 'openrouter key',
       key: keyValue.value.trim(),
     }
-    if (keyScope.value === 'workspace') await apiKeys.addWorkspaceKey(input)
-    else await apiKeys.addUserKey(input)
+    // The save endpoint stores the key WITHOUT validating it, so a wrong/expired key
+    // would otherwise be reported as "connected". Probe OpenRouter with the freshly
+    // stored key and only announce success when it's actually reachable; on rejection
+    // roll the key back so `keyConnected` stays false and the form remains for a retry.
+    const created =
+      scope === 'workspace' ? await apiKeys.addWorkspaceKey(input) : await apiKeys.addUserKey(input)
+    const result = await store.refresh(workspace.workspaceId)
+    if (!result.reachable) {
+      if (created) {
+        if (scope === 'workspace') await apiKeys.removeWorkspaceKey(created.id).catch(() => {})
+        else await apiKeys.removeUserKey(created.id).catch(() => {})
+      }
+      toast.add({
+        title: 'Could not connect key',
+        description: store.refreshError ?? 'OpenRouter rejected the key.',
+        icon: 'i-lucide-triangle-alert',
+        color: 'error',
+      })
+      return
+    }
     keyValue.value = ''
     keyLabel.value = ''
     toast.add({ title: 'OpenRouter key connected', icon: 'i-lucide-check', color: 'success' })
-    // Now that a key exists, load the live catalog automatically.
-    await refresh()
   } catch (e) {
     toast.add({
       title: 'Could not connect key',

package/app/stores/apiKeys.ts

@@ -39,6 +39,7 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
     if (!workspaceId.value) return
     const created = await api.addWorkspaceApiKey(workspaceId.value, input)
     workspaceKeys.value = [...workspaceKeys.value, created]
+    return created
   }
 
   async function removeWorkspaceKey(id: string) {
@@ -50,6 +51,7 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
   async function addUserKey(input: AddApiKeyInput) {
     const created = await api.addMyApiKey(input)
     userKeys.value = [...userKeys.value, created]
+    return created
   }
 
   async function removeUserKey(id: string) {

package/package.json

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