@cat-factory/app 0.16.1 → 0.17.1

package/app/components/board/AddTaskModal.vue

@@ -230,6 +230,15 @@ watch(open, (isOpen) => {
   pendingContext.value = []
   showDocPicker.value = false
   showIssuePicker.value = false
+  // Seed from a prefill when opened from another surface (e.g. "create task from
+  // issue" sets the title + stages the issue as linked context). Pipeline / preset
+  // are intentionally left at their defaults so the user confirms them here.
+  const prefill = ui.addTaskPrefill
+  if (prefill) {
+    if (prefill.title) title.value = prefill.title
+    if (prefill.description) description.value = prefill.description
+    if (prefill.context?.length) pendingContext.value = [...prefill.context]
+  }
   documents.loadDocuments().catch(() => {})
   tasks.loadTasks().catch(() => {})
 })
@@ -582,6 +591,7 @@ async function add() {
             <ContextIssuePicker
               v-if="showIssuePicker && issuesConnected"
               :chosen-keys="chosenIssueKeys"
+              :scope-block-id="ui.addTaskContainerId ?? undefined"
               @pick="addPending"
             />
             <div v-if="pendingIssues.length" class="space-y-1">

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

@@ -16,6 +16,7 @@ const props = defineProps<{ id: string }>()
 const board = useBoardStore()
 const execution = useExecutionStore()
 const ui = useUiStore()
+const tasks = useTasksStore()
 const agentRuns = useAgentRunsStore()
 const services = useServicesStore()
 const reviews = useReviewStage()
@@ -108,6 +109,13 @@ function addTask() {
   ui.openAddTask(props.id)
 }
 
+// Open the tracker-issue modal scoped to THIS service: the create-in target and the
+// repo-scoped issue search are both pinned to this frame (see TaskImportModal).
+function createTaskFromIssue() {
+  ui.expandFrame(props.id)
+  ui.openTaskImport(null, props.id)
+}
+
 function addRecurring() {
   ui.openAddRecurring(props.id)
 }
@@ -360,6 +368,16 @@ const ITEM_ICON: Record<string, string> = {
               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"

package/app/components/tasks/ContextIssuePicker.vue

@@ -11,6 +11,12 @@ import type { TaskSearchResult, TaskSourceKind } from '~/types/domain'
 const props = defineProps<{
   /** contextKeys already staged by the caller, so they're filtered out / not re-offered. */
   chosenKeys?: string[]
+  /**
+   * The block the picker is attaching context to (a service frame or a task/module
+   * under one). Scopes a GitHub search to that service's linked repo, so hits stay
+   * in-repo and a pasted URL / bare issue number resolves to the exact issue.
+   */
+  scopeBlockId?: string
 }>()
 const emit = defineEmits<{ pick: [item: PendingContext] }>()
 
@@ -50,7 +56,7 @@ async function runSearch() {
   searching.value = true
   searchError.value = null
   try {
-    results.value = await tasks.search(source.value, q)
+    results.value = await tasks.search(source.value, q, props.scopeBlockId)
   } catch (e) {
     results.value = []
     searchError.value = e instanceof Error ? e.message : String(e)

package/app/components/tasks/TaskImportModal.vue

@@ -2,10 +2,12 @@
 // 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 directly into a new board task here — pick a container (service frame
-// or module) and "Create task", which seeds a leaf block from the issue and links
-// the issue to it for context.
-import type { Block, TaskSearchResult, TaskSourceKind } from '~/types/domain'
+// 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 type { TaskSearchResult, TaskSourceKind } from '~/types/domain'
+import type { AddTaskPrefill } from '~/stores/ui'
 
 const ui = useUiStore()
 const tasks = useTasksStore()
@@ -23,12 +25,22 @@ const source = ref<TaskSourceKind | undefined>(undefined)
 const ref_ = ref('')
 const importing = ref(false)
 
+// When opened from a service frame the modal is the "create a task from an issue"
+// surface; opened standalone it's the general tracker-issue browser/importer.
+const title = computed(() =>
+  ui.taskImport?.containerId ? 'Create task from issue' : 'Tracker issues',
+)
+
 const sourceItems = computed(() =>
   tasks.offeredSources.map((s) => ({ label: s.label, value: s.source })),
 )
 const descriptor = computed(() => (source.value ? tasks.descriptorFor(source.value) : undefined))
 const searchable = computed(() => descriptor.value?.searchable ?? false)
 
+// The container (service frame or module) a new task is created in. Also the repo
+// scope for the issue search — declared up here so the search watch can read it.
+const containerId = ref<string | undefined>(undefined)
+
 // Browse the tracker by free text so an issue can be turned into a task without
 // knowing its key. Debounced; a created/imported hit also lands in the list below.
 const searchQuery = ref('')
@@ -37,7 +49,9 @@ const searching = ref(false)
 const searchError = ref<string | null>(null)
 
 let searchTimer: ReturnType<typeof setTimeout> | undefined
-watch([searchQuery, source], () => {
+// Re-run when the chosen container changes too: a GitHub search is scoped to the
+// selected service's repo, so switching containers re-scopes the results.
+watch([searchQuery, source, () => containerId.value], () => {
   if (searchTimer) clearTimeout(searchTimer)
   searchResults.value = []
   searchError.value = null
@@ -52,7 +66,9 @@ async function runSearch() {
   searching.value = true
   searchError.value = null
   try {
-    searchResults.value = await tasks.search(source.value, q)
+    // Scope to the selected container's repo so hits stay in-repo and a pasted
+    // URL / bare issue number resolves to the exact issue.
+    searchResults.value = await tasks.search(source.value, q, containerId.value)
   } catch (e) {
     searchResults.value = []
     searchError.value = e instanceof Error ? e.message : String(e)
@@ -75,7 +91,6 @@ const sourceTasks = computed(() =>
 
 // 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 containerId = ref<string | undefined>(undefined)
 const containerItems = computed(() =>
   board.blocks
     .filter((b) => b.level === 'frame' || b.level === 'module')
@@ -87,9 +102,6 @@ const containerItems = computed(() =>
       value: b.id,
     })),
 )
-// The issue currently being turned into a task (its row shows a spinner).
-const creatingId = ref<string | null>(null)
-
 watch(open, (isOpen) => {
   if (isOpen) {
     ref_.value = ''
@@ -97,33 +109,38 @@ watch(open, (isOpen) => {
     searchResults.value = []
     searchError.value = null
     source.value = ui.taskImport?.source ?? tasks.offeredSources[0]?.source ?? undefined
-    containerId.value = containerItems.value[0]?.value
-    creatingId.value = null
+    // Opened from a service frame → preselect it as the create-in target (and the
+    // search's repo scope); otherwise fall back to the first container on the board.
+    containerId.value = ui.taskImport?.containerId ?? containerItems.value[0]?.value
     tasks.loadTasks().catch(() => {})
   }
 })
 
-// Create a board task from an issue, seeding its title/description from the issue
-// and linking it back for writeback. A search hit isn't projected locally yet, so
-// `needsImport` fetches + persists it first (create-block requires it imported).
-async function createTask(externalId: string, needsImport = false) {
+// Selecting an issue hands off to the add-task form, prefilled with the issue title
+// and the issue staged as linked context (so agents see its description + comments).
+// The user still confirms pipeline / preset there before the task is created — we do
+// NOT dump the issue body into the description; the link is enough.
+function selectIssue(
+  issue: { externalId: string; title: string; status?: string },
+  needsImport: boolean,
+) {
   if (!source.value || !containerId.value) return
-  creatingId.value = externalId
-  try {
-    if (needsImport) await tasks.importTask(source.value, externalId)
-    const { block } = await tasks.createTaskFromIssue(source.value, externalId, containerId.value)
-    board.upsert(block as Block)
-    toast.add({ title: `Created task "${block.title}"`, icon: 'i-lucide-square-check' })
-  } catch (e) {
-    toast.add({
-      title: 'Could not create task',
-      description: e instanceof Error ? e.message : String(e),
-      icon: 'i-lucide-triangle-alert',
-      color: 'error',
-    })
-  } finally {
-    creatingId.value = null
+  const prefill: AddTaskPrefill = {
+    title: issue.title,
+    context: [
+      {
+        kind: 'task',
+        source: source.value,
+        externalId: issue.externalId,
+        title: `${issue.externalId} · ${issue.title}`,
+        subtitle: issue.status || undefined,
+        icon: descriptor.value?.icon,
+        needsImport,
+      },
+    ],
   }
+  ui.closeTaskImport()
+  ui.openAddTask(containerId.value, prefill)
 }
 
 async function doImport() {
@@ -148,7 +165,7 @@ async function doImport() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Tracker issues">
+  <UModal v-model:open="open" :title="title">
     <template #body>
       <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
       <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
@@ -201,7 +218,7 @@ async function doImport() {
             v-model="searchQuery"
             :icon="searching ? 'i-lucide-loader-circle' : 'i-lucide-search'"
             :ui="{ leadingIcon: searching ? 'animate-spin' : '' }"
-            placeholder="Search by title…"
+            placeholder="Search by title, paste an issue URL, or type an issue number…"
             class="w-full"
           />
         </UFormField>
@@ -226,7 +243,8 @@ async function doImport() {
           Add a service frame to the board first to create tasks from issues.
         </p>
 
-        <!-- Search results (not yet imported): create a task directly from a hit. -->
+        <!-- Search results (not yet imported): click a hit to create a task from it
+             (opens the prefilled add-task form); the icon button views it on GitHub. -->
         <div v-if="searchError" class="text-[11px] text-amber-400">
           Search failed: {{ searchError }}
         </div>
@@ -237,38 +255,36 @@ async function doImport() {
           <div
             v-for="hit in freshHits"
             :key="`hit:${hit.source}:${hit.externalId}`"
-            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            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"
           >
-            <div class="flex items-start justify-between gap-2">
-              <div class="min-w-0">
-                <a
-                  :href="hit.url"
-                  target="_blank"
-                  rel="noopener"
-                  class="truncate text-sm font-medium text-white hover:underline"
-                >
-                  {{ hit.externalId }} · {{ hit.title }}
-                </a>
-                <p v-if="hit.excerpt" class="mt-0.5 line-clamp-2 text-xs text-slate-500">
-                  {{ hit.excerpt }}
-                </p>
-              </div>
-              <div class="flex shrink-0 items-center gap-2">
-                <UBadge v-if="hit.status" color="neutral" variant="soft" size="xs">
-                  {{ hit.status }}
-                </UBadge>
-                <UButton
-                  color="primary"
-                  variant="soft"
-                  size="xs"
-                  icon="i-lucide-square-check"
-                  :loading="creatingId === hit.externalId"
-                  :disabled="!containerId || creatingId !== null"
-                  @click="createTask(hit.externalId, true)"
-                >
-                  Create task
-                </UButton>
-              </div>
+            <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(hit, true)"
+            >
+              <span class="block truncate text-sm font-medium text-white">
+                {{ hit.externalId }} · {{ hit.title }}
+              </span>
+              <span v-if="hit.excerpt" class="mt-0.5 line-clamp-2 block text-xs text-slate-500">
+                {{ hit.excerpt }}
+              </span>
+            </button>
+            <div class="flex shrink-0 items-center gap-2">
+              <UBadge v-if="hit.status" color="neutral" variant="soft" size="xs">
+                {{ hit.status }}
+              </UBadge>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-external-link"
+                :to="hit.url"
+                target="_blank"
+                rel="noopener"
+                :aria-label="`View ${hit.externalId} on GitHub`"
+              />
             </div>
           </div>
         </div>
@@ -281,36 +297,36 @@ async function doImport() {
           <div
             v-for="task in sourceTasks"
             :key="`${task.source}:${task.externalId}`"
-            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+            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"
           >
-            <div class="flex items-start justify-between gap-2">
-              <div class="min-w-0">
-                <a
-                  :href="task.url"
-                  target="_blank"
-                  rel="noopener"
-                  class="truncate text-sm font-medium text-white hover:underline"
-                >
-                  {{ task.externalId }} · {{ task.title }}
-                </a>
-                <p class="mt-0.5 line-clamp-2 text-xs text-slate-500">{{ task.excerpt }}</p>
-              </div>
-              <div class="flex shrink-0 items-center gap-2">
-                <UBadge color="neutral" variant="soft" size="xs">
-                  {{ task.status }}
-                </UBadge>
-                <UButton
-                  color="primary"
-                  variant="soft"
-                  size="xs"
-                  icon="i-lucide-square-check"
-                  :loading="creatingId === task.externalId"
-                  :disabled="!containerId || creatingId !== null"
-                  @click="createTask(task.externalId)"
-                >
-                  Create task
-                </UButton>
-              </div>
+            <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>

package/app/composables/api/tasks.ts

@@ -57,10 +57,15 @@ export function tasksApi({ http, ws }: ApiContext) {
         body,
       }),
 
-    searchTaskSource: (workspaceId: string, source: TaskSourceKind, query: string) =>
+    searchTaskSource: (
+      workspaceId: string,
+      source: TaskSourceKind,
+      query: string,
+      blockId?: string,
+    ) =>
       http<{ results: TaskSearchResult[] }>(`${ws(workspaceId)}/task-sources/${source}/search`, {
         method: 'POST',
-        body: { query },
+        body: { query, ...(blockId ? { blockId } : {}) },
       }),
 
     linkTask: (

package/app/composables/useTaskExpansion.ts

@@ -35,6 +35,15 @@ export function useTaskExpansion(container: Ref<HTMLElement | null>) {
   const ui = useUiStore()
   const store = useTaskExpansionStore()
 
+  // Last-known expanded height per task. A card grows downward only while it's
+  // granted (its pipeline list is rendered), so its live height collapses the
+  // moment it's denied. Testing overlap with that collapsed height is what causes
+  // the flashing: a denied card no longer overlaps its neighbour, gets re-granted,
+  // expands, overlaps again, gets denied — every frame. We cache the expanded
+  // height while a card is granted and project the footprint with it, so a denied
+  // card is still tested at its expanded extent and stays denied. Stable.
+  const expandedHeight = new Map<string, number>()
+
   function rectOf(id: string): DOMRect | null {
     const el = document.querySelector(`[data-block-id="${id}"]`) as HTMLElement | null
     return el ? el.getBoundingClientRect() : null
@@ -51,26 +60,43 @@ export function useTaskExpansion(container: Ref<HTMLElement | null>) {
     const cx = view.left + view.width / 2
     const cy = view.top + view.height / 2
 
-    const candidates: { id: string; rect: DOMRect; dist: number }[] = []
+    const candidates: { id: string; rect: Rect; dist: number }[] = []
+    const liveIds = new Set<string>()
     for (const t of board.allTasks) {
       // Only tasks whose run actually has steps would expand a pipeline list.
       if (!execution.getByBlock(t.id)?.steps.length) continue
       const rect = rectOf(t.id)
       if (!rect) continue
-      // Visibility: the card must intersect the board viewport.
+      liveIds.add(t.id)
+      // While a card is granted it's rendered expanded, so its live height is its
+      // expanded footprint — cache it. A denied card keeps its last cached value.
+      if (store.allowed.has(t.id)) expandedHeight.set(t.id, rect.height)
+      // Visibility: the card must intersect the board viewport (live rect).
       if (!intersects(rect, view)) continue
+      // Project the footprint downward to the expanded extent so the overlap test
+      // is independent of the card's current (possibly collapsed) state.
+      const height = Math.max(rect.height, expandedHeight.get(t.id) ?? 0)
+      const footprint: Rect = {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.top + height,
+      }
       // Stable anchor: the card's top-centre. It doesn't move as the card grows
       // downward, so the ordering can't oscillate as cards expand / collapse.
       const ax = rect.left + rect.width / 2
       const ay = rect.top
       const dist = (ax - cx) ** 2 + (ay - cy) ** 2
-      candidates.push({ id: t.id, rect, dist })
+      candidates.push({ id: t.id, rect: footprint, dist })
     }
+    // Drop cached heights for cards that are gone, so the map can't grow unbounded.
+    for (const id of expandedHeight.keys()) if (!liveIds.has(id)) expandedHeight.delete(id)
     candidates.sort((a, b) => a.dist - b.dist)
 
-    // Greedy by distance to centre: a candidate is granted only if its rect clears
-    // every rect already granted, so the centre-most card wins any overlap.
-    const claimed: DOMRect[] = []
+    // Greedy by distance to centre: a candidate is granted only if its projected
+    // footprint clears every footprint already granted, so the centre-most card
+    // wins any overlap.
+    const claimed: Rect[] = []
     const next = new Set<string>()
     for (const c of candidates) {
       if (claimed.some((r) => intersects(c.rect, r))) continue

package/app/stores/tasks.ts

@@ -170,9 +170,18 @@ export const useTasksStore = defineStore('tasks', () => {
     }
   }
 
-  /** Search a connected tracker's issues by free text (title/content). */
-  async function search(source: TaskSourceKind, query: string): Promise<TaskSearchResult[]> {
-    const { results } = await api.searchTaskSource(workspace.requireId(), source, query)
+  /**
+   * Search a connected tracker's issues by free text (title/content). `blockId`
+   * (a service frame or a task/module under one) scopes a GitHub search to that
+   * service's linked repo — so hits stay in-repo and a pasted URL / bare issue
+   * number resolves to the exact issue. Omitted → an unscoped workspace search.
+   */
+  async function search(
+    source: TaskSourceKind,
+    query: string,
+    blockId?: string,
+  ): Promise<TaskSearchResult[]> {
+    const { results } = await api.searchTaskSource(workspace.requireId(), source, query, blockId)
     return results
   }
 

package/app/stores/ui.ts

@@ -1,10 +1,19 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { DocumentSourceKind, TaskSourceKind, LodLevel } from '~/types/domain'
+import type { PendingContext } from '~/composables/useContextLinking'
 import { zoomToLod, lodAtLeast } from '~/composables/useSemanticZoom'
 import { useExecutionStore } from '~/stores/execution'
 import { agentKindMeta } from '~/utils/catalog'
 
+/** Values used to seed the add-task form when it is opened from another surface. */
+export interface AddTaskPrefill {
+  title?: string
+  description?: string
+  /** Context items staged on the new task (e.g. the source issue), linked once created. */
+  context?: PendingContext[]
+}
+
 /** Transient UI state: selection, panels, zoom level. */
 export const useUiStore = defineStore('ui', () => {
   const selectedBlockId = ref<string | null>(null)
@@ -33,12 +42,19 @@ export const useUiStore = defineStore('ui', () => {
   // the modal pick a connected one (there is no spawn target — issues are linked
   // to a block for context, not expanded into structure).
   const taskConnect = ref<{ source: TaskSourceKind } | null>(null)
-  const taskImport = ref<{ source: TaskSourceKind | null } | null>(null)
+  // `containerId` (a service frame) scopes the modal: it preselects that frame as
+  // the create-in target AND scopes the issue search to the frame's linked repo.
+  // Null → the unscoped "import an issue" surface (workspace-wide search).
+  const taskImport = ref<{ source: TaskSourceKind | null; containerId: string | null } | null>(null)
 
   // Add-task modal: the container (service frame or module) a new task is being
   // added to, or null when closed. The user types the title + description; nothing
   // is launched until they explicitly start the created task.
   const addTaskContainerId = ref<string | null>(null)
+  // Optional values to seed the add-task form with when it is opened from another
+  // surface (e.g. "create task from issue" prefills the title + stages the issue as
+  // linked context). The user still confirms pipeline / preset before adding.
+  const addTaskPrefill = ref<AddTaskPrefill | null>(null)
 
   // Add-recurring-pipeline modal: the service frame a new recurring pipeline is
   // being added to, or null when closed (mirrors the add-task flow — a button on
@@ -237,17 +253,19 @@ export const useUiStore = defineStore('ui', () => {
   function closeTaskConnect() {
     taskConnect.value = null
   }
-  function openTaskImport(source: TaskSourceKind | null = null) {
-    taskImport.value = { source }
+  function openTaskImport(source: TaskSourceKind | null = null, containerId: string | null = null) {
+    taskImport.value = { source, containerId }
   }
   function closeTaskImport() {
     taskImport.value = null
   }
-  function openAddTask(containerId: string) {
+  function openAddTask(containerId: string, prefill: AddTaskPrefill | null = null) {
+    addTaskPrefill.value = prefill
     addTaskContainerId.value = containerId
   }
   function closeAddTask() {
     addTaskContainerId.value = null
+    addTaskPrefill.value = null
   }
   function openAddRecurring(frameId: string) {
     addRecurringFrameId.value = frameId
@@ -412,6 +430,7 @@ export const useUiStore = defineStore('ui', () => {
     taskConnect,
     taskImport,
     addTaskContainerId,
+    addTaskPrefill,
     addRecurringFrameId,
     bootstrapOpen,
     addServiceOpen,

package/package.json

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