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>

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

@@ -0,0 +1,313 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { page } from "$app/state";
+  import { enqueueBackfill, syncDialogs } from "$lib/api/endpoints";
+  import JobList from "$lib/components/jobs/JobList.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import { chats } from "$lib/stores/chats.svelte";
+  import { toasts } from "$lib/stores/toasts.svelte";
+
+  let version = $state(0);
+  let selected = $state<number | null>(
+    page.params.chatId ? Number(page.params.chatId) : null
+  );
+  let media = $state(true);
+  let picking = $state(false);
+  let filter = $state("");
+  let starting = $state(false);
+  let syncing = $state(false);
+
+  const availableChats = $derived(
+    chats.list
+      .filter((c) =>
+        (c.title ?? "").toLowerCase().includes(filter.trim().toLowerCase())
+      )
+      .slice(0, 40)
+  );
+
+  function chatTitle(id: number | null): string {
+    if (id === null) {
+      return "Чат не выбран";
+    }
+    return chats.byId(id)?.title ?? `Чат ${id}`;
+  }
+
+  function selectChat(id: number) {
+    selected = id;
+    picking = false;
+    filter = "";
+  }
+
+  async function start() {
+    if (selected === null || starting) {
+      return;
+    }
+    starting = true;
+    try {
+      await enqueueBackfill(selected, media);
+      toasts.success("Бэкфилл запущен");
+      version += 1;
+    } catch {
+      toasts.error("Не удалось запустить бэкфилл");
+    } finally {
+      starting = false;
+    }
+  }
+
+  async function sync() {
+    if (syncing) {
+      return;
+    }
+    syncing = true;
+    try {
+      await syncDialogs();
+      toasts.success("Синхронизация диалогов запущена");
+      version += 1;
+    } catch {
+      toasts.error("Не удалось синхронизировать диалоги");
+    } finally {
+      syncing = false;
+    }
+  }
+
+  onMount(() => {
+    chats.load();
+  });
+</script>
+
+<div class="panel">
+  <section>
+    <div class="section-title">Диалоги</div>
+    <p class="hint">
+      Синхронизация подтягивает все диалоги аккаунта — старые чаты станут видны
+      и доступны для бэкфилла.
+    </p>
+    <div class="action">
+      <Button variant="secondary" fluid loading={syncing} onclick={sync}>
+        <Icon name="reload" />
+        <span>Синхронизировать диалоги</span>
+      </Button>
+    </div>
+  </section>
+
+  <section>
+    <div class="section-title">Бэкфилл</div>
+
+    <button
+      type="button"
+      class="select"
+      onclick={() => {
+        picking = !picking;
+      }}
+    >
+      <Icon name="comments" size="1.25rem" />
+      <span class="select-label">{chatTitle(selected)}</span>
+      <Icon name="down" size="1.25rem" />
+    </button>
+
+    {#if picking}
+      <div class="picker">
+        <input
+          class="filter"
+          type="text"
+          placeholder="Поиск чата"
+          bind:value={filter}
+        >
+        {#each availableChats as chat (chat.chat_id)}
+          <button
+            type="button"
+            class="pick-row"
+            onclick={() => selectChat(chat.chat_id)}
+          >
+            {chat.title ?? `Чат ${chat.chat_id}`}
+          </button>
+        {/each}
+      </div>
+    {/if}
+
+    <button
+      type="button"
+      class="toggle-row"
+      role="switch"
+      aria-checked={media}
+      onclick={() => {
+        media = !media;
+      }}
+    >
+      <span class="label">Скачивать медиа</span>
+      <span class="switch" class:on={media}>
+        <span class="knob"></span>
+      </span>
+    </button>
+
+    <div class="action">
+      <Button
+        variant="primary"
+        fluid
+        disabled={selected === null}
+        loading={starting}
+        onclick={start}
+      >
+        <Icon name="cloud-download" />
+        <span>Запустить бэкфилл</span>
+      </Button>
+    </div>
+  </section>
+
+  <section>
+    <div class="section-title">Задачи</div>
+    <JobList {version} />
+  </section>
+</div>
+
+<style lang="scss">
+  section {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--color-borders);
+  }
+
+  .section-title {
+    padding: 0.5rem 1rem;
+    font-size: 0.8125rem;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary);
+  }
+
+  .select {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+
+    width: 100%;
+    padding: 0.625rem 1rem;
+    border: 0;
+
+    font-size: 0.9375rem;
+    color: var(--color-text);
+    background-color: transparent;
+
+    &:hover {
+      background-color: var(--color-chat-hover);
+    }
+  }
+
+  .select-label {
+    overflow: hidden;
+    flex: 1;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .picker {
+    display: flex;
+    flex-direction: column;
+    padding: 0 0.5rem 0.5rem;
+  }
+
+  .filter {
+    margin: 0.25rem 0.5rem 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--color-borders);
+    border-radius: var(--border-radius-default);
+
+    font-size: 0.9375rem;
+    color: var(--color-text);
+    background-color: var(--color-background);
+
+    &:focus {
+      border-color: var(--color-primary);
+      outline: none;
+    }
+  }
+
+  .pick-row {
+    cursor: pointer;
+    overflow: hidden;
+
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 0;
+    border-radius: 0.5rem;
+
+    font-size: 0.9375rem;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-text);
+    background-color: transparent;
+
+    &:hover {
+      background-color: var(--color-chat-hover);
+    }
+  }
+
+  .toggle-row {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: 0;
+
+    font-size: 0.9375rem;
+    text-align: start;
+    color: var(--color-text);
+    background-color: transparent;
+
+    &:hover {
+      background-color: var(--color-chat-hover);
+    }
+  }
+
+  .label {
+    flex: 1;
+  }
+
+  .switch {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+
+    width: 2.25rem;
+    height: 1.375rem;
+    padding: 0.125rem;
+    border-radius: 0.6875rem;
+
+    background-color: var(--color-borders);
+    transition: background-color 0.15s ease;
+
+    &.on {
+      background-color: var(--color-primary);
+    }
+  }
+
+  .knob {
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 50%;
+
+    background-color: var(--color-white);
+    transition: transform 0.15s ease;
+
+    .on & {
+      transform: translateX(0.875rem);
+    }
+  }
+
+  .action {
+    padding: 0.5rem 1rem 0.75rem;
+  }
+
+  .hint {
+    margin: 0;
+    padding: 0 1rem 0.25rem;
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+  }
+</style>