Improve dashboard LLM validation UX and report flow

2026-02-26 17:53:41 +03:00
parent a8ccf6cb79
commit e97778448d
10 changed files with 1199 additions and 30 deletions
--- a/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
+++ b/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
--- a/frontend/src/lib/components/layout/TaskDrawer.svelte
+++ b/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>