@cat-factory/app 0.26.3 → 0.26.5

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/tasks/TaskImportModal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-// Import an issue from a connected task source (by key or URL) and review the
-// issues already imported into the workspace. An imported issue can be attached
-// to an existing task for context from the inspector (see TaskContextIssues.vue),
-// or turned into a new board task here: pick a container (service frame or module),
-// then click an issue to open the prefilled add-task form (title seeded, issue
-// staged as linked context) where the user confirms the pipeline / presets before
-// creating it. A separate icon button on each row opens the issue on GitHub.
+// Import an issue from a connected task source (by key or URL). An imported issue
+// can be attached to an existing task for context from the inspector (see
+// TaskContextIssues.vue), or turned into a new board task here: pick a container
+// (service frame or module), then click a search hit to open the prefilled
+// add-task form (title seeded, issue staged as linked context) where the user
+// confirms the pipeline / presets before creating it. A separate icon button on
+// each row opens the issue on GitHub.
 import type { TaskSearchResult, TaskSourceKind } from '~/types/domain'
 import type { AddTaskPrefill } from '~/stores/ui'
 
@@ -85,10 +85,6 @@ const freshHits = computed(() =>
   searchResults.value.filter((r) => !importedIds.value.has(r.externalId)),
 )
 
-const sourceTasks = computed(() =>
-  source.value ? tasks.tasks.filter((t) => t.source === source.value) : [],
-)
-
 // Containers a new task can be created in: every service frame and module on the
 // board. Modules are labelled with their parent frame so the choice is unambiguous.
 const containerItems = computed(() =>
@@ -262,7 +258,7 @@ async function doSpawnEpic() {
         <!-- Container for epic children when spawning from a pasted ref (the shared
              "Create tasks in" selector below covers the search-results case). -->
         <UFormField
-          v-if="containerItems.length && !freshHits.length && !sourceTasks.length"
+          v-if="containerItems.length && !freshHits.length"
           label="Epic children container"
           class="w-72"
         >
@@ -288,7 +284,7 @@ async function doSpawnEpic() {
 
         <!-- Shared target container for every "Create task" action below. -->
         <UFormField
-          v-if="containerItems.length && (freshHits.length || sourceTasks.length)"
+          v-if="containerItems.length && freshHits.length"
           label="Create tasks in"
           class="w-72"
         >
@@ -300,7 +296,7 @@ async function doSpawnEpic() {
           />
         </UFormField>
         <p
-          v-else-if="!containerItems.length && (freshHits.length || sourceTasks.length)"
+          v-else-if="!containerItems.length && freshHits.length"
           class="text-[11px] text-slate-500"
         >
           Add a service frame to the board first to create tasks from issues.
@@ -352,52 +348,11 @@ async function doSpawnEpic() {
           </div>
         </div>
 
-        <!-- List of already-imported issues -->
-        <div v-if="sourceTasks.length" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            Imported issues
-          </h3>
-          <div
-            v-for="task in sourceTasks"
-            :key="`${task.source}:${task.externalId}`"
-            class="flex items-start justify-between gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-3 transition-colors hover:border-primary-500/60 hover:bg-slate-900"
-          >
-            <button
-              type="button"
-              class="min-w-0 flex-1 text-left disabled:cursor-not-allowed disabled:opacity-60"
-              :disabled="!containerId"
-              :title="containerId ? 'Create a task from this issue' : 'Pick a container first'"
-              @click="selectIssue(task, false)"
-            >
-              <span class="block truncate text-sm font-medium text-white">
-                {{ task.externalId }} · {{ task.title }}
-              </span>
-              <span class="mt-0.5 line-clamp-2 block text-xs text-slate-500">{{
-                task.excerpt
-              }}</span>
-            </button>
-            <div class="flex shrink-0 items-center gap-2">
-              <UBadge color="neutral" variant="soft" size="xs">
-                {{ task.status }}
-              </UBadge>
-              <UButton
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                icon="i-lucide-external-link"
-                :to="task.url"
-                target="_blank"
-                rel="noopener"
-                :aria-label="`View ${task.externalId} on GitHub`"
-              />
-            </div>
-          </div>
-        </div>
         <p
-          v-else-if="!freshHits.length && !searchQuery.trim()"
+          v-if="!freshHits.length && !searchQuery.trim()"
           class="text-center text-xs text-slate-500"
         >
-          No issues imported yet. Search above, or paste an issue URL/key to import one.
+          Search above, or paste an issue URL/key to create a task from it.
         </p>
       </div>
     </template>

package/package.json

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