@cat-factory/app 0.296.6 → 0.297.0

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

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type {
+  EnvironmentProbeFailure,
+  EnvironmentProbeReport,
+  EnvironmentProbeVerdict,
+} from '@cat-factory/contracts'
+
+// What the AGENT DRY RUN found, as the inspector renders it.
+//
+// The order is deliberate and is the order a developer acts in: the VERDICT (can an agent work
+// here at all), then what the platform failed to tell the agent (the thing to go and fix), then
+// the operations as evidence, then the agent's own prose last. `missingContext` sits above the
+// operation list rather than below it because it is the product of the diagnostic: an operator who
+// reads only the first two lines has read the actionable part.
+const props = defineProps<{ report: EnvironmentProbeReport }>()
+
+const { t, te } = useI18n()
+
+/**
+ * Per-verdict label keys, exhaustive over the contracts union: a new verdict fails THIS
+ * typecheck until it has copy. (The lookup is dynamic, so the typed-message-keys check cannot see
+ * it; the map's exhaustiveness is the drift guard, as with the stage keys.)
+ */
+const VERDICT_KEYS: Record<EnvironmentProbeVerdict, string> = {
+  operable: 'inspector.testConfig.envProbe.verdict.operable',
+  partially_operable: 'inspector.testConfig.envProbe.verdict.partially_operable',
+  inoperable: 'inspector.testConfig.envProbe.verdict.inoperable',
+}
+
+const VERDICT_CLASS: Record<EnvironmentProbeVerdict, string> = {
+  operable: 'text-emerald-300/90',
+  // Amber, not rose: the LIFECYCLE succeeded and the finding is partial. Colouring it as a
+  // failure would make it read as the run breaking rather than as the diagnostic working.
+  partially_operable: 'text-amber-300/90',
+  inoperable: 'text-rose-300/90',
+}
+
+/**
+ * Per-failure-kind labels, exhaustive over the contracts vocabulary. Rendered through a `te`
+ * guard: the kinds are a CLOSED and PERSISTED vocabulary, so a report stored before a member was
+ * renamed must still render honestly (the raw value) rather than as an empty span.
+ */
+const FAILURE_KEYS: Record<EnvironmentProbeFailure, string> = {
+  auth_missing: 'inspector.testConfig.envProbe.failure.auth_missing',
+  auth_rejected: 'inspector.testConfig.envProbe.failure.auth_rejected',
+  access_unclear: 'inspector.testConfig.envProbe.failure.access_unclear',
+  endpoint_unknown: 'inspector.testConfig.envProbe.failure.endpoint_unknown',
+  unreachable: 'inspector.testConfig.envProbe.failure.unreachable',
+  timeout: 'inspector.testConfig.envProbe.failure.timeout',
+  server_error: 'inspector.testConfig.envProbe.failure.server_error',
+  bad_request: 'inspector.testConfig.envProbe.failure.bad_request',
+  tooling_missing: 'inspector.testConfig.envProbe.failure.tooling_missing',
+  other: 'inspector.testConfig.envProbe.failure.other',
+}
+
+function failureLabel(kind: EnvironmentProbeFailure): string {
+  const key = FAILURE_KEYS[kind]
+  return key && te(key) ? t(key) : kind
+}
+
+const verdictLabel = computed(() => {
+  const key = VERDICT_KEYS[props.report.verdict]
+  return key && te(key) ? t(key) : props.report.verdict
+})
+
+const verdictClass = computed(() => VERDICT_CLASS[props.report.verdict] ?? 'text-slate-300')
+
+/** The icon per operation outcome. `not_attempted` is its own mark, never a failure's. */
+function outcomeIcon(outcome: EnvironmentProbeReport['operations'][number]['outcome']): string {
+  if (outcome === 'succeeded') return 'i-lucide-check'
+  if (outcome === 'failed') return 'i-lucide-x'
+  return 'i-lucide-minus'
+}
+
+function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['outcome']): string {
+  if (outcome === 'succeeded') return 'text-emerald-400'
+  if (outcome === 'failed') return 'text-rose-400'
+  return 'text-slate-500'
+}
+</script>
+
+<template>
+  <div
+    class="space-y-2 rounded border border-white/5 bg-white/[0.02] p-2"
+    data-testid="env-probe-report"
+  >
+    <p class="text-[11px] font-medium" :class="verdictClass" data-testid="env-probe-verdict">
+      {{ verdictLabel }}
+    </p>
+
+    <!-- The tallies the PLATFORM computed from the agent's per-operation judgements, including
+         how many successes were behind authentication: the count the verdict turns on. -->
+    <p class="text-[11px] text-slate-400">
+      {{
+        t('inspector.testConfig.envProbe.counts', {
+          succeeded: report.succeeded,
+          attempted: report.attempted,
+          authenticated: report.authenticatedSucceeded,
+        })
+      }}
+    </p>
+
+    <!-- What the platform did not tell the agent: the actionable half of the report, so it comes
+         before the evidence. -->
+    <div v-if="report.missingContext.length" data-testid="env-probe-missing">
+      <p class="text-[11px] font-medium text-amber-300/90">
+        {{ t('inspector.testConfig.envProbe.missingContext') }}
+      </p>
+      <ul class="mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-slate-300">
+        <li v-for="(line, i) in report.missingContext" :key="i">{{ line }}</li>
+      </ul>
+    </div>
+
+    <div v-if="report.blockers.length" data-testid="env-probe-blockers">
+      <p class="text-[11px] font-medium text-rose-300/90">
+        {{ t('inspector.testConfig.envProbe.blockers') }}
+      </p>
+      <ul class="mt-0.5 space-y-0.5 text-[11px] text-slate-300">
+        <li v-for="(blocker, i) in report.blockers" :key="i">
+          <span class="text-slate-400">{{ failureLabel(blocker.kind) }}:</span>
+          {{ blocker.detail }}
+        </li>
+      </ul>
+    </div>
+
+    <!-- The operations, as evidence for the verdict above. This is the "what was attempted" a dry
+         run exists to report: without it a verdict is an opinion. -->
+    <div v-if="report.operations.length" data-testid="env-probe-operations">
+      <p class="text-[11px] font-medium text-slate-300">
+        {{ t('inspector.testConfig.envProbe.operations') }}
+      </p>
+      <ul class="mt-0.5 space-y-1 text-[11px]">
+        <li v-for="(op, i) in report.operations" :key="i" class="flex items-start gap-1.5">
+          <UIcon
+            :name="outcomeIcon(op.outcome)"
+            class="mt-0.5 size-3 shrink-0"
+            :class="outcomeClass(op.outcome)"
+          />
+          <span class="min-w-0">
+            <span class="text-slate-200">{{ op.name }}</span>
+            <span v-if="op.authenticated" class="ml-1 text-slate-500">
+              {{ t('inspector.testConfig.envProbe.authenticated') }}
+            </span>
+            <span v-if="op.target" class="ml-1 font-mono text-slate-500">{{ op.target }}</span>
+            <span v-if="op.failure" class="block text-rose-300/70">
+              {{ failureLabel(op.failure) }}<template v-if="op.detail">: {{ op.detail }}</template>
+            </span>
+            <span v-else-if="op.detail" class="block text-slate-400">{{ op.detail }}</span>
+          </span>
+        </li>
+      </ul>
+      <!-- Every cap records what it dropped: a reader must never take a truncated list for the
+           whole attempt. The two ways an operation fails to reach the list are rendered SEPARATELY
+           because they send a reader somewhere different: one says the agent reported more than is
+           shown, the other says its reply was malformed. -->
+      <p v-if="report.operationsOmitted" class="mt-1 text-[11px] text-slate-500">
+        {{
+          t('inspector.testConfig.envProbe.operationsOmitted', { count: report.operationsOmitted })
+        }}
+      </p>
+      <p v-if="report.operationsUnreadable" class="mt-1 text-[11px] text-slate-500">
+        {{
+          t('inspector.testConfig.envProbe.operationsUnreadable', {
+            count: report.operationsUnreadable,
+          })
+        }}
+      </p>
+    </div>
+
+    <p v-if="report.summary" class="text-[11px] text-slate-400">{{ report.summary }}</p>
+    <p v-if="report.model" class="text-[11px] text-slate-600">
+      {{ t('inspector.testConfig.envProbe.model', { model: report.model }) }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { Block, EnvironmentTestMode, EnvironmentTestStage } from '~/types/domain'
+import type { ConflictReason } from '@cat-factory/contracts'
+import { environmentProbeSurfaceFor } from '@cat-factory/contracts'
+import EnvProbeReport from '~/components/panels/inspector/EnvProbeReport.vue'
+import { apiErrorEnvelope } from '~/composables/api/errors'
+import { parseConflict } from '~/composables/usePipelineErrorToast'
+
+// The two SELF-TESTS a service frame offers, side by side, because they answer consecutive
+// questions about the same environment:
+//
+//   1. "Test environment creation": does the provisioning config stand an environment up and
+//      take it down again? (create branch → provision → tear down → delete branch)
+//   2. "Test agent dry run": handed that environment, could an AGENT actually operate the
+//      service: work out what to call, authenticate, and get something real done? It adds one
+//      `probing` stage in the middle and comes back with a report.
+//
+// One component rather than two because they share every piece of state and every refusal: the
+// same store, the same `infraless` precondition, the same 409 vocabulary, the same
+// jump-to-the-handler remedy. Extracted out of `ServiceTestConfig.vue`, which owns the service's
+// provisioning CONFIG and was the wrong home for a pair of run controls.
+const props = defineProps<{ block: Block }>()
+
+const envTest = useEnvironmentTestStore()
+const ui = useUiStore()
+const { t, te } = useI18n()
+
+/** Nothing to provision for an `infraless` service, so neither self-test has a subject. */
+const canTest = computed(() => (props.block.provisioning?.type ?? 'infraless') !== 'infraless')
+
+/**
+ * Which prober the dry run would use, through the SAME rule the backend picks it with. Rendered
+ * in the hint so a developer knows what they are about to spend a container on: a browser run on
+ * a frontend frame, HTTP calls on everything else.
+ */
+const probeSurface = computed(() => environmentProbeSurfaceFor(props.block.type))
+
+/**
+ * The self-test's start/stop error, per mode. Structured (not a bare string) so the
+ * not-provisionable case can render its remedy prose PLUS a one-click jump to the
+ * environment-handler config; every other case is plain text.
+ */
+interface SelfTestError {
+  text: string
+  /** Show the "Configure infrastructure" deep-link: only the not-provisionable handler case. */
+  configurable?: boolean
+}
+const errors = ref<Partial<Record<EnvironmentTestMode, SelfTestError>>>({})
+const starting = ref<Partial<Record<EnvironmentTestMode, boolean>>>({})
+
+/**
+ * The newest run for this frame in one mode: re-attaches after a reconnect (running runs are
+ * carried in the snapshot), so the live stage keeps showing without a locally-held id. Scoped by
+ * mode so each control reports its OWN run rather than whichever ran last.
+ */
+const provisionRun = computed(() => envTest.runForBlock(props.block.id, 'provision'))
+const probeRun = computed(() => envTest.runForBlock(props.block.id, 'agent-probe'))
+function runFor(mode: EnvironmentTestMode) {
+  return mode === 'agent-probe' ? probeRun.value : provisionRun.value
+}
+function isRunning(mode: EnvironmentTestMode) {
+  return runFor(mode)?.status === 'running'
+}
+
+/**
+ * Whether EITHER self-test is in flight for this frame, which disables both start buttons.
+ *
+ * Per FRAME, not per mode: each run provisions its own ephemeral environment under a synthetic
+ * per-run key that nothing supersedes, so two at once is two live environments for one service,
+ * billed twice and racing each other to create on any provider whose namespace is derived per
+ * service rather than per branch. The backend refuses the second outright
+ * (`env_test_already_running`); this is the affordance that keeps a developer from meeting that
+ * refusal by pressing the obvious thing.
+ */
+const busy = computed(() => isRunning('provision') || isRunning('agent-probe'))
+
+/**
+ * The prober's live todo counts, rendered while the dry run is probing.
+ *
+ * `probing` is the one stage of this run measured in minutes, so it is the one where a bare
+ * "probing with an agent" is indistinguishable from a wedged run for as long as the container
+ * works.
+ */
+const probeProgress = computed(() => {
+  const run = probeRun.value
+  if (!run || run.status !== 'running' || run.stage !== 'probing') return null
+  return run.probeProgress
+})
+
+// Per-stage label KEYS, exhaustive over the contracts `EnvironmentTestStage` union: a new
+// backend stage fails THIS typecheck until mapped (the key is resolved at runtime, so the
+// typed-message-keys check can't see the `t()` lookup: the map's exhaustiveness is the
+// drift guard, same pattern as `CONFLICT_TITLE_KEYS`).
+const STAGE_KEYS: Record<EnvironmentTestStage, string> = {
+  creating_branch: 'inspector.testConfig.envTest.stage.creating_branch',
+  provisioning: 'inspector.testConfig.envTest.stage.provisioning',
+  probing: 'inspector.testConfig.envTest.stage.probing',
+  tearing_down: 'inspector.testConfig.envTest.stage.tearing_down',
+  deleting_branch: 'inspector.testConfig.envTest.stage.deleting_branch',
+  done: 'inspector.testConfig.envTest.stage.done',
+}
+
+function stageLabel(stage: EnvironmentTestStage): string {
+  const key = STAGE_KEYS[stage]
+  // `te`-guarded so a locale missing the key shows the raw stage id, never a raw message key.
+  return te(key) ? t(key) : stage
+}
+
+// The start preflight's machine-readable 409 reasons, mapped to their localized titles,
+// exhaustive over the contracts `env_test_*` conflict reasons (same drift guard as above).
+// The raw backend `message` is only the last-resort fallback for unmapped/non-conflict errors.
+const CONFLICT_KEYS: Record<Extract<ConflictReason, `env_test_${string}`>, string> = {
+  env_test_not_a_frame: 'errors.conflict.title.env_test_not_a_frame',
+  env_test_infraless: 'errors.conflict.title.env_test_infraless',
+  env_test_not_provisionable: 'errors.conflict.title.env_test_not_provisionable',
+  env_test_no_vcs: 'errors.conflict.title.env_test_no_vcs',
+  env_test_connection_failed: 'errors.conflict.title.env_test_connection_failed',
+  env_test_probe_unavailable: 'errors.conflict.title.env_test_probe_unavailable',
+  env_test_already_running: 'errors.conflict.title.env_test_already_running',
+  env_test_over_budget: 'errors.conflict.title.env_test_over_budget',
+}
+
+function buildError(e: unknown): SelfTestError {
+  const parsed = parseConflict(e)
+  const reason = parsed?.reason
+  // No workspace handler resolves for the service's provision type. Word the SPECIFIC case,
+  // nothing configured vs. an ambiguous match (carried on `details.handlerIssue`, distinct from the
+  // `env_test_not_provisionable` code), and offer the one-click jump to the Infrastructure →
+  // Test-environments handler config.
+  if (reason === 'env_test_not_provisionable') {
+    const ambiguous = parsed?.details.handlerIssue === 'type-mismatch'
+    return {
+      text: t(
+        ambiguous
+          ? 'errors.conflict.description.env_test_not_provisionable_type_mismatch'
+          : 'errors.conflict.description.env_test_not_provisionable_no_handler',
+      ),
+      configurable: true,
+    }
+  }
+  // The handler resolved but its live connection probe failed. The provider's OWN message is the
+  // actionable part ("project 'X' was not found"), so wrap it in localized prose rather than
+  // replacing it with a generic sentence, and offer the same jump, since the fix is in the
+  // handler's connection config.
+  if (reason === 'env_test_connection_failed' && parsed?.message) {
+    return {
+      text: t('errors.conflict.description.env_test_connection_failed_detail', {
+        detail: parsed.message,
+      }),
+      configurable: true,
+    }
+  }
+  const key =
+    reason && reason in CONFLICT_KEYS
+      ? CONFLICT_KEYS[reason as keyof typeof CONFLICT_KEYS]
+      : undefined
+  if (key && te(key)) return { text: t(key) }
+  return { text: apiErrorEnvelope(e)?.message ?? (e instanceof Error ? e.message : String(e)) }
+}
+
+async function start(mode: EnvironmentTestMode) {
+  if (!canTest.value || starting.value[mode] || busy.value) return
+  starting.value = { ...starting.value, [mode]: true }
+  errors.value = { ...errors.value, [mode]: undefined }
+  try {
+    await envTest.start(props.block.id, mode)
+  } catch (e) {
+    errors.value = { ...errors.value, [mode]: buildError(e) }
+  } finally {
+    starting.value = { ...starting.value, [mode]: false }
+  }
+}
+
+async function stop(mode: EnvironmentTestMode) {
+  const run = runFor(mode)
+  if (!run || run.status !== 'running') return
+  try {
+    await envTest.stop(run.id)
+  } catch (e) {
+    errors.value = { ...errors.value, [mode]: buildError(e) }
+  }
+}
+</script>
+
+<template>
+  <div class="mt-3 space-y-3 border-t border-white/5 pt-3" data-testid="env-test-section">
+    <!-- The precondition both self-tests share, stated once at the top: with no provision type
+         there is no environment to stand up and therefore nothing for an agent to drive either. -->
+    <p v-if="!canTest" class="text-[11px] text-slate-500">
+      {{ t('inspector.testConfig.envTest.infraless') }}
+    </p>
+
+    <!-- 1. The provisioning self-test: the whole lifecycle against a throwaway branch. -->
+    <div class="flex items-center justify-between gap-2">
+      <div class="min-w-0">
+        <p class="text-[11px] font-medium text-slate-300">
+          {{ t('inspector.testConfig.envTest.title') }}
+        </p>
+        <p class="text-[11px] text-slate-400">{{ t('inspector.testConfig.envTest.hint') }}</p>
+      </div>
+      <UButton
+        v-if="!isRunning('provision')"
+        icon="i-lucide-flask-conical"
+        size="xs"
+        color="primary"
+        variant="soft"
+        data-testid="env-test-start"
+        :loading="starting.provision"
+        :disabled="!canTest || busy"
+        @click="start('provision')"
+      >
+        {{ t('inspector.testConfig.envTest.start') }}
+      </UButton>
+      <UButton
+        v-else
+        icon="i-lucide-square"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        data-testid="env-test-stop"
+        @click="stop('provision')"
+      >
+        {{ t('inspector.testConfig.envTest.stop') }}
+      </UButton>
+    </div>
+
+    <p
+      v-if="provisionRun"
+      class="text-[11px]"
+      :class="{
+        'text-sky-300/80': provisionRun.status === 'running',
+        'text-emerald-300/80': provisionRun.status === 'succeeded',
+        'text-rose-300/80': provisionRun.status === 'failed',
+      }"
+      data-testid="env-test-status"
+    >
+      <template v-if="provisionRun.status === 'running'">
+        {{ t('inspector.testConfig.envTest.running', { stage: stageLabel(provisionRun.stage) }) }}
+      </template>
+      <template v-else-if="provisionRun.status === 'succeeded'">
+        {{ t('inspector.testConfig.envTest.succeeded') }}
+      </template>
+      <template v-else>
+        {{ t('inspector.testConfig.envTest.failed') }}
+        <template v-if="provisionRun.failedStage">
+          ({{ stageLabel(provisionRun.failedStage) }})
+        </template>
+        <span v-if="provisionRun.error" class="block text-rose-300/70">
+          {{ provisionRun.error }}
+        </span>
+      </template>
+    </p>
+
+    <div v-if="errors.provision" class="text-[11px] text-rose-400" data-testid="env-test-error">
+      <p>{{ errors.provision.text }}</p>
+      <!-- Only the not-provisionable handler case is one-click fixable: jump to Infrastructure →
+           Test environments, where the workspace's per-type environment handler is registered. -->
+      <UButton
+        v-if="errors.provision.configurable"
+        class="mt-1.5"
+        icon="i-lucide-settings"
+        size="xs"
+        color="neutral"
+        variant="soft"
+        data-testid="env-test-configure-handler"
+        @click="ui.openProviderConnection('environment')"
+      >
+        {{ t('errors.conflict.action.configureInfrastructure') }}
+      </UButton>
+    </div>
+
+    <!-- 2. The agent dry run: the same lifecycle plus a prober, reporting what an agent could
+         and could not do with the environment it was handed. -->
+    <div class="flex items-center justify-between gap-2 border-t border-white/5 pt-3">
+      <div class="min-w-0">
+        <p class="text-[11px] font-medium text-slate-300">
+          {{ t('inspector.testConfig.envProbe.title') }}
+        </p>
+        <p class="text-[11px] text-slate-400">
+          {{ t('inspector.testConfig.envProbe.hint') }}
+          {{
+            probeSurface === 'ui'
+              ? t('inspector.testConfig.envProbe.surfaceUi')
+              : t('inspector.testConfig.envProbe.surfaceApi')
+          }}
+        </p>
+      </div>
+      <UButton
+        v-if="!isRunning('agent-probe')"
+        icon="i-lucide-bot"
+        size="xs"
+        color="primary"
+        variant="soft"
+        data-testid="env-probe-start"
+        :loading="starting['agent-probe']"
+        :disabled="!canTest || busy"
+        @click="start('agent-probe')"
+      >
+        {{ t('inspector.testConfig.envProbe.start') }}
+      </UButton>
+      <UButton
+        v-else
+        icon="i-lucide-square"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        data-testid="env-probe-stop"
+        @click="stop('agent-probe')"
+      >
+        {{ t('inspector.testConfig.envTest.stop') }}
+      </UButton>
+    </div>
+
+    <p
+      v-if="probeRun"
+      class="text-[11px]"
+      :class="{
+        'text-sky-300/80': probeRun.status === 'running',
+        'text-emerald-300/80': probeRun.status === 'succeeded',
+        'text-rose-300/80': probeRun.status === 'failed',
+      }"
+      data-testid="env-probe-status"
+    >
+      <template v-if="probeRun.status === 'running'">
+        {{ t('inspector.testConfig.envTest.running', { stage: stageLabel(probeRun.stage) }) }}
+        <template v-if="probeProgress">
+          {{
+            t('inspector.testConfig.envProbe.progress', {
+              completed: probeProgress.completed,
+              total: probeProgress.total,
+            })
+          }}
+        </template>
+      </template>
+      <template v-else-if="probeRun.status === 'succeeded'">
+        {{ t('inspector.testConfig.envProbe.completed') }}
+      </template>
+      <template v-else>
+        {{ t('inspector.testConfig.envProbe.failed') }}
+        <template v-if="probeRun.failedStage">({{ stageLabel(probeRun.failedStage) }})</template>
+        <span v-if="probeRun.error" class="block text-rose-300/70">{{ probeRun.error }}</span>
+      </template>
+    </p>
+
+    <!-- The report renders whatever the dry run got as far as, on a succeeded run AND on one that
+         failed after the probe reported: the finding is the product, and withholding it because a
+         later stage broke would hide the only thing the run was for. -->
+    <EnvProbeReport v-if="probeRun?.probe" :report="probeRun.probe" />
+
+    <div
+      v-if="errors['agent-probe']"
+      class="text-[11px] text-rose-400"
+      data-testid="env-probe-error"
+    >
+      <p>{{ errors['agent-probe']!.text }}</p>
+      <UButton
+        v-if="errors['agent-probe']!.configurable"
+        class="mt-1.5"
+        icon="i-lucide-settings"
+        size="xs"
+        color="neutral"
+        variant="soft"
+        data-testid="env-probe-configure-handler"
+        @click="ui.openProviderConnection('environment')"
+      >
+        {{ t('errors.conflict.action.configureInfrastructure') }}
+      </UButton>
+    </div>
+  </div>
+</template>