feat: preview panel

[louis-jan]

Describe Your Changes

This PR is to add a side preview panel (later can be artifacts / canvas or interactive content?).

As a user, I find it hard to view the response content, especially when:

1. Tool call wrapped in 1 single line, which is super long. We could not wrap it vertically; otherwise, the user will have to scroll tiredly to see the bottom part.
2. Some of the formats will not be rendered inline while streaming, or it's hard to render, and the main chat scroll view is not ideally suited for that (glitch issue).

Some of the preview content supported in this PR

1. Mermaid diagram

2. Tool call output (e.g. browser_screenshot)

3. Markdown content

4. Reasoning output:

Fixes Issues

• Closes #
• Closes #

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

[Copilot]

Pull request overview

This PR introduces a side preview panel feature that allows users to view content (tool outputs, Mermaid diagrams, markdown messages, and reasoning output) in a dedicated panel, improving content readability and UX when dealing with long tool outputs or complex visualizations.

Key Changes

• Added a new Zustand-based state management hook (useToolCallPanel) to manage panel open/close state and panel data
• Implemented SidePreviewPanel component with support for multiple content types (tool calls, Mermaid diagrams, messages, thinking/reasoning)
• Integrated "View in Panel" buttons across tool call blocks, thinking blocks, message content, and Mermaid code blocks
• Added Mermaid diagram rendering support with new utility functions and renderer component

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
web-app/src/hooks/useToolCallPanel.ts	New Zustand hook managing preview panel state with mutual exclusivity to left panel
web-app/src/containers/ToolCallPanel.tsx	New side panel component supporting multiple content types with copy/download functionality
web-app/src/components/MermaidRenderer.tsx	New component for rendering Mermaid diagrams with error handling
web-app/src/lib/utils.ts	Added utility functions to detect and extract Mermaid diagrams from markdown
web-app/src/containers/ToolCallBlock.tsx	Added "View in Panel" button to tool call blocks
web-app/src/containers/ThinkingBlock.tsx	Added "View in Panel" button to thinking/reasoning blocks
web-app/src/containers/ThreadContent.tsx	Added "View in Panel" button to message content
web-app/src/containers/RenderMarkdown.tsx	Added "View in Panel" button for Mermaid code blocks
web-app/src/routes/threads/$threadId.tsx	Integrated panel into thread layout with responsive design
web-app/src/containers/LeftPanel.tsx	Added logic to close preview panel when left panel opens
web-app/src/containers/HeaderPage.tsx	Added logic to close preview panel when left panel opens via header toggle
web-app/src/providers/KeyboardShortcuts.tsx	Added logic to close preview panel on sidebar keyboard shortcut
web-app/src/containers/dialogs/AppUpdater.tsx	Changed z-index from z-50 to z-60 (likely to appear above preview panel)
web-app/src/locales/en/common.json	Added new translation keys for panel UI elements
web-app/package.json	Added mermaid dependency (^11.12.2)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Barecheck - Code coverage report

Total: 29.66%

Your code coverage diff: -0.38% ▾

Uncovered files and lines

File	Lines
web-app/src/components/MermaidRenderer.tsx	1-2, 10-15, 17-20, 22-24, 26, 28, 31-38, 40-41, 43-50, 52, 54-59, 61
web-app/src/containers/HeaderPage.tsx	1-4, 10-15, 20-26, 28, 31-34, 36-54, 56-59, 61, 63-65, 67-69, 71-72, 74-77, 79-82, 84-86, 88-92, 94-98, 100-101, 104-112, 115-116, 118, 120-121, 123-124, 126, 128
web-app/src/containers/LeftPanel.tsx	102-105, 117, 120-124, 127-138, 184-186, 200-202, 205-207, 210-213, 215-222, 227, 241-243, 245-253, 263, 266-267, 271, 279, 283, 285-288, 301, 314-320, 322-323, 332-335, 337-353, 355-356, 358, 368-372, 374, 376, 378, 386-387, 415-430, 432-438, 440-444, 446, 448-459, 461-473, 475-480, 482-489, 491-498, 500, 502-505, 512-540, 542-557, 559-560, 564-576, 578-591, 595-598, 600-609, 649, 672-677, 703
web-app/src/containers/RenderMarkdown.tsx	38-39, 76-78, 87-96, 98-102, 104-105, 108-116, 118-124, 126-141, 143-145, 147-150, 158-168, 170-171, 173-175, 177-181, 183-186, 188-202, 204-212, 214-223, 225-227, 229, 250-251, 254-256, 276-285
web-app/src/containers/ThinkingBlock.tsx	1-7, 20-29, 31-36, 39-48, 50-61, 63-64, 66-72, 74-76, 78, 80-89, 91-92, 94, 96-99, 101-102, 104, 106
web-app/src/containers/ThreadContent.tsx	3-5, 11-18, 23, 28-29, 31, 33-36, 38-40, 42-46, 48-51, 53-57, 59-66, 68, 70, 73-75, 89-92, 95-98, 100-103, 105-107, 109-112, 115-120, 122, 124-127, 129-130, 133-140, 143-152, 154-155, 157-159, 161, 163-171, 173-194, 196-198, 200-212, 214-217, 219-224, 226-236, 238-242, 244, 248-251, 253-264, 268-274, 276-280, 282-293, 295-298, 302-312, 314-325, 327-331, 334-341, 343-353, 355-366, 369-376, 378-379, 382-387, 389-390, 393-396, 398-407, 409-412, 414-419, 421-428, 430-433, 435-438, 440-444, 446-452, 454-459, 461-467, 469, 471-478, 480, 483-491, 493-494, 496-497
web-app/src/containers/ToolCallBlock.tsx	1-9, 24-33, 48, 50-54, 57-60, 62-68, 70-77, 80-84, 88-97, 99-103, 105, 108-113, 115, 117-121, 124-125, 127-130, 132-145, 147-149, 151-153, 156-158, 160-163, 165-171, 173-181, 183-185, 187, 189-195, 197-206, 208-209, 211, 213-217, 219-227, 230-233, 235-244, 247-251, 253, 255, 257-259, 261-262, 264, 266
web-app/src/containers/ToolCallPanel.tsx	1-5, 7, 12, 32-37, 40-43, 45-59, 62-66, 70-84, 86, 89-93, 95, 98-103, 105, 107-109, 112-113, 116-121, 123-125, 127-129, 131-133, 135-136, 138-152, 154-157, 159-161, 163-183, 185-194, 197-212, 214-225, 227-238, 240-252, 254-255, 257-260, 263, 265-274, 276-281, 283-284, 286, 288-293, 296-301, 303-309, 312-315, 317-320, 323, 325-338, 340-342, 346-365, 367-370, 372, 375-379, 381, 383-384, 386-387, 389-390, 392
web-app/src/containers/dialogs/AppUpdater.tsx	1, 3-4, 6-11, 13-21, 23-26, 28, 30-34, 37-39, 41-44, 46-51, 53, 55-61, 63-81, 83-88, 90-97, 99-100, 102-104, 106, 109-114, 116-124, 126-130, 132-140, 142, 144, 146
web-app/src/hooks/useToolCallPanel.ts	47-50, 52-56, 58-61
web-app/src/lib/utils.ts	12-13, 16-20, 23-24, 36, 42, 44, 46, 48, 50, 56, 65, 75, 120-122, 160-161, 194-203, 214-215, 221-224, 226-231, 233-234
web-app/src/providers/KeyboardShortcuts.tsx	1-6, 8-11, 14-16, 19-22, 24-28, 31-36, 39-44, 47-48
web-app/src/routes/threads/$threadId.tsx	1-6, 8-13, 15-32, 34, 36-53, 55, 58-59, 61, 63, 65, 67-72, 75-79, 81-89, 91-94, 96, 98-102, 105-106, 110-113, 115-117, 119-124, 126-130, 132-137, 139, 141-146, 148-152, 154-155, 158-160, 162, 164-165, 167-168, 170, 172-188, 190-196, 198-207, 209, 211, 213-214, 216-220, 222-226, 228-239, 241-242, 244-246, 249-252, 254-255, 257-263, 265-274, 277-280, 282-287, 289-294, 296, 298-301, 303-310, 313-314, 316, 318

[cab938]

@louis-jan I'd like to ask a question about this. I've been contemplating adding in a feature like this to my local Jan install, but actually by making it available to Jan in an agentic fashion -- giving it a self-hosted MCP server that it can use to update a shared artifact with the user. This would allow for what you have added here, but in a very different fashion as it would allow continued back and forth interaction with the user through both the conversation and through changes to the artifact. Paradigmatically I think it would fit well with where agents are heading.

My biggest interest is actually to have a shared rendered markdown editor I can use with Jan, but I would also like to be able to work in other domains and documents as well (esp. mermaid). This way I could ask Jan to prepare some thoughts for me then we could co-edit documents in a google-doc like experience, where the model is able to continuously update portions of the document based on further conversational instruction.

So why comment on this PR? It seems partway there for what I've been exploring, but also functionally different, so I was hoping you might share some thoughts on how well what I've outlined might fit on top of what you have written, or whether I should pursue it in a different manner.

[louis-jan]

Hi @cab938, what a great thought. I did think about it as I also have the same use case, so I mentioned artifacts / interactive content. This PR is more or less a draft and still thinking about pair working workspace (based on artifacts), but this is exactly where we should discuss and push it to work.

1. In this PR, I think it still has very little progress as it's more or less preview where it visualizes the generated content a bit better, but that is not what we think that useful.
2. Pair working space is the ultimate goal of that side view (I will think about how it should work and dump my idea here soon).
3. I'm not sure if the side view should be a full editor / workspace OR just visualize as it synchronizes with the artifacts, hence we can also use other 3rd tools to edit at the same time.

@cab938 I will mark this PR as draft and continue discussing here.