feat: refresh UI with new typography and edit diff display (#63)

- Switch from Geist to Plus Jakarta Sans (body) and JetBrains Mono (code)
- Add visual diff display for edit_diagram tool showing search/replace pairs
- Update color palette to clean modern OKLCH-based scheme
- Improve chat message display with better styling and animations
- Add syntax-highlighted code blocks for XML/JSON output
- Improve scrollbar and shadow utilities

app/page.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from "react";
 import { DrawIoEmbed } from "react-drawio";
 import ChatPanel from "@/components/chat-panel";
 import { useDiagram } from "@/contexts/diagram-context";
+import { Monitor } from "lucide-react";
 
 export default function Home() {
     const { drawioRef, handleDiagramExport } = useDiagram();
@@ -14,17 +15,11 @@ export default function Home() {
             setIsMobile(window.innerWidth < 768);
         };
 
-        // Check on mount
         checkMobile();
-
-        // Add event listener for resize
         window.addEventListener("resize", checkMobile);
-
-        // Cleanup
         return () => window.removeEventListener("resize", checkMobile);
     }, []);
 
-    // Add keyboard shortcut for toggling chat panel (Ctrl+B)
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
             if ((event.ctrlKey || event.metaKey) && event.key === 'b') {
@@ -34,42 +29,56 @@ export default function Home() {
         };
 
         window.addEventListener('keydown', handleKeyDown);
-
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, []);
 
     return (
-        <div className="flex h-screen bg-gray-100 relative">
-            {/* Mobile warning overlay - keeps components mounted */}
+        <div className="flex h-screen bg-background relative overflow-hidden">
+            {/* Mobile warning overlay */}
             {isMobile && (
-                <div className="absolute inset-0 z-50 flex items-center justify-center bg-gray-100">
-                    <div className="text-center p-8">
-                        <h1 className="text-2xl font-semibold text-gray-800">
-                            Please open this application on a desktop or laptop
+                <div className="absolute inset-0 z-50 flex items-center justify-center bg-background">
+                    <div className="text-center p-8 max-w-sm mx-auto animate-fade-in">
+                        <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
+                            <Monitor className="w-8 h-8 text-primary" />
+                        </div>
+                        <h1 className="text-xl font-semibold text-foreground mb-3">
+                            Desktop Required
                         </h1>
+                        <p className="text-sm text-muted-foreground leading-relaxed">
+                            This application works best on desktop or laptop devices. Please open it on a larger screen for the full experience.
+                        </p>
                     </div>
                 </div>
             )}
 
-            <div className={`${isChatVisible ? 'w-2/3' : 'w-full'} p-1 h-full relative transition-all duration-300 ease-in-out`}>
-                <DrawIoEmbed
-                    ref={drawioRef}
-                    onExport={handleDiagramExport}
-                    urlParameters={{
-                        spin: true,
-                        libraries: false,
-                        saveAndExit: false,
-                        noExitBtn: true,
-                    }}
-                />
+            {/* 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>
-            <div className={`${isChatVisible ? 'w-1/3' : 'w-12'} h-full p-1 transition-all duration-300 ease-in-out`}>
-                <ChatPanel
-                    isVisible={isChatVisible}
-                    onToggleVisibility={() => setIsChatVisible(!isChatVisible)}
-                />
+
+            {/* 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>
         </div>
     );