@cat-factory/app 0.6.0

package/app/components/gates/GateResultView.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+// Gate window — the dedicated surface for a polling gate step (`ci` / `conflicts`),
+// opened via the universal result-view host (the same seam the test report and the
+// requirements review use). It surfaces the gate's conclusion that the backend now
+// persists on `step.gate`: the precheck verdict, the helper attempt budget, the gated
+// commit, and — for CI — the failing checks behind the failure. One window serves both
+// gates; it branches on the step's `agentKind` for the copy and the failure detail.
+import { computed } from 'vue'
+import { agentKindMeta } from '~/utils/catalog'
+import type { GateStepState } from '~/types/execution'
+import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+
+const board = useBoardStore()
+const execution = useExecutionStore()
+
+// Synchronous window: it reads its state straight off the execution step, so there's
+// nothing to fetch on open (no `onOpen` loader).
+const { open, blockId, instanceId, stepIndex, close } = useResultView('gate')
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+
+const instance = computed(() =>
+  instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
+)
+const step = computed(() => {
+  if (instance.value === null || stepIndex.value === null) return null
+  return instance.value.steps[stepIndex.value] ?? null
+})
+const gate = computed<GateStepState | null>(() => step.value?.gate ?? null)
+
+const isCi = computed(() => step.value?.agentKind === 'ci')
+const meta = computed(() => agentKindMeta(step.value?.agentKind ?? 'ci'))
+const helperKind = computed(() => (isCi.value ? 'ci-fixer' : 'conflict-resolver'))
+const helperMeta = computed(() => agentKindMeta(helperKind.value))
+
+const failingChecks = computed(() => gate.value?.failingChecks ?? [])
+const shortSha = computed(() => (gate.value?.headSha ? gate.value.headSha.slice(0, 7) : null))
+
+/**
+ * The display status — a roll-up of the persisted gate state + the run's status, so the
+ * window reads as a conclusion rather than raw fields:
+ *  - `passed`   — the step finished (the precheck went green; the helper was never needed
+ *                 or fixed it);
+ *  - `gave-up`  — the run failed at this gate (attempt budget spent);
+ *  - `fixing`   — a helper agent is in flight on a failed precheck;
+ *  - `failing`  — the precheck failed and a helper is about to run;
+ *  - `pending`  — the provider is still computing;
+ *  - `checking` — running the precheck.
+ */
+type GateDisplayStatus = 'passed' | 'gave-up' | 'fixing' | 'failing' | 'pending' | 'checking'
+const status = computed<GateDisplayStatus>(() => {
+  const s = step.value
+  if (!s) return 'checking'
+  if (s.state === 'done') return 'passed'
+  if (instance.value?.status === 'failed') return 'gave-up'
+  if (gate.value?.phase === 'working') return 'fixing'
+  if (gate.value?.lastVerdict === 'fail') return 'failing'
+  if (gate.value?.lastVerdict === 'pending') return 'pending'
+  return 'checking'
+})
+
+const STATUS_META: Record<
+  GateDisplayStatus,
+  { label: string; badge: 'success' | 'warning' | 'error' | 'neutral'; icon: string; text: string }
+> = {
+  passed: {
+    label: 'Passed',
+    badge: 'success',
+    icon: 'i-lucide-circle-check',
+    text: 'text-emerald-300',
+  },
+  'gave-up': { label: 'Gave up', badge: 'error', icon: 'i-lucide-circle-x', text: 'text-rose-300' },
+  fixing: { label: 'Fixing', badge: 'warning', icon: 'i-lucide-loader', text: 'text-amber-300' },
+  failing: {
+    label: 'Failing',
+    badge: 'error',
+    icon: 'i-lucide-circle-x',
+    text: 'text-rose-300',
+  },
+  pending: {
+    label: 'Pending',
+    badge: 'neutral',
+    icon: 'i-lucide-clock',
+    text: 'text-slate-300',
+  },
+  checking: {
+    label: 'Checking',
+    badge: 'neutral',
+    icon: 'i-lucide-loader',
+    text: 'text-slate-300',
+  },
+}
+
+// The conflicts gate has no structured detail (GitHub reports mergeability as a single
+// verdict, no file list), so the window shows the verdict + a note rather than a list.
+const conflictVerdict = computed(() => {
+  if (status.value === 'passed') return 'Mergeable'
+  if (gate.value?.lastVerdict === 'pending') return 'Computing mergeability…'
+  if (gate.value?.lastVerdict === 'fail') return 'Conflicts with base'
+  return 'Unknown'
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      @click.self="close"
+    >
+      <div
+        class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+      >
+        <!-- Header -->
+        <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">
+          <span
+            class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-500/15 text-sky-300"
+          >
+            <UIcon :name="meta.icon" class="h-4 w-4" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-sm font-semibold text-slate-100">
+              {{ meta.label }}{{ block ? ` — ${block.title}` : '' }}
+            </h2>
+            <p class="truncate text-[11px] text-slate-400">
+              {{
+                isCi
+                  ? 'Gates the PR on green CI, looping the CI fixer on failure'
+                  : 'Gates the PR on a clean merge, looping the resolver on conflicts'
+              }}
+            </p>
+          </div>
+          <UBadge :color="STATUS_META[status].badge" variant="subtle" size="sm">
+            {{ STATUS_META[status].label }}
+          </UBadge>
+          <StepRestartControl
+            :instance-id="instanceId"
+            :step-index="stepIndex"
+            @restarted="close"
+          />
+          <button
+            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            @click="close"
+          >
+            <UIcon name="i-lucide-x" class="h-4 w-4" />
+          </button>
+        </header>
+
+        <div class="flex min-h-0 flex-1">
+          <!-- Main: the conclusion -->
+          <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
+            <div
+              v-if="!gate"
+              class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+            >
+              <UIcon :name="meta.icon" class="h-8 w-8 opacity-40" />
+              <p class="text-sm">No gate activity yet.</p>
+              <p class="max-w-sm text-[11px] text-slate-500">
+                The precheck runs once the PR is open. While it polls, the step shows live state on
+                the board.
+              </p>
+            </div>
+
+            <template v-else>
+              <!-- Passed -->
+              <div
+                v-if="status === 'passed'"
+                class="flex items-start gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-2.5"
+              >
+                <UIcon
+                  name="i-lucide-circle-check"
+                  class="mt-0.5 h-4 w-4 shrink-0 text-emerald-400"
+                />
+                <p class="text-[13px] leading-relaxed text-emerald-200">
+                  {{
+                    step?.output || (isCi ? 'CI is green.' : 'The PR merges cleanly with its base.')
+                  }}
+                </p>
+              </div>
+
+              <!-- CI: failing checks -->
+              <template v-else-if="isCi">
+                <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  Failing checks
+                </h3>
+                <ul v-if="failingChecks.length" class="space-y-1">
+                  <li
+                    v-for="(c, i) in failingChecks"
+                    :key="`${c.name}-${i}`"
+                    class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5"
+                  >
+                    <UIcon name="i-lucide-circle-x" class="h-3.5 w-3.5 shrink-0 text-rose-400" />
+                    <span class="min-w-0 flex-1 truncate text-[13px] text-slate-200">{{
+                      c.name
+                    }}</span>
+                    <span class="shrink-0 text-[11px] uppercase text-rose-300">
+                      {{ c.conclusion ?? 'failure' }}
+                    </span>
+                  </li>
+                </ul>
+                <p v-else class="text-[13px] leading-relaxed text-slate-300">
+                  {{ gate.lastFailureSummary || 'CI has not reported a failure on this commit.' }}
+                </p>
+              </template>
+
+              <!-- Conflicts: verdict + note (no file-level detail from GitHub) -->
+              <template v-else>
+                <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  Mergeability
+                </h3>
+                <div
+                  class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
+                >
+                  <UIcon
+                    :name="STATUS_META[status].icon"
+                    class="h-4 w-4 shrink-0"
+                    :class="STATUS_META[status].text"
+                  />
+                  <span class="text-[13px] text-slate-200">{{ conflictVerdict }}</span>
+                </div>
+                <p class="mt-2 text-[11px] leading-relaxed text-slate-500">
+                  GitHub reports mergeability as a single verdict, so there's no file-level conflict
+                  list here. The conflict resolver inspects the branch directly.
+                </p>
+              </template>
+            </template>
+          </div>
+
+          <!-- Sidebar: gate state -->
+          <aside
+            class="hidden w-56 shrink-0 flex-col gap-4 border-l border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+          >
+            <div v-if="gate">
+              <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                State
+              </h4>
+              <div class="flex items-center gap-2 text-[13px]">
+                <UIcon
+                  :name="STATUS_META[status].icon"
+                  class="h-4 w-4"
+                  :class="STATUS_META[status].text"
+                />
+                <span :class="STATUS_META[status].text">{{ STATUS_META[status].label }}</span>
+              </div>
+            </div>
+
+            <div v-if="gate">
+              <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ helperMeta.label }}
+              </h4>
+              <p class="text-[12px] text-slate-300">
+                {{ gate.attempts }}/{{ gate.maxAttempts }} attempt{{
+                  gate.maxAttempts === 1 ? '' : 's'
+                }}
+                <template v-if="gate.phase === 'working'"> · running…</template>
+                <template v-else-if="gate.attempts === 0"> · not needed yet</template>
+              </p>
+            </div>
+
+            <div v-if="shortSha">
+              <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                Gated commit
+              </h4>
+              <p class="font-mono text-[12px] text-slate-300">{{ shortSha }}</p>
+            </div>
+
+            <div v-if="step?.model">
+              <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                Model
+              </h4>
+              <p class="break-all text-[12px] text-slate-300">{{ step.model }}</p>
+            </div>
+
+            <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
+              A gate runs a programmatic precheck and only spins up the
+              {{ helperMeta.label }} when it fails — a green check advances with nothing spun up.
+            </p>
+          </aside>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/github/AddServiceFromRepoModal.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts">
+// Add a board service backed by an EXISTING GitHub repository — no bootstrap
+// run. Unlike the bootstrap modal (which creates a repo and has an agent adapt
+// it in a container), this just links a repo the App can access to a fresh,
+// `ready` service frame. The workspace need not track the repo yet: the backend
+// links + syncs it on import. If the App can't see the wanted repo, the user
+// grants it access from here, then refreshes the list.
+//
+// MONOREPO support: a repo flagged a monorepo can back SEVERAL services, each
+// pinned to a subdirectory. When the selected repo is a monorepo, the user
+// browses its tree and picks the service's directory before adding (and may add
+// more than one, a subset of the repo's services).
+import GitHubConnect from '~/components/github/GitHubConnect.vue'
+import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
+import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
+
+const ui = useUiStore()
+const github = useGitHubStore()
+const board = useBoardStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.addServiceOpen,
+  set: (v: boolean) => {
+    if (!v) ui.closeAddService()
+  },
+})
+
+const selectedRepoId = ref<number | undefined>(undefined)
+const adding = ref(false)
+
+async function loadRepos() {
+  try {
+    await github.probe()
+    if (github.connected) await Promise.all([github.load(), github.loadAvailableRepos()])
+  } catch {
+    // Integration off / unreachable → the picker stays empty, GitHubConnect shows.
+  }
+}
+
+// On open: ensure we know the connection + which repos the App can access, and
+// the workspace's already-tracked repos (to flag ones already on the board).
+watch(open, (isOpen) => {
+  if (!isOpen) return
+  resetSelection()
+  void loadRepos()
+})
+
+// If the user connects from inside the modal (the not-connected prompt), pull the
+// repo list as soon as the connection is bound.
+watch(
+  () => github.connected,
+  (isConnected) => {
+    if (isConnected && open.value) void loadRepos()
+  },
+)
+
+// The integration is on but this workspace isn't bound yet — connect first.
+const needsGitHub = computed(() => github.available === true && !github.connected)
+
+// Repos already backing a board service can't be added again — UNLESS they're a
+// monorepo, which can host several services (each at its own subdirectory).
+const onBoardIds = computed(
+  () => new Set(github.repos.filter((r) => r.blockId).map((r) => r.githubId)),
+)
+
+const repoItems = computed(() =>
+  github.availableRepos.map((r) => {
+    const onBoard = onBoardIds.value.has(r.githubId) && !r.isMonorepo
+    const mono = r.isMonorepo ? ' · monorepo' : ''
+    return {
+      label: `${r.owner}/${r.name}${r.private ? ' (private)' : ''}${mono}${onBoard ? ' · already on board' : ''}`,
+      // Searched on (lowercased once) — the owner/name, so the filter matches either.
+      search: `${r.owner}/${r.name}`.toLowerCase(),
+      value: r.githubId,
+      disabled: onBoard,
+    }
+  }),
+)
+
+// The PAT (or a wide App install) can expose hundreds of repos, too many for a plain
+// dropdown — filter by owner/name. The currently selected repo is always kept in the
+// list so a selection doesn't vanish when the query no longer matches it.
+const repoSearch = ref('')
+const filteredRepoItems = computed(() => {
+  const q = repoSearch.value.trim().toLowerCase()
+  if (!q) return repoItems.value
+  return repoItems.value.filter((r) => r.search.includes(q) || r.value === selectedRepoId.value)
+})
+
+const hasRepos = computed(() => github.availableRepos.length > 0)
+const selectedRepo = computed(() =>
+  github.availableRepos.find((r) => r.githubId === selectedRepoId.value),
+)
+
+// ---- monorepo flag + directory picker ------------------------------------
+
+// The monorepo flag is MODAL-LOCAL state, sent as part of the add-service request
+// rather than persisted up-front on a toggle: there's no need to round-trip a PATCH
+// before adding (browsing the tree needs only the repo id, and the backend flags the
+// repo + requires a directory when it creates the service). A repo already flagged a
+// monorepo (it backs other services) seeds the toggle on when selected.
+const isMonorepo = ref(false)
+const selectedDirectory = ref<string | undefined>(undefined)
+
+function toggleMonorepo(value: boolean) {
+  isMonorepo.value = value
+  selectedDirectory.value = undefined
+}
+
+// On repo change, seed the toggle from the repo's persisted flag and clear the rest.
+watch(selectedRepoId, () => {
+  isMonorepo.value = selectedRepo.value?.isMonorepo === true
+  selectedDirectory.value = undefined
+  configuredBlockId.value = undefined
+})
+
+function resetSelection() {
+  selectedRepoId.value = undefined
+  selectedDirectory.value = undefined
+  isMonorepo.value = false
+  configuredBlockId.value = undefined
+  repoSearch.value = ''
+}
+
+// The App's installation settings page — where the user grants it access to a
+// repo it can't see yet (mirrors the bootstrap modal's "grant access" link).
+const manageInstallUrl = computed(() => {
+  const conn = github.connection
+  if (!conn) return undefined
+  return conn.targetType === 'Organization'
+    ? `https://github.com/organizations/${conn.accountLogin}/settings/installations/${conn.installationId}`
+    : `https://github.com/settings/installations/${conn.installationId}`
+})
+
+function openManageInstall() {
+  if (manageInstallUrl.value) window.open(manageInstallUrl.value, '_blank', 'noopener')
+}
+
+// The just-added service, kept on the board store so the user can configure it (test
+// infra + fragments) right here — the same controls as the inspector. A monorepo can
+// host several services, so adding another keeps the modal open; a whole-repo service
+// can only be added once (its repo is then on the board).
+const configuredBlockId = ref<string | undefined>(undefined)
+const configuredDirectory = ref<string | undefined>(undefined)
+const configuredBlock = computed(() =>
+  configuredBlockId.value ? board.getBlock(configuredBlockId.value) : undefined,
+)
+
+// A monorepo service needs a chosen directory; a whole-repo service can be added once.
+const canAdd = computed(
+  () =>
+    !needsGitHub.value &&
+    selectedRepoId.value !== undefined &&
+    (isMonorepo.value ? !!selectedDirectory.value : !configuredBlockId.value),
+)
+
+async function add() {
+  if (!canAdd.value || selectedRepoId.value === undefined) return
+  adding.value = true
+  try {
+    const block = await board.addServiceFromRepo(selectedRepoId.value, {
+      directory: isMonorepo.value ? selectedDirectory.value : undefined,
+      isMonorepo: isMonorepo.value,
+    })
+    // Refresh the projection so the new repo↔block link is reflected locally.
+    await github.load()
+    configuredBlockId.value = block.id
+    configuredDirectory.value = isMonorepo.value ? selectedDirectory.value : undefined
+    toast.add({
+      title: 'Service added',
+      description: `${block.title} is on the board — configure it below.`,
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+    // Ready to pick another monorepo service (the just-added directory is taken).
+    selectedDirectory.value = undefined
+  } catch (e) {
+    toast.add({
+      title: 'Could not add service',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    adding.value = false
+  }
+}
+
+function done() {
+  ui.closeAddService()
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Add a service from a repository" :ui="{ content: 'max-w-xl' }">
+    <template #body>
+      <div class="space-y-6">
+        <p class="text-sm text-slate-400">
+          Pick an existing GitHub repository to add as a board service. No bootstrapping — the repo
+          is linked to a new service frame as-is, and tasks you run on it target that repo.
+        </p>
+
+        <!-- not connected: linking a repo needs the App bound to this workspace -->
+        <div
+          v-if="needsGitHub"
+          class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
+        >
+          <div class="flex items-start gap-2">
+            <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
+            <p class="text-sm text-amber-200/90">
+              Connect this workspace to GitHub first. Link an installation the App is already on, or
+              install it.
+            </p>
+          </div>
+          <GitHubConnect />
+        </div>
+
+        <template v-else>
+          <UFormField
+            label="Repository"
+            description="Repositories the GitHub App can access. Don't see yours? Grant the App access below, then refresh."
+            required
+          >
+            <div v-if="!hasRepos" class="text-sm text-slate-400">
+              No repositories available yet — grant the App access to one below, then refresh.
+            </div>
+            <div v-else class="space-y-1.5">
+              <UInput
+                v-model="repoSearch"
+                icon="i-lucide-search"
+                placeholder="Filter by owner/name…"
+                class="w-full"
+                :ui="{ trailing: 'pe-1' }"
+              >
+                <template v-if="repoSearch" #trailing>
+                  <UButton
+                    color="neutral"
+                    variant="link"
+                    size="sm"
+                    icon="i-lucide-x"
+                    aria-label="Clear filter"
+                    @click="repoSearch = ''"
+                  />
+                </template>
+              </UInput>
+              <USelect
+                v-model="selectedRepoId"
+                :items="filteredRepoItems"
+                placeholder="Choose a repository"
+                class="w-full"
+              />
+              <p class="text-xs text-slate-500">
+                Showing {{ filteredRepoItems.length }} of {{ repoItems.length }} repositories.
+              </p>
+            </div>
+          </UFormField>
+
+          <!-- monorepo handling: flag + directory picker -->
+          <div v-if="selectedRepoId !== undefined" class="space-y-3">
+            <USwitch
+              :model-value="isMonorepo"
+              label="This is a monorepo (hosts more than one service)"
+              description="Add several services from one repo, each pinned to a subdirectory."
+              @update:model-value="toggleMonorepo"
+            />
+
+            <div
+              v-if="isMonorepo"
+              class="rounded-md border border-slate-700/60 bg-slate-900/40 p-3"
+            >
+              <p class="mb-2 text-xs text-slate-400">
+                Browse the repository and pick the directory of the service you want to add. Agents
+                working on this service will run within that subdirectory.
+              </p>
+              <RepoTreeBrowser
+                v-model="selectedDirectory"
+                :repo-github-id="selectedRepoId!"
+                mode="dir"
+              />
+              <p class="mt-2 truncate text-xs text-slate-400">
+                <template v-if="selectedDirectory">
+                  Service directory:
+                  <code class="text-slate-200">{{ selectedDirectory }}</code>
+                </template>
+                <template v-else>No directory selected yet.</template>
+              </p>
+            </div>
+          </div>
+
+          <!-- just-added service: configure it with the same controls as the inspector -->
+          <div
+            v-if="configuredBlock"
+            class="space-y-4 rounded-md border border-emerald-900/50 bg-emerald-950/20 p-3"
+          >
+            <div
+              class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-emerald-400"
+            >
+              <UIcon name="i-lucide-check" class="h-3.5 w-3.5" />
+              {{ configuredBlock.title }} added — configure it
+            </div>
+            <ServiceTestConfig
+              :block="configuredBlock"
+              :repo="{ githubId: selectedRepoId!, directory: configuredDirectory }"
+            />
+            <ServiceFragments :block="configuredBlock" />
+          </div>
+
+          <div class="flex flex-wrap items-center gap-2">
+            <UButton
+              v-if="manageInstallUrl"
+              color="neutral"
+              variant="subtle"
+              size="sm"
+              icon="i-lucide-shield-check"
+              trailing-icon="i-lucide-external-link"
+              title="Open the App's installation settings to grant it access to a repository"
+              @click="openManageInstall"
+            >
+              Grant the App access to a repo
+            </UButton>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              icon="i-lucide-refresh-cw"
+              :loading="github.loadingAvailable"
+              @click="github.loadAvailableRepos()"
+            >
+              Refresh list
+            </UButton>
+          </div>
+
+          <div class="flex justify-end gap-2">
+            <UButton v-if="configuredBlock" color="neutral" variant="soft" size="sm" @click="done">
+              Done
+            </UButton>
+            <UButton
+              v-if="!configuredBlock || isMonorepo"
+              color="primary"
+              icon="i-lucide-plus"
+              :loading="adding"
+              :disabled="!canAdd"
+              @click="add"
+            >
+              {{ configuredBlock && isMonorepo ? 'Add another service' : 'Add service' }}
+            </UButton>
+          </div>
+        </template>
+      </div>
+    </template>
+  </UModal>
+</template>