Вроде работает

frontend/src/components/llm/ValidationReport.svelte

@@ -0,0 +1,75 @@
+<!-- [DEF:frontend/src/components/llm/ValidationReport.svelte:Component] -->
+<!-- @TIER: STANDARD -->
+<!-- @PURPOSE: Displays the results of an LLM-based dashboard validation task. -->
+
+<script>
+    export let result = null;
+
+    function getStatusColor(status) {
+        switch (status) {
+            case 'PASS': return 'text-green-600 bg-green-100';
+            case 'WARN': return 'text-yellow-600 bg-yellow-100';
+            case 'FAIL': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    }
+</script>
+
+{#if result}
+    <div class="bg-white shadow rounded-lg p-6 space-y-6">
+        <div class="flex items-center justify-between">
+            <h2 class="text-xl font-bold text-gray-900">Validation Report</h2>
+            <span class={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(result.status)}`}>
+                {result.status}
+            </span>
+        </div>
+
+        <div class="prose max-w-none">
+            <h3 class="text-lg font-semibold">Summary</h3>
+            <p>{result.summary}</p>
+        </div>
+
+        {#if result.issues && result.issues.length > 0}
+            <div class="space-y-4">
+                <h3 class="text-lg font-semibold">Detected Issues</h3>
+                <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                    <table class="min-w-full divide-y divide-gray-300">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">Severity</th>
+                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Message</th>
+                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Location</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-200 bg-white">
+                            {#each result.issues as issue}
+                                <tr>
+                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm">
+                                        <span class={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(issue.severity)}`}>
+                                            {issue.severity}
+                                        </span>
+                                    </td>
+                                    <td class="px-3 py-4 text-sm text-gray-500">{issue.message}</td>
+                                    <td class="px-3 py-4 text-sm text-gray-500">{issue.location || 'N/A'}</td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        {/if}
+
+        {#if result.screenshot_path}
+            <div class="space-y-4">
+                <h3 class="text-lg font-semibold">Screenshot</h3>
+                <img src={`/api/storage/file?path=${encodeURIComponent(result.screenshot_path)}`} alt="Dashboard Screenshot" class="rounded-lg border border-gray-200 shadow-sm max-w-full" />
+            </div>
+        {/if}
+    </div>
+{:else}
+    <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+        <p class="text-gray-500">No validation result available.</p>
+    </div>
+{/if}
+
+<!-- [/DEF:frontend/src/components/llm/ValidationReport.svelte] -->