feat: mcp and backfill fixes

frontend/src/lib/api/endpoints.ts

@@ -280,6 +280,10 @@ export function getJob(jobId: number): Promise<JobView> {
   return request<JobView>(`/jobs/${jobId}`, { account: true });
 }
 
+export function cancelJob(jobId: number): Promise<JobView> {
+  return request<JobView>(`/jobs/${jobId}/cancel`, { method: "POST" });
+}
+
 export function listJobs(status?: JobStatus): Promise<JobView[]> {
   return request<JobView[]>("/jobs", {
     account: true,
@@ -350,6 +354,20 @@ export function fetchMedia(
   });
 }
 
+export function transcribeMedia(
+  chatId: number,
+  messageId: number
+): Promise<{ job_id: number }> {
+  return request<{ job_id: number }>("/media/transcribe", {
+    method: "POST",
+    body: {
+      account_id: accounts.selectedId,
+      chat_id: chatId,
+      message_id: messageId,
+    },
+  });
+}
+
 export function listWatches(): Promise<Watch[]> {
   return request<Watch[]>("/watches", { account: true });
 }

frontend/src/lib/api/media.ts

@@ -1,8 +1,11 @@
 import { requestMedia } from "$lib/api/client";
-import { getMessageMedia } from "$lib/api/endpoints";
+import { getMessageMedia, transcribeMedia } from "$lib/api/endpoints";
 import type { MediaRef } from "$lib/api/types";
 import { accounts } from "$lib/stores/accounts.svelte";
 
+const TRANSCRIBE_TRIES = 10;
+const TRANSCRIBE_DELAY = 2000;
+
 export type InlineMedia =
   | {
       state: "ready";
@@ -143,6 +146,43 @@ export function loadMediaItem(media: MediaRef): Promise<InlineMedia> {
   return promise;
 }
 
+function patchTranscript(
+  chatId: number,
+  messageId: number,
+  text: string
+): void {
+  const account = accounts.selectedId;
+  if (account === null) {
+    return;
+  }
+  const cached = ready.get(cacheKey(account, chatId, messageId));
+  if (cached?.state === "ready") {
+    cached.transcript = text;
+  }
+}
+
+export async function requestTranscription(
+  chatId: number,
+  messageId: number
+): Promise<string | null> {
+  await transcribeMedia(chatId, messageId);
+  for (let i = 0; i < TRANSCRIBE_TRIES; i++) {
+    await new Promise((resolve) => {
+      setTimeout(resolve, TRANSCRIBE_DELAY);
+    });
+    try {
+      const meta = await getMessageMedia(chatId, messageId);
+      if (meta.extracted_text) {
+        patchTranscript(chatId, messageId, meta.extracted_text);
+        return meta.extracted_text;
+      }
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+
 export function loadInlineMedia(
   chatId: number,
   messageId: number

frontend/src/lib/components/MessageMedia.svelte

@@ -106,7 +106,13 @@
       {:else if !loaded}
         <div class="media-skeleton"><Spinner /></div>
       {:else if ready && kind === "voice"}
-        <VoiceMessage url={ready.url} transcript={ready.transcript} {own} />
+        <VoiceMessage
+          url={ready.url}
+          transcript={ready.transcript}
+          chatId={message.chat_id}
+          messageId={message.message_id}
+          {own}
+        />
       {:else if ready && kind === "video_note"}
         <VideoNote url={ready.url} transcript={ready.transcript} />
       {:else if ready && kind === "audio"}

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

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { listJobs } from "$lib/api/endpoints";
+  import { cancelJob, 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";
+  import { toasts } from "$lib/stores/toasts.svelte";
 
   interface Props {
     version?: number;
@@ -33,12 +34,32 @@
 
   let jobs = $state<JobView[]>([]);
   let loading = $state(true);
+  let canceling = $state<number | null>(null);
   let timer: ReturnType<typeof setTimeout> | null = null;
 
   function isActive(list: JobView[]): boolean {
     return list.some((j) => j.status === "pending" || j.status === "running");
   }
 
+  function canCancel(job: JobView): boolean {
+    return job.status === "pending" || job.status === "running";
+  }
+
+  async function cancel(job: JobView) {
+    if (canceling !== null) {
+      return;
+    }
+    canceling = job.id;
+    try {
+      await cancelJob(job.id);
+      await load();
+    } catch {
+      toasts.error("Не удалось остановить задачу");
+    } finally {
+      canceling = null;
+    }
+  }
+
   function schedule() {
     if (timer) {
       clearTimeout(timer);
@@ -96,6 +117,16 @@
       <div class="job">
         <div class="job-head">
           <span class="kind">{kindLabel(job.kind)}</span>
+          {#if canCancel(job)}
+            <button
+              type="button"
+              class="stop"
+              onclick={() => cancel(job)}
+              disabled={canceling === job.id}
+            >
+              Стоп
+            </button>
+          {/if}
           <span class="badge {job.status}">{STATUS_LABELS[job.status]}</span>
         </div>
         <div class="meta">
@@ -178,6 +209,33 @@
     &.failed {
       background-color: var(--color-error);
     }
+
+    &.canceled {
+      background-color: var(--color-text-secondary);
+    }
+  }
+
+  .stop {
+    flex-shrink: 0;
+
+    padding: 0.0625rem 0.5rem;
+    border: 1px solid var(--color-error);
+    border-radius: 0.625rem;
+
+    font-size: 0.75rem;
+    color: var(--color-error);
+    cursor: pointer;
+    background-color: transparent;
+
+    &:hover:not(:disabled) {
+      color: var(--color-white);
+      background-color: var(--color-error);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
   }
 
   .meta {

frontend/src/lib/components/media/VoiceMessage.svelte

@@ -1,18 +1,51 @@
 <script lang="ts">
+  import { requestTranscription } from "$lib/api/media";
   import Icon from "$lib/components/ui/Icon.svelte";
+  import Spinner from "$lib/components/ui/Spinner.svelte";
   import { formatDuration } from "$lib/format/duration";
   import { claimPlayback, releasePlayback } from "$lib/media/playback";
   import { computeWaveform, flatWaveform } from "$lib/media/waveform";
+  import { toasts } from "$lib/stores/toasts.svelte";
 
   interface Props {
+    chatId: number;
+    messageId: number;
     own: boolean;
     transcript?: string | null;
     url: string;
   }
 
-  let { url, own, transcript = null }: Props = $props();
+  let { url, own, transcript = null, chatId, messageId }: Props = $props();
+
+  let fetched = $state<string | null>(null);
+  let pending = $state(false);
+  const text = $derived(fetched ?? transcript);
 
   let showTranscript = $state(false);
+
+  async function onTranscribe() {
+    if (text) {
+      showTranscript = !showTranscript;
+      return;
+    }
+    if (pending) {
+      return;
+    }
+    pending = true;
+    try {
+      const result = await requestTranscription(chatId, messageId);
+      if (result) {
+        fetched = result;
+        showTranscript = true;
+      } else {
+        toasts.error("Не удалось расшифровать");
+      }
+    } catch {
+      toasts.error("Не удалось расшифровать");
+    } finally {
+      pending = false;
+    }
+  }
   let element = $state<HTMLAudioElement>();
   let peaks = $state<number[]>(flatWaveform());
   let currentTime = $state(0);
@@ -68,7 +101,11 @@
       type="button"
       aria-label="Play voice"
     >
-      <Icon name={paused ? "play" : "pause"} size="1.5rem" />
+      <Icon
+        name={paused ? "play" : "pause"}
+        size="1.5rem"
+        class={paused ? "nudge" : ""}
+      />
     </button>
     <div class="body">
       <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -83,17 +120,20 @@
       </div>
       <div class="time">{formatDuration(elapsed)}</div>
     </div>
-    {#if transcript}
-      <button
-        class="transcribe"
-        class:active={showTranscript}
-        onclick={() => (showTranscript = !showTranscript)}
-        type="button"
-        aria-label="Show transcription"
-      >
+    <button
+      class="transcribe"
+      class:active={showTranscript && Boolean(text)}
+      disabled={pending}
+      onclick={onTranscribe}
+      type="button"
+      aria-label="Show transcription"
+    >
+      {#if pending}
+        <Spinner color={own ? "white" : "gray"} size="1rem" />
+      {:else}
         <Icon name="transcribe" size="1.125rem" />
-      </button>
-    {/if}
+      {/if}
+    </button>
     <!-- biome-ignore lint/a11y/useMediaCaption: archived voice note has no captions -->
     <audio
       bind:this={element}
@@ -106,8 +146,8 @@
       src={url}
     ></audio>
   </div>
-  {#if transcript && showTranscript}
-    <div class="transcript">{transcript}</div>
+  {#if text && showTranscript}
+    <div class="transcript">{text}</div>
   {/if}
 </div>
 
@@ -158,6 +198,10 @@
       color: var(--toggle-fg);
       background-color: var(--active);
     }
+
+    &:disabled {
+      cursor: default;
+    }
   }
 
   .transcript {
@@ -187,6 +231,10 @@
     color: var(--toggle-fg);
 
     background-color: var(--active);
+
+    :global(.nudge) {
+      transform: translateX(0.0625rem);
+    }
   }
 
   .body {

frontend/src/lib/styles/global.scss

@@ -23,6 +23,13 @@ body {
   box-sizing: border-box;
 }
 
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
 .icon::before {
   font-family: "icons" !important;
   speak: none;