@cat-factory/app 1.0.0

package/app/components/palettes/PipelinePalette.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Pipeline } from '~/types/domain'
+import { AGENT_BY_KIND } from '~/utils/catalog'
+import { setDndPayload } from '~/utils/dnd'
+
+const pipelines = usePipelinesStore()
+const ui = useUiStore()
+
+function onDragStart(event: DragEvent, pipeline: Pipeline) {
+  setDndPayload(event, { kind: 'pipeline', pipelineId: pipeline.id })
+  ;(event.target as HTMLElement).classList.add('palette-dragging')
+}
+
+function onDragEnd(event: DragEvent) {
+  ;(event.target as HTMLElement).classList.remove('palette-dragging')
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between px-1">
+      <p class="text-[11px] text-slate-500">Drag a pipeline onto a block to run it.</p>
+    </div>
+
+    <UButton
+      block
+      color="primary"
+      variant="soft"
+      icon="i-lucide-plus"
+      size="sm"
+      @click="ui.openBuilder()"
+    >
+      Build a pipeline
+    </UButton>
+
+    <div class="space-y-2">
+      <div
+        v-for="p in pipelines.pipelines"
+        :key="p.id"
+        draggable="true"
+        class="group cursor-grab select-none rounded-lg border border-slate-700 bg-slate-800/60 p-2.5 transition hover:border-indigo-500/70 hover:bg-slate-800 active:cursor-grabbing"
+        @dragstart="onDragStart($event, p)"
+        @dragend="onDragEnd"
+      >
+        <div class="mb-2 flex items-center justify-between">
+          <span class="text-xs font-semibold text-slate-100">{{ p.name }}</span>
+          <UButton
+            icon="i-lucide-trash-2"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            class="opacity-0 transition group-hover:opacity-100"
+            @click.stop="pipelines.removePipeline(p.id)"
+          />
+        </div>
+        <div class="flex flex-wrap items-center gap-1">
+          <template v-for="(k, i) in p.agentKinds" :key="i">
+            <UIcon
+              :name="AGENT_BY_KIND[k].icon"
+              class="h-4 w-4"
+              :style="{ color: AGENT_BY_KIND[k].color }"
+              :title="AGENT_BY_KIND[k].label"
+            />
+            <UIcon
+              v-if="i < p.agentKinds.length - 1"
+              name="i-lucide-chevron-right"
+              class="h-3 w-3 text-slate-600"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/panels/DecisionModal.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { AGENT_BY_KIND } from '~/utils/catalog'
+
+const execution = useExecutionStore()
+const board = useBoardStore()
+const ui = useUiStore()
+
+const ctx = computed(() => ui.decisionContext)
+
+const instance = computed(() => execution.getInstance(ctx.value?.instanceId))
+const step = computed(() =>
+  instance.value?.steps.find((s) => s.decision?.id === ctx.value?.decisionId),
+)
+const decision = computed(() => step.value?.decision ?? null)
+const block = computed(() => (instance.value ? board.getBlock(instance.value.blockId) : undefined))
+const agent = computed(() => (step.value ? AGENT_BY_KIND[step.value.agentKind] : null))
+
+const open = computed({
+  get: () => !!ctx.value && !!decision.value,
+  set: (v: boolean) => {
+    if (!v) ui.closeDecision()
+  },
+})
+
+function choose(option: string) {
+  if (!ctx.value) return
+  execution.resolveDecision(ctx.value.instanceId, ctx.value.decisionId, option)
+  ui.closeDecision()
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Decision required">
+    <template #body>
+      <div v-if="decision && agent" class="space-y-4">
+        <div class="flex items-center gap-2 text-sm text-slate-400">
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-lg"
+            :style="{ backgroundColor: agent.color + '22' }"
+          >
+            <UIcon :name="agent.icon" class="h-4 w-4" :style="{ color: agent.color }" />
+          </div>
+          <div>
+            <span class="font-medium text-slate-200">{{ agent.label }}</span>
+            <span v-if="block"> on </span>
+            <span v-if="block" class="font-medium text-slate-200">{{ block.title }}</span>
+          </div>
+        </div>
+
+        <p class="text-base font-medium text-white">{{ decision.question }}</p>
+
+        <div class="grid gap-2">
+          <UButton
+            v-for="opt in decision.options"
+            :key="opt"
+            color="primary"
+            variant="soft"
+            block
+            class="justify-start"
+            @click="choose(opt)"
+          >
+            {{ opt }}
+          </UButton>
+        </div>
+        <p class="text-[11px] text-slate-500">
+          This is a visualization — any choice simply resumes the pipeline.
+        </p>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/panels/InspectorPanel.vue

@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import type { Block, BlockStatus } from '~/types/domain'
+import { BLOCK_TYPE_META, STATUS_META } from '~/utils/catalog'
+import TaskContextDocs from '~/components/documents/TaskContextDocs.vue'
+import TaskContextIssues from '~/components/tasks/TaskContextIssues.vue'
+import FeatureScenarios from '~/components/scenarios/FeatureScenarios.vue'
+import ContainerSummary from '~/components/panels/inspector/ContainerSummary.vue'
+import TaskDependencies from '~/components/panels/inspector/TaskDependencies.vue'
+import TaskStructure from '~/components/panels/inspector/TaskStructure.vue'
+import TaskModelSettings from '~/components/panels/inspector/TaskModelSettings.vue'
+import TaskExecution from '~/components/panels/inspector/TaskExecution.vue'
+import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
+import AgentStopButton from '~/components/board/AgentStopButton.vue'
+
+const board = useBoardStore()
+const pipelines = usePipelinesStore()
+const execution = useExecutionStore()
+const ui = useUiStore()
+const documents = useDocumentsStore()
+const tasks = useTasksStore()
+const fragments = useFragmentsStore()
+const models = useModelsStore()
+const agentRuns = useAgentRunsStore()
+const github = useGitHubStore()
+const requirements = useRequirementsStore()
+
+onMounted(() => {
+  fragments.ensureLoaded()
+  models.ensureLoaded()
+  github.ensureLoaded()
+})
+
+// Pull this block's requirements review (if any) when the selection changes, so
+// the inspector can show an open-question count and probe feature availability.
+watch(
+  () => ui.selectedBlockId,
+  (id) => {
+    if (id) void requirements.load(id)
+  },
+  { immediate: true },
+)
+
+/** Open the document import/spawn flow, targeting this container's frame. */
+function spawnFromDocument() {
+  if (!block.value) return
+  const frameId = isFrame.value ? block.value.id : (board.serviceOf(block.value)?.id ?? null)
+  ui.openDocumentImport(frameId)
+}
+
+const block = computed<Block | undefined>(() =>
+  ui.selectedBlockId ? board.getBlock(ui.selectedBlockId) : undefined,
+)
+const level = computed(() => block.value?.level ?? 'frame')
+const isFrame = computed(() => level.value === 'frame')
+const isContainer = computed(() => level.value === 'frame' || level.value === 'module')
+const isTask = computed(() => level.value === 'task')
+
+const instance = computed(() => execution.getInstance(block.value?.executionId))
+const typeMeta = computed(() => (block.value ? BLOCK_TYPE_META[block.value.type] : null))
+
+// Containers show a derived activity status (never "done"); tasks use their own.
+const FRAME_LABEL: Record<BlockStatus, string> = {
+  planned: 'No tasks',
+  ready: 'Live',
+  in_progress: 'Active',
+  blocked: 'Needs attention',
+  pr_ready: 'Active',
+  done: 'Live',
+}
+const effectiveStatus = computed<BlockStatus>(() =>
+  isContainer.value ? board.frameStatus(block.value!.id) : block.value!.status,
+)
+const statusMeta = computed(() => (block.value ? STATUS_META[effectiveStatus.value] : null))
+const statusLabel = computed(() =>
+  isContainer.value ? FRAME_LABEL[effectiveStatus.value] : statusMeta.value!.label,
+)
+
+const runnable = computed(() => (block.value ? board.isRunnable(block.value.id) : false))
+
+// Requirements review (questions / gaps the AI raised about this block's
+// requirements). Hidden only when the feature is known to be off.
+const reviewAvailable = computed(() => requirements.available !== false)
+const blockReview = computed(() => (block.value ? requirements.reviewFor(block.value.id) : null))
+const openReviewCount = computed(() =>
+  blockReview.value ? requirements.openCount(blockReview.value) : 0,
+)
+
+// The GitHub repo backing this service (a frame), if one is linked. Linkage lives
+// on the github_repos projection (its `blockId`), not on the block itself.
+const serviceRepo = computed(() =>
+  isFrame.value && block.value ? github.repoForBlock(block.value.id) : undefined,
+)
+const serviceRepoUrl = computed(() =>
+  serviceRepo.value ? github.repoUrl(serviceRepo.value.githubId) : null,
+)
+
+const runMenu = computed(() =>
+  pipelines.pipelines.map((p) => ({
+    label: p.name,
+    icon: 'i-lucide-play',
+    onSelect: () => block.value && execution.start(block.value.id, p),
+  })),
+)
+
+function remove() {
+  if (!block.value) return
+  execution.cancel(block.value.id)
+  board.removeBlock(block.value.id)
+  ui.select(null)
+}
+
+// ---- failed agent run (bootstrap or execution) ------------------------------
+// A block whose current run failed surfaces the shared failure banner + retry,
+// keyed by block id — covering a failed "bootstrap repo" frame and (for tasks) a
+// failed pipeline execution alike.
+const failedRun = computed(() => {
+  const run = block.value ? agentRuns.byBlock[block.value.id] : undefined
+  return run && run.status === 'failed' ? run : null
+})
+
+// A running run on a container frame (a "bootstrapping…" service). Tasks surface
+// their own Stop in TaskExecution, so this covers the bootstrap case the board was
+// previously unable to stop. Drives the inspector's Stop control.
+const runningRun = computed(() => {
+  if (!isContainer.value) return null
+  const run = block.value ? agentRuns.byBlock[block.value.id] : undefined
+  return run && run.status === 'running' ? run : null
+})
+</script>
+
+<template>
+  <div
+    v-if="block && statusMeta && typeMeta"
+    class="absolute right-4 top-4 z-20 w-80 overflow-hidden rounded-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur"
+  >
+    <div class="h-1.5 w-full" :style="{ backgroundColor: statusMeta.color }" />
+    <div class="space-y-4 p-4">
+      <!-- header -->
+      <div class="flex items-start justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <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>
+            <div class="text-sm font-semibold text-white">{{ block.title }}</div>
+            <div class="mt-0.5 flex items-center gap-1.5">
+              <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">
+                {{ statusLabel }}
+              </UBadge>
+              <span class="text-[10px] uppercase tracking-wide text-slate-500">{{ level }}</span>
+            </div>
+          </div>
+        </div>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          @click="ui.select(null)"
+        />
+      </div>
+
+      <UTextarea
+        v-model="block.description"
+        :rows="2"
+        autoresize
+        size="sm"
+        class="w-full"
+        placeholder="Describe this block…"
+      />
+
+      <!-- requirements review: surface the AI's questions / gaps -->
+      <UButton
+        v-if="reviewAvailable"
+        block
+        color="neutral"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-clipboard-check"
+        @click="ui.openRequirementReview(block.id)"
+      >
+        Review requirements
+        <UBadge v-if="openReviewCount" size="xs" color="warning" variant="solid" class="ml-auto">
+          {{ openReviewCount }}
+        </UBadge>
+      </UButton>
+
+      <!-- failed run (bootstrap or execution): shared failure banner + retry -->
+      <AgentFailureCard v-if="failedRun" :run="failedRun" />
+
+      <!-- running bootstrap: let the user stop it (kills the container) -->
+      <div
+        v-else-if="runningRun"
+        class="flex items-center justify-between gap-2 rounded-lg border border-amber-900/60 bg-amber-950/30 px-3 py-2"
+      >
+        <span class="flex items-center gap-1.5 text-xs text-amber-300">
+          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
+          Bootstrapping…
+        </span>
+        <AgentStopButton :run-id="runningRun.runId" :kind="runningRun.kind" size="xs" />
+      </div>
+
+      <!-- external links -->
+      <div class="flex flex-wrap gap-2">
+        <UButton
+          v-if="serviceRepoUrl"
+          :to="serviceRepoUrl"
+          target="_blank"
+          rel="noopener"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-github"
+          trailing-icon="i-lucide-external-link"
+        >
+          {{ serviceRepo!.owner }}/{{ serviceRepo!.name }}
+        </UButton>
+        <UButton
+          v-if="tasks.available"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-ticket"
+          @click="ui.openTaskImport()"
+        >
+          {{ tasks.anyConnected ? 'Import Jira issue' : 'Connect Jira' }}
+        </UButton>
+        <UButton
+          v-if="isContainer && documents.available && documents.anyConnected"
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-wand-sparkles"
+          @click="spawnFromDocument"
+        >
+          Spawn from document
+        </UButton>
+      </div>
+
+      <!-- task: context documents -->
+      <TaskContextDocs v-if="isTask" :block="block" />
+
+      <!-- task: context issues (tracker) -->
+      <TaskContextIssues v-if="isTask" :block="block" />
+
+      <!-- service / module: tasks summary -->
+      <ContainerSummary v-if="isContainer" :block="block" />
+
+      <!-- task: dependencies, structure, scenarios, run settings, execution -->
+      <template v-else-if="isTask">
+        <TaskDependencies :block="block" />
+        <TaskStructure :block="block" />
+        <FeatureScenarios :block="block" />
+        <TaskModelSettings :block="block" />
+        <TaskExecution :block="block" />
+      </template>
+
+      <!-- actions -->
+      <div class="flex items-center gap-2">
+        <UDropdownMenu v-if="isTask" :items="runMenu">
+          <UButton
+            :color="runnable ? 'primary' : 'neutral'"
+            variant="soft"
+            size="sm"
+            :icon="runnable ? 'i-lucide-play' : 'i-lucide-lock'"
+            trailing-icon="i-lucide-chevron-down"
+            :disabled="!runnable"
+          >
+            {{ instance ? 'Re-run' : 'Run' }}
+          </UButton>
+        </UDropdownMenu>
+        <UButton
+          v-if="isTask"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-maximize-2"
+          @click="ui.focus(block.id)"
+        >
+          Focus
+        </UButton>
+        <UButton
+          color="error"
+          variant="ghost"
+          size="sm"
+          icon="i-lucide-trash-2"
+          class="ml-auto"
+          @click="remove"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/panels/inspector/ContainerSummary.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+import { STATUS_META } from '~/utils/catalog'
+
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const ui = useUiStore()
+
+const isFrame = computed(() => (props.block.level ?? 'frame') === 'frame')
+const modules = computed(() => (isFrame.value ? board.modulesOf(props.block.id) : []))
+const tasks = computed(() =>
+  isFrame.value ? board.allTasksUnder(props.block.id) : board.tasksOf(props.block.id),
+)
+
+function addTask() {
+  board.addTask(props.block.id)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- modules (services only) -->
+    <div v-if="modules.length">
+      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Modules ({{ modules.length }})
+      </div>
+      <ul class="space-y-1">
+        <li
+          v-for="m in modules"
+          :key="m.id"
+          class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-slate-800/60"
+          @click="ui.select(m.id)"
+        >
+          <UIcon name="i-lucide-package" class="h-3.5 w-3.5 text-violet-400" />
+          <span class="truncate text-xs text-slate-200">{{ m.title }}</span>
+          <span class="ml-auto text-[10px] text-slate-500"
+            >{{ board.tasksOf(m.id).length }} task(s)</span
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ isFrame ? 'All tasks' : 'Tasks' }} ({{ tasks.length }})
+        </span>
+        <UButton size="xs" variant="soft" color="primary" icon="i-lucide-plus" @click="addTask">
+          Add task
+        </UButton>
+      </div>
+      <ul v-if="tasks.length" class="space-y-1">
+        <li
+          v-for="t in tasks"
+          :key="t.id"
+          class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-slate-800/60"
+          @click="ui.select(t.id)"
+        >
+          <span
+            class="h-2 w-2 shrink-0 rounded-full"
+            :style="{ backgroundColor: STATUS_META[t.status].color }"
+          />
+          <span class="truncate text-xs text-slate-200">{{ t.title }}</span>
+          <span class="ml-auto text-[10px] text-slate-500">{{ STATUS_META[t.status].label }}</span>
+        </li>
+      </ul>
+      <div v-else class="text-[11px] text-slate-500">No tasks yet — add one to start work.</div>
+    </div>
+    <p v-if="isFrame" class="text-[11px] text-slate-500">
+      Services are long-lived — they don't "complete". Work happens in their tasks &amp; modules.
+    </p>
+  </div>
+</template>

package/app/components/panels/inspector/TaskDependencies.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const { depLabel } = useDepLabels()
+
+const deps = computed(() =>
+  (props.block.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),
+)
+const runnable = computed(() => board.isRunnable(props.block.id))
+
+/** Label a dependency relative to this task's container. */
+const label = (dep: Block) => depLabel(dep, props.block.parentId)
+
+// candidate tasks to depend on: any other task not already a dependency
+const depMenu = computed(() => {
+  const current = new Set(props.block.dependsOn)
+  return board.allTasks
+    .filter((t) => t.id !== props.block.id && !current.has(t.id))
+    .map((t) => ({
+      label: label(t),
+      icon: 'i-lucide-plus',
+      onSelect: () => board.toggleDependency(props.block.id, t.id),
+    }))
+})
+
+function removeDep(depId: string) {
+  board.removeDependency(props.block.id, depId)
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-1 flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Depends on
+      </span>
+      <UDropdownMenu v-if="depMenu.length" :items="depMenu">
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-plus"
+          trailing-icon="i-lucide-chevron-down"
+        />
+      </UDropdownMenu>
+    </div>
+    <div v-if="deps.length" class="flex flex-wrap gap-1">
+      <UBadge
+        v-for="d in deps"
+        :key="d.id"
+        :color="d.status === 'done' ? 'neutral' : 'warning'"
+        variant="subtle"
+        size="sm"
+        class="cursor-pointer"
+        :title="d.status === 'done' ? 'Merged' : 'Not merged yet'"
+        @click="removeDep(d.id)"
+      >
+        {{ label(d) }}
+        <UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+      </UBadge>
+    </div>
+    <div v-else class="text-[11px] text-slate-500">No dependencies — can run any time.</div>
+    <div v-if="!runnable" class="mt-1 text-[10px] text-amber-400">
+      Blocked until dependencies merge.
+    </div>
+  </div>
+</template>