@cat-factory/app 0.154.1 → 0.156.0

package/README.md

@@ -78,9 +78,10 @@ example ships in [`deploy/frontend`](../../deploy/frontend) (the `acme:security`
   docs/issues/scenarios. Decisions resolve via `DecisionModal`.
 - **Pipeline builder** (`components/pipeline`) — assemble/edit agent chains and
   watch `PipelineProgress`.
-- **Integrations** — modals/panels for `github`, `bootstrap`, `documents`,
-  `tasks`, `requirements` (review), `scenarios` (acceptance), and `fragments`
-  (the prompt-fragment library).
+- **Integrations** — modals/panels for `github` (the source-control panel, shared
+  by every VCS provider), `vcs` (the GitLab personal-access-token connect),
+  `bootstrap`, `documents`, `tasks`, `requirements` (review), `scenarios`
+  (acceptance), and `fragments` (the prompt-fragment library).
 - **Auth** (`components/auth`) — `AuthGate` / `LoginScreen` / `UserMenu`; the app
   is gated when the backend requires sign-in.
 

package/app/components/auth/LoginScreen.vue

@@ -2,28 +2,24 @@
 import { computed, ref, watch } from 'vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 import SecretInput from '~/components/common/SecretInput.vue'
+import type { VcsProvider } from '~/types/domain'
+import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS, VCS_PROVIDER_TOKEN_URLS } from '~/utils/vcs'
 
 const auth = useAuthStore()
 const { t } = useI18n()
 
 // Local-mode source-control PAT login. The PAT lives server-side in env (GITHUB_PAT /
 // GITLAB_PAT); the login screen only SELECTS a configured provider — no token is ever typed
-// into or shown in the browser. GitHub/GitLab are brand names (kept verbatim across locales),
-// as are the token-settings URLs, so they're inline constants rather than catalog keys — same
-// convention as the provider descriptors in ApiKeysSection. The "create a token" link prefers
-// the server's scopes-preselected deep link (`patLogin.setupUrls`); these are the fallback.
-type PatProvider = 'github' | 'gitlab'
+// into or shown in the browser. The brand labels / icons / token-settings URLs are the shared
+// provider descriptors in `~/utils/vcs` (brand names stay verbatim across locales, so they are
+// constants rather than catalog keys — the same convention as ApiKeysSection). The "create a
+// token" link prefers the server's scopes-preselected deep link (`patLogin.setupUrls`); the
+// descriptor's URL is the fallback.
+type PatProvider = VcsProvider
 const ALL_PROVIDERS: PatProvider[] = ['github', 'gitlab']
-const PROVIDER_LABELS: Record<PatProvider, string> = { github: 'GitHub', gitlab: 'GitLab' }
-const PROVIDER_ICONS: Record<PatProvider, string> = {
-  github: 'i-lucide-github',
-  gitlab: 'i-lucide-gitlab',
-}
-// Fallback token-creation pages, used only if the server didn't advertise a deep link.
-const PROVIDER_TOKEN_URLS: Record<PatProvider, string> = {
-  github: 'https://github.com/settings/tokens/new',
-  gitlab: 'https://gitlab.com/-/user_settings/personal_access_tokens',
-}
+const PROVIDER_LABELS = VCS_PROVIDER_LABELS
+const PROVIDER_ICONS = VCS_PROVIDER_ICONS
+const PROVIDER_TOKEN_URLS = VCS_PROVIDER_TOKEN_URLS
 
 const patLoginCfg = computed(() => auth.localMode?.patLogin)
 // Only providers whose PAT is configured in env can sign in (the token is the operational

package/app/components/github/GitHubOnboarding.vue

@@ -1,16 +1,29 @@
 <script setup lang="ts">
-// Hard onboarding gate shown after login when the GitHub integration is enabled
-// but the workspace has no App installation yet. cat-factory's whole flow runs on
-// the App (agents open PRs on the user's repos), so the board is withheld until
-// the App is installed/connected. Reuses <GitHubConnect>, which drives the
-// account-level install (https://github.com/apps/<slug>/installations/new — the
+// Hard onboarding gate shown after login when the VCS integration is enabled but the workspace
+// has no connection yet. cat-factory's whole flow runs on a connected repository host (agents
+// open pull/merge requests on the user's repos), so the board is withheld until the workspace
+// connects one. Renders the connect surfaces the deployment can actually serve: <GitHubConnect>
+// drives the account-level App install (https://github.com/apps/<slug>/installations/new — the
 // user picks the account/org and grants all or a subset of repos) plus the
-// pick-an-existing-installation path. A "Sign out" escape hatch avoids trapping a
-// user who needs to switch GitHub accounts.
+// pick-an-existing-installation path, and <GitLabConnect> takes a pasted GitLab PAT. A "Sign
+// out" escape hatch avoids trapping a user who needs to switch accounts.
 import GitHubConnect from '~/components/github/GitHubConnect.vue'
+import GitLabConnect from '~/components/vcs/GitLabConnect.vue'
+import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 
 const { t } = useI18n()
 const auth = useAuthStore()
+const github = useGitHubStore()
+
+// A deployment that serves exactly one provider names it; one serving several stays neutral
+// (the per-surface copy below then says which is which).
+const sole = computed(() => github.soleConnectProvider)
+const icon = computed(() => (sole.value ? VCS_PROVIDER_ICONS[sole.value] : 'i-lucide-git-branch'))
+const title = computed(() =>
+  sole.value
+    ? t('vcs.onboarding.title', { provider: VCS_PROVIDER_LABELS[sole.value] })
+    : t('vcs.onboarding.titleAny'),
+)
 </script>
 
 <template>
@@ -21,14 +34,29 @@ const auth = useAuthStore()
       class="my-8 w-full max-w-md rounded-xl border border-slate-800 bg-slate-900/80 p-8 backdrop-blur"
     >
       <div class="mb-5 text-center">
-        <UIcon name="i-lucide-github" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white">{{ t('github.onboarding.title') }}</h1>
+        <UIcon :name="icon" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
+        <h1 class="mb-1 text-lg font-semibold text-white">{{ title }}</h1>
         <p class="text-sm text-slate-400">
-          {{ t('github.onboarding.intro') }}
+          {{ t('vcs.onboarding.intro') }}
         </p>
       </div>
 
-      <GitHubConnect />
+      <template v-if="github.canConnectGitHubApp">
+        <p class="mb-3 text-sm text-slate-400">{{ t('github.onboarding.appIntro') }}</p>
+        <GitHubConnect />
+      </template>
+      <USeparator
+        v-if="github.canConnectGitHubApp && github.canConnectGitLabPat"
+        class="my-4"
+        :label="t('vcs.connect.or')"
+      />
+      <GitLabConnect v-if="github.canConnectGitLabPat" />
+      <p
+        v-if="!github.canConnectGitHubApp && !github.canConnectGitLabPat"
+        class="rounded-md border border-dashed border-slate-800 px-3 py-3 text-sm text-slate-400"
+      >
+        {{ t('vcs.connect.noneConfigured') }}
+      </p>
 
       <p
         v-if="auth.required && auth.user"

package/app/components/github/GitHubPanel.vue

@@ -4,13 +4,15 @@
 // pull requests and issues the backend caches in D1. Mirrors the document-source
 // connect/import surface, but for GitHub. Writes (new branch, open/merge PR,
 // comment) go straight to the repo via the backend's installation token.
-import type { GitHubPullRequest, GitHubRepo } from '~/types/domain'
+import type { GitHubPullRequest, GitHubRepo, VcsProvider } from '~/types/domain'
 // Explicit import: the auto-import name for a component nested under a
 // like-named directory (github/GitHubConnect) doesn't match the `<GitHubConnect>`
 // tag, so it silently renders as an empty element. Importing it directly binds
 // the tag unambiguously.
 import GitHubConnect from './GitHubConnect.vue'
+import GitLabConnect from '~/components/vcs/GitLabConnect.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -26,6 +28,32 @@ const open = computed({
 })
 const back = useIntegrationBack(open)
 
+// Provider-aware chrome: once connected, the panel is titled for the provider the workspace
+// actually connected; before that it names the sole connectable provider, or stays neutral when
+// the deployment serves several. Brand names are verbatim in every locale (see `~/utils/vcs`).
+const chromeProvider = computed(() =>
+  github.connected ? github.provider : github.soleConnectProvider,
+)
+const panelTitle = computed(() =>
+  chromeProvider.value ? VCS_PROVIDER_LABELS[chromeProvider.value] : t('vcs.panel.title'),
+)
+const providerIcon = computed(() =>
+  chromeProvider.value ? VCS_PROVIDER_ICONS[chromeProvider.value] : 'i-lucide-git-branch',
+)
+
+// What the connection line says under the account: a GitHub App connection is identified by its
+// installation, a PAT connection by the credential it rides. Keyed by an exhaustive Record of
+// literal `t()` keys, so a new provider fails the typecheck rather than rendering App vocabulary.
+const CONNECTION_META: Record<VcsProvider, () => string> = {
+  github: () =>
+    t('github.panel.installationMeta', {
+      targetType: github.connection?.targetType ?? '',
+      id: github.connection?.installationId ?? '',
+    }),
+  gitlab: () => t('vcs.panel.patMeta'),
+}
+const connectionMeta = computed(() => CONNECTION_META[github.provider]())
+
 // On open: refresh projections when connected. The not-connected state renders
 // <GitHubConnect>, which discovers and links installations on its own.
 watch(
@@ -48,8 +76,10 @@ function notifyError(title: string, e: unknown) {
 
 async function disconnect() {
   const ok = await confirm({
-    title: t('github.panel.confirmDisconnect.title'),
-    description: t('github.panel.confirmDisconnect.body'),
+    title: t('vcs.panel.confirmDisconnect.title', {
+      provider: VCS_PROVIDER_LABELS[github.provider],
+    }),
+    description: t('vcs.panel.confirmDisconnect.body'),
     variant: 'destructive',
     confirmLabel: t('common.disconnect'),
     icon: 'i-lucide-unplug',
@@ -57,7 +87,10 @@ async function disconnect() {
   if (!ok) return
   try {
     await github.disconnect()
-    toast.add({ title: t('github.panel.toast.disconnected'), icon: 'i-lucide-unplug' })
+    toast.add({
+      title: t('vcs.panel.toast.disconnected', { provider: VCS_PROVIDER_LABELS[github.provider] }),
+      icon: 'i-lucide-unplug',
+    })
   } catch (e) {
     notifyError(t('github.panel.errors.disconnect'), e)
   }
@@ -241,19 +274,32 @@ async function merge(pr: GitHubPullRequest) {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="GitHub" :ui="{ content: 'max-w-2xl' }">
+  <UModal v-model:open="open" :title="panelTitle" :ui="{ content: 'max-w-2xl' }">
     <template #title>
-      <IntegrationBackTitle title="GitHub" @back="back" />
+      <IntegrationBackTitle :title="panelTitle" @back="back" />
     </template>
     <template #body>
       <div class="space-y-5">
         <!-- not connected: connect -->
         <template v-if="!github.connected">
-          <p class="text-sm text-slate-400">
-            {{ t('github.panel.connectIntro') }}
+          <!-- One connect surface per method the deployment actually serves: the App
+               installation picker only where a GitHub App is configured, the PAT box only
+               where the per-workspace GitLab connect is wired. -->
+          <template v-if="github.canConnectGitHubApp">
+            <p class="text-sm text-slate-400">{{ t('github.panel.connectIntro') }}</p>
+            <GitHubConnect />
+          </template>
+          <USeparator
+            v-if="github.canConnectGitHubApp && github.canConnectGitLabPat"
+            :label="t('vcs.connect.or')"
+          />
+          <GitLabConnect v-if="github.canConnectGitLabPat" />
+          <p
+            v-if="!github.canConnectGitHubApp && !github.canConnectGitLabPat"
+            class="rounded-md border border-dashed border-slate-800 px-3 py-3 text-sm text-slate-400"
+          >
+            {{ t('vcs.connect.noneConfigured') }}
           </p>
-
-          <GitHubConnect />
         </template>
 
         <!-- connected: manage + browse -->
@@ -263,19 +309,12 @@ async function merge(pr: GitHubPullRequest) {
             class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2"
           >
             <div class="flex items-center gap-2 min-w-0">
-              <UIcon name="i-lucide-github" class="h-5 w-5 text-slate-300" />
+              <UIcon :name="providerIcon" class="h-5 w-5 text-slate-300" />
               <div class="min-w-0">
                 <div class="truncate text-sm text-slate-200">
                   {{ github.connection?.accountLogin }}
                 </div>
-                <div class="text-[11px] text-slate-500">
-                  {{
-                    t('github.panel.installationMeta', {
-                      targetType: github.connection?.targetType,
-                      id: github.connection?.installationId,
-                    })
-                  }}
-                </div>
+                <div class="text-[11px] text-slate-500">{{ connectionMeta }}</div>
               </div>
             </div>
             <div class="flex items-center gap-1">

package/app/components/panels/ResultWindowShell.vue

@@ -20,10 +20,11 @@
 //
 // It also owns the one trailing section every step-backed window shows: the agent's effort
 // self-assessment (see the footer block below), so a window never renders it itself.
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepEffortReport from '~/components/panels/StepEffortReport.vue'
+import StepValidationReport from '~/components/panels/StepValidationReport.vue'
 import { effortBand, effortHint } from '~/utils/effort'
 
 /** A pipeline step reference — passed by step-result windows to surface the shared
@@ -85,11 +86,26 @@ const { dialogRef } = useModalBehavior({
 // step whose agent wrote no report both resolve to null, and the footer disappears.
 const ui = useUiStore()
 const execution = useExecutionStore()
-const effortReport = computed(() => {
+const activeStep = computed(() => {
   const view = ui.resultView
   if (!view || view.instanceId === null || view.stepIndex === null) return null
-  return execution.getInstance(view.instanceId)?.steps[view.stepIndex]?.effortReport ?? null
+  return execution.getInstance(view.instanceId)?.steps[view.stepIndex] ?? null
 })
+const effortReport = computed(() => activeStep.value?.effortReport ?? null)
+// The step's PRE-PR VALIDATION report — the second universal trailing section, resolved the same
+// way and for the same reason: every window whose step ran a coding job can show whether the
+// checkout actually passed the service's checks before the PR opened (and, on a red run, exactly
+// what failed). Absent for a service that configured no checks, and the footer disappears.
+const validationReport = computed(() => activeStep.value?.validation ?? null)
+const validationOpen = ref(false)
+// A failing report is the interesting one, so it opens expanded; a green one stays a one-line row.
+watch(
+  validationReport,
+  (report) => {
+    if (report && !report.passed) validationOpen.value = true
+  },
+  { immediate: true },
+)
 // Collapsed by default — the windows own the vertical space, and the row already carries the
 // difficulty plus the gist of what held the agent back.
 const effortOpen = ref(false)
@@ -204,6 +220,61 @@ const panelClass = computed(() => [
             <StepEffortReport :report="effortReport" variant="flat" />
           </div>
         </section>
+
+        <!-- Shared trailing section: the pre-PR validation report (the service's check commands
+             run against the checkout BEFORE the PR opened). Collapsed when green, expanded when
+             red — a failed checkout is the one an operator opened the window to read. -->
+        <section
+          v-if="validationReport"
+          class="shrink-0 border-t border-slate-800 bg-slate-900/60"
+          data-testid="result-window-validation"
+        >
+          <button
+            type="button"
+            class="flex w-full items-center gap-2 px-5 py-2 text-start hover:bg-slate-800/40"
+            :aria-expanded="validationOpen"
+            data-testid="result-window-validation-toggle"
+            @click="validationOpen = !validationOpen"
+          >
+            <UIcon
+              :name="validationReport.passed ? 'i-lucide-shield-check' : 'i-lucide-shield-alert'"
+              class="h-3.5 w-3.5 shrink-0"
+              :class="validationReport.passed ? 'text-emerald-400' : 'text-rose-400'"
+            />
+            <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              {{ t('panels.stepDetail.validation.heading') }}
+            </span>
+            <span
+              class="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium tabular-nums"
+              :class="
+                validationReport.passed
+                  ? 'bg-emerald-500/15 text-emerald-300'
+                  : 'bg-rose-500/15 text-rose-300'
+              "
+            >
+              {{
+                validationReport.passed
+                  ? t('panels.stepDetail.validation.passed')
+                  : t('panels.stepDetail.validation.failed')
+              }}
+            </span>
+            <span class="min-w-0 flex-1 truncate text-[12px] text-slate-400">
+              {{
+                t('panels.stepDetail.validation.attempts', {
+                  attempts: validationReport.attempts,
+                  maxAttempts: validationReport.maxAttempts,
+                })
+              }}
+            </span>
+            <UIcon
+              :name="validationOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
+              class="ms-auto h-3.5 w-3.5 shrink-0 text-slate-500"
+            />
+          </button>
+          <div v-if="validationOpen" class="max-h-72 overflow-y-auto px-5 pb-3">
+            <StepValidationReport :report="validationReport" />
+          </div>
+        </section>
       </div>
     </div>
   </Teleport>

package/app/components/panels/StepValidationReport.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ValidationReport } from '~/types/validationChecks'
+
+// The PRE-PR VALIDATION report for a step: which of the service's configured check commands
+// passed against the checkout before the PR was allowed to open, their exit codes, and a
+// bounded, secret-scrubbed tail of each command's output. Produced by the executor-harness
+// running the commands — never a model self-report — so this is the run's captured PROOF on a
+// green run and its EVIDENCE on a failed one. See docs/initiatives/pre-pr-validation.md.
+const props = defineProps<{ report: ValidationReport }>()
+const { t } = useI18n()
+
+const failed = computed(() => props.report.outcomes.filter((o) => !o.passed))
+</script>
+
+<template>
+  <div class="space-y-2" data-testid="step-validation-report">
+    <p class="text-[11px] text-slate-400">
+      {{
+        report.passed
+          ? t('panels.stepDetail.validation.passedSummary', {
+              total: report.outcomes.length,
+              attempts: report.attempts,
+            })
+          : t('panels.stepDetail.validation.failedSummary', {
+              failed: failed.length,
+              total: report.outcomes.length,
+              attempts: report.attempts,
+              maxAttempts: report.maxAttempts,
+            })
+      }}
+    </p>
+
+    <div
+      v-for="outcome in report.outcomes"
+      :key="outcome.label"
+      class="rounded-md border border-slate-800 bg-slate-950/40 p-2"
+      data-testid="validation-outcome"
+    >
+      <div class="flex items-center gap-2">
+        <UIcon
+          :name="outcome.passed ? 'i-lucide-check' : 'i-lucide-x'"
+          class="h-3.5 w-3.5 shrink-0"
+          :class="outcome.passed ? 'text-emerald-400' : 'text-rose-400'"
+        />
+        <span class="text-[12px] font-medium text-slate-200">{{ outcome.label }}</span>
+        <span class="truncate font-mono text-[11px] text-slate-500">{{ outcome.command }}</span>
+        <span
+          v-if="!outcome.passed"
+          class="ms-auto shrink-0 rounded bg-rose-500/15 px-1.5 py-0.5 text-[11px] tabular-nums text-rose-300"
+        >
+          {{
+            outcome.timedOut
+              ? t('panels.stepDetail.validation.timedOut')
+              : t('panels.stepDetail.validation.exitCode', { code: outcome.exitCode })
+          }}
+        </span>
+      </div>
+      <pre
+        v-if="outcome.outputTail"
+        class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-slate-950 p-2 font-mono text-[11px] text-slate-400"
+        data-testid="validation-output"
+        >{{ outcome.outputTail }}</pre>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { Block } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import {
+  VALIDATION_DEFAULT_MAX_ATTEMPTS,
+  VALIDATION_MAX_ATTEMPTS_CEILING,
+  VALIDATION_MAX_CHECKS,
+  type ValidationCheck,
+} from '~/types/validationChecks'
+
+// Per-service (frame) PRE-PR VALIDATION CHECKS: the shell commands the executor-harness runs
+// against the checkout after the coder settles and BEFORE the PR opens. A failing command's
+// output is handed back to the agent, which retries under the attempt budget; only a green
+// checkout opens a PR, and an exhausted budget fails the step with the captured output.
+// Keyed by THIS block's id (service frames only — a task resolves its checks up the frame chain).
+const props = defineProps<{ block: Block }>()
+
+const store = useValidationChecksStore()
+const toast = useToast()
+const { t } = useI18n()
+const { confirmAction, toastDone } = useConfirmAction()
+
+const busy = ref(false)
+const rows = ref<ValidationCheck[]>([])
+const maxAttempts = ref(VALIDATION_DEFAULT_MAX_ATTEMPTS)
+
+const saved = computed(() => store.forBlock(props.block.id))
+const configured = computed(() => saved.value.checks.length > 0)
+const canAdd = computed(() => rows.value.length < VALIDATION_MAX_CHECKS)
+/** A row is only submittable once it has a command; the label falls back to the command. */
+const submittable = computed(() =>
+  rows.value
+    .map((r) => ({ label: r.label.trim() || r.command.trim(), command: r.command.trim() }))
+    .filter((r) => r.command.length > 0),
+)
+
+onMounted(() => {
+  store.ensureLoaded().catch(() => {})
+})
+watch(
+  saved,
+  (config) => {
+    rows.value = config.checks.map((c) => ({ ...c }))
+    maxAttempts.value = config.maxAttempts
+  },
+  { immediate: true },
+)
+
+function addRow() {
+  if (canAdd.value) rows.value.push({ label: '', command: '' })
+}
+
+function removeRow(index: number) {
+  rows.value.splice(index, 1)
+}
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+async function save() {
+  busy.value = true
+  try {
+    await store.save(props.block.id, submittable.value, maxAttempts.value)
+    toast.add({
+      title: t('inspector.validationChecks.savedToast'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    notifyError(t('inspector.validationChecks.saveFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function clear() {
+  const noun = t('inspector.validationChecks.configNoun')
+  if (!(await confirmAction('clear', noun))) return
+  busy.value = true
+  try {
+    await store.remove(props.block.id)
+    rows.value = []
+    toastDone('clear', noun)
+  } catch (e) {
+    notifyError(t('inspector.validationChecks.clearFailed'), e)
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <InspectorSection
+    v-if="store.available !== false"
+    :title="t('inspector.validationChecks.title')"
+    :hint="t('inspector.validationChecks.sectionHint')"
+    data-testid="service-validation-config"
+  >
+    <template #actions>
+      <UButton
+        v-if="configured"
+        color="error"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-trash-2"
+        :loading="busy"
+        data-testid="validation-clear"
+        @click="clear"
+      >
+        {{ t('inspector.validationChecks.clear') }}
+      </UButton>
+    </template>
+
+    <div class="space-y-2">
+      <p class="text-[11px] text-slate-500">
+        {{ t('inspector.validationChecks.hint') }}
+      </p>
+
+      <div
+        v-for="(row, index) in rows"
+        :key="index"
+        class="flex items-end gap-2"
+        data-testid="validation-check-row"
+      >
+        <UFormField :label="t('inspector.validationChecks.label')" class="w-1/3">
+          <UInput
+            v-model="row.label"
+            :placeholder="t('inspector.validationChecks.labelPlaceholder')"
+            size="sm"
+            class="w-full"
+            data-testid="validation-check-label"
+          />
+        </UFormField>
+        <UFormField :label="t('inspector.validationChecks.command')" class="flex-1">
+          <UInput
+            v-model="row.command"
+            placeholder="pnpm lint"
+            size="sm"
+            class="w-full"
+            data-testid="validation-check-command"
+          />
+        </UFormField>
+        <UButton
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          icon="i-lucide-x"
+          :aria-label="t('inspector.validationChecks.removeCheck')"
+          data-testid="validation-check-remove"
+          @click="removeRow(index)"
+        />
+      </div>
+
+      <p v-if="rows.length === 0" class="text-[11px] text-slate-500" data-testid="validation-empty">
+        {{ t('inspector.validationChecks.empty') }}
+      </p>
+
+      <div class="flex items-end justify-between gap-2">
+        <UFormField
+          :label="t('inspector.validationChecks.maxAttempts')"
+          :hint="t('inspector.validationChecks.maxAttemptsHint')"
+          class="w-40"
+        >
+          <UInput
+            v-model.number="maxAttempts"
+            type="number"
+            :min="1"
+            :max="VALIDATION_MAX_ATTEMPTS_CEILING"
+            size="sm"
+            class="w-full"
+            data-testid="validation-max-attempts"
+          />
+        </UFormField>
+        <div class="flex gap-2">
+          <UButton
+            color="neutral"
+            variant="soft"
+            size="xs"
+            icon="i-lucide-plus"
+            :disabled="!canAdd"
+            data-testid="validation-add-check"
+            @click="addRow"
+          >
+            {{ t('inspector.validationChecks.addCheck') }}
+          </UButton>
+          <UButton
+            color="primary"
+            variant="soft"
+            size="xs"
+            icon="i-lucide-save"
+            :loading="busy"
+            data-testid="validation-save"
+            @click="save"
+          >
+            {{ t('inspector.validationChecks.save') }}
+          </UButton>
+        </div>
+      </div>
+    </div>
+  </InspectorSection>
+</template>