busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve dashboard LLM validation UX and report flow

Browse Source
This commit is contained in:
busya
2026-02-26 17:53:41 +03:00
parent 5ec1254336
commit f4612c0737
10 changed files with 1199 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/lib/api.js
View File

@@ -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

34
frontend/src/lib/components/assistant/AssistantChatPanel.svelte
View File

@@ -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

71
frontend/src/lib/components/layout/TaskDrawer.svelte
View File

@@ -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>