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

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

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

260
frontend/src/routes/reports/llm/[taskId]/+page.svelte Normal file
View File

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