@cat-factory/app 1.0.0

package/app/components/documents/DocumentImportModal.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { DocumentSourceKind } from '~/types/domain'
+
+// Import pages from a connected document source and pick one to expand into
+// board structure. A source selector lets the user choose which connected source
+// to import from (Confluence, Notion, …). Carries an optional target frame from
+// the inspector so "Preview & spawn" lands the structure inside that frame.
+const ui = useUiStore()
+const documents = useDocumentsStore()
+const board = useBoardStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.documentImport !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeDocumentImport()
+  },
+})
+
+const targetFrameId = computed(() => ui.documentImport?.targetFrameId ?? null)
+const targetFrameTitle = computed(() =>
+  targetFrameId.value ? board.getBlock(targetFrameId.value)?.title : null,
+)
+
+/** Which connected source we're importing from (defaults to the first). */
+const source = ref<DocumentSourceKind | undefined>(undefined)
+const ref_ = ref('')
+const importing = ref(false)
+
+const sourceItems = computed(() =>
+  documents.connectedSources.map((s) => ({ label: s.label, value: s.source })),
+)
+const descriptor = computed(() =>
+  source.value ? documents.descriptorFor(source.value) : undefined,
+)
+
+/** Documents imported from the currently selected source. */
+const sourceDocs = computed(() =>
+  source.value ? documents.documents.filter((d) => d.source === source.value) : [],
+)
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    ref_.value = ''
+    source.value = ui.documentImport?.source ?? documents.connectedSources[0]?.source ?? undefined
+    documents.loadDocuments().catch(() => {})
+  }
+})
+
+async function doImport() {
+  const value = ref_.value.trim()
+  if (!value || !source.value) return
+  importing.value = true
+  try {
+    const doc = await documents.importDocument(source.value, value)
+    ref_.value = ''
+    toast.add({ title: `Imported "${doc.title}"`, icon: 'i-lucide-file-down' })
+  } catch (e) {
+    toast.add({
+      title: 'Import failed',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    importing.value = false
+  }
+}
+
+function preview(externalId: string) {
+  if (source.value) ui.openSpawnPreview(source.value, externalId, targetFrameId.value)
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Import from a document source">
+    <template #body>
+      <div v-if="!documents.anyConnected" class="space-y-3 text-center">
+        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
+        <p class="text-sm text-slate-400">Connect a document source first.</p>
+        <div class="flex justify-center gap-2">
+          <UButton
+            v-for="s in documents.sources"
+            :key="s.source"
+            color="primary"
+            variant="soft"
+            :icon="s.icon"
+            @click="ui.openDocumentConnect(s.source)"
+          >
+            Connect {{ s.label }}
+          </UButton>
+        </div>
+      </div>
+
+      <div v-else class="space-y-4">
+        <p v-if="targetFrameTitle" class="text-xs text-slate-400">
+          Spawning into <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
+        </p>
+
+        <UFormField v-if="sourceItems.length > 1" label="Source">
+          <USelect v-model="source" :items="sourceItems" class="w-full" />
+        </UFormField>
+
+        <div class="flex items-end gap-2">
+          <UFormField :label="descriptor?.refLabel ?? 'Page URL or ID'" class="flex-1">
+            <UInput
+              v-model="ref_"
+              :placeholder="descriptor?.refPlaceholder"
+              class="w-full"
+              @keydown.enter="doImport"
+            />
+          </UFormField>
+          <UButton
+            color="primary"
+            icon="i-lucide-file-down"
+            :loading="importing"
+            :disabled="!ref_.trim()"
+            @click="doImport"
+          >
+            Import
+          </UButton>
+        </div>
+
+        <div v-if="sourceDocs.length" class="space-y-2">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            Imported documents
+          </h3>
+          <div
+            v-for="doc in sourceDocs"
+            :key="`${doc.source}:${doc.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="doc.url"
+                  target="_blank"
+                  rel="noopener"
+                  class="truncate text-sm font-medium text-white hover:underline"
+                >
+                  {{ doc.title }}
+                </a>
+                <p class="mt-0.5 line-clamp-2 text-xs text-slate-500">{{ doc.excerpt }}</p>
+              </div>
+              <UButton
+                color="primary"
+                variant="soft"
+                size="xs"
+                icon="i-lucide-wand-sparkles"
+                @click="preview(doc.externalId)"
+              >
+                Preview &amp; spawn
+              </UButton>
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-center text-xs text-slate-500">No documents imported yet.</p>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+// Connect (or disconnect) the workspace to a document source. The form is
+// rendered generically from the source's descriptor (credential fields), so the
+// same modal serves Confluence, Notion and any future source. Secret credentials
+// are write-only — the backend never returns them, so on reload we show
+// "Connected" with empty fields.
+const ui = useUiStore()
+const documents = useDocumentsStore()
+const toast = useToast()
+
+const source = computed(() => ui.documentConnect?.source ?? null)
+const descriptor = computed(() =>
+  source.value ? documents.descriptorFor(source.value) : undefined,
+)
+const connection = computed(() =>
+  source.value ? documents.connectionFor(source.value) : undefined,
+)
+const connected = computed(() => connection.value !== undefined)
+
+const open = computed({
+  get: () => ui.documentConnect !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeDocumentConnect()
+  },
+})
+
+/** One value per credential field, reset whenever the modal (re)opens. */
+const values = ref<Record<string, string>>({})
+const saving = ref(false)
+
+watch(open, (isOpen) => {
+  if (isOpen) values.value = {}
+})
+
+const canSubmit = computed(() => {
+  const fields = descriptor.value?.credentialFields ?? []
+  return fields.length > 0 && fields.every((f) => (values.value[f.key] ?? '').trim())
+})
+
+async function submit() {
+  if (!canSubmit.value || !source.value) return
+  const credentials: Record<string, string> = {}
+  for (const f of descriptor.value!.credentialFields) {
+    credentials[f.key] = values.value[f.key]!.trim()
+  }
+  saving.value = true
+  try {
+    await documents.connect(source.value, credentials)
+    toast.add({
+      title: `${descriptor.value!.label} connected`,
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+    ui.closeDocumentConnect()
+  } catch (e) {
+    toast.add({
+      title: 'Could not connect',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+async function disconnect() {
+  if (!source.value) return
+  await documents.disconnect(source.value)
+  toast.add({
+    title: `${descriptor.value?.label ?? 'Source'} disconnected`,
+    icon: 'i-lucide-unplug',
+  })
+  ui.closeDocumentConnect()
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
+    <template #body>
+      <div v-if="descriptor" class="space-y-4">
+        <p class="text-sm text-slate-400">
+          Connect {{ descriptor.label }} to import requirements, RFCs and PRDs, then spawn board
+          structure or attach them to tasks as agent context.
+        </p>
+
+        <div class="space-y-3">
+          <UFormField
+            v-for="field in descriptor.credentialFields"
+            :key="field.key"
+            :label="field.label"
+            :help="field.help"
+          >
+            <UInput
+              v-model="values[field.key]"
+              :type="field.secret ? 'password' : 'text'"
+              :placeholder="field.placeholder"
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+
+        <div class="flex items-center justify-between gap-2 pt-1">
+          <UButton
+            v-if="connected"
+            color="error"
+            variant="ghost"
+            icon="i-lucide-unplug"
+            @click="disconnect"
+          >
+            Disconnect
+          </UButton>
+          <div v-else />
+          <UButton
+            color="primary"
+            icon="i-lucide-plug"
+            :loading="saving"
+            :disabled="!canSubmit"
+            @click="submit"
+          >
+            {{ connected ? 'Update connection' : 'Connect' }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/documents/SpawnPreviewModal.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { DocumentBoardPlan } from '~/types/domain'
+
+// Preview the structure an imported document expands into, then spawn it. The
+// plan is fetched fresh on open; a badge makes clear whether an LLM or the
+// deterministic heading parser produced it.
+const ui = useUiStore()
+const documents = useDocumentsStore()
+const board = useBoardStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.spawnPreview !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeSpawnPreview()
+  },
+})
+
+const targetFrameId = computed(() => ui.spawnPreview?.targetFrameId ?? null)
+const targetFrameTitle = computed(() =>
+  targetFrameId.value ? board.getBlock(targetFrameId.value)?.title : null,
+)
+
+const plan = ref<DocumentBoardPlan | null>(null)
+const loadingPlan = ref(false)
+const spawning = ref(false)
+
+watch(
+  () => ui.spawnPreview?.externalId,
+  async (externalId) => {
+    plan.value = null
+    const preview = ui.spawnPreview
+    if (!externalId || !preview) return
+    loadingPlan.value = true
+    try {
+      plan.value = await documents.plan(preview.source, externalId)
+    } catch (e) {
+      toast.add({
+        title: 'Could not build a plan',
+        description: e instanceof Error ? e.message : String(e),
+        icon: 'i-lucide-triangle-alert',
+        color: 'error',
+      })
+    } finally {
+      loadingPlan.value = false
+    }
+  },
+  { immediate: true },
+)
+
+async function spawn() {
+  const preview = ui.spawnPreview
+  if (!preview) return
+  spawning.value = true
+  try {
+    const result = await documents.spawn(
+      preview.source,
+      preview.externalId,
+      targetFrameId.value ?? undefined,
+    )
+    toast.add({
+      title: 'Structure spawned',
+      description: `${result.frames} frames · ${result.modules} modules · ${result.tasks} tasks`,
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+    ui.closeSpawnPreview()
+    ui.closeDocumentImport()
+  } catch (e) {
+    toast.add({
+      title: 'Spawn failed',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    spawning.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Preview structure">
+    <template #body>
+      <div class="space-y-4">
+        <div v-if="plan" class="flex items-center justify-between gap-2">
+          <UBadge
+            :color="plan.planner === 'llm' ? 'primary' : 'neutral'"
+            variant="subtle"
+            size="sm"
+          >
+            {{ plan.planner === 'llm' ? 'AI-generated' : 'From headings' }}
+          </UBadge>
+          <span v-if="targetFrameTitle" class="text-xs text-slate-400">
+            into <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
+          </span>
+          <span v-else class="text-xs text-slate-400">as new top-level frames</span>
+        </div>
+
+        <div v-if="loadingPlan" class="flex items-center gap-2 text-sm text-slate-400">
+          <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" /> Building plan…
+        </div>
+
+        <div v-else-if="plan" class="max-h-80 space-y-3 overflow-y-auto pr-1">
+          <div
+            v-for="(frame, fi) in plan.frames"
+            :key="fi"
+            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+          >
+            <div class="flex items-center gap-2">
+              <UIcon name="i-lucide-box" class="h-4 w-4 text-indigo-400" />
+              <span class="text-sm font-semibold text-white">{{ frame.title }}</span>
+              <UBadge variant="subtle" size="sm" color="neutral">{{ frame.type }}</UBadge>
+            </div>
+
+            <ul v-if="frame.tasks.length" class="mt-2 space-y-1 pl-6">
+              <li
+                v-for="(task, ti) in frame.tasks"
+                :key="`t-${ti}`"
+                class="flex items-center gap-1.5 text-xs text-slate-300"
+              >
+                <UIcon name="i-lucide-square-check-big" class="h-3 w-3 text-slate-500" />
+                {{ task.title }}
+              </li>
+            </ul>
+
+            <div v-for="(mod, mi) in frame.modules" :key="`m-${mi}`" class="mt-2 pl-4">
+              <div class="flex items-center gap-1.5 text-xs font-medium text-slate-200">
+                <UIcon name="i-lucide-folder" class="h-3.5 w-3.5 text-amber-400" />
+                {{ mod.name }}
+              </div>
+              <ul class="mt-1 space-y-1 pl-5">
+                <li
+                  v-for="(task, ti) in mod.tasks"
+                  :key="`mt-${ti}`"
+                  class="flex items-center gap-1.5 text-xs text-slate-300"
+                >
+                  <UIcon name="i-lucide-square-check-big" class="h-3 w-3 text-slate-500" />
+                  {{ task.title }}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-2 pt-1">
+          <UButton color="neutral" variant="ghost" @click="ui.closeSpawnPreview()">Cancel</UButton>
+          <UButton
+            color="primary"
+            icon="i-lucide-wand-sparkles"
+            :loading="spawning"
+            :disabled="!plan || loadingPlan"
+            @click="spawn"
+          >
+            Spawn onto board
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/documents/TaskContextDocs.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { Block, DocumentSourceKind } from '~/types/domain'
+
+// Documents (from any source) attached to a task as agent context, shown inside
+// the InspectorPanel. Linked docs are fed to agents during execution (see the
+// backend's userPromptFor). Rendered only when the integration is available.
+const props = defineProps<{ block: Block }>()
+
+const documents = useDocumentsStore()
+const ui = useUiStore()
+const toast = useToast()
+
+onMounted(() => {
+  documents.loadDocuments().catch(() => {})
+})
+
+const linked = computed(() => documents.docsForBlock(props.block.id))
+
+async function attach(source: DocumentSourceKind, externalId: string) {
+  try {
+    await documents.linkToBlock(props.block.id, source, externalId)
+    toast.add({ title: 'Document attached', icon: 'i-lucide-link' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not attach',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
+}
+
+const attachMenu = computed<DropdownMenuItem[][]>(() => {
+  const linkedKeys = new Set(linked.value.map((d) => `${d.source}:${d.externalId}`))
+  const items: DropdownMenuItem[] = documents.documents
+    .filter((d) => !linkedKeys.has(`${d.source}:${d.externalId}`))
+    .map((d) => ({
+      label: d.title,
+      icon: documents.descriptorFor(d.source)?.icon ?? 'i-lucide-file-text',
+      onSelect: () => attach(d.source, d.externalId),
+    }))
+  items.push({
+    label: 'Import a page…',
+    icon: 'i-lucide-file-down',
+    onSelect: () => ui.openDocumentImport(null),
+  })
+  return [items]
+})
+</script>
+
+<template>
+  <div v-if="documents.available" class="space-y-2">
+    <div class="flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Context documents
+      </span>
+      <UDropdownMenu :items="attachMenu" :content="{ side: 'bottom', align: 'end' }">
+        <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">Attach</UButton>
+      </UDropdownMenu>
+    </div>
+
+    <div v-if="linked.length" class="space-y-1">
+      <a
+        v-for="doc in linked"
+        :key="`${doc.source}:${doc.externalId}`"
+        :href="doc.url"
+        target="_blank"
+        rel="noopener"
+        class="flex items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-300 hover:bg-slate-800/60"
+      >
+        <UIcon
+          :name="documents.descriptorFor(doc.source)?.icon ?? 'i-lucide-file-text'"
+          class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+        />
+        <span class="truncate">{{ doc.title }}</span>
+      </a>
+    </div>
+    <p v-else class="text-[11px] text-slate-500">
+      Attach a requirement, RFC or PRD so agents see it while implementing this task.
+    </p>
+  </div>
+</template>

package/app/components/focus/BlockFocusView.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
+import type { Block } from '~/types/domain'
+import { BLOCK_TYPE_META, STATUS_META } from '~/utils/catalog'
+import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
+
+const board = useBoardStore()
+const pipelines = usePipelinesStore()
+const execution = useExecutionStore()
+const ui = useUiStore()
+const models = useModelsStore()
+
+onMounted(() => models.ensureLoaded())
+
+const block = computed<Block | undefined>(() =>
+  ui.focusBlockId ? board.getBlock(ui.focusBlockId) : undefined,
+)
+const instance = computed(() => execution.getInstance(block.value?.executionId))
+const statusMeta = computed(() => (block.value ? STATUS_META[block.value.status] : null))
+const typeMeta = computed(() => (block.value ? BLOCK_TYPE_META[block.value.type] : null))
+
+const deps = computed(() =>
+  (block.value?.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),
+)
+
+const runMenu = computed(() =>
+  pipelines.pipelines.map((p) => ({
+    label: p.name,
+    icon: 'i-lucide-play',
+    onSelect: () => block.value && execution.start(block.value.id, p),
+  })),
+)
+
+function close() {
+  ui.focus(null)
+}
+
+onKeyStroke('Escape', () => {
+  if (ui.focusBlockId) close()
+})
+
+function openDecisionFor(decisionId: string) {
+  if (instance.value) ui.openDecision(instance.value.id, decisionId)
+}
+</script>
+
+<template>
+  <Transition name="focus-fade">
+    <div
+      v-if="block && statusMeta && typeMeta"
+      class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
+    >
+      <!-- header / breadcrumb -->
+      <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+        <UButton
+          icon="i-lucide-arrow-left"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="close"
+        >
+          Board
+        </UButton>
+        <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600" />
+        <div
+          class="flex h-9 w-9 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>
+          <h1 class="text-lg font-semibold text-white">{{ block.title }}</h1>
+          <div class="text-xs text-slate-500">{{ typeMeta.label }} · focus view</div>
+        </div>
+        <UBadge :color="statusMeta.chip as any" variant="subtle" class="ml-2">
+          {{ statusMeta.label }}
+        </UBadge>
+        <div class="ml-auto flex items-center gap-2">
+          <UDropdownMenu :items="runMenu">
+            <UButton
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-play"
+              trailing-icon="i-lucide-chevron-down"
+            >
+              {{ instance ? 'Re-run pipeline' : 'Run pipeline' }}
+            </UButton>
+          </UDropdownMenu>
+          <UButton icon="i-lucide-x" color="neutral" variant="ghost" @click="close" />
+        </div>
+      </header>
+
+      <div class="grid flex-1 grid-cols-[1fr_300px] gap-6 overflow-hidden p-6">
+        <!-- main: pipeline flow -->
+        <section
+          class="flex flex-col overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-6"
+        >
+          <div class="mb-4 flex items-center gap-2">
+            <UIcon name="i-lucide-workflow" class="h-4 w-4 text-slate-500" />
+            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
+              {{ instance ? instance.pipelineName : 'No pipeline running' }}
+            </h2>
+          </div>
+
+          <PipelineProgress v-if="instance" :instance="instance" @open-decision="openDecisionFor" />
+
+          <div
+            v-else
+            class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-slate-700 text-sm text-slate-500"
+          >
+            Run a pipeline to visualize the agents working on this block.
+          </div>
+        </section>
+
+        <!-- side: details -->
+        <aside
+          class="space-y-4 overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-5"
+        >
+          <div>
+            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              Description
+            </div>
+            <p class="text-sm text-slate-300">{{ block.description }}</p>
+          </div>
+          <div v-if="instance">
+            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              Overall progress
+            </div>
+            <UProgress :model-value="Math.round(block.progress * 100)" />
+            <div class="mt-1 text-[11px] text-slate-400">
+              {{ Math.round(block.progress * 100) }}%
+            </div>
+          </div>
+          <div>
+            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              Dependencies
+            </div>
+            <div v-if="deps.length" class="flex flex-wrap gap-1">
+              <UBadge v-for="d in deps" :key="d.id" color="neutral" variant="subtle" size="sm">
+                {{ d.title }}
+              </UBadge>
+            </div>
+            <div v-else class="text-[11px] text-slate-500">None</div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.focus-fade-enter-active,
+.focus-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.focus-fade-enter-from,
+.focus-fade-leave-to {
+  opacity: 0;
+}
+</style>