@artisan-cloud/plugin-framework-admin 0.0.11 → 0.0.13

package/layer/app/components/powerx/PXRegressionRunDetail.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useI18n } from '#imports';
+import type { AssertionResult, CaseDefinition, CaseExecution, Evidence, FixtureResource, RunDetail } from '@artisan-cloud/plugin-framework-client';
+import type { RegressionCasePresentation } from '../../types/regression';
+import { regressionComparison } from '../../composables/regressionComparison';
+
+const props = defineProps<{
+  detail: RunDetail; canInvoke: boolean; canManage: boolean; busy: boolean; disconnected: boolean;
+  describeCase: (definition: CaseDefinition) => RegressionCasePresentation | undefined;
+}>();
+const emit = defineEmits<{ back: []; cancel: []; cleanup: []; rerun: []; report: []; reconnect: [] }>();
+const { t, locale } = useI18n();
+type Section = 'overview' | 'checks' | 'resources' | 'diagnostics';
+const section = ref<Section>('overview');
+const selectedCase = ref('');
+const comparisonId = ref('');
+const comparisonOpen = ref(false);
+const evidenceOpen = ref(false);
+const viewedEvidence = ref<Evidence[]>([]);
+const technicalOpen = ref(false);
+const heading = ref<HTMLElement | null>(null);
+defineExpose({ focus: () => heading.value?.focus() });
+const status = (value: string) => t('regression.states.' + value);
+const color = (value: string) => value === 'passed' || value === 'succeeded' ? 'success' : value === 'failed' ? 'error' : value === 'blocked' ? 'warning' : 'neutral';
+const assertions = (result: CaseExecution) => result.steps.flatMap(step => step.assertions);
+const current = computed(() => props.detail.case_executions.find(item => item.uuid === selectedCase.value));
+const currentChecks = computed(() => current.value ? assertions(current.value) : []);
+const selectedAssertion = computed(() => currentChecks.value.find(item => item.uuid === comparisonId.value));
+const active = computed(() => ['queued', 'running', 'cancelling'].includes(props.detail.run.phase));
+const headline = computed(() => t('regression.results.headlines.' + (props.detail.run.phase === 'completed' ? props.detail.run.verdict : props.detail.run.phase)));
+const allChecks = computed(() => props.detail.case_executions.flatMap(assertions));
+const requiredCount = computed(() => props.detail.case_executions.reduce((total, result) => total + result.definition_snapshot.required_assertion_keys.length, 0));
+const passedChecks = computed(() => allChecks.value.filter(item => item.required && item.status === 'passed').length);
+const allResources = computed(() => props.detail.case_executions.flatMap(item => item.fixture_resources));
+const cleanCount = computed(() => allResources.value.filter(item => item.cleanup_state === 'succeeded').length);
+const counts = computed(() => ['passed', 'failed', 'blocked', 'pending'].map(verdict => ({ verdict, count: props.detail.case_executions.filter(item => item.verdict === verdict).length })).filter(item => item.count));
+const rerunnable = computed(() => !active.value && props.detail.case_executions.some(item => item.verdict !== 'passed' && item.verdict !== 'pending'));
+const firstFailure = computed(() => {
+  if (['cancelling', 'cancelled'].includes(props.detail.run.phase)) return undefined;
+  for (const result of props.detail.case_executions) {
+    const step = result.steps.find(item => item.status === 'failed' || item.status === 'blocked');
+    if (step) return { result, step, assertion: step.assertions.find(item => item.status === 'failed' || item.status === 'blocked') };
+    if (result.missing_assertion_keys.length) return { result, step: undefined, assertion: undefined };
+  }
+});
+const failureLocation = computed(() => firstFailure.value ? firstFailure.value.step ? t('regression.results.failureLocation', { name: t(firstFailure.value.result.definition_snapshot.title_key), step: t(firstFailure.value.step.title_key) }) : t('regression.errors.REGRESSION_ASSERTION_MISSING') : '');
+const sectionItems = computed(() => [
+  { label: t('regression.resultSections.overview'), value: 'overview', icon: 'i-heroicons-chart-bar-square' },
+  { label: t('regression.resultSections.checks'), value: 'checks', icon: 'i-heroicons-clipboard-document-check' },
+  { label: t('regression.resultSections.resources'), value: 'resources', icon: 'i-heroicons-circle-stack' },
+  { label: t('regression.resultSections.diagnostics'), value: 'diagnostics', icon: 'i-heroicons-command-line' },
+]);
+const caseItems = computed(() => props.detail.case_executions.map(item => ({ value: item.uuid, label: t(item.definition_snapshot.title_key) })));
+const resourceGaps = computed(() => current.value?.fixture_resources.some(item => !item.display_name?.trim() || !item.role_key || item.cleanup_state === 'succeeded' && !item.cleanup_evidence?.length));
+const missingChecks = computed(() => props.detail.case_executions.some(item => item.missing_assertion_keys.length));
+watch(() => props.detail.run.uuid, () => { section.value = 'overview'; selectedCase.value = ''; comparisonId.value = ''; comparisonOpen.value = false; evidenceOpen.value = false; technicalOpen.value = false; }, { immediate: true });
+watch(() => props.detail.case_executions.map(item => item.uuid), ids => { if (!ids.includes(selectedCase.value)) selectedCase.value = props.detail.case_executions.find(item => item.verdict === 'failed' || item.verdict === 'blocked')?.uuid || ids[0] || ''; }, { immediate: true });
+function comparison(assertion: AssertionResult) {
+  if (!current.value) return null;
+  return regressionComparison(assertion, props.describeCase(current.value.definition_snapshot)?.results?.[assertion.key], t);
+}
+const comparedRows = computed(() => selectedAssertion.value ? comparison(selectedAssertion.value) : null);
+function inspect(result: CaseExecution) { selectedCase.value = result.uuid; section.value = 'checks'; }
+function inspectCleanup() {
+  const result = props.detail.case_executions.find(item => item.cleanup_state === 'failed');
+  if (result) selectedCase.value = result.uuid;
+  section.value = 'resources';
+}
+function openComparison(assertion: AssertionResult) { comparisonId.value = assertion.uuid; comparisonOpen.value = true; }
+function locateFailure() {
+  if (!firstFailure.value) return;
+  selectedCase.value = firstFailure.value.result.uuid;
+  section.value = firstFailure.value.assertion ? 'checks' : 'diagnostics';
+  if (firstFailure.value.assertion) openComparison(firstFailure.value.assertion);
+}
+function showEvidence(evidence: Evidence[]) { viewedEvidence.value = evidence; evidenceOpen.value = true; }
+function blurActive() { if (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement) document.activeElement.blur(); }
+function closeOverlays() { blurActive(); comparisonOpen.value = false; evidenceOpen.value = false; technicalOpen.value = false; }
+function formatTime(value: string | null | undefined) {
+  return value ? new Intl.DateTimeFormat(locale.value, { dateStyle: 'short', timeStyle: 'medium' }).format(new Date(value)) : t('regression.states.unrecorded');
+}
+function duration(record: { started_at: string | null; finished_at: string | null }) {
+  return record.started_at && record.finished_at ? t('regression.timing.milliseconds', { value: Date.parse(record.finished_at) - Date.parse(record.started_at) }) : t('regression.timing.incomplete');
+}
+function progress(result: CaseExecution) { return t('regression.resultValues.ratio', { passed: assertions(result).filter(item => item.required && item.status === 'passed').length, total: result.definition_snapshot.required_assertion_keys.length }); }
+function source(key: string) { const value = props.detail.run.source_snapshot[key]; return typeof value === 'string' && value.trim() ? value : t('regression.states.unrecorded'); }
+function parentName(resource: FixtureResource) {
+  if (!resource.parent_resource_uuid) return t('regression.resultValues.noParent');
+  return current.value?.fixture_resources.find(item => item.resource_uuid === resource.parent_resource_uuid)?.display_name?.trim() || t('regression.states.unrecorded');
+}
+function stepName(assertion: AssertionResult) { return current.value?.steps.find(item => item.assertions.some(check => check.uuid === assertion.uuid))?.title_key; }
+</script>
+
+<template>
+  <section class="min-w-0 space-y-4" data-testid="regression-detail" :data-run-uuid="detail.run.uuid">
+    <UButton color="neutral" variant="link" icon="i-heroicons-arrow-left" :label="t('regression.actions.backToRuns')" class="px-0" @click="emit('back')" />
+    <header class="rounded-xl border border-default bg-elevated/30 p-4 sm:p-5 space-y-4">
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div class="min-w-0"><h2 ref="heading" tabindex="-1" class="text-xl font-semibold text-highlighted outline-none">{{ headline }}</h2><p class="mt-1 text-sm text-muted">{{ formatTime(detail.run.created_at) }} · {{ t(detail.run.profile_snapshot.title_key) }}</p></div>
+        <div class="flex flex-wrap gap-2">
+          <UButton v-if="canManage && active" color="neutral" variant="outline" :label="t('regression.actions.cancel')" @click="emit('cancel')" />
+          <UButton v-if="canInvoke && rerunnable" :disabled="busy" :label="t('regression.actions.rerun')" @click="emit('rerun')" />
+          <UButton color="neutral" variant="outline" icon="i-heroicons-arrow-down-tray" :label="t('regression.actions.report')" @click="emit('report')" />
+        </div>
+      </div>
+      <span class="sr-only" data-testid="regression-verdict">{{ status(detail.run.verdict) }}</span>
+      <dl class="grid grid-cols-2 gap-3 xl:grid-cols-4 text-sm">
+        <div data-testid="regression-result-counts"><dt class="text-muted">{{ t('regression.resultLabels.cases') }}</dt><dd class="mt-1 font-medium text-highlighted">{{ t('regression.results.total', { count: detail.case_executions.length }) }}</dd><dd class="mt-1 text-xs text-muted"><span v-for="item in counts" :key="item.verdict" class="mr-2">{{ t('regression.results.count', { status: status(item.verdict), count: item.count }) }}</span></dd></div>
+        <div><dt class="text-muted">{{ t('regression.resultLabels.checks') }}</dt><dd class="mt-1 text-lg font-semibold text-highlighted" data-testid="regression-required-count">{{ t('regression.resultValues.ratio', { passed: passedChecks, total: requiredCount }) }}</dd></div>
+        <div><dt class="text-muted">{{ t('regression.fields.duration') }}</dt><dd class="mt-1 font-medium text-highlighted">{{ duration(detail.run) }}</dd></div>
+        <div data-testid="regression-cleanup"><dt class="text-muted">{{ t('regression.fields.cleanup') }}</dt><dd class="mt-1 font-medium" :class="detail.run.cleanup_state === 'failed' ? 'text-error' : 'text-highlighted'">{{ status(detail.run.cleanup_state) }}</dd><dd class="mt-1 text-xs text-muted">{{ t('regression.resultLabels.resourcesCleaned', { passed: cleanCount, total: allResources.length }) }}</dd></div>
+      </dl>
+    </header>
+    <UAlert v-if="failureLocation" color="error" variant="subtle" :title="failureLocation" data-testid="regression-failure-location"><template #actions><UButton color="error" variant="outline" :label="t('regression.resultActions.locateFailure')" @click="locateFailure" /></template></UAlert>
+    <UAlert v-if="missingChecks && !failureLocation" color="error" :title="t('regression.errors.REGRESSION_ASSERTION_MISSING')" />
+    <UAlert v-if="detail.run.reason_code" :color="detail.run.phase === 'cancelled' ? 'neutral' : 'error'" :title="t('regression.errors.' + detail.run.reason_code)" />
+    <UAlert v-if="detail.run.cleanup_state === 'failed'" color="error" :title="t('regression.errors.REGRESSION_CLEANUP_FAILED')"><template #actions><UButton v-if="canManage" color="error" :label="t('regression.actions.cleanup')" @click="emit('cleanup')" /><UButton color="neutral" variant="outline" :label="t('regression.resultActions.inspectResources')" @click="inspectCleanup" /></template></UAlert>
+    <UAlert v-if="disconnected" color="warning" :title="t('regression.errors.REGRESSION_STREAM_INTERRUPTED')"><template #actions><UButton :label="t('regression.actions.reconnect')" @click="emit('reconnect')" /></template></UAlert>
+
+    <div class="min-w-0 lg:grid lg:grid-cols-[190px_minmax(0,1fr)] lg:gap-6" data-testid="regression-result-layout">
+      <nav class="hidden lg:block" :aria-label="t('regression.resultLabels.sections')" data-testid="regression-result-nav-desktop">
+        <UTabs v-model="section" :items="sectionItems" orientation="vertical" :content="false" variant="pill" :ui="{ list: 'w-full', trigger: 'justify-start' }" />
+      </nav>
+      <nav class="mb-4 overflow-x-auto lg:hidden" :aria-label="t('regression.resultLabels.sections')" data-testid="regression-result-nav-mobile">
+        <UTabs v-model="section" :items="sectionItems" :content="false" variant="link" :ui="{ list: 'w-max min-w-full', trigger: 'shrink-0' }" />
+      </nav>
+      <div class="min-w-0 rounded-xl border border-default p-4 sm:p-5 space-y-5" data-testid="regression-result-content">
+        <template v-if="section === 'overview'">
+          <div><h3 class="text-lg font-semibold text-highlighted">{{ t('regression.resultSections.overview') }}</h3><p class="mt-1 text-sm text-muted">{{ t('regression.resultHelp.overview') }}</p></div>
+          <div class="divide-y divide-default" data-testid="regression-case-results">
+            <article v-for="result in detail.case_executions" :key="result.uuid" class="grid grid-cols-2 gap-3 py-4 md:grid-cols-[minmax(0,2fr)_auto_auto_auto] md:items-center" :data-testid="'regression-case-result-' + result.definition_snapshot.key">
+              <div class="col-span-2 min-w-0 md:col-span-1"><h4 class="font-medium text-highlighted">{{ t(result.definition_snapshot.title_key) }}</h4><p class="mt-1 text-sm text-muted">{{ t(result.definition_snapshot.description_key) }}</p></div>
+              <div class="text-sm"><UBadge :color="color(result.verdict)" variant="subtle">{{ status(result.verdict) }}</UBadge><p class="mt-1 text-xs text-muted">{{ t('regression.resultLabels.checks') }} {{ progress(result) }}</p></div>
+              <div class="text-sm text-muted"><p>{{ duration(result) }}</p><p class="mt-1 text-xs">{{ t('regression.fields.cleanup') }}: {{ status(result.cleanup_state) }}</p></div>
+              <UButton color="neutral" variant="outline" class="col-span-2 justify-center md:col-span-1" :label="t('regression.resultActions.inspectChecks')" @click="inspect(result)" />
+            </article>
+          </div>
+        </template>
+        <template v-else-if="current">
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div><h3 class="text-lg font-semibold text-highlighted">{{ t('regression.resultSections.' + section) }}</h3><p class="mt-1 text-sm text-muted" data-testid="regression-selected-case">{{ t(current.definition_snapshot.title_key) }}</p></div>
+            <UFormField v-if="caseItems.length > 1" :label="t('regression.resultLabels.currentCase')"><USelect v-model="selectedCase" :items="caseItems" class="w-64 max-w-full" :aria-label="t('regression.resultLabels.currentCase')" /></UFormField>
+          </div>
+          <template v-if="section === 'checks'">
+            <p class="text-sm text-muted">{{ t('regression.resultHelp.checks') }}</p>
+            <div v-if="!currentChecks.length" class="rounded-lg bg-elevated/50 p-5 text-sm text-muted">{{ t('regression.resultHelp.noChecks') }}</div>
+            <article v-for="assertion in currentChecks" :key="assertion.uuid" class="rounded-lg border border-default p-4 space-y-3" :class="assertion.status === 'failed' ? 'border-error/60' : ''" :data-testid="'regression-assertion-' + assertion.key">
+              <div class="flex flex-wrap items-start justify-between gap-2"><div><h4 class="font-medium text-highlighted">{{ t(assertion.title_key) }}</h4><p v-if="stepName(assertion)" class="mt-1 text-xs text-muted">{{ t(stepName(assertion)!) }}</p></div><UBadge :color="color(assertion.status)" variant="subtle">{{ status(assertion.status) }}</UBadge></div>
+              <UAlert v-if="comparison(assertion) === null" color="warning" :title="t('regression.resultHelp.presentationMissing')" />
+              <UAlert v-if="comparison(assertion)?.some(row => !row.recorded)" color="warning" :title="t('regression.resultHelp.valueMissing')" />
+              <div v-if="comparison(assertion) !== null && comparison(assertion)!.length <= 4" class="space-y-2">
+                <div class="hidden grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] gap-3 text-xs text-muted sm:grid"><span>{{ t('regression.resultLabels.field') }}</span><span>{{ t('regression.fields.expected') }}</span><span>{{ t('regression.fields.actual') }}</span></div>
+                <div v-for="(row, index) in comparison(assertion)!" :key="index" class="grid grid-cols-1 gap-2 rounded-md bg-elevated/40 p-3 text-sm sm:grid-cols-3 sm:gap-3" :class="!row.matches ? 'ring-1 ring-error/40' : ''" data-testid="regression-check-comparison">
+                  <span class="font-medium text-highlighted">{{ row.label }}</span><div><span class="mr-2 text-xs text-muted sm:hidden">{{ t('regression.fields.expected') }}</span><span class="whitespace-pre-wrap break-words">{{ row.expected }}</span></div><div><span class="mr-2 text-xs text-muted sm:hidden">{{ t('regression.fields.actual') }}</span><span class="whitespace-pre-wrap break-words">{{ row.actual }}</span></div>
+                </div>
+              </div>
+              <div v-else-if="comparison(assertion) !== null" class="grid gap-3 text-sm sm:grid-cols-2"><p><span class="text-muted">{{ t('regression.fields.expected') }}: </span>{{ t('regression.resultLabels.expectedFields', { total: comparison(assertion)!.length }) }}</p><p><span class="text-muted">{{ t('regression.fields.actual') }}: </span>{{ t('regression.resultLabels.matchingFields', { passed: comparison(assertion)!.filter(row => row.matches).length, total: comparison(assertion)!.length }) }}</p></div>
+              <div class="flex flex-wrap gap-2"><UButton color="neutral" variant="outline" size="sm" :label="t('regression.resultActions.compare')" @click="openComparison(assertion)" /><UButton color="neutral" variant="ghost" size="sm" :label="t('regression.resultActions.evidence')" @click="showEvidence(assertion.evidence)" /></div>
+            </article>
+          </template>
+          <template v-else-if="section === 'resources'">
+            <p class="text-sm text-muted">{{ t('regression.resultHelp.resources') }}</p>
+            <UAlert v-if="resourceGaps" color="warning" :title="t('regression.resultHelp.resourceGaps')" />
+            <div v-if="!current.fixture_resources.length" class="rounded-lg bg-elevated/50 p-5 text-sm text-muted">{{ t('regression.resultHelp.noResources') }}</div>
+            <div v-else class="divide-y divide-default" data-testid="regression-resources">
+              <article v-for="resource in current.fixture_resources" :key="resource.uuid" class="grid gap-3 py-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1.5fr)_minmax(0,1.5fr)_auto] md:items-start" data-testid="regression-resource-row">
+                <div class="min-w-0"><p class="text-xs text-muted">{{ resource.role_key ? t(resource.role_key) : t('regression.states.unrecorded') }}</p><h4 class="mt-1 break-words text-sm font-medium text-highlighted">{{ resource.display_name?.trim() || t('regression.states.unrecorded') }}</h4></div>
+                <div class="min-w-0 text-sm"><p class="text-xs text-muted">{{ t('regression.resultLabels.source') }}</p><p class="mt-1 break-words">{{ parentName(resource) }}</p></div>
+                <div class="text-sm"><UBadge :color="color(resource.cleanup_state)" variant="subtle">{{ status(resource.cleanup_state) }}</UBadge><p class="mt-1 text-xs text-muted">{{ formatTime(resource.cleaned_at) }}</p><p class="mt-1 text-xs text-muted">{{ resource.cleanup_evidence?.length ? t('regression.resultLabels.readbackRecorded', { count: resource.cleanup_evidence.length }) : t('regression.resultLabels.readbackMissing') }}</p></div>
+                <UButton v-if="resource.cleanup_evidence?.length" color="neutral" variant="outline" size="sm" :label="t('regression.resultActions.cleanupEvidence')" @click="showEvidence(resource.cleanup_evidence)" />
+              </article>
+            </div>
+          </template>
+          <template v-else-if="section === 'diagnostics'">
+            <ol class="space-y-3" data-testid="regression-result-steps">
+              <li v-for="(definition, index) in current.definition_snapshot.steps" :key="definition.uuid" class="rounded-lg border border-default p-4 space-y-2">
+                <div class="flex items-start justify-between gap-3"><h4 class="font-medium text-highlighted">{{ index + 1 }}. {{ t(definition.title_key) }}</h4><UBadge :color="color(current.steps.find(step => step.step_uuid === definition.uuid)?.status || 'pending')" variant="subtle">{{ status(current.steps.find(step => step.step_uuid === definition.uuid)?.status || 'pending') }}</UBadge></div>
+                <template v-for="step in current.steps.filter(item => item.step_uuid === definition.uuid)" :key="step.uuid"><dl class="grid gap-2 text-xs text-muted sm:grid-cols-3"><div><dt>{{ t('regression.fields.started') }}</dt><dd class="mt-1">{{ formatTime(step.started_at) }}</dd></div><div><dt>{{ t('regression.resultLabels.finished') }}</dt><dd class="mt-1">{{ formatTime(step.finished_at) }}</dd></div><div><dt>{{ t('regression.fields.duration') }}</dt><dd class="mt-1">{{ duration(step) }}</dd></div></dl></template>
+              </li>
+            </ol>
+            <dl class="grid gap-3 border-t border-default pt-4 text-sm sm:grid-cols-2" data-testid="regression-run-snapshot"><div><dt class="text-muted">{{ t('regression.fields.pluginVersion') }}</dt><dd class="mt-1">{{ source('plugin_version') }}</dd></div><div><dt class="text-muted">{{ t('regression.fields.sourceRevision') }}</dt><dd class="mt-1 break-words">{{ source('source_revision') }}</dd></div></dl>
+            <div v-if="current.dependency_evidence.length" class="space-y-2 text-sm" data-testid="regression-dependency-evidence"><p v-for="dependency in current.dependency_evidence" :key="dependency.dependency_key">{{ t('regression.boundaries.' + dependency.boundary.replaceAll('.', '_')) }} · {{ t('regression.fields.declaredMode') }}: {{ t('regression.dependencyModes.' + dependency.declared_mode) }} · {{ t('regression.fields.actualMode') }}: {{ t('regression.dependencyModes.' + dependency.actual_mode) }}</p></div>
+            <UButton color="neutral" variant="outline" :label="t('regression.actions.technical')" data-testid="regression-result-technical" @click="technicalOpen = true" />
+          </template>
+        </template>
+      </div>
+    </div>
+
+    <USlideover v-model:open="comparisonOpen" :title="selectedAssertion ? t(selectedAssertion.title_key) : t('regression.resultActions.compare')" :description="t('regression.resultHelp.comparison')" :ui="{ content: 'max-w-3xl w-full' }">
+      <template #body><div class="space-y-4" data-testid="regression-difference"><UAlert v-if="comparedRows === null" color="warning" :title="t('regression.resultHelp.presentationMissing')" /><div v-for="(row, index) in comparedRows || []" :key="index" class="rounded-lg border border-default p-4 space-y-3" :class="!row.matches ? 'border-error/60' : ''"><div class="flex items-start justify-between gap-2"><h4 class="text-sm font-medium text-highlighted">{{ row.label }}</h4><UBadge :color="!row.recorded ? 'warning' : row.matches ? 'success' : 'error'" variant="subtle">{{ t(!row.recorded ? 'regression.states.unrecorded' : row.matches ? 'regression.resultValues.matches' : 'regression.resultValues.differs') }}</UBadge></div><div class="grid gap-3 text-sm sm:grid-cols-2"><div><p class="mb-1 text-xs text-muted">{{ t('regression.fields.expected') }}</p><p class="whitespace-pre-wrap break-words">{{ row.expected }}</p></div><div><p class="mb-1 text-xs text-muted">{{ t('regression.fields.actual') }}</p><p class="whitespace-pre-wrap break-words">{{ row.actual }}</p></div></div></div></div></template>
+      <template #footer><UButton color="neutral" variant="outline" :label="t('regression.actions.close')" @click="closeOverlays" /></template>
+    </USlideover>
+    <USlideover v-model:open="evidenceOpen" :title="t('regression.resultActions.evidence')" :description="t('regression.resultHelp.evidence')" :ui="{ content: 'max-w-3xl w-full' }">
+      <template #body><p v-if="!viewedEvidence.length" class="text-sm text-muted">{{ t('regression.resultHelp.noEvidence') }}</p><article v-for="(evidence, index) in viewedEvidence" :key="index" class="mb-5 space-y-2 text-sm"><p>{{ t('regression.fields.boundary') }}: {{ t('regression.boundaries.' + evidence.boundary.replaceAll('.', '_')) }}</p><p class="text-muted">{{ formatTime(evidence.observed_at) }}</p><pre class="overflow-auto rounded-lg bg-elevated p-3 text-xs" data-testid="regression-evidence-snapshot">{{ JSON.stringify(evidence, null, 2) }}</pre></article></template>
+      <template #footer><UButton color="neutral" variant="outline" :label="t('regression.actions.close')" @click="closeOverlays" /></template>
+    </USlideover>
+    <UModal v-model:open="technicalOpen" :title="t('regression.actions.technical')" :description="t('regression.technical.description')" :ui="{ content: 'max-w-4xl' }"><template #body><pre class="overflow-auto rounded-lg bg-elevated p-3 text-xs">{{ JSON.stringify(detail, null, 2) }}</pre></template><template #footer><UButton color="neutral" variant="outline" :label="t('regression.actions.close')" @click="closeOverlays" /></template></UModal>
+  </section>
+</template>

package/layer/app/components/powerx/PXRegressionWorkbench.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+import { useI18n } from '#imports';
+import * as v from 'valibot';
+import type { RegressionClient, CaseDefinition, Run } from '@artisan-cloud/plugin-framework-client';
+import type { RegressionCasePresentation } from '../../types/regression';
+import { usePowerXRegression } from '../../composables/usePowerXRegression';
+import PXRegressionRunDetail from './PXRegressionRunDetail.vue';
+
+const props = defineProps<{
+  client: RegressionClient;
+  canRead: boolean;
+  canInvoke: boolean;
+  canManage: boolean;
+  identityKey?: string;
+  defaultInputs: (definition: CaseDefinition) => Record<string, unknown>;
+  describeCase: (definition: CaseDefinition) => RegressionCasePresentation | undefined;
+}>();
+const { t } = useI18n();
+const state = usePowerXRegression(props.client);
+const tab = ref('cases');
+const showResult = ref(false);
+const profile = ref('');
+const suite = ref('all');
+const filter = ref('');
+const selected = ref<string[]>([]);
+const inputValues = ref<Record<string, Record<string, any>>>({});
+const caseOpen = ref(false);
+const viewedCase = ref<CaseDefinition | null>(null);
+const preparationOpen = ref(false);
+const preparationIds = ref<string[]>([]);
+const invalidInputCases = ref<string[]>([]);
+const rerunOf = ref<string>();
+const definitionTechnicalOpen = ref(false);
+const resultView = ref<{ focus: () => void } | null>(null);
+const focusAfterPreparation = ref(false);
+const selectedProfile = computed(() => state.profiles.value.find(p => p.uuid === profile.value));
+const tabItems = computed(() => [
+  { label: t('regression.tabs.cases'), value: 'cases', icon: 'i-heroicons-clipboard-document-check' },
+  { label: t('regression.tabs.runs'), value: 'runs', icon: 'i-heroicons-clock' },
+]);
+const profileItems = computed(() => state.profiles.value.map(p => ({ label: t(p.title_key), value: p.uuid })));
+const suiteItems = computed(() => [{ label: t('regression.fields.allSuites'), value: 'all' }, ...state.suites.value.map(s => ({ label: t(s.title_key), value: s.uuid }))]);
+const available = computed(() => selectedProfile.value ? state.cases.value.filter(c => c.supported_profile_kinds.includes(selectedProfile.value!.kind)) : []);
+const visible = computed(() => available.value.filter(c => (suite.value === 'all' || c.suite_uuid === suite.value) && (!filter.value || t(c.title_key).toLowerCase().includes(filter.value.toLowerCase()) || c.tags.some(tag => tag.toLowerCase().includes(filter.value.toLowerCase())))));
+const preparingCases = computed(() => preparationIds.value.map(id => state.cases.value.find(c => c.uuid === id)).filter((c): c is CaseDefinition => !!c));
+const busy = computed(() => state.runs.value.some(run => ['queued', 'running', 'cancelling'].includes(run.phase) || run.cleanup_state === 'running'));
+const visibleSelection = computed(() => visible.value.length > 0 && visible.value.every(item => selected.value.includes(item.uuid)) ? true : selected.value.length ? 'indeterminate' as const : false);
+function selectVisible(value: boolean | 'indeterminate') { selected.value = value === true ? visible.value.map(item => item.uuid) : []; }
+function preparationError(event: { errors: Array<{ name?: string }> }) { invalidInputCases.value = [...new Set(event.errors.map(error => error.name?.split('.')[0]).filter((id): id is string => !!id))]; }
+const status = (value: string) => t('regression.states.' + value);
+const color = (value: string) => value === 'passed' ? 'success' : value === 'failed' ? 'error' : value === 'blocked' ? 'warning' : 'neutral';
+const latestRuns = computed(() => {
+  const latest = new Map<string, Run>();
+  for (const run of [...state.runs.value].sort((a, b) => Date.parse(b.created_at) - Date.parse(a.created_at))) {
+    if (run.profile_uuid !== profile.value) continue;
+    for (const definition of run.selection_snapshot) if (!latest.has(definition.uuid)) latest.set(definition.uuid, run);
+  }
+  return latest;
+});
+function configured(definition: CaseDefinition) {
+  const presentation = props.describeCase(definition);
+  const properties = definition.input_schema.properties as Record<string, { type?: string }> | undefined;
+  if (!presentation || !properties) return false;
+  const fields = presentation.fields.map(field => field.key);
+  return new Set(fields).size === fields.length && fields.length === Object.keys(properties).length &&
+    fields.every(key => properties[key]?.type === 'string');
+}
+const preparationConfigured = computed(() => preparingCases.value.length === preparationIds.value.length && preparingCases.value.every(configured));
+const formSchema = computed(() => {
+  const cases: Record<string, any> = {};
+  for (const definition of preparingCases.value) {
+    const fields: Record<string, any> = {};
+    const properties = definition.input_schema.properties as Record<string, { minLength?: number; maxLength?: number; format?: string }>;
+    const required = definition.input_schema.required as string[] | undefined;
+    for (const field of props.describeCase(definition)?.fields || []) {
+      const property = properties[field.key];
+      if (!property) continue;
+      const rules: any[] = [v.string(t('regression.validation.required', { field: t(field.labelKey) }))];
+      if (required?.includes(field.key)) rules.push(v.nonEmpty(t('regression.validation.required', { field: t(field.labelKey) })));
+      if (property.minLength) rules.push(v.minLength(property.minLength, t('regression.validation.minLength', { field: t(field.labelKey), count: property.minLength })));
+      if (property.maxLength) rules.push(v.maxLength(property.maxLength, t('regression.validation.maxLength', { field: t(field.labelKey), count: property.maxLength })));
+      if (property.format === 'uuid') rules.push(v.uuid(t('regression.validation.uuid', { field: t(field.labelKey) })));
+      fields[field.key] = v.pipe(...rules as [any, ...any[]]);
+    }
+    cases[definition.uuid] = v.object(fields);
+  }
+  return v.object(cases);
+});
+function initializeInputs(definition: CaseDefinition) {
+  if (!inputValues.value[definition.uuid]) inputValues.value[definition.uuid] = structuredClone(props.defaultInputs(definition));
+  for (const field of props.describeCase(definition)?.fields || []) {
+    if (!Object.hasOwn(inputValues.value[definition.uuid], field.key)) inputValues.value[definition.uuid][field.key] = '';
+  }
+}
+watch(state.cases, definitions => definitions.forEach(initializeInputs));
+watch(state.profiles, items => { if (!items.some(p => p.uuid === profile.value)) profile.value = items[0]?.uuid || ''; });
+watch(profile, () => { selected.value = []; suite.value = 'all'; filter.value = ''; preparationOpen.value = false; });
+watch(visible, definitions => { selected.value = selected.value.filter(id => definitions.some(c => c.uuid === id)); });
+watch(tab, (_value, previous) => { if (previous === 'runs') showResult.value = false; });
+function clear() {
+  state.reset(); tab.value = 'cases'; showResult.value = false; selected.value = []; profile.value = ''; suite.value = 'all'; filter.value = '';
+  inputValues.value = {}; caseOpen.value = false; viewedCase.value = null; preparationOpen.value = false; preparationIds.value = []; rerunOf.value = undefined; definitionTechnicalOpen.value = false; focusAfterPreparation.value = false;
+}
+watch(() => props.canRead, value => { clear(); if (value) void state.load(); });
+watch(() => props.identityKey, () => { clear(); if (props.canRead) void state.load(); });
+onMounted(() => { if (props.canRead) void state.load(); });
+function blurActive() { if (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement) document.activeElement.blur(); }
+function viewCase(definition: CaseDefinition) { viewedCase.value = definition; caseOpen.value = true; }
+async function prepare(ids: string[], previous?: string) {
+  blurActive(); caseOpen.value = false; definitionTechnicalOpen.value = false;
+  await nextTick();
+  preparationIds.value = [...ids]; invalidInputCases.value = []; rerunOf.value = previous;
+  preparingCases.value.forEach(initializeInputs);
+  state.error.value = ''; preparationOpen.value = true;
+}
+function closePreparation() { blurActive(); preparationOpen.value = false; }
+async function execute() {
+  if (!props.canInvoke || !preparationConfigured.value || !profile.value || busy.value) return;
+  await state.run({
+    client_request_uuid: crypto.randomUUID(), profile_uuid: profile.value,
+    case_uuids: preparationIds.value, inputs: Object.fromEntries(preparationIds.value.map(id => [id, inputValues.value[id]])),
+    ...(rerunOf.value ? { rerun_of_run_uuid: rerunOf.value } : {}),
+  });
+  if (!state.error.value) { focusAfterPreparation.value = true; closePreparation(); selected.value = []; tab.value = 'runs'; showResult.value = true; }
+}
+function preparationClosed() { if (focusAfterPreparation.value) { focusAfterPreparation.value = false; resultView.value?.focus(); } }
+async function openRun(uuid: string) {
+  await state.open(uuid);
+  if (!state.error.value) { tab.value = 'runs'; showResult.value = true; await nextTick(); resultView.value?.focus(); }
+}
+async function rerun() {
+  if (!state.detail.value) return;
+  const run = state.detail.value.run;
+  if (!state.profiles.value.some(p => p.uuid === run.profile_uuid)) { state.error.value = 'REGRESSION_PROFILE_UNAVAILABLE'; return; }
+  const ids = state.detail.value.case_executions.filter(c => c.verdict !== 'passed').map(c => c.case_uuid);
+  if (!ids.length) return;
+  for (const id of ids) {
+    const snapshot = run.input_snapshot[id];
+    if (!snapshot || typeof snapshot !== 'object' || Array.isArray(snapshot)) { state.error.value = 'REGRESSION_INVALID_REQUEST'; return; }
+    inputValues.value[id] = structuredClone(toRaw(snapshot)) as Record<string, unknown>;
+  }
+  profile.value = run.profile_uuid;
+  await nextTick();
+  await prepare(ids, run.uuid);
+}
+async function showDefinitionTechnical() { blurActive(); caseOpen.value = false; await nextTick(); definitionTechnicalOpen.value = true; }
+</script>
+
+<template>
+  <section v-if="canRead" class="mx-auto max-w-7xl space-y-5 p-4 text-default" data-testid="regression-workbench">
+    <header class="flex flex-wrap items-start justify-between gap-4">
+      <div><h1 class="text-2xl font-semibold text-highlighted">{{ t('regression.title') }}</h1><p class="mt-1 text-sm text-muted">{{ t('regression.description') }}</p></div>
+      <UButton color="neutral" variant="outline" icon="i-heroicons-arrow-path" :label="t('regression.actions.refresh')" :loading="state.loading.value" @click="state.load" />
+    </header>
+    <UAlert v-if="state.error.value && !preparationOpen" color="error" :title="t('regression.errors.' + state.error.value)" data-testid="regression-error" />
+    <UTabs v-model="tab" :items="tabItems" :content="false" variant="link" class="w-full" :aria-label="t('regression.title')" />
+
+    <section v-if="tab === 'cases'" class="space-y-4" data-testid="regression-catalog">
+      <div class="flex flex-wrap items-end justify-between gap-3">
+        <div><h2 class="text-lg font-semibold text-highlighted" data-testid="regression-case-count">{{ state.loading.value && !selectedProfile ? t('regression.states.loading') : selectedProfile ? t('regression.overview.available', { count: available.length }) : t('regression.overview.unavailable') }}</h2><p v-if="selectedProfile" class="mt-1 text-sm text-muted">{{ t('regression.catalog.environment', { name: t(selectedProfile.title_key) }) }}</p></div>
+        <UFormField v-if="state.profiles.value.length > 1" :label="t('regression.fields.profile')"><USelect v-model="profile" :items="profileItems" class="w-64" /></UFormField>
+      </div>
+      <UAlert v-if="busy" color="info" :title="t('regression.overview.busy')"><template #actions><UButton color="neutral" variant="outline" :label="t('regression.actions.viewRuns')" @click="tab = 'runs'; showResult = false" /></template></UAlert>
+      <div v-if="available.length > 1 || filter || suite !== 'all'" class="flex flex-wrap items-end gap-3">
+        <UFormField v-if="state.suites.value.length > 1" :label="t('regression.fields.suite')"><USelect v-model="suite" :items="suiteItems" class="w-48" /></UFormField>
+        <UFormField :label="t('regression.fields.filter')"><UInput v-model="filter" icon="i-heroicons-magnifying-glass" class="w-64" /></UFormField>
+        <span class="pb-2 text-sm text-muted">{{ t('regression.overview.showing', { count: visible.length, total: available.length }) }}</span>
+      </div>
+      <div v-if="canInvoke && selected.length" class="flex items-center justify-between gap-3 rounded-lg bg-primary/10 p-3" data-testid="regression-batch-actions"><span class="text-sm">{{ t('regression.overview.selected', { count: selected.length }) }}</span><UButton :label="t('regression.actions.runSelected', { count: selected.length })" :disabled="busy || state.loading.value" data-testid="regression-run-selected" @click="prepare(selected)" /></div>
+      <div class="overflow-x-auto rounded-xl border border-default">
+        <table class="w-full text-left text-sm">
+          <thead class="bg-elevated/60 text-muted"><tr><th v-if="canInvoke" class="w-12 p-4"><UCheckbox :model-value="visibleSelection" :disabled="!visible.length" :aria-label="t('regression.actions.selectVisible')" data-testid="regression-select-visible" @update:model-value="selectVisible" /></th><th scope="col" class="p-4 font-medium">{{ t('regression.catalog.case') }}</th><th scope="col" class="p-4 font-medium">{{ t('regression.catalog.purpose') }}</th><th scope="col" class="p-4 font-medium">{{ t('regression.catalog.latest') }}</th><th scope="col" class="p-4 font-medium">{{ t('regression.catalog.actions') }}</th></tr></thead>
+          <tbody>
+            <tr v-for="item in visible" :key="item.uuid" class="border-t border-default align-top hover:bg-elevated/30" :data-testid="'regression-case-' + item.key">
+              <td v-if="canInvoke" class="p-4"><UCheckbox :model-value="selected.includes(item.uuid)" :aria-label="t('regression.actions.selectCase', { name: t(item.title_key) })" @update:model-value="value => { selected = value ? [...selected, item.uuid] : selected.filter(id => id !== item.uuid) }" /></td>
+              <td class="min-w-44 p-4 font-medium text-highlighted">{{ t(item.title_key) }}</td>
+              <td class="min-w-64 max-w-md p-4 text-muted">{{ t(item.description_key) }}</td>
+              <td class="min-w-32 p-4"><UBadge v-if="latestRuns.has(item.uuid)" :color="color(latestRuns.get(item.uuid)!.verdict)" variant="subtle" data-testid="regression-latest-run">{{ status(latestRuns.get(item.uuid)!.phase === 'completed' ? latestRuns.get(item.uuid)!.verdict : latestRuns.get(item.uuid)!.phase) }}</UBadge><span v-else class="text-muted">{{ t('regression.catalog.notRun') }}</span></td>
+              <td class="p-4"><div class="flex flex-wrap gap-2"><UButton color="neutral" variant="outline" :label="t('regression.actions.viewCase')" @click="viewCase(item)" /><UButton v-if="canInvoke" :label="t('regression.actions.runCase')" :disabled="busy || state.loading.value || !profile" data-testid="regression-run-case" @click="prepare([item.uuid])" /></div></td>
+            </tr>
+            <tr v-if="!visible.length"><td :colspan="canInvoke ? 5 : 4" class="p-8 text-center text-muted">{{ state.loading.value ? t('regression.states.loading') : state.error.value ? t('regression.overview.unavailable') : t('regression.states.empty') }}</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <p class="text-xs text-muted">{{ t('regression.catalog.historyScope') }}</p>
+    </section>
+
+    <section v-else-if="!showResult || !state.detail.value" class="space-y-4" data-testid="regression-history">
+      <div><h2 class="text-lg font-semibold text-highlighted">{{ t('regression.tabs.runs') }}</h2><p class="mt-1 text-sm text-muted">{{ t('regression.history.description') }}</p></div>
+      <div v-if="!state.runs.value.length" class="rounded-xl border border-default p-10 text-center"><p class="font-medium text-highlighted">{{ t('regression.states.noRuns') }}</p><p class="mt-2 text-sm text-muted">{{ t('regression.history.emptyHelp') }}</p><UButton class="mt-4" color="neutral" variant="outline" :label="t('regression.actions.backToCases')" @click="tab = 'cases'" /></div>
+      <div v-else class="overflow-x-auto rounded-xl border border-default"><table class="w-full text-left text-sm"><thead class="bg-elevated/60 text-muted"><tr><th v-for="key in ['time', 'cases', 'result', 'cleanup', 'actions']" :key="key" scope="col" class="p-4 font-medium">{{ t('regression.history.' + key) }}</th></tr></thead><tbody><tr v-for="run in state.runs.value" :key="run.uuid" class="border-t border-default align-top"><td class="whitespace-nowrap p-4 text-muted">{{ new Date(run.created_at).toLocaleString() }}</td><td class="min-w-52 p-4"><p class="font-medium text-highlighted">{{ run.selection_snapshot.map(definition => t(definition.title_key)).join(' · ') }}</p><p class="mt-1 text-xs text-muted">{{ t(run.profile_snapshot.title_key) }} · {{ t('regression.results.total', { count: run.selection_snapshot.length }) }}</p></td><td class="p-4"><UBadge :color="color(run.verdict)" variant="subtle">{{ status(run.phase === 'completed' ? run.verdict : run.phase) }}</UBadge></td><td class="p-4">{{ status(run.cleanup_state) }}</td><td class="p-4"><UButton color="neutral" variant="outline" :label="t('regression.actions.viewResult')" @click="openRun(run.uuid)" /></td></tr></tbody></table></div>
+    </section>
+    <PXRegressionRunDetail v-else ref="resultView" :detail="state.detail.value" :describe-case="describeCase" :can-invoke="canInvoke" :can-manage="canManage" :busy="busy || state.loading.value" :disconnected="state.connection.value === 'error'" @back="showResult = false" @cancel="state.cancel" @cleanup="state.cleanup" @rerun="rerun" @report="state.download" @reconnect="state.reconnect" />
+
+    <USlideover v-model:open="caseOpen" :title="viewedCase ? t(viewedCase.title_key) : t('regression.actions.viewCase')" :description="t('regression.caseDetail.description')" :ui="{ content: 'max-w-xl' }">
+      <template #body><div v-if="viewedCase" class="space-y-6" data-testid="regression-case-detail">
+        <section><h3 class="font-semibold text-highlighted">{{ t('regression.caseDetail.purpose') }}</h3><p class="mt-2 text-sm text-muted">{{ t(viewedCase.description_key) }}</p></section>
+        <section><h3 class="font-semibold text-highlighted">{{ t('regression.caseDetail.steps', { count: viewedCase.steps.length }) }}</h3><ol class="mt-3 space-y-3"><li v-for="(step, index) in viewedCase.steps" :key="step.uuid" class="flex gap-3 text-sm"><span class="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">{{ index + 1 }}</span><span>{{ t(step.title_key) }}</span></li></ol></section>
+        <template v-if="describeCase(viewedCase)"><section><h3 class="font-semibold text-highlighted">{{ t('regression.caseDetail.expected') }}</h3><ul class="mt-2 list-disc space-y-2 pl-5 text-sm text-muted"><li v-for="key in describeCase(viewedCase)!.expectationKeys" :key="key">{{ t(key) }}</li></ul></section><UAlert color="info" variant="subtle" :title="t('regression.caseDetail.impact')" :description="t(describeCase(viewedCase)!.impactKey)" /></template>
+        <UAlert v-else color="error" :title="t('regression.errors.REGRESSION_PRESENTATION_MISSING')" />
+        <UButton color="neutral" variant="link" :label="t('regression.actions.technical')" class="px-0" @click="showDefinitionTechnical" />
+      </div></template>
+      <template #footer><div class="flex w-full justify-end gap-2"><UButton color="neutral" variant="outline" :label="t('regression.actions.close')" @click="blurActive(); caseOpen = false" /><UButton v-if="canInvoke && viewedCase" :label="t('regression.actions.runCase')" :disabled="busy || state.loading.value" @click="prepare([viewedCase.uuid])" /></div></template>
+    </USlideover>
+
+    <UModal v-model:open="preparationOpen" :title="t('regression.preparation.title', { count: preparingCases.length })" :description="t('regression.preparation.description')" :dismissible="!state.loading.value" :close="!state.loading.value" :ui="{ content: 'max-w-2xl' }" @after:leave="preparationClosed">
+      <template #body>
+        <div class="space-y-5" data-testid="regression-preparation">
+          <p v-if="selectedProfile" class="text-sm font-medium text-highlighted">{{ t('regression.catalog.environment', { name: t(selectedProfile.title_key) }) }}</p>
+          <p v-if="selectedProfile" class="text-sm text-muted">{{ t('regression.profileDescriptions.' + selectedProfile.kind) }}</p>
+          <UAlert v-if="state.error.value" color="error" :title="t('regression.errors.' + state.error.value)" data-testid="regression-error" />
+          <UAlert v-if="!preparationConfigured" color="error" :title="t('regression.errors.REGRESSION_PRESENTATION_MISSING')" />
+          <UForm v-if="preparationConfigured" id="regression-run-form" :state="inputValues" :schema="formSchema" class="space-y-6" @submit="execute" @error="preparationError">
+            <section v-for="definition in preparingCases" :key="definition.uuid" class="space-y-4">
+              <div><h3 class="font-semibold text-highlighted">{{ t(definition.title_key) }}</h3><p class="mt-1 text-sm text-muted">{{ t(definition.description_key) }}</p></div>
+              <UAlert color="info" variant="subtle" :title="t('regression.caseDetail.impact')" :description="t(describeCase(definition)!.impactKey)" />
+              <details :open="preparingCases.length === 1 || invalidInputCases.includes(definition.uuid)" class="rounded-lg border border-default p-3" :data-testid="'regression-inputs-' + definition.key">
+              <summary class="cursor-pointer text-sm font-medium text-highlighted">{{ t('regression.preparation.reviewInputs') }}</summary>
+              <div class="mt-4 grid gap-4 sm:grid-cols-2">
+              <UFormField v-for="field in describeCase(definition)!.fields" :key="field.key" :class="field.control === 'textarea' ? 'sm:col-span-2' : ''" :name="definition.uuid + '.' + field.key" :label="t(field.labelKey)" :help="field.helpKey ? t(field.helpKey) : undefined" :required="(definition.input_schema.required as string[] | undefined)?.includes(field.key)">
+                <UTextarea v-if="field.control === 'textarea'" v-model="inputValues[definition.uuid][field.key]" :rows="3" class="w-full" :disabled="state.loading.value" />
+                <UInput v-else v-model="inputValues[definition.uuid][field.key]" class="w-full" :disabled="state.loading.value" />
+              </UFormField>
+              </div>
+              </details>
+            </section>
+          </UForm>
+        </div>
+      </template>
+      <template #footer><div class="flex w-full justify-end gap-2"><UButton color="neutral" variant="outline" :disabled="state.loading.value" :label="t('regression.actions.cancelPreparation')" @click="closePreparation" /><UButton v-if="canInvoke" type="submit" form="regression-run-form" :label="t('regression.actions.start')" :disabled="!preparationConfigured || busy || !profile" :loading="state.loading.value" data-testid="regression-run" /></div></template>
+    </UModal>
+    <UModal v-model:open="definitionTechnicalOpen" :title="t('regression.actions.technical')" :description="t('regression.technical.definition')" :ui="{ content: 'max-w-3xl' }"><template #body><pre class="overflow-auto rounded-lg bg-elevated p-3 text-xs">{{ JSON.stringify({ definition: viewedCase, profile: selectedProfile }, null, 2) }}</pre></template><template #footer><UButton color="neutral" variant="outline" :label="t('regression.actions.close')" @click="blurActive(); definitionTechnicalOpen = false" /></template></UModal>
+  </section>
+</template>

package/layer/app/composables/regressionComparison.ts

@@ -0,0 +1,73 @@
+import type { AssertionResult } from '@artisan-cloud/plugin-framework-client';
+import type { RegressionResultField, RegressionResultPresentation } from '../types/regression';
+
+export interface RegressionComparisonRow {
+  label: string;
+  expected: string;
+  actual: string;
+  matches: boolean;
+  recorded: boolean;
+}
+type Translate = (key: string, params?: Record<string, string | number>) => string;
+const object = (value: unknown): value is Record<string, unknown> => !!value && typeof value === 'object' && !Array.isArray(value);
+function equal(a: unknown, b: unknown): boolean {
+  if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => equal(v, b[i]));
+  if (object(a) && object(b)) return Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(key => Object.hasOwn(b, key) && equal(a[key], b[key]));
+  return a === b;
+}
+function format(value: unknown, field: RegressionResultField, t: Translate): string | null {
+  if (field.format === 'text') return typeof value === 'string' ? value : null;
+  if (field.format === 'number') return typeof value === 'number' && Number.isFinite(value) ? String(value) : null;
+  if (field.format === 'boolean') return typeof value === 'boolean' ? t(value ? 'regression.resultValues.yes' : 'regression.resultValues.no') : null;
+  if (field.format === 'enum') return typeof value === 'string' && field.values?.[value] ? t(field.values[value]) : null;
+  if (field.format === 'numbers') return Array.isArray(value) && value.every(item => typeof item === 'number') ? value.join(' / ') : null;
+  if (field.format === 'references') return Array.isArray(value) && value.every(item => typeof item === 'string') ? t('regression.resultValues.referencesCount', { count: value.length }) : null;
+  if (field.format === 'items' && Array.isArray(value) && field.fields?.length) {
+    const entries: string[] = [];
+    for (const item of value) {
+      if (!object(item)) return null;
+      const parts: string[] = [];
+      for (const child of field.fields) {
+        const rendered = format(item[child.key], child, t);
+        if (rendered === null) return null;
+        parts.push(t('regression.resultValues.fieldValue', { field: t(child.labelKey), value: rendered }));
+      }
+      entries.push(parts.join(t('regression.resultValues.separator')));
+    }
+    return entries.length ? entries.join('\n') : t('regression.resultValues.none');
+  }
+  return null;
+}
+export function regressionComparison(assertion: AssertionResult, presentation: RegressionResultPresentation | undefined, t: Translate): RegressionComparisonRow[] | null {
+  if (!presentation || !presentation.fields.length) return null;
+  const rows: RegressionComparisonRow[] = [];
+  const add = (field: RegressionResultField, expected: unknown, actual: unknown, prefix = '') => {
+    const isReference = field.format === 'reference';
+    const knownExpected = isReference ? typeof expected === 'string' : format(expected, field, t) !== null;
+    const knownActual = isReference ? typeof actual === 'string' : format(actual, field, t) !== null;
+    rows.push({
+      label: prefix ? t('regression.resultValues.groupField', { group: prefix, field: t(field.labelKey) }) : t(field.labelKey),
+      expected: isReference && knownExpected ? t('regression.resultValues.selectedReference') : format(expected, field, t) ?? t('regression.states.unrecorded'),
+      actual: isReference && knownActual ? t(expected === actual ? 'regression.resultValues.selectedReference' : 'regression.resultValues.otherReference') : format(actual, field, t) ?? t('regression.states.unrecorded'),
+      matches: knownExpected && knownActual && equal(expected, actual), recorded: knownExpected && knownActual,
+    });
+  };
+  if (presentation.shape === 'scalar') add(presentation.fields[0], assertion.expected, assertion.actual);
+  else if (presentation.shape === 'record') {
+    if (!object(assertion.expected) || !object(assertion.actual)) return null;
+    for (const field of presentation.fields) add(field, assertion.expected[field.key], assertion.actual[field.key]);
+  } else {
+    if (!Array.isArray(assertion.expected) || !Array.isArray(assertion.actual) || !presentation.itemLabelKey) return null;
+    const size = Math.max(assertion.expected.length, assertion.actual.length);
+    for (let index = 0; index < size; index++) {
+      const prefix = t(presentation.itemLabelKey, { index: index + 1 });
+      if (presentation.shape === 'references') add(presentation.fields[0], assertion.expected[index], assertion.actual[index], prefix);
+      else {
+        const expected = assertion.expected[index], actual = assertion.actual[index];
+        if (expected !== undefined && !object(expected) || actual !== undefined && !object(actual)) return null;
+        for (const field of presentation.fields) add(field, expected?.[field.key], actual?.[field.key], prefix);
+      }
+    }
+  }
+  return rows;
+}

package/layer/app/composables/usePowerXRegression.ts

@@ -0,0 +1,56 @@
+import { ref, onScopeDispose } from 'vue';
+import type { RegressionClient, CaseDefinition, ProfileDefinition, Run, RunDetail, CreateRun, SuiteDefinition } from '@artisan-cloud/plugin-framework-client';
+
+export function usePowerXRegression(client: RegressionClient) {
+  const suites = ref<SuiteDefinition[]>([]);
+  const cases = ref<CaseDefinition[]>([]), profiles = ref<ProfileDefinition[]>([]), runs = ref<Run[]>([]);
+  const detail = ref<RunDetail | null>(null), error = ref(''), loading = ref(false);
+  const connection = ref<'idle' | 'connected' | 'error'>('idle');
+  let stream: AbortController | null = null, generation = 0;
+  const fail = (e: any, operation: 'catalog' | 'request' = 'request') => {
+    const code = e?.data?.error?.code || e?.message;
+    const status = e?.response?.status ?? e?.statusCode ?? e?.status;
+    if (/^REGRESSION_[A-Z_]+$/.test(code || '')) error.value = code;
+    else if (operation === 'catalog' && status === 404) error.value = 'REGRESSION_API_UNAVAILABLE';
+    else error.value = 'REGRESSION_REQUEST_FAILED';
+  };
+  function stop() { stream?.abort(); stream = null; connection.value = 'idle'; }
+  function reset() { generation++; stop(); suites.value = []; cases.value = []; profiles.value = []; runs.value = []; detail.value = null; error.value = ''; loading.value = false; }
+  async function load() {
+    const revision = generation; loading.value = true; error.value = '';
+    try {
+      const [c, p, r, s] = await Promise.all([client.cases(), client.profiles(), client.runs(), client.suites()]);
+      if (revision === generation) { suites.value = s.items; cases.value = c.items; profiles.value = p.items; runs.value = r.items; }
+    } catch (e) { if (revision === generation) fail(e, 'catalog'); }
+    finally { if (revision === generation) loading.value = false; }
+  }
+  async function watch(snapshot: RunDetail) {
+    stop(); detail.value = snapshot;
+    const controller = new AbortController(); stream = controller; connection.value = 'connected';
+    try {
+      await client.watch(snapshot, controller.signal, next => { if (stream === controller) { detail.value = next; runs.value = runs.value.map(r => r.uuid === next.run.uuid ? next.run : r); } });
+      if (stream === controller) connection.value = 'idle';
+    } catch (e) { if (stream === controller && !controller.signal.aborted) { connection.value = 'error'; fail(e); } }
+  }
+  async function open(id: string) {
+    const revision = generation; error.value = '';
+    try { const d = await client.get(id); if (revision === generation) void watch(d); }
+    catch (e) { if (revision === generation) fail(e); }
+  }
+  async function run(body: CreateRun) {
+    const revision = generation; error.value = ''; loading.value = true;
+    try { const d = await client.create(body); if (revision === generation) { void watch(d); runs.value = [d.run, ...runs.value.filter(r => r.uuid !== d.run.uuid)]; } }
+    catch (e) { if (revision === generation) fail(e); }
+    finally { if (revision === generation) loading.value = false; }
+  }
+  async function cancel() { if (!detail.value) return; const revision = generation; try { const d = await client.cancel(detail.value.run.uuid); if (revision === generation && (!detail.value || d.run.revision >= detail.value.run.revision)) detail.value = d; } catch (e) { if (revision === generation) fail(e); } }
+  async function cleanup() { if (!detail.value) return; const revision = generation; try { const d = await client.cleanup(detail.value.run.uuid); if (revision === generation) void watch(d); } catch (e) { if (revision === generation) fail(e); } }
+  async function reconnect() { if (detail.value) await open(detail.value.run.uuid); }
+  async function download() {
+    if (!detail.value) return; const revision = generation;
+    try { const report = await client.report(detail.value.run.uuid); if (revision !== generation) return; const url = URL.createObjectURL(new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' })); const a = document.createElement('a'); a.href = url; a.download = 'regression-report.json'; a.click(); URL.revokeObjectURL(url); }
+    catch (e) { if (revision === generation) fail(e); }
+  }
+  onScopeDispose(reset);
+  return { suites, cases, profiles, runs, detail, error, loading, connection, load, open, run, cancel, cleanup, reconnect, download, stop, reset };
+}

package/layer/app/types/regression.ts

@@ -0,0 +1,26 @@
+/** Plugin-owned business explanations and form fields for a registered scenario. */
+export interface RegressionCasePresentation {
+  expectationKeys: string[];
+  impactKey: string;
+  fields: Array<{
+    key: string;
+    labelKey: string;
+    control: 'text' | 'textarea';
+    helpKey?: string;
+  }>;
+  results?: Record<string, RegressionResultPresentation>;
+}
+
+/** Explicit plugin-owned mapping; the renderer never guesses business fields. */
+export interface RegressionResultField {
+  key: string;
+  labelKey: string;
+  format: 'text' | 'number' | 'boolean' | 'enum' | 'numbers' | 'items' | 'reference' | 'references';
+  values?: Record<string, string>;
+  fields?: RegressionResultField[];
+}
+export interface RegressionResultPresentation {
+  shape: 'scalar' | 'record' | 'list' | 'references';
+  fields: RegressionResultField[];
+  itemLabelKey?: string;
+}

package/layer/assets/css/sources.css

@@ -0,0 +1 @@
+@source "../../app";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artisan-cloud/plugin-framework-admin",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -14,7 +14,9 @@
   ],
   "peerDependencies": {
     "nuxt": "^4.2.0",
-    "@artisan-cloud/plugin-framework-client": "^0.0.12"
+    "@artisan-cloud/plugin-framework-client": "0.0.14",
+    "valibot": "^1.2.0",
+    "@types/node": "^22.18.0"
   },
   "devDependencies": {
     "nuxt": "^4.2.0"