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
@@ -25,7 +25,7 @@

 <a
  {href}
-  class="ui:group ui:flex ui:flex-col ui:h-full ui:overflow-hidden ui:rounded-[20px] ui:bg-[var(--landing-card-soft)] ui:no-underline ui:transition-colors ui:hover:bg-[var(--landing-card)] {disableCourseLinks
+  class="ui:group ui:flex ui:flex-col ui:h-full ui:overflow-hidden ui:rounded-[20px] ui:border ui:border-[var(--landing-border)] ui:bg-[var(--landing-card-soft)] ui:no-underline ui:transition-colors ui:hover:bg-[var(--landing-card)] {disableCourseLinks
    ? 'ui:cursor-default'
    : 'ui:cursor-pointer'}"
  aria-disabled={disableCourseLinks}
@@ -0,0 +1,59 @@
+import { tokenize, type CourseLandingTokens } from '../course-tokens-base';
+
+export const courseTokens: CourseLandingTokens = tokenize({
+  sectionShell: 'ui:py-14 ui:md:py-16 ui:px-4 ui:bg-[var(--landing-bg)]',
+  heading:
+    'ui:text-5xl ui:md:text-7xl ui:text-[var(--landing-fg)]' +
+    ' ui:[font-weight:var(--landing-heading-weight)]' +
+    ' ui:[letter-spacing:var(--landing-heading-tracking)]',
+  socialProofShell: 'ui:py-10 ui:px-4 ui:border-y ui:border-[var(--landing-border)]',
+  socialProofValue:
+    'ui:text-5xl ui:md:text-6xl ui:text-[var(--landing-fg)]' +
+    ' ui:[font-weight:var(--landing-heading-weight)]' +
+    ' ui:[letter-spacing:var(--landing-heading-tracking)]',
+  socialProofLabel:
+    'ui:text-xs ui:text-[var(--landing-fg-muted)]' +
+    ' ui:[letter-spacing:var(--landing-eyebrow-tracking)]' +
+    ' ui:[text-transform:var(--landing-eyebrow-case)]',
+  socialProofDivider: 'ui:hidden',
+  infoBlock: 'ui:flex ui:flex-col ui:gap-4',
+  infoBlockHeading:
+    'ui:text-4xl ui:md:text-5xl ui:text-[var(--landing-fg)]' +
+    ' ui:[font-weight:var(--landing-heading-weight)]' +
+    ' ui:[letter-spacing:var(--landing-heading-tracking)]',
+  infoBlockBody:
+    'ui:text-lg ui:text-[var(--landing-fg-muted)] ui:leading-relaxed' +
+    ' ui:[&_p]:mb-2 ui:[&_ul]:list-disc ui:[&_ul]:pl-5 ui:[&_li]:mb-1',
+  curriculumModule: 'ui:mb-6 ui:border-b ui:border-[var(--landing-border)] ui:pb-6 ui:last:border-b-0',
+  curriculumModuleHeader:
+    'ui:flex ui:flex-col ui:items-start ui:gap-2 ui:cursor-pointer ui:text-left ui:md:flex-row ui:md:items-center ui:md:justify-between ui:md:gap-4',
+  curriculumModuleTitle:
+    'ui:text-3xl ui:md:text-4xl ui:text-[var(--landing-fg)]' +
+    ' ui:[font-weight:var(--landing-heading-weight)]' +
+    ' ui:[letter-spacing:var(--landing-heading-tracking)]',
+  curriculumLessonRow: 'ui:flex ui:items-center ui:gap-3 ui:py-3 ui:border-t ui:border-[var(--landing-border)]/50',
+  instructorShell: 'ui:flex ui:flex-col ui:md:flex-row ui:gap-8 ui:items-start',
+  instructorAvatar: 'ui:size-32 ui:rounded-full ui:object-cover',
+  instructorName:
+    'ui:text-4xl ui:md:text-5xl ui:text-[var(--landing-fg)]' +
+    ' ui:[font-weight:var(--landing-heading-weight)]' +
+    ' ui:[letter-spacing:var(--landing-heading-tracking)]',
+  reviewCard: 'ui:p-0 ui:border-t ui:border-[var(--landing-border)] ui:pt-6 ui:bg-transparent',
+  chip:
+    'ui:inline-flex ui:items-center ui:px-5 ui:py-2.5 ui:text-base ui:text-[var(--landing-fg)]' +
+    ' ui:border ui:border-[var(--landing-border)] ui:bg-transparent' +
+    ' ui:[border-radius:var(--landing-radius-pill)]' +
+    ' ui:hover:border-[var(--landing-accent)]' +
+    ' ui:transition-colors',
+  chipsGroupHeading:
+    'ui:text-3xl ui:md:text-4xl ui:text-[var(--landing-fg)] ui:mb-6' +
+    ' ui:[font-weight:var(--landing-heading-weight)]' +
+    ' ui:[letter-spacing:var(--landing-heading-tracking)]',
+  pricingShell:
+    'ui:p-10 ui:border-2 ui:border-[var(--landing-fg)]' +
+    ' ui:[border-radius:var(--landing-radius-card)] ui:bg-[var(--landing-bg)]',
+  pricingAmount:
+    'ui:text-6xl ui:md:text-7xl ui:text-[var(--landing-fg)]' +
+    ' ui:[font-weight:var(--landing-heading-weight)]' +
+    ' ui:[letter-spacing:var(--landing-heading-tracking)]'
+});
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { CourseLandingPageProps } from '../types';
+  import VibrantNav from './nav.svelte';
+  import VibrantHero from './hero.svelte';
+  import OrgLandingPageFooter from '../landing-page-footer.svelte';
+  import CourseSocialProof from '../course-social-proof.svelte';
+  import CourseInfoBlocks from '../course-info-blocks.svelte';
+  import CourseCurriculum from '../course-curriculum.svelte';
+  import CourseChips from '../course-chips.svelte';
+  import CourseSectionNav from '../course-section-nav.svelte';
+  import CourseInstructor from '../course-instructor.svelte';
+  import CourseReviews from '../course-reviews.svelte';
+  import CoursePricing from '../course-pricing.svelte';
+  import { themeStyle } from '../theme-style';
+  import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
+
+  let {
+    orgName,
+    logoUrl,
+    navItems,
+    authAction,
+    hero,
+    socialProof,
+    info,
+    curriculum,
+    chips,
+    instructor,
+    reviews,
+    pricing,
+    footer,
+    labels
+  }: CourseLandingPageProps = $props();
+
+  const heroProps = $derived(alignHeroCtaWithPricing(hero, pricing));
+  const sectionNavItems = $derived(
+    buildCourseSectionNavItems({ info, curriculum, chips, instructor, reviews }, labels)
+  );
+</script>
+
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('vibrant')}
+>
+  <main>
+    <VibrantHero hero={heroProps}>
+      {#snippet navigation()}
+        <VibrantNav {orgName} {logoUrl} {navItems} {authAction} />
+      {/snippet}
+    </VibrantHero>
+
+    <CourseSectionNav variant="vibrant" items={sectionNavItems} {labels} />
+    <CourseSocialProof variant="vibrant" {socialProof} {labels} />
+    <CourseInfoBlocks variant="vibrant" {info} {labels} />
+    <CourseCurriculum variant="vibrant" {curriculum} {labels} />
+    {#if chips}
+      <CourseChips variant="vibrant" {chips} {labels} />
+    {/if}
+    <CourseInstructor variant="vibrant" {instructor} {labels} />
+    <CourseReviews variant="vibrant" {reviews} {labels} />
+    <CoursePricing variant="vibrant" {pricing} {labels} />
+  </main>
+
+  <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="vibrant" />
+</div>
@@ -9,9 +9,10 @@
    hero: OrgLandingPageProps['hero'];
    labels?: OrgLandingPageProps['labels'];
    navigation: Snippet;
+    showActions?: boolean;
  }

-  let { hero, labels, navigation }: Props = $props();
+  let { hero, labels, navigation, showActions = true }: Props = $props();
 </script>

 {@render navigation()}
@@ -35,22 +36,24 @@
        {hero.subheading}
      </p>

-      <div class="ui:inline-flex ui:flex-wrap ui:justify-center ui:items-center ui:gap-3">
-        <Button
-          href={hero.primaryAction.href}
-          disabled={hero.primaryAction.disabled ?? false}
-          class="ui:rounded-md ui:px-7 ui:py-3.5 ui:text-base ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:opacity-90"
-        >
-          {hero.primaryAction.label}
-        </Button>
-        {#if hero.secondaryAction}
-          <SecondaryActionButton
-            href={hero.secondaryAction.href}
-            label={hero.secondaryAction.label}
-            variant="vibrant"
-          />
-        {/if}
-      </div>
+      {#if showActions}
+        <div class="ui:inline-flex ui:flex-wrap ui:justify-center ui:items-center ui:gap-3">
+          <Button
+            href={hero.primaryAction.href}
+            disabled={hero.primaryAction.disabled ?? false}
+            class="ui:rounded-md ui:px-7 ui:py-3.5 ui:text-base ui:font-medium ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:hover:opacity-90"
+          >
+            {hero.primaryAction.label}
+          </Button>
+          {#if hero.secondaryAction}
+            <SecondaryActionButton
+              href={hero.secondaryAction.href}
+              label={hero.secondaryAction.label}
+              variant="vibrant"
+            />
+          {/if}
+        </div>
+      {/if}
    </div>
  </section>

@@ -0,0 +1,7 @@
+export { default as nav } from './nav.svelte';
+export { default as hero } from './hero.svelte';
+export { default as courseCard } from './course-card.svelte';
+export { default as org } from './org.svelte';
+export { default as course } from './course.svelte';
+
+export const coursesGridClass = 'ui:grid ui:grid-cols-1 ui:@xl:grid-cols-2 ui:@4xl:grid-cols-3 ui:gap-5';
@@ -0,0 +1,216 @@
+<script lang="ts">
+  import type { OrgLandingPageProps, CourseItem } from '../types';
+  import OrgLandingPageEmbed from '../embed.svelte';
+  import OrgLandingPageLinks from '../links.svelte';
+  import OrgLandingPageCallout from '../callout.svelte';
+  import OrgLandingPageFooter from '../landing-page-footer.svelte';
+  import VibrantNav from './nav.svelte';
+  import VibrantHero from './hero.svelte';
+  import VibrantCourseCard from './course-card.svelte';
+  import { themeStyle } from '../theme-style';
+  import { Button } from '../../../base/button';
+  import { getCourseTypeLandingMeta, defaultLessonsLabel, defaultExercisesLabel } from '../landing-page-utils';
+
+  let {
+    orgName,
+    logoUrl,
+    navItems,
+    authAction,
+    hero,
+    courses,
+    hasMoreCourses = false,
+    disableCourseLinks = false,
+    embed,
+    callout,
+    links,
+    footer,
+    labels
+  }: OrgLandingPageProps = $props();
+
+  const featured = $derived(courses[0]);
+  const featuredTypeMeta = $derived(featured ? getCourseTypeLandingMeta(featured) : undefined);
+  const remainingCourses = $derived(courses.slice(1));
+
+  const resolvedLessonsLabel = $derived(labels?.lessonsLabel ?? defaultLessonsLabel);
+  const resolvedExercisesLabel = $derived(labels?.exercisesLabel ?? defaultExercisesLabel);
+
+  function formatCost(cost?: number, currency = 'USD'): string {
+    if (!cost) return labels?.freeLabel ?? 'Free';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(cost);
+  }
+
+  function courseHref(course: CourseItem): string | undefined {
+    if (disableCourseLinks) return undefined;
+    return course.link || (course.slug ? `/course/${course.slug}` : undefined);
+  }
+</script>
+
+<div
+  class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
+  style={themeStyle('vibrant')}
+>
+  <main>
+    <VibrantHero {hero} {labels}>
+      {#snippet navigation()}
+        <VibrantNav {orgName} {logoUrl} {navItems} {authAction} />
+      {/snippet}
+    </VibrantHero>
+
+    {#if featured}
+      <section
+        class="ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:px-6 ui:md:px-8 ui:py-24 ui:md:py-32"
+      >
+        <div class="ui:max-w-[1320px] ui:mx-auto">
+          <div class="ui:grid ui:grid-cols-1 ui:lg:grid-cols-[1.15fr_1fr] ui:gap-12 ui:lg:gap-20 ui:items-center">
+            <div>
+              {#if featuredTypeMeta}
+                <span
+                  class="ui:inline-flex ui:items-center ui:gap-1.5 ui:rounded-full ui:px-3 ui:py-1 ui:text-[13px] ui:font-medium ui:mb-6 ui:text-[var(--landing-accent-fg)]"
+                  style="background: rgba(255,255,255,0.18);"
+                >
+                  {labels?.featuredLabel ?? 'Featured'} · {featuredTypeMeta.label}
+                </span>
+              {/if}
+              <h2
+                class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-medium ui:tracking-tight ui:m-0 ui:mb-6 ui:max-w-[520px]"
+                style="line-height: 1.05; letter-spacing: -0.025em;"
+              >
+                {featured.title}
+              </h2>
+              <p class="ui:text-lg ui:m-0 ui:mb-4 ui:max-w-[480px] ui:opacity-90" style="line-height: 1.5;">
+                {featured.description}
+              </p>
+              <div
+                class="ui:flex ui:flex-wrap ui:items-center ui:gap-x-5 ui:gap-y-2 ui:text-[14.5px] ui:mb-8 ui:opacity-85"
+              >
+                {#if featured.lessonCount}
+                  <span>{resolvedLessonsLabel(featured.lessonCount)}</span>
+                {/if}
+                {#if featured.exerciseCount}
+                  <span aria-hidden="true">·</span>
+                  <span>{resolvedExercisesLabel(featured.exerciseCount)}</span>
+                {/if}
+                {#if featured.duration}
+                  <span aria-hidden="true">·</span>
+                  <span>{featured.duration}</span>
+                {/if}
+              </div>
+              <div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
+                <Button
+                  href={courseHref(featured)}
+                  disabled={disableCourseLinks}
+                  class="ui:rounded-md ui:px-6 ui:py-3 ui:text-base ui:font-medium ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:hover:opacity-90"
+                >
+                  {labels?.startCourseLabel ?? 'Start this course'}
+                </Button>
+                <span class="ui:text-base ui:font-medium ui:opacity-95">
+                  {featured.price || formatCost(featured.cost, featured.currency)}
+                </span>
+              </div>
+            </div>
+
+            <div
+              class="ui:relative ui:overflow-hidden ui:rounded-3xl ui:h-[440px] ui:md:h-[480px]"
+              style="
+                background:
+                  radial-gradient(50% 60% at 40% 40%, rgba(255,255,255,0.55) 0%, transparent 70%),
+                  radial-gradient(60% 70% at 70% 65%, rgba(255,255,255,0.32) 0%, transparent 70%),
+                  radial-gradient(40% 50% at 25% 75%, rgba(255,235,210,0.5) 0%, transparent 70%),
+                  linear-gradient(135deg, #b0a8a0 0%, #d4cabd 50%, #c8c0b5 100%);
+              "
+            >
+              <div
+                class="ui:absolute ui:left-1/2 ui:top-1/2 ui:w-[80%] ui:overflow-hidden ui:rounded-2xl ui:p-6"
+                style="
+                  transform: translate(-50%, -50%);
+                  background: #0c1320;
+                  color: #fff;
+                  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
+                "
+              >
+                <p class="ui:m-0 ui:mb-1 ui:text-[16px] ui:font-semibold">Course outline</p>
+                <p class="ui:m-0 ui:mb-5 ui:text-[13px]" style="color: #8a93a0;">
+                  Pick up where you left off — anytime.
+                </p>
+                <div class="ui:flex ui:flex-col ui:gap-2">
+                  {#each Array.from({ length: Math.min(featured.lessonCount ?? 4, 4) }) as _, idx (idx)}
+                    <div
+                      class="ui:flex ui:items-center ui:gap-3 ui:rounded-lg ui:px-3.5 ui:py-3"
+                      style="background: #131c2c;"
+                    >
+                      <span
+                        class="ui:inline-flex ui:items-center ui:justify-center ui:size-6 ui:rounded ui:text-[11px] ui:font-semibold ui:tabular-nums"
+                        style="background: #2a3548; color: #fff;"
+                      >
+                        {String(idx + 1).padStart(2, '0')}
+                      </span>
+                      <span class="ui:flex-1 ui:text-[13.5px] ui:font-medium" style="color: #fff;">
+                        {idx === 0
+                          ? 'Foundations & setup'
+                          : idx === 1
+                            ? 'Core concepts'
+                            : idx === 2
+                              ? 'Hands-on practice'
+                              : 'Capstone project'}
+                      </span>
+                      <span class="ui:text-[11.5px] ui:tabular-nums" style="color: #6c7585;">
+                        {idx === 0 ? '42 min' : idx === 1 ? '1h 12m' : idx === 2 ? '58 min' : '2h 30m'}
+                      </span>
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    {/if}
+
+    {#if remainingCourses.length > 0 || (!featured && courses.length > 0)}
+      {@const catalogCourses = featured ? remainingCourses : courses}
+      <section id="courses" class="ui:px-6 ui:md:px-8 ui:py-24 ui:md:py-28 ui:bg-[var(--landing-bg)]">
+        <div class="ui:max-w-[1320px] ui:mx-auto">
+          <div class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:justify-between ui:gap-6 ui:mb-12">
+            <div>
+              <p
+                class="ui:text-[13px] ui:font-medium ui:tracking-[0.08em] ui:uppercase ui:text-[var(--landing-fg-muted)] ui:m-0 ui:mb-3"
+              >
+                {labels?.catalogEyebrow ?? 'Catalog'}
+              </p>
+              <h2
+                class="ui:text-4xl ui:md:text-5xl ui:font-medium ui:tracking-tight ui:m-0 ui:text-[var(--landing-fg)] ui:max-w-2xl"
+                style="line-height: 1.05; letter-spacing: -0.025em;"
+              >
+                {labels?.catalogHeading ?? 'More courses to take next.'}
+              </h2>
+            </div>
+            {#if hasMoreCourses}
+              <Button
+                href={disableCourseLinks ? undefined : '/courses'}
+                variant="outline"
+                class="ui:rounded-md ui:px-5 ui:py-2.5 ui:font-medium ui:border-[var(--landing-border)] ui:text-[var(--landing-fg)] ui:hover:bg-[var(--landing-card-soft)]"
+                disabled={disableCourseLinks}
+              >
+                {labels?.browseCoursesLabel ?? 'Browse all →'}
+              </Button>
+            {/if}
+          </div>
+
+          <div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-5">
+            {#each catalogCourses as course, index (course.id)}
+              <VibrantCourseCard {course} {disableCourseLinks} {labels} />
+            {/each}
+          </div>
+        </div>
+      </section>
+    {/if}
+  </main>
+
+  <OrgLandingPageLinks {links} {labels} variant="vibrant" />
+
+  <OrgLandingPageEmbed {embed} {labels} variant="vibrant" />
+
+  <OrgLandingPageCallout {callout} {labels} variant="vibrant" />
+
+  <OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="vibrant" />
+</div>
@@ -0,0 +1,10 @@
+import { baseTokenVars, type LandingThemeVars } from '../theme-vars-base';
+
+export const vars: LandingThemeVars = {
+  ...baseTokenVars,
+  '--landing-heading-weight': '500',
+  '--landing-heading-tracking': '-0.04em',
+  '--landing-radius-card': '24px',
+  '--landing-divider': '1px solid color-mix(in oklab, var(--landing-border), transparent 50%)',
+  '--landing-panel-bg-accent': 'color-mix(in oklab, var(--landing-accent), var(--landing-bg) 80%)'
+};