@cat-factory/app 0.32.0 → 0.32.2

package/app/components/board/BoardCanvas.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { VueFlow, useVueFlow, type NodeMouseEvent } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import BlockNode from './nodes/BlockNode.vue'
 import EpicNode from './nodes/EpicNode.vue'
@@ -177,7 +176,6 @@ async function onDrop(event: DragEvent) {
     >
       <Background pattern-color="#1e293b" :gap="22" :size="1.4" />
       <MiniMap pannable zoomable :node-color="minimapColor" class="!bg-slate-900/80" />
-      <Controls position="bottom-left" />
 
       <template #node-block="props">
         <BlockNode :id="props.id" />

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

@@ -354,80 +354,90 @@ const ITEM_ICON: Record<string, string> = {
       <div v-else-if="runFailed && run" class="p-3">
         <AgentFailureCard :run="run" variant="expanded" />
       </div>
-      <div class="space-y-3 p-4">
-        <!-- frame header: the whole bar is the drag handle for the expanded frame.
-             `nopan` stops Vue Flow's pane from panning on a left-drag that starts here
-             (it pans via d3-zoom's mousedown, which our pointerdown stopPropagation
-             can't intercept), so the grab drives the frame move. The action buttons
-             on the right opt out via `.nodrag` (onFrameHandle ignores them). -->
+      <div class="p-4">
+        <!-- frame header: the whole header (the title row AND the stats line below it)
+             is the drag handle for the expanded frame. `nopan` stops Vue Flow's pane
+             from panning on a left-drag that starts here (it pans via d3-zoom's
+             mousedown, which our pointerdown stopPropagation can't intercept), so the
+             grab drives the frame move. The action buttons on the right opt out via
+             `.nodrag` (onFrameHandle ignores them). `pb-3` provides the gap down to the
+             drop zone AND makes that gap part of the grab surface, so no header edge
+             falls through to the pane (the parent drops `space-y-3` to avoid doubling
+             the gap). -->
         <div
-          class="nopan flex cursor-grab items-start justify-between gap-2 active:cursor-grabbing"
+          class="nopan cursor-grab space-y-3 pb-3 active:cursor-grabbing"
           title="Drag service"
           @pointerdown="onFrameHandle"
         >
-          <div class="flex items-center gap-2">
-            <div
-              class="flex h-8 w-8 items-center justify-center rounded-lg"
-              :style="{ backgroundColor: typeMeta!.accent + '22' }"
-            >
-              <UIcon :name="typeMeta!.icon" class="h-5 w-5" :style="{ color: typeMeta!.accent }" />
+          <div class="flex items-start justify-between gap-2">
+            <div class="flex items-center gap-2">
+              <div
+                class="flex h-8 w-8 items-center justify-center rounded-lg"
+                :style="{ backgroundColor: typeMeta!.accent + '22' }"
+              >
+                <UIcon
+                  :name="typeMeta!.icon"
+                  class="h-5 w-5"
+                  :style="{ color: typeMeta!.accent }"
+                />
+              </div>
+              <div>
+                <div class="text-sm font-semibold text-white">{{ block.title }}</div>
+                <div class="text-[11px] text-slate-400">{{ typeMeta!.label }}</div>
+              </div>
             </div>
-            <div>
-              <div class="text-sm font-semibold text-white">{{ block.title }}</div>
-              <div class="text-[11px] text-slate-400">{{ typeMeta!.label }}</div>
+            <div class="flex items-center gap-1">
+              <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
+                statusLabel
+              }}</UBadge>
+              <UButton
+                class="nodrag"
+                data-testid="frame-add-task"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                icon="i-lucide-plus"
+                title="Add task"
+                @click.stop="addTask"
+              />
+              <UButton
+                v-if="tasks.anyOffered"
+                class="nodrag"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                icon="i-lucide-ticket"
+                title="Create task from issue"
+                @click.stop="createTaskFromIssue"
+              />
+              <UButton
+                class="nodrag"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                icon="i-lucide-repeat"
+                title="Add recurring pipeline"
+                @click.stop="addRecurring"
+              />
+              <UButton
+                class="nodrag"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                icon="i-lucide-chevron-up"
+                title="Collapse"
+                @click.stop="toggleExpand"
+              />
             </div>
           </div>
-          <div class="flex items-center gap-1">
-            <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
-              statusLabel
-            }}</UBadge>
-            <UButton
-              class="nodrag"
-              data-testid="frame-add-task"
-              size="xs"
-              variant="ghost"
-              color="neutral"
-              icon="i-lucide-plus"
-              title="Add task"
-              @click.stop="addTask"
-            />
-            <UButton
-              v-if="tasks.anyOffered"
-              class="nodrag"
-              size="xs"
-              variant="ghost"
-              color="neutral"
-              icon="i-lucide-ticket"
-              title="Create task from issue"
-              @click.stop="createTaskFromIssue"
-            />
-            <UButton
-              class="nodrag"
-              size="xs"
-              variant="ghost"
-              color="neutral"
-              icon="i-lucide-repeat"
-              title="Add recurring pipeline"
-              @click.stop="addRecurring"
-            />
-            <UButton
-              class="nodrag"
-              size="xs"
-              variant="ghost"
-              color="neutral"
-              icon="i-lucide-chevron-up"
-              title="Collapse"
-              @click.stop="toggleExpand"
-            />
-          </div>
-        </div>
 
-        <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
-          <span>{{ mergedTasks }}/{{ taskCount }} implemented</span>
-          <span v-if="modules.length"
-            >· {{ modules.length }} module{{ modules.length === 1 ? '' : 's' }}</span
-          >
-          <span v-if="prTasks" class="text-emerald-400">· {{ prTasks }} PR ready</span>
+          <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
+            <span>{{ mergedTasks }}/{{ taskCount }} implemented</span>
+            <span v-if="modules.length"
+              >· {{ modules.length }} module{{ modules.length === 1 ? '' : 's' }}</span
+            >
+            <span v-if="prTasks" class="text-emerald-400">· {{ prTasks }} PR ready</span>
+          </div>
         </div>
 
         <!-- the 2D drop zone: modules and loose tasks live here, draggable -->

package/nuxt.config.ts

@@ -49,7 +49,6 @@ export default defineNuxtConfig({
   css: [
     '@vue-flow/core/dist/style.css',
     '@vue-flow/core/dist/theme-default.css',
-    '@vue-flow/controls/dist/style.css',
     '@vue-flow/minimap/dist/style.css',
     '@vue-flow/node-resizer/dist/style.css',
     join(layerDir, 'app/assets/css/main.css'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "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",
@@ -20,7 +20,6 @@
     "@nuxt/ui": "^4.9.0",
     "@pinia/nuxt": "^0.11.3",
     "@vue-flow/background": "^1.3.2",
-    "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.48.2",
     "@vue-flow/minimap": "^1.5.4",
     "@vue-flow/node-resizer": "^1.5.1",