@cat-factory/app 0.15.0 → 0.16.0

package/app/components/board/AddTaskModal.vue

@@ -5,13 +5,14 @@
 // pipeline on it explicitly (and can keep editing it until they do).
 //
 // The form also shows ungated "Context documents" / "Context issues" sections
-// (mirroring the task inspector): pick already-imported docs/issues — or open the
-// import flow — to attach as agent context. When the relevant integration isn't
-// connected the Attach button is disabled with a hint. Linking needs the block id,
+// (mirroring the task inspector): an inline search picker (ContextDocumentPicker /
+// ContextIssuePicker) finds already-imported items, search hits, or a pasted ref to
+// attach as agent context. When the relevant integration isn't connected the Attach
+// button is disabled with a hint. Linking needs the block id,
 // so chosen items are staged locally and import-and-linked once the task is created
 // (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 ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 
 const ui = useUiStore()
@@ -200,41 +201,13 @@ function removePending(item: PendingContext) {
   pendingContext.value = pendingContext.value.filter((c) => contextKey(c) !== contextKey(item))
 }
 
-// Attach menus: already-imported items not yet chosen, plus the import entry — the
-// same affordances the inspector offers. Picking one stages it locally (it links
-// after the task is created).
-const docAttachMenu = computed<DropdownMenuItem[][]>(() => {
-  const chosen = new Set(pendingContext.value.map(contextKey))
-  const items: DropdownMenuItem[] = documents.documents
-    .filter(
-      (d) =>
-        !chosen.has(contextKey({ kind: 'document', source: d.source, externalId: d.externalId })),
-    )
-    .map((d) => ({
-      label: d.title,
-      icon: documents.descriptorFor(d.source)?.icon ?? 'i-lucide-file-text',
-      onSelect: () =>
-        addPending({
-          kind: 'document',
-          source: d.source,
-          externalId: d.externalId,
-          title: d.title,
-          icon: documents.descriptorFor(d.source)?.icon ?? 'i-lucide-file-text',
-          needsImport: false,
-        }),
-    }))
-  items.push({
-    label: 'Import a page…',
-    icon: 'i-lucide-file-down',
-    onSelect: () => ui.openDocumentImport(null),
-  })
-  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.
+// Context documents and issues are both picked through an inline search picker
+// (ContextDocumentPicker / ContextIssuePicker) rather than a dropdown that opens a
+// second modal — stacked page-level modals don't interact here, which is why the
+// old "Import a page…" / "Import an issue…" entries appeared to open something but
+// nothing was clickable. The "Attach" button toggles the relevant picker open.
+const showDocPicker = ref(false)
+const chosenDocKeys = computed(() => pendingDocs.value.map(contextKey))
 const showIssuePicker = ref(false)
 const chosenIssueKeys = computed(() => pendingIssues.value.map(contextKey))
 
@@ -255,6 +228,7 @@ watch(open, (isOpen) => {
   pipelineId.value = ''
   agentConfigValues.value = {}
   pendingContext.value = []
+  showDocPicker.value = false
   showIssuePicker.value = false
   documents.loadDocuments().catch(() => {})
   tasks.loadTasks().catch(() => {})
@@ -508,15 +482,16 @@ async function add() {
               <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                 Context documents
               </span>
-              <UDropdownMenu
+              <UButton
                 v-if="docsConnected"
-                :items="docAttachMenu"
-                :content="{ side: 'bottom', align: 'end' }"
+                color="neutral"
+                variant="soft"
+                size="xs"
+                :icon="showDocPicker ? 'i-lucide-x' : 'i-lucide-plus'"
+                @click="showDocPicker = !showDocPicker"
               >
-                <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">
-                  Attach
-                </UButton>
-              </UDropdownMenu>
+                {{ showDocPicker ? 'Done' : 'Attach' }}
+              </UButton>
               <UButton
                 v-else
                 color="neutral"
@@ -533,6 +508,11 @@ async function add() {
                 Attach
               </UButton>
             </div>
+            <ContextDocumentPicker
+              v-if="showDocPicker && docsConnected"
+              :chosen-keys="chosenDocKeys"
+              @pick="addPending"
+            />
             <div v-if="pendingDocs.length" class="space-y-1">
               <div
                 v-for="item in pendingDocs"

package/app/components/documents/ContextDocumentPicker.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+// Inline picker for attaching a document (Confluence / Notion / GitHub page) as
+// task context. It searches the connected source by free text, lists
+// already-imported documents for quick re-use, and accepts a pasted URL/ID as a
+// reference — all inline, with NO second modal (stacked page-level modals don't
+// interact here, which is why the old "Import a page…" path appeared to open
+// something but nothing was clickable). 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. Mirrors ContextIssuePicker.
+import type { DocumentSearchResult, DocumentSourceKind } 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 documents = useDocumentsStore()
+
+const chosen = computed(() => new Set(props.chosenKeys ?? []))
+
+// Source: default to the first connected source; a selector appears only when
+// more than one is connected (the common case is a single source).
+const source = ref<DocumentSourceKind | undefined>(documents.connectedSources[0]?.source)
+const sourceItems = computed(() =>
+  documents.connectedSources.map((s) => ({ label: s.label, value: s.source })),
+)
+const descriptor = computed(() =>
+  source.value ? documents.descriptorFor(source.value) : undefined,
+)
+const searchable = computed(() => descriptor.value?.searchable ?? false)
+
+const query = ref('')
+const results = ref<DocumentSearchResult[]>([])
+const searching = ref(false)
+const searchError = ref<string | null>(null)
+
+// Debounced search: free text hits the source; a query that's clearly a URL/ID
+// 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 documents.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-file-text')
+
+function keyFor(externalId: string): string {
+  return source.value
+    ? contextKey({ kind: 'document', source: source.value, externalId })
+    : `document::${externalId}`
+}
+
+// Already-imported documents 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 documents.documents
+    .filter((d) => d.source === source.value)
+    .filter((d) => !chosen.value.has(keyFor(d.externalId)))
+    .filter((d) => !q || d.title.toLowerCase().includes(q) || d.excerpt.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(
+    documents.documents.filter((d) => d.source === source.value).map((d) => d.externalId),
+  )
+  return results.value
+    .filter((r) => !importedIds.has(r.externalId))
+    .filter((r) => !chosen.value.has(keyFor(r.externalId)))
+})
+
+// A pasted URL / ID the search won't match: offer it as an explicit reference.
+// When the source isn't searchable, any non-empty query is treated as a ref (the
+// only way to attach a page there, mirroring the import modal's single input).
+const refRow = computed(() => {
+  const q = query.value.trim()
+  if (!q || !source.value) return null
+  const known =
+    importedRows.value.some((d) => d.externalId === q) ||
+    searchRows.value.some((r) => r.externalId === q) ||
+    chosen.value.has(keyFor(q))
+  if (known) return null
+  if (!searchable.value) return q
+  // 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, excerpt: string) {
+  if (!source.value) return
+  emit('pick', {
+    kind: 'document',
+    source: source.value,
+    externalId,
+    title,
+    subtitle: excerpt || undefined,
+    icon: icon.value,
+    needsImport: false,
+  })
+}
+
+function pickSearch(r: DocumentSearchResult) {
+  emit('pick', {
+    kind: 'document',
+    source: r.source,
+    externalId: r.externalId,
+    title: r.title,
+    subtitle: r.excerpt || undefined,
+    icon: icon.value,
+    needsImport: true,
+  })
+}
+
+function pickRef(q: string) {
+  if (!source.value) return
+  emit('pick', {
+    kind: 'document',
+    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).
+  documents.loadDocuments().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 pages or paste a URL/ID…'
+          : (descriptor?.refPlaceholder ?? 'Paste a page URL or ID…')
+      "
+      @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 documents (linked directly, no re-fetch). -->
+      <button
+        v-for="d in importedRows"
+        :key="`imp:${d.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(d.externalId, d.title, d.excerpt)"
+      >
+        <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+        <span class="truncate">{{ d.title }}</span>
+        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">imported</UBadge>
+      </button>
+
+      <!-- Source 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.title }}</span>
+      </button>
+
+      <!-- Explicit URL/ID 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 pages.'
+            : searchable
+              ? 'Search by title, or pick an imported document.'
+              : 'Paste a page URL or ID to attach it.'
+        }}
+      </p>
+    </div>
+  </div>
+</template>

package/package.json

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