@hed-hog/lms 0.0.364 → 0.0.365

package/hedhog/frontend/app/bulk-upload-sessions/page.tsx.ejs

@@ -59,13 +59,14 @@ import { getPhotoUrl } from '@/lib/get-photo-url';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
+  AlertCircle,
   Ban,
   CheckCircle2,
   Clock,
   Cog,
   ExternalLink,
   HardDriveUpload,
-  Inbox,
+  Link2,
   Loader2,
   Pencil,
   Plus,
@@ -85,7 +86,8 @@ type UploadStatus =
   | 'received'
   | 'done'
   | 'error'
-  | 'cancelled';
+  | 'cancelled'
+  | 'lesson_not_found';
 
 type UploadItemRow = {
   id: number;
@@ -188,7 +190,7 @@ type BulkUploadRegenerateTokenResponse = {
   webhook: WebhookIntegrationItem;
 };
 
-type BulkUploadCleanupStatus = 'done' | 'error' | 'cancelled';
+type BulkUploadCleanupStatus = 'received' | 'done' | 'error' | 'cancelled';
 type BulkUploadCleanupTimeWindow =
   | 'last_hour'
   | 'last_day'
@@ -214,7 +216,8 @@ const CLEANUP_STATUS_OPTIONS: Array<{
   value: BulkUploadCleanupStatus;
   label: string;
 }> = [
-  { value: 'done', label: 'Concluidos' },
+  { value: 'received', label: 'Concluidos (webhook confirmado)' },
+  { value: 'done', label: 'Enviados (aguardando confirmação)' },
   { value: 'error', label: 'Com falha' },
   { value: 'cancelled', label: 'Cancelados' },
 ];
@@ -270,21 +273,21 @@ function getStatusMeta(status: UploadStatus) {
   switch (status) {
     case 'received':
       return {
-        label: 'Arquivo recebido',
+        label: 'Concluido',
         variant: 'default' as const,
-        icon: Inbox,
+        icon: CheckCircle2,
         iconClass: 'text-green-600',
         animated: false,
         progressClass: 'bg-green-500',
       };
     case 'done':
       return {
-        label: 'Concluido',
-        variant: 'default' as const,
-        icon: CheckCircle2,
-        iconClass: 'text-green-600',
-        animated: false,
-        progressClass: 'bg-green-500',
+        label: 'Aguardando confirmação',
+        variant: 'secondary' as const,
+        icon: HardDriveUpload,
+        iconClass: 'text-blue-500 animate-pulse',
+        animated: true,
+        progressClass: 'bg-blue-400',
       };
     case 'uploading':
       return {
@@ -322,6 +325,15 @@ function getStatusMeta(status: UploadStatus) {
         animated: false,
         progressClass: 'bg-muted-foreground/40',
       };
+    case 'lesson_not_found':
+      return {
+        label: 'Aula não encontrada',
+        variant: 'outline' as const,
+        icon: AlertCircle,
+        iconClass: 'text-amber-500',
+        animated: false,
+        progressClass: 'bg-amber-400',
+      };
     default:
       return {
         label: 'Erro',
@@ -342,7 +354,8 @@ export default function LmsBulkUploadSessionsPage() {
   const [statusFilter, setStatusFilter] = useState('all');
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [bucketName, setBucketName] = useState('');
-  const [lambdaRoleArn, setLambdaRoleArn] = useState('');
+  const [awsAccountId, setAwsAccountId] = useState('');
+  const [lambdaRoleName, setLambdaRoleName] = useState('');
   const [storageProfileId, setStorageProfileId] = useState<number | null>(null);
   const [webhookPlainToken, setWebhookPlainToken] = useState<string | null>(
     null
@@ -361,10 +374,26 @@ export default function LmsBulkUploadSessionsPage() {
   const [isCleanupDialogOpen, setIsCleanupDialogOpen] = useState(false);
   const [cleanupStatuses, setCleanupStatuses] = useState<
     Set<BulkUploadCleanupStatus>
-  >(new Set(['done']));
+  >(new Set(['received']));
   const [cleanupTimeWindow, setCleanupTimeWindow] =
     useState<BulkUploadCleanupTimeWindow>('last_day');
   const [isCleaningHistory, setIsCleaningHistory] = useState(false);
+  const [manualLinkOpen, setManualLinkOpen] = useState(false);
+  const [manualLinkItemId, setManualLinkItemId] = useState<number | null>(null);
+  const [manualLinkVideoUrl, setManualLinkVideoUrl] = useState<string | null>(null);
+  const [manualLinkVideoLoading, setManualLinkVideoLoading] = useState(false);
+  const [manualLinkCourseId, setManualLinkCourseId] = useState<number | null>(null);
+  const [manualLinkSessionId, setManualLinkSessionId] = useState<number | null>(null);
+  const [manualLinkLessonId, setManualLinkLessonId] = useState<number | null>(null);
+  const [manualLinkStructure, setManualLinkStructure] = useState<{
+    sessions: Array<{
+      id: number;
+      title: string;
+      lessons: Array<{ id: number; title: string }>;
+    }>;
+  } | null>(null);
+  const [manualLinkStructureLoading, setManualLinkStructureLoading] = useState(false);
+  const [isLinkingLesson, setIsLinkingLesson] = useState(false);
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: PAGE_SIZE_OPTIONS[1],
@@ -417,6 +446,8 @@ export default function LmsBulkUploadSessionsPage() {
     },
   });
 
+  const ACTIVE_STATUSES: UploadStatus[] = ['queued', 'uploading', 'cancelling', 'done'];
+
   const {
     data,
     isLoading,
@@ -442,6 +473,23 @@ export default function LmsBulkUploadSessionsPage() {
       });
       return response.data;
     },
+    refetchInterval: (query) => {
+      const currentRows = query.state.data?.data ?? [];
+      const hasActive = currentRows.some((row) => ACTIVE_STATUSES.includes(row.status));
+      return hasActive ? 10_000 : false;
+    },
+  });
+
+  const { data: coursesResult } = useQuery<{ data: Array<{ id: number; title: string; code: string | null }> }>({
+    queryKey: ['lms-bulk-upload-courses-picker', manualLinkOpen],
+    enabled: manualLinkOpen,
+    queryFn: async () => {
+      const response = await request<{ data: Array<{ id: number; title: string; code: string | null }> }>({
+        url: '/course?pageSize=500',
+        method: 'GET',
+      });
+      return response.data;
+    },
   });
 
   const rows = useMemo(() => data?.data ?? [], [data?.data]);
@@ -449,7 +497,7 @@ export default function LmsBulkUploadSessionsPage() {
   const stats = useMemo(
     () => ({
       sending: rows.filter((row) => row.status === 'uploading').length,
-      done: rows.filter((row) => row.status === 'done').length,
+      done: rows.filter((row) => row.status === 'received').length,
       error: rows.filter((row) => row.status === 'error').length,
     }),
     [rows]
@@ -513,7 +561,16 @@ export default function LmsBulkUploadSessionsPage() {
     [webhookPreview, webhooksResult?.data]
   );
 
-  const hasBaseConfig = Boolean(storageProfileId && lambdaRoleArn.trim());
+  const lambdaRoleArn =
+    awsAccountId && lambdaRoleName
+      ? `arn:aws:iam::${awsAccountId}:role/${lambdaRoleName}`
+      : '';
+  const isAccountIdValid = !awsAccountId || /^\d{12}$/.test(awsAccountId);
+  const isRoleNameValid =
+    !lambdaRoleName || /^[a-zA-Z_0-9+=,.@\-_/]+$/.test(lambdaRoleName);
+  const hasBaseConfig = Boolean(
+    storageProfileId && awsAccountId && lambdaRoleName && isAccountIdValid && isRoleNameValid
+  );
   const isWebhookActive = Boolean(
     webhookIntegration?.status === 'active' && webhookIntegration?.public_url
   );
@@ -540,7 +597,10 @@ export default function LmsBulkUploadSessionsPage() {
 
   useEffect(() => {
     setBucketName(String(settingsResult?.bucketName ?? '').trim());
-    setLambdaRoleArn(String(settingsResult?.lambdaRoleArn ?? '').trim());
+    const arn = String(settingsResult?.lambdaRoleArn ?? '').trim();
+    const arnMatch = arn.match(/^arn:[^:]*:iam::(\d{12}):role\/(.+)$/);
+    setAwsAccountId(arnMatch?.[1] ?? '');
+    setLambdaRoleName(arnMatch?.[2] ?? '');
     const parsedProfileId = Number(settingsResult?.storageProfileId ?? 0);
     setStorageProfileId(
       Number.isFinite(parsedProfileId) && parsedProfileId > 0
@@ -594,15 +654,81 @@ export default function LmsBulkUploadSessionsPage() {
         refetchProfiles(),
         refetchWebhooks(),
       ]);
-    } catch {
-      toast.error(
-        'Falha ao validar bucket/credenciais temporárias ou salvar a configuração.'
-      );
+    } catch (error: unknown) {
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? null;
+      toast.error('Falha ao salvar a configuração.', {
+        description: message || 'Verifique o ARN da role e as credenciais do perfil de storage.',
+      });
     } finally {
       setIsSavingSettings(false);
     }
   };
 
+  const openManualLink = async (itemId: number) => {
+    setManualLinkItemId(itemId);
+    setManualLinkCourseId(null);
+    setManualLinkSessionId(null);
+    setManualLinkLessonId(null);
+    setManualLinkStructure(null);
+    setManualLinkVideoUrl(null);
+    setManualLinkOpen(true);
+    setManualLinkVideoLoading(true);
+    try {
+      const res = await request<{ url: string }>({
+        url: `/lms/bulk-upload/item/${itemId}/video-url`,
+        method: 'GET',
+      });
+      setManualLinkVideoUrl(res.data.url);
+    } catch {
+      // vídeo indisponível, mas o sheet ainda abre
+    } finally {
+      setManualLinkVideoLoading(false);
+    }
+  };
+
+  const loadCourseStructure = async (courseId: number) => {
+    setManualLinkStructureLoading(true);
+    setManualLinkSessionId(null);
+    setManualLinkLessonId(null);
+    try {
+      const res = await request<{ sessions: Array<{ id: number; title: string; lessons: Array<{ id: number; title: string }> }> }>({
+        url: `/course/${courseId}/structure`,
+        method: 'GET',
+      });
+      setManualLinkStructure({ sessions: res.data.sessions ?? [] });
+    } catch {
+      setManualLinkStructure(null);
+    } finally {
+      setManualLinkStructureLoading(false);
+    }
+  };
+
+  const confirmManualLink = async () => {
+    if (!manualLinkItemId || !manualLinkCourseId || !manualLinkSessionId || !manualLinkLessonId) return;
+    try {
+      setIsLinkingLesson(true);
+      await request({
+        url: `/lms/bulk-upload/item/${manualLinkItemId}/link-lesson`,
+        method: 'POST',
+        data: {
+          courseId: manualLinkCourseId,
+          sessionId: manualLinkSessionId,
+          lessonId: manualLinkLessonId,
+        },
+      });
+      toast.success('Aula vinculada! O processamento do vídeo foi iniciado.');
+      setManualLinkOpen(false);
+      await refetchSessions();
+    } catch (error: unknown) {
+      const message = (error as { response?: { data?: { message?: string } } })?.response?.data?.message ?? null;
+      toast.error('Falha ao vincular aula.', { description: message ?? undefined });
+    } finally {
+      setIsLinkingLesson(false);
+    }
+  };
+
   const regenerateWebhookToken = async () => {
     if (!webhookIntegration) return;
     try {
@@ -838,28 +964,71 @@ export default function LmsBulkUploadSessionsPage() {
                     </p>
                     <p className="mt-1 text-xs text-amber-800/90 dark:text-amber-300/90">
                       Essa role será usada para criar a Lambda automaticamente
-                      quando necessário. Informe o ARN completo da role em{' '}
-                      <span className="font-mono">
-                        {BULK_UPLOAD_LAMBDA_ROLE_ARN_SLUG}
-                      </span>{' '}
-                      antes de salvar a configuração.
+                      quando necessário. Informe o número da conta AWS e o nome
+                      da role IAM de execução da Lambda antes de salvar a
+                      configuração.
                     </p>
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="bulk-upload-lambda-role-arn">
-                      ARN da role da Lambda
-                    </Label>
-                    <Input
-                      id="bulk-upload-lambda-role-arn"
-                      placeholder="arn:aws:iam::123456789012:role/lms-bulk-upload-lambda-role"
-                      value={lambdaRoleArn}
-                      onChange={(event) => setLambdaRoleArn(event.target.value)}
-                      disabled={settingsLoading || isSavingSettings}
-                    />
-                    <p className="text-xs text-muted-foreground">
-                      Setting: {BULK_UPLOAD_LAMBDA_ROLE_ARN_SLUG}
-                    </p>
+                    <div className="flex gap-2">
+                      <div className="flex-none space-y-1">
+                        <Label htmlFor="bulk-upload-aws-account-id">
+                          Conta AWS
+                        </Label>
+                        <Input
+                          id="bulk-upload-aws-account-id"
+                          placeholder="123456789012"
+                          maxLength={12}
+                          value={awsAccountId}
+                          onChange={(event) =>
+                            setAwsAccountId(event.target.value.replace(/\D/g, '').slice(0, 12))
+                          }
+                          disabled={settingsLoading || isSavingSettings}
+                          className={
+                            awsAccountId && !isAccountIdValid
+                              ? 'border-destructive focus-visible:ring-destructive'
+                              : ''
+                          }
+                        />
+                        {awsAccountId && !isAccountIdValid && (
+                          <p className="text-xs text-destructive">
+                            Deve ter 12 dígitos.
+                          </p>
+                        )}
+                      </div>
+                      <div className="flex-1 space-y-1">
+                        <Label htmlFor="bulk-upload-lambda-role-name">
+                          Nome da role IAM
+                        </Label>
+                        <Input
+                          id="bulk-upload-lambda-role-name"
+                          placeholder="lms-bulk-upload-lambda-role"
+                          value={lambdaRoleName}
+                          onChange={(event) => setLambdaRoleName(event.target.value)}
+                          disabled={settingsLoading || isSavingSettings}
+                          className={
+                            lambdaRoleName && !isRoleNameValid
+                              ? 'border-destructive focus-visible:ring-destructive'
+                              : ''
+                          }
+                        />
+                        {lambdaRoleName && !isRoleNameValid && (
+                          <p className="text-xs text-destructive">
+                            Nome de role inválido.
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    {lambdaRoleArn ? (
+                      <p className="font-mono text-xs text-muted-foreground">
+                        {lambdaRoleArn}
+                      </p>
+                    ) : (
+                      <p className="text-xs text-muted-foreground">
+                        Setting: {BULK_UPLOAD_LAMBDA_ROLE_ARN_SLUG}
+                      </p>
+                    )}
                   </div>
 
                   <Label>Perfil de integração de storage</Label>
@@ -1240,8 +1409,8 @@ export default function LmsBulkUploadSessionsPage() {
                 { value: 'queued', label: 'Na fila' },
                 { value: 'uploading', label: 'Enviando' },
                 { value: 'cancelling', label: 'Cancelando' },
-                { value: 'received', label: 'Arquivo recebido' },
-                { value: 'done', label: 'Concluido' },
+                { value: 'done', label: 'Aguardando confirmação' },
+                { value: 'received', label: 'Concluido' },
                 { value: 'cancelled', label: 'Cancelado' },
                 { value: 'error', label: 'Erro' },
               ],
@@ -1384,6 +1553,16 @@ export default function LmsBulkUploadSessionsPage() {
                             </p>
                           </div>
                         </button>
+                      ) : row.status === 'lesson_not_found' ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="gap-1.5 text-xs"
+                          onClick={() => openManualLink(row.id)}
+                        >
+                          <Link2 className="h-3.5 w-3.5" />
+                          Vincular
+                        </Button>
                       ) : (
                         <span className="text-sm text-muted-foreground">-</span>
                       )}
@@ -1448,6 +1627,123 @@ export default function LmsBulkUploadSessionsPage() {
         }}
         pageSizeOptions={PAGE_SIZE_OPTIONS}
       />
+
+      <Sheet open={manualLinkOpen} onOpenChange={setManualLinkOpen}>
+        <ResizableSheetContent
+          sheetId="lms-bulk-upload-manual-link-sheet"
+          defaultWidth={560}
+          minWidth={400}
+          className="flex flex-col gap-0 overflow-hidden"
+        >
+          <SheetHeader className="border-b px-6 py-4">
+            <SheetTitle className="flex items-center gap-2">
+              <Link2 className="h-4 w-4" />
+              Vincular aula manualmente
+            </SheetTitle>
+            <SheetDescription>
+              Selecione o curso, módulo e aula para associar este vídeo e iniciar o processamento.
+            </SheetDescription>
+          </SheetHeader>
+
+          <ScrollArea className="flex-1">
+            <div className="space-y-6 p-6">
+              <div className="overflow-hidden rounded-xl border border-border/60 bg-black">
+                {manualLinkVideoLoading ? (
+                  <div className="flex h-40 items-center justify-center">
+                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  </div>
+                ) : manualLinkVideoUrl ? (
+                  <video
+                    src={manualLinkVideoUrl}
+                    controls
+                    className="w-full"
+                    style={{ maxHeight: 280 }}
+                  />
+                ) : (
+                  <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+                    Pré-visualização indisponível
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label>Curso</Label>
+                  <EntityPicker<{ id: number; title: string; code: string | null }>
+                    placeholder="Selecione um curso"
+                    options={coursesResult?.data ?? []}
+                    value={manualLinkCourseId}
+                    valueType="number"
+                    getOptionValue={(o) => o.id}
+                    getOptionLabel={(o) => o.title}
+                    getOptionDescription={(o) => o.code ?? ''}
+                    onChange={(value) => {
+                      setManualLinkCourseId(value as number | null);
+                      if (value) loadCourseStructure(value as number);
+                    }}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Módulo / Sessão</Label>
+                  <EntityPicker<{ id: number; title: string }>
+                    placeholder={
+                      !manualLinkCourseId
+                        ? 'Selecione um curso primeiro'
+                        : manualLinkStructureLoading
+                          ? 'Carregando...'
+                          : 'Selecione um módulo'
+                    }
+                    disabled={!manualLinkCourseId || manualLinkStructureLoading}
+                    options={manualLinkStructure?.sessions ?? []}
+                    value={manualLinkSessionId}
+                    valueType="number"
+                    getOptionValue={(o) => o.id}
+                    getOptionLabel={(o) => o.title}
+                    onChange={(value) => {
+                      setManualLinkSessionId(value as number | null);
+                      setManualLinkLessonId(null);
+                    }}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Aula</Label>
+                  <EntityPicker<{ id: number; title: string }>
+                    placeholder={
+                      !manualLinkSessionId ? 'Selecione um módulo primeiro' : 'Selecione uma aula'
+                    }
+                    disabled={!manualLinkSessionId}
+                    options={
+                      manualLinkStructure?.sessions.find((s) => s.id === manualLinkSessionId)?.lessons ?? []
+                    }
+                    value={manualLinkLessonId}
+                    valueType="number"
+                    getOptionValue={(o) => o.id}
+                    getOptionLabel={(o) => o.title}
+                    onChange={(value) => setManualLinkLessonId(value as number | null)}
+                  />
+                </div>
+              </div>
+            </div>
+          </ScrollArea>
+
+          <div className="border-t px-6 py-4">
+            <Button
+              className="w-full gap-2"
+              disabled={!manualLinkCourseId || !manualLinkSessionId || !manualLinkLessonId || isLinkingLesson}
+              onClick={confirmManualLink}
+            >
+              {isLinkingLesson ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Link2 className="h-4 w-4" />
+              )}
+              Confirmar vínculo e iniciar processamento
+            </Button>
+          </div>
+        </ResizableSheetContent>
+      </Sheet>
     </Page>
   );
 }

package/hedhog/frontend/app/courses/[id]/page.tsx.ejs

@@ -9,14 +9,16 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from '@/components/ui/resizable';
-import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useIsMutating, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Menu, RefreshCw } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useRouter, useSearchParams } from 'next/navigation';
 
+import { useLmsRealtimeRefresh } from '../../_lib/hooks/use-lms-realtime-refresh';
 import { ConfirmDialog } from './structure/_components/confirm-dialog';
 import { CourseTreePanel } from './structure/_components/course-tree-panel';
 import { CourseTreeSkeleton } from './structure/_components/course-tree-skeleton';
@@ -37,7 +39,6 @@ import {
   usePasteSessionsMutation,
 } from './structure/_data/use-course-structure-mutations';
 import { useCourseStructureQuery } from './structure/_data/use-course-structure-query';
-import { useLmsRealtimeRefresh } from '../../_lib/hooks/use-lms-realtime-refresh';
 
 interface Props {
   params: Promise<{ id: string }>;
@@ -60,6 +61,8 @@ export default function CourseStructurePage({ params }: Props) {
   const isMobile = useIsMobile();
   const { request } = useApp();
   const queryClient = useQueryClient();
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
   const { data: courseSummary } = useQuery<ApiCourseSummary>({
     queryKey: ['lms-course-detail', id],
@@ -85,6 +88,10 @@ export default function CourseStructurePage({ params }: Props) {
 
   const setStructureFromApi = useStructureStore((s) => s.setStructureFromApi);
   const setCourseId = useStructureStore((s) => s.setCourseId);
+  const selectItem = useStructureStore((s) => s.selectItem);
+
+  const restoredFromUrl = useRef(false);
+  const suppressNextSyncRef = useRef(false);
 
   useEffect(() => {
     setCourseId(id);
@@ -126,6 +133,31 @@ export default function CourseStructurePage({ params }: Props) {
         sessions: apiSessions,
         lessons: apiLessons,
       });
+
+      if (!restoredFromUrl.current) {
+        restoredFromUrl.current = true;
+        const sel = searchParams.get('sel');
+        const type = searchParams.get('type') as
+          | 'course'
+          | 'session'
+          | 'lesson'
+          | null;
+        if (
+          sel &&
+          (type === 'course' || type === 'session' || type === 'lesson')
+        ) {
+          const exists =
+            type === 'course'
+              ? mergedCourse?.id === sel
+              : type === 'session'
+                ? apiSessions.some((s) => s.id === sel)
+                : apiLessons.some((l) => l.id === sel);
+          if (exists) {
+            suppressNextSyncRef.current = true;
+            selectItem(sel, type);
+          }
+        }
+      }
     }
   }, [
     apiCourse,
@@ -159,6 +191,33 @@ export default function CourseStructurePage({ params }: Props) {
   const copiedType = useStructureStore((s) => s.copiedType);
   const copiedIds = useStructureStore((s) => s.copiedIds);
 
+  // ── URL sync: selection → URL ──────────────────────────────────────────────
+  useEffect(() => {
+    if (!restoredFromUrl.current) return;
+    if (suppressNextSyncRef.current) {
+      suppressNextSyncRef.current = false;
+      return;
+    }
+    const params = new URLSearchParams(searchParams.toString());
+    if (activeItemId && activeItemType) {
+      params.set('sel', activeItemId);
+      params.set('type', activeItemType);
+    }
+    params.delete('tab');
+    router.replace(`?${params.toString()}`, { scroll: false });
+  }, [activeItemId, activeItemType]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleTabChange = useCallback(
+    (tab: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('tab', tab);
+      router.replace(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams]
+  );
+
+  const defaultTab = searchParams.get('tab') ?? undefined;
+
   useCourseStructureShortcuts({
     searchRef,
     detailPanelRef,
@@ -277,7 +336,10 @@ export default function CourseStructurePage({ params }: Props) {
                 className="flex flex-col h-full min-h-0"
               >
                 <div className="h-full min-h-0">
-                  <DetailPanel />
+                  <DetailPanel
+                    defaultTab={defaultTab}
+                    onTabChange={handleTabChange}
+                  />
                 </div>
               </div>
             </ResizablePanel>
@@ -305,7 +367,10 @@ export default function CourseStructurePage({ params }: Props) {
             className="flex-1 min-h-0 border rounded-lg overflow-hidden"
           >
             <div className="h-full min-h-0">
-              <DetailPanel />
+              <DetailPanel
+                defaultTab={defaultTab}
+                onTabChange={handleTabChange}
+              />
             </div>
           </div>