Improve dashboard LLM validation UX and report flow

frontend/src/lib/api.js

@@ -80,7 +80,7 @@ function getAuthHeaders() {
 // @POST: Returns Promise resolving to JSON data or throws on error.
 // @PARAM: endpoint (string) - API endpoint.
 // @RETURN: Promise<any> - JSON response.
-async function fetchApi(endpoint) {
+async function fetchApi(endpoint) {
     try {
         console.log(`[api.fetchApi][Action] Fetching from context={{'endpoint': '${endpoint}'}}`);
         const response = await fetch(`${API_BASE_URL}${endpoint}`, {
@@ -98,7 +98,37 @@ async function fetchApi(endpoint) {
         throw error;
     }
 }
-// [/DEF:fetchApi:Function]
+// [/DEF:fetchApi:Function]
+
+// [DEF:fetchApiBlob:Function]
+// @PURPOSE: Generic GET wrapper for binary payloads.
+// @PRE: endpoint string is provided.
+// @POST: Returns Blob or throws on error.
+async function fetchApiBlob(endpoint, options = {}) {
+    const notifyError = options.notifyError !== false;
+    try {
+        const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+            headers: getAuthHeaders()
+        });
+        if (response.status === 202) {
+            const payload = await response.json().catch(() => ({ message: "Resource is being prepared" }));
+            const error = new Error(payload?.message || "Resource is being prepared");
+            error.status = 202;
+            throw error;
+        }
+        if (!response.ok) {
+            throw await buildApiError(response);
+        }
+        return await response.blob();
+    } catch (error) {
+        console.error(`[api.fetchApiBlob][Coherence:Failed] Error fetching blob from ${endpoint}:`, error);
+        if (notifyError) {
+            notifyApiError(error);
+        }
+        throw error;
+    }
+}
+// [/DEF:fetchApiBlob:Function]
 
 // [DEF:postApi:Function]
 // @PURPOSE: Generic POST request wrapper.
@@ -183,10 +213,20 @@ export const api = {
       const query = params.toString();
       return fetchApi(`/tasks${query ? `?${query}` : ''}`);
     },
-    getTask: (taskId) => fetchApi(`/tasks/${taskId}`),
-    createTask: (pluginId, params) => postApi('/tasks', { plugin_id: pluginId, params }),
+    getTask: (taskId) => fetchApi(`/tasks/${taskId}`),
+    getTaskLogs: (taskId, options = {}) => {
+      const params = new URLSearchParams();
+      if (options.level) params.append('level', options.level);
+      if (options.source) params.append('source', options.source);
+      if (options.search) params.append('search', options.search);
+      if (options.offset != null) params.append('offset', String(options.offset));
+      if (options.limit != null) params.append('limit', String(options.limit));
+      const query = params.toString();
+      return fetchApi(`/tasks/${taskId}/logs${query ? `?${query}` : ''}`);
+    },
+    createTask: (pluginId, params) => postApi('/tasks', { plugin_id: pluginId, params }),
     
-    // Settings
+    // Settings
     getSettings: () => fetchApi('/settings'),
     updateGlobalSettings: (settings) => requestApi('/settings/global', 'PATCH', settings),
     getEnvironments: () => fetchApi('/settings/environments'),
@@ -197,8 +237,9 @@ export const api = {
     updateEnvironmentSchedule: (id, schedule) => requestApi(`/environments/${id}/schedule`, 'PUT', schedule),
     getStorageSettings: () => fetchApi('/settings/storage'),
     updateStorageSettings: (storage) => requestApi('/settings/storage', 'PUT', storage),
-    getEnvironmentsList: () => fetchApi('/environments'),
-    getEnvironmentDatabases: (id) => fetchApi(`/environments/${id}/databases`),
+    getEnvironmentsList: () => fetchApi('/environments'),
+    getLlmStatus: () => fetchApi('/llm/status'),
+    getEnvironmentDatabases: (id) => fetchApi(`/environments/${id}/databases`),
     
     // Dashboards
     getDashboards: (envId, options = {}) => {
@@ -209,6 +250,18 @@ export const api = {
       return fetchApi(`/dashboards?${params.toString()}`);
     },
     getDashboardDetail: (envId, dashboardId) => fetchApi(`/dashboards/${dashboardId}?env_id=${envId}`),
+    getDashboardTaskHistory: (envId, dashboardId, options = {}) => {
+      const params = new URLSearchParams();
+      if (envId) params.append('env_id', envId);
+      if (options.limit) params.append('limit', options.limit);
+      return fetchApi(`/dashboards/${dashboardId}/tasks?${params.toString()}`);
+    },
+    getDashboardThumbnail: (envId, dashboardId, options = {}) => {
+      const params = new URLSearchParams();
+      params.append('env_id', envId);
+      if (options.force != null) params.append('force', String(Boolean(options.force)));
+      return fetchApiBlob(`/dashboards/${dashboardId}/thumbnail?${params.toString()}`, { notifyError: false });
+    },
     getDatabaseMappings: (sourceEnvId, targetEnvId) => fetchApi(`/dashboards/db-mappings?source_env_id=${sourceEnvId}&target_env_id=${targetEnvId}`),
     
      // Datasets

frontend/src/lib/components/assistant/AssistantChatPanel.svelte

@@ -21,6 +21,8 @@
    * @UX_TEST: LoadingHistory -> {openPanel: true, expected: loading block visible}
    * @UX_TEST: Sending -> {sendMessage: "branch", expected: send button disabled}
    * @UX_TEST: NeedsConfirmation -> {click: confirm action, expected: started response with task_id}
+   * @TEST_DATA: assistant_llm_ready -> {"llmStatus":{"configured":true,"reason":"ok"},"messages":[{"role":"assistant","text":"Ready","state":"success"}]}
+   * @TEST_DATA: assistant_llm_not_configured -> {"llmStatus":{"configured":false,"reason":"invalid_api_key"}}
    */
 
   import { onMount } from "svelte";
@@ -40,6 +42,7 @@
     getAssistantHistory,
     getAssistantConversations,
   } from "$lib/api/assistant.js";
+  import { api } from "$lib/api.js";
   import { gitService } from "../../../services/gitService.js";
 
   const HISTORY_PAGE_SIZE = 30;
@@ -62,6 +65,8 @@
   let conversationsHasNext = false;
   let historyViewport = null;
   let initialized = false;
+  let llmReady = true;
+  let llmStatusReason = "";
 
   $: isOpen = $assistantChatStore?.isOpen || false;
   $: conversationId = $assistantChatStore?.conversationId || null;
@@ -202,6 +207,7 @@
   $: if (isOpen && !initialized) {
     loadConversations(true);
     loadHistory();
+    loadLlmStatus();
   }
 
   $: if (isOpen && initialized && conversationId) {
@@ -502,6 +508,17 @@
   onMount(() => {
     initialized = false;
   });
+
+  async function loadLlmStatus() {
+    try {
+      const status = await api.getLlmStatus();
+      llmReady = Boolean(status?.configured);
+      llmStatusReason = status?.reason || "";
+    } catch (_err) {
+      llmReady = false;
+      llmStatusReason = "status_unavailable";
+    }
+  }
 </script>
 
 {#if isOpen}
@@ -533,6 +550,21 @@
     </div>
 
     <div class="flex h-[calc(100%-56px)] flex-col">
+      {#if !llmReady}
+        <div class="mx-3 mt-3 rounded-lg border border-rose-300 bg-rose-50 px-3 py-2 text-xs text-rose-800">
+          <div class="font-semibold">{$t.dashboard?.llm_not_configured || "LLM is not configured"}</div>
+          <div class="mt-1 text-rose-700">
+            {#if llmStatusReason === "no_active_provider"}
+              {$t.dashboard?.llm_configure_provider || "No active LLM provider. Configure it in Admin -> LLM Settings."}
+            {:else if llmStatusReason === "invalid_api_key"}
+              {$t.dashboard?.llm_configure_key || "Invalid LLM API key. Update and save a real key in Admin -> LLM Settings."}
+            {:else}
+              {$t.dashboard?.llm_status_unavailable || "LLM status is unavailable. Check settings and backend logs."}
+            {/if}
+          </div>
+        </div>
+      {/if}
+
       <div class="border-b border-slate-200 px-3 py-2">
         <div class="mb-2 flex items-center justify-between">
           <span
@@ -726,7 +758,7 @@
             bind:value={input}
             rows="2"
             placeholder={$t.assistant?.input_placeholder}
-            class="min-h-[52px] w-full resize-y rounded-lg border border-slate-300 px-3 py-2 text-sm outline-none transition focus:border-sky-400 focus:ring-2 focus:ring-sky-100"
+            class="min-h-[52px] w-full resize-y rounded-lg border px-3 py-2 text-sm outline-none transition {llmReady ? 'border-slate-300 focus:border-sky-400 focus:ring-2 focus:ring-sky-100' : 'border-rose-300 bg-rose-50 focus:border-rose-400 focus:ring-2 focus:ring-rose-100'}"
             on:keydown={handleKeydown}
           ></textarea>
           <button

frontend/src/lib/components/layout/TaskDrawer.svelte

@@ -16,6 +16,8 @@
    * @UX_FEEDBACK: Back button returns to task list
    * @UX_RECOVERY: Click outside or X button closes drawer
    * @UX_RECOVERY: Back button shows task list when viewing task details
+   * @TEST_DATA: llm_task_success_with_fail_result -> {"activeTaskDetails":{"plugin_id":"llm_dashboard_validation","status":"SUCCESS","result":{"status":"FAIL"}}}
+   * @TEST_DATA: llm_task_success_with_pass_result -> {"activeTaskDetails":{"plugin_id":"llm_dashboard_validation","status":"SUCCESS","result":{"status":"PASS"}}}
    */
 
   import { onDestroy } from "svelte";
@@ -100,6 +102,22 @@
     );
   }
 
+  function resolveLlmValidationStatus(task) {
+    if (task?.plugin_id !== "llm_dashboard_validation") return null;
+    const raw = String(task?.result?.status || "").toUpperCase();
+    if (raw === "FAIL") return { label: "FAIL", tone: "fail", icon: "!" };
+    if (raw === "WARN") return { label: "WARN", tone: "warn", icon: "!" };
+    if (raw === "PASS") return { label: "PASS", tone: "pass", icon: "OK" };
+    return { label: "UNKNOWN", tone: "unknown", icon: "?" };
+  }
+
+  function llmValidationBadgeClass(tone) {
+    if (tone === "fail") return "text-rose-700 bg-rose-100 border border-rose-200";
+    if (tone === "warn") return "text-amber-700 bg-amber-100 border border-amber-200";
+    if (tone === "pass") return "text-emerald-700 bg-emerald-100 border border-emerald-200";
+    return "text-slate-700 bg-slate-100 border border-slate-200";
+  }
+
   function stopTaskDetailsPolling() {
     if (taskDetailsPollInterval) {
       clearInterval(taskDetailsPollInterval);
@@ -224,6 +242,18 @@
       return summary;
     }
 
+    if (task.plugin_id === "llm_dashboard_validation") {
+      summary.targetEnvId = resolveEnvironmentId(params?.environment_id || null);
+      summary.targetEnvName = resolveEnvironmentName(
+        summary.targetEnvId,
+        null,
+      );
+      if (result?.summary) {
+        summary.lines.push(result.summary);
+      }
+      return summary;
+    }
+
     if (result?.summary) {
       summary.lines.push(result.summary);
       return summary;
@@ -262,6 +292,15 @@
     }
   }
 
+  function handleOpenLlmReport() {
+    const taskId = normalizeTaskId(activeTaskId);
+    if (!taskId) {
+      addToast($t.tasks?.summary_link_unavailable || "Report unavailable", "error");
+      return;
+    }
+    window.open(`/reports/llm/${encodeURIComponent(taskId)}`, "_blank", "noopener,noreferrer");
+  }
+
   // Connect to WebSocket for real-time logs
   function connectWebSocket() {
     if (!activeTaskId) return;
@@ -401,6 +440,7 @@
   }
 
   $: taskSummary = buildTaskSummary(activeTaskDetails);
+  $: activeTaskValidation = resolveLlmValidationStatus(activeTaskDetails);
 
   // Cleanup on destroy
   onDestroy(() => {
@@ -461,6 +501,17 @@
             >{taskStatus}</span
           >
         {/if}
+        {#if activeTaskValidation}
+          <span
+            class={`text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full inline-flex items-center gap-1 ${llmValidationBadgeClass(activeTaskValidation.tone)}`}
+            title="Dashboard validation result"
+          >
+            <span class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-white/70 px-1 text-[10px] font-bold">
+              {activeTaskValidation.icon}
+            </span>
+            {activeTaskValidation.label}
+          </span>
+        {/if}
       </div>
       <div class="flex items-center gap-2">
         <button
@@ -536,6 +587,14 @@
               >
                 {$t.tasks?.show_diff || "Show diff"}
               </button>
+              {#if activeTaskDetails?.plugin_id === "llm_dashboard_validation"}
+                <button
+                  class="rounded-md border border-indigo-300 bg-indigo-50 px-2.5 py-1.5 text-xs font-semibold text-indigo-700 transition-colors hover:bg-indigo-100"
+                  on:click={handleOpenLlmReport}
+                >
+                  {$t.tasks?.open_llm_report || "Open LLM report"}
+                </button>
+              {/if}
             </div>
             {#if showDiff}
               <div class="mt-3 rounded-md border border-slate-200 bg-white p-2">
@@ -576,6 +635,7 @@
             {$t.tasks?.recent }
           </h3>
           {#each recentTasks as task}
+            {@const taskValidation = resolveLlmValidationStatus(task)}
             <button
               class="flex items-center gap-3 w-full p-3 mb-2 bg-slate-800 border border-slate-700 rounded-lg cursor-pointer transition-all hover:bg-slate-700 hover:border-slate-600 text-left"
               on:click={() => selectTask(task)}
@@ -601,6 +661,17 @@
                       : 'bg-slate-500/15 text-slate-400'}"
                 >{task.status || $t.common?.unknown }</span
               >
+              {#if taskValidation}
+                <span
+                  class={`text-[10px] font-semibold uppercase px-2 py-1 rounded-full inline-flex items-center gap-1 ${llmValidationBadgeClass(taskValidation.tone)}`}
+                  title="Dashboard validation result"
+                >
+                  <span class="inline-flex min-w-[16px] items-center justify-center rounded-full bg-white/70 px-1 text-[9px] font-bold">
+                    {taskValidation.icon}
+                  </span>
+                  {taskValidation.label}
+                </span>
+              {/if}
             </button>
           {/each}
         </div>

frontend/src/routes/dashboards/[id]/+page.svelte

@@ -6,13 +6,17 @@
    * @LAYER: UI
    * @RELATION: BINDS_TO -> dashboard detail API
    * @INVARIANT: Shows dashboard metadata, charts, and datasets for selected environment
+   * @TEST_DATA: dashboard_detail_ready -> {"dashboard":{"id":11,"title":"Ops","chart_count":3,"dataset_count":2},"taskHistory":[{"id":"t-1","plugin_id":"llm_dashboard_validation","status":"SUCCESS"}],"llmStatus":{"configured":true,"reason":"ok"}}
+   * @TEST_DATA: llm_unconfigured -> {"llmStatus":{"configured":false,"reason":"invalid_api_key"}}
    */
 
-  import { onMount } from "svelte";
+  import { onMount, onDestroy } from "svelte";
   import { goto } from "$app/navigation";
   import { page } from "$app/stores";
   import { t } from "$lib/i18n";
   import { api } from "$lib/api.js";
+  import { openDrawerForTask } from "$lib/stores/taskDrawer.js";
+  import { addToast } from "$lib/toasts.js";
   import Icon from "$lib/ui/Icon.svelte";
 
   $: dashboardId = $page.params.id;
@@ -21,11 +25,34 @@
   let dashboard = null;
   let isLoading = true;
   let error = null;
+  let taskHistory = [];
+  let isTaskHistoryLoading = false;
+  let taskHistoryError = null;
+  let isStartingBackup = false;
+  let isStartingValidation = false;
+  let thumbnailUrl = "";
+  let isThumbnailLoading = false;
+  let thumbnailError = null;
+  let llmReady = true;
+  let llmStatusReason = "";
 
   onMount(async () => {
-    await loadDashboardDetail();
+    await loadDashboardPage();
   });
 
+  onDestroy(() => {
+    releaseThumbnailUrl();
+  });
+
+  async function loadDashboardPage() {
+    await Promise.all([
+      loadDashboardDetail(),
+      loadTaskHistory(),
+      loadThumbnail(false),
+      loadLlmStatus(),
+    ]);
+  }
+
   async function loadDashboardDetail() {
     if (!dashboardId || !envId) {
       error = $t.dashboard?.missing_context ;
@@ -45,6 +72,144 @@
     }
   }
 
+  async function loadTaskHistory() {
+    if (!dashboardId || !envId) return;
+    isTaskHistoryLoading = true;
+    taskHistoryError = null;
+    try {
+      const response = await api.getDashboardTaskHistory(envId, dashboardId, { limit: 30 });
+      taskHistory = response?.items || [];
+    } catch (err) {
+      taskHistoryError = err.message || "Failed to load task history";
+      taskHistory = [];
+    } finally {
+      isTaskHistoryLoading = false;
+    }
+  }
+
+  function releaseThumbnailUrl() {
+    if (thumbnailUrl) {
+      URL.revokeObjectURL(thumbnailUrl);
+      thumbnailUrl = "";
+    }
+  }
+
+  async function loadThumbnail(force = false) {
+    if (!dashboardId || !envId) return;
+    isThumbnailLoading = true;
+    thumbnailError = null;
+    try {
+      const blob = await api.getDashboardThumbnail(envId, dashboardId, { force });
+      releaseThumbnailUrl();
+      thumbnailUrl = URL.createObjectURL(blob);
+    } catch (err) {
+      if (err?.status === 202) {
+        thumbnailError = $t.dashboard?.thumbnail_generating || "Thumbnail is being generated";
+      } else {
+        thumbnailError = err.message || $t.dashboard?.thumbnail_failed || "Failed to load thumbnail";
+      }
+    } finally {
+      isThumbnailLoading = false;
+    }
+  }
+
+  async function runBackupTask() {
+    if (isStartingBackup || !envId || !dashboardId) return;
+    isStartingBackup = true;
+    try {
+      const response = await api.postApi("/dashboards/backup", {
+        env_id: envId,
+        dashboard_ids: [Number(dashboardId)],
+      });
+      const taskId = response?.task_id;
+      if (taskId) {
+        openDrawerForTask(taskId);
+        addToast($t.dashboard?.backup_started || "Backup task started", "success");
+      }
+      await loadTaskHistory();
+    } catch (err) {
+      addToast(err.message || $t.dashboard?.backup_task_failed || "Failed to start backup", "error");
+    } finally {
+      isStartingBackup = false;
+    }
+  }
+
+  async function runLlmValidationTask() {
+    if (!llmReady) {
+      addToast($t.dashboard?.llm_not_configured || "LLM is not configured", "error");
+      return;
+    }
+    if (isStartingValidation || !envId || !dashboardId) return;
+    isStartingValidation = true;
+    try {
+      const response = await api.postApi("/tasks", {
+        plugin_id: "llm_dashboard_validation",
+        params: {
+          dashboard_id: String(dashboardId),
+          environment_id: envId,
+        },
+      });
+      const taskId = response?.task_id || response?.id;
+      if (taskId) {
+        openDrawerForTask(taskId);
+        addToast($t.dashboard?.validation_started || "LLM validation started", "success");
+      }
+      await Promise.all([
+        loadTaskHistory(),
+        loadThumbnail(true),
+      ]);
+    } catch (err) {
+      addToast(err.message || $t.dashboard?.validation_start_failed || "Failed to start LLM validation", "error");
+    } finally {
+      isStartingValidation = false;
+    }
+  }
+
+  function openLlmReport(taskId) {
+    if (!taskId) return;
+    window.open(`/reports/llm/${encodeURIComponent(String(taskId))}`, "_blank", "noopener,noreferrer");
+  }
+
+  function toTaskTypeLabel(pluginId) {
+    if (pluginId === "superset-backup") return $t.dashboard?.backup || "Backup";
+    if (pluginId === "llm_dashboard_validation") return $t.dashboard?.llm_check || "LLM Check";
+    return pluginId || "-";
+  }
+
+  function getTaskStatusClasses(status) {
+    const normalized = (status || "").toLowerCase();
+    if (normalized === "running" || normalized === "pending") return "bg-blue-100 text-blue-700";
+    if (normalized === "success") return "bg-emerald-100 text-emerald-700";
+    if (normalized === "failed" || normalized === "error") return "bg-rose-100 text-rose-700";
+    if (normalized === "awaiting_input" || normalized === "waiting_input") return "bg-amber-100 text-amber-700";
+    return "bg-slate-100 text-slate-700";
+  }
+
+  function getValidationStatus(task) {
+    if (task?.plugin_id !== "llm_dashboard_validation") {
+      return { label: "-", level: "na", icon: "" };
+    }
+    const rawStatus = String(task?.validation_status || "").toUpperCase();
+    if (rawStatus === "FAIL") {
+      return { label: "FAIL", level: "fail", icon: "!" };
+    }
+    if (rawStatus === "WARN") {
+      return { label: "WARN", level: "warn", icon: "!" };
+    }
+    if (rawStatus === "PASS") {
+      return { label: "PASS", level: "pass", icon: "OK" };
+    }
+    return { label: "UNKNOWN", level: "unknown", icon: "?" };
+  }
+
+  function getValidationStatusClasses(level) {
+    if (level === "fail") return "bg-rose-100 text-rose-700 border-rose-200";
+    if (level === "warn") return "bg-amber-100 text-amber-700 border-amber-200";
+    if (level === "pass") return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    if (level === "unknown") return "bg-slate-100 text-slate-700 border-slate-200";
+    return "bg-slate-50 text-slate-400 border-slate-200";
+  }
+
   function goBack() {
     goto(`/dashboards?env_id=${encodeURIComponent(envId)}`);
   }
@@ -59,6 +224,17 @@
     if (Number.isNaN(parsed.getTime())) return "-";
     return `${parsed.toLocaleDateString()} ${parsed.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
   }
+
+  async function loadLlmStatus() {
+    try {
+      const status = await api.getLlmStatus();
+      llmReady = Boolean(status?.configured);
+      llmStatusReason = status?.reason || "";
+    } catch (_err) {
+      llmReady = false;
+      llmStatusReason = "status_unavailable";
+    }
+  }
 </script>
 
 <div class="mx-auto w-full max-w-7xl space-y-6">
@@ -78,14 +254,46 @@
         {$t.common?.id }: {dashboardId}{#if dashboard?.slug} • {dashboard.slug}{/if}
       </p>
     </div>
-    <button
-      class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
-      on:click={loadDashboardDetail}
-    >
-      {$t.common?.refresh }
-    </button>
+    <div class="flex flex-wrap items-center gap-2">
+      <button
+        class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+        on:click={runBackupTask}
+        disabled={isStartingBackup}
+      >
+        {isStartingBackup ? ($t.common?.loading || "Loading...") : ($t.dashboard?.run_backup || "Run backup")}
+      </button>
+      <button
+        class="inline-flex items-center justify-center rounded-lg border px-4 py-2 text-sm font-medium transition-colors {llmReady ? 'border-indigo-300 bg-indigo-50 text-indigo-700 hover:bg-indigo-100' : 'border-rose-300 bg-rose-50 text-rose-700 opacity-70 cursor-not-allowed'}"
+        on:click={runLlmValidationTask}
+        disabled={isStartingValidation || !llmReady}
+        title={!llmReady ? ($t.dashboard?.llm_not_configured || "LLM is not configured") : ""}
+      >
+        {isStartingValidation ? ($t.common?.loading || "Loading...") : ($t.dashboard?.run_llm_check || "Run LLM check")}
+      </button>
+      <button
+        class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
+        on:click={loadDashboardPage}
+      >
+        {$t.common?.refresh }
+      </button>
+    </div>
   </div>
 
+  {#if !llmReady}
+    <div class="rounded-lg border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800">
+      <div class="font-semibold">{$t.dashboard?.llm_not_configured || "LLM is not configured"}</div>
+      <div class="mt-1 text-rose-700">
+        {#if llmStatusReason === "no_active_provider"}
+          {$t.dashboard?.llm_configure_provider || "No active LLM provider. Configure it in Admin -> LLM Settings."}
+        {:else if llmStatusReason === "invalid_api_key"}
+          {$t.dashboard?.llm_configure_key || "Invalid LLM API key. Update and save a real key in Admin -> LLM Settings."}
+        {:else}
+          {$t.dashboard?.llm_status_unavailable || "LLM status is unavailable. Check settings and backend logs."}
+        {/if}
+      </div>
+    </div>
+  {/if}
+
   {#if error}
     <div class="flex items-center justify-between rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-red-700">
       <span>{error}</span>
@@ -103,6 +311,115 @@
     </div>
     <div class="h-64 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
   {:else if dashboard}
+    <div class="grid grid-cols-1 gap-6 xl:grid-cols-5">
+      <div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-2">
+        <div class="mb-3 flex items-center justify-between">
+          <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+            {$t.dashboard?.api_thumbnail || "Dashboard thumbnail"}
+          </h2>
+          <button
+            class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
+            on:click={() => loadThumbnail(true)}
+            disabled={isThumbnailLoading}
+          >
+            {$t.common?.refresh || "Refresh"}
+          </button>
+        </div>
+        {#if isThumbnailLoading}
+          <div class="h-56 animate-pulse rounded-lg bg-slate-100"></div>
+        {:else if thumbnailUrl}
+          <img
+            src={thumbnailUrl}
+            alt="Dashboard thumbnail"
+            class="h-56 w-full rounded-lg border border-slate-200 object-cover"
+          />
+        {:else}
+          <div class="flex h-56 items-center justify-center rounded-lg border border-dashed border-slate-300 bg-slate-50 text-sm text-slate-500">
+            {thumbnailError || ($t.dashboard?.thumbnail_unavailable || "Thumbnail is unavailable")}
+          </div>
+        {/if}
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-3">
+        <div class="mb-3 flex items-center justify-between">
+          <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+            {$t.tasks?.recent || "Recent tasks"}
+          </h2>
+          <button
+            class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
+            on:click={loadTaskHistory}
+            disabled={isTaskHistoryLoading}
+          >
+            {$t.common?.refresh || "Refresh"}
+          </button>
+        </div>
+        {#if isTaskHistoryLoading}
+          <div class="space-y-2">
+            {#each Array(4) as _}
+              <div class="h-10 animate-pulse rounded bg-slate-100"></div>
+            {/each}
+          </div>
+        {:else if taskHistoryError}
+          <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">{taskHistoryError}</div>
+        {:else if taskHistory.length === 0}
+          <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-center text-sm text-slate-500">
+            {$t.tasks?.select_task || "No backup/LLM tasks yet"}
+          </div>
+        {:else}
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-slate-200 text-sm">
+              <thead class="bg-slate-50">
+                <tr>
+                  <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.type || "Type"}</th>
+                  <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.status || "Status"}</th>
+                  <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.tasks?.result || "Check"}</th>
+                  <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.started || "Started"}</th>
+                  <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.finished || "Finished"}</th>
+                  <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.actions || "Actions"}</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-slate-100">
+                {#each taskHistory as task}
+                  {@const validation = getValidationStatus(task)}
+                  <tr>
+                    <td class="px-3 py-2 text-slate-800">{toTaskTypeLabel(task.plugin_id)}</td>
+                    <td class="px-3 py-2">
+                      <span class={`rounded-full px-2 py-1 text-xs font-semibold uppercase ${getTaskStatusClasses(task.status)}`}>
+                        {task.status}
+                      </span>
+                    </td>
+                    <td class="px-3 py-2">
+                      <span class={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-semibold uppercase ${getValidationStatusClasses(validation.level)}`}>
+                        {#if validation.icon}
+                          <span class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-white/70 px-1 text-[10px] font-bold">
+                            {validation.icon}
+                          </span>
+                        {/if}
+                        {validation.label}
+                      </span>
+                    </td>
+                    <td class="px-3 py-2 text-slate-700">{formatDate(task.started_at)}</td>
+                    <td class="px-3 py-2 text-slate-700">{formatDate(task.finished_at)}</td>
+                    <td class="px-3 py-2">
+                      <div class="flex flex-wrap items-center gap-1">
+                        {#if task.plugin_id === "llm_dashboard_validation"}
+                          <button
+                            class="inline-flex items-center gap-1 rounded-md border border-indigo-300 bg-indigo-50 px-2 py-1 text-xs text-indigo-700 hover:bg-indigo-100"
+                            on:click={() => openLlmReport(task.id)}
+                          >
+                            {$t.tasks?.open_llm_report || "LLM report"}
+                          </button>
+                        {/if}
+                      </div>
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        {/if}
+      </div>
+    </div>
+
     <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
       <div class="rounded-xl border border-slate-200 bg-white p-4">
         <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{$t.dashboard?.last_modified }</p>

frontend/src/routes/reports/llm/[taskId]/+page.svelte

@@ -0,0 +1,260 @@
+<!-- [DEF:frontend/src/routes/reports/llm/[taskId]/+page.svelte:Component] -->
+<script>
+  /**
+   * @TIER: CRITICAL
+   * @PURPOSE: Full report page for LLM dashboard validation task execution.
+   * @LAYER: UI
+   * @RELATION: CALLS -> /api/tasks/{taskId}, /api/tasks/{taskId}/logs
+   * @RELATION: BINDS_TO -> page store
+   * @UX_STATE: Loading -> Skeleton placeholders visible.
+   * @UX_STATE: Loaded -> Full report with durations, screenshots, sent logs and task logs.
+   * @UX_STATE: Error -> Alert with retry action.
+   * @UX_FEEDBACK: Refresh button reloads report payload.
+   * @UX_RECOVERY: Retry via refresh button after API error.
+   * @TEST_DATA: llm_report_success -> {"task":{"id":"task-1","plugin_id":"llm_dashboard_validation","status":"SUCCESS","started_at":"2026-02-26T12:00:00Z","finished_at":"2026-02-26T12:00:10Z","result":{"summary":"OK","issues":[],"screenshot_paths":["/tmp/s1.png"],"logs_sent_to_llm":["[2026-02-26] explore_json"],"timings":{"validation_duration_ms":10000}}},"logs":[{"timestamp":"2026-02-26T12:00:01Z","level":"INFO","source":"llm","message":"Analyzing"}]}
+   * @TEST_DATA: llm_report_error -> {"error":"Failed to load LLM report"}
+   */
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
+  import { api } from "$lib/api.js";
+  import { t } from "$lib/i18n";
+  import { openDrawerForTask } from "$lib/stores/taskDrawer.js";
+  import Icon from "$lib/ui/Icon.svelte";
+
+  $: taskId = $page.params.taskId;
+
+  let task = null;
+  let logs = [];
+  let isLoading = true;
+  let error = null;
+
+  function formatDate(value) {
+    if (!value) return "-";
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) return "-";
+    return `${parsed.toLocaleDateString()} ${parsed.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}`;
+  }
+
+  function formatMs(value) {
+    const ms = Number(value);
+    if (!Number.isFinite(ms) || ms < 0) return "-";
+    if (ms < 1000) return `${ms} ms`;
+    return `${(ms / 1000).toFixed(2)} s`;
+  }
+
+  function getDashboardCheckResult(resultPayload) {
+    const rawStatus = String(resultPayload?.status || "").toUpperCase();
+    if (rawStatus === "FAIL") return { label: "FAIL", level: "fail", icon: "!" };
+    if (rawStatus === "WARN") return { label: "WARN", level: "warn", icon: "!" };
+    if (rawStatus === "PASS") return { label: "PASS", level: "pass", icon: "OK" };
+    return { label: "UNKNOWN", level: "unknown", icon: "?" };
+  }
+
+  function getCheckResultClasses(level) {
+    if (level === "fail") return "bg-rose-100 text-rose-700 border-rose-200";
+    if (level === "warn") return "bg-amber-100 text-amber-700 border-amber-200";
+    if (level === "pass") return "bg-emerald-100 text-emerald-700 border-emerald-200";
+    return "bg-slate-100 text-slate-700 border-slate-200";
+  }
+
+  async function loadReport() {
+    if (!taskId) return;
+    isLoading = true;
+    error = null;
+    try {
+      const [taskPayload, logsPayload] = await Promise.all([
+        api.getTask(taskId),
+        api.getTaskLogs(taskId, { limit: 1000 }),
+      ]);
+      task = taskPayload;
+      logs = Array.isArray(logsPayload) ? logsPayload : [];
+    } catch (err) {
+      error = err?.message || "Failed to load LLM report";
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function backToReports() {
+    goto("/reports");
+  }
+
+  function openTaskDetails() {
+    if (!taskId) return;
+    openDrawerForTask(taskId);
+  }
+
+  onMount(async () => {
+    await loadReport();
+  });
+
+  $: result = task?.result || {};
+  $: checkResult = getDashboardCheckResult(result);
+  $: timings = result?.timings || {};
+  $: screenshotPaths = Array.isArray(result?.screenshot_paths)
+    ? result.screenshot_paths
+    : (result?.screenshot_path ? [result.screenshot_path] : []);
+  $: sentLogs = Array.isArray(result?.logs_sent_to_llm) ? result.logs_sent_to_llm : [];
+</script>
+
+<div class="mx-auto w-full max-w-7xl space-y-6">
+  <div class="flex items-start justify-between">
+    <div>
+      <button
+        class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
+        on:click={backToReports}
+      >
+        <Icon name="chevronLeft" size={16} />
+        {$t.nav?.reports || "Reports"}
+      </button>
+      <h1 class="mt-2 text-2xl font-bold text-slate-900">
+        {$t.tasks?.result_llm_validation || "LLM Validation Report"}
+      </h1>
+      <p class="mt-1 text-sm text-slate-500">Task: {taskId}</p>
+    </div>
+    <div class="flex items-center gap-2">
+      <button
+        class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+        on:click={openTaskDetails}
+      >
+        {$t.tasks?.details_logs || "Task details and logs"}
+      </button>
+      <button
+        class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
+        on:click={loadReport}
+      >
+        {$t.common?.refresh || "Refresh"}
+      </button>
+    </div>
+  </div>
+
+  {#if error}
+    <div class="rounded-lg border border-rose-300 bg-rose-50 px-4 py-3 text-rose-700">
+      <div>{error}</div>
+    </div>
+  {/if}
+
+  {#if isLoading}
+    <div class="space-y-3">
+      <div class="h-24 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
+      <div class="h-64 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
+      <div class="h-64 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
+    </div>
+  {:else if task}
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-5">
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Status</p>
+        <p class="mt-2 text-lg font-semibold text-slate-900">{task?.status || "-"}</p>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Dashboard check</p>
+        <span class={`mt-2 inline-flex items-center gap-1 rounded-full border px-2 py-1 text-sm font-semibold uppercase ${getCheckResultClasses(checkResult.level)}`}>
+          <span class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-white/70 px-1 text-[10px] font-bold">
+            {checkResult.icon}
+          </span>
+          {checkResult.label}
+        </span>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Started</p>
+        <p class="mt-2 text-sm font-semibold text-slate-900">{formatDate(task?.started_at)}</p>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Finished</p>
+        <p class="mt-2 text-sm font-semibold text-slate-900">{formatDate(task?.finished_at)}</p>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Duration</p>
+        <p class="mt-2 text-lg font-semibold text-slate-900">{formatMs(timings?.validation_duration_ms)}</p>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-4">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+        Text Report
+      </h2>
+      <p class="mt-2 text-sm text-slate-800">{result?.summary || "-"}</p>
+      {#if Array.isArray(result?.issues) && result.issues.length > 0}
+        <div class="mt-4 space-y-2">
+          {#each result.issues as issue}
+            <div class="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm">
+              <div class="font-semibold text-slate-900">{issue?.severity || "INFO"}</div>
+              <div class="text-slate-700">{issue?.message || "-"}</div>
+              {#if issue?.location}
+                <div class="text-xs text-slate-500">Location: {issue.location}</div>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-4">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+        Screenshots
+      </h2>
+      {#if screenshotPaths.length === 0}
+        <p class="mt-2 text-sm text-slate-500">No screenshots saved.</p>
+      {:else}
+        <div class="mt-3 grid grid-cols-1 gap-4 lg:grid-cols-2">
+          {#each screenshotPaths as path}
+            <a href={`/api/storage/file?path=${encodeURIComponent(path)}`} target="_blank" rel="noreferrer noopener" class="block">
+              <img
+                src={`/api/storage/file?path=${encodeURIComponent(path)}`}
+                alt="Validation screenshot"
+                class="h-64 w-full rounded-lg border border-slate-200 object-cover"
+              />
+              <p class="mt-1 truncate text-xs text-slate-500">{path}</p>
+            </a>
+          {/each}
+        </div>
+      {/if}
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-4">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+        Logs sent to LLM ({sentLogs.length})
+      </h2>
+      {#if sentLogs.length === 0}
+        <p class="mt-2 text-sm text-slate-500">No source logs were attached.</p>
+      {:else}
+        <pre class="mt-3 max-h-80 overflow-auto rounded-lg bg-slate-900 p-3 text-xs text-slate-100">{sentLogs.join('\n')}</pre>
+      {/if}
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white p-4">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+        Task execution logs ({logs.length})
+      </h2>
+      {#if logs.length === 0}
+        <p class="mt-2 text-sm text-slate-500">No task logs available.</p>
+      {:else}
+        <div class="mt-3 max-h-96 overflow-auto rounded-lg border border-slate-200">
+          <table class="min-w-full divide-y divide-slate-200 text-xs">
+            <thead class="bg-slate-50">
+              <tr>
+                <th class="px-3 py-2 text-left font-semibold text-slate-600">Time</th>
+                <th class="px-3 py-2 text-left font-semibold text-slate-600">Level</th>
+                <th class="px-3 py-2 text-left font-semibold text-slate-600">Source</th>
+                <th class="px-3 py-2 text-left font-semibold text-slate-600">Message</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+              {#each logs as logEntry}
+                <tr>
+                  <td class="px-3 py-2 align-top text-slate-600">{formatDate(logEntry?.timestamp)}</td>
+                  <td class="px-3 py-2 align-top text-slate-700">{logEntry?.level || "-"}</td>
+                  <td class="px-3 py-2 align-top text-slate-700">{logEntry?.source || "-"}</td>
+                  <td class="px-3 py-2 align-top text-slate-800 whitespace-pre-wrap">{logEntry?.message || "-"}</td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<!-- [/DEF:frontend/src/routes/reports/llm/[taskId]/+page.svelte:Component] -->