@cat-factory/app 0.14.0 → 0.15.0

package/app/components/board/AddTaskModal.vue

@@ -12,6 +12,7 @@
 // (see useContextLinking) — the same context the agents see for every step of the run.
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { CreateTaskType, TaskTypeFields } from '~/types/domain'
+import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -230,32 +231,12 @@ const docAttachMenu = computed<DropdownMenuItem[][]>(() => {
   return [items]
 })
 
-const issueAttachMenu = computed<DropdownMenuItem[][]>(() => {
-  const chosen = new Set(pendingContext.value.map(contextKey))
-  const items: DropdownMenuItem[] = tasks.tasks
-    .filter(
-      (t) => !chosen.has(contextKey({ kind: 'task', source: t.source, externalId: t.externalId })),
-    )
-    .map((t) => ({
-      label: `${t.externalId} · ${t.title}`,
-      icon: tasks.descriptorFor(t.source)?.icon ?? 'i-lucide-square-check',
-      onSelect: () =>
-        addPending({
-          kind: 'task',
-          source: t.source,
-          externalId: t.externalId,
-          title: `${t.externalId} · ${t.title}`,
-          icon: tasks.descriptorFor(t.source)?.icon ?? 'i-lucide-square-check',
-          needsImport: false,
-        }),
-    }))
-  items.push({
-    label: 'Import an issue…',
-    icon: 'i-lucide-file-down',
-    onSelect: () => ui.openTaskImport(),
-  })
-  return [items]
-})
+// Context issues are picked through an inline search picker (ContextIssuePicker)
+// rather than a dropdown that opens a second modal — stacked page-level modals
+// don't interact here, which is why the old "Import an issue…" path appeared to
+// do nothing. The "Attach" button toggles the picker open.
+const showIssuePicker = ref(false)
+const chosenIssueKeys = computed(() => pendingIssues.value.map(contextKey))
 
 // Reset the form whenever the modal opens for a (new) container, and refresh the
 // imported docs/issues so the quick-pick list is current.
@@ -274,6 +255,7 @@ watch(open, (isOpen) => {
   pipelineId.value = ''
   agentConfigValues.value = {}
   pendingContext.value = []
+  showIssuePicker.value = false
   documents.loadDocuments().catch(() => {})
   tasks.loadTasks().catch(() => {})
 })
@@ -591,15 +573,16 @@ async function add() {
               <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                 Context issues
               </span>
-              <UDropdownMenu
+              <UButton
                 v-if="issuesConnected"
-                :items="issueAttachMenu"
-                :content="{ side: 'bottom', align: 'end' }"
+                color="neutral"
+                variant="soft"
+                size="xs"
+                :icon="showIssuePicker ? 'i-lucide-x' : 'i-lucide-plus'"
+                @click="showIssuePicker = !showIssuePicker"
               >
-                <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">
-                  Attach
-                </UButton>
-              </UDropdownMenu>
+                {{ showIssuePicker ? 'Done' : 'Attach' }}
+              </UButton>
               <UButton
                 v-else
                 color="neutral"
@@ -616,6 +599,11 @@ async function add() {
                 Attach
               </UButton>
             </div>
+            <ContextIssuePicker
+              v-if="showIssuePicker && issuesConnected"
+              :chosen-keys="chosenIssueKeys"
+              @pick="addPending"
+            />
             <div v-if="pendingIssues.length" class="space-y-1">
               <div
                 v-for="item in pendingIssues"

package/app/components/tasks/ContextIssuePicker.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+// Inline picker for attaching a tracker issue as task context. It searches the
+// connected tracker (GitHub Issues / Jira) by free text, lists already-imported
+// issues for quick re-use, and accepts a pasted URL/key as a reference — all
+// inline, with NO second modal (stacked page-level modals don't interact here).
+// It only *stages* a choice: the caller collects PendingContext items and links
+// them once the block exists (see useContextLinking). A search hit / pasted ref
+// carries `needsImport: true` so it's fetched + persisted before linking.
+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[]
+}>()
+const emit = defineEmits<{ pick: [item: PendingContext] }>()
+
+const tasks = useTasksStore()
+
+const chosen = computed(() => new Set(props.chosenKeys ?? []))
+
+// Source: default to the first offered tracker; a selector appears only when more
+// than one is offered (the common case is a single source).
+const source = ref<TaskSourceKind | undefined>(tasks.offeredSources[0]?.source)
+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)
+
+const query = ref('')
+const results = ref<TaskSearchResult[]>([])
+const searching = ref(false)
+const searchError = ref<string | null>(null)
+
+// Debounced search: free text hits the tracker; a query that's clearly a URL/key
+// is left to the explicit "by reference" row below (search won't surface it).
+let timer: ReturnType<typeof setTimeout> | undefined
+watch([query, source], () => {
+  if (timer) clearTimeout(timer)
+  results.value = []
+  searchError.value = null
+  const q = query.value.trim()
+  if (!q || !searchable.value) return
+  timer = setTimeout(runSearch, 300)
+})
+
+async function runSearch() {
+  const q = query.value.trim()
+  if (!q || !source.value) return
+  searching.value = true
+  searchError.value = null
+  try {
+    results.value = await tasks.search(source.value, q)
+  } catch (e) {
+    results.value = []
+    searchError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    searching.value = false
+  }
+}
+
+const icon = computed(() => descriptor.value?.icon ?? 'i-lucide-square-check')
+
+function keyFor(externalId: string): string {
+  return source.value
+    ? contextKey({ kind: 'task', source: source.value, externalId })
+    : `task::${externalId}`
+}
+
+// Already-imported issues for this source, filtered by the query and never
+// re-offering one the caller already staged.
+const importedRows = computed(() => {
+  if (!source.value) return []
+  const q = query.value.trim().toLowerCase()
+  return tasks.tasks
+    .filter((t) => t.source === source.value)
+    .filter((t) => !chosen.value.has(keyFor(t.externalId)))
+    .filter(
+      (t) => !q || t.externalId.toLowerCase().includes(q) || t.title.toLowerCase().includes(q),
+    )
+})
+
+// Search hits not already imported (those show in importedRows) and not staged.
+const searchRows = computed(() => {
+  if (!source.value) return []
+  const importedIds = new Set(
+    tasks.tasks.filter((t) => t.source === source.value).map((t) => t.externalId),
+  )
+  return results.value
+    .filter((r) => !importedIds.has(r.externalId))
+    .filter((r) => !chosen.value.has(keyFor(r.externalId)))
+})
+
+// A pasted URL / key the search won't match: offer it as an explicit reference.
+const refRow = computed(() => {
+  const q = query.value.trim()
+  if (!q || !source.value) return null
+  const known =
+    importedRows.value.some((t) => t.externalId === q) ||
+    searchRows.value.some((r) => r.externalId === q) ||
+    chosen.value.has(keyFor(q))
+  if (known) return null
+  // Only worth offering when it looks like a reference, not a search phrase.
+  const looksLikeRef = q.includes('#') || q.includes('/') || /^https?:\/\//i.test(q)
+  return looksLikeRef ? q : null
+})
+
+const empty = computed(
+  () =>
+    !searching.value &&
+    !searchError.value &&
+    importedRows.value.length === 0 &&
+    searchRows.value.length === 0 &&
+    refRow.value === null,
+)
+
+function pickImported(externalId: string, title: string, status: string) {
+  if (!source.value) return
+  emit('pick', {
+    kind: 'task',
+    source: source.value,
+    externalId,
+    title: `${externalId} · ${title}`,
+    subtitle: status || undefined,
+    icon: icon.value,
+    needsImport: false,
+  })
+}
+
+function pickSearch(r: TaskSearchResult) {
+  emit('pick', {
+    kind: 'task',
+    source: r.source,
+    externalId: r.externalId,
+    title: `${r.externalId} · ${r.title}`,
+    subtitle: r.status || undefined,
+    icon: icon.value,
+    needsImport: true,
+  })
+}
+
+function pickRef(q: string) {
+  if (!source.value) return
+  emit('pick', {
+    kind: 'task',
+    source: source.value,
+    externalId: q,
+    title: q,
+    subtitle: descriptor.value?.label,
+    icon: icon.value,
+    needsImport: true,
+  })
+  query.value = ''
+}
+
+onMounted(() => {
+  // Keep the quick-pick list current (cheap; the store dedupes).
+  tasks.loadTasks().catch(() => {})
+})
+</script>
+
+<template>
+  <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2">
+    <USelect
+      v-if="sourceItems.length > 1"
+      v-model="source"
+      :items="sourceItems"
+      size="xs"
+      class="w-full"
+    />
+
+    <UInput
+      v-model="query"
+      :icon="searching ? 'i-lucide-loader-circle' : 'i-lucide-search'"
+      :ui="{ leadingIcon: searching ? 'animate-spin' : '' }"
+      size="sm"
+      class="w-full"
+      :placeholder="
+        searchable
+          ? 'Search issues or paste a URL/key…'
+          : (descriptor?.refPlaceholder ?? 'Paste an issue URL or key…')
+      "
+      @keydown.enter="refRow && pickRef(refRow)"
+    />
+
+    <p v-if="searchError" class="px-1 text-[11px] text-amber-400">
+      Search failed: {{ searchError }}
+    </p>
+
+    <div class="max-h-56 space-y-0.5 overflow-y-auto">
+      <!-- Already-imported issues (linked directly, no re-fetch). -->
+      <button
+        v-for="t in importedRows"
+        :key="`imp:${t.externalId}`"
+        type="button"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        @click="pickImported(t.externalId, t.title, t.status)"
+      >
+        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+        <span class="truncate">{{ t.externalId }} · {{ t.title }}</span>
+        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">imported</UBadge>
+      </button>
+
+      <!-- Tracker search hits (imported on add). -->
+      <button
+        v-for="r in searchRows"
+        :key="`hit:${r.externalId}`"
+        type="button"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        @click="pickSearch(r)"
+      >
+        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+        <span class="truncate">{{ r.externalId }} · {{ r.title }}</span>
+        <UBadge v-if="r.status" color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">
+          {{ r.status }}
+        </UBadge>
+      </button>
+
+      <!-- Explicit URL/key reference (imported on add). -->
+      <button
+        v-if="refRow"
+        type="button"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        @click="pickRef(refRow)"
+      >
+        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+        <span class="truncate"
+          >Attach <span class="text-slate-200">{{ refRow }}</span> by reference</span
+        >
+      </button>
+
+      <p v-if="empty" class="px-2 py-1.5 text-[11px] text-slate-500">
+        {{
+          query.trim()
+            ? 'No matching issues.'
+            : searchable
+              ? 'Search by title, or pick an imported issue.'
+              : 'Paste an issue URL or key to attach it.'
+        }}
+      </p>
+    </div>
+  </div>
+</template>

package/app/components/tasks/TaskImportModal.vue

@@ -5,7 +5,7 @@
 // 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, TaskSourceKind } from '~/types/domain'
+import type { Block, TaskSearchResult, TaskSourceKind } from '~/types/domain'
 
 const ui = useUiStore()
 const tasks = useTasksStore()
@@ -27,6 +27,47 @@ 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)
+
+// 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('')
+const searchResults = ref<TaskSearchResult[]>([])
+const searching = ref(false)
+const searchError = ref<string | null>(null)
+
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+watch([searchQuery, source], () => {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchResults.value = []
+  searchError.value = null
+  const q = searchQuery.value.trim()
+  if (!q || !searchable.value) return
+  searchTimer = setTimeout(runSearch, 300)
+})
+
+async function runSearch() {
+  const q = searchQuery.value.trim()
+  if (!q || !source.value) return
+  searching.value = true
+  searchError.value = null
+  try {
+    searchResults.value = await tasks.search(source.value, q)
+  } catch (e) {
+    searchResults.value = []
+    searchError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    searching.value = false
+  }
+}
+
+// Search hits not yet imported (imported ones already render in the list below).
+const importedIds = computed(
+  () => new Set(tasks.tasks.filter((t) => t.source === source.value).map((t) => t.externalId)),
+)
+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) : [],
@@ -52,6 +93,9 @@ const creatingId = ref<string | null>(null)
 watch(open, (isOpen) => {
   if (isOpen) {
     ref_.value = ''
+    searchQuery.value = ''
+    searchResults.value = []
+    searchError.value = null
     source.value = ui.taskImport?.source ?? tasks.offeredSources[0]?.source ?? undefined
     containerId.value = containerItems.value[0]?.value
     creatingId.value = null
@@ -59,10 +103,14 @@ watch(open, (isOpen) => {
   }
 })
 
-async function createTask(externalId: string) {
+// 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) {
   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' })
@@ -100,7 +148,7 @@ async function doImport() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Import from a task source">
+  <UModal v-model:open="open" title="Tracker issues">
     <template #body>
       <!-- Empty state: no source offered (none connected/installed, or all disabled) -->
       <div v-if="!tasks.anyOffered" class="space-y-3 text-center">
@@ -146,21 +194,90 @@ async function doImport() {
           </UButton>
         </div>
 
+        <!-- Browse: search the tracker by title so an issue can be turned into a
+             task without knowing its key. -->
+        <UFormField v-if="searchable" label="Search issues">
+          <UInput
+            v-model="searchQuery"
+            :icon="searching ? 'i-lucide-loader-circle' : 'i-lucide-search'"
+            :ui="{ leadingIcon: searching ? 'animate-spin' : '' }"
+            placeholder="Search by title…"
+            class="w-full"
+          />
+        </UFormField>
+
+        <!-- Shared target container for every "Create task" action below. -->
+        <UFormField
+          v-if="containerItems.length && (freshHits.length || sourceTasks.length)"
+          label="Create tasks in"
+          class="w-72"
+        >
+          <USelect
+            v-model="containerId"
+            :items="containerItems"
+            placeholder="Pick a frame or module"
+            class="w-full"
+          />
+        </UFormField>
+        <p
+          v-else-if="!containerItems.length && (freshHits.length || sourceTasks.length)"
+          class="text-[11px] text-slate-500"
+        >
+          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. -->
+        <div v-if="searchError" class="text-[11px] text-amber-400">
+          Search failed: {{ searchError }}
+        </div>
+        <div v-if="freshHits.length" class="space-y-2">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            Search results
+          </h3>
+          <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"
+          >
+            <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>
+            </div>
+          </div>
+        </div>
+
         <!-- List of already-imported issues -->
         <div v-if="sourceTasks.length" class="space-y-2">
-          <div class="flex items-end justify-between gap-3">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              Imported issues
-            </h3>
-            <UFormField v-if="containerItems.length" label="Create tasks in" size="xs" class="w-56">
-              <USelect
-                v-model="containerId"
-                :items="containerItems"
-                placeholder="Pick a frame or module"
-                class="w-full"
-              />
-            </UFormField>
-          </div>
+          <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}`"
@@ -196,11 +313,13 @@ async function doImport() {
               </div>
             </div>
           </div>
-          <p v-if="!containerItems.length" class="text-[11px] text-slate-500">
-            Add a service frame to the board first to create tasks from issues.
-          </p>
         </div>
-        <p v-else class="text-center text-xs text-slate-500">No issues imported yet.</p>
+        <p
+          v-else-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.
+        </p>
       </div>
     </template>
   </UModal>

package/package.json

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