feat: web UI chat render, panels, presence + analytics

frontend/src/lib/components/jobs/JobList.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { listJobs } from "$lib/api/endpoints";
+  import type { JobStatus, JobView } from "$lib/api/types";
+  import Spinner from "$lib/components/ui/Spinner.svelte";
+  import { formatFull } from "$lib/format/datetime";
+
+  interface Props {
+    version?: number;
+  }
+
+  let { version = 0 }: Props = $props();
+
+  const POLL_MS = 2000;
+
+  const KIND_LABELS: Record<string, string> = {
+    backfill: "Бэкфилл",
+    fetch_media: "Докачка медиа",
+    fetch_avatar: "Аватар",
+    fetch_custom_emoji: "Кастом-эмодзи",
+    enrich_chat: "Обогащение чата",
+    transcribe: "Расшифровка",
+    sync_dialogs: "Синхронизация диалогов",
+  };
+
+  const STATUS_LABELS: Record<JobStatus, string> = {
+    pending: "В очереди",
+    running: "Выполняется",
+    done: "Готово",
+    failed: "Ошибка",
+    canceled: "Отменено",
+    paused: "Пауза",
+  };
+
+  let jobs = $state<JobView[]>([]);
+  let loading = $state(true);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  function isActive(list: JobView[]): boolean {
+    return list.some((j) => j.status === "pending" || j.status === "running");
+  }
+
+  function schedule() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    if (isActive(jobs)) {
+      timer = setTimeout(() => {
+        load().catch(() => undefined);
+      }, POLL_MS);
+    }
+  }
+
+  async function load() {
+    jobs = await listJobs();
+    loading = false;
+    schedule();
+  }
+
+  function kindLabel(kind: string): string {
+    return KIND_LABELS[kind] ?? kind;
+  }
+
+  function processed(job: JobView): number | null {
+    const value = job.progress.processed;
+    return typeof value === "number" ? value : null;
+  }
+
+  function chatId(job: JobView): number | null {
+    const value = job.params.chat_id;
+    return typeof value === "number" ? value : null;
+  }
+
+  $effect(() => {
+    if (version >= 0) {
+      load().catch(() => {
+        loading = false;
+      });
+    }
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+  });
+</script>
+
+{#if loading}
+  <div class="state"><Spinner /></div>
+{:else if jobs.length === 0}
+  <div class="state empty">Задач нет</div>
+{:else}
+  <div class="jobs">
+    {#each jobs as job (job.id)}
+      <div class="job">
+        <div class="job-head">
+          <span class="kind">{kindLabel(job.kind)}</span>
+          <span class="badge {job.status}">{STATUS_LABELS[job.status]}</span>
+        </div>
+        <div class="meta">
+          {#if chatId(job) !== null}
+            <span>чат {chatId(job)}</span>
+          {/if}
+          {#if processed(job) !== null}
+            <span>обработано {processed(job)}</span>
+          {/if}
+          {#if job.flood_waits > 0}
+            <span>flood-wait {job.flood_waits}</span>
+          {/if}
+          <span class="time">{formatFull(job.created_at)}</span>
+        </div>
+        {#if job.error}
+          <div class="error">{job.error}</div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style lang="scss">
+  .state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+
+    &.empty {
+      font-size: 0.9375rem;
+      color: var(--color-text-secondary);
+    }
+  }
+
+  .jobs {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .job {
+    padding: 0.625rem 1rem;
+    border-bottom: 1px solid var(--color-borders);
+  }
+
+  .job-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .kind {
+    flex: 1;
+    font-size: 0.9375rem;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .badge {
+    flex-shrink: 0;
+
+    padding: 0.0625rem 0.5rem;
+    border-radius: 0.625rem;
+
+    font-size: 0.75rem;
+    color: var(--color-white);
+    background-color: var(--color-text-secondary);
+
+    &.pending {
+      background-color: var(--color-text-secondary);
+    }
+
+    &.running {
+      background-color: var(--color-primary);
+    }
+
+    &.done {
+      background-color: var(--color-green);
+    }
+
+    &.failed {
+      background-color: var(--color-error);
+    }
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    margin-top: 0.25rem;
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+  }
+
+  .time {
+    margin-left: auto;
+  }
+
+  .error {
+    overflow: hidden;
+    margin-top: 0.25rem;
+    font-size: 0.8125rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-error);
+  }
+</style>