@cat-factory/app 0.87.3 → 0.87.4

package/app/components/common/MarkdownProse.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+// Shared inline markdown renderer for agent prose (a rationale, a synthesis, a summary).
+// Routes text through the secure `renderMarkdown` reader (markdown-it, `html: false`, links
+// decorated to open safely in a new tab) instead of the `whitespace-pre-wrap` plain-text
+// dumps several result views used to show (UX-43) — so `**bold**`, lists, code, and links in
+// an agent's output read as formatted prose, consistently with `AgentStepDetail`'s reader.
+import { computed } from 'vue'
+import { renderMarkdown } from '~/utils/agentOutput'
+
+const props = defineProps<{
+  /** The agent's raw markdown text. */
+  text: string | null | undefined
+}>()
+
+const html = computed(() => renderMarkdown(props.text))
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html (sanitized by renderMarkdown, html: false) -->
+  <div class="cf-prose" v-html="html" />
+</template>
+
+<style scoped>
+/* Prose styling for the sanitized markdown injected via v-html (out of scoped reach
+   without :deep), mirroring the inspector reader's prose styling. */
+.cf-prose :deep(p) {
+  margin: 0.5rem 0;
+}
+.cf-prose :deep(p:first-child) {
+  margin-top: 0;
+}
+.cf-prose :deep(p:last-child) {
+  margin-bottom: 0;
+}
+.cf-prose :deep(ul),
+.cf-prose :deep(ol) {
+  margin: 0.5rem 0;
+  padding-left: 1.25rem;
+}
+.cf-prose :deep(ul) {
+  list-style: disc;
+}
+.cf-prose :deep(ol) {
+  list-style: decimal;
+}
+.cf-prose :deep(li) {
+  margin: 0.2rem 0;
+}
+.cf-prose :deep(strong) {
+  font-weight: 600;
+  color: rgb(226 232 240);
+}
+.cf-prose :deep(em) {
+  font-style: italic;
+}
+.cf-prose :deep(code) {
+  border-radius: 0.25rem;
+  background: rgb(30 41 59 / 0.8);
+  padding: 0.1rem 0.3rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.85em;
+  color: rgb(199 210 254);
+}
+.cf-prose :deep(pre) {
+  margin: 0.6rem 0;
+  overflow: auto;
+  border-radius: 0.5rem;
+  background: rgb(2 6 23 / 0.6);
+  padding: 0.75rem 0.9rem;
+}
+.cf-prose :deep(pre code) {
+  background: transparent;
+  padding: 0;
+  color: rgb(203 213 225);
+}
+.cf-prose :deep(blockquote) {
+  margin: 0.6rem 0;
+  border-left: 3px solid rgb(99 102 241 / 0.5);
+  padding-left: 0.75rem;
+  color: rgb(148 163 184);
+}
+.cf-prose :deep(h1),
+.cf-prose :deep(h2),
+.cf-prose :deep(h3),
+.cf-prose :deep(h4) {
+  margin: 0.7rem 0 0.4rem;
+  font-weight: 600;
+  color: rgb(226 232 240);
+}
+.cf-prose :deep(table) {
+  margin: 0.6rem 0;
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+.cf-prose :deep(th),
+.cf-prose :deep(td) {
+  border: 1px solid rgb(51 65 85);
+  padding: 0.3rem 0.6rem;
+}
+.cf-prose :deep(th) {
+  background: rgb(30 41 59 / 0.6);
+  font-weight: 600;
+}
+.cf-prose :deep(hr) {
+  margin: 1rem 0;
+  border: none;
+  border-top: 1px solid rgb(51 65 85);
+}
+</style>

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -9,6 +9,7 @@
 import { computed } from 'vue'
 import type { ConsensusContribution, ConsensusSession } from '~/types/consensus'
 import CopyButton from '~/components/common/CopyButton.vue'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import { agentKindMeta } from '~/utils/catalog'
 
 const { t, n } = useI18n()
@@ -171,11 +172,12 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                   class="rounded bg-emerald-500/15 px-1.5 py-0.5 text-xs text-emerald-300"
                   >{{ t('consensus.confidence', { pct: pct(session.confidence) }) }}</span
                 >
+                <CopyButton :text="session.synthesis" class="ms-auto -my-1" />
               </div>
-              <pre
-                class="whitespace-pre-wrap rounded-lg border border-slate-800 bg-slate-950/60 px-4 py-3 text-sm text-slate-200"
-                >{{ session.synthesis }}</pre
-              >
+              <MarkdownProse
+                :text="session.synthesis"
+                class="rounded-lg border border-slate-800 bg-slate-950/60 px-4 py-3 text-sm text-slate-200"
+              />
               <ul v-if="session.dissent?.length" class="mt-2 space-y-1">
                 <li
                   v-for="(d, i) in session.dissent"
@@ -237,8 +239,9 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                         })
                       }}</span
                     >
+                    <CopyButton :text="c.text" :class="topScore(c) ? '-my-1' : 'ms-auto -my-1'" />
                   </div>
-                  <pre class="whitespace-pre-wrap text-sm text-slate-300">{{ c.text }}</pre>
+                  <MarkdownProse :text="c.text" class="text-sm text-slate-300" />
                   <div v-if="c.scores?.length" class="mt-2 flex flex-wrap gap-1.5">
                     <span
                       v-for="s in c.scores"

package/app/components/panels/GenericStructuredResultView.vue

@@ -9,6 +9,8 @@
 import { computed } from 'vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import CopyButton from '~/components/common/CopyButton.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -94,17 +96,19 @@ const customJson = computed<string | null>(() => {
         <div class="flex min-h-0 flex-1">
           <!-- Main: prose summary + structured JSON -->
           <div class="min-w-0 flex-1 overflow-y-auto px-5 py-4">
-            <p
+            <MarkdownProse
               v-if="step?.output"
-              class="mb-4 whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300"
-            >
-              {{ step.output }}
-            </p>
+              :text="step.output"
+              class="mb-4 text-[13px] leading-relaxed text-slate-300"
+            />
 
             <template v-if="customJson">
-              <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                {{ t('panels.structuredResult.structuredOutput') }}
-              </h3>
+              <div class="mb-2 flex items-center gap-2">
+                <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  {{ t('panels.structuredResult.structuredOutput') }}
+                </h3>
+                <CopyButton :text="customJson" class="-my-1" />
+              </div>
               <pre
                 class="overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-[12px] leading-relaxed text-slate-200"
               ><code>{{ customJson }}</code></pre>

package/app/components/panels/MergerResultView.vue

@@ -10,6 +10,7 @@ import { computed } from 'vue'
 import type { MergeAxis, MergeDecision } from '@cat-factory/contracts'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import MarkdownProse from '~/components/common/MarkdownProse.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -221,9 +222,10 @@ const reasonText = computed(() => {
                 >
                   {{ t('panels.mergerResult.rationale') }}
                 </h3>
-                <p class="whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
-                  {{ decision.assessment.rationale }}
-                </p>
+                <MarkdownProse
+                  :text="decision.assessment.rationale"
+                  class="text-[13px] leading-relaxed text-slate-300"
+                />
               </template>
               <p v-else class="text-[13px] italic leading-relaxed text-slate-500">
                 {{ t('panels.mergerResult.noAssessment') }}
@@ -231,12 +233,11 @@ const reasonText = computed(() => {
             </template>
 
             <!-- Pre-structured runs kept only the raw prose output. -->
-            <p
+            <MarkdownProse
               v-else-if="step?.output"
-              class="whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300"
-            >
-              {{ step.output }}
-            </p>
+              :text="step.output"
+              class="text-[13px] leading-relaxed text-slate-300"
+            />
             <div
               v-else
               class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"

package/app/utils/agentOutput.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { parseOutputOutline, sliceSource } from '~/utils/agentOutput'
+import { parseOutputOutline, renderMarkdown, sliceSource } from '~/utils/agentOutput'
 
 describe('parseOutputOutline', () => {
   it('splits on headings and builds a ToC', () => {
@@ -75,6 +75,49 @@ describe('parseOutputOutline', () => {
   })
 })
 
+describe('renderMarkdown', () => {
+  it('renders inline marks and preserves single newlines as breaks', () => {
+    const html = renderMarkdown('see **bold** and _em_\nnext line')
+    expect(html).toContain('<strong>bold</strong>')
+    expect(html).toContain('<em>em</em>')
+    expect(html).toContain('<br')
+  })
+
+  it('renders lists and fenced code', () => {
+    const html = renderMarkdown(['- a', '- b', '', '```', 'const x = 1', '```'].join('\n'))
+    expect(html).toContain('<ul')
+    expect(html).toContain('<li>a</li>')
+    expect(html).toContain('<pre>')
+    expect(html).toContain('const x = 1')
+  })
+
+  it('escapes raw HTML rather than injecting it (html: false)', () => {
+    const html = renderMarkdown('<img src=x onerror=alert(1)>')
+    expect(html).not.toContain('<img')
+    expect(html).toContain('&lt;img')
+  })
+
+  it('decorates links to open safely in a new tab', () => {
+    const html = renderMarkdown('[site](https://example.com)')
+    expect(html).toContain('href="https://example.com"')
+    expect(html).toContain('target="_blank"')
+    expect(html).toContain('rel="noopener noreferrer"')
+  })
+
+  it('does not create a link for javascript: URLs', () => {
+    const html = renderMarkdown('[x](javascript:alert(1))')
+    expect(html).not.toContain('<a ')
+    expect(html).not.toContain('href')
+  })
+
+  it('renders empty string for empty / nullish input', () => {
+    expect(renderMarkdown('')).toBe('')
+    expect(renderMarkdown('   ')).toBe('')
+    expect(renderMarkdown(null)).toBe('')
+    expect(renderMarkdown(undefined)).toBe('')
+  })
+})
+
 describe('sliceSource', () => {
   it('returns the verbatim line range (0-based, end-exclusive)', () => {
     const text = ['line0', 'line1', 'line2', 'line3'].join('\n')

package/app/utils/agentOutput.ts

@@ -78,6 +78,43 @@ const md = new MarkdownIt({
 const HEADINGS = new Set(['H1', 'H2', 'H3', 'H4', 'H5', 'H6'])
 const LINK_CLASS = 'text-indigo-300 underline decoration-indigo-500/40 hover:text-indigo-200'
 
+// A second markdown-it instance for INLINE prose rendering (a rationale, a synthesis,
+// a summary) — the same secure config as `md` (html: false, so raw HTML is escaped and
+// dangerous link schemes are blocked by `validateLink`), but without the segmentation
+// plugin: these surfaces render one continuous document, not a ToC-navigable outline.
+// Link attributes are set through a renderer rule (not DOM post-processing) so the
+// function returns ready-to-inject HTML without depending on `document`.
+const proseMd = new MarkdownIt({
+  html: false, // secure by default: escape raw HTML rather than render it
+  linkify: true, // turn bare URLs into links
+  breaks: true, // single newlines → <br>, matching how agents lay out prose
+  typographer: true,
+})
+
+// Make every rendered link open safely in a new tab and pick up the prose link style,
+// mirroring `decorateLinks` but at the token level so no DOM is required.
+const defaultLinkOpen =
+  proseMd.renderer.rules.link_open ??
+  ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options))
+proseMd.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+  const token = tokens[idx]!
+  token.attrSet('target', '_blank')
+  token.attrSet('rel', 'noopener noreferrer')
+  token.attrSet('class', LINK_CLASS)
+  return defaultLinkOpen(tokens, idx, options, env, self)
+}
+
+/**
+ * Render an agent's prose (markdown) to safe HTML for inline display. Escapes raw HTML,
+ * blocks dangerous link schemes, and decorates links to open safely in a new tab — the
+ * same guarantees as the reader overlay, minus the heading segmentation. Empty/nullish
+ * input renders to an empty string.
+ */
+export function renderMarkdown(text: string | null | undefined): string {
+  const source = text ?? ''
+  return source.trim() ? proseMd.render(source) : ''
+}
+
 function slugify(title: string, used: Set<string>): string {
   const base =
     title

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.87.3",
+  "version": "0.87.4",
   "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",