@cat-factory/app 0.87.3 → 0.87.5

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/components/panels/inspector/ServiceFragments.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
 
 // Service-level best-practice fragments (frame blocks). These are the programming
 // standards/guidelines for the whole service; at run time their bodies are folded
@@ -19,8 +21,6 @@ const { t } = useI18n()
 
 onMounted(() => fragments.ensureLoaded())
 
-type MenuItem = { label: string; icon?: string; onSelect: () => void }
-
 // An id the catalog no longer resolves (removed/suppressed after selection) still
 // renders — labelled by its raw id — so it stays visible and removable.
 const selectedFragments = computed(() =>
@@ -32,8 +32,8 @@ const selectedFragments = computed(() =>
 // A trailing group that jumps from "attach a fragment" to authoring/editing the
 // library itself (board tier always; account tier when accounts are enabled).
 // Open to every member — managing fragments is not an admin-only action.
-const manageItems = computed<MenuItem[]>(() => {
-  const items: MenuItem[] = [
+const manageItems = computed<DropdownMenuItem[]>(() => {
+  const items: DropdownMenuItem[] = [
     {
       label: t('inspector.fragments.manageBoard'),
       icon: 'i-lucide-book-marked',
@@ -50,18 +50,14 @@ const manageItems = computed<MenuItem[]>(() => {
   return items
 })
 
-// Picker menu: every pool fragment not already selected, grouped by category, with
-// the management links appended as the final group.
-const fragmentMenu = computed<MenuItem[][]>(() => {
+// Picker menu: every pool fragment not already selected, grouped into labelled
+// per-category sections, with the management links appended as the final group.
+const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
   const selected = new Set(props.block.serviceFragmentIds ?? [])
-  const groups = new Map<string, MenuItem[]>()
-  for (const f of fragments.fragments) {
-    if (selected.has(f.id)) continue
-    const items = groups.get(f.category) ?? []
-    items.push({ label: f.title, onSelect: () => addFragment(f.id) })
-    groups.set(f.category, items)
-  }
-  return [...groups.values(), manageItems.value]
+  return [
+    ...buildFragmentPickerGroups(fragments.fragments, (id) => selected.has(id), addFragment),
+    manageItems.value,
+  ]
 })
 
 function addFragment(id: string) {

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
 
 const props = defineProps<{ block: Block }>()
 
@@ -14,8 +16,6 @@ const { t } = useI18n()
 // task inspector mounts — mirrors ServiceFragments; ensureLoaded is a no-op while current.
 onMounted(() => fragments.ensureLoaded())
 
-type MenuItem = { label: string; icon?: string; onSelect: () => void }
-
 // ---- best-practice prompt fragments ----------------------------------------
 // Selected fragments, resolved against the catalog. An id the catalog no longer
 // resolves (removed/suppressed after selection) still renders — labelled by its
@@ -29,8 +29,8 @@ const selectedFragments = computed(() =>
 // A trailing group that jumps from "attach a fragment" to authoring/editing the
 // library itself (board tier always; account tier when accounts are enabled).
 // Open to every member — managing fragments is not an admin-only action.
-const manageItems = computed<MenuItem[]>(() => {
-  const items: MenuItem[] = [
+const manageItems = computed<DropdownMenuItem[]>(() => {
+  const items: DropdownMenuItem[] = [
     {
       label: t('inspector.fragments.manageBoard'),
       icon: 'i-lucide-book-marked',
@@ -48,18 +48,18 @@ const manageItems = computed<MenuItem[]>(() => {
 })
 
 // Picker menu: fragments suitable for this block's type, not already selected,
-// grouped by category so the dropdown reads like the catalog, with the management
-// links appended as the final group.
-const fragmentMenu = computed<MenuItem[][]>(() => {
+// grouped into labelled per-category sections so the dropdown reads like the catalog,
+// with the management links appended as the final group.
+const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
   const selected = new Set(props.block.fragmentIds ?? [])
-  const groups = new Map<string, MenuItem[]>()
-  for (const f of fragments.forBlockType(props.block.type)) {
-    if (selected.has(f.id)) continue
-    const items = groups.get(f.category) ?? []
-    items.push({ label: f.title, onSelect: () => addFragment(f.id) })
-    groups.set(f.category, items)
-  }
-  return [...groups.values(), manageItems.value]
+  return [
+    ...buildFragmentPickerGroups(
+      fragments.forBlockType(props.block.type),
+      (id) => selected.has(id),
+      addFragment,
+    ),
+    manageItems.value,
+  ]
 })
 
 function addFragment(id: string) {

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -6,6 +6,7 @@
 // services — each owns its selection from creation. Persisted via the
 // serviceFragmentDefaults store (the backend replaces the whole list on each change).
 import { onMounted, ref } from 'vue'
+import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
 
 const { t } = useI18n()
 const fragments = useFragmentsStore()
@@ -24,17 +25,10 @@ const selected = computed(() =>
   defaults.fragmentIds.map((id) => fragments.getFragment(id) ?? { id, title: id, summary: '' }),
 )
 
-// Pool fragments not already in the default set, grouped by category.
+// Pool fragments not already in the default set, grouped into labelled per-category sections.
 const menu = computed(() => {
   const chosen = new Set(defaults.fragmentIds)
-  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
-  for (const f of fragments.fragments) {
-    if (chosen.has(f.id)) continue
-    const items = groups.get(f.category) ?? []
-    items.push({ label: f.title, onSelect: () => add(f.id) })
-    groups.set(f.category, items)
-  }
-  return [...groups.values()]
+  return buildFragmentPickerGroups(fragments.fragments, (id) => chosen.has(id), add)
 })
 
 async function save(ids: string[]) {

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/app/utils/fragmentPicker.spec.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest'
+import type { PromptFragment } from '~/types/domain'
+import { buildFragmentPickerGroups } from './fragmentPicker'
+
+const frag = (id: string, category: string, title = id): PromptFragment =>
+  ({ id, version: '1.0.0', title, category, summary: '', body: '' }) as PromptFragment
+
+const pool: PromptFragment[] = [
+  frag('node.best-practices', 'Node', 'Node best practices'),
+  frag('node.performance', 'Node', 'Node performance'),
+  frag('style.anti-llmisms', 'Writing style', 'Avoid LLM tells'),
+  frag('style.concise-actionable', 'Writing style', 'Concise and actionable'),
+]
+
+describe('buildFragmentPickerGroups', () => {
+  it('buckets fragments into one labelled group per category (technical + writing-style tracks)', () => {
+    const groups = buildFragmentPickerGroups(
+      pool,
+      () => false,
+      () => {},
+    )
+    // One group per category, each led by a non-interactive `type: 'label'` heading.
+    expect(groups.map((g) => g[0])).toEqual([
+      { type: 'label', label: 'Node' },
+      { type: 'label', label: 'Writing style' },
+    ])
+    // The heading is followed by that category's item labels, in pool order.
+    expect(groups[0]!.slice(1).map((i) => i.label)).toEqual([
+      'Node best practices',
+      'Node performance',
+    ])
+    expect(groups[1]!.slice(1).map((i) => i.label)).toEqual([
+      'Avoid LLM tells',
+      'Concise and actionable',
+    ])
+  })
+
+  it('omits already-selected fragments, dropping a category that empties out', () => {
+    const selected = new Set(['style.anti-llmisms', 'style.concise-actionable'])
+    const groups = buildFragmentPickerGroups(
+      pool,
+      (id) => selected.has(id),
+      () => {},
+    )
+    // Writing style fully selected → its category disappears entirely (no empty labelled group).
+    expect(groups.map((g) => g[0])).toEqual([{ type: 'label', label: 'Node' }])
+  })
+
+  it('invokes onSelect with the fragment id when an item is chosen', () => {
+    const picked: string[] = []
+    const groups = buildFragmentPickerGroups(
+      pool,
+      () => false,
+      (id) => picked.push(id),
+    )
+    // Fire the first real item under the first category (index 1, past the label heading).
+    ;(groups[0]![1] as { onSelect: () => void }).onSelect()
+    expect(picked).toEqual(['node.best-practices'])
+  })
+})

package/app/utils/fragmentPicker.ts

@@ -0,0 +1,32 @@
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { PromptFragment } from '~/types/domain'
+
+/**
+ * Build the category-grouped groups for a fragment "add" dropdown: the pool fragments not
+ * already selected, bucketed by `category`, each bucket prefixed with a non-interactive
+ * `type: 'label'` heading so the catalog reads as labelled sections instead of one flat,
+ * undifferentiated list. This matters now that the catalog spans distinct tracks that a
+ * single block can pin together — the technical collections (Node / React / …) AND the
+ * document Writing-style fragments — so the headings keep the longer, mixed list navigable.
+ *
+ * Category order follows first appearance in `pool`; empty categories are dropped. Each
+ * inner array is one Nuxt UI menu group (rendered divider-separated); callers append their
+ * own trailing groups (e.g. the library-management links) after the returned groups.
+ */
+export function buildFragmentPickerGroups(
+  pool: PromptFragment[],
+  isSelected: (id: string) => boolean,
+  onSelect: (id: string) => void,
+): DropdownMenuItem[][] {
+  const groups = new Map<string, DropdownMenuItem[]>()
+  for (const f of pool) {
+    if (isSelected(f.id)) continue
+    const items = groups.get(f.category) ?? []
+    items.push({ label: f.title, onSelect: () => onSelect(f.id) })
+    groups.set(f.category, items)
+  }
+  return [...groups.entries()].map(([category, items]): DropdownMenuItem[] => [
+    { type: 'label', label: category },
+    ...items,
+  ])
+}

package/package.json

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