feat: HLS streaming, transcripts, agent course generation & landing-page course previews (#663)

New features: - HLS video encoding/streaming (hls routes, hls-encoder) and a media transcripts pipeline (transcripts route + media-transcript queries) - AI assistant chat vs. run model: agent-course-generation worker/queue, run-monitor pane, chat-changes card, content ask-ai bar - Per-theme course-page previews across org landing-page themes (bold, classic, corporate, editorial, etc.) with a shared course token/component set - View-as-student mode and login-link / link-invite invite flows Refactor: - Extract packages/core consolidating config (env, storage, dashboard-url), services and utils previously duplicated under apps/api/src/config - Remove legacy agent service modules (chat-tools, chat-context, context-window, document, fetch-url, lesson-content) - Relax Cross-Origin-Resource-Policy to allow cross-origin media embedding - Add format script to tenant-router so turbo run format covers it
2026-06-07 18:43:05 +01:00
parent a2e70779a0
commit d5b07d356e
496 changed files with 19050 additions and 8312 deletions
@@ -13,14 +13,21 @@
  import { courseApi } from '$features/course/api';
  import ContentCreateModal from '$features/course/components/content/content-create-modal.svelte';
  import CourseCompletionModal from '$features/course/components/ceritficate/course-completion-modal.svelte';
-  import { aiAssistantPanelDefinition } from '$features/ai-assistant';
+  import { aiAssistantPanelDefinition, ContentAskAiBar, AI_ASSISTANT_PANEL_ID } from '$features/ai-assistant';
+  import {
+    getContentAskAiBarWidthClass,
+    isCourseContentLockedForStudent
+  } from '$features/ai-assistant/utils/content-ask-ai-bar';
  import { initialChatPrompt, openAiAssistant } from '$features/ai-assistant/utils/store';
  import { sidePanel, SidePanelRail } from '$features/side-panel';
  import { transcriptPanelDefinition } from '$features/course/components/lesson/video/transcript-panel-definition';
  import { get } from 'svelte/store';
+  import { page } from '$app/state';
  import { profile } from '$lib/utils/store/user';
  import { isOrgAdmin } from '$lib/utils/store/org';
+  import { isOrgStudent } from '$lib/utils/store/app';
  import { t } from '$lib/utils/functions/translations';
+  import { ContentType } from '@cio/utils/constants/content';
  import type { CourseMember } from '$features/course/utils/types';
  import {
    COURSE_SIDEBAR_DEFAULT_WIDTH,
@@ -79,6 +86,28 @@

  const isExercisePage = $derived(!!data.exerciseId);

+  const lessonId = $derived(page.params.lessonId as string | undefined);
+  const exerciseId = $derived((page.params.exerciseId as string | undefined) ?? data.exerciseId);
+  const isLessonOrExercisePage = $derived(Boolean(lessonId || exerciseId));
+  const isLessonEditMode = $derived(page.url.searchParams.get('mode') === 'edit');
+
+  const contentAskAiWidthClass = $derived(getContentAskAiBarWidthClass({ lessonId, isLessonEditMode }));
+
+  const isContentLockedForStudent = $derived(
+    isCourseContentLockedForStudent(
+      courseApi.course,
+      lessonId ?? exerciseId,
+      lessonId ? ContentType.Lesson : exerciseId ? ContentType.Exercise : null
+    )
+  );
+
+  const showContentAskAiBar = $derived(
+    isCourseReady &&
+      isLessonOrExercisePage &&
+      !($isOrgStudent && isContentLockedForStudent) &&
+      sidePanel.activePanelId !== AI_ASSISTANT_PANEL_ID
+  );
+
  function clampSidebarWidth(width: number) {
    return Math.min(COURSE_SIDEBAR_MAX_WIDTH, Math.max(COURSE_SIDEBAR_MIN_WIDTH, width));
  }
@@ -188,6 +217,10 @@
      {/if}

      {@render children?.()}
+
+      {#if showContentAskAiBar}
+        <ContentAskAiBar class={contentAskAiWidthClass} />
+      {/if}
    {/if}
  </Sidebar.Inset>

@@ -1,9 +1,23 @@
 <script lang="ts">
  import { fly } from 'svelte/transition';
+  import type { Component } from 'svelte';
  import { goto } from '$app/navigation';
  import { resolve } from '$app/paths';
  import { courseApi } from '$features/course/api';
  import type { Course } from '$features/course/utils/types';
+  import { setLandingPageEditContext, type LandingSectionKey } from '@cio/ui/custom/org-landing-page';
+  import {
+    HeaderIcon,
+    GoalIcon,
+    LessonIcon,
+    ExerciseIcon,
+    CertificateIcon,
+    MoneyIcon,
+    ReviewIcon,
+    PersonIcon,
+    ContentIcon
+  } from '@cio/ui/custom/moving-icons';
+  import { t } from '$lib/utils/functions/translations';

  import { CourseLandingPage } from '$features/ui';
  import Editor from '$features/ui/course-landing-page/components/editor/editor.svelte';
@@ -14,6 +28,27 @@
  const courseId = $derived(data.courseId);

  let sidebarOpen = $state(true);
+  let selectedSectionKey = $state<LandingSectionKey | null>(null);
+
+  const sectionIcons: Partial<Record<LandingSectionKey, Component>> = {
+    header: HeaderIcon,
+    requirement: ExerciseIcon,
+    description: LessonIcon,
+    goals: GoalIcon,
+    certificate: CertificateIcon,
+    curriculum: ContentIcon,
+    chips: ContentIcon,
+    instructor: PersonIcon,
+    reviews: ReviewIcon,
+    pricing: MoneyIcon
+  };
+
+  setLandingPageEditContext({
+    selectedKey: () => selectedSectionKey,
+    selectKey: (key) => (selectedSectionKey = key),
+    labelFor: (key) => t.get(`course.navItem.landing_page.editor.title.${key}` as never) || key,
+    iconFor: (key) => sectionIcons[key] ?? HeaderIcon
+  });

  function syncCourseStore(_courseData: Course) {
    if (courseApi.course) {
@@ -34,7 +69,13 @@
  >
    <Sidebar.Provider bind:open={sidebarOpen} style="--sidebar-width: 360px; --sidebar-width-icon: 4rem">
      <Sidebar.Root side="left" collapsible="icon" class="h-full">
-        <Editor {courseId} bind:course={courseApi.course} {syncCourseStore} onClose={handleClose} />
+        <Editor
+          {courseId}
+          bind:course={courseApi.course}
+          bind:selectedSectionKey
+          {syncCourseStore}
+          onClose={handleClose}
+        />
      </Sidebar.Root>
      <Sidebar.Inset class="relative h-screen! overflow-y-auto">
        <div class="absolute top-2 left-2 z-60">
@@ -44,11 +44,11 @@
    }
  };

-  const downloadPDF = () => {
+  const downloadPDF = async () => {
    if (!data.marksData) return;
    isDownloading = true;
    try {
-      generateMarksPDF(
+      await generateMarksPDF(
        data.marksData.students,
        exercises,
        data.marksData.studentMarksByExerciseId,
@@ -7,7 +7,7 @@
  import { page } from '$app/state';
  import { capturePosthogEvent } from '$lib/utils/services/posthog';
  import { globalStore } from '$lib/utils/store/app';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, isFreePlan } from '$lib/utils/store/org';
  import { authClient } from '$lib/utils/services/auth/client';
  import * as Field from '@cio/ui/base/field';
  import { Input } from '@cio/ui/base/input';
@@ -177,7 +177,9 @@
  <title>Join ClassroomIO</title>
 </svelte:head>

-<SenjaEmbed id="aa054658-1e15-4d00-8920-91f424326c4e" />
+{#if !$globalStore.isOrgSite || $isFreePlan}
+  <SenjaEmbed id="aa054658-1e15-4d00-8920-91f424326c4e" />
+{/if}

 {#if signupRestricted}
  <div
@@ -3,8 +3,8 @@
  import { currentOrg } from '$lib/utils/store/org';
  import { onMount } from 'svelte';
  import { afterNavigate } from '$app/navigation';
-  import { env } from '$env/dynamic/public';
  import { analytics } from '@cio/analytics/client';
+  import { getRequestBaseUrl } from '$lib/utils/services/api';
  import type { Snippet } from 'svelte';
  import type { AccountOrg } from '$features/app/types';

@@ -19,10 +19,11 @@
  let { children, data }: Props = $props();

  onMount(() => {
-    if (!env.PUBLIC_SERVER_URL) return;
+    const apiBaseUrl = getRequestBaseUrl();
+    if (!apiBaseUrl) return;

    analytics.init({
-      endpoint: `${env.PUBLIC_SERVER_URL.replace(/\/$/, '')}/dash/track`,
+      endpoint: `${apiBaseUrl.replace(/\/$/, '')}/dash/track`,
      orgId: data.org?.id ?? undefined
    });
    analytics.pageView({ kind: 'landing' });
@@ -3,7 +3,7 @@ import type { CourseBySlugWithOrg, GetCourseBySlugRequest } from '$features/cour
 import type { GetOrganizationRequest } from '$features/org/utils/types';
 import { classroomio, type InferResponseType } from '$lib/utils/services/api';
 import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
-import { redirect } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';

 type GetCourseBySlugSuccess = Extract<InferResponseType<GetCourseBySlugRequest>, { success: true }>;
 type GetOrganizationSuccess = Extract<InferResponseType<GetOrganizationRequest>, { success: true }>;
@@ -37,12 +37,7 @@ export const load = async ({ params = { slug: '' }, parent, url }) => {
  if (!courseResult.ok || !courseResult.body.data) {
    console.error('Failed to fetch course:', courseResult);

-    return {
-      slug: params.slug,
-      course: null,
-      org: parentOrg ?? null,
-      pageMetaTags: null
-    };
+    throw error(404, 'Course not found');
  }

  const course = courseResult.body.data as CourseBySlugWithOrg;
@@ -1,66 +1,12 @@
 <script lang="ts">
-  import { resolve } from '$app/paths';
  import { page } from '$app/state';
-  import { onMount } from 'svelte';

-  import { basePath } from '$lib/utils/store/app';
-  import { t } from '$lib/utils/functions/translations';
-  import { user } from '$lib/utils/store/user';
  import { CourseLandingPage } from '$features/ui';
  import { PoweredBy } from '$features/ui';
-  import {
-    importThemeNavHero,
-    normalizeLandingPageSettings,
-    themeHeaderShellClass,
-    themeStyle,
-    themeRendersNavInsideHero
-  } from '$features/org/utils/landing-page';
-
-  import { OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
-  import type { Component } from 'svelte';

  let { data } = $props();

-  const landingSettings = $derived(normalizeLandingPageSettings(data.org?.landingpage));
-
-  const authAction = $derived(
-    $user.isLoggedIn
-      ? {
-          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
-          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
-        }
-      : {
-          label: t.get('navigation.login'),
-          href: '/login'
-        }
-  );
-
-  const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
-  const shellStyle = $derived(themeStyle(landingSettings.theme));
-  const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
-
-  const courseHero = $derived.by(() => {
-    if (!data.course) {
-      return landingSettings.hero;
-    }
-
-    const enrollmentsOpen = data.course.metadata?.allowNewStudent === true;
-
-    return {
-      ...landingSettings.hero,
-      heading: data.course.title,
-      subheading: data.course.description || landingSettings.hero.subheading,
-      primaryAction: {
-        label: t.get('course.navItem.landing_page.start_course'),
-        href: resolve(`/course/${data.course.slug}/enroll`, {}),
-        disabled: !enrollmentsOpen
-      },
-      image: data.course.logo || landingSettings.hero.image
-    };
-  });
-
  const orgName = $derived(data.org?.name ?? data.course?.org?.name ?? 'ClassroomIO');
-  const logoUrl = $derived(data.org?.avatarUrl ?? undefined);

  const courseJsonLd = $derived.by(() => {
    if (!data.course) return null;
@@ -80,17 +26,6 @@

    return JSON.stringify(schema).replace(/</g, '\\u003c');
  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let NavComponent = $state<Component<any> | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let HeroComponent = $state<Component<any> | null>(null);
-
-  onMount(async () => {
-    const { NavComponent: nav, HeroComponent: hero } = await importThemeNavHero(landingSettings.theme);
-    NavComponent = nav;
-    HeroComponent = hero;
-  });
 </script>

 <svelte:head>
@@ -101,23 +36,5 @@

 {#if data.course}
  <PoweredBy />
-
-  <main class={shellClass} style={shellStyle}>
-    {#if NavComponent && HeroComponent}
-      {#if navInsideHero}
-        <HeroComponent hero={courseHero} {orgName}>
-          {#snippet navigation()}
-            <NavComponent {orgName} {logoUrl} navItems={landingSettings.navItems} {authAction} />
-          {/snippet}
-        </HeroComponent>
-      {:else}
-        <NavComponent {orgName} {logoUrl} navItems={landingSettings.navItems} {authAction} />
-        <HeroComponent hero={courseHero} {orgName} />
-      {/if}
-    {/if}
-
-    <CourseLandingPage courseData={data.course} />
-
-    <OrgLandingPageFooter {orgName} {logoUrl} footer={landingSettings.footer} variant={landingSettings.theme} />
-  </main>
+  <CourseLandingPage courseData={data.course} org={data.org} themeComponent={data.themeComponent} />
 {/if}
@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+import { normalizeLandingPageSettings, importCourseLandingPageTheme } from '$features/org/utils/landing-page';
+
+// `data` is the return value of the sibling +page.server.ts — layout data comes via parent().
+export const load = async ({ data }) => {
+  if (!data.course) {
+    return { ...data, themeComponent: null as Component | null };
+  }
+
+  const org = data.org ?? null;
+  const settings = normalizeLandingPageSettings(org?.landingpage);
+  const mod = await importCourseLandingPageTheme(settings.theme);
+
+  return { ...data, themeComponent: mod.default as Component };
+};
@@ -25,10 +25,6 @@
          data.course?.status === 'ACTIVE' &&
          Boolean(data.course?.isPublished)
  );
-  $inspect(data.requiresPaymentOrInvite);
-  $inspect(canJoinCourse);
-  $inspect(data);
-  $inspect('loading', loading);

  function getBlockedMessage(): string {
    if (data.requiresPaymentOrInvite) {
@@ -9,6 +9,30 @@
  } from '@cio/ui/custom/public-course';
  import { getExerciseQuestionLabels } from '$features/course/components/exercise/question-labels';
  import { t } from '$lib/utils/functions/translations';
+  import { classroomio } from '$lib/utils/services/api';
+
+  /** Build a fully-qualified HLS URL from the relative `/hls/{assetId}/...` shape. */
+  function resolveHlsUrl(rawUrl: string): string {
+    if (/^https?:\/\//i.test(rawUrl)) return rawUrl;
+    const match = rawUrl.match(/^\/?hls\/([^/]+)\/(.+)$/);
+    if (!match) return rawUrl;
+
+    const [, assetId, rest] = match;
+    const built = classroomio.hls[':assetId']['*'].$url({ param: { assetId } });
+    return built.toString().replace(/\/\*$/, '') + '/' + rest;
+  }
+
+  /**
+   * Mint the public HLS cookie via the org-site endpoint. The server
+   * derives the actual asset id from the public course tree, so an
+   * anonymous learner can't request a cookie for any asset they don't
+   * already have access to via this lesson URL.
+   */
+  async function mintPublicHlsCookie(courseSlug: string, itemSlug: string): Promise<void> {
+    await classroomio['org-site'].course[':courseSlug'].item[':itemSlug']['hls-cookie'].$post({
+      param: { courseSlug, itemSlug }
+    });
+  }

  const exerciseLabels = $derived(getExerciseQuestionLabels());

@@ -62,6 +86,10 @@
    <PublicCourse.PublicLessonView
      lesson={lessonView}
      videoCaptionsLabel={$t('course.navItem.lessons.materials.tabs.video.transcript.captions_label')}
+      {resolveHlsUrl}
+      onBeforeHlsLoad={lessonView.video?.hls ? () => mintPublicHlsCookie(data.tree.course.slug, itemSlug) : undefined}
+      playbackErrorLabel={$t('course.navItem.lessons.materials.tabs.video.playback_error')}
+      playbackReloadLabel={$t('course.navItem.lessons.materials.tabs.video.playback_reload')}
      {callout}
    />
  {:else if exerciseView}
@@ -32,11 +32,15 @@ export const load = async ({ parent, url }) => {
  const normalizedTags = normalizeTagsParam(url.searchParams.get('tags'));
  const normalizedTagsQuery = normalizedTags.length > 0 ? normalizedTags.join(',') : undefined;

+  const requestedPage = Number(url.searchParams.get('page'));
+  const currentPage = Number.isInteger(requestedPage) && requestedPage > 0 ? requestedPage : 1;
+
  const [coursesResult, tagsResult] = await Promise.all([
    safeServerApi<GetPublicCoursesSuccess>(() =>
      classroomio.organization.courses.public.$get({
        query: {
          siteName,
+          page: String(currentPage),
          ...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {})
        }
      })
@@ -49,7 +53,9 @@ export const load = async ({ parent, url }) => {
      })
    )
  ]);
-  const courseData = coursesResult.ok ? coursesResult.body.data : { courses: [], hasMoreCourses: false };
+  const courseData = coursesResult.ok
+    ? coursesResult.body.data
+    : { courses: [], hasMoreCourses: false, total: 0, page: currentPage, limit: 0, totalPages: 0 };
  const canonicalUrl = new URL(url.pathname, url.origin).href;
  const orgTitle = `${org.name} – All Courses`;
  const orgDescription = `Browse all courses offered by ${org.name}`;
@@ -81,9 +87,14 @@ export const load = async ({ parent, url }) => {
  return {
    org,
    courses: courseData.courses,
-    hasMoreCourses: courseData.hasMoreCourses,
    tagGroups: tagsResult.ok ? tagsResult.body.data : [],
    activeTags: normalizedTags,
+    pagination: {
+      page: courseData.page,
+      perPage: courseData.limit,
+      total: courseData.total,
+      totalPages: courseData.totalPages
+    },
    pageMetaTags
  };
 };
@@ -2,8 +2,6 @@
  import { goto } from '$app/navigation';
  import { page } from '$app/state';
  import { resolve } from '$app/paths';
-  import { onMount } from 'svelte';
-  import type { Component } from 'svelte';
  import { SvelteSet, SvelteURLSearchParams } from 'svelte/reactivity';

  import { t } from '$lib/utils/functions/translations';
@@ -13,10 +11,7 @@
  import { PoweredBy } from '$features/ui';
  import LibraryBigIcon from '@lucide/svelte/icons/library-big';
  import {
-    importThemeCourseCard,
-    importThemeNavHero,
    normalizeLandingPageSettings,
-    themeCourseGridClass,
    themeHeaderShellClass,
    themeStyle,
    themeRendersNavInsideHero
@@ -27,6 +22,7 @@
  import { Checkbox } from '@cio/ui/base/checkbox';
  import { Empty } from '@cio/ui/custom/empty';
  import { Separator } from '@cio/ui/base/separator';
+  import * as Pagination from '@cio/ui/base/pagination';

  let { data } = $props();

@@ -49,24 +45,11 @@
  const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
  const shellStyle = $derived(themeStyle(landingSettings.theme));
  const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
-  const courseGridClass = $derived(themeCourseGridClass(landingSettings.theme));

-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let NavComponent = $state<Component<any> | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let HeroComponent = $state<Component<any> | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let CourseCardComponent = $state<Component<any> | null>(null);
-
-  onMount(async () => {
-    const [navHero, cardComponent] = await Promise.all([
-      importThemeNavHero(landingSettings.theme),
-      importThemeCourseCard(landingSettings.theme)
-    ]);
-    NavComponent = navHero.NavComponent;
-    HeroComponent = navHero.HeroComponent;
-    CourseCardComponent = cardComponent;
-  });
+  const NavComponent = $derived(data.theme.Nav);
+  const HeroComponent = $derived(data.theme.Hero);
+  const CourseCardComponent = $derived(data.theme.CourseCard);
+  const courseGridClass = $derived(data.theme.coursesGridClass);

  const heroProps = $derived({
    ...landingSettings.hero,
@@ -83,6 +66,8 @@
      params.delete('tags');
    }

+    params.delete('page');
+
    const query = params.toString();
    const suffix = query ? `?${query}` : '';

@@ -93,6 +78,25 @@
    });
  }

+  async function goToPage(nextPage: number) {
+    if (nextPage === data.pagination.page) {
+      return;
+    }
+
+    const params = new SvelteURLSearchParams(page.url.searchParams);
+
+    if (nextPage > 1) {
+      params.set('page', String(nextPage));
+    } else {
+      params.delete('page');
+    }
+
+    const query = params.toString();
+    const suffix = query ? `?${query}` : '';
+
+    await goto(resolve(`/courses${suffix}`, {}), { invalidateAll: true });
+  }
+
  function toggleTag(tagSlug: string, checked: boolean) {
    const next = new SvelteSet(selectedTags);
    if (checked) {
@@ -142,27 +146,25 @@
 <PoweredBy />

 <main class={shellClass} style={shellStyle}>
-  {#if NavComponent && HeroComponent}
-    {#if navInsideHero}
-      <HeroComponent hero={heroProps} orgName={data.org.name}>
-        {#snippet navigation()}
-          <NavComponent
-            orgName={data.org.name}
-            logoUrl={data.org.avatarUrl ?? undefined}
-            navItems={landingSettings.navItems}
-            {authAction}
-          />
-        {/snippet}
-      </HeroComponent>
-    {:else}
-      <NavComponent
-        orgName={data.org.name}
-        logoUrl={data.org.avatarUrl ?? undefined}
-        navItems={landingSettings.navItems}
-        {authAction}
-      />
-      <HeroComponent hero={heroProps} orgName={data.org.name} />
-    {/if}
+  {#if navInsideHero}
+    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false}>
+      {#snippet navigation()}
+        <NavComponent
+          orgName={data.org.name}
+          logoUrl={data.org.avatarUrl ?? undefined}
+          navItems={landingSettings.navItems}
+          {authAction}
+        />
+      {/snippet}
+    </HeroComponent>
+  {:else}
+    <NavComponent
+      orgName={data.org.name}
+      logoUrl={data.org.avatarUrl ?? undefined}
+      navItems={landingSettings.navItems}
+      {authAction}
+    />
+    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} />
  {/if}

  <section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
@@ -172,58 +174,60 @@
      </LandingButton>
    </div>

-    <div class="grid gap-8 lg:grid-cols-[280px_minmax(0,1fr)]">
+    <div class="grid grid-cols-[minmax(0,9.5rem)_minmax(0,1fr)] gap-4 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8">
      <aside
-        class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] space-y-4 rounded-lg border p-4"
+        class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] sticky top-4 flex max-h-[calc(100dvh-2rem)] flex-col self-start rounded-lg border"
      >
-        <div>
+        <div class="p-4 pb-3">
          <h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
          <p class="ui:text-[var(--landing-fg-muted)] text-xs">{$t('public_courses.filters.help')}</p>
        </div>

        <Separator class="ui:bg-[var(--landing-border)]" />

-        {#if displayTagGroups.length === 0}
-          <p class="ui:text-[var(--landing-fg-muted)] text-sm">{$t('public_courses.filters.empty')}</p>
-        {:else}
-          <div class="space-y-5">
-            {#each displayTagGroups as group (group.id)}
-              <div class="space-y-2">
-                <div class="space-y-1">
-                  <h3 class="text-sm font-semibold">{group.name}</h3>
-                  {#if group.description}
-                    <p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
-                  {/if}
-                </div>
-
+        <div class="flex-1 overflow-y-auto p-4">
+          {#if displayTagGroups.length === 0}
+            <p class="ui:text-[var(--landing-fg-muted)] text-sm">{$t('public_courses.filters.empty')}</p>
+          {:else}
+            <div class="space-y-5">
+              {#each displayTagGroups as group (group.id)}
                <div class="space-y-2">
-                  {#each group.tags as tag (tag.id)}
-                    <label
-                      class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
-                    >
-                      <div class="flex items-center gap-2">
-                        <Checkbox
-                          checked={isTagSelected(tag.slug)}
-                          onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
-                        />
-                        <span
-                          class="inline-block h-2.5 w-2.5 rounded-full border"
-                          style={`background-color: ${tag.color}`}
-                          aria-hidden="true"
-                        ></span>
-                        <span class="text-sm">{tag.name}</span>
-                      </div>
-                      <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
-                    </label>
-                  {/each}
+                  <div class="space-y-1">
+                    <h3 class="text-sm font-semibold">{group.name}</h3>
+                    {#if group.description}
+                      <p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
+                    {/if}
+                  </div>
+
+                  <div class="space-y-2">
+                    {#each group.tags as tag (tag.id)}
+                      <label
+                        class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
+                      >
+                        <div class="flex items-center gap-2">
+                          <Checkbox
+                            checked={isTagSelected(tag.slug)}
+                            onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
+                          />
+                          <span
+                            class="inline-block h-2.5 w-2.5 rounded-full border"
+                            style={`background-color: ${tag.color}`}
+                            aria-hidden="true"
+                          ></span>
+                          <span class="text-sm">{tag.name}</span>
+                        </div>
+                        <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
+                      </label>
+                    {/each}
+                  </div>
                </div>
-              </div>
-            {/each}
-          </div>
-        {/if}
+              {/each}
+            </div>
+          {/if}
+        </div>
      </aside>

-      <div class="space-y-4">
+      <div class="ui:@container space-y-4">
        {#if data.courses.length === 0}
          <Empty
            icon={LibraryBigIcon}
@@ -231,12 +235,46 @@
            description={$t('public_courses.empty.description')}
            variant="page"
          />
-        {:else if CourseCardComponent}
+        {:else}
          <div class={courseGridClass}>
            {#each data.courses as course, index (course.id)}
              <CourseCardComponent {course} {index} />
            {/each}
          </div>
+
+          {#if data.pagination.totalPages > 1}
+            <Pagination.Root
+              count={data.pagination.total}
+              perPage={data.pagination.perPage}
+              page={data.pagination.page}
+              onPageChange={goToPage}
+              class="mt-8"
+            >
+              {#snippet children({ pages, currentPage })}
+                <Pagination.Content>
+                  <Pagination.Item>
+                    <Pagination.PrevButton />
+                  </Pagination.Item>
+                  {#each pages as pageItem (pageItem.key)}
+                    {#if pageItem.type === 'ellipsis'}
+                      <Pagination.Item>
+                        <Pagination.Ellipsis />
+                      </Pagination.Item>
+                    {:else}
+                      <Pagination.Item>
+                        <Pagination.Link page={pageItem} isActive={currentPage === pageItem.value}>
+                          {pageItem.value}
+                        </Pagination.Link>
+                      </Pagination.Item>
+                    {/if}
+                  {/each}
+                  <Pagination.Item>
+                    <Pagination.NextButton />
+                  </Pagination.Item>
+                </Pagination.Content>
+              {/snippet}
+            </Pagination.Root>
+          {/if}
        {/if}
      </div>
    </div>
@@ -0,0 +1,16 @@
+import { normalizeLandingPageSettings, importThemeBundle } from '$features/org/utils/landing-page';
+
+export const load = async ({ data }) => {
+  const settings = normalizeLandingPageSettings(data.org?.landingpage);
+  const bundle = await importThemeBundle(settings.theme);
+
+  return {
+    ...data,
+    theme: {
+      Nav: bundle.nav,
+      Hero: bundle.hero,
+      CourseCard: bundle.courseCard,
+      coursesGridClass: bundle.coursesGridClass
+    }
+  };
+};
@@ -23,11 +23,6 @@
  onMount(() => {
    console.log('Layout', data);

-    const loadingIndicator = document.getElementById('app-loading-indicator');
-    if (loadingIndicator) {
-      loadingIndicator.style.display = 'none';
-    }
-
    const sessionUser = data?.locals?.user;
    setupCloudAnalytics(
      sessionUser ? { id: sessionUser.id, email: sessionUser.email, name: sessionUser.name } : undefined
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { onMount } from 'svelte';
  import { resolve } from '$app/paths';
-  import type { Component } from 'svelte';

  import { appInitApi } from '$features/app/init.svelte';
  import { Spinner } from '@cio/ui/base/spinner';
@@ -9,24 +8,19 @@
  import FrownIcon from '@lucide/svelte/icons/frown';
  import { Empty } from '@cio/ui/custom/empty';
  import { SimpleLogoNav } from '@cio/ui/custom/simple-logo-nav';
-  import {
-    buildOrgLandingPageProps,
-    importThemeComponent,
-    normalizeLandingPageSettings
-  } from '$features/org/utils/landing-page';
+  import { buildOrgLandingPageProps, normalizeLandingPageSettings } from '$features/org/utils/landing-page';
  import { basePath } from '$lib/utils/store/app';
  import { t } from '$lib/utils/functions/translations';
  import { user } from '$lib/utils/store/user';

  let { data } = $props();

-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let ThemeComponent = $state<Component<any> | null>(null);
-
  const hasSetupError = $derived(!appInitApi.loading && !!appInitApi.error);

  const pageTitle = $derived(
-    data.isOrgSite && data.org ? data.org.name : "ClassroomIO - The Course Platform That's Actually Easy To Use"
+    data.isOrgSite && data.org
+      ? data.org.name
+      : 'ClassroomIO - The Most Customizable Platform for Customer, Partner, and Employee Education'
  );

  const authAction = $derived(
@@ -53,7 +47,7 @@
    );
  });

-  onMount(async () => {
+  onMount(() => {
    if (!data.isOrgSite || !data.org) {
      if (!appInitApi.loading) {
        appInitApi.setupApp(data.locals, {
@@ -61,13 +55,7 @@
          orgSiteName: data.orgSiteName
        });
      }
-
-      return;
    }
-
-    const settings = normalizeLandingPageSettings(data.org.landingpage);
-    const mod = await importThemeComponent(settings.theme);
-    ThemeComponent = mod.default;
  });
 </script>

@@ -76,10 +64,8 @@
 </svelte:head>

 {#if data.isOrgSite && data.org}
-  {#if ThemeComponent && landingPageProps}
-    <ThemeComponent {...landingPageProps} />
-  {:else}
-    <!-- Theme loading -->
+  {#if data.ThemeComponent && landingPageProps}
+    <svelte:component this={data.ThemeComponent} {...landingPageProps} />
  {/if}
 {:else if hasSetupError}
  <Empty
@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+import { normalizeLandingPageSettings, importThemeComponent } from '$features/org/utils/landing-page';
+
+// Universal load (runs on server AND client) so the theme component is resolved
+// before the first render. This eliminates the blank flash between hydration and
+// the onMount-based dynamic import the page previously used.
+export const load = async ({ parent, data }) => {
+  const layoutData = await parent();
+
+  if (!layoutData.isOrgSite || !layoutData.org) {
+    return { ...data, ThemeComponent: null as Component | null };
+  }
+
+  const settings = normalizeLandingPageSettings(layoutData.org.landingpage);
+  const mod = await importThemeComponent(settings.theme);
+
+  return { ...data, ThemeComponent: mod.default as Component };
+};
@@ -0,0 +1,34 @@
+import { getOrgBySiteName } from '$features/org/api/org.server';
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
+import { error } from '@sveltejs/kit';
+
+type PreviewLinkInviteRequest = (typeof classroomio.invite)['link'][':token']['preview']['$get'];
+type PreviewLinkInviteSuccess = Extract<InferResponseType<PreviewLinkInviteRequest>, { success: true }>;
+
+export const load = async ({ params = { hash: '' } }) => {
+  try {
+    const token = decodeURIComponent(params.hash);
+    const result = await safeServerApi<PreviewLinkInviteSuccess>(() =>
+      classroomio.invite.link[':token'].preview.$get({ param: { token } }, getApiKeyHeaders())
+    );
+
+    if (!result.ok || !result.body.data) {
+      throw new Error('Invalid link invite payload');
+    }
+
+    const apiKeyHeaders = getApiKeyHeaders();
+    const currentOrg = result.body.data.organization.siteName
+      ? await getOrgBySiteName(result.body.data.organization.siteName, apiKeyHeaders)
+      : null;
+
+    return {
+      token,
+      invite: result.body.data,
+      currentOrg
+    };
+  } catch (e) {
+    console.error('Error decoding link invite params.hash', e);
+    throw error(404, 'Not found');
+  }
+};
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { onMount } from 'svelte';
+  import { Button } from '@cio/ui/base/button';
+  import { AuthUI } from '$features/ui';
+  import { currentOrg, mergeAccountOrgFromServer } from '$lib/utils/store/org';
+  import { setTheme } from '$lib/utils/functions/theme';
+  import { classroomio } from '$lib/utils/services/api';
+  import { profile } from '$lib/utils/store/user';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { page } from '$app/state';
+  import { t } from '$lib/utils/functions/translations';
+  import { ROLE } from '@cio/utils/constants';
+
+  let { data } = $props();
+
+  let loading = $state(false);
+
+  const isDisabled = $derived(data.invite?.invite?.isRevoked === true);
+  const canJoin = $derived(!isDisabled);
+
+  const orgSlug = $derived(data.currentOrg?.siteName ?? data.invite.organization.siteName ?? '');
+  const orgName = $derived(data.invite?.organization?.name ?? '');
+  const inviteRoleId = $derived(data.invite?.invite?.roleId ?? 0);
+
+  function buildAuthParams(pathname: string): string {
+    const parts: string[] = [];
+    if (pathname) parts.push(`redirect=${encodeURIComponent(pathname)}`);
+    return parts.join('&');
+  }
+
+  const loginParams = $derived(buildAuthParams(page.url?.pathname || ''));
+
+  async function handleSubmit() {
+    if (isDisabled) {
+      snackbar.error(t.get('invite.link.disabled'));
+      return;
+    }
+
+    if (!$profile.id || !$profile.email) {
+      const qs = buildAuthParams(page.url?.pathname || '');
+      return goto(resolve(`/signup?${qs}`, {}));
+    }
+
+    loading = true;
+
+    try {
+      const response = await classroomio.invite.link[':token'].accept.$post({
+        param: { token: data.token }
+      });
+      const result = await response.json();
+
+      if (!result.success || !result.data) {
+        const failed = result as { error?: string; message?: string };
+        snackbar.error(failed.error ?? failed.message ?? t.get('invite.link.join_failed'));
+        return;
+      }
+
+      snackbar.success('invite.link.joined');
+
+      window.location.href = result.data.redirectTo || '/org';
+    } catch (error) {
+      console.error('Failed to accept link invite', error);
+      snackbar.error('invite.link.join_failed');
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleNavigateAfterJoined() {
+    if (inviteRoleId === ROLE.STUDENT) {
+      return goto(resolve('/lms', {}));
+    }
+
+    return goto(resolve(orgSlug ? `/org/${orgSlug}` : '/org', {}));
+  }
+
+  onMount(async () => {
+    if (!data.currentOrg) return;
+
+    setTheme(data.currentOrg?.theme || '');
+    currentOrg.set(mergeAccountOrgFromServer(data.currentOrg));
+  });
+</script>
+
+<svelte:head>
+  <title>{$t('invite.link.page_title', { orgName: data.invite.organization.name })}</title>
+</svelte:head>
+
+<AuthUI isLogin={false} {handleSubmit} isLoading={loading} showOnlyContent={true} showLogo={true}>
+  <div class="mt-0 w-full">
+    <p class="text-center text-sm font-light dark:text-white">
+      {#if inviteRoleId === ROLE.STUDENT}
+        {$t('invite.link.invitation_student', { orgName })}
+      {:else if inviteRoleId === ROLE.TUTOR}
+        {$t('invite.link.invitation_teacher', { orgName })}
+      {:else if inviteRoleId === ROLE.ADMIN}
+        {$t('invite.link.invitation_admin', { orgName })}
+      {:else}
+        {$t('invite.link.invitation_fallback', { orgName, role: data.invite.invite.roleLabel })}
+      {/if}
+    </p>
+
+    {#if isDisabled}
+      <p class="mt-3 text-center text-sm text-red-500">{$t('invite.link.disabled')}</p>
+    {/if}
+  </div>
+
+  <div class="my-4 flex w-full flex-col items-center justify-center gap-3">
+    <Button type="submit" disabled={!canJoin || loading} {loading}>
+      {$t('invite.link.accept_button')}
+    </Button>
+    <p class="ui:text-muted-foreground text-center text-sm">
+      {$t('login.already_have_account')}
+      <a class="ui:text-primary hover:underline" href={resolve(`/login?${loginParams}`, {})}> {$t('login.login')}</a>
+    </p>
+  </div>
+</AuthUI>