@cat-factory/app 0.6.0

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

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+import { STATUS_META, MODULE_META } from '~/utils/catalog'
+import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
+import TaskPipelineMini from './TaskPipelineMini.vue'
+
+const props = defineProps<{ taskId: string }>()
+
+const board = useBoardStore()
+const execution = useExecutionStore()
+const pipelines = usePipelinesStore()
+const ui = useUiStore()
+const agentRuns = useAgentRunsStore()
+const reviews = useReviewStage()
+const toast = useToast()
+
+const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
+const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
+const selected = computed(() => ui.selectedBlockId === props.taskId)
+
+// ---- dependencies (gate execution order; may point across frames) ----------
+const deps = computed(() =>
+  (task.value?.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),
+)
+/** Deps that haven't merged yet — these block this task from running. */
+const unmet = computed(() => board.unmetDeps(props.taskId))
+const runnable = computed(() => board.isRunnable(props.taskId))
+
+/** Label a dependency, noting its frame when it lives in another one. */
+const { depLabel: labelDep } = useDepLabels()
+const depLabel = (dep: Block) => labelDep(dep, task.value?.parentId)
+
+/** The pipeline a plain "Start" will use: the task's pinned pipeline, else the first. */
+const defaultPipeline = computed(
+  () =>
+    (task.value?.pipelineId ? pipelines.getPipeline(task.value.pipelineId) : undefined) ??
+    pipelines.pipelines[0],
+)
+
+/** The PR the implementer agent opened for this task, if any. */
+const pr = computed(() => task.value?.pullRequest)
+const prLabel = computed(() => (pr.value?.number ? `PR #${pr.value.number}` : 'PR'))
+
+// This task's current agent run (if any). A failed run must surface the shared
+// failure banner + retry — NOT a stuck progress bar — so the card never looks
+// like it's still working after the run has terminated.
+const agentRun = computed(() => agentRuns.byBlock[props.taskId])
+const runFailed = computed(() => agentRun.value?.status === 'failed')
+
+// When this task backs a recurring pipeline, surface a small repeat badge so the
+// service shows its scheduled work at a glance (full controls live in the inspector).
+const recurring = useRecurringPipelinesStore()
+const schedule = computed(() => recurring.byBlock(props.taskId))
+
+// Optimistic "Start": flip the button into a spinning "Starting…" state the
+// instant it's clicked, before the server confirms. The button naturally
+// unmounts once the stream pushes the block into `in_progress`; if the start
+// call faults we revert and surface a toast.
+const starting = ref(false)
+
+async function run() {
+  if (!runnable.value) {
+    toast.add({
+      title: 'Blocked by dependencies',
+      description: `Waiting on: ${unmet.value.map((d) => d.title).join(', ')}`,
+      icon: 'i-lucide-lock',
+    })
+    return
+  }
+  const pipeline = defaultPipeline.value
+  if (!pipeline) {
+    toast.add({ title: 'No pipeline defined', description: 'Create one in the builder first.' })
+    return
+  }
+  starting.value = true
+  try {
+    // false ⇒ the user cancelled the personal-password prompt; revert quietly (the run
+    // never started). On success the button unmounts once the stream pushes in_progress.
+    const started = await execution.start(props.taskId, pipeline)
+    if (!started) starting.value = false
+  } catch (e) {
+    // Real confirmation came back as a failure — revert the optimistic state.
+    starting.value = false
+    toast.add({
+      title: 'Failed to start',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+      icon: 'i-lucide-alert-triangle',
+    })
+  }
+}
+
+function review() {
+  ui.select(props.taskId)
+  ui.focus(props.taskId)
+}
+
+function merge() {
+  execution.mergePr(props.taskId)
+}
+
+// A `blocked` task is waiting on a human for one of two reasons — an agent-raised
+// decision OR an approval gate — and both must surface here (a failed run is shown
+// separately by the AgentFailureCard above). The board previously only handled
+// decisions, so an approval-gated task was a dead end: it read "Decision needed"
+// (the old generic `blocked` label) with no badge and a click that did nothing.
+const pendingDecision = computed(() =>
+  execution.openDecisions.find((d) => d.blockId === props.taskId),
+)
+// The async stage an iterative reviewer gate (requirements-review / clarity-review) is
+// mid-cycle in (folding the answers, then re-reviewing), or null. While set, the gate
+// needs NO human action, so its approval is suppressed below and a working indicator
+// shows instead.
+const reviewStage = computed(() => reviews.stageForBlock(props.taskId))
+const reviewStageLabel = computed(() =>
+  reviewStage.value === 'incorporating'
+    ? 'Incorporating answers…'
+    : reviewStage.value === 'reviewing'
+      ? 'Re-reviewing…'
+      : null,
+)
+const pendingApproval = computed(() => {
+  const a = execution.openApprovals.find((a) => a.blockId === props.taskId)
+  // A reviewer gate whose review is incorporating / re-reviewing in the driver is doing
+  // background work, not awaiting a human — don't surface it as "Approval needed".
+  if (a && reviews.isBackground(a.agentKind, props.taskId)) return undefined
+  return a
+})
+
+/** What this blocked task actually needs from a human — drives the card's label,
+ * pulse and action. Decision takes precedence over approval (a step never holds
+ * both at once; this is just a stable order). Null when nothing is pending. */
+const attention = computed<{
+  label: string
+  icon: string
+  action: string
+  open: () => void
+} | null>(() => {
+  const d = pendingDecision.value
+  if (d)
+    return {
+      label: 'Decision needed',
+      icon: 'i-lucide-circle-help',
+      action: 'Resolve',
+      open: () => ui.openDecision(d.instanceId, d.decision.id),
+    }
+  const a = pendingApproval.value
+  if (a)
+    return {
+      label: 'Approval needed',
+      icon: 'i-lucide-shield-check',
+      action: 'Approve',
+      open: () => ui.openApprovalDetail(a.instanceId, a.approval.id),
+    }
+  return null
+})
+
+/** Specific header copy: a failed run reads "Failed", a parked task reads its
+ * decision/approval reason, otherwise the generic status label. */
+const statusText = computed(() =>
+  runFailed.value
+    ? 'Failed'
+    : (reviewStageLabel.value ?? attention.value?.label ?? statusMeta.value?.label ?? ''),
+)
+
+// Clicking the card body only selects the task (opening the inspector so the human can
+// interact with it). Whatever the task is parked on — a decision, an approval, or the
+// requirements review — is opened explicitly via the action button below, never by a
+// click anywhere on the card. (A card-body click used to pop the review window open,
+// which got in the way of just inspecting/editing the task.)
+function selectTask() {
+  ui.select(props.taskId)
+}
+</script>
+
+<template>
+  <div
+    v-if="task && statusMeta"
+    :data-block-id="task.id"
+    class="nodrag w-full cursor-pointer rounded-lg border bg-slate-950/70 p-2 text-left transition"
+    :class="[
+      selected ? 'border-white' : 'border-slate-700 hover:border-slate-500',
+      task.status === 'pr_ready' ? 'board-pulse-green' : attention ? 'board-pulse' : '',
+    ]"
+    @click.stop="selectTask"
+  >
+    <!-- header row -->
+    <div class="flex items-center gap-1.5">
+      <span class="h-2 w-2 shrink-0 rounded-full" :style="{ backgroundColor: statusMeta.color }" />
+      <UIcon
+        v-if="schedule"
+        name="i-lucide-repeat"
+        class="h-3 w-3 shrink-0 text-indigo-400"
+        :title="schedule.enabled ? 'Recurring pipeline' : 'Recurring pipeline (paused)'"
+      />
+      <span class="truncate text-[11px] font-semibold text-slate-100">{{ task.title }}</span>
+      <span
+        class="ml-auto shrink-0 text-[9px] uppercase tracking-wide"
+        :class="
+          runFailed
+            ? 'text-rose-400'
+            : reviewStage
+              ? 'text-indigo-300'
+              : attention
+                ? 'text-amber-400'
+                : 'text-slate-500'
+        "
+      >
+        {{ statusText }}
+      </span>
+    </div>
+
+    <!-- a failed run: the shared failure banner + retry, never a stuck bar -->
+    <AgentFailureCard
+      v-if="runFailed && agentRun"
+      :run="agentRun"
+      variant="compact"
+      class="mt-1.5"
+    />
+
+    <!-- progress while a pipeline runs (suppressed once the run has failed) -->
+    <UProgress
+      v-else-if="task.status === 'in_progress' || task.status === 'blocked'"
+      :model-value="Math.round(task.progress * 100)"
+      size="xs"
+      class="mt-1.5"
+    />
+
+    <!-- spatial drill-down: build steps (at `steps` zoom) and each step's live
+         subtask todos (one band deeper, at `subtasks` zoom) -->
+    <TaskPipelineMini :task-id="taskId" />
+
+    <!-- dependencies (run order) -->
+    <div v-if="deps.length" class="mt-1.5 flex flex-wrap items-center gap-1">
+      <UIcon
+        :name="runnable ? 'i-lucide-link' : 'i-lucide-lock'"
+        class="h-3 w-3"
+        :class="runnable ? 'text-slate-500' : 'text-amber-400'"
+      />
+      <span
+        v-for="d in deps"
+        :key="d.id"
+        class="inline-flex items-center gap-0.5 rounded bg-slate-800/80 px-1 py-0.5 text-[9px]"
+        :class="d.status === 'done' ? 'text-slate-400' : 'text-amber-300'"
+        :title="depLabel(d)"
+      >
+        <UIcon
+          :name="d.status === 'done' ? 'i-lucide-check' : 'i-lucide-clock'"
+          class="h-2.5 w-2.5"
+        />
+        <span class="max-w-[110px] truncate">{{ depLabel(d) }}</span>
+      </span>
+    </div>
+
+    <!-- actions by state -->
+    <div class="nodrag mt-2 flex flex-wrap items-center gap-1">
+      <!-- a reviewer gate folding/re-reviewing in the background: a working indicator,
+           NOT a gate — the human is back on the board and summoned only if input is needed -->
+      <span v-if="reviewStage" class="inline-flex items-center gap-1 text-[9px] text-indigo-300">
+        <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
+        {{ reviewStageLabel }}
+      </span>
+
+      <!-- parked for a human: a decision to resolve or an approval gate to clear -->
+      <UButton
+        v-if="attention"
+        color="warning"
+        variant="soft"
+        size="xs"
+        :icon="attention.icon"
+        @click.stop="attention.open()"
+      >
+        {{ attention.action }}
+      </UButton>
+
+      <template v-if="task.status === 'planned' || task.status === 'ready'">
+        <UButton
+          :color="runnable ? 'primary' : 'neutral'"
+          variant="soft"
+          size="xs"
+          :icon="runnable ? 'i-lucide-play' : 'i-lucide-lock'"
+          :loading="starting"
+          :disabled="!runnable || starting"
+          :title="
+            runnable
+              ? `Start ${defaultPipeline?.name ?? 'pipeline'}`
+              : `Waiting on: ${unmet.map((d) => d.title).join(', ')}`
+          "
+          @click.stop="run"
+        >
+          {{ starting ? 'Starting…' : runnable ? 'Start' : 'Blocked' }}
+        </UButton>
+        <span
+          v-if="runnable && defaultPipeline"
+          class="inline-flex items-center gap-0.5 text-[9px] text-slate-500"
+        >
+          <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />{{ defaultPipeline.name }}
+        </span>
+      </template>
+
+      <template v-if="task.status === 'pr_ready'">
+        <UButton
+          v-if="pr"
+          :to="pr.url"
+          target="_blank"
+          rel="noopener"
+          external
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-git-pull-request"
+          :title="`Open ${prLabel} on GitHub`"
+          @click.stop
+        >
+          {{ prLabel }}
+        </UButton>
+        <UButton
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-scan-eye"
+          @click.stop="review"
+        >
+          Review
+        </UButton>
+        <UButton
+          color="success"
+          variant="solid"
+          size="xs"
+          icon="i-lucide-git-merge"
+          @click.stop="merge"
+        >
+          Merge
+        </UButton>
+      </template>
+
+      <span
+        v-else-if="task.status === 'done'"
+        class="inline-flex items-center gap-1 text-[9px] text-emerald-400"
+      >
+        <UIcon name="i-lucide-check-check" class="h-3 w-3" /> implemented
+      </span>
+    </div>
+
+    <!-- structural metadata: assigned module -->
+    <div
+      v-if="task.moduleName"
+      class="mt-2 flex flex-wrap items-center gap-1 border-t border-slate-800 pt-2"
+    >
+      <span
+        class="inline-flex items-center gap-1 rounded bg-violet-500/15 px-1.5 py-0.5 text-[9px] text-violet-200"
+        :title="`Module: ${task.moduleName}`"
+      >
+        <UIcon :name="MODULE_META.icon" class="h-3 w-3" :style="{ color: MODULE_META.color }" />
+        {{ task.moduleName }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import type { AgentState } from '~/types/domain'
+import { agentKindMeta } from '~/utils/catalog'
+import { subtaskIconClass, isFailedStep, FAILED_STEP_META } from '~/utils/pipelineRender'
+import { lodAtLeast } from '~/composables/useSemanticZoom'
+
+// Spatial drill-down inside a task card: at the `steps` zoom band the task's
+// build-pipeline steps appear, and one band deeper (`subtasks`) each step's live
+// todo breakdown expands — done / in-progress / pending — exactly the way a
+// zoomed-in bootstrap card reads. Renders nothing until the task has a run and
+// the user has zoomed in far enough, so it's safe to mount on every task card.
+const props = defineProps<{ taskId: string }>()
+
+const execution = useExecutionStore()
+const ui = useUiStore()
+const expansion = useTaskExpansionStore()
+const reviews = useReviewStage()
+const { lod } = useSemanticZoom()
+
+const instance = computed(() => execution.getByBlock(props.taskId))
+const steps = computed(() => instance.value?.steps ?? [])
+
+// A failed run is no longer executing: a step left mid-flight (state still
+// `working`) must stop spinning, matching the failure card the task card shows.
+const runFailed = computed(() => instance.value?.status === 'failed')
+
+// Expand the pipeline list only when zoomed in far enough AND the board driver
+// permits this card — on-screen, and the centre-most of any cards that would
+// otherwise overlap (see useTaskExpansion) — so deep-zoom expansions don't pile up.
+const showSteps = computed(
+  () =>
+    lodAtLeast(lod.value, 'steps') && steps.value.length > 0 && expansion.canExpand(props.taskId),
+)
+const showItems = computed(() => lodAtLeast(lod.value, 'subtasks'))
+
+// Clicking a step opens the full agent step-detail overlay — execution metadata
+// (state, timing, model, subtasks) plus the agent's prose output — exactly like
+// clicking it from the inspector panel or the focus-view pipeline, rather than
+// expanding the text inline inside the board card.
+function openStep(i: number) {
+  if (instance.value) ui.openStepDetail(instance.value.id, i)
+}
+
+/** Per-state accent, matching the inspector/focus pipeline views. */
+const STATE_META: Record<AgentState, { color: string; icon: string }> = {
+  pending: { color: '#64748b', icon: 'i-lucide-circle-dashed' },
+  working: { color: '#6366f1', icon: 'i-lucide-loader' },
+  waiting_decision: { color: '#f59e0b', icon: 'i-lucide-circle-help' },
+  done: { color: '#22c55e', icon: 'i-lucide-circle-check' },
+}
+
+// Same todo-status icons the bootstrap card uses, so a zoomed-in task reads the
+// same way as a zoomed-in bootstrap.
+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="showSteps" class="mt-2 space-y-1 border-t border-slate-800 pt-2">
+    <div class="flex items-center gap-1 text-[9px] uppercase tracking-wide text-slate-500">
+      <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />
+      Build steps
+    </div>
+    <div v-for="(s, i) in steps" :key="i" class="rounded bg-slate-900/60 px-1.5 py-1">
+      <div
+        class="flex cursor-pointer items-center gap-1"
+        :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\nClick to view step details & output`"
+        @click.stop="openStep(i)"
+      >
+        <UIcon
+          :name="agentKindMeta(s.agentKind).icon"
+          class="h-3 w-3 shrink-0"
+          :style="{ color: agentKindMeta(s.agentKind).color }"
+        />
+        <span class="truncate text-[10px] text-slate-200">
+          {{ agentKindMeta(s.agentKind).label }}
+        </span>
+        <UIcon
+          v-if="s.output"
+          name="i-lucide-file-text"
+          class="h-2.5 w-2.5 shrink-0 text-slate-500"
+        />
+        <span
+          v-if="s.subtasks && s.subtasks.total > 0"
+          class="ml-auto shrink-0 font-mono text-[9px] tabular-nums text-slate-400"
+        >
+          {{ s.subtasks.completed }}/{{ s.subtasks.total }}
+        </span>
+        <UIcon
+          v-else
+          :name="
+            isFailedStep(s.state, runFailed) ? FAILED_STEP_META.icon : STATE_META[s.state].icon
+          "
+          class="ml-auto h-2.5 w-2.5 shrink-0"
+          :class="s.state === 'working' && !runFailed ? 'animate-spin' : ''"
+          :style="{
+            color: isFailedStep(s.state, runFailed)
+              ? FAILED_STEP_META.color
+              : STATE_META[s.state].color,
+          }"
+        />
+      </div>
+
+      <!-- pending approval gate: jump straight to the conclusions reader. Suppressed
+           while a reviewer gate is folding/re-reviewing in the background (no human needed). -->
+      <button
+        v-if="
+          s.approval &&
+          s.approval.status === 'pending' &&
+          instance &&
+          !reviews.isBackground(s.agentKind, props.taskId)
+        "
+        type="button"
+        class="mt-1 flex w-full items-center justify-center gap-1 rounded bg-amber-500 px-1.5 py-0.5 text-[9px] font-semibold text-amber-950 transition hover:bg-amber-400"
+        @click.stop="ui.openApprovalDetail(instance.id, s.approval.id)"
+      >
+        <UIcon name="i-lucide-shield-check" class="h-2.5 w-2.5" />
+        Review &amp; approve
+      </button>
+
+      <!-- per-step subtask progress bar -->
+      <div
+        v-if="s.subtasks && s.subtasks.total > 0"
+        class="mt-1 h-0.5 w-full overflow-hidden rounded bg-slate-700/60"
+      >
+        <div
+          class="h-full rounded bg-indigo-400 transition-all"
+          :style="{ width: `${(s.subtasks.completed / s.subtasks.total) * 100}%` }"
+        />
+      </div>
+
+      <!-- deepest band: the actual todo list (done / in-progress / pending) -->
+      <ul v-if="showItems && s.subtasks?.items?.length" class="mt-1 space-y-0.5">
+        <li
+          v-for="(item, j) in s.subtasks.items"
+          :key="j"
+          class="flex items-start gap-1 text-[9px]"
+          :class="
+            item.status === 'completed'
+              ? 'text-slate-500 line-through'
+              : item.status === 'in_progress'
+                ? 'text-slate-100'
+                : 'text-slate-400'
+          "
+        >
+          <UIcon
+            :name="ITEM_ICON[item.status]"
+            class="mt-px h-2.5 w-2.5 shrink-0"
+            :class="subtaskIconClass(item.status, runFailed)"
+          />
+          <span>{{ item.label }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>