Skip to content

feat: inline file preview card for agent-created and filesystem files#5373

Open
Eiyron wants to merge 1 commit intoMintplex-Labs:masterfrom
Eiyron:feat/file-preview-card
Open

feat: inline file preview card for agent-created and filesystem files#5373
Eiyron wants to merge 1 commit intoMintplex-Labs:masterfrom
Eiyron:feat/file-preview-card

Conversation

@Eiyron
Copy link
Copy Markdown

@Eiyron Eiyron commented Apr 7, 2026

What this adds

Whenever the agent creates or edits a file via both the create-*-file skills and the filesystem-write-text-file / filesystem-edit-file tools, a collapsible inline preview card now appears in the chat. No download required to see what was created.

Preview supports

  • 30+ programming languages with VSCode-style syntax highlighting (Python, Lua, PowerShell, Batch, Shell, Rust, Go, JS/TS, C#, Java, C/C++, Ruby, PHP, SQL, YAML, and more)
    • Plain text formats: .txt, .md, .csv, .json
    • PDF rendered via inline iframe
    • Images (.png, .jpg, .gif, .webp, .svg)
    • Binary formats (PPTX, DOCX, XLSX) show a graceful "preview not available" message with download button

Files changed (7 files)

  • NEW: FilePreviewCard/index.jsx — collapsible preview card component
    • ChatHistory/index.jsx — routes fileDownloadCard websocket messages to FilePreviewCard
    • HistoricalOutputs/index.jsx — uses FilePreviewCard for historical messages
    • models/files.js — adds previewUrl() and fetchText() helpers
    • agentFileServer.js — adds /preview endpoint; relaxes DB ownership check so files serve immediately before chat record is saved
    • filesystem/write-text-file.js — registers preview output via socket.send() (live) and registerOutput() (historical) after writing
    • filesystem/edit-file.js — same as above after edits

Technical notes

  • Race condition fix: endpoint no longer requires a DB chat record before serving — checks storage first
    • Collapse state backed by sessionStorage so it survives streaming and scroll re-renders without jitter
    • Line numbers sync scroll with code content via JS scrollTop sync
    • /preview endpoint accepts ?token= query param for iframe/img src embedding

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

blocked PR:needs review Needs review by core team UI/UX

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants