@cat-factory/app 0.266.0 → 0.266.1

package/app/components/judge/JudgeResultView.vue

@@ -12,6 +12,7 @@ import { agentKindMeta } from '~/utils/catalog'
 import type { JudgeFinding, JudgeStepState } from '~/types/execution'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -190,11 +191,14 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
           {{ judge.note }}
         </p>
 
+        <!-- The verdict a human reads. Markdown, because the judge prompt asks for a verdict
+             line plus grouped bullets rather than one paragraph. -->
         <div v-if="verdict?.summary" class="relative mt-3">
           <CopyButton :text="verdict.summary" class="absolute end-1 top-1" />
-          <p class="whitespace-pre-wrap pe-8 text-[13px] leading-relaxed text-slate-200">
-            {{ verdict.summary }}
-          </p>
+          <MarkdownProse
+            :text="verdict.summary"
+            class="pe-8 text-[13px] leading-relaxed text-slate-200"
+          />
         </div>
 
         <section v-if="findings.length" class="mt-4">
@@ -220,12 +224,11 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
                   finding.where
                 }}</code>
               </div>
-              <p
+              <MarkdownProse
                 v-if="finding.detail"
-                class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
-              >
-                {{ finding.detail }}
-              </p>
+                :text="finding.detail"
+                class="mt-1 text-[12px] leading-relaxed text-slate-400"
+              />
             </li>
           </ul>
         </section>

package/app/components/panels/StepFragmentAdherence.vue

@@ -6,6 +6,7 @@
 // reviewer reported at least one standard; when none were reachable the reviewer says so in its
 // summary instead (so there is nothing to show here).
 import type { FragmentAdherence } from '~/types/execution'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
 
 const props = defineProps<{ items: FragmentAdherence }>()
 const { t } = useI18n()
@@ -63,12 +64,11 @@ function label(item: FragmentAdherence[number]): string {
             {{ t('panels.stepDetail.adherence.outOfTen', { value: item.rating }) }}
           </span>
         </div>
-        <p
+        <MarkdownProse
           v-if="item.assessment"
-          class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-300"
-        >
-          {{ item.assessment }}
-        </p>
+          :text="item.assessment"
+          class="mt-1 text-[12px] leading-relaxed text-slate-300"
+        />
         <div v-if="item.relatedFindings.length" class="mt-1.5">
           <p class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
             {{ t('panels.stepDetail.adherence.relatedFindings') }}

package/app/components/panels/StepMetadataCard.vue

@@ -4,6 +4,8 @@ import type { AgentState, PipelineStep, CompanionVerdict, StepApproval } from '~
 import { subtaskIconClass } from '~/utils/pipelineRender'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
+import CopyButton from '~/components/common/CopyButton.vue'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
 
 // The step's metadata card body: state/timing/model/run id, the container cold-boot
 // phase, the live subtask breakdown, the LLM observability rollup, the applied
@@ -281,22 +283,35 @@ async function copyRunId() {
           {{ latestVerdict?.passed ? '≥' : '<' }} {{ pctOf(latestVerdict!.threshold) }}
         </UBadge>
       </div>
-      <ol class="mt-2 space-y-1.5">
-        <li v-for="(v, i) in companionVerdicts" :key="i" class="flex items-start gap-2 text-[12px]">
-          <span
-            class="mt-px inline-flex h-4 shrink-0 items-center rounded px-1 font-mono text-[11px] tabular-nums"
-            :class="
-              v.passed ? 'bg-emerald-500/15 text-emerald-300' : 'bg-amber-500/15 text-amber-300'
-            "
-          >
-            {{ i + 1 }}
-          </span>
-          <div class="min-w-0">
+      <!-- One card per correction round: the score on its own line, then the reviewer's
+           challenge as rendered markdown. The feedback used to trail the score inside the same
+           line, which turned a multi-point review into one unreadable run of text. -->
+      <ol class="mt-2 space-y-2">
+        <li
+          v-for="(v, i) in companionVerdicts"
+          :key="i"
+          data-testid="companion-verdict"
+          class="relative rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
+        >
+          <CopyButton v-if="v.feedback" :text="v.feedback" class="absolute end-1 top-1" />
+          <div class="flex items-center gap-2 text-[12px]">
+            <span
+              class="inline-flex h-4 shrink-0 items-center rounded px-1 font-mono text-[11px] tabular-nums"
+              :class="
+                v.passed ? 'bg-emerald-500/15 text-emerald-300' : 'bg-amber-500/15 text-amber-300'
+              "
+            >
+              {{ i + 1 }}
+            </span>
             <span :class="v.passed ? 'text-emerald-300' : 'text-amber-300'">
               {{ pctOf(v.rating) }} {{ v.passed ? '≥' : '<' }} {{ pctOf(v.threshold) }}
             </span>
-            <span v-if="v.feedback" class="ms-1 text-slate-400">— {{ v.feedback }}</span>
           </div>
+          <MarkdownProse
+            v-if="v.feedback"
+            :text="v.feedback"
+            class="mt-1.5 pe-6 text-[12px] leading-relaxed text-slate-300"
+          />
         </li>
       </ol>
       <p v-if="companionVerdicts.length > 1" class="mt-1 text-[11px] text-slate-500">

package/app/components/panels/StepTestReport.vue

@@ -2,6 +2,7 @@
 import type { RequirementVerdictStatus, TestReport } from '~/types/domain'
 import type { TesterStepState } from '~/types/execution'
 import { resolveVerdictMeta, type VerdictMeta } from './StepTestReport.logic'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
 
 // A tester step's latest structured report (what was tested, the per-area outcomes,
 // the concerns it raised and the greenlight verdict) plus the fixer-loop phase.
@@ -57,9 +58,11 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
         }}<span v-if="phase.phase === 'fixing'"> {{ t('panels.testReport.fixing') }}</span>
       </span>
     </div>
-    <p v-if="report.summary" class="mb-3 text-[13px] leading-relaxed text-slate-300">
-      {{ report.summary }}
-    </p>
+    <MarkdownProse
+      v-if="report.summary"
+      :text="report.summary"
+      class="mb-3 text-[13px] leading-relaxed text-slate-300"
+    />
 
     <div v-if="report.tested.length" class="mb-3">
       <div class="mb-1 text-[11px] text-slate-500">{{ t('panels.testReport.tested') }}</div>
@@ -123,7 +126,7 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
           >
           <span class="font-medium text-slate-200">{{ c.title }}</span>
         </div>
-        <p v-if="c.detail" class="mt-1 text-slate-400">{{ c.detail }}</p>
+        <MarkdownProse v-if="c.detail" :text="c.detail" class="mt-1 text-slate-400" />
       </div>
     </div>
   </section>

package/app/components/prReview/PrReviewWindow.vue

@@ -29,6 +29,7 @@ import { activeChunkLabels, chunkReviewPercent, hasNoSlicePlan } from '~/utils/p
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import StepFragmentAdherence from '~/components/panels/StepFragmentAdherence.vue'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()
@@ -527,13 +528,13 @@ async function onDismiss(id: string): Promise<void> {
 
           <!-- The reviewer's overall assessment. Prose, so it takes the reading measure (see the
                shell's `width` prop) — this window is `full`-width. -->
-          <p
+          <div
             v-if="state?.summary"
             class="mb-3 max-w-3xl rounded-md bg-slate-800/50 px-3 py-2 text-[12px] text-slate-300"
           >
-            <span class="text-slate-500">{{ t('prReview.summaryLabel') }}</span>
-            {{ state.summary }}
-          </p>
+            <span class="mb-1 block text-slate-500">{{ t('prReview.summaryLabel') }}</span>
+            <MarkdownProse :text="state.summary" />
+          </div>
 
           <!-- Best-practice adherence: per standard folded into the reviewer's prompt, a 1..10
                rating of how well the PR adheres + the issues that standard surfaced. -->
@@ -680,12 +681,17 @@ async function onDismiss(id: string): Promise<void> {
                          bucket to `full`, so these are the three paragraphs the width would
                          otherwise have stretched furthest; the path/line row, the badges and the
                          per-finding actions are what it is actually for. -->
-                    <p
-                      class="mt-1 max-w-3xl whitespace-pre-wrap text-[12px] text-slate-300"
+                    <MarkdownProse
+                      v-if="f.detail"
+                      :text="f.detail"
+                      class="mt-1 max-w-3xl text-[12px] text-slate-300"
                       :class="isRetracted(f) ? 'line-through' : ''"
-                    >
-                      {{ f.detail }}
-                    </p>
+                    />
+                    <!-- The suggested fix is a VALUE a human copies (a patch line, a command, a
+                         path), not prose, so it stays preformatted: markdown would emphasise the
+                         `__dunder__` in an identifier, curl the quotes in a command, and drop the
+                         indentation of anything longer than a line. Same reason the CI gate's
+                         failure summary is left alone. -->
                     <p
                       v-if="f.suggestedFix"
                       class="mt-1 max-w-3xl whitespace-pre-wrap rounded-md bg-slate-800/50 px-2 py-1 text-[11px] text-slate-300"
@@ -696,10 +702,10 @@ async function onDismiss(id: string): Promise<void> {
 
                     <!-- The investigator's justification (why the finding holds up / was retracted),
                        or the reason the challenge investigation failed. -->
-                    <p
+                    <div
                       v-if="f.challenge?.justification"
                       data-testid="pr-review-finding-justification"
-                      class="mt-1.5 max-w-3xl whitespace-pre-wrap rounded-md px-2 py-1 text-[11px]"
+                      class="mt-1.5 max-w-3xl rounded-md px-2 py-1 text-[11px]"
                       :class="
                         isRetracted(f)
                           ? 'bg-rose-500/10 text-rose-200'
@@ -708,13 +714,16 @@ async function onDismiss(id: string): Promise<void> {
                             : 'bg-sky-500/10 text-sky-200'
                       "
                     >
-                      <span class="font-medium">{{
+                      <!-- A label that used to prefix its value inline now heads the block the
+                           rendered prose became, so it needs to READ as a heading line rather than
+                           as a stray word above a paragraph. -->
+                      <span class="mb-1 block font-medium">{{
                         isChallengeFailed(f)
                           ? t('prReview.challenge.failedLabel')
                           : t('prReview.challenge.verdictLabel')
                       }}</span>
-                      {{ f.challenge.justification }}
-                    </p>
+                      <MarkdownProse :text="f.challenge.justification" />
+                    </div>
 
                     <!-- Per-finding actions: Challenge + Dismiss (only while awaiting a selection). -->
                     <div

package/app/components/testing/TestReportWindow.vue

@@ -20,6 +20,7 @@ import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
 import AttemptEntryHeader from '~/components/panels/AttemptEntryHeader.vue'
 import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusPanel.vue'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -489,9 +490,11 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 :icon="a.outcome === 'completed' ? 'i-lucide-wrench' : 'i-lucide-circle-x'"
                 :icon-class="a.outcome === 'completed' ? 'text-amber-300' : 'text-rose-400'"
               />
-              <p v-if="a.summary" class="mt-1 max-w-3xl text-[12px] leading-snug text-slate-400">
-                {{ a.summary }}
-              </p>
+              <MarkdownProse
+                v-if="a.summary"
+                :text="a.summary"
+                class="mt-1 max-w-3xl text-[12px] leading-snug text-slate-400"
+              />
               <div v-if="a.concerns && a.concerns.length" class="mt-1.5">
                 <p class="text-[11px] text-slate-500">
                   {{ t('testing.fixerTimeline.addressed') }}
@@ -575,9 +578,11 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   d(new Date(vd.at), 'short')
                 }}</span>
               </div>
-              <p v-if="vd.feedback" class="mt-1 text-[12px] leading-snug text-slate-400">
-                {{ vd.feedback }}
-              </p>
+              <MarkdownProse
+                v-if="vd.feedback"
+                :text="vd.feedback"
+                class="mt-1 text-[12px] leading-snug text-slate-400"
+              />
               <div v-if="vd.gaps.length" class="mt-1.5">
                 <p class="text-[11px] text-slate-500">{{ t('testing.quality.gaps') }}</p>
                 <ul class="mt-1 space-y-0.5">
@@ -610,12 +615,11 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           <!-- Summary — the tester's own prose, so it takes the reading measure the shell's `full`
                width obliges (see the `width` prop). The scenario rows and log tails below keep the
                full span. -->
-          <p
+          <MarkdownProse
             v-if="report.summary"
+            :text="report.summary"
             class="mb-4 max-w-3xl text-[13px] leading-relaxed text-slate-300"
-          >
-            {{ report.summary }}
-          </p>
+          />
 
           <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
             {{ t('testing.scenariosOutcomes') }}
@@ -680,9 +684,11 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   />
                   <div class="min-w-0">
                     <span class="text-[13px] text-slate-200">{{ o.name }}</span>
-                    <p v-if="o.detail" class="max-w-3xl text-[12px] leading-snug text-slate-400">
-                      {{ o.detail }}
-                    </p>
+                    <MarkdownProse
+                      v-if="o.detail"
+                      :text="o.detail"
+                      class="max-w-3xl text-[12px] leading-snug text-slate-400"
+                    />
                   </div>
                 </div>
                 <p v-if="!g.outcomes.length" class="py-0.5 text-[12px] italic text-slate-500">
@@ -710,9 +716,11 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                         {{ SEVERITY_LABELS[c.severity] }}
                       </span>
                     </div>
-                    <p v-if="c.detail" class="max-w-3xl text-[12px] leading-snug text-slate-400">
-                      {{ c.detail }}
-                    </p>
+                    <MarkdownProse
+                      v-if="c.detail"
+                      :text="c.detail"
+                      class="max-w-3xl text-[12px] leading-snug text-slate-400"
+                    />
                   </div>
                 </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.266.0",
+  "version": "0.266.1",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",