@cat-factory/app 1.0.0

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

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+import { AGENT_BY_KIND } from '~/utils/catalog'
+import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
+
+const props = defineProps<{ block: Block }>()
+
+const execution = useExecutionStore()
+const agentRuns = useAgentRunsStore()
+const ui = useUiStore()
+const models = useModelsStore()
+
+const instance = computed(() => execution.getInstance(props.block.executionId))
+
+// A failed pipeline run surfaces the shared failure banner + retry — the
+// execution failure surface that the old `pr_ready` flip used to hide.
+const failedRun = computed(() => {
+  const run = agentRuns.byBlock[props.block.id]
+  return run && run.status === 'failed' ? run : null
+})
+
+const pr = computed(() => props.block.pullRequest)
+/** A PR is merged once the block is `done`; otherwise it is open awaiting merge. */
+const prMerged = computed(() => props.block.status === 'done')
+const prLabel = computed(() => {
+  const number = pr.value?.number
+  return number ? `PR #${number}` : 'Pull request'
+})
+
+const stepLabel: Record<string, string> = {
+  pending: 'Pending',
+  working: 'Working',
+  waiting_decision: 'Needs decision',
+  done: 'Done',
+}
+
+function openDecisionFor(decisionId: string) {
+  if (instance.value) ui.openDecision(instance.value.id, decisionId)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- running pipeline -->
+    <div v-if="instance">
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          {{ instance.pipelineName }}
+        </span>
+        <UButton
+          icon="i-lucide-square"
+          color="error"
+          variant="ghost"
+          size="xs"
+          @click="execution.cancel(block.id)"
+        >
+          Stop
+        </UButton>
+      </div>
+      <ul class="space-y-1">
+        <li
+          v-for="(s, i) in instance.steps"
+          :key="i"
+          class="rounded-md px-2 py-1"
+          :class="i === instance.currentStep ? 'bg-slate-800/70' : ''"
+        >
+          <div class="flex items-center gap-2">
+            <UIcon
+              :name="AGENT_BY_KIND[s.agentKind].icon"
+              class="h-4 w-4"
+              :style="{ color: AGENT_BY_KIND[s.agentKind].color }"
+            />
+            <span class="text-xs text-slate-200">{{ AGENT_BY_KIND[s.agentKind].label }}</span>
+            <span
+              v-if="s.subtasks && s.subtasks.total > 0"
+              class="ml-auto font-mono text-[10px] tabular-nums text-slate-300"
+              :title="
+                s.subtasks.inProgress > 0
+                  ? `${s.subtasks.completed} of ${s.subtasks.total} subtasks done, ${s.subtasks.inProgress} in progress`
+                  : `${s.subtasks.completed} of ${s.subtasks.total} subtasks done`
+              "
+            >
+              {{ s.subtasks.completed }}/{{ s.subtasks.total }}
+            </span>
+            <span class="text-[10px] text-slate-400" :class="{ 'ml-auto': !s.subtasks }">
+              {{ stepLabel[s.state] }}
+            </span>
+            <UButton
+              v-if="s.decision && !s.decision.chosen"
+              color="warning"
+              variant="soft"
+              size="xs"
+              icon="i-lucide-circle-help"
+              @click="openDecisionFor(s.decision.id)"
+            >
+              Resolve
+            </UButton>
+          </div>
+          <div
+            v-if="s.subtasks && s.subtasks.total > 0"
+            class="mt-1 ml-6 h-1 overflow-hidden rounded-full bg-slate-700/60"
+          >
+            <div
+              class="h-full rounded-full bg-indigo-400 transition-all duration-500"
+              :style="{ width: `${(s.subtasks.completed / s.subtasks.total) * 100}%` }"
+            />
+          </div>
+          <div
+            v-if="s.model"
+            class="mt-0.5 flex items-center gap-1 pl-6 text-[10px] text-slate-500"
+            :title="s.model"
+          >
+            <UIcon name="i-lucide-cpu" class="h-3 w-3" />
+            {{ models.labelForRef(s.model) }}
+          </div>
+          <!-- Prompt-fragment standards the library selected for this step. -->
+          <div
+            v-if="s.selectedFragmentIds && s.selectedFragmentIds.length"
+            class="mt-0.5 flex flex-wrap items-center gap-1 pl-6 text-[10px] text-slate-500"
+            :title="`Best-practice fragments folded into this step: ${s.selectedFragmentIds.join(', ')}`"
+          >
+            <UIcon name="i-lucide-book-marked" class="h-3 w-3 shrink-0" />
+            <span>{{ s.selectedFragmentIds.length }} standard(s) applied</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- failed run: shared failure banner + retry -->
+    <AgentFailureCard v-if="failedRun" :run="failedRun" />
+
+    <!-- Open PR: link straight to it on GitHub -->
+    <div v-if="pr" class="space-y-2">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Pull request
+      </span>
+      <UButton
+        :to="pr.url"
+        target="_blank"
+        rel="noopener"
+        external
+        color="neutral"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-git-pull-request"
+        trailing-icon="i-lucide-external-link"
+        block
+      >
+        <span class="flex w-full items-center gap-2">
+          {{ prLabel }}
+          <UBadge :color="prMerged ? 'success' : 'info'" variant="subtle" size="sm" class="ml-auto">
+            {{ prMerged ? 'Merged' : 'Open' }}
+          </UBadge>
+        </span>
+      </UButton>
+      <p v-if="pr.branch" class="flex items-center gap-1 truncate text-[10px] text-slate-500">
+        <UIcon name="i-lucide-git-branch" class="h-3 w-3 shrink-0" />
+        <span class="truncate" :title="pr.branch">{{ pr.branch }}</span>
+      </p>
+    </div>
+
+    <!-- PR ready: merge -->
+    <UButton
+      v-if="block.status === 'pr_ready'"
+      color="success"
+      variant="solid"
+      size="sm"
+      icon="i-lucide-git-merge"
+      block
+      @click="execution.mergePr(block.id)"
+    >
+      Merge PR
+    </UButton>
+  </div>
+</template>

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+import { DEFAULT_CONFIDENCE_THRESHOLD } from '~/utils/catalog'
+
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const models = useModelsStore()
+
+// ---- model selection -------------------------------------------------------
+// The model picked for this block (resolved against the deployment's effective
+// catalog); when none is selected the backend runs it with the default model.
+const selectedModel = computed(() => models.getModel(props.block.modelId))
+
+// Picker menu: a "Default" reset plus each catalog model. Each label shows the
+// active flavour (Cloudflare vs the direct provider) so it's clear what will run.
+const modelMenu = computed(() => [
+  [
+    {
+      label: 'Default (Qwen)',
+      icon: 'i-lucide-rotate-ccw',
+      onSelect: () => setModel(''),
+    },
+    ...models.models.map((m) => ({
+      label: `${m.label} · ${m.providerLabel}`,
+      icon: m.flavor === 'direct' ? 'i-lucide-zap' : 'i-lucide-cloud',
+      onSelect: () => setModel(m.id),
+    })),
+  ],
+])
+
+function setModel(id: string) {
+  board.updateBlock(props.block.id, { modelId: id })
+}
+
+// ---- confidence threshold (percent <-> 0..1) -------------------------------
+const thresholdPct = computed({
+  get: () => Math.round((props.block.confidenceThreshold ?? DEFAULT_CONFIDENCE_THRESHOLD) * 100),
+  set: (v: number) =>
+    board.updateBlock(props.block.id, {
+      confidenceThreshold: Math.min(100, Math.max(0, v)) / 100,
+    }),
+})
+const confidencePct = computed(() =>
+  props.block.confidence != null ? Math.round(props.block.confidence * 100) : null,
+)
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- model selection -->
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Model
+        </span>
+        <UDropdownMenu :items="modelMenu">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-cpu"
+            trailing-icon="i-lucide-chevron-down"
+          />
+        </UDropdownMenu>
+      </div>
+      <div v-if="selectedModel" class="flex items-center gap-1">
+        <UBadge
+          color="primary"
+          variant="subtle"
+          size="sm"
+          class="cursor-pointer"
+          :title="selectedModel.description"
+          @click="setModel('')"
+        >
+          {{ selectedModel.label }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+        </UBadge>
+        <UBadge
+          :color="selectedModel.flavor === 'direct' ? 'success' : 'neutral'"
+          variant="subtle"
+          size="sm"
+          :title="
+            selectedModel.flavor === 'direct'
+              ? `Direct via ${selectedModel.providerLabel}`
+              : 'Cloudflare Workers AI'
+          "
+        >
+          {{ selectedModel.providerLabel }}
+        </UBadge>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        Default — runs the Qwen model ({{
+          models.getModel('qwen')?.providerLabel ?? 'Cloudflare'
+        }}).
+      </div>
+    </div>
+
+    <!-- confidence threshold -->
+    <div>
+      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Auto-merge threshold
+      </div>
+      <div class="flex items-center gap-2">
+        <UInput
+          v-model.number="thresholdPct"
+          type="number"
+          min="0"
+          max="100"
+          size="sm"
+          class="w-20"
+        />
+        <span class="text-[11px] text-slate-400">% confidence</span>
+      </div>
+      <div v-if="confidencePct != null" class="mt-1 text-[11px]">
+        Last run scored
+        <span
+          :class="
+            block.confidence! >= (block.confidenceThreshold ?? 0.8)
+              ? 'text-emerald-400'
+              : 'text-amber-400'
+          "
+        >
+          {{ confidencePct }}%
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type { Block } from '~/types/domain'
+
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const fragments = useFragmentsStore()
+
+// ---- features implemented --------------------------------------------------
+const newFeature = ref('')
+function addFeature() {
+  const v = newFeature.value.trim()
+  if (!v) return
+  const list = props.block.features ? [...props.block.features] : []
+  if (!list.includes(v)) list.push(v)
+  board.updateBlock(props.block.id, { features: list })
+  newFeature.value = ''
+}
+function removeFeature(f: string) {
+  if (!props.block.features) return
+  board.updateBlock(props.block.id, { features: props.block.features.filter((x) => x !== f) })
+}
+
+// ---- best-practice prompt fragments ----------------------------------------
+// Selected fragments (resolved against the catalog; unknown ids are dropped).
+const selectedFragments = computed(() =>
+  (props.block.fragmentIds ?? [])
+    .map((id) => fragments.getFragment(id))
+    .filter((f): f is NonNullable<typeof f> => !!f),
+)
+
+// Picker menu: fragments suitable for this block's type, not already selected,
+// grouped by category so the dropdown reads like the catalog.
+const fragmentMenu = computed(() => {
+  const selected = new Set(props.block.fragmentIds ?? [])
+  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
+  for (const f of fragments.forBlockType(props.block.type)) {
+    if (selected.has(f.id)) continue
+    const items = groups.get(f.category) ?? []
+    items.push({ label: f.title, onSelect: () => addFragment(f.id) })
+    groups.set(f.category, items)
+  }
+  return [...groups.values()]
+})
+
+function addFragment(id: string) {
+  const list = props.block.fragmentIds ? [...props.block.fragmentIds] : []
+  if (!list.includes(id)) list.push(id)
+  board.updateBlock(props.block.id, { fragmentIds: list })
+}
+
+function removeFragment(id: string) {
+  if (!props.block.fragmentIds) return
+  board.updateBlock(props.block.id, {
+    fragmentIds: props.block.fragmentIds.filter((x) => x !== id),
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- module assignment -->
+    <div>
+      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Module
+      </div>
+      <UInput
+        v-model="block.moduleName"
+        size="sm"
+        class="w-full"
+        placeholder="e.g. Sessions (created on implement if new)"
+        icon="i-lucide-package"
+      />
+    </div>
+
+    <!-- features implemented -->
+    <div>
+      <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Features implemented
+      </div>
+      <div v-if="block.features?.length" class="mb-1 flex flex-wrap gap-1">
+        <UBadge
+          v-for="f in block.features"
+          :key="f"
+          color="success"
+          variant="subtle"
+          size="sm"
+          class="cursor-pointer"
+          @click="removeFeature(f)"
+        >
+          {{ f }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+        </UBadge>
+      </div>
+      <UInput
+        v-model="newFeature"
+        size="sm"
+        class="w-full"
+        placeholder="Add a feature, press Enter"
+        icon="i-lucide-puzzle"
+        @keydown.enter="addFeature"
+      />
+    </div>
+
+    <!-- best practices (prompt fragments) -->
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Best practices
+        </span>
+        <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-plus"
+            trailing-icon="i-lucide-chevron-down"
+          />
+        </UDropdownMenu>
+      </div>
+      <div v-if="selectedFragments.length" class="mb-1 flex flex-wrap gap-1">
+        <UBadge
+          v-for="f in selectedFragments"
+          :key="f.id"
+          color="primary"
+          variant="subtle"
+          size="sm"
+          class="cursor-pointer"
+          :title="f.summary"
+          @click="removeFragment(f.id)"
+        >
+          {{ f.title }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+        </UBadge>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        None — agents follow their default guidance.
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/pipeline/PipelineBuilder.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { AgentKind } from '~/types/domain'
+import { AGENT_BY_KIND } from '~/utils/catalog'
+import AgentPalette from '~/components/palettes/AgentPalette.vue'
+
+const pipelines = usePipelinesStore()
+const agents = useAgentsStore()
+const ui = useUiStore()
+
+const open = computed({
+  get: () => ui.builderOpen,
+  set: (v: boolean) => (ui.builderOpen = v),
+})
+
+function add(kind: AgentKind) {
+  pipelines.addToDraft(kind)
+}
+
+const toast = useToast()
+
+// ---- "Add agent" mini-form -------------------------------------------------
+const addAgentOpen = ref(false)
+const newAgentName = ref('')
+const newAgentDesc = ref('')
+
+function openAddAgent() {
+  newAgentName.value = ''
+  newAgentDesc.value = ''
+  addAgentOpen.value = true
+}
+
+function createAgent() {
+  const agent = agents.addAgent({
+    label: newAgentName.value,
+    description: newAgentDesc.value,
+  })
+  toast.add({ title: `Added agent “${agent.label}”`, color: 'success', icon: 'i-lucide-check' })
+  addAgentOpen.value = false
+}
+
+function placeholder(what: string) {
+  toast.add({ title: 'Placeholder', description: what, icon: 'i-lucide-construction' })
+}
+
+async function save() {
+  try {
+    const saved = await pipelines.saveDraft()
+    if (saved) {
+      toast.add({ title: `Saved “${saved.name}”`, color: 'success', icon: 'i-lucide-check' })
+      ui.builderOpen = false
+    } else {
+      toast.add({ title: 'Add at least one agent first', color: 'warning' })
+    }
+  } catch {
+    toast.add({ title: 'Could not save pipeline', color: 'error' })
+  }
+}
+</script>
+
+<template>
+  <USlideover v-model:open="open" title="Pipeline builder" side="left">
+    <template #body>
+      <div class="grid h-full grid-cols-2 gap-4">
+        <!-- agent palette -->
+        <div class="overflow-y-auto pr-1">
+          <div class="mb-2 flex items-center justify-between gap-2">
+            <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
+              Agent palette
+            </h3>
+            <UButton
+              color="primary"
+              variant="soft"
+              size="xs"
+              icon="i-lucide-plus"
+              @click="openAddAgent"
+            >
+              Add agent
+            </UButton>
+          </div>
+          <AgentPalette @add="add" />
+        </div>
+
+        <!-- draft chain -->
+        <div class="flex flex-col">
+          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
+            Pipeline
+          </h3>
+          <UInput
+            v-model="pipelines.draftName"
+            placeholder="Pipeline name"
+            size="sm"
+            class="mb-3"
+          />
+
+          <div
+            v-if="pipelines.draft.length === 0"
+            class="flex flex-1 items-center justify-center rounded-lg border border-dashed border-slate-700 p-4 text-center text-xs text-slate-500"
+          >
+            Click agents on the left to assemble a linear pipeline.
+          </div>
+
+          <ol v-else class="flex-1 space-y-2 overflow-y-auto">
+            <li
+              v-for="(kind, i) in pipelines.draft"
+              :key="i"
+              class="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/60 p-2"
+            >
+              <span class="w-4 text-center text-[10px] text-slate-500">{{ i + 1 }}</span>
+              <UIcon
+                :name="AGENT_BY_KIND[kind].icon"
+                class="h-4 w-4"
+                :style="{ color: AGENT_BY_KIND[kind].color }"
+              />
+              <span class="text-xs text-slate-100">{{ AGENT_BY_KIND[kind].label }}</span>
+              <div class="ml-auto flex items-center">
+                <UButton
+                  icon="i-lucide-chevron-up"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  :disabled="i === 0"
+                  @click="pipelines.moveInDraft(i, i - 1)"
+                />
+                <UButton
+                  icon="i-lucide-chevron-down"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  :disabled="i === pipelines.draft.length - 1"
+                  @click="pipelines.moveInDraft(i, i + 1)"
+                />
+                <UButton
+                  icon="i-lucide-x"
+                  color="error"
+                  variant="ghost"
+                  size="xs"
+                  @click="pipelines.removeFromDraft(i)"
+                />
+              </div>
+            </li>
+          </ol>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full items-center justify-between">
+        <UButton color="neutral" variant="ghost" size="sm" @click="pipelines.clearDraft()">
+          Clear
+        </UButton>
+        <UButton
+          color="primary"
+          icon="i-lucide-save"
+          size="sm"
+          :disabled="pipelines.draft.length === 0"
+          @click="save"
+        >
+          Save pipeline
+        </UButton>
+      </div>
+    </template>
+  </USlideover>
+
+  <!-- Add-agent form -->
+  <UModal v-model:open="addAgentOpen" title="Add agent">
+    <template #body>
+      <div class="space-y-3">
+        <div>
+          <label
+            class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+          >
+            Name
+          </label>
+          <UInput
+            v-model="newAgentName"
+            placeholder="e.g. Security Auditor"
+            size="sm"
+            class="w-full"
+          />
+        </div>
+        <div>
+          <label
+            class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+          >
+            Description
+          </label>
+          <UTextarea
+            v-model="newAgentDesc"
+            :rows="2"
+            autoresize
+            size="sm"
+            class="w-full"
+            placeholder="What does this agent do?"
+          />
+        </div>
+        <UButton
+          color="neutral"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-file-text"
+          block
+          @click="placeholder('Link context document')"
+        >
+          Link context document
+        </UButton>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full items-center justify-end gap-2">
+        <UButton color="neutral" variant="ghost" size="sm" @click="addAgentOpen = false">
+          Cancel
+        </UButton>
+        <UButton
+          color="primary"
+          icon="i-lucide-plus"
+          size="sm"
+          :disabled="!newAgentName.trim()"
+          @click="createAgent"
+        >
+          Create agent
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>