@cat-factory/app 0.6.0

package/app/components/board/BoardCanvas.vue

@@ -0,0 +1,183 @@
+<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 TaskDependencyEdges from './TaskDependencyEdges.vue'
+import { STATUS_META } from '~/utils/catalog'
+import { readDndPayload, blockIdFromEvent } from '~/utils/dnd'
+import { BOARD_FLOW_ID } from '~/composables/useBoardFlow'
+import { useTaskExpansion } from '~/composables/useTaskExpansion'
+
+const board = useBoardStore()
+const pipelines = usePipelinesStore()
+const execution = useExecutionStore()
+const ui = useUiStore()
+const github = useGitHubStore()
+const toast = useToast()
+
+const { onNodeDragStop, onViewportChange, screenToFlowCoordinate } = useVueFlow(BOARD_FLOW_ID)
+
+// Gate which task cards expand their pipeline list on deep zoom: only on-screen
+// cards, and only the centre-most of any that would overlap (see useTaskExpansion).
+const boardEl = ref<HTMLElement | null>(null)
+useTaskExpansion(boardEl)
+
+// Only frames are board nodes. Dependencies live on tasks (rendered inside the
+// frames), so there are no frame-to-frame edges on the canvas.
+//
+// Vue Flow tags every *draggable* node with the `nopan` class, which makes the
+// pane refuse to pan while the pointer is over it. An expanded frame fills much
+// of the viewport, so leaving it draggable turns the whole canvas into a dead
+// zone once tasks appear. We therefore make expanded frames non-draggable (the
+// pane pans straight through them) and move them via their header handle
+// instead — collapsed chips stay node-draggable since they're small.
+function frameExpanded(id: string) {
+  return ui.isFrameExpanded(id) && ui.lod !== 'far'
+}
+
+const nodes = computed(() =>
+  board.frames.map((b) => ({
+    id: b.id,
+    type: 'block',
+    position: b.position,
+    draggable: !frameExpanded(b.id),
+    data: {},
+  })),
+)
+
+onNodeDragStop(({ node }) => {
+  board.moveBlock(node.id, { x: node.position.x, y: node.position.y })
+})
+
+onViewportChange((vp) => {
+  ui.zoom = vp.zoom
+})
+
+function onNodeClick({ node }: NodeMouseEvent) {
+  ui.select(node.id)
+}
+
+function onNodeDoubleClick({ node }: NodeMouseEvent) {
+  // Frames are containers: double-click expands to reveal their tasks.
+  ui.toggleFrame(node.id)
+}
+
+function onPaneClick() {
+  ui.select(null)
+}
+
+function minimapColor(node: { id: string }) {
+  const b = board.getBlock(node.id)
+  return b ? STATUS_META[board.frameStatus(b.id)].color : '#475569'
+}
+
+// ---- palette drag & drop onto the canvas ----------------------------------
+function onDragOver(event: DragEvent) {
+  event.preventDefault()
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'
+}
+
+async function onDrop(event: DragEvent) {
+  event.preventDefault()
+  const payload = readDndPayload(event)
+  if (!payload) return
+
+  if (payload.kind === 'block') {
+    const position = screenToFlowCoordinate({ x: event.clientX, y: event.clientY })
+    try {
+      const block = await board.addBlock(payload.blockType, position)
+      ui.select(block.id)
+    } catch {
+      toast.add({
+        title: 'Could not add block',
+        description: 'The backend rejected the request.',
+        color: 'error',
+      })
+    }
+    return
+  }
+
+  if (payload.kind === 'pipeline') {
+    // Pipelines run against tasks, not frames. The nearest [data-block-id] under
+    // the cursor is the task card when dropped inside an expanded frame.
+    const blockId = blockIdFromEvent(event)
+    const target = blockId ? board.getBlock(blockId) : undefined
+    const pipeline = pipelines.getPipeline(payload.pipelineId)
+    if (!target || !pipeline) return
+    if (target.level !== 'task') {
+      toast.add({
+        title: 'Drop onto a task',
+        description: 'Pipelines run against tasks, not services.',
+      })
+      return
+    }
+    if (!board.isRunnable(target.id)) {
+      toast.add({ title: 'Task is blocked', description: 'Its dependencies haven’t merged yet.' })
+      return
+    }
+    execution.start(target.id, pipeline)
+    ui.select(target.id)
+  }
+}
+</script>
+
+<template>
+  <div ref="boardEl" class="relative h-full w-full" @drop="onDrop" @dragover="onDragOver">
+    <VueFlow
+      :id="BOARD_FLOW_ID"
+      :nodes="nodes"
+      :min-zoom="0.2"
+      :max-zoom="3"
+      :default-viewport="{ x: 40, y: 20, zoom: 0.85 }"
+      :pan-on-drag="[0, 2]"
+      fit-view-on-init
+      @node-click="onNodeClick"
+      @node-double-click="onNodeDoubleClick"
+      @pane-click="onPaneClick"
+      @contextmenu.prevent
+    >
+      <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" />
+      </template>
+    </VueFlow>
+
+    <!-- An empty board reads as broken; invite the user to add a service. The
+         overlay lets pointer events through (so the pane still pans) except on
+         the buttons themselves. -->
+    <div
+      v-if="board.frames.length === 0"
+      class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-4 text-center"
+    >
+      <UIcon name="i-lucide-layout-dashboard" class="h-10 w-10 text-slate-600" />
+      <div>
+        <h2 class="text-base font-semibold text-slate-300">Your board is empty</h2>
+        <p class="mt-1 max-w-sm text-sm text-slate-500">
+          Add a service to get started: bootstrap a fresh repo or pull in one you already have.
+        </p>
+      </div>
+      <div class="pointer-events-auto flex flex-wrap items-center justify-center gap-2">
+        <UButton color="primary" icon="i-lucide-git-branch-plus" @click="ui.openBootstrap()">
+          Bootstrap repo
+        </UButton>
+        <UButton
+          v-if="github.available"
+          color="primary"
+          variant="soft"
+          icon="i-lucide-folder-git-2"
+          @click="ui.openAddService()"
+        >
+          Add from existing repo
+        </UButton>
+      </div>
+    </div>
+
+    <!-- task dependency arrows, overlaid in screen space -->
+    <TaskDependencyEdges />
+  </div>
+</template>

package/app/components/board/ContextPicker.vue

@@ -0,0 +1,367 @@
+<script setup lang="ts">
+// A self-contained picker for attaching external context (imported docs +
+// tracker issues) to a task. It surfaces the existing integrations — Confluence /
+// Notion / GitHub repo docs (documents) and Jira / GitHub issues (tasks) — behind
+// one control: pick a source, then either search its catalogue by title/content
+// (when the source is searchable) or paste a page/issue URL or id, and pick from
+// what's already been imported. Chosen items are collected into a v-model list of
+// `PendingContext`; the parent links them once the block exists (see
+// useContextLinking). Connection/availability gating mirrors the sidebar: a
+// source that isn't connected shows a connect affordance instead of an input.
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type {
+  DocumentSearchResult,
+  DocumentSourceKind,
+  TaskSearchResult,
+  TaskSourceKind,
+} from '~/types/domain'
+
+const model = defineModel<PendingContext[]>({ required: true })
+
+const documents = useDocumentsStore()
+const tasks = useTasksStore()
+const ui = useUiStore()
+const toast = useToast()
+
+interface SourceOption {
+  kind: 'document' | 'task'
+  source: DocumentSourceKind | TaskSourceKind
+  label: string
+  icon: string
+  searchable: boolean
+  connected: boolean
+  refLabel: string
+  refPlaceholder: string
+}
+
+// Every configured source across both integrations, tagged by kind. Documents
+// first, then trackers — the order the sidebar uses.
+const sources = computed<SourceOption[]>(() => {
+  const docs: SourceOption[] = documents.available
+    ? documents.sources.map((s) => ({
+        kind: 'document',
+        source: s.source,
+        label: s.label,
+        icon: s.icon,
+        searchable: s.searchable ?? false,
+        connected: documents.isConnected(s.source),
+        refLabel: s.refLabel,
+        refPlaceholder: s.refPlaceholder,
+      }))
+    : []
+  const issues: SourceOption[] = tasks.available
+    ? tasks.sources.map((s) => ({
+        kind: 'task',
+        source: s.source,
+        label: s.label,
+        icon: s.icon,
+        searchable: s.searchable ?? false,
+        connected: tasks.isConnected(s.source),
+        refLabel: s.refLabel,
+        refPlaceholder: s.refPlaceholder,
+      }))
+    : []
+  return [...docs, ...issues]
+})
+
+const selectedKey = ref('')
+const selected = computed(() =>
+  sources.value.find((s) => `${s.kind}:${s.source}` === selectedKey.value),
+)
+
+// Default the selection to the first connected source (else the first source),
+// once the source list resolves.
+watch(
+  sources,
+  (list) => {
+    if (selected.value || list.length === 0) return
+    selectedKey.value = `${(list.find((s) => s.connected) ?? list[0]!).kind}:${(list.find((s) => s.connected) ?? list[0]!).source}`
+  },
+  { immediate: true },
+)
+
+const sourceMenu = computed<DropdownMenuItem[][]>(() => [
+  sources.value.map((s) => ({
+    label: s.connected ? s.label : `${s.label} (not connected)`,
+    icon: s.icon,
+    onSelect: () => {
+      selectedKey.value = `${s.kind}:${s.source}`
+      query.value = ''
+      results.value = []
+    },
+  })),
+])
+
+// The "set up a new integration" menu: every configured source, so the user can
+// connect (or reconnect) one without leaving the add-task popup. Unconnected
+// sources come first — those are the ones you'd typically be setting up here.
+const connectMenu = computed<DropdownMenuItem[][]>(() => [
+  [...sources.value]
+    .sort((a, b) => Number(a.connected) - Number(b.connected))
+    .map((s) => ({
+      label: s.connected ? `${s.label} (reconnect)` : `Connect ${s.label}`,
+      icon: s.icon,
+      onSelect: () => connect(s),
+    })),
+])
+
+// ---- search / import-by-ref ----------------------------------------------
+
+const query = ref('')
+const results = ref<(DocumentSearchResult | TaskSearchResult)[]>([])
+const searching = ref(false)
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+
+watch([query, selectedKey], () => {
+  results.value = []
+  if (searchTimer) clearTimeout(searchTimer)
+  const src = selected.value
+  const q = query.value.trim()
+  if (!src || !src.searchable || !src.connected || q.length < 2) return
+  searchTimer = setTimeout(() => void runSearch(src, q), 300)
+})
+
+async function runSearch(src: SourceOption, q: string) {
+  searching.value = true
+  try {
+    results.value =
+      src.kind === 'document'
+        ? await documents.search(src.source as DocumentSourceKind, q)
+        : await tasks.search(src.source as TaskSourceKind, q)
+  } catch {
+    // A search failure (e.g. the source can't search, or a transient API error)
+    // just yields no results — paste-a-URL still works.
+    results.value = []
+  } finally {
+    searching.value = false
+  }
+}
+
+const selectedKeys = computed(() => new Set(model.value.map(contextKey)))
+
+function toggle(item: PendingContext) {
+  const key = contextKey(item)
+  if (selectedKeys.value.has(key)) {
+    model.value = model.value.filter((c) => contextKey(c) !== key)
+  } else {
+    model.value = [...model.value, item]
+  }
+}
+
+/** Attach the raw input as a page/issue ref (URL or id) — imported on commit. */
+function addByRef() {
+  const src = selected.value
+  const ref = query.value.trim()
+  if (!src || !ref) return
+  toggle({
+    kind: src.kind,
+    source: src.source,
+    externalId: ref,
+    title: ref,
+    subtitle: `${src.label} · imports on add`,
+    icon: src.icon,
+    needsImport: true,
+  })
+  query.value = ''
+  results.value = []
+}
+
+function pickResult(src: SourceOption, r: DocumentSearchResult | TaskSearchResult) {
+  toggle({
+    kind: src.kind,
+    source: src.source,
+    externalId: r.externalId,
+    title: r.title,
+    subtitle: 'status' in r && r.status ? r.status : src.label,
+    icon: src.icon,
+    needsImport: true,
+  })
+}
+
+// Already-imported items for the selected source, for quick re-attaching without
+// a round-trip. Excludes anything already pending.
+const imported = computed<PendingContext[]>(() => {
+  const src = selected.value
+  if (!src) return []
+  const items: PendingContext[] =
+    src.kind === 'document'
+      ? documents.documents
+          .filter((d) => d.source === src.source)
+          .map((d) => ({
+            kind: 'document' as const,
+            source: d.source,
+            externalId: d.externalId,
+            title: d.title,
+            subtitle: src.label,
+            icon: src.icon,
+            needsImport: false,
+          }))
+      : tasks.tasks
+          .filter((t) => t.source === src.source)
+          .map((t) => ({
+            kind: 'task' as const,
+            source: t.source,
+            externalId: t.externalId,
+            title: `${t.externalId} · ${t.title}`,
+            subtitle: t.status || src.label,
+            icon: src.icon,
+            needsImport: false,
+          }))
+  return items.filter((i) => !selectedKeys.value.has(contextKey(i)))
+})
+
+function connect(src: SourceOption) {
+  if (src.kind === 'document') ui.openDocumentConnect(src.source as DocumentSourceKind)
+  else ui.openTaskConnect(src.source as TaskSourceKind)
+  toast.add({
+    title: `Connect ${src.label} — it'll be ready here once connected`,
+    icon: 'i-lucide-plug',
+  })
+}
+</script>
+
+<template>
+  <div v-if="sources.length" class="space-y-2">
+    <div class="flex items-center gap-2">
+      <UDropdownMenu :items="sourceMenu" class="shrink-0">
+        <UButton
+          color="neutral"
+          variant="subtle"
+          size="sm"
+          :icon="selected?.icon ?? 'i-lucide-link'"
+          trailing-icon="i-lucide-chevron-down"
+        >
+          {{ selected?.label ?? 'Source' }}
+        </UButton>
+      </UDropdownMenu>
+
+      <UInput
+        v-if="selected?.connected"
+        v-model="query"
+        :placeholder="
+          selected?.searchable
+            ? `Search ${selected?.label} or paste a URL…`
+            : selected?.refPlaceholder
+        "
+        class="flex-1"
+        :loading="searching"
+        icon="i-lucide-search"
+        @keydown.enter.prevent="addByRef"
+      />
+
+      <UDropdownMenu :items="connectMenu" class="ml-auto shrink-0">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          icon="i-lucide-plus"
+          trailing-icon="i-lucide-chevron-down"
+          title="Connect an integration"
+        >
+          Connect a source
+        </UButton>
+      </UDropdownMenu>
+    </div>
+
+    <!-- not-connected affordance -->
+    <div
+      v-if="selected && !selected.connected"
+      class="flex items-center justify-between rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-400"
+    >
+      <span>{{ selected.label }} isn't connected yet.</span>
+      <UButton
+        color="neutral"
+        variant="soft"
+        size="xs"
+        icon="i-lucide-plug"
+        @click="connect(selected)"
+      >
+        Connect
+      </UButton>
+    </div>
+
+    <!-- search results + paste-by-URL -->
+    <div v-if="selected?.connected && query.trim()" class="space-y-1">
+      <button
+        type="button"
+        class="flex w-full items-center gap-1.5 rounded-md border border-dashed border-slate-700 bg-slate-900/40 px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/60"
+        @click="addByRef"
+      >
+        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+        <span class="truncate">Link “{{ query.trim() }}” by URL or id</span>
+      </button>
+      <button
+        v-for="r in results"
+        :key="`${r.source}:${r.externalId}`"
+        type="button"
+        class="w-full rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/60"
+        @click="pickResult(selected!, r)"
+      >
+        <span class="flex items-center gap-1.5">
+          <UIcon
+            :name="selected?.icon ?? 'i-lucide-file-text'"
+            class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+          />
+          <span class="truncate">{{ r.title }}</span>
+          <UBadge
+            v-if="'status' in r && r.status"
+            color="neutral"
+            variant="soft"
+            size="xs"
+            class="ml-auto shrink-0"
+          >
+            {{ r.status }}
+          </UBadge>
+        </span>
+        <span v-if="r.excerpt" class="mt-0.5 block truncate pl-5 text-[11px] text-slate-500">
+          {{ r.excerpt }}
+        </span>
+      </button>
+      <p
+        v-if="selected?.searchable && !searching && !results.length"
+        class="px-1 text-[11px] text-slate-500"
+      >
+        No matches — or paste the exact URL/id above.
+      </p>
+    </div>
+
+    <!-- already-imported quick pick -->
+    <div v-if="imported.length" class="space-y-1">
+      <span class="px-1 text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+        Already imported
+      </span>
+      <button
+        v-for="item in imported"
+        :key="contextKey(item)"
+        type="button"
+        class="flex w-full items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/60"
+        @click="toggle(item)"
+      >
+        <UIcon
+          :name="item.icon ?? 'i-lucide-file-text'"
+          class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+        />
+        <span class="truncate">{{ item.title }}</span>
+      </button>
+    </div>
+
+    <!-- chosen items -->
+    <div v-if="model.length" class="flex flex-wrap gap-1.5">
+      <span
+        v-for="item in model"
+        :key="contextKey(item)"
+        class="flex max-w-full items-center gap-1 rounded-full border border-indigo-500/60 bg-indigo-500/10 px-2 py-0.5 text-[11px] text-slate-200"
+      >
+        <UIcon :name="item.icon ?? 'i-lucide-link'" class="h-3 w-3 shrink-0 text-indigo-400" />
+        <span class="truncate">{{ item.title }}</span>
+        <button
+          type="button"
+          class="shrink-0 text-slate-400 hover:text-slate-200"
+          @click="toggle(item)"
+        >
+          <UIcon name="i-lucide-x" class="h-3 w-3" />
+        </button>
+      </span>
+    </div>
+  </div>
+</template>