chore: add button to go to history details

Author: ArtemSBulgakov

frontend/src/components/entropy/painting-visualizer.tsx

@@ -31,7 +31,7 @@ export function PaintingVisualizer({ uiData, className }: PaintingVisualizerProp
       context.scale(dpr, dpr)
       context.lineJoin = 'round'
       context.lineCap = 'round'
-      context.lineWidth = 2
+      context.lineWidth = 4
       context.strokeStyle = 'rgba(37, 99, 235, 0.8)'
     }
 
@@ -58,10 +58,9 @@ export function PaintingVisualizer({ uiData, className }: PaintingVisualizerProp
 
     if (mouseEvents.length === 0) return
 
-    // Get canvas dimensions for scaling
-    const rect = canvas.getBoundingClientRect()
-    const scaleX = rect.width / 800 // Assuming original canvas was 800px wide
-    const scaleY = rect.height / 600 // Assuming original canvas was 600px high
+    // Use 1:1 scaling to match drawing pad coordinate system
+    const scaleX = 1
+    const scaleY = 1
 
     // Group events by stroke (consecutive events)
     const strokes: SchemaUiEvent[][] = []
@@ -92,16 +91,18 @@ export function PaintingVisualizer({ uiData, className }: PaintingVisualizerProp
 
       context.beginPath()
       context.strokeStyle = `rgba(37, 99, 235, ${0.6 + (strokeIndex % 3) * 0.1})`
-      context.lineWidth = 1 + (strokeIndex % 3)
+      context.lineWidth = 4
 
       const firstPoint = stroke[0]
-      if (firstPoint.mouse_x !== null && firstPoint.mouse_y !== null) {
+      if (firstPoint.mouse_x !== null && firstPoint.mouse_y !== null &&
+          firstPoint.mouse_x !== undefined && firstPoint.mouse_y !== undefined) {
         context.moveTo(firstPoint.mouse_x * scaleX, firstPoint.mouse_y * scaleY)
       }
 
       for (let i = 1; i < stroke.length; i++) {
         const point = stroke[i]
-        if (point.mouse_x !== null && point.mouse_y !== null) {
+        if (point.mouse_x !== null && point.mouse_y !== null &&
+            point.mouse_x !== undefined && point.mouse_y !== undefined) {
           context.lineTo(point.mouse_x * scaleX, point.mouse_y * scaleY)
         }
       }
@@ -112,7 +113,8 @@ export function PaintingVisualizer({ uiData, className }: PaintingVisualizerProp
     // Draw individual click events as dots
     const clickEvents = uiData.filter(event => event.event_type === 'click')
     clickEvents.forEach(event => {
-      if (event.mouse_x !== null && event.mouse_y !== null) {
+      if (event.mouse_x !== null && event.mouse_y !== null &&
+          event.mouse_x !== undefined && event.mouse_y !== undefined) {
         context.beginPath()
         context.fillStyle = 'rgba(239, 68, 68, 0.8)'
         context.arc(event.mouse_x * scaleX, event.mouse_y * scaleY, 3, 0, 2 * Math.PI)