happy-life-star/docs/superpowers/plans/2026-05-23-ai-test-output-rendering-fix.md

AI Test Output Rendering Fix Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Make AI endpoint tests stream parsed正文 and render Markdown in the web-admin test dialogs.

Architecture: Normalize provider stream deltas in backend adapters, add a frontend SSE/display fallback, and replace raw <pre> output blocks with a reusable Markdown preview. Keep request shapes and existing AI runtime APIs unchanged.

Tech Stack: Spring Boot, Fastjson2, Vue 3, Element Plus, markdown-it.

---

Task 1: Backend Stream Text Normalization

Files:

• Modify: server/src/main/java/com/emotion/service/ai/CozeProviderAdapter.java

• Modify: server/src/main/java/com/emotion/service/ai/DifyProviderAdapter.java

• Add a private helper that parses JSON string wrappers and returns output, answer, content, text, result, data.*, or outputs.*.

• Call the helper before returning every extracted delta string.

• Keep non-JSON Markdown/plain text unchanged.

Task 2: Frontend Stream Parsing Fallback

Files:

• Modify: web-admin/src/api/aiconfig.ts

• Add a normalizeAiText helper mirroring backend wrapper extraction.

• Apply it before appending delta.content in fetchSseStream.

• Preserve the current callback signature.

Task 3: Markdown Preview Component

Files:

• Modify: web-admin/package.json

• Modify: web-admin/package-lock.json

• Create: web-admin/src/components/MarkdownPreview.vue

• Add markdown-it and its TypeScript types.

• Create a scoped Markdown renderer with safe defaults (html: false, breaks: true, linkify: true).

• Style headings, paragraphs, lists, code blocks, tables, and blockquotes for the existing dark admin theme.

Task 4: Test Dialog Output UX

Files:

• Modify: web-admin/src/views/aiconfig/AiRoutingList.vue

• Import and use MarkdownPreview.

• Replace raw test <pre> blocks with scrollable output panels.

• Parse non-stream and stream result output before display.

• Auto-scroll output panels when stream text updates.

Task 5: Verification

Commands:

• cd web-admin && npm run build

• cd server && mvn test

• git diff --check

• Build passes.

• Backend tests pass.

• Diff check has no new whitespace errors beyond existing line-ending warnings.