@cat-factory/app 0.6.0

package/app/components/board/RecurringPipelineModal.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+// Add a recurring pipeline to a service frame. Mirrors AddTaskModal: a button on
+// the frame opens this, scoped to that frame (ui.addRecurringFrameId). The user
+// names it, picks a pipeline + cadence, and the backend materialises one reused
+// task block inside the frame that the schedule re-runs. When the Tech-debt
+// pipeline is picked, the workspace issue-tracker choice is surfaced inline (it is
+// where that pipeline files its ticket) and saved alongside.
+import type { Recurrence, ScheduleTemplate } from '~/types/recurring'
+
+const ui = useUiStore()
+const board = useBoardStore()
+const pipelines = usePipelinesStore()
+const recurring = useRecurringPipelinesStore()
+const tracker = useTrackerStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.addRecurringFrameId !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeAddRecurring()
+  },
+})
+
+const frame = computed(() =>
+  ui.addRecurringFrameId ? board.getBlock(ui.addRecurringFrameId) : undefined,
+)
+
+const name = ref('')
+const description = ref('')
+const pipelineId = ref('')
+const saving = ref(false)
+const recurrence = ref<Recurrence>(defaultRecurrence())
+
+// Tracker config (only relevant when the tech-debt pipeline is picked).
+const trackerKind = ref<'github' | 'jira' | null>(null)
+const jiraProjectKey = ref('')
+
+function defaultRecurrence(): Recurrence {
+  return {
+    intervalHours: 168, // weekly
+    weekdays: [],
+    windowStartHour: null,
+    windowEndHour: null,
+    timezone: 'UTC',
+  }
+}
+
+const pipelineMenu = computed(() => [
+  pipelines.pipelines.map((p) => ({
+    label: p.name,
+    icon: 'i-lucide-workflow',
+    onSelect: () => (pipelineId.value = p.id),
+  })),
+])
+const selectedPipeline = computed(() => pipelines.getPipeline(pipelineId.value))
+const selectedPipelineLabel = computed(() => selectedPipeline.value?.name ?? 'Pick a pipeline')
+
+// Infer the template from the picked pipeline so the backend seeds the right block
+// description (and so we know to show the tracker config).
+const template = computed<ScheduleTemplate>(() => {
+  if (pipelineId.value === 'pl_tech_debt') return 'tech-debt'
+  if (pipelineId.value === 'pl_dep_update') return 'dep-update'
+  return 'custom'
+})
+const isTechDebt = computed(() => template.value === 'tech-debt')
+
+watch(open, (isOpen) => {
+  if (!isOpen) return
+  name.value = ''
+  description.value = ''
+  // Default to the Dependency-updates pipeline if present, else the first.
+  pipelineId.value =
+    pipelines.pipelines.find((p) => p.id === 'pl_dep_update')?.id ??
+    pipelines.pipelines[0]?.id ??
+    ''
+  recurrence.value = defaultRecurrence()
+  saving.value = false
+  trackerKind.value = tracker.settings.tracker
+  jiraProjectKey.value = tracker.settings.jiraProjectKey ?? ''
+})
+
+const canAdd = computed(() => name.value.trim().length > 0 && pipelineId.value.length > 0)
+
+async function add() {
+  const frameId = ui.addRecurringFrameId
+  if (!frameId || !canAdd.value) return
+  saving.value = true
+  try {
+    // Persist the tracker selection first when the tech-debt pipeline needs it, so
+    // the very first run can file its ticket.
+    if (isTechDebt.value && trackerKind.value) {
+      await tracker.save({
+        tracker: trackerKind.value,
+        jiraProjectKey: trackerKind.value === 'jira' ? jiraProjectKey.value.trim() : null,
+      })
+    }
+    await recurring.create({
+      frameId,
+      pipelineId: pipelineId.value,
+      template: template.value,
+      name: name.value.trim(),
+      recurrence: recurrence.value,
+      ...(description.value.trim() ? { description: description.value.trim() } : {}),
+    })
+    ui.closeAddRecurring()
+  } catch (e) {
+    toast.add({
+      title: 'Could not add recurring pipeline',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Add a recurring pipeline">
+    <template #body>
+      <div class="space-y-4">
+        <p v-if="frame" class="text-xs text-slate-400">
+          Recurring pipeline on
+          <span class="font-medium text-slate-200">{{ frame.title }}</span>
+        </p>
+
+        <UFormField label="Name" required>
+          <UInput
+            v-model="name"
+            placeholder="e.g. Weekly dependency updates"
+            autofocus
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="Pipeline" required>
+          <UDropdownMenu :items="pipelineMenu" class="w-full">
+            <UButton
+              color="neutral"
+              variant="subtle"
+              size="sm"
+              icon="i-lucide-workflow"
+              trailing-icon="i-lucide-chevron-down"
+              class="w-full justify-between"
+            >
+              {{ selectedPipelineLabel }}
+            </UButton>
+          </UDropdownMenu>
+        </UFormField>
+
+        <UFormField label="Prompt">
+          <UTextarea
+            v-model="description"
+            :rows="3"
+            autoresize
+            placeholder="What should each run do? Describe the work — the same prompt a normal task carries. Leave blank to use the pipeline's default."
+            class="w-full"
+          />
+        </UFormField>
+
+        <RecurringRecurrenceEditor v-model="recurrence" />
+
+        <div v-if="isTechDebt" class="space-y-3 rounded-lg border border-slate-800 p-3">
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            Issue tracker
+          </p>
+          <p class="text-[11px] text-slate-500">
+            The tech-debt pipeline files a ticket from its analysis before implementing. Choose
+            where (saved for the whole workspace).
+          </p>
+          <div class="flex gap-1">
+            <UButton
+              size="xs"
+              :color="trackerKind === 'github' ? 'primary' : 'neutral'"
+              :variant="trackerKind === 'github' ? 'solid' : 'subtle'"
+              icon="i-lucide-github"
+              @click="trackerKind = 'github'"
+            >
+              GitHub Issues
+            </UButton>
+            <UButton
+              size="xs"
+              :color="trackerKind === 'jira' ? 'primary' : 'neutral'"
+              :variant="trackerKind === 'jira' ? 'solid' : 'subtle'"
+              icon="i-lucide-square-check"
+              @click="trackerKind = 'jira'"
+            >
+              Jira
+            </UButton>
+          </div>
+          <UFormField v-if="trackerKind === 'jira'" label="Jira project key">
+            <UInput v-model="jiraProjectKey" placeholder="e.g. ENG" class="w-full" />
+          </UFormField>
+        </div>
+
+        <p class="text-[11px] text-slate-500">
+          A single recurring task is added inside the service; each run replaces the last. Its run
+          history is visible in the inspector.
+        </p>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="ui.closeAddRecurring()">Cancel</UButton>
+        <UButton
+          color="primary"
+          icon="i-lucide-repeat"
+          :loading="saving"
+          :disabled="!canAdd"
+          @click="add"
+        >
+          Add recurring pipeline
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/board/TaskDependencyEdges.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useRafFn } from '@vueuse/core'
+
+/**
+ * Draws dependency arrows between task cards as an SVG overlay on top of the
+ * board. Tasks are plain DOM nodes (inside frame cards), so we resolve their
+ * on-screen rectangles by `[data-block-id]` every frame — this makes arrows
+ * follow pan / zoom / drag / expand for free. When a task's frame is collapsed
+ * (its card isn't rendered), the arrow anchors to the frame card instead.
+ */
+const board = useBoardStore()
+
+const svg = ref<SVGSVGElement | null>(null)
+
+type Seg = { id: string; x1: number; y1: number; x2: number; y2: number; done: boolean }
+const segments = ref<Seg[]>([])
+
+// task → its dependencies, both ends being tasks
+const taskDeps = computed(() => {
+  const out: { id: string; source: string; target: string }[] = []
+  for (const t of board.allTasks) {
+    for (const depId of t.dependsOn) {
+      const dep = board.getBlock(depId)
+      if (dep && dep.level === 'task')
+        out.push({ id: `${depId}__${t.id}`, source: depId, target: t.id })
+    }
+  }
+  return out
+})
+
+/** Resolve a task's anchor: walk up task → module → service to the first card
+ * that's actually rendered (a container may be collapsed). */
+function anchorEl(taskId: string): HTMLElement | null {
+  let cur = board.getBlock(taskId)
+  while (cur) {
+    const el = document.querySelector(`[data-block-id="${cur.id}"]`) as HTMLElement | null
+    if (el) return el
+    cur = cur.parentId ? board.getBlock(cur.parentId) : undefined
+  }
+  return null
+}
+
+/** Point on a rect's border along the direction toward (tx,ty). */
+function border(cx: number, cy: number, hw: number, hh: number, tx: number, ty: number) {
+  const dx = tx - cx
+  const dy = ty - cy
+  if (dx === 0 && dy === 0) return { x: cx, y: cy }
+  const t = Math.min(dx ? hw / Math.abs(dx) : Infinity, dy ? hh / Math.abs(dy) : Infinity)
+  return { x: cx + dx * t, y: cy + dy * t }
+}
+
+function recompute() {
+  const el = svg.value
+  if (!el) return
+  const origin = el.getBoundingClientRect()
+  const next: Seg[] = []
+
+  for (const d of taskDeps.value) {
+    const a = anchorEl(d.source)
+    const b = anchorEl(d.target)
+    if (!a || !b || a === b) continue // missing, or both collapsed into the same frame
+
+    const ra = a.getBoundingClientRect()
+    const rb = b.getBoundingClientRect()
+    const ax = ra.left + ra.width / 2 - origin.left
+    const ay = ra.top + ra.height / 2 - origin.top
+    const bx = rb.left + rb.width / 2 - origin.left
+    const by = rb.top + rb.height / 2 - origin.top
+
+    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
+    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
+
+    next.push({
+      id: d.id,
+      x1: start.x,
+      y1: start.y,
+      x2: end.x,
+      y2: end.y,
+      done: board.getBlock(d.source)?.status === 'done',
+    })
+  }
+  segments.value = next
+}
+
+const { pause, resume } = useRafFn(recompute, { immediate: false })
+onMounted(resume)
+onBeforeUnmount(pause)
+</script>
+
+<template>
+  <svg ref="svg" class="pointer-events-none absolute inset-0 z-10 h-full w-full overflow-visible">
+    <defs>
+      <marker
+        id="task-arrow-pending"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M0,0 L10,5 L0,10 z" fill="#f59e0b" />
+      </marker>
+      <marker
+        id="task-arrow-done"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M0,0 L10,5 L0,10 z" fill="#64748b" />
+      </marker>
+    </defs>
+
+    <line
+      v-for="s in segments"
+      :key="s.id"
+      :x1="s.x1"
+      :y1="s.y1"
+      :x2="s.x2"
+      :y2="s.y2"
+      :stroke="s.done ? '#64748b' : '#f59e0b'"
+      :stroke-width="2"
+      :stroke-dasharray="s.done ? '0' : '5 4'"
+      :stroke-opacity="0.85"
+      :marker-end="s.done ? 'url(#task-arrow-done)' : 'url(#task-arrow-pending)'"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { AgentState, PipelineStep } from '~/types/domain'
+import { agentKindMeta } from '~/utils/catalog'
+
+const props = defineProps<{
+  step: PipelineStep
+  active?: boolean
+  size?: 'sm' | 'md'
+}>()
+
+const archetype = computed(() => agentKindMeta(props.step.agentKind))
+
+const stateRing: Record<AgentState, string> = {
+  pending: 'ring-slate-600/60 opacity-60',
+  working: 'ring-indigo-400',
+  waiting_decision: 'ring-amber-400 board-pulse',
+  done: 'ring-emerald-400',
+}
+
+const stateIcon: Record<AgentState, string | null> = {
+  pending: null,
+  working: 'i-lucide-loader',
+  waiting_decision: 'i-lucide-circle-help',
+  done: 'i-lucide-check',
+}
+
+const dim = computed(() => (props.size === 'sm' ? 'h-7 w-7' : 'h-9 w-9'))
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-1" :title="archetype.label">
+    <div
+      class="relative flex items-center justify-center rounded-full ring-2 transition"
+      :class="[dim, stateRing[step.state], active ? 'scale-110' : '']"
+      :style="{ backgroundColor: archetype.color + '22' }"
+    >
+      <UIcon :name="archetype.icon" class="text-base" :style="{ color: archetype.color }" />
+      <span
+        v-if="step.state === 'working'"
+        class="absolute -bottom-1 -right-1 rounded-full bg-slate-900 p-0.5"
+      >
+        <UIcon :name="stateIcon.working!" class="h-3 w-3 animate-spin text-indigo-300" />
+      </span>
+      <span
+        v-else-if="stateIcon[step.state]"
+        class="absolute -bottom-1 -right-1 rounded-full bg-slate-900 p-0.5"
+      >
+        <UIcon
+          :name="stateIcon[step.state]!"
+          class="h-3 w-3"
+          :class="step.state === 'done' ? 'text-emerald-300' : 'text-amber-300'"
+        />
+      </span>
+    </div>
+    <span v-if="size !== 'sm'" class="text-[10px] leading-none text-slate-300">
+      {{ archetype.label }}
+    </span>
+  </div>
+</template>