@cat-factory/app 0.6.0

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { Block, CloudProvider, InstanceSize } from '~/types/domain'
+import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+
+// Service-level (frame) configuration: where the Tester's local-mode infra comes
+// from (a docker-compose path, or an explicit "no infra dependencies" toggle — a
+// Tester pipeline can't start until one is set), plus the cloud provider + instance
+// size the service's container jobs run on. Autodiscovery suggests a compose path
+// when the service is added; it can be set/changed here later — or browsed for in
+// the backing repository.
+const props = defineProps<{
+  block: Block
+  // Repo backing this service, supplied by the add-service modal when the block is
+  // too fresh to be resolvable from the stores yet. Otherwise resolved below.
+  repo?: { githubId: number; directory?: string | null }
+}>()
+
+const board = useBoardStore()
+const accounts = useAccountsStore()
+const github = useGitHubStore()
+const services = useServicesStore()
+
+const composePath = computed(() => props.block.testComposePath ?? '')
+const noInfra = computed(() => props.block.noInfraDependencies === true)
+
+// The repo + service subdirectory backing this frame, for the compose-file browser.
+// A monorepo service isn't on the `github_repos` blockId link (that stays null), so
+// fall back to the service catalog mapping, which carries the repo + directory.
+const repoContext = computed<{ githubId: number; directory?: string | null } | undefined>(() => {
+  if (props.repo) return props.repo
+  const svc = services.serviceByFrameBlock[props.block.id]
+  if (svc?.repoGithubId != null) return { githubId: svc.repoGithubId, directory: svc.directory }
+  const r = github.repoForBlock(props.block.id)
+  return r ? { githubId: r.githubId } : undefined
+})
+
+// Compose-file picker: browse the repo and pin the compose file. The Tester runs
+// `docker compose -f <path>` from the CLONE ROOT, so the stored path is relative to
+// the repo root (the browser starts inside the service's subdirectory for convenience).
+const browseOpen = ref(false)
+const pickedPath = ref<string | undefined>(undefined)
+function openBrowse() {
+  pickedPath.value = composePath.value || undefined
+  browseOpen.value = true
+}
+function applyPicked() {
+  if (pickedPath.value) setComposePath(pickedPath.value)
+  browseOpen.value = false
+}
+
+// A service with no explicit provider inherits the active account's default (else the
+// built-in `cloudflare`); show that as the selected chip so the inherited value is visible.
+const effectiveProvider = computed<CloudProvider>(
+  () => props.block.cloudProvider ?? accounts.activeAccount?.defaultCloudProvider ?? 'cloudflare',
+)
+
+function setComposePath(value: string) {
+  board.updateBlock(props.block.id, { testComposePath: value.trim() })
+}
+function toggleNoInfra(value: boolean) {
+  board.updateBlock(props.block.id, { noInfraDependencies: value })
+}
+
+const PROVIDERS: { value: CloudProvider; label: string }[] = [
+  { value: 'cloudflare', label: 'Cloudflare' },
+  { value: 'docker', label: 'Docker (local)' },
+  { value: 'aws', label: 'AWS' },
+  { value: 'gcp', label: 'GCP' },
+  { value: 'azure', label: 'Azure' },
+  { value: 'custom', label: 'Custom' },
+]
+const SIZES: { value: InstanceSize; label: string }[] = [
+  { value: 'small', label: 'Small' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'large', label: 'Large' },
+  { value: 'xlarge', label: 'XLarge' },
+]
+
+function setProvider(value: CloudProvider) {
+  board.updateBlock(props.block.id, { cloudProvider: value })
+}
+function setSize(value: InstanceSize) {
+  board.updateBlock(props.block.id, { instanceSize: value })
+}
+
+const missingInfra = computed(() => !noInfra.value && composePath.value.trim() === '')
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      Test infrastructure
+    </div>
+
+    <div class="space-y-1">
+      <label class="text-[11px] text-slate-400">docker-compose path</label>
+      <div class="flex items-center gap-1">
+        <UInput
+          :model-value="composePath"
+          size="xs"
+          class="flex-1"
+          placeholder="docker-compose.yml"
+          :disabled="noInfra"
+          @blur="(e: FocusEvent) => setComposePath((e.target as HTMLInputElement).value)"
+          @keydown.enter="
+            (e: KeyboardEvent) => setComposePath((e.target as HTMLInputElement).value)
+          "
+        />
+        <UButton
+          v-if="repoContext"
+          size="xs"
+          variant="soft"
+          color="neutral"
+          icon="i-lucide-folder-search"
+          :disabled="noInfra"
+          title="Browse the repository for the compose file"
+          @click="openBrowse"
+        />
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        Used by the Tester to stand up the service's dependencies locally.
+      </p>
+    </div>
+
+    <UModal v-model:open="browseOpen" title="Select the docker-compose file">
+      <template #body>
+        <div v-if="repoContext" class="space-y-3">
+          <p class="text-xs text-slate-400">
+            Pick the compose file in the repository — its path is stored relative to the repo root.
+          </p>
+          <RepoTreeBrowser
+            v-model="pickedPath"
+            :repo-github-id="repoContext.githubId"
+            mode="file"
+            :start-path="repoContext.directory ?? ''"
+          />
+          <div class="flex items-center justify-between gap-2">
+            <p class="truncate text-xs text-slate-400">
+              <template v-if="pickedPath">
+                Selected: <code class="text-slate-200">{{ pickedPath }}</code>
+              </template>
+              <template v-else>No file selected.</template>
+            </p>
+            <UButton size="xs" color="primary" :disabled="!pickedPath" @click="applyPicked">
+              Use this file
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <label class="flex items-center gap-2 text-[11px] text-slate-400">
+      <UCheckbox
+        :model-value="noInfra"
+        @update:model-value="(v: boolean | 'indeterminate') => toggleNoInfra(v === true)"
+      />
+      No infra dependencies (the Tester spins nothing up)
+    </label>
+
+    <p v-if="missingInfra" class="text-[11px] leading-snug text-amber-500">
+      Set a docker-compose path or enable “no infra dependencies”, otherwise a pipeline with a
+      Tester won't start.
+    </p>
+
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">Cloud provider</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="p in PROVIDERS"
+          :key="p.value"
+          :color="effectiveProvider === p.value ? 'primary' : 'neutral'"
+          :variant="effectiveProvider === p.value ? 'soft' : 'ghost'"
+          size="xs"
+          @click="setProvider(p.value)"
+        >
+          {{ p.label }}
+        </UButton>
+      </div>
+    </div>
+
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">Instance size</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="s in SIZES"
+          :key="s.value"
+          :color="(block.instanceSize ?? 'medium') === s.value ? 'primary' : 'neutral'"
+          :variant="(block.instanceSize ?? 'medium') === s.value ? 'soft' : 'ghost'"
+          size="xs"
+          @click="setSize(s.value)"
+        >
+          {{ s.label }}
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Block } from '~/types/domain'
+import { useAgentConfigStore } from '~/stores/agentConfig'
+import { useExecutionStore } from '~/stores/execution'
+
+// Task-level configuration contributed by the agents in this task's selected
+// pipeline (e.g. the Tester's environment: local vs ephemeral). Each value is
+// editable until its contributing agent's step starts, then it freezes (the run is
+// already consuming it). Persisted as a sparse id→value map on the block.
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const agentConfig = useAgentConfigStore()
+const execution = useExecutionStore()
+
+// The descriptors that apply: those contributed by the task's pinned pipeline, plus
+// any whose value is already set (so an existing choice always stays visible/editable
+// even if the pinned pipeline changed).
+const descriptors = computed(() => {
+  const byPipeline = agentConfig.forPipeline(props.block.pipelineId)
+  const seen = new Set(byPipeline.map((d) => d.id))
+  const fromValues = Object.keys(props.block.agentConfig ?? {})
+    .filter((id) => !seen.has(id))
+    .map((id) => agentConfig.descriptors.find((d) => d.id === id))
+    .filter((d): d is NonNullable<typeof d> => Boolean(d))
+  return [...byPipeline, ...fromValues]
+})
+
+const run = computed(() => execution.getByBlock(props.block.id))
+
+/** A descriptor freezes once its contributing agent's step has left `pending`. */
+function isFrozen(agentKind: string): boolean {
+  const steps = run.value?.steps
+  if (!steps) return false
+  const step = steps.find((s) => s.agentKind === agentKind)
+  return Boolean(step && step.state !== 'pending')
+}
+
+function valueOf(id: string, fallback: string): string {
+  return props.block.agentConfig?.[id] ?? fallback
+}
+
+function setValue(id: string, value: string) {
+  const next = { ...props.block.agentConfig, [id]: value }
+  board.updateBlock(props.block.id, { agentConfig: next })
+}
+</script>
+
+<template>
+  <div v-if="descriptors.length" class="space-y-3">
+    <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      Agent configuration
+    </div>
+    <div v-for="d in descriptors" :key="d.id" class="space-y-1">
+      <div class="flex items-center justify-between">
+        <span class="text-[11px] text-slate-400">{{ d.label }}</span>
+        <UIcon
+          v-if="isFrozen(d.agentKind)"
+          name="i-lucide-lock"
+          class="h-3 w-3 text-slate-500"
+          title="Frozen — the agent has started"
+        />
+      </div>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="opt in d.options"
+          :key="opt.value"
+          :color="valueOf(d.id, d.default) === opt.value ? 'primary' : 'neutral'"
+          :variant="valueOf(d.id, d.default) === opt.value ? 'soft' : 'ghost'"
+          size="xs"
+          :disabled="isFrozen(d.agentKind)"
+          @click="setValue(d.id, opt.value)"
+        >
+          {{ opt.label }}
+        </UButton>
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">{{ d.description }}</p>
+    </div>
+  </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>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// Compact display of a task's estimator triage (Complexity / Risk / Impact), shown on the
+// inspector once a `task-estimator` step has run. Read-only — produced by the estimator,
+// used to gate consensus steps. Hidden when no estimate exists.
+import { computed } from 'vue'
+import type { Block } from '~/types/domain'
+
+const props = defineProps<{ block: Block }>()
+
+const estimate = computed(() => props.block.estimate ?? null)
+
+const AXES = [
+  { key: 'complexity', label: 'Complexity' },
+  { key: 'risk', label: 'Risk' },
+  { key: 'impact', label: 'Impact' },
+] as const
+
+function pct(n: number): number {
+  return Math.round(n * 100)
+}
+/** Cool→hot bar colour by severity (low = sky, mid = amber, high = rose). */
+function barClass(n: number): string {
+  if (n >= 0.66) return 'bg-rose-500'
+  if (n >= 0.33) return 'bg-amber-500'
+  return 'bg-sky-500'
+}
+</script>
+
+<template>
+  <section v-if="estimate" class="space-y-2">
+    <div
+      class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-400"
+    >
+      <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5" />
+      Estimate
+    </div>
+    <div class="space-y-1.5 rounded-lg border border-slate-800 bg-slate-900/40 p-2.5">
+      <div v-for="axis in AXES" :key="axis.key" class="flex items-center gap-2">
+        <span class="w-20 shrink-0 text-xs text-slate-400">{{ axis.label }}</span>
+        <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-800">
+          <div
+            class="h-full rounded-full"
+            :class="barClass(estimate[axis.key])"
+            :style="{ width: `${pct(estimate[axis.key])}%` }"
+          />
+        </div>
+        <span class="w-9 shrink-0 text-right text-xs tabular-nums text-slate-300"
+          >{{ pct(estimate[axis.key]) }}%</span
+        >
+      </div>
+      <p v-if="estimate.rationale" class="pt-1 text-xs leading-relaxed text-slate-500">
+        {{ estimate.rationale }}
+      </p>
+    </div>
+  </section>
+</template>