feat: add DocumentSegment for inline HTML/SVG/Mermaid rendering#50
Merged
Conversation
Agent responses containing full documents (HTML reports, SVG diagrams, Mermaid charts) were previously truncated to 4000 chars server-side, then stripped of all HTML tags by rehype-sanitize, leaving only raw text. This three-layer failure made rich documents unreadable. Add a general DocumentSegment type to the artifact pipeline: - extractDocumentSpans(): two-pass detection — fenced code blocks with document languages (html/svg/mermaid, ≥500 chars) and inline HTML documents (≥1000 chars), including truncated streams missing </html> - Server sanitizer: raise text limit to 32K for document-containing events, with HTML-safe truncation at tag boundaries - InlineArtifactCard: new InlineDocumentCard with 240px sandboxed iframe preview in the timeline - ArtifactView: new DocumentFrame for full-height left-panel preview - Mermaid content wrapped in an HTML shell with CDN mermaid@11 13 new test cases covering extraction, resolution, and edge cases. Change-Id: I76108b0e606938fc5f3cbc34d7f78d6b52dadcd8 Co-developed-by: Qoder CLI <noreply@qoder.com>
Remove pointer-events:none from .inline-document-frame so users can scroll inside the 240px iframe preview to inspect document content. Change-Id: I6288215632c55aeb2b61315d9d219dbd22c55e30 Co-developed-by: Qoder CLI <noreply@qoder.com>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Address CodeQL "Incomplete URL substring sanitization" finding by using reserved example.test domains instead of fonts.googleapis.com in test fixtures. Change-Id: I38596faa833c770757bcf91131d99a72e8868d21 Co-developed-by: Qoder CLI <noreply@qoder.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Agent responses containing full documents (HTML reports, SVG diagrams, Mermaid charts) were previously unreadable due to a three-layer failure: server-side truncation at 4000 chars → artifact extraction blind spot for inline documents → rehype-sanitize stripping all HTML tags. The result was "内容已截断" with raw text only.
This PR adds a general
DocumentSegmenttype to the artifact pipeline that handles any self-contained rich document output by agents.Changes
artifact.ts—extractDocumentSpans()with two-pass detection: fenced code blocks with document languages (html/svg/mermaid, ≥500 chars) and inline HTML documents (≥1000 chars), including truncated streams missing</html>. Two-passextractArtifacts(): documents first, then URL extraction on remaining text. AddedresolveDocumentContent()(wraps Mermaid in HTML shell with CDN mermaid@11),documentTypeLabel(),extractHtmlTitle().session-event-sanitizer.ts— NewDOCUMENT_TEXT_LIMIT = 32Kfor document-containing events (vs 4K default / 8K tool). HTML-safe truncation at tag boundaries.InlineArtifactCard.tsx— NewInlineDocumentCard: 240px sandboxed iframe preview in timeline with "新窗口" button.ArtifactView.tsx— NewDocumentFrame: full-height iframe with toolbar for left-panel preview.desktop.css— Styles for.inline-document-card,.inline-document-frame, etc.artifact.test.ts— 13 new test cases covering extraction, resolution, and edge cases (44 total tests).Test plan