feat: add markdown rendering and resizable chat panel (#104)

* feat: add markdown rendering for chat messages - Add react-markdown and @tailwindcss/typography for markdown support - Use prose styling for assistant message formatting - Fix Radix ScrollArea viewport horizontal overflow issue - Add CSS fix for viewport width constraint * feat: add resizable chat panel - Replace fixed width layout with react-resizable-panels - Chat panel can be resized by dragging the handle - Panel is collapsible with min 15% and max 50% width - Ctrl+B keyboard shortcut still works for toggle
2026-01-02 22:32:27 +08:00 · 2025-12-05 22:42:39 +09:00
parent 3fb349fb3e
commit 0af5229477
8 changed files with 714 additions and 145 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,7 @@
@import "tailwindcss";

@plugin "tailwindcss-animate";
+@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@@ -152,6 +153,12 @@
  }
 }

+/* Fix for Radix ScrollArea viewport horizontal overflow */
+[data-slot="scroll-area-viewport"] > div {
+  display: block !important;
+  width: 100% !important;
+}
+
 /* Custom scrollbar */
@layer utilities {
  .scrollbar-thin {
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,14 +1,21 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { DrawIoEmbed } from "react-drawio";
 import ChatPanel from "@/components/chat-panel";
 import { useDiagram } from "@/contexts/diagram-context";
 import { Monitor } from "lucide-react";
+import {
+    ResizablePanelGroup,
+    ResizablePanel,
+    ResizableHandle,
+} from "@/components/ui/resizable";
+import type { ImperativePanelHandle } from "react-resizable-panels";

 export default function Home() {
    const { drawioRef, handleDiagramExport } = useDiagram();
    const [isMobile, setIsMobile] = useState(false);
    const [isChatVisible, setIsChatVisible] = useState(true);
+    const chatPanelRef = useRef<ImperativePanelHandle>(null);

    useEffect(() => {
        const checkMobile = () => {
@@ -20,11 +27,24 @@ export default function Home() {
        return () => window.removeEventListener("resize", checkMobile);
    }, []);

+    const toggleChatPanel = () => {
+        const panel = chatPanelRef.current;
+        if (panel) {
+            if (panel.isCollapsed()) {
+                panel.expand();
+                setIsChatVisible(true);
+            } else {
+                panel.collapse();
+                setIsChatVisible(false);
+            }
+        }
+    };
+
    useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            if ((event.ctrlKey || event.metaKey) && event.key === 'b') {
                event.preventDefault();
-                setIsChatVisible((prev) => !prev);
+                toggleChatPanel();
            }
        };

@@ -45,7 +65,7 @@ export default function Home() {
    }, []);

    return (
-        <div className="flex h-screen bg-background relative overflow-hidden">
+        <div className="h-screen bg-background relative overflow-hidden">
            {/* Mobile warning overlay */}
            {isMobile && (
                <div className="absolute inset-0 z-50 flex items-center justify-center bg-background">
@@ -63,35 +83,46 @@ export default function Home() {
                </div>
            )}

-            {/* Draw.io Canvas */}
-            <div
-                className={`${isChatVisible ? 'w-2/3' : 'w-full'} h-full relative transition-all duration-300 ease-out`}
-            >
-                <div className="absolute inset-2 rounded-xl overflow-hidden shadow-soft-lg border border-border/30 bg-white">
-                    <DrawIoEmbed
-                        ref={drawioRef}
-                        onExport={handleDiagramExport}
-                        urlParameters={{
-                            spin: true,
-                            libraries: false,
-                            saveAndExit: false,
-                            noExitBtn: true,
-                        }}
-                    />
-                </div>
-            </div>
+            <ResizablePanelGroup direction="horizontal" className="h-full">
+                {/* Draw.io Canvas */}
+                <ResizablePanel defaultSize={67} minSize={30}>
+                    <div className="h-full relative p-2">
+                        <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 bg-white">
+                            <DrawIoEmbed
+                                ref={drawioRef}
+                                onExport={handleDiagramExport}
+                                urlParameters={{
+                                    spin: true,
+                                    libraries: false,
+                                    saveAndExit: false,
+                                    noExitBtn: true,
+                                }}
+                            />
+                        </div>
+                    </div>
+                </ResizablePanel>

-            {/* Chat Panel */}
-            <div
-                className={`${isChatVisible ? 'w-1/3' : 'w-12'} h-full transition-all duration-300 ease-out`}
-            >
-                <div className="h-full py-2 pr-2">
-                    <ChatPanel
-                        isVisible={isChatVisible}
-                        onToggleVisibility={() => setIsChatVisible(!isChatVisible)}
-                    />
-                </div>
-            </div>
+                <ResizableHandle withHandle />
+
+                {/* Chat Panel */}
+                <ResizablePanel
+                    ref={chatPanelRef}
+                    defaultSize={33}
+                    minSize={15}
+                    maxSize={50}
+                    collapsible
+                    collapsedSize={3}
+                    onCollapse={() => setIsChatVisible(false)}
+                    onExpand={() => setIsChatVisible(true)}
+                >
+                    <div className="h-full py-2 pr-2">
+                        <ChatPanel
+                            isVisible={isChatVisible}
+                            onToggleVisibility={toggleChatPanel}
+                        />
+                    </div>
+                </ResizablePanel>
+            </ResizablePanelGroup>
        </div>
    );
 }
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -2,6 +2,7 @@

 import { useRef, useEffect, useState, useCallback } from "react";
 import Image from "next/image";
+import ReactMarkdown from "react-markdown";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import ExamplePanel from "./chat-example-panel";
 import { UIMessage } from "ai";
@@ -281,11 +282,11 @@ export function ChatMessageDisplay({
    };

    return (
-        <ScrollArea className="h-full px-4 scrollbar-thin">
+        <ScrollArea className="h-full w-full scrollbar-thin">
            {messages.length === 0 ? (
                <ExamplePanel setInput={setInput} setFiles={setFiles} />
            ) : (
-                <div className="py-4 space-y-4">
+                <div className="py-4 px-4 space-y-4">
                    {messages.map((message, messageIndex) => {
                        const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
                        const isLastAssistantMessage = message.role === "assistant" && (
@@ -300,7 +301,7 @@ export function ChatMessageDisplay({
                        return (
                            <div
                                key={message.id}
-                                className={`flex ${message.role === "user" ? "justify-end" : "justify-start"} animate-message-in`}
+                                className={`flex w-full ${message.role === "user" ? "justify-end" : "justify-start"} animate-message-in`}
                                style={{ animationDelay: `${messageIndex * 50}ms` }}
                            >
                                {message.role === "user" && userMessageText && !isEditing && (
@@ -333,7 +334,7 @@ export function ChatMessageDisplay({
                                        </button>
                                    </div>
                                )}
-                                <div className="max-w-[85%]">
+                                <div className="max-w-[85%] min-w-0">
                                    {/* Edit mode for user messages */}
                                    {isEditing && message.role === "user" ? (
                                        <div className="flex flex-col gap-2">
@@ -405,8 +406,8 @@ export function ChatMessageDisplay({
                                                    switch (part.type) {
                                                        case "text":
                                                            return (
-                                                                <div key={index} className="whitespace-pre-wrap break-words">
-                                                                    {part.text}
+                                                                <div key={index} className="prose prose-sm dark:prose-invert max-w-none break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+                                                                    <ReactMarkdown>{part.text}</ReactMarkdown>
                                                                </div>
                                                            );
                                                        case "file":
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -4,7 +4,12 @@ import type React from "react";
 import { useRef, useEffect, useState } from "react";
 import { flushSync } from "react-dom";
 import { FaGithub } from "react-icons/fa";
-import { PanelRightClose, PanelRightOpen, Settings } from "lucide-react";
+import {
+    PanelRightClose,
+    PanelRightOpen,
+    Settings,
+    CheckCircle,
+} from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";

@@ -16,7 +21,10 @@ import { useDiagram } from "@/contexts/diagram-context";
 import { replaceNodes, formatXML, validateMxCellStructure } from "@/lib/utils";
 import { ButtonWithTooltip } from "@/components/button-with-tooltip";
 import { Toaster } from "sonner";
-import { SettingsDialog, STORAGE_ACCESS_CODE_KEY } from "@/components/settings-dialog";
+import {
+    SettingsDialog,
+    STORAGE_ACCESS_CODE_KEY,
+} from "@/components/settings-dialog";

 interface ChatPanelProps {
    isVisible: boolean;
@@ -75,7 +83,9 @@ export default function ChatPanel({
    }, []);

    // Generate a unique session ID for Langfuse tracing
-    const [sessionId, setSessionId] = useState(() => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`);
+    const [sessionId, setSessionId] = useState(
+        () => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+    );

    // Store XML snapshots for each user message (keyed by message index)
    const xmlSnapshotsRef = useRef<Map<number, string>>(new Map());
@@ -86,87 +96,83 @@ export default function ChatPanel({
        chartXMLRef.current = chartXML;
    }, [chartXML]);

-    const {
-        messages,
-        sendMessage,
-        addToolResult,
-        status,
-        error,
-        setMessages,
-    } = useChat({
-        transport: new DefaultChatTransport({
-            api: "/api/chat",
-        }),
-        async onToolCall({ toolCall }) {
-            if (toolCall.toolName === "display_diagram") {
-                const { xml } = toolCall.input as { xml: string };
+    const { messages, sendMessage, addToolResult, status, error, setMessages } =
+        useChat({
+            transport: new DefaultChatTransport({
+                api: "/api/chat",
+            }),
+            async onToolCall({ toolCall }) {
+                if (toolCall.toolName === "display_diagram") {
+                    const { xml } = toolCall.input as { xml: string };

-                const validationError = validateMxCellStructure(xml);
+                    const validationError = validateMxCellStructure(xml);

-                if (validationError) {
-                    addToolResult({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: validationError,
-                    });
-                } else {
-                    addToolResult({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: "Successfully displayed the diagram.",
-                    });
-                }
-            } else if (toolCall.toolName === "edit_diagram") {
-                const { edits } = toolCall.input as {
-                    edits: Array<{ search: string; replace: string }>;
-                };
-
-                let currentXml = "";
-                try {
-                    console.log("[edit_diagram] Starting...");
-                    // Use chartXML from ref directly - more reliable than export
-                    // especially on Vercel where DrawIO iframe may have latency issues
-                    // Using ref to avoid stale closure in callback
-                    const cachedXML = chartXMLRef.current;
-                    if (cachedXML) {
-                        currentXml = cachedXML;
-                        console.log(
-                            "[edit_diagram] Using cached chartXML, length:",
-                            currentXml.length
-                        );
+                    if (validationError) {
+                        addToolResult({
+                            tool: "display_diagram",
+                            toolCallId: toolCall.toolCallId,
+                            output: validationError,
+                        });
                    } else {
-                        // Fallback to export only if no cached XML
-                        console.log(
-                            "[edit_diagram] No cached XML, fetching from DrawIO..."
-                        );
-                        currentXml = await onFetchChart(false);
-                        console.log(
-                            "[edit_diagram] Got XML from export, length:",
-                            currentXml.length
-                        );
+                        addToolResult({
+                            tool: "display_diagram",
+                            toolCallId: toolCall.toolCallId,
+                            output: "Successfully displayed the diagram.",
+                        });
                    }
+                } else if (toolCall.toolName === "edit_diagram") {
+                    const { edits } = toolCall.input as {
+                        edits: Array<{ search: string; replace: string }>;
+                    };

-                    const { replaceXMLParts } = await import("@/lib/utils");
-                    const editedXml = replaceXMLParts(currentXml, edits);
+                    let currentXml = "";
+                    try {
+                        console.log("[edit_diagram] Starting...");
+                        // Use chartXML from ref directly - more reliable than export
+                        // especially on Vercel where DrawIO iframe may have latency issues
+                        // Using ref to avoid stale closure in callback
+                        const cachedXML = chartXMLRef.current;
+                        if (cachedXML) {
+                            currentXml = cachedXML;
+                            console.log(
+                                "[edit_diagram] Using cached chartXML, length:",
+                                currentXml.length
+                            );
+                        } else {
+                            // Fallback to export only if no cached XML
+                            console.log(
+                                "[edit_diagram] No cached XML, fetching from DrawIO..."
+                            );
+                            currentXml = await onFetchChart(false);
+                            console.log(
+                                "[edit_diagram] Got XML from export, length:",
+                                currentXml.length
+                            );
+                        }

-                    onDisplayChart(editedXml);
+                        const { replaceXMLParts } = await import("@/lib/utils");
+                        const editedXml = replaceXMLParts(currentXml, edits);

-                    addToolResult({
-                        tool: "edit_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
-                    });
-                    console.log("[edit_diagram] Success");
-                } catch (error) {
-                    console.error("[edit_diagram] Failed:", error);
+                        onDisplayChart(editedXml);

-                    const errorMessage =
-                        error instanceof Error ? error.message : String(error);
+                        addToolResult({
+                            tool: "edit_diagram",
+                            toolCallId: toolCall.toolCallId,
+                            output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
+                        });
+                        console.log("[edit_diagram] Success");
+                    } catch (error) {
+                        console.error("[edit_diagram] Failed:", error);

-                    addToolResult({
-                        tool: "edit_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: `Edit failed: ${errorMessage}
+                        const errorMessage =
+                            error instanceof Error
+                                ? error.message
+                                : String(error);
+
+                        addToolResult({
+                            tool: "edit_diagram",
+                            toolCallId: toolCall.toolCallId,
+                            output: `Edit failed: ${errorMessage}

 Current diagram XML:
 \`\`\`xml
@@ -174,34 +180,34 @@ ${currentXml || "No XML available"}
 \`\`\`

 Please retry with an adjusted search pattern or use display_diagram if retries are exhausted.`,
-                    });
+                        });
+                    }
+                }
+            },
+            onError: (error) => {
+                // Silence access code error in console since it's handled by UI
+                if (!error.message.includes("Invalid or missing access code")) {
+                    console.error("Chat error:", error);
                }
-            }
-        },
-        onError: (error) => {
-            // Silence access code error in console since it's handled by UI
-            if (!error.message.includes("Invalid or missing access code")) {
-                console.error("Chat error:", error);
-            }

-            // Add system message for error so it can be cleared
-            setMessages((currentMessages) => {
-                const errorMessage = {
-                    id: `error-${Date.now()}`,
-                    role: 'system' as const,
-                    content: error.message,
-                    parts: [{ type: 'text' as const, text: error.message }]
-                };
-                return [...currentMessages, errorMessage];
-            });
+                // Add system message for error so it can be cleared
+                setMessages((currentMessages) => {
+                    const errorMessage = {
+                        id: `error-${Date.now()}`,
+                        role: "system" as const,
+                        content: error.message,
+                        parts: [{ type: "text" as const, text: error.message }],
+                    };
+                    return [...currentMessages, errorMessage];
+                });

-            if (error.message.includes("Invalid or missing access code")) {
-                // Show settings button and open dialog to help user fix it
-                setAccessCodeRequired(true);
-                setShowSettingsDialog(true);
-            }
-        },
-    });
+                if (error.message.includes("Invalid or missing access code")) {
+                    // Show settings button and open dialog to help user fix it
+                    setAccessCodeRequired(true);
+                    setShowSettingsDialog(true);
+                }
+            },
+        });

    const messagesEndRef = useRef<HTMLDivElement>(null);

@@ -246,7 +252,8 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                const messageIndex = messages.length;
                xmlSnapshotsRef.current.set(messageIndex, chartXml);

-                const accessCode = localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || "";
+                const accessCode =
+                    localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || "";
                sendMessage(
                    { parts },
                    {
@@ -428,7 +435,11 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
    // Full view
    return (
        <div className="h-full flex flex-col bg-card shadow-soft animate-slide-in-right rounded-xl border border-border/30 relative">
-            <Toaster position="bottom-center" richColors style={{ position: "absolute" }} />
+            <Toaster
+                position="bottom-center"
+                richColors
+                style={{ position: "absolute" }}
+            />
            {/* Header */}
            <header className="px-5 py-4 border-b border-border/50">
                <div className="flex items-center justify-between">
@@ -486,7 +497,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
            </header>

            {/* Messages */}
-            <main className="flex-1 overflow-hidden">
+            <main className="flex-1 w-full overflow-hidden">
                <ChatMessageDisplay
                    messages={messages}
                    setInput={setInput}
@@ -507,7 +518,11 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                    onClearChat={() => {
                        setMessages([]);
                        clearDiagram();
-                        setSessionId(`session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`);
+                        setSessionId(
+                            `session-${Date.now()}-${Math.random()
+                                .toString(36)
+                                .slice(2, 9)}`
+                        );
                        xmlSnapshotsRef.current.clear();
                    }}
                    files={files}
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -18,7 +18,7 @@ function ScrollArea({
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
-        className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+        className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 !overflow-x-hidden"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,8 @@
                "react-dom": "^19.0.0",
                "react-drawio": "^1.0.3",
                "react-icons": "^5.5.0",
+                "react-markdown": "^10.1.0",
+                "react-resizable-panels": "^3.0.6",
                "remark-gfm": "^4.0.1",
                "sonner": "^2.0.7",
                "tailwind-merge": "^3.0.2",
@@ -52,6 +54,7 @@
            },
            "devDependencies": {
                "@tailwindcss/postcss": "^4",
+                "@tailwindcss/typography": "^0.5.19",
                "@types/node": "^20",
                "@types/pako": "^2.0.3",
                "@types/react": "^19",
@@ -4887,6 +4890,19 @@
                "tailwindcss": "4.1.2"
            }
        },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.19",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+            "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+            }
+        },
        "node_modules/@tybys/wasm-util": {
            "version": "0.10.1",
            "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -4911,9 +4927,26 @@
            "version": "1.0.8",
            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
            "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-            "dev": true,
            "license": "MIT"
        },
+        "node_modules/@types/estree-jsx": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+            "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "*"
+            }
+        },
+        "node_modules/@types/hast": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+            "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "*"
+            }
+        },
        "node_modules/@types/json-schema": {
            "version": "7.0.15",
            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -4969,7 +5002,6 @@
            "version": "19.1.0",
            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.0.tgz",
            "integrity": "sha512-UaicktuQI+9UKyA4njtDOGBD/67t8YEBt2xdfqu8+gP9hqPUPsiXlNPcpS2gVdjmis5GKPG3fCxbQLVgxsQZ8w==",
-            "devOptional": true,
            "license": "MIT",
            "dependencies": {
                "csstype": "^3.0.2"
@@ -5248,6 +5280,12 @@
                "url": "https://opencollective.com/typescript-eslint"
            }
        },
+        "node_modules/@ungap/structured-clone": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+            "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+            "license": "ISC"
+        },
        "node_modules/@unrs/resolver-binding-android-arm-eabi": {
            "version": "1.11.1",
            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
@@ -6123,6 +6161,36 @@
                "url": "https://github.com/sponsors/wooorm"
            }
        },
+        "node_modules/character-entities-html4": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+            "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/character-entities-legacy": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+            "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/character-reference-invalid": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+            "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/class-variance-authority": {
            "version": "0.7.1",
            "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -6182,6 +6250,16 @@
                "node": ">= 0.8"
            }
        },
+        "node_modules/comma-separated-tokens": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+            "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/concat-map": {
            "version": "0.0.1",
            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6211,6 +6289,19 @@
                "node": ">= 8"
            }
        },
+        "node_modules/cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "cssesc": "bin/cssesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/cssstyle": {
            "version": "4.3.0",
            "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.3.0.tgz",
@@ -6228,7 +6319,6 @@
            "version": "3.1.3",
            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-            "devOptional": true,
            "license": "MIT"
        },
        "node_modules/damerau-levenshtein": {
@@ -7140,6 +7230,16 @@
                "node": ">=4.0"
            }
        },
+        "node_modules/estree-util-is-identifier-name": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+            "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/esutils": {
            "version": "2.0.3",
            "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -7636,6 +7736,46 @@
                "node": ">= 0.4"
            }
        },
+        "node_modules/hast-util-to-jsx-runtime": {
+            "version": "2.3.6",
+            "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+            "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "^1.0.0",
+                "@types/hast": "^3.0.0",
+                "@types/unist": "^3.0.0",
+                "comma-separated-tokens": "^2.0.0",
+                "devlop": "^1.0.0",
+                "estree-util-is-identifier-name": "^3.0.0",
+                "hast-util-whitespace": "^3.0.0",
+                "mdast-util-mdx-expression": "^2.0.0",
+                "mdast-util-mdx-jsx": "^3.0.0",
+                "mdast-util-mdxjs-esm": "^2.0.0",
+                "property-information": "^7.0.0",
+                "space-separated-tokens": "^2.0.0",
+                "style-to-js": "^1.0.0",
+                "unist-util-position": "^5.0.0",
+                "vfile-message": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-whitespace": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+            "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/hermes-estree": {
            "version": "0.25.1",
            "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -7665,6 +7805,16 @@
                "node": ">=18"
            }
        },
+        "node_modules/html-url-attributes": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+            "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/http-proxy-agent": {
            "version": "7.0.2",
            "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -7740,6 +7890,12 @@
                "node": ">=0.8.19"
            }
        },
+        "node_modules/inline-style-parser": {
+            "version": "0.2.7",
+            "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+            "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+            "license": "MIT"
+        },
        "node_modules/internal-slot": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -7755,6 +7911,30 @@
                "node": ">= 0.4"
            }
        },
+        "node_modules/is-alphabetical": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+            "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/is-alphanumerical": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+            "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+            "license": "MIT",
+            "dependencies": {
+                "is-alphabetical": "^2.0.0",
+                "is-decimal": "^2.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/is-array-buffer": {
            "version": "3.0.5",
            "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -7900,6 +8080,16 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/is-decimal": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+            "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/is-extglob": {
            "version": "2.1.1",
            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -7959,6 +8149,16 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/is-hexadecimal": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+            "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/is-map": {
            "version": "2.0.3",
            "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -8857,6 +9057,66 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/mdast-util-mdx-expression": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+            "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree-jsx": "^1.0.0",
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-mdx-jsx": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+            "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree-jsx": "^1.0.0",
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "@types/unist": "^3.0.0",
+                "ccount": "^2.0.0",
+                "devlop": "^1.1.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0",
+                "parse-entities": "^4.0.0",
+                "stringify-entities": "^4.0.0",
+                "unist-util-stringify-position": "^4.0.0",
+                "vfile-message": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mdast-util-mdxjs-esm": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+            "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree-jsx": "^1.0.0",
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/mdast-util-phrasing": {
            "version": "4.1.0",
            "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
@@ -8871,6 +9131,27 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/mdast-util-to-hast": {
+            "version": "13.2.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+            "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "@ungap/structured-clone": "^1.0.0",
+                "devlop": "^1.0.0",
+                "micromark-util-sanitize-uri": "^2.0.0",
+                "trim-lines": "^3.0.0",
+                "unist-util-position": "^5.0.0",
+                "unist-util-visit": "^5.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/mdast-util-to-markdown": {
            "version": "2.1.2",
            "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
@@ -9928,6 +10209,31 @@
                "node": ">=6"
            }
        },
+        "node_modules/parse-entities": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+            "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^2.0.0",
+                "character-entities-legacy": "^3.0.0",
+                "character-reference-invalid": "^2.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "is-alphanumerical": "^2.0.0",
+                "is-decimal": "^2.0.0",
+                "is-hexadecimal": "^2.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
+        "node_modules/parse-entities/node_modules/@types/unist": {
+            "version": "2.0.11",
+            "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+            "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+            "license": "MIT"
+        },
        "node_modules/parse5": {
            "version": "7.2.1",
            "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
@@ -10025,6 +10331,20 @@
                "node": "^10 || ^12 || >=14"
            }
        },
+        "node_modules/postcss-selector-parser": {
+            "version": "6.0.10",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+            "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
        "node_modules/prelude-ls": {
            "version": "1.2.1",
            "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -10060,6 +10380,16 @@
                "react-is": "^16.13.1"
            }
        },
+        "node_modules/property-information": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+            "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/protobufjs": {
            "version": "7.5.4",
            "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
@@ -10161,6 +10491,33 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/react-markdown": {
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+            "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "hast-util-to-jsx-runtime": "^2.0.0",
+                "html-url-attributes": "^3.0.0",
+                "mdast-util-to-hast": "^13.0.0",
+                "remark-parse": "^11.0.0",
+                "remark-rehype": "^11.0.0",
+                "unified": "^11.0.0",
+                "unist-util-visit": "^5.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18",
+                "react": ">=18"
+            }
+        },
        "node_modules/react-remove-scroll": {
            "version": "2.6.3",
            "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
@@ -10208,6 +10565,16 @@
                }
            }
        },
+        "node_modules/react-resizable-panels": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
+            "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+                "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            }
+        },
        "node_modules/react-style-singleton": {
            "version": "2.2.3",
            "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -10308,6 +10675,23 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/remark-rehype": {
+            "version": "11.1.2",
+            "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+            "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "mdast-util-to-hast": "^13.0.0",
+                "unified": "^11.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/remark-stringify": {
            "version": "11.0.0",
            "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
@@ -10709,6 +11093,16 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/space-separated-tokens": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+            "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/stable-hash": {
            "version": "0.0.5",
            "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -10843,6 +11237,20 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/stringify-entities": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+            "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+            "license": "MIT",
+            "dependencies": {
+                "character-entities-html4": "^2.0.0",
+                "character-entities-legacy": "^3.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/strip-bom": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -10878,6 +11286,24 @@
            ],
            "license": "MIT"
        },
+        "node_modules/style-to-js": {
+            "version": "1.1.21",
+            "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+            "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+            "license": "MIT",
+            "dependencies": {
+                "style-to-object": "1.0.14"
+            }
+        },
+        "node_modules/style-to-object": {
+            "version": "1.0.14",
+            "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+            "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+            "license": "MIT",
+            "dependencies": {
+                "inline-style-parser": "0.2.7"
+            }
+        },
        "node_modules/styled-jsx": {
            "version": "5.1.6",
            "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -11102,6 +11528,16 @@
                "node": ">=18"
            }
        },
+        "node_modules/trim-lines": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+            "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
        "node_modules/trough": {
            "version": "2.2.0",
            "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
@@ -11343,6 +11779,19 @@
                "url": "https://opencollective.com/unified"
            }
        },
+        "node_modules/unist-util-position": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+            "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/unist": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
        "node_modules/unist-util-stringify-position": {
            "version": "4.0.0",
            "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -11513,6 +11962,13 @@
                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
            }
        },
+        "node_modules/util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/vfile": {
            "version": "6.0.3",
            "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
--- a/package.json
+++ b/package.json
@@ -45,6 +45,8 @@
        "react-dom": "^19.0.0",
        "react-drawio": "^1.0.3",
        "react-icons": "^5.5.0",
+        "react-markdown": "^10.1.0",
+        "react-resizable-panels": "^3.0.6",
        "remark-gfm": "^4.0.1",
        "sonner": "^2.0.7",
        "tailwind-merge": "^3.0.2",
@@ -53,6 +55,7 @@
    },
    "devDependencies": {
        "@tailwindcss/postcss": "^4",
+        "@tailwindcss/typography": "^0.5.19",
        "@types/node": "^20",
        "@types/pako": "^2.0.3",
        "@types/react": "^19",