@hed-hog/lms 0.0.353 → 0.0.354

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-lesson.tsx.ejs

@@ -2,6 +2,10 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronDown,
+  ChevronUp,
   CircleDot,
   CircleOff,
   ClipboardList,
@@ -10,11 +14,10 @@ import {
   ExternalLink,
   Eye,
   EyeOff,
-  File as FileIcon,
-  FileImage,
   FileText,
   GripVertical,
   HelpCircle,
+  Image,
   ListChecks,
   Loader2,
   Lock,
@@ -37,8 +40,16 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { EntityPicker } from '@/components/ui/entity-picker';
 import {
   Form,
@@ -67,6 +78,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
@@ -88,13 +100,18 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
+import { FileTypeIcon } from '@/components/file-type-icon';
 import { RichTextEditor } from '@/components/rich-text-editor';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useQueryClient } from '@tanstack/react-query';
+import { JobDetailSheet } from '../../../../../queue/jobs/_components/job-detail-sheet';
 import {
+  createLessonFrame,
   deleteFile,
+  deleteLessonFrame,
   enqueueLessonVideoConversion,
   getQueueJob,
+  updateLessonFrame,
   uploadFile,
   type QueueJobResponse,
   type QueueJobStatus,
@@ -107,45 +124,85 @@ import {
   courseStructureQueryKey,
   type CourseStructureCacheData,
 } from '../_data/use-course-structure-query';
+import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
+import {
+  useTranscriptionSegmentsQuery,
+  useUpdateTranscriptionSegmentsMutation,
+} from '../_data/use-transcription-segments';
+import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import type {
   LessonStatus,
+  TranscriptionSegment as LessonTranscriptionSegment,
   LessonType,
   Resource,
+  VideoFrame,
   VideoProvider,
 } from './types';
 
-// ── Resource helpers ──────────────────────────────────────────────────────────
-
-function getResourceIcon(type: string): LucideIcon {
-  if (type === 'application/pdf' || type.endsWith('pdf')) return FileText;
-  if (type.startsWith('image/')) return FileImage;
-  return FileIcon;
-}
-
-function getResourceIconColor(type: string): string {
-  if (type === 'application/pdf' || type.endsWith('pdf')) return 'text-red-500';
-  if (type.startsWith('image/')) return 'text-blue-500';
-  return 'text-muted-foreground';
-}
-
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
+function formatDateTimeLabel(value?: string | null): string | null {
+  if (!value) return null;
+
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return null;
+
+  return new Intl.DateTimeFormat('pt-BR', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(parsed);
+}
+
 function videoProfileResourceType(profileId: number): string {
   return `video_profile:${profileId}`;
 }
 
 const MAX_VIDEO_UPLOAD_SIZE_BYTES = 100 * 1024 * 1024;
 
+type LessonTypeLabelKey = `types.${LessonType}`;
+type VideoJobStatusMessageKey = `lessonForm.videoJobStatuses.${QueueJobStatus}`;
+type VideoAttemptStatus =
+  QueueJobResponse['queue_job_attempt'][number]['status'];
+type VideoAttemptStatusMessageKey =
+  `lessonForm.videoAttemptStatuses.${VideoAttemptStatus}`;
+type VideoJobEventType =
+  QueueJobResponse['queue_job_event'][number]['event_type'];
+type VideoJobEventMessageKey = `lessonForm.videoJobEvents.${VideoJobEventType}`;
+type VideoJobProgressPhase =
+  | 'download_original'
+  | 'probe_duration'
+  | 'convert_profile'
+  | 'extract_frames'
+  | 'extract_frames_done'
+  | 'extract_audio'
+  | 'queue_transcription'
+  | 'queue_transcription_done'
+  | 'queue_transcription_skipped'
+  | 'transcription_download_audio'
+  | 'transcription_split_audio'
+  | 'transcription_split_done'
+  | 'transcription_ai_chunk'
+  | 'transcription_save'
+  | 'transcription_done';
+type VideoJobProgressMessageKey =
+  `lessonForm.videoJobProgress.${VideoJobProgressPhase}`;
+type TranslateFn = (
+  key: string,
+  values?: Record<string, string | number>
+) => string;
+
 type LessonEditorTab =
   | 'dados'
   | 'conteudo'
   | 'videos'
+  | 'imagens'
   | 'transcricao'
+  | 'audios'
   | 'recursos';
 
 const ACTIVE_VIDEO_JOB_STATUSES: QueueJobStatus[] = [
@@ -162,6 +219,21 @@ const TERMINAL_VIDEO_JOB_STATUSES: QueueJobStatus[] = [
   'dead_letter',
 ];
 
+const VIDEO_JOB_FEEDBACK_COLLAPSED_STORAGE_KEY =
+  'lms:global:videoJobFeedbackCollapsed';
+
+function readVideoJobFeedbackCollapsedPreference(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    return (
+      window.localStorage.getItem(VIDEO_JOB_FEEDBACK_COLLAPSED_STORAGE_KEY) ===
+      'true'
+    );
+  } catch {
+    return false;
+  }
+}
+
 const VIDEO_JOB_STATUS_COLORS: Record<QueueJobStatus, string> = {
   pending: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
   scheduled: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
@@ -175,16 +247,57 @@ const VIDEO_JOB_STATUS_COLORS: Record<QueueJobStatus, string> = {
   dead_letter: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
 };
 
-function formatDateTimeLabel(value?: string | null): string | null {
-  if (!value) return null;
+const VIDEO_JOB_PROGRESS_PHASES = new Set<VideoJobProgressPhase>([
+  'download_original',
+  'probe_duration',
+  'convert_profile',
+  'extract_frames',
+  'extract_frames_done',
+  'extract_audio',
+  'queue_transcription',
+  'queue_transcription_done',
+  'queue_transcription_skipped',
+  'transcription_download_audio',
+  'transcription_split_audio',
+  'transcription_split_done',
+  'transcription_ai_chunk',
+  'transcription_save',
+  'transcription_done',
+]);
 
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return null;
+function getVideoJobProgressPhase(
+  event?: QueueJobResponse['queue_job_event'][number] | null
+): VideoJobProgressPhase | null {
+  const phase = event?.metadata?.phase;
+  if (typeof phase !== 'string') return null;
 
-  return new Intl.DateTimeFormat('pt-BR', {
-    dateStyle: 'short',
-    timeStyle: 'short',
-  }).format(parsed);
+  return VIDEO_JOB_PROGRESS_PHASES.has(phase as VideoJobProgressPhase)
+    ? (phase as VideoJobProgressPhase)
+    : null;
+}
+
+function getVideoJobTimerPhase(
+  status?: QueueJobStatus
+): 'waiting' | 'running' | 'completed' | 'error' {
+  if (!status) return 'waiting';
+
+  if (status === 'processing' || status === 'retrying') {
+    return 'running';
+  }
+
+  if (status === 'completed') {
+    return 'completed';
+  }
+
+  if (
+    status === 'failed' ||
+    status === 'dead_letter' ||
+    status === 'canceled'
+  ) {
+    return 'error';
+  }
+
+  return 'waiting';
 }
 
 function formatDurationLabel(durationMs?: number | null): string | null {
@@ -197,11 +310,114 @@ function formatDurationLabel(durationMs?: number | null): string | null {
   return `${(seconds / 60).toFixed(1)} min`;
 }
 
+function formatTimecodeLabel(timeSeconds?: number | null): string {
+  const totalSeconds = Math.max(0, Math.floor(timeSeconds ?? 0));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+  }
+
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+function formatElapsedTimer(durationMs?: number | null): string | null {
+  if (durationMs == null || !Number.isFinite(durationMs)) return null;
+
+  const totalSeconds = Math.max(0, Math.floor(durationMs / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+function getVideoJobProgressMessage(
+  event: QueueJobResponse['queue_job_event'][number] | null | undefined,
+  t: TranslateFn
+): string | null {
+  if (!event) return null;
+
+  const phase = getVideoJobProgressPhase(event);
+  const metadata = event.metadata ?? {};
+
+  if (phase === 'convert_profile') {
+    const profileName =
+      typeof metadata.profileName === 'string' && metadata.profileName.trim()
+        ? metadata.profileName.trim()
+        : typeof metadata.profileId === 'number'
+          ? `#${metadata.profileId}`
+          : '—';
+
+    return t('lessonForm.videoJobProgress.convert_profile', {
+      profileName,
+    });
+  }
+
+  if (phase === 'extract_frames_done') {
+    const count =
+      typeof metadata.frames === 'number' && Number.isFinite(metadata.frames)
+        ? metadata.frames
+        : 0;
+
+    return t('lessonForm.videoJobProgress.extract_frames_done', { count });
+  }
+
+  if (phase === 'transcription_split_done') {
+    const count =
+      typeof metadata.chunks === 'number' && Number.isFinite(metadata.chunks)
+        ? metadata.chunks
+        : 0;
+
+    return t('lessonForm.videoJobProgress.transcription_split_done', {
+      count,
+    });
+  }
+
+  if (phase === 'transcription_ai_chunk') {
+    const current =
+      typeof metadata.chunkIndex === 'number' &&
+      Number.isFinite(metadata.chunkIndex)
+        ? metadata.chunkIndex
+        : 1;
+    const total =
+      typeof metadata.chunkCount === 'number' &&
+      Number.isFinite(metadata.chunkCount)
+        ? metadata.chunkCount
+        : current;
+
+    return t('lessonForm.videoJobProgress.transcription_ai_chunk', {
+      current,
+      total,
+    });
+  }
+
+  if (phase === 'transcription_done') {
+    const count =
+      typeof metadata.segments === 'number' &&
+      Number.isFinite(metadata.segments)
+        ? metadata.segments
+        : 0;
+
+    return t('lessonForm.videoJobProgress.transcription_done', { count });
+  }
+
+  if (phase) {
+    return t(
+      `lessonForm.videoJobProgress.${phase}` as VideoJobProgressMessageKey
+    );
+  }
+
+  return event.message?.trim() || null;
+}
+
 // ── Config maps ───────────────────────────────────────────────────────────────
 
 const TYPE_CONFIG: Record<
   LessonType,
-  { icon: LucideIcon; color: string; bg: string; labelKey: string }
+  { icon: LucideIcon; color: string; bg: string; labelKey: LessonTypeLabelKey }
 > = {
   video: {
     icon: Video,
@@ -320,7 +536,7 @@ type FormValues = {
   questionId?: string | null;
 };
 
-type TranscriptionSegment = {
+type EditableTranscriptionSegment = {
   id: string;
   start: string;
   end: string;
@@ -366,45 +582,39 @@ function normalizeTimeInput(input: string): string {
   return `${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
 }
 
-function parseTranscriptionSegments(raw?: string): TranscriptionSegment[] {
-  const lines = String(raw ?? '')
-    .split('\n')
-    .map((line) => line.trim())
-    .filter(Boolean);
-  if (lines.length === 0) {
-    return [{ id: segmentId(), start: '00:00', end: '00:15', text: '' }];
+function secondsToHMS(totalSeconds: number): string {
+  const h = Math.floor(totalSeconds / 3600);
+  const m = Math.floor((totalSeconds % 3600) / 60);
+  const s = Math.floor(totalSeconds % 60);
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+}
+
+function hmsToSeconds(hms: string): number {
+  const parts = hms.split(':').map(Number);
+  if (parts.length === 3) {
+    const [hours = 0, minutes = 0, seconds = 0] = parts;
+    return hours * 3600 + minutes * 60 + seconds;
   }
-  return lines.map((line) => {
-    const match = line.match(/^\[(.+?)\s*-->\s*(.+?)\]\s*(.*)$/);
-    if (match) {
-      return {
-        id: segmentId(),
-        start: normalizeTimeInput(match[1] ?? ''),
-        end: normalizeTimeInput(match[2] ?? ''),
-        text: match[3] ?? '',
-      };
-    }
-    return {
-      id: segmentId(),
-      start: '00:00',
-      end: '00:15',
-      text: line,
-    };
-  });
+  if (parts.length === 2) {
+    const [minutes = 0, seconds = 0] = parts;
+    return minutes * 60 + seconds;
+  }
+  return Number(hms) || 0;
 }
 
-function serializeTranscriptionSegments(
-  segments: TranscriptionSegment[]
-): string {
-  return segments
-    .map((segment) => ({
-      start: normalizeTimeInput(segment.start),
-      end: normalizeTimeInput(segment.end),
-      text: segment.text.trim(),
-    }))
-    .filter((segment) => segment.text.length > 0)
-    .map((segment) => `[${segment.start} --> ${segment.end}] ${segment.text}`)
-    .join('\n');
+function toEditableTranscriptionSegments(
+  segments?: LessonTranscriptionSegment[]
+): EditableTranscriptionSegment[] {
+  if (!segments?.length) {
+    return [{ id: segmentId(), start: '00:00', end: '00:15', text: '' }];
+  }
+
+  return segments.map((segment) => ({
+    id: String(segment.id),
+    start: secondsToHMS(segment.startSeconds),
+    end: secondsToHMS(segment.endSeconds),
+    text: segment.text,
+  }));
 }
 
 // ── SortableAlternativa ───────────────────────────────────────────────────────
@@ -455,15 +665,17 @@ function SortableAlternativa({
         alt.correta ? 'border-foreground/30 bg-muted/50' : 'bg-background'
       )}
     >
-      <button
-        type="button"
-        className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
-        {...attributes}
-        {...listeners}
-        aria-label={dragLabel}
-      >
-        <GripVertical className="size-4" />
-      </button>
+      <IconActionTooltip label={dragLabel}>
+        <button
+          type="button"
+          className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
+          {...attributes}
+          {...listeners}
+          aria-label={dragLabel}
+        >
+          <GripVertical className="size-4" />
+        </button>
+      </IconActionTooltip>
       <span className="flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium">
         {String.fromCharCode(65 + index)}
       </span>
@@ -474,32 +686,38 @@ function SortableAlternativa({
         placeholder={textPlaceholder}
         disabled={disableText}
       />
-      <button
-        type="button"
-        onClick={onToggleCorrect}
-        className={cn(
-          'shrink-0 rounded-full p-1 transition-colors',
-          alt.correta
-            ? 'text-foreground'
-            : 'text-muted-foreground hover:text-foreground'
-        )}
-        aria-label={alt.correta ? markIncorrectLabel : markCorrectLabel}
+      <IconActionTooltip
+        label={alt.correta ? markIncorrectLabel : markCorrectLabel}
       >
-        {alt.correta ? (
-          <CircleDot className="size-5" />
-        ) : (
-          <CircleOff className="size-5" />
-        )}
-      </button>
-      {canRemove && (
         <button
           type="button"
-          onClick={onRemove}
-          className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-destructive"
-          aria-label={removeLabel}
+          onClick={onToggleCorrect}
+          className={cn(
+            'shrink-0 rounded-full p-1 transition-colors',
+            alt.correta
+              ? 'text-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+          aria-label={alt.correta ? markIncorrectLabel : markCorrectLabel}
         >
-          <X className="size-4" />
+          {alt.correta ? (
+            <CircleDot className="size-5" />
+          ) : (
+            <CircleOff className="size-5" />
+          )}
         </button>
+      </IconActionTooltip>
+      {canRemove && (
+        <IconActionTooltip label={removeLabel}>
+          <button
+            type="button"
+            onClick={onRemove}
+            className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-destructive"
+            aria-label={removeLabel}
+          >
+            <X className="size-4" />
+          </button>
+        </IconActionTooltip>
       )}
     </div>
   );
@@ -518,17 +736,51 @@ type VideoProfileOption = {
   status: string;
 };
 
+type FramePreviewSource = {
+  key: string;
+  label: string;
+  resource: Resource;
+};
+
+type FileMetadata = {
+  size?: number;
+  uploadedAt?: string | null;
+};
+
+type FrameAssetMetadata = {
+  url?: string;
+  sizeLabel: string;
+};
+
 export function EditorLesson({ lessonId }: EditorLessonProps) {
   const t = useTranslations('lms.CoursesPage.StructurePage');
+  const tabAudiosLabel = (() => {
+    try {
+      return t('lessonForm.tabAudios');
+    } catch {
+      return 'Áudios';
+    }
+  })();
   const lesson = useStructureStore((s) =>
     s.lessons.find((l) => l.id === lessonId)
   );
+  const persistedVideoProvider: VideoProvider | undefined =
+    lesson?.videoProvider === 'youtube' || lesson?.videoProvider === 'vimeo'
+      ? lesson.videoProvider
+      : lesson?.videoProvider
+        ? 'file_storage'
+        : undefined;
+  const videoFrames = lesson?.frames ?? [];
   const updateLesson = useUpdateLessonMutation();
+  const updateTranscriptionSegments = useUpdateTranscriptionSegmentsMutation(
+    lesson?.id ?? null
+  );
   const deleteLesson = useDeleteLessonMutation();
   const showConfirm = useStructureStore((s) => s.showConfirm);
   const courseId = useStructureStore((s) => s.courseId);
-  const { request } = useApp();
+  const { request, getSettingValue } = useApp();
   const queryClient = useQueryClient();
+  const lmsSettings = useLmsSettingsQuery();
   const statusLabels: Record<LessonStatus, string> = {
     preparada: t('statuses.preparada'),
     gravada: t('statuses.gravada'),
@@ -536,11 +788,17 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     finalizada: t('statuses.finalizada'),
     publicada: t('statuses.publicada'),
   };
-  const videoProviders: { value: VideoProvider; label: string }[] = [
-    { value: 'youtube', label: 'YouTube' },
-    { value: 'vimeo', label: 'Vimeo' },
-    { value: 'file_storage', label: t('providers.fileStorage') },
-  ];
+  const videoProviders: { value: VideoProvider; label: string }[] = (
+    [
+      { value: 'youtube' as VideoProvider, label: 'YouTube' },
+      { value: 'vimeo' as VideoProvider, label: 'Vimeo' },
+      { value: 'file_storage' as VideoProvider, label: t('providers.fileStorage') },
+    ] as { value: VideoProvider; label: string }[]
+  ).filter((p) => {
+    if (p.value === 'youtube') return lmsSettings.youtubeEnabled;
+    if (p.value === 'vimeo') return lmsSettings.vimeoEnabled;
+    return true;
+  });
   const questionTypeLabels: Record<QuestionType, string> = {
     multiple_choice: t('questionEditor.types.multipleChoice'),
     true_false: t('questionEditor.types.trueFalse'),
@@ -548,6 +806,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     fill_blank: t('questionEditor.types.fillBlank'),
     matching: t('questionEditor.types.matching'),
   };
+  const isVideoConversionEnabled = lmsSettings.videoConversionEnabled;
   const schema = z.object({
     code: z.string().min(1, t('questionEditor.validation.codeRequired')),
     title: z.string().min(1, t('questionEditor.validation.titleRequired')),
@@ -618,7 +877,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const [localResources, setLocalResources] = useState<Resource[]>(
     () => lesson?.resources ?? []
   );
+  const [jobTimerNowMs, setJobTimerNowMs] = useState<number>(() => Date.now());
   const [activeTab, setActiveTab] = useState<LessonEditorTab>('dados');
+  const [isJobFeedbackCollapsed, setIsJobFeedbackCollapsed] = useState<boolean>(
+    () => readVideoJobFeedbackCollapsedPreference()
+  );
+  const [jobDetailOpen, setJobDetailOpen] = useState(false);
   const [resourcesDirty, setResourcesDirty] = useState(false);
   const [conversionJobId, setConversionJobId] = useState<number | null>(null);
   const [videoUploadError, setVideoUploadError] = useState<string | null>(null);
@@ -627,16 +891,145 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const [originalUploadProgress, setOriginalUploadProgress] = useState<
     number | null
   >(null);
+  const [isRequeueingOriginalVideo, setIsRequeueingOriginalVideo] =
+    useState(false);
   const [profileUploadProgress, setProfileUploadProgress] = useState<
     Record<number, number>
   >({});
   const [isResolvingVideoPreview, setIsResolvingVideoPreview] = useState(false);
+  const [videoPreviewOpen, setVideoPreviewOpen] = useState(false);
+  const [videoPreviewResource, setVideoPreviewResource] =
+    useState<Resource | null>(null);
+  const [videoPreviewUrl, setVideoPreviewUrl] = useState<string | null>(null);
+  const [videoPreviewError, setVideoPreviewError] = useState<string | null>(
+    null
+  );
+  const [framePreviewOpen, setFramePreviewOpen] = useState(false);
+  const [framePreviewFrame, setFramePreviewFrame] = useState<VideoFrame | null>(
+    null
+  );
+  const [framePreviewSourceKey, setFramePreviewSourceKey] = useState('');
+  const [framePreviewUrl, setFramePreviewUrl] = useState<string | null>(null);
+  const [framePreviewError, setFramePreviewError] = useState<string | null>(
+    null
+  );
+  const [isResolvingFramePreview, setIsResolvingFramePreview] = useState(false);
+  const [frameImageDialogOpen, setFrameImageDialogOpen] = useState(false);
+  const [frameImageDialogFrame, setFrameImageDialogFrame] =
+    useState<VideoFrame | null>(null);
+  const [downloadingFrameIds, setDownloadingFrameIds] = useState<Set<string>>(
+    () => new Set<string>()
+  );
+  const [frameEditSheetOpen, setFrameEditSheetOpen] = useState(false);
+  const [editingFrame, setEditingFrame] = useState<VideoFrame | null>(null);
+  const [editingFrameTime, setEditingFrameTime] = useState('00:00');
+  const [editingFramePreviewUrl, setEditingFramePreviewUrl] = useState<
+    string | null
+  >(null);
+  const [editingFrameFile, setEditingFrameFile] = useState<File | null>(null);
+  const [isSavingFrameEdit, setIsSavingFrameEdit] = useState(false);
+  const [frameCreateSheetOpen, setFrameCreateSheetOpen] = useState(false);
+  const [creatingFrameTime, setCreatingFrameTime] = useState('00:00');
+  const [creatingFrameFile, setCreatingFrameFile] = useState<File | null>(null);
+  const [creatingFramePreviewUrl, setCreatingFramePreviewUrl] = useState<
+    string | null
+  >(null);
+  const [isSavingFrameCreate, setIsSavingFrameCreate] = useState(false);
+  const [resourceMetadataByFileId, setResourceMetadataByFileId] = useState<
+    Record<string, FileMetadata>
+  >({});
+  const [downloadingResourceKeys, setDownloadingResourceKeys] = useState<
+    Set<string>
+  >(() => new Set<string>());
+  const [frameAssetMetadataById, setFrameAssetMetadataById] = useState<
+    Record<string, FrameAssetMetadata>
+  >({});
+  const [isDeletingAllFrames, setIsDeletingAllFrames] = useState(false);
+  const [frameImageErrorIds, setFrameImageErrorIds] = useState<Set<string>>(
+    () => new Set<string>()
+  );
   const resourceInputRef = useRef<HTMLInputElement>(null);
   const originalVideoInputRef = useRef<HTMLInputElement>(null);
+  const lastPersistedVideoProviderRef = useRef<VideoProvider | undefined>(
+    persistedVideoProvider
+  );
+  const isAutoSavingVideoProviderRef = useRef(false);
   const lastTerminalJobStatusRef = useRef<string | null>(null);
+  const autoCollapsedCompletedJobRef = useRef<number | null>(null);
+  const videoPreviewRequestIdRef = useRef(0);
+
+  useEffect(() => {
+    lastPersistedVideoProviderRef.current = persistedVideoProvider;
+    isAutoSavingVideoProviderRef.current = false;
+  }, [lesson?.id, persistedVideoProvider]);
+
+  useEffect(() => {
+    if (!lesson) return;
+    if (watchedType !== 'video') return;
+    if (!watchedVideoProvider) return;
+    if (isAutoSavingVideoProviderRef.current) return;
+
+    const currentPersistedProvider =
+      lastPersistedVideoProviderRef.current ?? persistedVideoProvider;
+
+    // Skip autosave when persisted provider is unknown to avoid patching legacy rows implicitly.
+    if (!currentPersistedProvider) return;
+    if (watchedVideoProvider === currentPersistedProvider) return;
+
+    isAutoSavingVideoProviderRef.current = true;
+    const previousProvider = currentPersistedProvider;
+
+    updateLesson.mutate(
+      {
+        lessonId,
+        sessionId: lesson.sessionId,
+        formValues: {
+          videoProvider: watchedVideoProvider,
+          videoUrl:
+            watchedVideoProvider === 'file_storage'
+              ? ''
+              : form.getValues('videoUrl'),
+        },
+      },
+      {
+        onSuccess: () => {
+          lastPersistedVideoProviderRef.current = watchedVideoProvider;
+          if (watchedVideoProvider === 'file_storage') {
+            form.setValue('videoUrl', '', { shouldDirty: false });
+          }
+        },
+        onError: () => {
+          form.setValue('videoProvider', previousProvider, {
+            shouldDirty: false,
+          });
+        },
+        onSettled: () => {
+          isAutoSavingVideoProviderRef.current = false;
+        },
+      }
+    );
+  }, [
+    form,
+    lesson,
+    lessonId,
+    persistedVideoProvider,
+    updateLesson,
+    watchedType,
+    watchedVideoProvider,
+  ]);
+  const framePreviewRequestIdRef = useRef(0);
+  const framePreviewVideoRef = useRef<HTMLVideoElement>(null);
+  const frameEditInputRef = useRef<HTMLInputElement>(null);
+  const frameCreateInputRef = useRef<HTMLInputElement>(null);
+  const resourceMetadataLoadedRef = useRef<Set<string>>(new Set());
+  const frameMetadataLoadedRef = useRef<Set<string>>(new Set());
   const [transcriptionSegments, setTranscriptionSegments] = useState<
-    TranscriptionSegment[]
-  >(() => parseTranscriptionSegments(lesson?.transcription));
+    EditableTranscriptionSegment[]
+  >(() => toEditableTranscriptionSegments());
+  const [transcriptionDirty, setTranscriptionDirty] = useState(false);
+
+  const { data: fetchedTranscriptionSegments = [] } =
+    useTranscriptionSegmentsQuery(lesson?.id ?? null);
 
   const {
     data: courseVideoProfiles = [],
@@ -673,11 +1066,36 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       return ACTIVE_VIDEO_JOB_STATUSES.includes(status) ? 3000 : false;
     },
   });
+  const transcriptionJobId =
+    typeof conversionJob?.result?.transcriptionJobId === 'number'
+      ? conversionJob.result.transcriptionJobId
+      : null;
+  const {
+    data: transcriptionJob,
+    isFetching: isFetchingTranscriptionJob,
+    isError: hasTranscriptionJobError,
+    refetch: refetchTranscriptionJob,
+  } = useQuery<QueueJobResponse>({
+    queryKey: ['queue-job', 'transcription', transcriptionJobId],
+    enabled: Boolean(transcriptionJobId),
+    retry: 1,
+    queryFn: async () => getQueueJob(request, transcriptionJobId!),
+    refetchInterval: (query) => {
+      const status = (query.state.data as QueueJobResponse | undefined)?.status;
+      if (!status) return 2000;
+
+      return ACTIVE_VIDEO_JOB_STATUSES.includes(status) ? 2000 : false;
+    },
+  });
 
   // ── Instructors state ────────────────────────────────────────────────────
   const [selectedInstructorIds, setSelectedInstructorIds] = useState<string[]>(
     () => lesson?.instructors?.map((i) => i.id) ?? []
   );
+  const [instructorPickerResetKey, setInstructorPickerResetKey] = useState(0);
+  const persistedInstructorIdsRef = useRef<string[]>(
+    lesson?.instructors?.map((i) => String(i.id)) ?? []
+  );
 
   // ── Question sheet state ────────────────────────────────────────────────────
   const [questionSheetOpen, setQuestionSheetOpen] = useState(false);
@@ -704,20 +1122,213 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     setResourcesDirty(false);
     setConversionJobId(lesson?.videoConversionJobId ?? null);
     setSelectedInstructorIds(lesson?.instructors?.map((i) => i.id) ?? []);
-    setTranscriptionSegments(parseTranscriptionSegments(lesson?.transcription));
+    persistedInstructorIdsRef.current =
+      lesson?.instructors?.map((i) => String(i.id)) ?? [];
+    setResourceMetadataByFileId({});
+    setFrameAssetMetadataById({});
+    setFrameImageErrorIds(new Set<string>());
+    resourceMetadataLoadedRef.current.clear();
+    frameMetadataLoadedRef.current.clear();
   }, [lesson?.id, lesson?.resources, lesson?.videoConversionJobId]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    setTranscriptionSegments(
+      toEditableTranscriptionSegments(fetchedTranscriptionSegments)
+    );
+    setTranscriptionDirty(false);
+  }, [lesson?.id, fetchedTranscriptionSegments]);
+
+  useEffect(() => {
+    const frameIds = new Set(videoFrames.map((frame) => frame.id));
+
+    setFrameAssetMetadataById((current) => {
+      const nextEntries = Object.entries(current).filter(([id]) =>
+        frameIds.has(id)
+      );
+      return Object.fromEntries(nextEntries);
+    });
+
+    setFrameImageErrorIds((current) => {
+      const next = new Set<string>();
+      for (const id of current) {
+        if (frameIds.has(id)) next.add(id);
+      }
+      return next;
+    });
+
+    const frameSignatures = new Set(
+      videoFrames.map((frame) => `${frame.id}:${frame.fileId ?? 'no-file'}`)
+    );
+
+    frameMetadataLoadedRef.current = new Set(
+      [...frameMetadataLoadedRef.current].filter((signature) =>
+        frameSignatures.has(signature)
+      )
+    );
+
+    const pendingFrames = videoFrames.filter((frame) => {
+      if (!frame.fileId) return false;
+      const signature = `${frame.id}:${frame.fileId}`;
+      return !frameMetadataLoadedRef.current.has(signature);
+    });
+
+    if (pendingFrames.length === 0) return;
+
+    let cancelled = false;
+
+    void Promise.allSettled(
+      pendingFrames.map(async (frame) => {
+        const signature = `${frame.id}:${frame.fileId}`;
+        frameMetadataLoadedRef.current.add(signature);
+
+        const fallbackUrl = frame.url ?? `/file/open/${frame.fileId}`;
+        let resolvedUrl = fallbackUrl;
+        let sizeLabel = '—';
+
+        try {
+          const openResponse = await request<{ url?: string }>({
+            url: `/file/open/${frame.fileId}`,
+            method: 'PUT',
+          });
+          resolvedUrl = openResponse.data?.url ?? fallbackUrl;
+        } catch {
+          resolvedUrl = fallbackUrl;
+        }
+
+        try {
+          const metadataResponse = await request<{ size?: number }>({
+            url: `/file/${frame.fileId}`,
+            method: 'GET',
+          });
+          if (typeof metadataResponse.data?.size === 'number') {
+            sizeLabel = formatFileSize(metadataResponse.data.size);
+          }
+        } catch {
+          // Não bloqueia o card quando a metadata não está disponível.
+        }
+
+        return {
+          frameId: frame.id,
+          metadata: {
+            url: resolvedUrl,
+            sizeLabel,
+          },
+        };
+      })
+    ).then((results) => {
+      if (cancelled) return;
+
+      setFrameAssetMetadataById((current) => {
+        const next = { ...current };
+        for (const result of results) {
+          if (result.status !== 'fulfilled') continue;
+          next[result.value.frameId] = result.value.metadata;
+        }
+        return next;
+      });
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [request, videoFrames]);
+
+  useEffect(() => {
+    const pendingResources = localResources.filter((resource) => {
+      if (!resource.fileId) return false;
+      const metadataKey = String(resource.fileId);
+      if (resourceMetadataLoadedRef.current.has(metadataKey)) return false;
+      if (resource.size && resource.uploadedAt) return false;
+      return true;
+    });
+
+    if (pendingResources.length === 0) return;
+
+    let cancelled = false;
+
+    void Promise.allSettled(
+      pendingResources.map(async (resource) => {
+        const metadataKey = String(resource.fileId);
+        resourceMetadataLoadedRef.current.add(metadataKey);
+
+        const response = await request<{
+          size?: number;
+          created_at?: string;
+          createdAt?: string;
+        }>({
+          url: `/file/${resource.fileId}`,
+          method: 'GET',
+        });
+
+        return {
+          metadataKey,
+          size: response.data?.size,
+          uploadedAt:
+            response.data?.created_at ?? response.data?.createdAt ?? null,
+        };
+      })
+    ).then((results) => {
+      if (cancelled) return;
+
+      setResourceMetadataByFileId((current) => {
+        const next = { ...current };
+        for (const result of results) {
+          if (result.status !== 'fulfilled') continue;
+          next[result.value.metadataKey] = {
+            size: result.value.size,
+            uploadedAt: result.value.uploadedAt,
+          };
+        }
+        return next;
+      });
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [localResources, request]);
+
   useEffect(() => {
     if (watchedType === 'video') return;
-    if (activeTab === 'videos' || activeTab === 'transcricao') {
+    if (
+      activeTab === 'videos' ||
+      activeTab === 'imagens' ||
+      activeTab === 'transcricao' ||
+      activeTab === 'audios'
+    ) {
       setActiveTab('conteudo');
     }
   }, [activeTab, watchedType]);
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      window.localStorage.setItem(
+        VIDEO_JOB_FEEDBACK_COLLAPSED_STORAGE_KEY,
+        String(isJobFeedbackCollapsed)
+      );
+    } catch {
+      // Ignora indisponibilidade de storage (modo privado/segurança do browser).
+    }
+  }, [isJobFeedbackCollapsed]);
+
   useEffect(() => {
     lastTerminalJobStatusRef.current = null;
+    autoCollapsedCompletedJobRef.current = null;
   }, [conversionJobId]);
 
+  useEffect(() => {
+    if (!conversionJob) return;
+
+    if (
+      conversionJob.status === 'completed' &&
+      autoCollapsedCompletedJobRef.current !== conversionJob.id
+    ) {
+      autoCollapsedCompletedJobRef.current = conversionJob.id;
+      setIsJobFeedbackCollapsed(true);
+    }
+  }, [conversionJob]);
+
   useEffect(() => {
     if (!conversionJobId || !conversionJob) return;
     if (!TERMINAL_VIDEO_JOB_STATUSES.includes(conversionJob.status)) return;
@@ -731,32 +1342,204 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     });
   }, [conversionJob, conversionJobId, courseId, queryClient]);
 
+  useEffect(() => {
+    const startedAt = conversionJob?.started_at;
+    const status = conversionJob?.status;
+    const isActive = status
+      ? ACTIVE_VIDEO_JOB_STATUSES.includes(status)
+      : false;
+    if (!startedAt) return;
+    if (!isActive) return;
+
+    setJobTimerNowMs(Date.now());
+
+    const interval = window.setInterval(() => {
+      setJobTimerNowMs(Date.now());
+    }, 1000);
+
+    return () => window.clearInterval(interval);
+  }, [conversionJob?.started_at, conversionJob?.status]);
+
   if (!lesson) return null;
 
   const cfg = TYPE_CONFIG[lesson.type];
   const Icon = cfg.icon;
-  const lessonTypeLabel = t(cfg.labelKey as any);
+  const lessonTypeLabel = t(cfg.labelKey);
   const originalVideoResource =
     localResources.find((res) => res.type === 'video_original') ?? null;
+  const isDownloadingOriginalVideo = originalVideoResource
+    ? downloadingResourceKeys.has(
+        String(originalVideoResource.fileId ?? originalVideoResource.id)
+      )
+    : false;
   const profileVideoResources = new Map(
     localResources
       .filter((res) => res.type.startsWith('video_profile:'))
       .map((res) => [Number(res.type.replace('video_profile:', '')), res])
   );
+  const audioResources = localResources.filter(
+    (res) => res.type === 'lesson_audio'
+  );
   const genericResources = localResources.filter(
     (res) =>
       res.type !== 'video_original' && !res.type.startsWith('video_profile:')
   );
+  const supplementaryResources = genericResources.filter(
+    (res) => res.type === 'supplementary_material'
+  );
   const isConversionJobActive = conversionJob
     ? ACTIVE_VIDEO_JOB_STATUSES.includes(conversionJob.status)
     : false;
-  const latestConversionAttempt =
-    conversionJob?.queue_job_attempt.at(-1) ?? null;
-  const recentConversionEvents =
-    conversionJob?.queue_job_event.slice(-3).reverse() ?? [];
+  const isConversionJobCompletedSuccessfully =
+    conversionJob?.status === 'completed';
+  const isConversionJobStatusResolving =
+    Boolean(conversionJobId) && !conversionJob && isFetchingConversionJob;
+  const shouldTrackTranscriptionJob = Boolean(transcriptionJobId);
+  const focusedPipelineJob = shouldTrackTranscriptionJob
+    ? transcriptionJob
+    : conversionJob;
+  const focusedPipelineJobIsLoading = shouldTrackTranscriptionJob
+    ? isFetchingTranscriptionJob
+    : isFetchingConversionJob;
+  const hasFocusedPipelineJobError = shouldTrackTranscriptionJob
+    ? hasTranscriptionJobError
+    : hasConversionJobError;
+  const refetchFocusedPipelineJob = shouldTrackTranscriptionJob
+    ? refetchTranscriptionJob
+    : refetchConversionJob;
+  const latestFocusedAttempt =
+    focusedPipelineJob?.queue_job_attempt.at(-1) ?? null;
+  const recentFocusedEvents =
+    focusedPipelineJob?.queue_job_event.slice(-3).reverse() ?? [];
+  const recentTranscriptionEvents =
+    transcriptionJob?.queue_job_event.slice(-3).reverse() ?? [];
+  const normalizedLastFocusedJobError =
+    focusedPipelineJob?.last_error?.trim() ?? '';
+  const isStaleLockRecoveryMessage =
+    !shouldTrackTranscriptionJob &&
+    normalizedLastFocusedJobError.toLowerCase() ===
+      'stale lock released by worker';
+  const shouldShowLastFocusedJobError =
+    normalizedLastFocusedJobError.length > 0 &&
+    !(focusedPipelineJob?.status === 'completed' && isStaleLockRecoveryMessage);
+  const isTranscriptionJobCompletedSuccessfully =
+    transcriptionJob?.status === 'completed';
+  const shouldHidePipelineCard =
+    isConversionJobCompletedSuccessfully &&
+    Boolean(transcriptionJobId) &&
+    isTranscriptionJobCompletedSuccessfully;
+  const conversionJobStartedAtMs = focusedPipelineJob?.started_at
+    ? new Date(focusedPipelineJob.started_at).getTime()
+    : null;
+  const conversionJobFinishedAtMs = focusedPipelineJob?.finished_at
+    ? new Date(focusedPipelineJob.finished_at).getTime()
+    : null;
+  const conversionJobElapsedMs =
+    conversionJobStartedAtMs == null
+      ? null
+      : TERMINAL_VIDEO_JOB_STATUSES.includes(
+            focusedPipelineJob?.status ?? 'pending'
+          ) && conversionJobFinishedAtMs != null
+        ? conversionJobFinishedAtMs - conversionJobStartedAtMs
+        : jobTimerNowMs - conversionJobStartedAtMs;
+  const conversionJobElapsedLabel = formatElapsedTimer(conversionJobElapsedMs);
+  const videoJobTimerPhase = getVideoJobTimerPhase(focusedPipelineJob?.status);
+  const VideoJobTimerIcon =
+    videoJobTimerPhase === 'running'
+      ? Loader2
+      : videoJobTimerPhase === 'completed'
+        ? CheckCircle2
+        : videoJobTimerPhase === 'error'
+          ? AlertTriangle
+          : Clock;
   const isOriginalVideoUploadBlocked =
-    originalUploadProgress !== null || isConversionJobActive;
+    originalUploadProgress !== null ||
+    isConversionJobActive ||
+    isConversionJobStatusResolving ||
+    isRequeueingOriginalVideo ||
+    (watchedVideoProvider === 'file_storage' &&
+      persistedVideoProvider !== 'file_storage');
+  const canRequeueSavedOriginalVideo =
+    Boolean(originalVideoResource?.fileId) && !isOriginalVideoUploadBlocked;
   const isProfileVideoUploadBlocked = isConversionJobActive;
+  const currentQueueJobId =
+    focusedPipelineJob?.id ?? transcriptionJobId ?? conversionJobId;
+  const isTranscriptionJobActive = transcriptionJob
+    ? ACTIVE_VIDEO_JOB_STATUSES.includes(transcriptionJob.status)
+    : false;
+  const latestPipelineEvent =
+    (shouldTrackTranscriptionJob
+      ? (transcriptionJob?.queue_job_event.at(-1) ??
+        conversionJob?.queue_job_event.at(-1))
+      : conversionJob?.queue_job_event.at(-1)) ?? null;
+  const livePipelineMessage =
+    getVideoJobProgressMessage(latestPipelineEvent, t) ||
+    t('lessonForm.awaitingConversion');
+  const shouldShowLivePipelineMessage =
+    isConversionJobActive ||
+    isConversionJobStatusResolving ||
+    isTranscriptionJobActive ||
+    (Boolean(transcriptionJobId) && isFetchingTranscriptionJob);
+  const videoPreviewSpinnerActive =
+    isResolvingVideoPreview && Boolean(videoPreviewResource);
+  const hasInstructorChanges =
+    selectedInstructorIds.length !== persistedInstructorIdsRef.current.length ||
+    selectedInstructorIds.some(
+      (id, index) => id !== persistedInstructorIdsRef.current[index]
+    );
+  const hasPendingChanges =
+    isDirty || resourcesDirty || transcriptionDirty || hasInstructorChanges;
+  const isSavingLesson =
+    updateLesson.isPending || updateTranscriptionSegments.isPending;
+
+  const framePreviewSources: FramePreviewSource[] = [
+    ...(originalVideoResource
+      ? [
+          {
+            key: 'original',
+            label: 'Original',
+            resource: originalVideoResource,
+          },
+        ]
+      : []),
+    ...courseVideoProfiles.flatMap((profile) => {
+      const resource = profileVideoResources.get(profile.id);
+      if (!resource) return [];
+
+      return [
+        {
+          key: `profile:${profile.id}`,
+          label: profile.name,
+          resource,
+        },
+      ];
+    }),
+  ];
+  const activeFramePreviewSource =
+    framePreviewSources.find(
+      (source) => source.key === framePreviewSourceKey
+    ) ??
+    framePreviewSources[0] ??
+    null;
+
+  async function enqueueOriginalVideoConversion(originalFileId: number) {
+    const queued = await enqueueLessonVideoConversion(
+      request,
+      courseId,
+      lesson!.sessionId,
+      lessonId,
+      originalFileId
+    );
+    setConversionJobId(queued.queueJobId);
+    toast.success(
+      t('lessonForm.videoConversionQueued', {
+        id: queued.queueJobId,
+      })
+    );
+    void queryClient.invalidateQueries({
+      queryKey: courseStructureQueryKey(courseId),
+    });
+  }
 
   async function handleResourceFiles(files: File[]) {
     setIsUploading(true);
@@ -768,7 +1551,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             fileId: res.id,
             name: f.name,
             size: formatFileSize(f.size),
-            type: f.type || f.name.split('.').pop() || 'file',
+            type: 'supplementary_material',
             public: false,
             url: undefined,
           }))
@@ -792,20 +1575,60 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     }
   }
 
-  async function removeResource(id: string) {
-    const res = localResources.find((r) => r.id === id);
-    const fileId = res?.fileId ?? Number(id);
-    if (Number.isInteger(fileId) && fileId > 0) {
-      try {
-        await deleteFile(request, fileId);
-      } catch {
-        toast.error(t('questionEditor.resourceRemoveError'));
-        return;
-      }
-    } else {
-      if (res?.url?.startsWith('blob:')) URL.revokeObjectURL(res.url);
-    }
-    setLocalResources((prev) => prev.filter((r) => r.id !== id));
+  async function handleAudioFiles(files: File[]) {
+    setIsUploading(true);
+    try {
+      const results = await Promise.allSettled(
+        files.map((f) =>
+          uploadFile(request, f, 'lms/lessons/audio').then<Resource>((res) => ({
+            id: `new-${res.id}`,
+            fileId: res.id,
+            name: f.name,
+            size: formatFileSize(f.size),
+            type: 'lesson_audio',
+            public: false,
+            url: undefined,
+            uploadedAt: new Date().toISOString(),
+          }))
+        )
+      );
+
+      const succeeded = results
+        .filter(
+          (r): r is PromiseFulfilledResult<Resource> => r.status === 'fulfilled'
+        )
+        .map((r) => r.value);
+      const failedCount = results.filter((r) => r.status === 'rejected').length;
+
+      if (failedCount > 0) {
+        toast.error(
+          t('questionEditor.resourceUploadFailed', { count: failedCount })
+        );
+      }
+
+      if (succeeded.length > 0) {
+        setLocalResources((prev) => [...prev, ...succeeded]);
+        setResourcesDirty(true);
+      }
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
+  async function removeResource(id: string) {
+    const res = localResources.find((r) => r.id === id);
+    const fileId = res?.fileId ?? Number(id);
+    if (Number.isInteger(fileId) && fileId > 0) {
+      try {
+        await deleteFile(request, fileId);
+      } catch {
+        toast.error(t('questionEditor.resourceRemoveError'));
+        return;
+      }
+    } else {
+      if (res?.url?.startsWith('blob:')) URL.revokeObjectURL(res.url);
+    }
+    setLocalResources((prev) => prev.filter((r) => r.id !== id));
     setResourcesDirty(true);
   }
 
@@ -824,6 +1647,24 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     }
   }
 
+  function resolveResourceMetadata(res: Resource) {
+    const metadataKey = res.fileId ? String(res.fileId) : res.id;
+    const metadata = resourceMetadataByFileId[metadataKey];
+    const sizeLabel = res.size?.trim()
+      ? res.size
+      : metadata?.size != null
+        ? formatFileSize(metadata.size)
+        : '—';
+    const uploadedAtLabel =
+      formatDateTimeLabel(res.uploadedAt ?? metadata?.uploadedAt ?? null) ??
+      '—';
+
+    return {
+      sizeLabel,
+      uploadedAtLabel,
+    };
+  }
+
   async function openResource(res: Resource) {
     const url = await resolveResourceUrl(res);
     if (!url) {
@@ -834,31 +1675,585 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   }
 
   async function handleResourceDownload(res: Resource) {
-    const resourceUrl = await resolveResourceUrl(res);
-    if (!resourceUrl) {
+    const fileId = res.fileId ?? Number(res.id);
+    if (!Number.isInteger(fileId) || fileId <= 0) {
       toast(t('questionEditor.resourceDownloadSoon', { name: res.name }));
       return;
     }
-    const a = document.createElement('a');
-    a.href = resourceUrl;
-    a.download = res.name;
-    a.click();
+
+    const downloadKey = String(res.fileId ?? res.id);
+    setDownloadingResourceKeys((current) => {
+      const next = new Set(current);
+      next.add(downloadKey);
+      return next;
+    });
+
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/download/${fileId}`,
+        method: 'PUT',
+      });
+
+      const downloadUrl = response?.data?.url;
+      if (!downloadUrl) {
+        toast(t('questionEditor.resourceDownloadSoon', { name: res.name }));
+        return;
+      }
+
+      try {
+        // Forca download mesmo para tipos reproduziveis (audio/video) via blob local.
+        const downloadResponse = await fetch(downloadUrl);
+        if (!downloadResponse.ok) {
+          throw new Error('download request failed');
+        }
+
+        const blob = await downloadResponse.blob();
+        const objectUrl = window.URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = objectUrl;
+        anchor.download = res.name || `arquivo-${fileId}`;
+        anchor.rel = 'noopener noreferrer';
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+        window.URL.revokeObjectURL(objectUrl);
+      } catch {
+        // Fallback para navegacao direta no endpoint da API (attachment).
+        const anchor = document.createElement('a');
+        anchor.href = downloadUrl;
+        anchor.rel = 'noopener noreferrer';
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+      }
+    } catch {
+      toast(t('questionEditor.resourceDownloadSoon', { name: res.name }));
+    } finally {
+      setDownloadingResourceKeys((current) => {
+        const next = new Set(current);
+        next.delete(downloadKey);
+        return next;
+      });
+    }
   }
 
   async function openVideoPreview(res: Resource) {
+    const requestId = ++videoPreviewRequestIdRef.current;
+    setVideoPreviewResource(res);
+    setVideoPreviewOpen(true);
+    setVideoPreviewUrl(null);
+    setVideoPreviewError(null);
     setIsResolvingVideoPreview(true);
     try {
       const resourceUrl = await resolveResourceUrl(res);
       if (!resourceUrl) {
         toast.error(t('questionEditor.resourceOpenError'));
+        if (videoPreviewRequestIdRef.current === requestId) {
+          setVideoPreviewError(t('questionEditor.resourceOpenError'));
+        }
+        return;
+      }
+      if (videoPreviewRequestIdRef.current !== requestId) return;
+      setVideoPreviewUrl(resourceUrl);
+    } finally {
+      if (videoPreviewRequestIdRef.current === requestId) {
+        setIsResolvingVideoPreview(false);
+      }
+    }
+  }
+
+  function closeVideoPreview() {
+    videoPreviewRequestIdRef.current += 1;
+    setVideoPreviewOpen(false);
+    setVideoPreviewResource(null);
+    setVideoPreviewUrl(null);
+    setVideoPreviewError(null);
+    setIsResolvingVideoPreview(false);
+  }
+
+  async function resolveFramePreviewSource(
+    sourceKey: string,
+    frame = framePreviewFrame
+  ) {
+    const source =
+      framePreviewSources.find((item) => item.key === sourceKey) ??
+      framePreviewSources[0] ??
+      null;
+
+    if (!source || !frame) {
+      setFramePreviewError(t('questionEditor.resourceOpenError'));
+      setFramePreviewUrl(null);
+      setIsResolvingFramePreview(false);
+      return;
+    }
+
+    const requestId = ++framePreviewRequestIdRef.current;
+    setFramePreviewSourceKey(source.key);
+    setFramePreviewUrl(null);
+    setFramePreviewError(null);
+    setIsResolvingFramePreview(true);
+
+    try {
+      const resourceUrl = await resolveResourceUrl(source.resource);
+      if (!resourceUrl) {
+        if (framePreviewRequestIdRef.current === requestId) {
+          setFramePreviewError(t('questionEditor.resourceOpenError'));
+        }
+        return;
+      }
+
+      if (framePreviewRequestIdRef.current !== requestId) return;
+      setFramePreviewUrl(resourceUrl);
+    } finally {
+      if (framePreviewRequestIdRef.current === requestId) {
+        setIsResolvingFramePreview(false);
+      }
+    }
+  }
+
+  async function openFramePreview(frame: VideoFrame) {
+    setFramePreviewFrame(frame);
+    setFramePreviewOpen(true);
+
+    const defaultSource = framePreviewSources[0] ?? null;
+    if (!defaultSource) {
+      setFramePreviewError(t('questionEditor.resourceOpenError'));
+      setFramePreviewUrl(null);
+      setIsResolvingFramePreview(false);
+      return;
+    }
+
+    await resolveFramePreviewSource(defaultSource.key, frame);
+  }
+
+  function closeFramePreview() {
+    framePreviewRequestIdRef.current += 1;
+    setFramePreviewOpen(false);
+    setFramePreviewFrame(null);
+    setFramePreviewSourceKey('');
+    setFramePreviewUrl(null);
+    setFramePreviewError(null);
+    setIsResolvingFramePreview(false);
+  }
+
+  function openFrameImageDialog(frame: VideoFrame) {
+    setFrameImageDialogFrame(frame);
+    setFrameImageDialogOpen(true);
+  }
+
+  function closeFrameImageDialog() {
+    setFrameImageDialogOpen(false);
+    setFrameImageDialogFrame(null);
+  }
+
+  function openFrameEditSheet(frame: VideoFrame) {
+    if (editingFramePreviewUrl?.startsWith('blob:')) {
+      URL.revokeObjectURL(editingFramePreviewUrl);
+    }
+
+    setEditingFrame(frame);
+    setEditingFrameTime(secondsToHMS(frame.timeSeconds));
+    setEditingFrameFile(null);
+    setEditingFramePreviewUrl(resolveFrameCardUrl(frame) ?? null);
+    setFrameEditSheetOpen(true);
+  }
+
+  function closeFrameEditSheet() {
+    if (editingFramePreviewUrl?.startsWith('blob:')) {
+      URL.revokeObjectURL(editingFramePreviewUrl);
+    }
+
+    setFrameEditSheetOpen(false);
+    setEditingFrame(null);
+    setEditingFrameTime('00:00');
+    setEditingFrameFile(null);
+    setEditingFramePreviewUrl(null);
+    setIsSavingFrameEdit(false);
+  }
+
+  function openFrameCreateSheet() {
+    if (creatingFramePreviewUrl?.startsWith('blob:')) {
+      URL.revokeObjectURL(creatingFramePreviewUrl);
+    }
+
+    setCreatingFrameTime('00:00');
+    setCreatingFrameFile(null);
+    setCreatingFramePreviewUrl(null);
+    setFrameCreateSheetOpen(true);
+  }
+
+  function closeFrameCreateSheet() {
+    if (creatingFramePreviewUrl?.startsWith('blob:')) {
+      URL.revokeObjectURL(creatingFramePreviewUrl);
+    }
+
+    setFrameCreateSheetOpen(false);
+    setCreatingFrameTime('00:00');
+    setCreatingFrameFile(null);
+    setCreatingFramePreviewUrl(null);
+    setIsSavingFrameCreate(false);
+  }
+
+  function handleFrameCreateSelect(file?: File | null) {
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Selecione um arquivo de imagem valido.');
+      return;
+    }
+
+    if (creatingFramePreviewUrl?.startsWith('blob:')) {
+      URL.revokeObjectURL(creatingFramePreviewUrl);
+    }
+
+    setCreatingFrameFile(file);
+    setCreatingFramePreviewUrl(URL.createObjectURL(file));
+  }
+
+  async function handleSaveFrameCreate() {
+    if (!lesson) return;
+
+    const parsedTimeSeconds = parseTimeToSeconds(creatingFrameTime);
+    if (parsedTimeSeconds === null) {
+      toast.error('Informe um tempo valido (mm:ss ou hh:mm:ss).');
+      return;
+    }
+
+    if (!creatingFrameFile) {
+      toast.error('Selecione uma imagem para adicionar.');
+      return;
+    }
+
+    setIsSavingFrameCreate(true);
+    try {
+      const uploaded = await uploadFile(
+        request,
+        creatingFrameFile,
+        'lms/lessons/frames'
+      );
+
+      const createdFrame = await createLessonFrame(
+        request,
+        courseId,
+        lesson.sessionId,
+        lessonId,
+        {
+          timeSeconds: parsedTimeSeconds,
+          fileId: uploaded.id,
+        }
+      );
+
+      queryClient.setQueryData<CourseStructureCacheData | undefined>(
+        courseStructureQueryKey(courseId),
+        (current) => {
+          if (!current) return current;
+
+          return {
+            ...current,
+            lessons: current.lessons.map((item) => {
+              if (item.id !== lessonId) return item;
+
+              return {
+                ...item,
+                frames: [
+                  ...(item.frames ?? []),
+                  {
+                    id: String(createdFrame.id),
+                    fileId: createdFrame.fileId,
+                    name: creatingFrameFile.name,
+                    timeSeconds: createdFrame.timeSeconds,
+                    url: `/file/open/${createdFrame.fileId}`,
+                  },
+                ],
+              };
+            }),
+          };
+        }
+      );
+
+      toast.success('Imagem extraida adicionada com sucesso.');
+      closeFrameCreateSheet();
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
+    } catch {
+      toast.error('Nao foi possivel adicionar a imagem extraida.');
+    } finally {
+      setIsSavingFrameCreate(false);
+    }
+  }
+
+  function handleFrameReplacementSelect(file?: File | null) {
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Selecione um arquivo de imagem valido.');
+      return;
+    }
+
+    if (editingFramePreviewUrl?.startsWith('blob:')) {
+      URL.revokeObjectURL(editingFramePreviewUrl);
+    }
+
+    setEditingFrameFile(file);
+    setEditingFramePreviewUrl(URL.createObjectURL(file));
+  }
+
+  async function handleSaveFrameEdit() {
+    if (!lesson || !editingFrame) return;
+
+    const parsedTimeSeconds = parseTimeToSeconds(editingFrameTime);
+    if (parsedTimeSeconds === null) {
+      toast.error('Informe um tempo valido (mm:ss ou hh:mm:ss).');
+      return;
+    }
+
+    setIsSavingFrameEdit(true);
+    try {
+      let uploadedFileId: number | undefined;
+
+      if (editingFrameFile) {
+        const uploaded = await uploadFile(
+          request,
+          editingFrameFile,
+          'lms/lessons/frames'
+        );
+        uploadedFileId = uploaded.id;
+      }
+
+      const updatedFrame = await updateLessonFrame(
+        request,
+        courseId,
+        lesson.sessionId,
+        lessonId,
+        Number(editingFrame.id),
+        {
+          timeSeconds: parsedTimeSeconds,
+          ...(uploadedFileId ? { fileId: uploadedFileId } : {}),
+        }
+      );
+
+      queryClient.setQueryData<CourseStructureCacheData | undefined>(
+        courseStructureQueryKey(courseId),
+        (current) => {
+          if (!current) return current;
+
+          return {
+            ...current,
+            lessons: current.lessons.map((item) => {
+              if (item.id !== lessonId) return item;
+
+              return {
+                ...item,
+                frames: (item.frames ?? []).map((frame) => {
+                  if (frame.id !== String(updatedFrame.id)) return frame;
+
+                  const nextFileId =
+                    typeof updatedFrame.fileId === 'number'
+                      ? updatedFrame.fileId
+                      : frame.fileId;
+
+                  return {
+                    ...frame,
+                    ...(nextFileId ? { fileId: nextFileId } : {}),
+                    ...(editingFrameFile
+                      ? { name: editingFrameFile.name }
+                      : {}),
+                    timeSeconds: updatedFrame.timeSeconds,
+                    url: nextFileId ? `/file/open/${nextFileId}` : frame.url,
+                  };
+                }),
+              };
+            }),
+          };
+        }
+      );
+
+      toast.success('Imagem extraida atualizada com sucesso.');
+      closeFrameEditSheet();
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
+    } catch {
+      toast.error('Nao foi possivel atualizar a imagem extraida.');
+    } finally {
+      setIsSavingFrameEdit(false);
+    }
+  }
+
+  async function handleDownloadFrame(frame: VideoFrame) {
+    if (!frame.fileId) {
+      toast.error('Imagem sem arquivo para download.');
+      return;
+    }
+
+    const downloadKey = String(frame.id);
+    setDownloadingFrameIds((current) => {
+      const next = new Set(current);
+      next.add(downloadKey);
+      return next;
+    });
+
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/download/${frame.fileId}`,
+        method: 'PUT',
+      });
+
+      const downloadUrl = response?.data?.url;
+      if (!downloadUrl) {
+        toast.error('Nao foi possivel iniciar o download da imagem.');
         return;
       }
-      window.open(resourceUrl, '_blank', 'noopener,noreferrer');
+
+      try {
+        const downloadResponse = await fetch(downloadUrl);
+        if (!downloadResponse.ok) {
+          throw new Error('download request failed');
+        }
+
+        const blob = await downloadResponse.blob();
+        const objectUrl = window.URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = objectUrl;
+        anchor.download = frame.name || `frame-${frame.id}.jpg`;
+        anchor.rel = 'noopener noreferrer';
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+        window.URL.revokeObjectURL(objectUrl);
+      } catch {
+        const anchor = document.createElement('a');
+        anchor.href = downloadUrl;
+        anchor.rel = 'noopener noreferrer';
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+      }
+    } catch {
+      toast.error('Nao foi possivel iniciar o download da imagem.');
+    } finally {
+      setDownloadingFrameIds((current) => {
+        const next = new Set(current);
+        next.delete(downloadKey);
+        return next;
+      });
+    }
+  }
+
+  async function handleDeleteFrame(frame: VideoFrame) {
+    if (!lesson) return;
+
+    showConfirm({
+      title: `Remover ${frame.name}?`,
+      description: 'A imagem será excluída do vídeo e removida da lista.',
+      onConfirm: async () => {
+        try {
+          await deleteLessonFrame(
+            request,
+            courseId,
+            lesson.sessionId,
+            lessonId,
+            Number(frame.id)
+          );
+          toast.success('Imagem removida com sucesso.');
+          void queryClient.invalidateQueries({
+            queryKey: courseStructureQueryKey(courseId),
+          });
+        } catch {
+          toast.error('Não foi possível remover a imagem.');
+        }
+      },
+    });
+  }
+
+  async function handleDeleteAllFrames() {
+    if (!lesson || videoFrames.length === 0) return;
+
+    setIsDeletingAllFrames(true);
+    try {
+      const results = await Promise.allSettled(
+        videoFrames.map((frame) =>
+          deleteLessonFrame(
+            request,
+            courseId,
+            lesson.sessionId,
+            lessonId,
+            Number(frame.id)
+          )
+        )
+      );
+
+      const successCount = results.filter(
+        (result) => result.status === 'fulfilled'
+      ).length;
+      const failedCount = results.length - successCount;
+
+      if (successCount > 0) {
+        toast.success(
+          successCount === 1
+            ? '1 imagem removida com sucesso.'
+            : `${successCount} imagens removidas com sucesso.`
+        );
+      }
+
+      if (failedCount > 0) {
+        toast.error(
+          failedCount === 1
+            ? '1 imagem não pôde ser removida.'
+            : `${failedCount} imagens não puderam ser removidas.`
+        );
+      }
+
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
     } finally {
-      setIsResolvingVideoPreview(false);
+      setIsDeletingAllFrames(false);
     }
   }
 
+  function confirmDeleteAllFrames() {
+    if (videoFrames.length === 0 || isDeletingAllFrames) return;
+
+    showConfirm({
+      title:
+        videoFrames.length === 1
+          ? 'Excluir a imagem extraída?'
+          : `Excluir todas as ${videoFrames.length} imagens extraídas?`,
+      description:
+        'Esta ação remove permanentemente os frames extraídos desta aula.',
+      onConfirm: () => {
+        void handleDeleteAllFrames();
+      },
+    });
+  }
+
+  function confirmRegenerateFrames() {
+    if (!originalVideoResource?.fileId || isOriginalVideoUploadBlocked) return;
+
+    showConfirm({
+      title: 'Regenerar imagens extraídas?',
+      description:
+        'O vídeo original será reenviado para a fila de processamento e os frames serão extraídos novamente.',
+      onConfirm: () => {
+        void handleRequeueOriginalVideo();
+      },
+    });
+  }
+
+  function resolveFrameCardUrl(frame: VideoFrame): string | undefined {
+    return (
+      frameAssetMetadataById[frame.id]?.url ??
+      frame.url ??
+      (frame.fileId ? `/file/open/${frame.fileId}` : undefined)
+    );
+  }
+
+  function resolveFrameCardSize(frame: VideoFrame): string {
+    return frameAssetMetadataById[frame.id]?.sizeLabel ?? '—';
+  }
+
   async function handleVideoProfileFile(profileId: number, file: File) {
     if (file.size > MAX_VIDEO_UPLOAD_SIZE_BYTES) {
       const message = t('lessonForm.videoUploadMaxSizeError', {
@@ -891,6 +2286,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         size: formatFileSize(file.size),
         type,
         public: false,
+        uploadedAt: new Date().toISOString(),
         url: undefined,
       };
       setLocalResources((prev) => [
@@ -910,6 +2306,21 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   }
 
   async function handleOriginalVideoFile(file: File) {
+    if (!isVideoConversionEnabled) {
+      toast.error(t('lessonForm.videoConversionFailed'));
+      return;
+    }
+
+    if (
+      watchedVideoProvider === 'file_storage' &&
+      persistedVideoProvider !== 'file_storage'
+    ) {
+      const message = t('lessonForm.videoProviderSavePending');
+      setVideoUploadError(message);
+      toast.error(message);
+      return;
+    }
+
     if (file.size > MAX_VIDEO_UPLOAD_SIZE_BYTES) {
       const message = t('lessonForm.videoUploadMaxSizeError', {
         size: '100MB',
@@ -950,22 +2361,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       ]);
       setResourcesDirty(true);
 
-      const queued = await enqueueLessonVideoConversion(
-        request,
-        courseId,
-        lesson!.sessionId,
-        lessonId,
-        uploaded.id
-      );
-      setConversionJobId(queued.queueJobId);
-      toast.success(
-        t('lessonForm.videoConversionQueued', {
-          id: queued.queueJobId,
-        })
-      );
-      void queryClient.invalidateQueries({
-        queryKey: courseStructureQueryKey(courseId),
-      });
+      await enqueueOriginalVideoConversion(uploaded.id);
     } catch {
       toast.error(t('lessonForm.videoConversionFailed'));
     } finally {
@@ -973,29 +2369,83 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     }
   }
 
+  async function handleRequeueOriginalVideo() {
+    if (!originalVideoResource?.fileId || isOriginalVideoUploadBlocked) return;
+
+    setVideoUploadError(null);
+    setIsRequeueingOriginalVideo(true);
+    try {
+      await enqueueOriginalVideoConversion(originalVideoResource.fileId);
+    } catch {
+      toast.error(t('lessonForm.videoConversionRetryFailed'));
+    } finally {
+      setIsRequeueingOriginalVideo(false);
+    }
+  }
+
+  function updateTranscriptionSegmentsState(
+    updater: (
+      previous: EditableTranscriptionSegment[]
+    ) => EditableTranscriptionSegment[]
+  ) {
+    setTranscriptionDirty(true);
+    setTranscriptionSegments(updater);
+  }
+
   function onSubmit(values: FormValues) {
-    const transcriptionValue =
-      values.type === 'video'
-        ? serializeTranscriptionSegments(transcriptionSegments)
-        : values.transcription;
+    if (values.type === 'video') {
+      const segmentsPayload = transcriptionSegments
+        .map((segment) => ({
+          startSeconds: hmsToSeconds(normalizeTimeInput(segment.start)),
+          endSeconds: hmsToSeconds(normalizeTimeInput(segment.end)),
+          text: segment.text.trim(),
+        }))
+        .filter((segment) => segment.text.length > 0);
 
-    updateLesson.mutate({
-      lessonId,
-      sessionId: lesson!.sessionId,
-      formValues: {
-        ...values,
-        videoUrl:
-          values.type === 'video' && values.videoProvider === 'file_storage'
-            ? ''
-            : values.videoUrl,
-        transcription: transcriptionValue,
-        videoConversionJobId: conversionJobId ?? lesson?.videoConversionJobId,
-        resources: localResources,
-        instructorIds: selectedInstructorIds.map(Number),
+      updateTranscriptionSegments.mutate(segmentsPayload, {
+        onSuccess: () => {
+          setTranscriptionDirty(false);
+          setTranscriptionSegments(
+            segmentsPayload.length > 0
+              ? segmentsPayload.map((segment) => ({
+                  id: segmentId(),
+                  start: secondsToHMS(segment.startSeconds),
+                  end: secondsToHMS(segment.endSeconds),
+                  text: segment.text,
+                }))
+              : toEditableTranscriptionSegments([])
+          );
+          void queryClient.invalidateQueries({
+            queryKey: ['lesson-transcription-segments', lesson?.id ?? null],
+          });
+        },
+      });
+    }
+
+    updateLesson.mutate(
+      {
+        lessonId,
+        sessionId: lesson!.sessionId,
+        formValues: {
+          ...values,
+          videoUrl:
+            values.type === 'video' && values.videoProvider === 'file_storage'
+              ? ''
+              : values.videoUrl,
+          transcription: values.transcription,
+          videoConversionJobId: conversionJobId ?? lesson?.videoConversionJobId,
+          resources: localResources,
+          instructorIds: selectedInstructorIds.map(Number),
+        },
       },
-    });
-    form.reset({ ...values, transcription: transcriptionValue });
-    setResourcesDirty(false);
+      {
+        onSuccess: () => {
+          persistedInstructorIdsRef.current = [...selectedInstructorIds];
+          form.reset({ ...values, transcription: values.transcription });
+          setResourcesDirty(false);
+        },
+      }
+    );
   }
 
   // ── Question sheet helpers ────────────────────────────────────────────────
@@ -1151,22 +2601,26 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               {statusLabels[watchedStatus]}
             </span>
           )}
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-7 text-destructive/60 hover:text-destructive shrink-0"
-            title={t('lesson.delete')}
-            aria-label={t('lesson.delete')}
-            disabled={deleteLesson.isPending}
-            onClick={handleDelete}
+          <IconActionTooltip
+            label={t('lesson.delete')}
+            asWrapper={deleteLesson.isPending}
           >
-            {deleteLesson.isPending ? (
-              <Loader2 className="size-3.5 animate-spin" />
-            ) : (
-              <Trash2 className="size-3.5" />
-            )}
-          </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-7 text-destructive/60 hover:text-destructive shrink-0"
+              aria-label={t('lesson.delete')}
+              disabled={deleteLesson.isPending}
+              onClick={handleDelete}
+            >
+              {deleteLesson.isPending ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                <Trash2 className="size-3.5" />
+              )}
+            </Button>
+          </IconActionTooltip>
         </div>
 
         {/* ── Tabs ─────────────────────────────────────────────────────────── */}
@@ -1196,6 +2650,14 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                 {t('lessonForm.tabVideos')}
               </TabsTrigger>
             )}
+            {watchedType === 'video' && (
+              <TabsTrigger
+                value="imagens"
+                className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+              >
+                Imagens extraídas
+              </TabsTrigger>
+            )}
             {watchedType === 'video' && (
               <TabsTrigger
                 value="transcricao"
@@ -1204,6 +2666,14 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                 {t('lessonForm.tabTranscription')}
               </TabsTrigger>
             )}
+            {watchedType === 'video' && (
+              <TabsTrigger
+                value="audios"
+                className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
+              >
+                {tabAudiosLabel}
+              </TabsTrigger>
+            )}
             <TabsTrigger
               value="recursos"
               className="h-6 px-2 text-[11px] shrink-0 sm:h-7 sm:px-2.5 sm:text-xs"
@@ -1294,7 +2764,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                         <Ic
                                           className={cn('size-3', cfg.color)}
                                         />
-                                        {t(cfg.labelKey as any)}
+                                        {t(cfg.labelKey)}
                                       </span>
                                     </SelectItem>
                                   );
@@ -1432,14 +2902,17 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   <CardContent className="px-3 pb-2 flex flex-col gap-2">
                     {/* Picker para adicionar */}
                     <EntityPicker<{ id: number; name: string }>
+                      key={instructorPickerResetKey}
                       value={null}
                       onChange={(val) => {
-                        if (val != null)
+                        if (val != null) {
                           setSelectedInstructorIds((prev) =>
                             prev.includes(String(val))
                               ? prev
                               : [...prev, String(val)]
                           );
+                          setInstructorPickerResetKey((current) => current + 1);
+                        }
                       }}
                       placeholder={t('questionEditor.addInstructor')}
                       searchPlaceholder={t('questionEditor.searchInstructor')}
@@ -1481,25 +2954,31 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               <span className="text-xs flex-1 truncate">
                                 {displayName}
                               </span>
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                className="size-5 shrink-0 text-muted-foreground hover:text-destructive"
-                                onClick={() =>
-                                  setSelectedInstructorIds((prev) =>
-                                    prev.filter((id) => id !== sid)
-                                  )
-                                }
-                                aria-label={t(
-                                  'questionEditor.removeInstructor',
-                                  {
-                                    name: displayName,
-                                  }
-                                )}
+                              <IconActionTooltip
+                                label={t('questionEditor.removeInstructor', {
+                                  name: displayName,
+                                })}
                               >
-                                <X className="size-3" />
-                              </Button>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-5 shrink-0 text-muted-foreground hover:text-destructive"
+                                  onClick={() =>
+                                    setSelectedInstructorIds((prev) =>
+                                      prev.filter((id) => id !== sid)
+                                    )
+                                  }
+                                  aria-label={t(
+                                    'questionEditor.removeInstructor',
+                                    {
+                                      name: displayName,
+                                    }
+                                  )}
+                                >
+                                  <X className="size-3" />
+                                </Button>
+                              </IconActionTooltip>
                             </div>
                           );
                         })}
@@ -1668,16 +3147,20 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                 ` · ${selectedQuestion.points} ${t('questionEditor.pointsSuffix')}`}
                             </p>
                           </div>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-7 shrink-0"
-                            onClick={() => openEditQuestion(selectedQuestion)}
-                            aria-label={t('questionEditor.editQuestion')}
+                          <IconActionTooltip
+                            label={t('questionEditor.editQuestion')}
                           >
-                            <Pencil className="size-3.5" />
-                          </Button>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="size-7 shrink-0"
+                              onClick={() => openEditQuestion(selectedQuestion)}
+                              aria-label={t('questionEditor.editQuestion')}
+                            >
+                              <Pencil className="size-3.5" />
+                            </Button>
+                          </IconActionTooltip>
                         </div>
                       )}
                     </CardContent>
@@ -1763,192 +3246,296 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   {watchedVideoProvider === 'file_storage' && (
                     <>
                       {videoUploadError ? (
-                        <p className="text-xs text-destructive">
+                        <p className="order-1 text-xs text-destructive">
                           {videoUploadError}
                         </p>
                       ) : null}
 
-                      <Card className="bg-muted/20 py-2 gap-2">
-                        <CardHeader className="px-3 pt-2 pb-1">
-                          <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                            {t('lessonForm.originalVideoTitle')}
-                          </CardTitle>
-                        </CardHeader>
-                        <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                          <div className="rounded-lg border bg-background/90 p-3 shadow-sm">
-                            <div className="flex items-start gap-3">
-                              <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-500/10 text-blue-600">
-                                <Video className="size-4" />
-                              </div>
-                              <div className="min-w-0 flex-1 space-y-1">
-                                <div className="flex items-start justify-between gap-2">
-                                  <div className="min-w-0">
-                                    <p className="truncate text-sm font-medium">
-                                      {originalVideoResource
-                                        ? originalVideoResource.name
-                                        : t('lessonForm.originalVideoTitle')}
-                                    </p>
-                                    <p className="text-xs text-muted-foreground">
-                                      {conversionJobId
-                                        ? t('lessonForm.videoConversionJob', {
-                                            id: conversionJobId,
-                                          })
-                                        : t('lessonForm.originalVideoHint')}
-                                    </p>
-                                    <p className="text-[0.65rem] text-muted-foreground">
-                                      {t('lessonForm.originalVideoPurpose')}
-                                    </p>
-                                  </div>
-                                  {originalVideoResource && (
-                                    <div className="flex shrink-0 items-center gap-1">
-                                      <Button
-                                        type="button"
-                                        variant="ghost"
-                                        size="icon"
-                                        className="size-7 shrink-0"
-                                        disabled={isResolvingVideoPreview}
-                                        onClick={() =>
-                                          void openVideoPreview(
-                                            originalVideoResource
-                                          )
-                                        }
-                                        aria-label={t(
-                                          'lessonForm.playVideoAria',
-                                          {
+                      {isVideoConversionEnabled ? (
+                        <Card className="bg-muted/20 py-2 gap-2 order-3">
+                          <CardHeader className="px-3 pt-2 pb-1">
+                            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                              {t('lessonForm.originalVideoTitle')}
+                            </CardTitle>
+                          </CardHeader>
+                          <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                            <div className="rounded-lg border bg-background/90 p-3 shadow-sm">
+                              <div className="flex items-start gap-3">
+                                <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-500/10 text-blue-600">
+                                  <Video className="size-4" />
+                                </div>
+                                <div className="min-w-0 flex-1 space-y-1">
+                                  <div className="flex items-start justify-between gap-2">
+                                    <div className="min-w-0">
+                                      <p className="truncate text-sm font-medium">
+                                        {originalVideoResource
+                                          ? originalVideoResource.name
+                                          : t('lessonForm.originalVideoTitle')}
+                                      </p>
+                                      <p className="text-xs text-muted-foreground">
+                                        {conversionJobId
+                                          ? t('lessonForm.videoConversionJob', {
+                                              id: conversionJobId,
+                                            })
+                                          : t('lessonForm.originalVideoHint')}
+                                      </p>
+                                      <p className="text-[0.65rem] text-muted-foreground">
+                                        {t('lessonForm.originalVideoPurpose')}
+                                      </p>
+                                    </div>
+                                    {originalVideoResource && (
+                                      <div className="flex shrink-0 items-center gap-1">
+                                        <IconActionTooltip
+                                          label={t('lessonForm.playVideoAria', {
                                             name: originalVideoResource.name,
-                                          }
-                                        )}
-                                      >
-                                        {isResolvingVideoPreview ? (
-                                          <Loader2 className="size-3 animate-spin" />
-                                        ) : (
-                                          <Play className="size-3" />
-                                        )}
-                                      </Button>
-                                      <Button
-                                        type="button"
-                                        variant="ghost"
-                                        size="icon"
-                                        className="size-7 shrink-0"
-                                        onClick={() =>
-                                          void handleResourceDownload(
-                                            originalVideoResource
-                                          )
-                                        }
-                                        aria-label={t(
-                                          'lessonForm.downloadVideoAria',
-                                          {
+                                          })}
+                                          asWrapper={isResolvingVideoPreview}
+                                        >
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-emerald-600"
+                                            disabled={isResolvingVideoPreview}
+                                            onClick={() =>
+                                              void openVideoPreview(
+                                                originalVideoResource
+                                              )
+                                            }
+                                            aria-label={t(
+                                              'lessonForm.playVideoAria',
+                                              {
+                                                name: originalVideoResource.name,
+                                              }
+                                            )}
+                                          >
+                                            {isResolvingVideoPreview ? (
+                                              <Loader2 className="size-3 animate-spin" />
+                                            ) : (
+                                              <Play className="size-3" />
+                                            )}
+                                          </Button>
+                                        </IconActionTooltip>
+                                        <IconActionTooltip
+                                          label={t(
+                                            'lessonForm.downloadVideoAria',
+                                            {
+                                              name: originalVideoResource.name,
+                                            }
+                                          )}
+                                          asWrapper={isDownloadingOriginalVideo}
+                                        >
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-amber-600"
+                                            disabled={
+                                              isDownloadingOriginalVideo
+                                            }
+                                            onClick={() =>
+                                              void handleResourceDownload(
+                                                originalVideoResource
+                                              )
+                                            }
+                                            aria-label={t(
+                                              'lessonForm.downloadVideoAria',
+                                              {
+                                                name: originalVideoResource.name,
+                                              }
+                                            )}
+                                          >
+                                            {isDownloadingOriginalVideo ? (
+                                              <Loader2 className="size-3 animate-spin" />
+                                            ) : (
+                                              <Download className="size-3" />
+                                            )}
+                                          </Button>
+                                        </IconActionTooltip>
+                                        <IconActionTooltip
+                                          label={t('lessonForm.openVideoAria', {
                                             name: originalVideoResource.name,
+                                          })}
+                                        >
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-blue-600"
+                                            onClick={() =>
+                                              void openResource(
+                                                originalVideoResource
+                                              )
+                                            }
+                                            aria-label={t(
+                                              'lessonForm.openVideoAria',
+                                              {
+                                                name: originalVideoResource.name,
+                                              }
+                                            )}
+                                          >
+                                            <ExternalLink className="size-3" />
+                                          </Button>
+                                        </IconActionTooltip>
+                                      </div>
+                                    )}
+                                  </div>
+                                  {originalVideoResource?.size ? (
+                                    <div className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
+                                      {originalVideoResource.size}
+                                    </div>
+                                  ) : null}
+                                  <div className="flex flex-wrap items-center gap-2 pt-1">
+                                    {originalVideoResource ? (
+                                      <>
+                                        <Button
+                                          type="button"
+                                          variant="secondary"
+                                          className="h-8 px-3 text-xs"
+                                          disabled={
+                                            isOriginalVideoUploadBlocked
                                           }
-                                        )}
-                                      >
-                                        <Download className="size-3" />
-                                      </Button>
+                                          onClick={() =>
+                                            originalVideoInputRef.current?.click()
+                                          }
+                                        >
+                                          <UploadCloud className="size-3.5 mr-1" />
+                                          {t(
+                                            'lessonForm.replaceOriginalForConversion'
+                                          )}
+                                        </Button>
+                                        <Button
+                                          type="button"
+                                          variant="outline"
+                                          className="h-8 px-3 text-xs"
+                                          disabled={
+                                            !canRequeueSavedOriginalVideo
+                                          }
+                                          onClick={() =>
+                                            void handleRequeueOriginalVideo()
+                                          }
+                                        >
+                                          {isRequeueingOriginalVideo ? (
+                                            <Loader2 className="size-3.5 mr-1 animate-spin" />
+                                          ) : (
+                                            <RefreshCw className="size-3.5 mr-1" />
+                                          )}
+                                          {t(
+                                            'lessonForm.retryConversionWithSavedOriginal'
+                                          )}
+                                        </Button>
+                                      </>
+                                    ) : (
                                       <Button
                                         type="button"
-                                        variant="ghost"
-                                        size="icon"
-                                        className="size-7 shrink-0"
+                                        variant="secondary"
+                                        className="h-8 px-3 text-xs"
+                                        disabled={isOriginalVideoUploadBlocked}
                                         onClick={() =>
-                                          void openResource(
-                                            originalVideoResource
-                                          )
+                                          originalVideoInputRef.current?.click()
                                         }
-                                        aria-label={t(
-                                          'lessonForm.openVideoAria',
-                                          {
-                                            name: originalVideoResource.name,
-                                          }
-                                        )}
                                       >
-                                        <ExternalLink className="size-3" />
+                                        <UploadCloud className="size-3.5 mr-1" />
+                                        {t(
+                                          'lessonForm.uploadOriginalForConversion'
+                                        )}
                                       </Button>
+                                    )}
+                                    <span className="text-[0.65rem] text-muted-foreground">
+                                      {isConversionJobActive
+                                        ? t(
+                                            'lessonForm.videoUploadBlockedWhileProcessing'
+                                          )
+                                        : isConversionJobStatusResolving
+                                          ? t('lessonForm.videoJobStateLoading')
+                                          : t('lessonForm.originalVideoHint')}
+                                    </span>
+                                  </div>
+                                  {originalUploadProgress !== null ? (
+                                    <div className="space-y-1 pt-1">
+                                      <Progress
+                                        value={originalUploadProgress}
+                                        className="h-1.5"
+                                      />
+                                      <p className="text-[0.65rem] text-muted-foreground">
+                                        {originalUploadProgress}%
+                                      </p>
                                     </div>
-                                  )}
+                                  ) : null}
                                 </div>
-                                {originalVideoResource?.size ? (
-                                  <div className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
-                                    {originalVideoResource.size}
-                                  </div>
+                              </div>
+                              <input
+                                ref={originalVideoInputRef}
+                                type="file"
+                                accept="video/*"
+                                className="hidden"
+                                onChange={(event) => {
+                                  const file = event.target.files?.[0];
+                                  if (file && !isOriginalVideoUploadBlocked) {
+                                    void handleOriginalVideoFile(file);
+                                  }
+                                  event.target.value = '';
+                                }}
+                              />
+                            </div>
+                          </CardContent>
+                        </Card>
+                      ) : null}
+
+                      {conversionJobId && !shouldHidePipelineCard ? (
+                        <Card className="bg-muted/20 py-2 gap-2 order-4">
+                          <CardHeader className="px-3 pt-2 pb-1">
+                            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center justify-between gap-2">
+                              <span>
+                                {t('lessonForm.videoJobFeedbackTitle')}
+                              </span>
+                              <div className="flex items-center gap-1.5">
+                                {focusedPipelineJob ? (
+                                  <span
+                                    className={cn(
+                                      'rounded-full px-2 py-0.5 text-[0.65rem] font-medium',
+                                      VIDEO_JOB_STATUS_COLORS[
+                                        focusedPipelineJob.status
+                                      ]
+                                    )}
+                                  >
+                                    {t(
+                                      `lessonForm.videoJobStatuses.${focusedPipelineJob.status}` satisfies VideoJobStatusMessageKey
+                                    )}
+                                  </span>
                                 ) : null}
-                                <div className="flex flex-wrap items-center gap-2 pt-1">
+                                {focusedPipelineJob ? (
                                   <Button
                                     type="button"
-                                    variant="secondary"
-                                    className="h-8 px-3 text-xs"
-                                    disabled={isOriginalVideoUploadBlocked}
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-6"
+                                    aria-label={t(
+                                      'lessonForm.videoJobToggleDetails'
+                                    )}
                                     onClick={() =>
-                                      originalVideoInputRef.current?.click()
+                                      setIsJobFeedbackCollapsed((prev) => !prev)
                                     }
                                   >
-                                    <UploadCloud className="size-3.5 mr-1" />
-                                    {t(
-                                      'lessonForm.uploadOriginalForConversion'
+                                    {isJobFeedbackCollapsed ? (
+                                      <ChevronDown className="size-3.5" />
+                                    ) : (
+                                      <ChevronUp className="size-3.5" />
                                     )}
                                   </Button>
-                                  <span className="text-[0.65rem] text-muted-foreground">
-                                    {isConversionJobActive
-                                      ? t(
-                                          'lessonForm.videoUploadBlockedWhileProcessing'
-                                        )
-                                      : t('lessonForm.originalVideoHint')}
-                                  </span>
-                                </div>
-                                {originalUploadProgress !== null ? (
-                                  <div className="space-y-1 pt-1">
-                                    <Progress
-                                      value={originalUploadProgress}
-                                      className="h-1.5"
-                                    />
-                                    <p className="text-[0.65rem] text-muted-foreground">
-                                      {originalUploadProgress}%
-                                    </p>
-                                  </div>
                                 ) : null}
                               </div>
-                            </div>
-                            <input
-                              ref={originalVideoInputRef}
-                              type="file"
-                              accept="video/*"
-                              className="hidden"
-                              onChange={(event) => {
-                                const file = event.target.files?.[0];
-                                if (file && !isOriginalVideoUploadBlocked) {
-                                  void handleOriginalVideoFile(file);
-                                }
-                                event.target.value = '';
-                              }}
-                            />
-                          </div>
-                        </CardContent>
-                      </Card>
-
-                      {conversionJobId ? (
-                        <Card className="bg-muted/20 py-2 gap-2">
-                          <CardHeader className="px-3 pt-2 pb-1">
-                            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center justify-between gap-2">
-                              <span>
-                                {t('lessonForm.videoJobFeedbackTitle')}
-                              </span>
-                              {conversionJob ? (
-                                <span
-                                  className={cn(
-                                    'rounded-full px-2 py-0.5 text-[0.65rem] font-medium',
-                                    VIDEO_JOB_STATUS_COLORS[
-                                      conversionJob.status
-                                    ]
-                                  )}
-                                >
-                                  {t(
-                                    `lessonForm.videoJobStatuses.${conversionJob.status}` as any
-                                  )}
-                                </span>
-                              ) : null}
                             </CardTitle>
                           </CardHeader>
                           <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                            {hasConversionJobError ? (
+                            {shouldShowLivePipelineMessage ? (
+                              <div className="flex items-center gap-2 rounded-md border border-blue-200 bg-blue-50/70 px-3 py-2 text-xs text-blue-700 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-200">
+                                <Loader2 className="size-3.5 animate-spin" />
+                                <span>{livePipelineMessage}</span>
+                              </div>
+                            ) : null}
+
+                            {hasFocusedPipelineJobError ? (
                               <div className="flex flex-col gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-3">
                                 <p className="text-xs text-destructive">
                                   {t('lessonForm.videoJobLoadError')}
@@ -1958,29 +3545,69 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                   variant="outline"
                                   size="sm"
                                   className="h-7 w-fit px-2 text-xs"
-                                  onClick={() => void refetchConversionJob()}
+                                  onClick={() =>
+                                    void refetchFocusedPipelineJob()
+                                  }
                                 >
                                   <RefreshCw className="size-3 mr-1" />
                                   {t('lessonForm.retryLoadVideoJob')}
                                 </Button>
                               </div>
-                            ) : !conversionJob ? (
+                            ) : !focusedPipelineJob ? (
                               <div className="flex items-center gap-2 rounded-md border bg-background/70 px-3 py-2 text-xs text-muted-foreground">
                                 <Loader2 className="size-3.5 animate-spin" />
-                                {isFetchingConversionJob
+                                {focusedPipelineJobIsLoading
                                   ? t('lessonForm.videoJobLoading')
                                   : t('lessonForm.videoJobPendingLoad')}
                               </div>
+                            ) : isJobFeedbackCollapsed ? (
+                              <div
+                                className={cn(
+                                  'rounded-md border px-3 py-2',
+                                  focusedPipelineJob.status === 'completed'
+                                    ? 'bg-emerald-50/50 dark:bg-emerald-950/20'
+                                    : 'bg-background/70'
+                                )}
+                              >
+                                {focusedPipelineJob.status === 'completed' ? (
+                                  <p className="text-xs text-muted-foreground">
+                                    {t('lessonForm.videoJobCollapsedSummary')}
+                                  </p>
+                                ) : (
+                                  <div className="flex flex-wrap items-center gap-1 text-xs text-muted-foreground">
+                                    <span>
+                                      {t('lessonForm.videoJobIdLabel')}:
+                                    </span>
+                                    <button
+                                      type="button"
+                                      className="font-medium text-primary hover:underline"
+                                      onClick={() => setJobDetailOpen(true)}
+                                    >
+                                      #{focusedPipelineJob.id}
+                                    </button>
+                                    <span>·</span>
+                                    <span>
+                                      {t(
+                                        `lessonForm.videoJobStatuses.${focusedPipelineJob.status}` satisfies VideoJobStatusMessageKey
+                                      )}
+                                    </span>
+                                  </div>
+                                )}
+                              </div>
                             ) : (
                               <>
-                                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-4">
+                                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-5">
                                   <div className="rounded-md border bg-background/70 p-2">
                                     <p className="text-[0.65rem] text-muted-foreground">
                                       {t('lessonForm.videoJobIdLabel')}
                                     </p>
-                                    <p className="text-xs font-medium">
-                                      #{conversionJob.id}
-                                    </p>
+                                    <button
+                                      type="button"
+                                      className="text-xs font-medium text-primary hover:underline"
+                                      onClick={() => setJobDetailOpen(true)}
+                                    >
+                                      #{focusedPipelineJob.id}
+                                    </button>
                                   </div>
                                   <div className="rounded-md border bg-background/70 p-2">
                                     <p className="text-[0.65rem] text-muted-foreground">
@@ -1988,8 +3615,8 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                     </p>
                                     <p className="text-xs font-medium">
                                       {t('lessonForm.videoJobAttemptsValue', {
-                                        current: conversionJob.attempts,
-                                        total: conversionJob.max_attempts,
+                                        current: focusedPipelineJob.attempts,
+                                        total: focusedPipelineJob.max_attempts,
                                       })}
                                     </p>
                                   </div>
@@ -1999,14 +3626,14 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                     </p>
                                     <p className="text-xs font-medium">
                                       {formatDateTimeLabel(
-                                        conversionJob.created_at
+                                        focusedPipelineJob.created_at
                                       ) ?? '—'}
                                     </p>
                                   </div>
                                   <div className="rounded-md border bg-background/70 p-2">
                                     <p className="text-[0.65rem] text-muted-foreground">
                                       {TERMINAL_VIDEO_JOB_STATUSES.includes(
-                                        conversionJob.status
+                                        focusedPipelineJob.status
                                       )
                                         ? t('lessonForm.videoJobFinishedAt')
                                         : t('lessonForm.videoJobStartedAt')}
@@ -2014,16 +3641,43 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                     <p className="text-xs font-medium">
                                       {formatDateTimeLabel(
                                         TERMINAL_VIDEO_JOB_STATUSES.includes(
-                                          conversionJob.status
+                                          focusedPipelineJob.status
                                         )
-                                          ? conversionJob.finished_at
-                                          : conversionJob.started_at
+                                          ? focusedPipelineJob.finished_at
+                                          : focusedPipelineJob.started_at
                                       ) ?? '—'}
                                     </p>
                                   </div>
+                                  <div className="rounded-md border bg-background/70 p-2">
+                                    <div className="flex items-center justify-between gap-2">
+                                      <p className="text-[0.65rem] text-muted-foreground">
+                                        {TERMINAL_VIDEO_JOB_STATUSES.includes(
+                                          focusedPipelineJob.status
+                                        )
+                                          ? t('lessonForm.videoJobTotalTime')
+                                          : t('lessonForm.videoJobRunningTime')}
+                                      </p>
+                                      <VideoJobTimerIcon
+                                        className={cn(
+                                          'size-3.5',
+                                          videoJobTimerPhase === 'running' &&
+                                            'animate-spin text-blue-600',
+                                          videoJobTimerPhase === 'waiting' &&
+                                            'text-amber-600',
+                                          videoJobTimerPhase === 'completed' &&
+                                            'text-emerald-600',
+                                          videoJobTimerPhase === 'error' &&
+                                            'text-destructive'
+                                        )}
+                                      />
+                                    </div>
+                                    <p className="text-xs font-medium font-mono">
+                                      {conversionJobElapsedLabel ?? '—'}
+                                    </p>
+                                  </div>
                                 </div>
 
-                                {latestConversionAttempt ? (
+                                {latestFocusedAttempt ? (
                                   <div className="rounded-md border bg-background/70 p-3">
                                     <div className="flex items-center justify-between gap-2">
                                       <p className="text-xs font-medium">
@@ -2031,36 +3685,57 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                       </p>
                                       <span className="text-[0.65rem] text-muted-foreground">
                                         {t(
-                                          `lessonForm.videoAttemptStatuses.${latestConversionAttempt.status}` as any
+                                          `lessonForm.videoAttemptStatuses.${latestFocusedAttempt.status}` satisfies VideoAttemptStatusMessageKey
                                         )}
                                       </span>
                                     </div>
                                     <p className="mt-1 text-[0.65rem] text-muted-foreground">
                                       {t('lessonForm.videoJobAttemptValue', {
                                         count:
-                                          latestConversionAttempt.attempt_number,
+                                          latestFocusedAttempt.attempt_number,
                                       })}
                                       {formatDurationLabel(
-                                        latestConversionAttempt.duration_ms
+                                        latestFocusedAttempt.duration_ms
                                       )
-                                        ? ` · ${formatDurationLabel(latestConversionAttempt.duration_ms)}`
+                                        ? ` · ${formatDurationLabel(latestFocusedAttempt.duration_ms)}`
                                         : ''}
                                     </p>
-                                    {latestConversionAttempt.error_message ? (
+                                    {latestFocusedAttempt.error_message ? (
                                       <p className="mt-2 text-xs text-destructive">
-                                        {latestConversionAttempt.error_message}
+                                        {latestFocusedAttempt.error_message}
                                       </p>
                                     ) : null}
                                   </div>
                                 ) : null}
 
-                                {conversionJob.last_error ? (
-                                  <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3">
-                                    <p className="text-[0.65rem] font-medium text-destructive">
+                                {shouldShowLastFocusedJobError ? (
+                                  <div
+                                    className={cn(
+                                      'rounded-md border p-3',
+                                      isStaleLockRecoveryMessage
+                                        ? 'border-amber-500/30 bg-amber-500/10'
+                                        : 'border-destructive/30 bg-destructive/5'
+                                    )}
+                                  >
+                                    <p
+                                      className={cn(
+                                        'text-[0.65rem] font-medium',
+                                        isStaleLockRecoveryMessage
+                                          ? 'text-amber-700 dark:text-amber-300'
+                                          : 'text-destructive'
+                                      )}
+                                    >
                                       {t('lessonForm.videoJobLastError')}
                                     </p>
-                                    <p className="mt-1 text-xs text-destructive">
-                                      {conversionJob.last_error}
+                                    <p
+                                      className={cn(
+                                        'mt-1 text-xs',
+                                        isStaleLockRecoveryMessage
+                                          ? 'text-amber-700/90 dark:text-amber-200'
+                                          : 'text-destructive'
+                                      )}
+                                    >
+                                      {normalizedLastFocusedJobError}
                                     </p>
                                   </div>
                                 ) : null}
@@ -2070,12 +3745,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                     {t('lessonForm.videoJobRecentEvents')}
                                   </p>
                                   <div className="mt-2 flex flex-col gap-2">
-                                    {recentConversionEvents.length === 0 ? (
+                                    {recentFocusedEvents.length === 0 ? (
                                       <p className="text-xs text-muted-foreground">
                                         {t('lessonForm.videoJobNoEvents')}
                                       </p>
                                     ) : (
-                                      recentConversionEvents.map((event) => (
+                                      recentFocusedEvents.map((event) => (
                                         <div
                                           key={event.id}
                                           className="rounded-md border border-border/60 px-2.5 py-2"
@@ -2083,7 +3758,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                           <div className="flex items-center justify-between gap-2">
                                             <p className="text-xs font-medium">
                                               {t(
-                                                `lessonForm.videoJobEvents.${event.event_type}` as any
+                                                `lessonForm.videoJobEvents.${event.event_type}` satisfies VideoJobEventMessageKey
                                               )}
                                             </p>
                                             <span className="text-[0.65rem] text-muted-foreground">
@@ -2092,9 +3767,15 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                               ) ?? '—'}
                                             </span>
                                           </div>
-                                          {event.message ? (
+                                          {getVideoJobProgressMessage(
+                                            event,
+                                            t
+                                          ) ? (
                                             <p className="mt-1 text-[0.65rem] text-muted-foreground">
-                                              {event.message}
+                                              {getVideoJobProgressMessage(
+                                                event,
+                                                t
+                                              )}
                                             </p>
                                           ) : null}
                                         </div>
@@ -2102,13 +3783,58 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                     )}
                                   </div>
                                 </div>
+
+                                {!shouldTrackTranscriptionJob &&
+                                recentTranscriptionEvents.length > 0 ? (
+                                  <div className="rounded-md border bg-background/70 p-3">
+                                    <p className="text-xs font-medium">
+                                      {t(
+                                        'lessonForm.videoJobTranscriptionEvents'
+                                      )}
+                                    </p>
+                                    <div className="mt-2 flex flex-col gap-2">
+                                      {recentTranscriptionEvents.map(
+                                        (event) => (
+                                          <div
+                                            key={`transcription-${event.id}`}
+                                            className="rounded-md border border-border/60 px-2.5 py-2"
+                                          >
+                                            <div className="flex items-center justify-between gap-2">
+                                              <p className="text-xs font-medium">
+                                                {t(
+                                                  `lessonForm.videoJobEvents.${event.event_type}` satisfies VideoJobEventMessageKey
+                                                )}
+                                              </p>
+                                              <span className="text-[0.65rem] text-muted-foreground">
+                                                {formatDateTimeLabel(
+                                                  event.created_at
+                                                ) ?? '—'}
+                                              </span>
+                                            </div>
+                                            {getVideoJobProgressMessage(
+                                              event,
+                                              t
+                                            ) ? (
+                                              <p className="mt-1 text-[0.65rem] text-muted-foreground">
+                                                {getVideoJobProgressMessage(
+                                                  event,
+                                                  t
+                                                )}
+                                              </p>
+                                            ) : null}
+                                          </div>
+                                        )
+                                      )}
+                                    </div>
+                                  </div>
+                                ) : null}
                               </>
                             )}
                           </CardContent>
                         </Card>
                       ) : null}
 
-                      <Card className="bg-muted/20 py-2 gap-2">
+                      <Card className="bg-muted/20 py-2 gap-2 order-2">
                         <CardHeader className="px-3 pt-2 pb-1">
                           <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                             {t('lessonForm.fileStorageVideosByResolution')}
@@ -2155,6 +3881,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                   const res = profileVideoResources.get(
                                     profile.id
                                   );
+                                  const hasVideo = Boolean(res);
+                                  const isDownloadingResource = res
+                                    ? downloadingResourceKeys.has(
+                                        String(res.fileId ?? res.id)
+                                      )
+                                    : false;
                                   const currentUploadProgress =
                                     profileUploadProgress[profile.id];
                                   const inputId = `lesson-video-profile-${profile.id}`;
@@ -2164,18 +3896,39 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                       key={profile.id}
                                       className="flex items-center gap-2 rounded-md border bg-background/80 px-2.5 py-2"
                                     >
-                                      <Video className="size-3.5 shrink-0 text-blue-500" />
+                                      <Video
+                                        className={cn(
+                                          'size-3.5 shrink-0',
+                                          hasVideo
+                                            ? 'text-emerald-600'
+                                            : 'text-blue-600'
+                                        )}
+                                      />
                                       <div className="flex-1 min-w-0">
                                         <p className="text-xs truncate font-medium">
                                           {profile.name}
                                         </p>
-                                        <p className="text-[0.65rem] text-muted-foreground">
-                                          {res
-                                            ? `${res.name}${res.size ? ` · ${res.size}` : ''}`
-                                            : t(
-                                                'lessonForm.videoProfileMissing'
-                                              )}
-                                        </p>
+                                        {res ? (
+                                          (() => {
+                                            const metadata =
+                                              resolveResourceMetadata(res);
+
+                                            return (
+                                              <p className="text-[0.65rem] text-muted-foreground">
+                                                {`${metadata.sizeLabel} · ${metadata.uploadedAtLabel}`}
+                                              </p>
+                                            );
+                                          })()
+                                        ) : (
+                                          <Badge className="mt-1 inline-flex items-center gap-1 border border-blue-200 bg-blue-100 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200 dark:hover:bg-blue-950/50">
+                                            {isConversionJobActive ? (
+                                              <Loader2 className="size-3 animate-spin" />
+                                            ) : (
+                                              <Clock className="size-3" />
+                                            )}
+                                            {t('lessonForm.awaitingConversion')}
+                                          </Badge>
+                                        )}
                                         {currentUploadProgress !== undefined ? (
                                           <div className="mt-1 space-y-1">
                                             <Progress
@@ -2229,71 +3982,106 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                       </Button>
                                       {res && (
                                         <>
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-6 shrink-0"
-                                            disabled={isResolvingVideoPreview}
-                                            onClick={() =>
-                                              void openVideoPreview(res)
-                                            }
-                                            aria-label={t(
+                                          <IconActionTooltip
+                                            label={t(
                                               'lessonForm.playVideoAria',
                                               { name: res.name }
                                             )}
+                                            asWrapper={isResolvingVideoPreview}
                                           >
-                                            {isResolvingVideoPreview ? (
-                                              <Loader2 className="size-3 animate-spin" />
-                                            ) : (
-                                              <Play className="size-3" />
-                                            )}
-                                          </Button>
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-6 shrink-0"
-                                            onClick={() =>
-                                              void openResource(res)
-                                            }
-                                            aria-label={t(
+                                            <Button
+                                              type="button"
+                                              variant="ghost"
+                                              size="icon"
+                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-emerald-600"
+                                              disabled={isResolvingVideoPreview}
+                                              onClick={() =>
+                                                void openVideoPreview(res)
+                                              }
+                                              aria-label={t(
+                                                'lessonForm.playVideoAria',
+                                                { name: res.name }
+                                              )}
+                                            >
+                                              {isResolvingVideoPreview ? (
+                                                <Loader2 className="size-3 animate-spin" />
+                                              ) : (
+                                                <Play className="size-3" />
+                                              )}
+                                            </Button>
+                                          </IconActionTooltip>
+                                          <IconActionTooltip
+                                            label={t(
                                               'lessonForm.openVideoAria',
                                               { name: res.name }
                                             )}
                                           >
-                                            <ExternalLink className="size-3" />
-                                          </Button>
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-6 shrink-0"
-                                            onClick={() =>
-                                              void handleResourceDownload(res)
-                                            }
-                                            aria-label={t(
+                                            <Button
+                                              type="button"
+                                              variant="ghost"
+                                              size="icon"
+                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-blue-600"
+                                              onClick={() =>
+                                                void openResource(res)
+                                              }
+                                              aria-label={t(
+                                                'lessonForm.openVideoAria',
+                                                { name: res.name }
+                                              )}
+                                            >
+                                              <ExternalLink className="size-3" />
+                                            </Button>
+                                          </IconActionTooltip>
+                                          <IconActionTooltip
+                                            label={t(
                                               'lessonForm.downloadVideoAria',
                                               { name: res.name }
                                             )}
+                                            asWrapper={isDownloadingResource}
                                           >
-                                            <Download className="size-3" />
-                                          </Button>
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
-                                            onClick={() =>
-                                              void removeResource(res.id)
-                                            }
-                                            aria-label={t(
+                                            <Button
+                                              type="button"
+                                              variant="ghost"
+                                              size="icon"
+                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-amber-600"
+                                              disabled={isDownloadingResource}
+                                              onClick={() =>
+                                                void handleResourceDownload(res)
+                                              }
+                                              aria-label={t(
+                                                'lessonForm.downloadVideoAria',
+                                                { name: res.name }
+                                              )}
+                                            >
+                                              {isDownloadingResource ? (
+                                                <Loader2 className="size-3 animate-spin" />
+                                              ) : (
+                                                <Download className="size-3" />
+                                              )}
+                                            </Button>
+                                          </IconActionTooltip>
+                                          <IconActionTooltip
+                                            label={t(
                                               'lessonForm.removeVideoAria',
                                               { name: res.name }
                                             )}
                                           >
-                                            <X className="size-3" />
-                                          </Button>
+                                            <Button
+                                              type="button"
+                                              variant="ghost"
+                                              size="icon"
+                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-destructive"
+                                              onClick={() =>
+                                                void removeResource(res.id)
+                                              }
+                                              aria-label={t(
+                                                'lessonForm.removeVideoAria',
+                                                { name: res.name }
+                                              )}
+                                            >
+                                              <X className="size-3" />
+                                            </Button>
+                                          </IconActionTooltip>
                                         </>
                                       )}
                                     </div>
@@ -2311,6 +4099,262 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             </TabsContent>
           )}
 
+          {watchedType === 'video' && (
+            <TabsContent value="imagens" className="flex-1 min-h-0 mt-0">
+              <ScrollArea className="h-full">
+                <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-1">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center justify-between gap-2">
+                        <div className="flex flex-col gap-0.5">
+                          <span className="flex items-center gap-1.5">
+                            <Image className="size-3 text-blue-500" />
+                            Imagens extraídas do vídeo
+                          </span>
+                          <span className="text-[0.65rem] normal-case text-muted-foreground">
+                            Total de imagens: {videoFrames.length}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-7 px-2 text-[11px]"
+                            disabled={isSavingFrameCreate}
+                            onClick={openFrameCreateSheet}
+                          >
+                            {isSavingFrameCreate ? (
+                              <Loader2 className="size-3 mr-1 animate-spin" />
+                            ) : (
+                              <Plus className="size-3 mr-1" />
+                            )}
+                            Adicionar imagem
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-7 px-2 text-[11px]"
+                            disabled={
+                              videoFrames.length === 0 || isDeletingAllFrames
+                            }
+                            onClick={confirmDeleteAllFrames}
+                          >
+                            {isDeletingAllFrames ? (
+                              <Loader2 className="size-3 mr-1 animate-spin" />
+                            ) : (
+                              <Trash2 className="size-3 mr-1" />
+                            )}
+                            Excluir todas
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="secondary"
+                            size="sm"
+                            className="h-7 px-2 text-[11px]"
+                            disabled={!canRequeueSavedOriginalVideo}
+                            onClick={confirmRegenerateFrames}
+                          >
+                            {isRequeueingOriginalVideo ? (
+                              <Loader2 className="size-3 mr-1 animate-spin" />
+                            ) : (
+                              <RefreshCw className="size-3 mr-1" />
+                            )}
+                            Regenerar imagens
+                          </Button>
+                        </div>
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                      {videoFrames.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-background/70 px-4 py-8 text-center">
+                          <Image className="size-8 text-muted-foreground/60" />
+                          <p className="text-sm font-medium">
+                            Nenhuma imagem extraída ainda.
+                          </p>
+                          <p className="text-xs text-muted-foreground max-w-md">
+                            Reprocesse o vídeo original para gerar os frames de
+                            captura.
+                          </p>
+                          <Button
+                            type="button"
+                            variant="secondary"
+                            size="sm"
+                            className="mt-1"
+                            onClick={openFrameCreateSheet}
+                          >
+                            <Plus className="size-3 mr-1" />
+                            Adicionar manualmente
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="secondary"
+                            size="sm"
+                            className="mt-1"
+                            disabled={!canRequeueSavedOriginalVideo}
+                            onClick={confirmRegenerateFrames}
+                          >
+                            {isRequeueingOriginalVideo ? (
+                              <Loader2 className="size-3 mr-1 animate-spin" />
+                            ) : (
+                              <RefreshCw className="size-3 mr-1" />
+                            )}
+                            Reprocessar vídeo
+                          </Button>
+                        </div>
+                      ) : (
+                        <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+                          {videoFrames.map((frame) => {
+                            const frameCardUrl = resolveFrameCardUrl(frame);
+                            const hasImageError = frameImageErrorIds.has(
+                              frame.id
+                            );
+                            const isDownloadingFrame = downloadingFrameIds.has(
+                              String(frame.id)
+                            );
+
+                            return (
+                              <div
+                                key={frame.id}
+                                className="overflow-hidden rounded-lg border bg-background/80 shadow-sm"
+                              >
+                                <div
+                                  className={cn(
+                                    'aspect-video bg-muted/40',
+                                    frameCardUrl && !hasImageError
+                                      ? 'cursor-pointer'
+                                      : ''
+                                  )}
+                                  onClick={() => {
+                                    if (frameCardUrl && !hasImageError) {
+                                      openFrameImageDialog(frame);
+                                    }
+                                  }}
+                                >
+                                  {frameCardUrl && !hasImageError ? (
+                                    <img
+                                      src={frameCardUrl}
+                                      alt={frame.name}
+                                      className="h-full w-full object-cover"
+                                      loading="lazy"
+                                      onError={() => {
+                                        setFrameImageErrorIds((current) => {
+                                          if (current.has(frame.id))
+                                            return current;
+                                          const next = new Set(current);
+                                          next.add(frame.id);
+                                          return next;
+                                        });
+                                      }}
+                                    />
+                                  ) : (
+                                    <div className="flex h-full flex-col items-center justify-center gap-1 text-muted-foreground">
+                                      <Image className="size-8" />
+                                      <span className="text-[0.65rem]">
+                                        Prévia indisponível
+                                      </span>
+                                    </div>
+                                  )}
+                                </div>
+                                <div className="flex items-start gap-2 p-2.5">
+                                  <div className="min-w-0 flex-1">
+                                    <p className="truncate text-xs font-medium">
+                                      {frame.name}
+                                    </p>
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      Aparece em{' '}
+                                      {formatTimecodeLabel(frame.timeSeconds)}
+                                    </p>
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      Tamanho: {resolveFrameCardSize(frame)}
+                                    </p>
+                                  </div>
+                                  <div className="flex shrink-0 items-center gap-1">
+                                    <IconActionTooltip
+                                      label={`Editar imagem de ${formatTimecodeLabel(frame.timeSeconds)}`}
+                                    >
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-7 text-muted-foreground hover:text-blue-600"
+                                        onClick={() =>
+                                          openFrameEditSheet(frame)
+                                        }
+                                        aria-label={`Editar imagem de ${formatTimecodeLabel(frame.timeSeconds)}`}
+                                      >
+                                        <Pencil className="size-3" />
+                                      </Button>
+                                    </IconActionTooltip>
+                                    <IconActionTooltip
+                                      label={`Reproduzir vídeo em ${formatTimecodeLabel(frame.timeSeconds)}`}
+                                    >
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-7 text-muted-foreground hover:text-emerald-600"
+                                        onClick={() =>
+                                          void openFramePreview(frame)
+                                        }
+                                        aria-label={`Reproduzir vídeo em ${formatTimecodeLabel(frame.timeSeconds)}`}
+                                      >
+                                        <Play className="size-3" />
+                                      </Button>
+                                    </IconActionTooltip>
+                                    <IconActionTooltip
+                                      label={`Baixar imagem de ${formatTimecodeLabel(frame.timeSeconds)}`}
+                                      asWrapper={isDownloadingFrame}
+                                    >
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-7 text-muted-foreground hover:text-amber-600"
+                                        disabled={isDownloadingFrame}
+                                        onClick={() =>
+                                          void handleDownloadFrame(frame)
+                                        }
+                                        aria-label={`Baixar imagem de ${formatTimecodeLabel(frame.timeSeconds)}`}
+                                      >
+                                        {isDownloadingFrame ? (
+                                          <Loader2 className="size-3 animate-spin" />
+                                        ) : (
+                                          <Download className="size-3" />
+                                        )}
+                                      </Button>
+                                    </IconActionTooltip>
+                                    <IconActionTooltip
+                                      label={`Remover imagem de ${formatTimecodeLabel(frame.timeSeconds)}`}
+                                    >
+                                      <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="size-7 text-muted-foreground hover:text-destructive"
+                                        onClick={() =>
+                                          void handleDeleteFrame(frame)
+                                        }
+                                        aria-label={`Remover imagem de ${formatTimecodeLabel(frame.timeSeconds)}`}
+                                      >
+                                        <Trash2 className="size-3" />
+                                      </Button>
+                                    </IconActionTooltip>
+                                  </div>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                </div>
+              </ScrollArea>
+            </TabsContent>
+          )}
+
           {/* ── Tab Transcrição ─────────────────────────────────────────── */}
           {watchedType === 'video' && (
             <TabsContent value="transcricao" className="flex-1 min-h-0 mt-0">
@@ -2326,7 +4370,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                           size="sm"
                           className="h-6 text-xs px-2"
                           onClick={() =>
-                            setTranscriptionSegments((prev) => [
+                            updateTranscriptionSegmentsState((prev) => [
                               ...prev,
                               {
                                 id: segmentId(),
@@ -2352,7 +4396,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                             <Input
                               value={segment.start}
                               onChange={(event) =>
-                                setTranscriptionSegments((prev) =>
+                                updateTranscriptionSegmentsState((prev) =>
                                   prev.map((item) =>
                                     item.id === segment.id
                                       ? {
@@ -2364,7 +4408,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                 )
                               }
                               onBlur={() =>
-                                setTranscriptionSegments((prev) =>
+                                updateTranscriptionSegmentsState((prev) =>
                                   prev.map((item) =>
                                     item.id === segment.id
                                       ? {
@@ -2381,7 +4425,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                             <Input
                               value={segment.end}
                               onChange={(event) =>
-                                setTranscriptionSegments((prev) =>
+                                updateTranscriptionSegmentsState((prev) =>
                                   prev.map((item) =>
                                     item.id === segment.id
                                       ? {
@@ -2393,7 +4437,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                 )
                               }
                               onBlur={() =>
-                                setTranscriptionSegments((prev) =>
+                                updateTranscriptionSegmentsState((prev) =>
                                   prev.map((item) =>
                                     item.id === segment.id
                                       ? {
@@ -2410,7 +4454,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                             <Textarea
                               value={segment.text}
                               onChange={(event) =>
-                                setTranscriptionSegments((prev) =>
+                                updateTranscriptionSegmentsState((prev) =>
                                   prev.map((item) =>
                                     item.id === segment.id
                                       ? {
@@ -2436,7 +4480,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               size="icon"
                               className="size-8 text-muted-foreground hover:text-destructive"
                               onClick={() =>
-                                setTranscriptionSegments((prev) => {
+                                updateTranscriptionSegmentsState((prev) => {
                                   if (prev.length === 1) {
                                     const first = prev[0];
                                     return first
@@ -2471,6 +4515,25 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             </TabsContent>
           )}
 
+          {watchedType === 'video' && (
+            <TabsContent value="audios" className="flex-1 min-h-0 mt-0">
+              <ScrollArea className="h-full">
+                <AudioFilesTab
+                  audioResources={audioResources}
+                  isUploading={isUploading}
+                  onAddAudio={handleAudioFiles}
+                  onOpenAudio={openResource}
+                  onDownloadAudio={handleResourceDownload}
+                  isAudioDownloading={(res) =>
+                    downloadingResourceKeys.has(String(res.fileId ?? res.id))
+                  }
+                  onDeleteAudio={removeResource}
+                  resolveResourceMetadata={resolveResourceMetadata}
+                />
+              </ScrollArea>
+            </TabsContent>
+          )}
+
           {/* ── Tab Recursos ─────────────────────────────────────────────── */}
           <TabsContent value="recursos" className="flex-1 min-h-0 mt-0">
             <ScrollArea className="h-full">
@@ -2552,86 +4615,130 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                 </div>
 
                 {/* Counter */}
-                {genericResources.length > 0 && (
+                {supplementaryResources.length > 0 && (
                   <p className="text-xs text-muted-foreground">
                     {t('lessonForm.resourcesCount', {
-                      count: genericResources.length,
+                      count: supplementaryResources.length,
                     })}
                   </p>
                 )}
 
                 {/* Resource list */}
-                {genericResources.length === 0 ? (
+                {supplementaryResources.length === 0 ? (
                   <p className="text-center text-xs text-muted-foreground py-1">
                     {t('questionEditor.noLinkedResources')}
                   </p>
                 ) : (
                   <div className="flex flex-col gap-1">
-                    {genericResources.map((res) => {
-                      const ResIcon = getResourceIcon(res.type);
+                    {supplementaryResources.map((res) => {
+                      const metadata = resolveResourceMetadata(res);
+                      const isDownloadingResource = downloadingResourceKeys.has(
+                        String(res.fileId ?? res.id)
+                      );
+
                       return (
                         <div
                           key={res.id}
                           className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2"
                         >
-                          <ResIcon
-                            className={cn(
-                              'size-3.5 shrink-0',
-                              getResourceIconColor(res.type)
-                            )}
+                          <FileTypeIcon
+                            filename={res.name}
+                            mimeType={res.type}
+                            size={14}
                           />
                           <div className="flex-1 min-w-0">
                             <p className="text-xs truncate font-medium">
                               {res.name}
                             </p>
-                            <p className="text-[0.65rem] text-muted-foreground">
-                              {res.size}
-                            </p>
+                            <div className="mt-0.5 flex flex-wrap items-center gap-2 text-[0.65rem] text-muted-foreground">
+                              <span>{metadata.sizeLabel}</span>
+                              <span>·</span>
+                              <span>{metadata.uploadedAtLabel}</span>
+                            </div>
                           </div>
-                          {res.public && (
-                            <Eye
-                              className="size-3 text-emerald-500 shrink-0"
+
+                          <div className="flex items-center gap-1.5 pr-1">
+                            <Switch
+                              checked={Boolean(res.public)}
+                              onCheckedChange={(checked) => {
+                                setLocalResources((prev) =>
+                                  prev.map((item) =>
+                                    item.id === res.id
+                                      ? { ...item, public: checked }
+                                      : item
+                                  )
+                                );
+                                setResourcesDirty(true);
+                              }}
                               aria-label={t('lessonForm.public')}
                             />
-                          )}
-                          {res.url && (
-                            <a
-                              href={res.url}
-                              target="_blank"
-                              rel="noopener noreferrer"
+                            <span className="text-[0.65rem] text-muted-foreground whitespace-nowrap">
+                              {res.public
+                                ? t('lessonForm.public')
+                                : t('lessonForm.private')}
+                            </span>
+                          </div>
+
+                          <IconActionTooltip
+                            label={t('questionEditor.openInNewTab', {
+                              name: res.name,
+                            })}
+                          >
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                              onClick={() => void openResource(res)}
                               aria-label={t('questionEditor.openInNewTab', {
                                 name: res.name,
                               })}
-                              onClick={(e) => e.stopPropagation()}
-                              className="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors shrink-0"
                             >
                               <ExternalLink className="size-3" />
-                            </a>
-                          )}
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
-                            onClick={() => handleResourceDownload(res)}
-                            aria-label={t('questionEditor.downloadResource', {
+                            </Button>
+                          </IconActionTooltip>
+                          <IconActionTooltip
+                            label={t('questionEditor.downloadResource', {
                               name: res.name,
                             })}
+                            asWrapper={isDownloadingResource}
                           >
-                            <Download className="size-3" />
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon"
-                            className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
-                            onClick={() => void removeResource(res.id)}
-                            aria-label={t('questionEditor.removeResource', {
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                              disabled={isDownloadingResource}
+                              onClick={() => handleResourceDownload(res)}
+                              aria-label={t('questionEditor.downloadResource', {
+                                name: res.name,
+                              })}
+                            >
+                              {isDownloadingResource ? (
+                                <Loader2 className="size-3 animate-spin" />
+                              ) : (
+                                <Download className="size-3" />
+                              )}
+                            </Button>
+                          </IconActionTooltip>
+                          <IconActionTooltip
+                            label={t('questionEditor.removeResource', {
                               name: res.name,
                             })}
                           >
-                            <X className="size-3" />
-                          </Button>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                              onClick={() => void removeResource(res.id)}
+                              aria-label={t('questionEditor.removeResource', {
+                                name: res.name,
+                              })}
+                            >
+                              <X className="size-3" />
+                            </Button>
+                          </IconActionTooltip>
                         </div>
                       );
                     })}
@@ -2642,6 +4749,392 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           </TabsContent>
         </Tabs>
 
+        <Dialog
+          open={videoPreviewOpen}
+          onOpenChange={(open) => {
+            if (!open) closeVideoPreview();
+          }}
+        >
+          <DialogContent className="max-w-[min(96vw,72rem)] gap-3 overflow-hidden p-0">
+            <DialogHeader className="border-b px-5 py-4 text-left">
+              <DialogTitle className="text-base">
+                {videoPreviewResource?.name ?? t('lessonForm.tabVideos')}
+              </DialogTitle>
+              <DialogDescription>
+                {videoPreviewResource
+                  ? t('lessonForm.fileStorageVideosByResolution')
+                  : t('lessonForm.tabVideos')}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="px-5 pb-5">
+              {videoPreviewError ? (
+                <div className="flex min-h-72 items-center justify-center rounded-lg border border-dashed bg-muted/30 px-6 text-center text-sm text-muted-foreground">
+                  {videoPreviewError}
+                </div>
+              ) : videoPreviewUrl ? (
+                <video
+                  key={videoPreviewUrl}
+                  src={videoPreviewUrl}
+                  controls
+                  autoPlay
+                  playsInline
+                  className="max-h-[70vh] w-full rounded-lg bg-black"
+                />
+              ) : (
+                <div className="flex min-h-72 items-center justify-center rounded-lg border border-dashed bg-muted/30 px-6 text-center text-sm text-muted-foreground">
+                  {isResolvingVideoPreview
+                    ? t('lessonForm.loadingVideoProfiles')
+                    : t('questionEditor.resourceOpenError')}
+                </div>
+              )}
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog
+          open={framePreviewOpen}
+          onOpenChange={(open) => {
+            if (!open) closeFramePreview();
+          }}
+        >
+          <DialogContent className="max-w-[min(96vw,80rem)] gap-3 overflow-hidden p-0">
+            <DialogHeader className="border-b px-5 py-4 text-left">
+              <DialogTitle className="text-base">
+                {framePreviewFrame?.name ?? 'Imagem extraída'}
+              </DialogTitle>
+              <DialogDescription>
+                Reprodução iniciando em{' '}
+                {formatTimecodeLabel(framePreviewFrame?.timeSeconds ?? 0)}
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="grid gap-3 px-5 pb-5 lg:grid-cols-[18rem_1fr]">
+              <div className="space-y-3">
+                <div className="rounded-lg border bg-muted/20 p-3">
+                  <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Fonte de reprodução
+                  </p>
+                  <div className="mt-2 flex flex-col gap-1.5">
+                    {framePreviewSources.length === 0 ? (
+                      <p className="text-xs text-muted-foreground">
+                        Nenhuma fonte disponível.
+                      </p>
+                    ) : (
+                      framePreviewSources.map((source) => (
+                        <Button
+                          key={source.key}
+                          type="button"
+                          variant={
+                            activeFramePreviewSource?.key === source.key
+                              ? 'secondary'
+                              : 'outline'
+                          }
+                          className="h-8 justify-start px-3 text-xs"
+                          onClick={() =>
+                            void resolveFramePreviewSource(source.key)
+                          }
+                        >
+                          <Video className="mr-2 size-3.5" />
+                          {source.label}
+                        </Button>
+                      ))
+                    )}
+                  </div>
+                </div>
+
+                <div className="rounded-lg border bg-muted/20 p-3 text-xs text-muted-foreground">
+                  <p>
+                    O player começa exatamente no timestamp da imagem extraída.
+                  </p>
+                </div>
+              </div>
+
+              <div>
+                {framePreviewError ? (
+                  <div className="flex min-h-72 items-center justify-center rounded-lg border border-dashed bg-muted/30 px-6 text-center text-sm text-muted-foreground">
+                    {framePreviewError}
+                  </div>
+                ) : framePreviewUrl ? (
+                  <video
+                    ref={framePreviewVideoRef}
+                    key={framePreviewUrl}
+                    src={framePreviewUrl}
+                    controls
+                    autoPlay
+                    playsInline
+                    className="max-h-[72vh] w-full rounded-lg bg-black"
+                    onLoadedMetadata={() => {
+                      const video = framePreviewVideoRef.current;
+                      if (!video || !framePreviewFrame) return;
+
+                      const seekTo = Math.max(0, framePreviewFrame.timeSeconds);
+                      if (Math.abs(video.currentTime - seekTo) > 0.25) {
+                        video.currentTime = seekTo;
+                      }
+                    }}
+                  />
+                ) : (
+                  <div className="flex min-h-72 items-center justify-center rounded-lg border border-dashed bg-muted/30 px-6 text-center text-sm text-muted-foreground">
+                    {isResolvingFramePreview
+                      ? 'Carregando vídeo...'
+                      : 'Selecione uma fonte para reprodução.'}
+                  </div>
+                )}
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog
+          open={frameImageDialogOpen}
+          onOpenChange={(open) => {
+            if (!open) closeFrameImageDialog();
+          }}
+        >
+          <DialogContent className="h-[96vh] w-[96vw] max-w-none overflow-hidden p-0">
+            <DialogHeader className="border-b px-4 py-3 text-left">
+              <DialogTitle className="text-sm">
+                {frameImageDialogFrame?.name ?? 'Imagem extraída'}
+              </DialogTitle>
+              <DialogDescription>
+                Visualização ampliada da imagem extraída.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex h-full items-center justify-center bg-black/95 p-4">
+              {frameImageDialogFrame ? (
+                <img
+                  src={resolveFrameCardUrl(frameImageDialogFrame)}
+                  alt={frameImageDialogFrame.name}
+                  className="max-h-full max-w-full object-contain"
+                />
+              ) : null}
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        <Sheet
+          open={frameEditSheetOpen}
+          onOpenChange={(open) => {
+            if (!open) closeFrameEditSheet();
+            else setFrameEditSheetOpen(true);
+          }}
+        >
+          <ResizableSheetContent
+            sheetId="lms-course-structure-frame-edit-sheet"
+            defaultWidth={520}
+            minWidth={420}
+            maxWidth={920}
+            side="right"
+            className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+          >
+            <SheetHeader>
+              <SheetTitle>Editar imagem extraida</SheetTitle>
+            </SheetHeader>
+
+            <div className="flex flex-1 flex-col gap-4 px-4 pb-4">
+              <div className="rounded-lg border bg-muted/20 p-3">
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Preview
+                </p>
+                <div className="mt-2 flex min-h-52 items-center justify-center overflow-hidden rounded-md border bg-background/60">
+                  {editingFramePreviewUrl ? (
+                    <img
+                      src={editingFramePreviewUrl}
+                      alt={editingFrame?.name ?? 'Imagem extraida'}
+                      className="max-h-72 w-full object-contain"
+                    />
+                  ) : (
+                    <p className="text-xs text-muted-foreground">
+                      Preview indisponivel.
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label className="text-sm font-medium">Tempo no video</Label>
+                <Input
+                  value={editingFrameTime}
+                  onChange={(event) => setEditingFrameTime(event.target.value)}
+                  onBlur={() =>
+                    setEditingFrameTime((current) =>
+                      normalizeTimeInput(current || '')
+                    )
+                  }
+                  placeholder="00:00"
+                  className="font-mono"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Use mm:ss ou hh:mm:ss para definir onde a imagem aparece.
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label className="text-sm font-medium">Substituir imagem</Label>
+                <div className="flex items-center gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => frameEditInputRef.current?.click()}
+                  >
+                    <UploadCloud className="size-4 mr-1" />
+                    {editingFrameFile ? 'Trocar arquivo' : 'Selecionar imagem'}
+                  </Button>
+                  {editingFrameFile ? (
+                    <span className="text-xs text-muted-foreground truncate">
+                      {editingFrameFile.name}
+                    </span>
+                  ) : null}
+                </div>
+                <input
+                  ref={frameEditInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={(event) => {
+                    handleFrameReplacementSelect(event.target.files?.[0]);
+                    event.target.value = '';
+                  }}
+                />
+              </div>
+            </div>
+
+            <SheetFooter className="px-4 pb-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={closeFrameEditSheet}
+              >
+                Cancelar
+              </Button>
+              <Button
+                type="button"
+                onClick={() => void handleSaveFrameEdit()}
+                disabled={isSavingFrameEdit}
+              >
+                {isSavingFrameEdit ? (
+                  <Loader2 className="size-4 mr-1 animate-spin" />
+                ) : (
+                  <Save className="size-4 mr-1" />
+                )}
+                Salvar
+              </Button>
+            </SheetFooter>
+          </ResizableSheetContent>
+        </Sheet>
+
+        <Sheet
+          open={frameCreateSheetOpen}
+          onOpenChange={(open) => {
+            if (!open) closeFrameCreateSheet();
+            else setFrameCreateSheetOpen(true);
+          }}
+        >
+          <ResizableSheetContent
+            sheetId="lms-course-structure-frame-create-sheet"
+            defaultWidth={520}
+            minWidth={420}
+            maxWidth={920}
+            side="right"
+            className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+          >
+            <SheetHeader>
+              <SheetTitle>Adicionar imagem extraida</SheetTitle>
+            </SheetHeader>
+
+            <div className="flex flex-1 flex-col gap-4 px-4 pb-4">
+              <div className="rounded-lg border bg-muted/20 p-3">
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Preview
+                </p>
+                <div className="mt-2 flex min-h-52 items-center justify-center overflow-hidden rounded-md border bg-background/60">
+                  {creatingFramePreviewUrl ? (
+                    <img
+                      src={creatingFramePreviewUrl}
+                      alt={creatingFrameFile?.name ?? 'Nova imagem extraida'}
+                      className="max-h-72 w-full object-contain"
+                    />
+                  ) : (
+                    <p className="text-xs text-muted-foreground">
+                      Selecione uma imagem para visualizar o preview.
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label className="text-sm font-medium">Tempo no video</Label>
+                <Input
+                  value={creatingFrameTime}
+                  onChange={(event) => setCreatingFrameTime(event.target.value)}
+                  onBlur={() =>
+                    setCreatingFrameTime((current) =>
+                      normalizeTimeInput(current || '')
+                    )
+                  }
+                  placeholder="00:00"
+                  className="font-mono"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Use mm:ss ou hh:mm:ss para definir onde a imagem aparece.
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label className="text-sm font-medium">Imagem</Label>
+                <div className="flex items-center gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => frameCreateInputRef.current?.click()}
+                  >
+                    <UploadCloud className="size-4 mr-1" />
+                    {creatingFrameFile ? 'Trocar arquivo' : 'Selecionar imagem'}
+                  </Button>
+                  {creatingFrameFile ? (
+                    <span className="text-xs text-muted-foreground truncate">
+                      {creatingFrameFile.name}
+                    </span>
+                  ) : null}
+                </div>
+                <input
+                  ref={frameCreateInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={(event) => {
+                    handleFrameCreateSelect(event.target.files?.[0]);
+                    event.target.value = '';
+                  }}
+                />
+              </div>
+            </div>
+
+            <SheetFooter className="px-4 pb-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={closeFrameCreateSheet}
+              >
+                Cancelar
+              </Button>
+              <Button
+                type="button"
+                onClick={() => void handleSaveFrameCreate()}
+                disabled={isSavingFrameCreate}
+              >
+                {isSavingFrameCreate ? (
+                  <Loader2 className="size-4 mr-1 animate-spin" />
+                ) : (
+                  <Save className="size-4 mr-1" />
+                )}
+                Salvar
+              </Button>
+            </SheetFooter>
+          </ResizableSheetContent>
+        </Sheet>
+
         {/* ── Footer ───────────────────────────────────────────────────────── */}
         <div className="shrink-0 border-t bg-background">
           <Separator />
@@ -2651,11 +5144,15 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               variant="ghost"
               size="sm"
               className="h-6 text-[11px] sm:h-7 sm:text-xs"
-              disabled={(!isDirty && !resourcesDirty) || updateLesson.isPending}
+              disabled={!hasPendingChanges || isSavingLesson}
               onClick={() => {
                 form.reset();
                 setLocalResources(lesson?.resources ?? []);
                 setResourcesDirty(false);
+                setTranscriptionSegments(
+                  toEditableTranscriptionSegments(fetchedTranscriptionSegments)
+                );
+                setTranscriptionDirty(false);
               }}
             >
               <Undo2 className="size-3 mr-1" />
@@ -2666,9 +5163,9 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               type="submit"
               size="sm"
               className="h-6 text-[11px] sm:h-7 sm:text-xs"
-              disabled={(!isDirty && !resourcesDirty) || updateLesson.isPending}
+              disabled={!hasPendingChanges || isSavingLesson}
             >
-              {updateLesson.isPending ? (
+              {isSavingLesson ? (
                 <Loader2 className="size-3 mr-1 animate-spin" />
               ) : (
                 <Save className="size-3 mr-1" />
@@ -2924,18 +5421,22 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                           })}
                         </span>
                         {qSheetFillBlanks.length > 1 && (
-                          <button
-                            type="button"
-                            className="text-muted-foreground hover:text-destructive transition-colors"
-                            onClick={() =>
-                              setQSheetFillBlanks((prev) =>
-                                prev.filter((f) => f.id !== fb.id)
-                              )
-                            }
-                            aria-label={t('questionEditor.removeBlank')}
+                          <IconActionTooltip
+                            label={t('questionEditor.removeBlank')}
                           >
-                            <X className="size-3.5" />
-                          </button>
+                            <button
+                              type="button"
+                              className="text-muted-foreground hover:text-destructive transition-colors"
+                              onClick={() =>
+                                setQSheetFillBlanks((prev) =>
+                                  prev.filter((f) => f.id !== fb.id)
+                                )
+                              }
+                              aria-label={t('questionEditor.removeBlank')}
+                            >
+                              <X className="size-3.5" />
+                            </button>
+                          </IconActionTooltip>
                         )}
                       </div>
                       <Input
@@ -3031,18 +5532,22 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                         className="flex-1"
                       />
                       {qSheetPairs.length > 1 && (
-                        <button
-                          type="button"
-                          className="text-muted-foreground hover:text-destructive transition-colors"
-                          onClick={() =>
-                            setQSheetPairs((prev) =>
-                              prev.filter((p) => p.id !== pair.id)
-                            )
-                          }
-                          aria-label={t('questionEditor.removePair')}
+                        <IconActionTooltip
+                          label={t('questionEditor.removePair')}
                         >
-                          <X className="size-4" />
-                        </button>
+                          <button
+                            type="button"
+                            className="text-muted-foreground hover:text-destructive transition-colors"
+                            onClick={() =>
+                              setQSheetPairs((prev) =>
+                                prev.filter((p) => p.id !== pair.id)
+                              )
+                            }
+                            aria-label={t('questionEditor.removePair')}
+                          >
+                            <X className="size-4" />
+                          </button>
+                        </IconActionTooltip>
                       )}
                     </div>
                   ))}
@@ -3075,7 +5580,188 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             </SheetFooter>
           </ResizableSheetContent>
         </Sheet>
+
+        <JobDetailSheet
+          open={jobDetailOpen}
+          onOpenChange={setJobDetailOpen}
+          jobId={currentQueueJobId}
+        />
       </form>
     </Form>
   );
 }
+
+function AudioFilesTab({
+  audioResources,
+  isUploading,
+  onAddAudio,
+  onOpenAudio,
+  onDownloadAudio,
+  isAudioDownloading,
+  onDeleteAudio,
+  resolveResourceMetadata,
+}: {
+  audioResources: Resource[];
+  isUploading: boolean;
+  onAddAudio: (files: File[]) => Promise<void>;
+  onOpenAudio: (res: Resource) => Promise<void>;
+  onDownloadAudio: (res: Resource) => Promise<void>;
+  isAudioDownloading: (res: Resource) => boolean;
+  onDeleteAudio: (resourceId: string) => Promise<void>;
+  resolveResourceMetadata: (res: Resource) => {
+    sizeLabel: string;
+    uploadedAtLabel: string;
+  };
+}) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  if (!audioResources.length) {
+    return (
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex items-center justify-between gap-2">
+          <p className="text-sm text-muted-foreground">
+            Nenhum áudio disponível para esta aula.
+          </p>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            disabled={isUploading}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {isUploading ? (
+              <Loader2 className="size-3.5 mr-1 animate-spin" />
+            ) : (
+              <Plus className="size-3.5 mr-1" />
+            )}
+            Adicionar áudio
+          </Button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="audio/*"
+            multiple
+            className="hidden"
+            onChange={(e) => {
+              if (e.target.files) {
+                void onAddAudio(Array.from(e.target.files));
+                e.target.value = '';
+              }
+            }}
+          />
+        </div>
+        <div className="flex flex-col items-center gap-2 py-8 text-center">
+          <p className="text-sm text-muted-foreground">
+            Nenhum áudio disponível para esta aula.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2 p-4">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs text-muted-foreground">
+          {audioResources.length} áudio(s)
+        </p>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="h-7 px-2 text-xs"
+          disabled={isUploading}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          {isUploading ? (
+            <Loader2 className="size-3.5 mr-1 animate-spin" />
+          ) : (
+            <Plus className="size-3.5 mr-1" />
+          )}
+          Adicionar áudio
+        </Button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="audio/*"
+          multiple
+          className="hidden"
+          onChange={(e) => {
+            if (e.target.files) {
+              void onAddAudio(Array.from(e.target.files));
+              e.target.value = '';
+            }
+          }}
+        />
+      </div>
+
+      {audioResources.map((res) => {
+        const metadata = resolveResourceMetadata(res);
+        const isDownloading = isAudioDownloading(res);
+
+        return (
+          <div
+            key={res.id}
+            className="flex items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-2"
+          >
+            <FileTypeIcon filename={res.name} mimeType={res.type} size={14} />
+            <div className="flex-1 min-w-0">
+              <p className="text-xs truncate font-medium">{res.name}</p>
+              <div className="mt-0.5 flex flex-wrap items-center gap-2 text-[0.65rem] text-muted-foreground">
+                <span>{metadata.sizeLabel}</span>
+                <span>·</span>
+                <span>{metadata.uploadedAtLabel}</span>
+              </div>
+            </div>
+
+            <IconActionTooltip label={`Abrir áudio ${res.name}`}>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-6 shrink-0 text-muted-foreground hover:text-blue-600"
+                onClick={() => void onOpenAudio(res)}
+                aria-label={`Abrir áudio ${res.name}`}
+              >
+                <ExternalLink className="size-3" />
+              </Button>
+            </IconActionTooltip>
+            <IconActionTooltip
+              label={`Baixar áudio ${res.name}`}
+              asWrapper={isDownloading}
+            >
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
+                disabled={isDownloading}
+                onClick={() => void onDownloadAudio(res)}
+                aria-label={`Baixar áudio ${res.name}`}
+              >
+                {isDownloading ? (
+                  <Loader2 className="size-3 animate-spin" />
+                ) : (
+                  <Download className="size-3" />
+                )}
+              </Button>
+            </IconActionTooltip>
+            <IconActionTooltip label={`Excluir áudio ${res.name}`}>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                onClick={() => void onDeleteAudio(res.id)}
+                aria-label={`Excluir áudio ${res.name}`}
+              >
+                <X className="size-3" />
+              </Button>
+            </IconActionTooltip>
+          </div>
+        );
+      })}
+    </div>
+  );
+}