@cat-factory/app 1.0.0

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 { AGENT_BY_KIND } from '~/utils/catalog'
+
+const props = defineProps<{
+  step: PipelineStep
+  active?: boolean
+  size?: 'sm' | 'md'
+}>()
+
+const archetype = computed(() => AGENT_BY_KIND[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>

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

@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import type { Block, BlockStatus } from '~/types/domain'
+import { BLOCK_TYPE_META, STATUS_META } from '~/utils/catalog'
+import DecisionBadge from './DecisionBadge.vue'
+import DraggableTask from './DraggableTask.vue'
+import ModuleFrame from './ModuleFrame.vue'
+import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
+import AgentStopButton from '~/components/board/AgentStopButton.vue'
+import { useBlockDrag } from '~/composables/useBlockDrag'
+
+// Vue Flow passes the node's `id` and `data` as props to custom node components.
+// Only frames are rendered as board nodes; their tasks live inside the card.
+const props = defineProps<{ id: string }>()
+
+const board = useBoardStore()
+const execution = useExecutionStore()
+const ui = useUiStore()
+const agentRuns = useAgentRunsStore()
+const { lod } = useSemanticZoom()
+
+const block = computed<Block | undefined>(() => board.getBlock(props.id))
+const typeMeta = computed(() => (block.value ? BLOCK_TYPE_META[block.value.type] : null))
+
+// ---- this service's children (tasks + modules) -----------------------------
+const directTasks = computed(() => board.tasksOf(props.id))
+const modules = computed(() => board.modulesOf(props.id))
+const allTasks = computed(() => board.allTasksUnder(props.id))
+const taskIds = computed(() => new Set(allTasks.value.map((t) => t.id)))
+const taskCount = computed(() => allTasks.value.length)
+const hasTasks = computed(() => taskCount.value > 0 || modules.value.length > 0)
+const mergedTasks = computed(() => allTasks.value.filter((t) => t.status === 'done').length)
+const prTasks = computed(() => allTasks.value.filter((t) => t.status === 'pr_ready').length)
+const canvas = computed(() => board.containerSize(props.id))
+
+// Frame status is derived from its tasks — services never reach "done".
+const frameStatus = computed<BlockStatus>(() => board.frameStatus(props.id))
+const statusMeta = computed(() => STATUS_META[frameStatus.value])
+const accent = computed(() => statusMeta.value.color)
+const FRAME_LABEL: Record<BlockStatus, string> = {
+  planned: 'No tasks',
+  ready: 'Live',
+  in_progress: 'Active',
+  blocked: 'Needs attention',
+  pr_ready: 'Active',
+  done: 'Live',
+}
+const statusLabel = computed(() => FRAME_LABEL[frameStatus.value])
+
+const selected = computed(() => ui.selectedBlockId === props.id)
+const expanded = computed(() => ui.isFrameExpanded(props.id))
+// At far zoom we only ever show the chip; otherwise an expanded frame shows tasks.
+const showExpanded = computed(() => expanded.value && lod.value !== 'far')
+
+// Surface a pending decision from this frame OR any of its tasks.
+const blockDecisions = computed(() =>
+  execution.openDecisions.filter((d) => d.blockId === props.id || taskIds.value.has(d.blockId)),
+)
+
+function openFirstDecision() {
+  const d = blockDecisions.value[0]
+  if (d) ui.openDecision(d.instanceId, d.decision.id)
+}
+
+function toggleExpand() {
+  ui.toggleFrame(props.id)
+}
+
+// Expanded frames are not Vue Flow-draggable (so the pane can pan through them),
+// so they're repositioned by grabbing the header handle instead. Frames live in
+// free-floating flow space, hence `clamp: false`.
+const { startDrag } = useBlockDrag()
+function onFrameHandle(e: PointerEvent) {
+  if (block.value) startDrag(block.value, e, { clamp: false })
+}
+
+function addTask() {
+  board.addTask(props.id)
+  ui.expandFrame(props.id)
+}
+
+// A task needs merging → green pulse; a task needs a decision → amber pulse.
+const pulseClass = computed(() => {
+  if (frameStatus.value === 'blocked') return 'board-pulse'
+  if (prTasks.value > 0) return 'board-pulse-green'
+  return ''
+})
+
+// ---- agent-run overlay ------------------------------------------------------
+// When this service frame was materialised by a "bootstrap repo" run, surface its
+// live status + subtask progress on the card (the user watches the container adapt
+// + push the repo), and the shared failure banner + retry if it faulted. Derived
+// from the unified agentRuns store, keyed by this frame's block id.
+const run = computed(() => agentRuns.byBlock[props.id])
+const bootstrapping = computed(
+  () => run.value?.kind === 'bootstrap' && run.value.status === 'running',
+)
+const runFailed = computed(() => run.value?.status === 'failed')
+const bootstrapSubtasks = computed(() =>
+  bootstrapping.value ? (run.value?.subtasks ?? null) : null,
+)
+const bootstrapPct = computed(() => {
+  const s = bootstrapSubtasks.value
+  if (!s || s.total <= 0) return 0
+  return Math.min(100, Math.round((s.completed / s.total) * 100))
+})
+// The actual todo items the agent is working through, surfaced on the expanded
+// card so a zoomed-in user sees the task list, not just the "N/M" count.
+const bootstrapItems = computed(() => bootstrapSubtasks.value?.items ?? [])
+const ITEM_ICON: Record<string, string> = {
+  completed: 'i-lucide-check-circle-2',
+  in_progress: 'i-lucide-loader-circle',
+  pending: 'i-lucide-circle',
+}
+</script>
+
+<template>
+  <div v-if="block" class="relative" :data-block-id="block.id">
+    <!-- decision indicator floats above the card at all zoom levels -->
+    <div v-if="blockDecisions.length" class="absolute -top-3 left-1/2 z-10 -translate-x-1/2">
+      <DecisionBadge
+        :count="blockDecisions.length"
+        :compact="lod === 'far'"
+        @open="openFirstDecision"
+      />
+    </div>
+
+    <!-- ===================== FAR: glanceable chip ===================== -->
+    <div
+      v-if="lod === 'far'"
+      class="flex w-44 items-center gap-2 rounded-xl border-2 px-3 py-3 shadow-lg backdrop-blur"
+      :class="[selected ? 'border-white' : '', pulseClass]"
+      :style="{ borderColor: accent, backgroundColor: accent + '26' }"
+    >
+      <span class="h-3 w-3 shrink-0 rounded-full" :style="{ backgroundColor: accent }" />
+      <span class="truncate text-sm font-semibold text-white">{{ block.title }}</span>
+      <UIcon
+        v-if="bootstrapping"
+        name="i-lucide-loader-circle"
+        class="ml-auto h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
+        title="Bootstrapping…"
+      />
+      <UIcon
+        v-else-if="runFailed"
+        name="i-lucide-alert-triangle"
+        class="ml-auto h-3.5 w-3.5 shrink-0 text-rose-400"
+        title="Run failed"
+      />
+      <span v-else-if="hasTasks" class="ml-auto shrink-0 text-[11px] text-slate-300">
+        {{ mergedTasks }}/{{ taskCount }}
+      </span>
+    </div>
+
+    <!-- ===================== COMPACT: summary (collapsed) ===================== -->
+    <div
+      v-else-if="!showExpanded"
+      class="w-56 overflow-hidden rounded-xl border bg-slate-900/90 shadow-xl backdrop-blur"
+      :class="[selected ? 'border-white' : 'border-slate-700', pulseClass]"
+    >
+      <div class="h-1.5 w-full" :style="{ backgroundColor: accent }" />
+      <!-- bootstrap-in-progress banner -->
+      <div v-if="bootstrapping" class="border-b border-amber-900/50 bg-amber-950/30 px-3 py-2">
+        <div class="flex items-center gap-1.5 text-[11px]">
+          <UIcon
+            name="i-lucide-loader-circle"
+            class="h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
+          />
+          <span class="text-amber-300">Bootstrapping…</span>
+          <span v-if="bootstrapSubtasks" class="ml-auto text-amber-200/80">
+            {{ bootstrapSubtasks.completed }}/{{ bootstrapSubtasks.total }}
+          </span>
+        </div>
+        <div class="mt-1.5 h-1 w-full overflow-hidden rounded bg-amber-900/40">
+          <div
+            class="h-full rounded bg-amber-400 transition-all"
+            :style="{ width: bootstrapPct + '%' }"
+          />
+        </div>
+        <div v-if="run" class="mt-2 flex justify-end">
+          <AgentStopButton :run-id="run.runId" :kind="run.kind" size="xs" variant="ghost" />
+        </div>
+      </div>
+      <!-- failed run: shared failure banner + retry -->
+      <div v-else-if="runFailed && run" class="p-2">
+        <AgentFailureCard :run="run" variant="compact" />
+      </div>
+      <div class="space-y-2 p-3">
+        <div class="flex items-center gap-2">
+          <UIcon
+            :name="typeMeta!.icon"
+            class="h-4 w-4 shrink-0"
+            :style="{ color: typeMeta!.accent }"
+          />
+          <span class="truncate text-sm font-semibold text-white">{{ block.title }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
+            statusLabel
+          }}</UBadge>
+          <span class="text-[11px] text-slate-400"
+            >{{ taskCount }} task{{ taskCount === 1 ? '' : 's' }}</span
+          >
+        </div>
+        <button
+          type="button"
+          class="nodrag flex w-full items-center gap-1 rounded-md bg-slate-800/60 px-2 py-1 text-[10px] text-slate-300 hover:bg-slate-800"
+          @click.stop="toggleExpand"
+        >
+          <UIcon name="i-lucide-layers" class="h-3 w-3 text-slate-400" />
+          <span v-if="hasTasks">{{ mergedTasks }}/{{ taskCount }} merged</span>
+          <span v-else>No tasks yet</span>
+          <span v-if="prTasks" class="text-emerald-400">· {{ prTasks }} PR</span>
+          <UIcon name="i-lucide-chevron-down" class="ml-auto h-3 w-3" />
+        </button>
+      </div>
+    </div>
+
+    <!-- ===================== EXPANDED: 2D canvas of tasks + modules ===================== -->
+    <div
+      v-else
+      class="overflow-visible rounded-2xl border bg-slate-900/95 shadow-2xl backdrop-blur"
+      :class="[selected ? 'border-white' : 'border-slate-700', pulseClass]"
+    >
+      <div class="h-1.5 w-full rounded-t-2xl" :style="{ backgroundColor: accent }" />
+      <!-- bootstrap-in-progress banner -->
+      <div v-if="bootstrapping" class="border-b border-amber-900/50 bg-amber-950/30 px-4 py-2">
+        <div class="flex items-center gap-1.5 text-xs">
+          <UIcon
+            name="i-lucide-loader-circle"
+            class="h-4 w-4 shrink-0 animate-spin text-amber-400"
+          />
+          <span class="text-amber-300">Bootstrapping repository…</span>
+          <span v-if="bootstrapSubtasks" class="ml-auto text-amber-200/80">
+            {{ bootstrapSubtasks.completed }}/{{ bootstrapSubtasks.total }} steps
+          </span>
+        </div>
+        <div class="mt-1.5 h-1 w-full overflow-hidden rounded bg-amber-900/40">
+          <div
+            class="h-full rounded bg-amber-400 transition-all"
+            :style="{ width: bootstrapPct + '%' }"
+          />
+        </div>
+        <!-- the actual todo list, once the agent has reported any items -->
+        <ul v-if="bootstrapItems.length" class="mt-2 space-y-1">
+          <li
+            v-for="(item, i) in bootstrapItems"
+            :key="i"
+            class="flex items-start gap-1.5 text-[11px]"
+            :class="
+              item.status === 'completed'
+                ? 'text-amber-200/60 line-through'
+                : item.status === 'in_progress'
+                  ? 'text-amber-100'
+                  : 'text-amber-200/80'
+            "
+          >
+            <UIcon
+              :name="ITEM_ICON[item.status]"
+              class="mt-px h-3 w-3 shrink-0"
+              :class="[
+                item.status === 'in_progress' ? 'animate-spin text-amber-400' : '',
+                item.status === 'completed' ? 'text-emerald-400' : 'text-amber-400/70',
+              ]"
+            />
+            <span>{{ item.label }}</span>
+          </li>
+        </ul>
+        <div v-if="run" class="mt-2 flex justify-end">
+          <AgentStopButton :run-id="run.runId" :kind="run.kind" size="xs" variant="ghost" />
+        </div>
+      </div>
+      <!-- failed run: shared failure banner + retry -->
+      <div v-else-if="runFailed && run" class="p-3">
+        <AgentFailureCard :run="run" variant="expanded" />
+      </div>
+      <div class="space-y-3 p-4">
+        <!-- frame header (doubles as the drag handle for the expanded frame) -->
+        <div class="flex items-start justify-between gap-2">
+          <div
+            class="flex cursor-grab items-center gap-2 active:cursor-grabbing"
+            title="Drag service"
+            @pointerdown="onFrameHandle"
+          >
+            <div
+              class="flex h-8 w-8 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>
+              <div class="text-sm font-semibold text-white">{{ block.title }}</div>
+              <div class="text-[11px] text-slate-400">{{ typeMeta!.label }}</div>
+            </div>
+          </div>
+          <div class="flex items-center gap-1">
+            <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
+              statusLabel
+            }}</UBadge>
+            <UButton
+              class="nodrag"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-plus"
+              title="Add task"
+              @click.stop="addTask"
+            />
+            <UButton
+              class="nodrag"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-chevron-up"
+              title="Collapse"
+              @click.stop="toggleExpand"
+            />
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
+          <span>{{ mergedTasks }}/{{ taskCount }} implemented</span>
+          <span v-if="modules.length"
+            >· {{ modules.length }} module{{ modules.length === 1 ? '' : 's' }}</span
+          >
+          <span v-if="prTasks" class="text-emerald-400">· {{ prTasks }} PR ready</span>
+        </div>
+
+        <!-- the 2D drop zone: modules and loose tasks live here, draggable -->
+        <div
+          :data-drop-zone="block.id"
+          class="nodrag relative rounded-xl bg-slate-950/40"
+          :style="{ width: canvas.w + 'px', height: canvas.h + 'px' }"
+        >
+          <ModuleFrame v-for="m in modules" :key="m.id" :module-id="m.id" />
+          <DraggableTask v-for="t in directTasks" :key="t.id" :task-id="t.id" />
+          <button
+            v-if="!hasTasks"
+            type="button"
+            class="absolute inset-4 flex items-center justify-center gap-1 rounded-lg border border-dashed border-slate-700 text-[11px] text-slate-500 hover:border-slate-500 hover:text-slate-300"
+            @click.stop="addTask"
+          >
+            <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> Add the first task
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  count?: number
+  compact?: boolean
+}>()
+defineEmits<{ (e: 'open'): void }>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="board-pulse flex items-center gap-1 rounded-full bg-amber-500 px-2 py-0.5 text-xs font-semibold text-amber-950 shadow-lg transition hover:bg-amber-400"
+    @click.stop="$emit('open')"
+  >
+    <UIcon name="i-lucide-circle-help" class="h-3.5 w-3.5" />
+    <span v-if="!compact">Decision needed</span>
+    <span v-if="count && count > 1" class="rounded-full bg-amber-950/30 px-1">
+      {{ count }}
+    </span>
+  </button>
+</template>

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import TaskCard from './TaskCard.vue'
+import { useBlockDrag } from '~/composables/useBlockDrag'
+import { FEATURE_META } from '~/utils/catalog'
+
+const props = defineProps<{ taskId: string }>()
+const board = useBoardStore()
+const task = computed(() => board.getBlock(props.taskId))
+const { draggingId, startDrag } = useBlockDrag()
+
+// Once a task is merged it stops being a unit of work and becomes part of the
+// architecture: we no longer show it as a "Done" card with a status, just the
+// features it left behind (a merged task with no features simply disappears).
+const merged = computed(() => task.value?.status === 'done')
+const features = computed(() => task.value?.features ?? [])
+
+function onHandle(e: PointerEvent) {
+  if (task.value) startDrag(task.value, e, { reparent: true })
+}
+</script>
+
+<template>
+  <template v-if="task">
+    <!-- merged → statusless features that "just exist" (no card, not draggable).
+         A merged task with no features renders nothing at all (arrows fall back
+         to its container), so we never leave a zero-size anchor behind. -->
+    <div
+      v-if="merged && features.length"
+      :data-block-id="task.id"
+      class="absolute flex w-[180px] flex-col gap-1"
+      :style="{ left: task.position.x + 'px', top: task.position.y + 'px', zIndex: 10 }"
+    >
+      <span
+        v-for="f in features"
+        :key="f"
+        class="inline-flex items-center gap-1 rounded-md border border-emerald-500/25 bg-emerald-500/10 px-2 py-1 text-[10px] text-emerald-100"
+        :title="`Feature: ${f}`"
+      >
+        <UIcon
+          :name="FEATURE_META.icon"
+          class="h-3 w-3 shrink-0"
+          :style="{ color: FEATURE_META.color }"
+        />
+        <span class="truncate">{{ f }}</span>
+      </span>
+    </div>
+
+    <!-- in-flight task → draggable work card -->
+    <div
+      v-else-if="!merged"
+      class="absolute w-[180px]"
+      :style="{
+        left: task.position.x + 'px',
+        top: task.position.y + 'px',
+        zIndex: draggingId === taskId ? 60 : 10,
+      }"
+    >
+      <!-- drag handle -->
+      <div
+        class="nodrag flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing"
+        title="Drag task"
+        @pointerdown="onHandle"
+      >
+        <UIcon name="i-lucide-grip-horizontal" class="h-3 w-3 text-slate-500" />
+      </div>
+      <TaskCard :task-id="taskId" class="!rounded-t-none" />
+    </div>
+  </template>
+</template>