@flamingo-stack/openframe-frontend-core 0.0.542 → 0.0.543-1802.4770.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.542",
+  "version": "0.0.543-1802.4770.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/types/entities/onboarding-guide.ts

@@ -36,6 +36,7 @@ export interface OnboardingGuide {
   main_video_thumbnail: string | null;
   youtube_url: string | null;
   highlight_video_url: string | null;
+  highlight_srt_content?: string | null;
   highlight_video_thumbnail: string | null;
   highlight_video_duration_ms: number | null;
   highlight_video_source: string | null;

package/src/components/features/captions-url.ts

@@ -18,8 +18,17 @@ export function getCaptionsUrl(
   entityType: string,
   entityId: string | number,
   srtContent?: string | null,
+  options?: {
+    /**
+     * Which SRT column the endpoint should serve. `'highlight'` targets the
+     * entity's highlight_srt_content (AI highlight reel captions); omitted
+     * means the main video's srt_content.
+     */
+    variant?: 'highlight'
+  },
 ): string | undefined {
   if (!srtContent) return undefined
   const hash = `${srtContent.length}-${srtContent.slice(0, 8).replace(/\s/g, '')}`
-  return `/api/captions/${entityType}/${entityId}?v=${hash}`
+  const variant = options?.variant ? `&variant=${options.variant}` : ''
+  return `/api/captions/${entityType}/${entityId}?v=${hash}${variant}`
 }

package/src/components/features/entity-video-section.tsx

@@ -71,6 +71,12 @@ export interface EntityVideoSectionProps {
   srtContent?: string | null;
   /** HTTPS URL to a VTT captions file (rendered as native `<track>`). */
   captionsUrl?: string | null;
+  /**
+   * HTTPS URL to the HIGHLIGHT video's VTT captions file — same `<track>`
+   * mechanism as `captionsUrl`, applied to the Highlights tab / highlight-only
+   * player (`getCaptionsUrl(type, id, highlightSrt, { variant: 'highlight' })`).
+   */
+  highlightCaptionsUrl?: string | null;
   /** LCP hint — when true, the full-video tab's poster eager-loads. */
   priority?: boolean;
 }
@@ -94,6 +100,7 @@ export function EntityVideoSection({
   MarkdownRenderer,
   srtContent,
   captionsUrl,
+  highlightCaptionsUrl,
   priority = false,
 }: EntityVideoSectionProps) {
   const hasFullVideo = !!(youtubeUrl || mainVideoUrl);
@@ -145,6 +152,7 @@ export function EntityVideoSection({
               <Video
                 url={highlightVideoUrl!}
                 poster={highlightVideoThumbnail}
+                captionsUrl={highlightCaptionsUrl}
                 layout="centered"
               />
             </TabsContent>
@@ -164,6 +172,7 @@ export function EntityVideoSection({
           <Video
             url={highlightVideoUrl!}
             poster={highlightVideoThumbnail}
+            captionsUrl={highlightCaptionsUrl}
             layout="centered"
             priority={priority}
           />

package/src/components/features/highlight-config-section.tsx

@@ -9,10 +9,6 @@ export interface HighlightConfigSectionProps {
   targetDurationSeconds: number;
   /** Callback when target duration changes */
   onTargetDurationChange: (seconds: number) => void;
-  /** Whether to skip subtitle burning */
-  skipSubtitleBurning: boolean;
-  /** Callback when skip subtitle option changes */
-  onSkipSubtitleBurningChange: (skip: boolean) => void;
   /** Whether the section is disabled */
   disabled?: boolean;
   /** Additional class name */
@@ -23,13 +19,13 @@ export interface HighlightConfigSectionProps {
  * HighlightConfigSection - Unified component for highlight video configuration
  *
  * This component provides a consistent UI for both CustomerInterview and ProductRelease entities,
- * including duration selection and subtitle burning options in a styled horizontal layout.
+ * including duration selection in a styled horizontal layout. Highlight captions
+ * are generated automatically as a selectable text track (same pattern as the
+ * main video) — there is no subtitle-burning option anymore.
  */
 export function HighlightConfigSection({
   targetDurationSeconds,
   onTargetDurationChange,
-  skipSubtitleBurning,
-  onSkipSubtitleBurningChange,
   disabled = false,
   className = '',
 }: HighlightConfigSectionProps) {
@@ -55,19 +51,6 @@ export function HighlightConfigSection({
             </SelectContent>
           </Select>
         </div>
-        <div className="flex items-center gap-2 pt-5">
-          <input
-            type="checkbox"
-            id="skipSubtitleBurning"
-            checked={skipSubtitleBurning}
-            onChange={(e) => onSkipSubtitleBurningChange(e.target.checked)}
-            disabled={disabled}
-            className="h-4 w-4 rounded border-ods-border bg-ods-bg text-ods-accent focus:ring-ods-accent"
-          />
-          <Label htmlFor="skipSubtitleBurning" className="text-h6 cursor-pointer">
-            Skip subtitle burning
-          </Label>
-        </div>
       </div>
     </div>
   );

package/src/components/features/highlight-video-combined-section.tsx

@@ -5,6 +5,7 @@ import { Sparkles, Upload } from 'lucide-react';
 import { AIGeneratedBadge } from '../ui/ai-generated-badge';
 import { AIEnrichSection } from './ai-enrich';
 import { HighlightConfigSection } from './highlight-config-section';
+import { SubtitlesEditor } from './subtitles-editor';
 import { Label } from '../ui/label';
 import { Badge } from '../ui/badge';
 import { Button } from '../ui/button';
@@ -16,10 +17,6 @@ export interface HighlightVideoCombinedSectionProps {
   targetDurationSeconds: number;
   /** Handler for duration changes */
   onTargetDurationChange: (seconds: number) => void;
-  /** Whether to skip subtitle burning */
-  skipSubtitleBurning: boolean;
-  /** Handler for subtitle burning toggle */
-  onSkipSubtitleBurningChange: (skip: boolean) => void;
   /** Whether config section is disabled */
   configDisabled?: boolean;
 
@@ -76,6 +73,14 @@ export interface HighlightVideoCombinedSectionProps {
   emptyMessage?: string;
   /** Upload progress component (optional) */
   uploadProgressComponent?: ReactNode;
+
+  // ===== Highlight Subtitles (SRT) Props =====
+  /** Highlight captions SRT content (highlight_srt_content) */
+  subtitles?: string;
+  /** Callback when highlight subtitles change */
+  onSubtitlesChange?: (value: string) => void;
+  /** Whether the highlight subtitles were AI generated */
+  isSubtitlesAIGenerated?: boolean;
   /** Video preview component - receives video data, should render the preview */
   renderVideoPreview: (props: {
     videoUrl: string;
@@ -102,8 +107,6 @@ export function HighlightVideoCombinedSection({
   // Config props
   targetDurationSeconds,
   onTargetDurationChange,
-  skipSubtitleBurning,
-  onSkipSubtitleBurningChange,
   configDisabled = false,
   // Generation props
   onGenerateHighlight,
@@ -132,6 +135,10 @@ export function HighlightVideoCombinedSection({
   previewLabel = "Highlight Video",
   emptyMessage = "No highlight video yet. Use AI generation above or upload manually.",
   uploadProgressComponent,
+  // Highlight subtitles props
+  subtitles,
+  onSubtitlesChange,
+  isSubtitlesAIGenerated = false,
   renderVideoPreview,
   // Common
   className = '',
@@ -164,8 +171,6 @@ export function HighlightVideoCombinedSection({
       <HighlightConfigSection
         targetDurationSeconds={targetDurationSeconds}
         onTargetDurationChange={onTargetDurationChange}
-        skipSubtitleBurning={skipSubtitleBurning}
-        onSkipSubtitleBurningChange={onSkipSubtitleBurningChange}
         disabled={configDisabled}
       />
 
@@ -229,6 +234,18 @@ export function HighlightVideoCombinedSection({
           </p>
         )}
       </div>
+
+      {/* 4. Highlight Subtitles (SRT) — the SAME SubtitlesEditor the main
+          video's TranscriptSummaryEditor renders, bound to
+          highlight_srt_content instead of srt_content. */}
+      <SubtitlesEditor
+        id="highlight-subtitles"
+        subtitles={subtitles}
+        onSubtitlesChange={onSubtitlesChange}
+        label="Highlight Subtitles (SRT)"
+        helperText="SRT captions transcribed from the highlight reel (AssemblyAI). Served as a selectable text track on the highlight player. Editable for fine-tuning."
+        isAIGenerated={isSubtitlesAIGenerated}
+      />
     </div>
   );
 }

package/src/components/features/highlight-video-section.tsx

@@ -24,10 +24,6 @@ export interface HighlightVideoSectionProps {
   targetDurationSeconds: number;
   /** Callback when target duration changes */
   onTargetDurationChange: (seconds: number) => void;
-  /** Whether to skip subtitle burning */
-  skipSubtitleBurning: boolean;
-  /** Callback when skip subtitle option changes */
-  onSkipSubtitleBurningChange: (skip: boolean) => void;
   /** Callback to trigger highlight generation */
   onGenerateHighlight: () => void;
   /** Whether highlight generation is in progress */
@@ -81,8 +77,6 @@ export function HighlightVideoSection({
   highlightVideoSource,
   targetDurationSeconds,
   onTargetDurationChange,
-  skipSubtitleBurning,
-  onSkipSubtitleBurningChange,
   onGenerateHighlight,
   isGenerating = false,
   generationProgress,
@@ -152,19 +146,6 @@ export function HighlightVideoSection({
               </SelectContent>
             </Select>
           </div>
-          <div className="flex items-center gap-2 pt-5">
-            <input
-              type="checkbox"
-              id="skipSubtitleBurning"
-              checked={skipSubtitleBurning}
-              onChange={(e) => onSkipSubtitleBurningChange(e.target.checked)}
-              disabled={disabled}
-              className="h-4 w-4 rounded border-ods-border bg-ods-bg-surface text-ods-accent focus:ring-ods-accent"
-            />
-            <Label htmlFor="skipSubtitleBurning" className="text-h6 cursor-pointer">
-              Skip subtitle burning
-            </Label>
-          </div>
         </div>
       </div>
 

package/src/components/features/index.ts

@@ -74,6 +74,7 @@ export * from './use-video-warmup'
 export * from './captions-url'
 export * from './video-source-selector'
 export * from './transcript-summary-editor'
+export * from './subtitles-editor'
 export * from './highlight-video-section'
 export * from './highlight-config-section'
 export * from './entity-summary-editor'

package/src/components/features/subtitles-editor.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import React from 'react';
+import { Label } from '../ui/label';
+import { Textarea } from '../ui/textarea';
+import { Badge } from '../ui/badge';
+import { StandardCcIcon } from '../icons-v2-generated';
+
+export interface SubtitlesEditorProps {
+  /** SRT subtitle content */
+  subtitles?: string;
+  /** Callback when subtitles change */
+  onSubtitlesChange?: (value: string) => void;
+  /** Custom label for subtitles field */
+  label?: string;
+  /** Custom helper text */
+  helperText?: string;
+  /** Custom placeholder */
+  placeholder?: string;
+  /** Minimum height for the textarea */
+  minHeight?: number;
+  /** Show the AI Generated badge next to the label (when content exists) */
+  isAIGenerated?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** DOM id for the textarea/label pair (unique per instance on a page) */
+  id?: string;
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * SubtitlesEditor — THE single SRT-editing surface.
+ *
+ * Extracted from TranscriptSummaryEditor so the MAIN video's subtitles
+ * (srt_content) and the HIGHLIGHT reel's subtitles (highlight_srt_content)
+ * render through the exact same component: same textarea, same AI badge,
+ * same helper-text layout. Renders nothing when neither content nor a
+ * change handler is provided (same convention the inline block had).
+ */
+export function SubtitlesEditor({
+  subtitles,
+  onSubtitlesChange,
+  label = 'Subtitles (SRT)',
+  helperText = 'SRT subtitle content generated from transcription. Editable for fine-tuning.',
+  placeholder = '1\n00:00:00,000 --> 00:00:02,500\nHello, welcome to...',
+  minHeight = 200,
+  isAIGenerated = false,
+  disabled = false,
+  id = 'subtitles',
+  className = '',
+}: SubtitlesEditorProps) {
+  if (!subtitles && !onSubtitlesChange) return null;
+
+  return (
+    <div className={className}>
+      <div className="mb-2">
+        <div className="flex items-center gap-2">
+          <Label htmlFor={id}>{label}</Label>
+          {isAIGenerated && subtitles && (
+            <Badge variant="secondary" className="flex items-center gap-1">
+              <StandardCcIcon size={12} />
+              AI Generated
+            </Badge>
+          )}
+        </div>
+        <p className="text-h6 text-ods-text-secondary mt-1">{helperText}</p>
+      </div>
+      <div
+        className="rounded-lg border border-ods-border bg-ods-card overflow-hidden"
+        style={{ minHeight: `${minHeight}px` }}
+      >
+        <Textarea
+          id={id}
+          value={subtitles || ''}
+          onChange={(e) => onSubtitlesChange?.(e.target.value)}
+          placeholder={placeholder}
+          disabled={disabled || !onSubtitlesChange}
+          className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 text-code"
+          style={{ minHeight: `${minHeight}px`, lineHeight: '1.6' }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default SubtitlesEditor;

package/src/components/features/transcript-summary-editor.tsx

@@ -5,9 +5,8 @@ import { Sparkles } from 'lucide-react';
 import { AIGeneratedBadge } from '../ui/ai-generated-badge';
 import { Label } from '../ui/label';
 import { Textarea } from '../ui/textarea';
-import { Badge } from '../ui/badge';
-import { StandardCcIcon } from '../icons-v2-generated';
 import { ConfidenceBadge } from './ai-enrich/ConfidenceBadge';
+import { SubtitlesEditor } from './subtitles-editor';
 
 export interface TranscriptSummaryEditorProps {
   /** Video summary text value - AI-generated from video transcription (defaults to empty string if undefined) */
@@ -161,37 +160,19 @@ export function TranscriptSummaryEditor({
         </div>
       </div>
 
-      {/* Subtitles Editor — only shown when subtitles content exists or handler provided */}
-      {(subtitles || onSubtitlesChange) && (
-        <div>
-          <div className="mb-2">
-            <div className="flex items-center gap-2">
-              <Label htmlFor="subtitles">{subtitlesLabel}</Label>
-              {isAIGenerated && subtitles && (
-                <Badge variant="secondary" className="flex items-center gap-1">
-                  <StandardCcIcon size={12} />
-                  AI Generated
-                </Badge>
-              )}
-            </div>
-            <p className="text-h6 text-ods-text-secondary mt-1">{subtitlesHelperText}</p>
-          </div>
-          <div
-            className="rounded-lg border border-ods-border bg-ods-card overflow-hidden"
-            style={{ minHeight: `${subtitlesMinHeight}px` }}
-          >
-            <Textarea
-              id="subtitles"
-              value={subtitles || ''}
-              onChange={(e) => onSubtitlesChange?.(e.target.value)}
-              placeholder={subtitlesPlaceholder}
-              disabled={disabled || !onSubtitlesChange}
-              className="h-full w-full resize-none border-0 bg-transparent text-ods-text-primary placeholder:text-ods-text-secondary/50 focus:ring-0 focus:outline-none p-4 text-code"
-              style={{ minHeight: `${subtitlesMinHeight}px`, lineHeight: '1.6' }}
-            />
-          </div>
-        </div>
-      )}
+      {/* Subtitles Editor — the shared SubtitlesEditor SSOT (same component
+          the highlight section uses for highlight_srt_content). */}
+      <SubtitlesEditor
+        id="subtitles"
+        subtitles={subtitles}
+        onSubtitlesChange={onSubtitlesChange}
+        label={subtitlesLabel}
+        helperText={subtitlesHelperText}
+        placeholder={subtitlesPlaceholder}
+        minHeight={subtitlesMinHeight}
+        isAIGenerated={isAIGenerated}
+        disabled={disabled}
+      />
     </div>
   );
 }

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -138,6 +138,7 @@ export function OnboardingGuideDetailView({
   }
 
   const captionsUrl = getCaptionsUrl('onboarding_guide', guide.id, guide.srt_content)
+  const highlightCaptionsUrl = getCaptionsUrl('onboarding_guide', guide.id, guide.highlight_srt_content, { variant: 'highlight' })
 
   const videoPoster =
     guide.main_video_thumbnail ||
@@ -197,6 +198,7 @@ export function OnboardingGuideDetailView({
               title={guide.title}
               srtContent={guide.srt_content}
               captionsUrl={captionsUrl}
+              highlightCaptionsUrl={highlightCaptionsUrl}
               MarkdownRenderer={MarkdownRenderer}
             />
           </div>

package/src/components/shared/product-release/release-detail-page.tsx

@@ -88,6 +88,8 @@ export interface VideoDisplaySectionProps {
   bitesHref?: string;
   srtContent?: string | null;
   captionsUrl?: string | null;
+  /** VTT captions URL for the highlight reel (variant=highlight). */
+  highlightCaptionsUrl?: string | null;
 }
 
 export interface ReleaseDetailPageProps {
@@ -342,6 +344,7 @@ export function ReleaseDetailPage({
             bitesHref={typeof release.slug === 'string' ? `/releases/${release.slug}` : undefined}
             srtContent={release?.srt_content as string | null | undefined}
             captionsUrl={release?.captionsUrl as string | undefined}
+            highlightCaptionsUrl={release?.highlightCaptionsUrl as string | undefined}
           />
         ) : (
           <>
@@ -370,6 +373,7 @@ export function ReleaseDetailPage({
               <Video
                 url={highlightVideoUrl}
                 poster={highlightVideoThumbnail}
+                captionsUrl={release?.highlightCaptionsUrl as string | undefined}
                 layout="centered"
               />
             )}

package/src/types/case-study.ts

@@ -40,6 +40,7 @@ export interface CaseStudy {
   // NOTE: transcript_words_data is server-only and intentionally NOT typed here.
   transcript?: string | null
   srt_content?: string | null
+  highlight_srt_content?: string | null
   video_summary?: string | null
   custom_instructions?: string | null
   config?: Record<string, unknown> | null // clip/highlight processing config
@@ -98,6 +99,7 @@ export interface CreateCaseStudyData {
   // Video processing pipeline (parity with customer_interviews)
   transcript?: string | null
   srt_content?: string | null
+  highlight_srt_content?: string | null
   video_summary?: string | null
   custom_instructions?: string | null
   config?: Record<string, unknown> | null

package/src/types/customer-interview.ts

@@ -14,8 +14,6 @@ import type { VideoTeaser, Speaker, VideoClip, TranscriptWord, SpeakerMapping, E
 export interface CustomerInterviewConfig {
   /** Target duration in seconds for AI-generated highlight video (default: 180) */
   highlight_target_duration_seconds?: number
-  /** Skip subtitle burning during highlight video generation */
-  skipSubtitleBurning?: boolean
 }
 
 export interface CustomerInterview {
@@ -79,6 +77,7 @@ export interface CustomerInterview {
   // Word-level transcript data for video processing
   transcript_words_data?: TranscriptWord[]
   srt_content?: string | null
+  highlight_srt_content?: string | null
 
   // Incentive mention exclusion ranges (computed during transcription)
   incentive_excluded_ranges?: ExcludedRange[]
@@ -115,6 +114,7 @@ export interface CreateCustomerInterviewData {
   video_summary?: string // AI-generated summary from video transcription (Markdown supported)
   transcript?: string // Markdown supported
   srt_content?: string | null // SRT subtitle content
+  highlight_srt_content?: string | null
   user_id?: string // Customer UUID
   main_video_url?: string
   highlight_video_url?: string | null

package/src/types/product-release.ts

@@ -101,6 +101,7 @@ export interface ProductRelease {
   transcript: string | null
   transcript_words_data?: TranscriptWord[]
   srt_content?: string | null
+  highlight_srt_content?: string | null
   video_summary: string | null // AI-generated summary from video transcription
   video_bites: VideoTeaser[] // JSONB array of extracted video clips
   highlight_video_url: string | null
@@ -192,6 +193,7 @@ export interface CreateProductReleaseData {
   main_video_url?: string
   transcript?: string
   srt_content?: string | null
+  highlight_srt_content?: string | null
   video_summary?: string // AI-generated summary from video transcription
   video_bites?: VideoTeaser[]
   highlight_video_url?: string | null

package/src/types/supabase.ts

@@ -409,6 +409,7 @@ export type Database = {
           highlight_video_source: string | null
           highlight_video_thumbnail: string | null
           highlight_video_duration_ms: number | null
+          highlight_srt_content: string | null
           author_id: string | null
           position: 'left' | 'right'
           created_at: string
@@ -434,6 +435,7 @@ export type Database = {
           highlight_video_source?: string | null
           highlight_video_thumbnail?: string | null
           highlight_video_duration_ms?: number | null
+          highlight_srt_content?: string | null
           author_id?: string | null
           created_at?: string
           updated_at?: string
@@ -457,6 +459,7 @@ export type Database = {
           highlight_video_source?: string | null
           highlight_video_thumbnail?: string | null
           highlight_video_duration_ms?: number | null
+          highlight_srt_content?: string | null
           author_id?: string | null
           position?: 'left' | 'right'
           created_at?: string