root = Card([header, regionForm, mainSections])
header = CardHeader("Streaming Operations Room", "Real-time platform health & content performance")
regionForm = Form("region-focus", regionButtons, [regionField])
regionField = FormControl("Focus Region", regionSelect, "Filters all regional metrics below")
regionSelect = Select("region", regionOptions, "Global (all regions)")
regionOptions = [optGlobal, optNA, optEU, optAPAC, optLATAM]
optGlobal = SelectItem("global", "Global (All Regions)")
optNA = SelectItem("na", "North America")
optEU = SelectItem("eu", "Europe")
optAPAC = SelectItem("apac", "Asia-Pacific")
optLATAM = SelectItem("latam", "Latin America")
regionButtons = Buttons([applyRegionBtn])
applyRegionBtn = Button("Apply Filter", null, "primary")
mainSections = SectionBlock([realtimeSec, contentSec, engagementSec, technicalSec, businessSec, opsSec], true)
realtimeSec = SectionItem("realtime", "📊 Real-Time Metrics", [realtimeGrid])
realtimeGrid = Card([viewersNow, bufferingRate, recClickRate, searchNoPlay], "card", "row", "l", "stretch", "start", true)
viewersNow = Card([viewersLabel, viewersValue], "sunk", "column", "m")
viewersLabel = TextContent("Viewers Right Now", "small-heavy")
viewersValue = TextContent("2.4M", "large-heavy")
bufferingRate = Card([bufferLabel, bufferValue, bufferProgress], "sunk", "column", "m")
bufferLabel = TextContent("Buffering Rate", "small-heavy")
bufferValue = TextContent("0.87%", "large")
bufferProgress = Progress(0.87, "Target < 1%")
recClickRate = Card([recLabel, recValue, recProgress], "sunk", "column", "m")
recLabel = TextContent("Recommendation CTR", "small-heavy")
recValue = TextContent("12.4%", "large")
recProgress = Progress(12.4, "Benchmark 10%")
searchNoPlay = Card([searchLabel, searchValue], "sunk", "column", "m")
searchLabel = TextContent("Searches → No Playback", "small-heavy")
searchValue = TextContent("18.2K / hr", "large")
contentSec = SectionItem("content", "🎬 Content Performance", [topTitles, genrePerf, upcomingReleases, expiringLicenses])
topTitles = Card([topTitlesHeader, titlesTable], "card", "column", "m")
topTitlesHeader = Heading("Most-Watched Titles (Last 7 Days)", "h3")
titlesTable = Table([titleCol, hoursCol, viewersCol, completionCol])
titleCol = Col("Title", ["The Crown S6", "Stranger Things S5", "Wednesday S2", "Squid Game S2", "Bridgerton S3", "The Witcher S4", "Black Mirror S7", "Ozark S5"])
hoursCol = Col("Hours Watched", [4.2M, 3.8M, 3.1M, 2.9M, 2.7M, 2.4M, 2.1M, 1.9M])
viewersCol = Col("Unique Viewers", [1.8M, 1.6M, 1.4M, 1.3M, 1.2M, 1.1M, 980K, 890K])
completionCol = Col("Completion %", [87, 91, 84, 89, 82, 78, 76, 85])
genrePerf = Card([genreHeader, genreChart], "card", "column", "m")
genreHeader = Heading("Performance by Genre", "h3")
genreChart = RadarChart(genreLabels, genreSeries)
genreLabels = ["Drama", "Comedy", "Action", "Sci-Fi", "Horror", "Documentary", "Animation", "Reality"]
genreSeries = [genreDrama, genreComedy, genreAction, genreSciFi, genreHorror, genreDoc, genreAnim, genreReality]
genreDrama = Series("Drama", [92, 88, 85, 78, 72, 89, 81, 75])
genreComedy = Series("Comedy", [85, 94, 78, 72, 68, 75, 88, 82])
genreAction = Series("Action", [88, 82, 95, 89, 75, 70, 84, 78])
genreSciFi = Series("Sci-Fi", [82, 78, 89, 93, 81, 85, 90, 72])
genreHorror = Series("Horror", [75, 70, 82, 85, 91, 68, 78, 65])
genreDoc = Series("Documentary", [78, 72, 68, 82, 65, 94, 70, 75])
genreAnim = Series("Animation", [89, 88, 85, 90, 78, 75, 96, 80])
genreReality = Series("Reality", [72, 85, 70, 68, 62, 78, 75, 92])
upcomingReleases = Card([releasesHeader, releasesList], "card", "column", "m")
releasesHeader = Heading("Releases This Month", "h3")
releasesList = ListBlock([rel1, rel2, rel3, rel4, rel5], "number")
rel1 = ListItem("The Crown S6 Finale", "Dec 14 • Drama • 98% hype score", null, "Promote")
rel2 = ListItem("Squid Game S2 Premiere", "Dec 26 • Thriller • 95% hype score", null, "Promote")
rel3 = ListItem("Black Mirror S7", "Dec 20 • Sci-Fi • 89% hype score", null, "Promote")
rel4 = ListItem("Bridgerton S3 Pt 2", "Dec 18 • Romance • 87% hype score", null, "Promote")
rel5 = ListItem("The Witcher S4", "Dec 29 • Fantasy • 84% hype score", null, "Promote")
expiringLicenses = Card([licenseHeader, licenseList], "card", "column", "m")
licenseHeader = Heading("Licenses Expiring Soon (⚠️ 30 days)", "h3")
licenseList = ListBlock([lic1, lic2, lic3, lic4], "number")
lic1 = ListItem("The Office (US)", "Expires Jan 15 • NBCUniversal • $12M renewal", null, "Negotiate")
lic2 = ListItem("Friends", "Expires Jan 20 • Warner Bros • $18M renewal", null, "Negotiate")
lic3 = ListItem("Parks & Recreation", "Expires Feb 1 • NBCUniversal • $8M renewal", null, "Negotiate")
lic4 = ListItem("Brooklyn Nine-Nine", "Expires Feb 10 • Fox/Disney • $6M renewal", null, "Negotiate")
engagementSec = SectionItem("engagement", "📈 Engagement Trends", [watchTimeChart, subChart, revenuePlanChart, deviceChart])
watchTimeChart = Card([wtHeader, wtChart], "card", "column", "m")
wtHeader = Heading("Watch Time — Past 30 Days", "h3")
wtChart = AreaChart(wtLabels, wtSeries, "natural", "Date", "Hours (M)")
wtLabels = ["Dec 1", "Dec 4", "Dec 7", "Dec 10", "Dec 13", "Dec 16", "Dec 19", "Dec 22", "Dec 25", "Dec 28"]
wtSeries = [wtTotal, wtMobile, wtTV, wtDesktop]
wtTotal = Series("Total", [142, 156, 148, 167, 178, 165, 189, 198, 215, 203])
wtMobile = Series("Mobile", [52, 58, 54, 62, 68, 61, 72, 76, 84, 79])
wtTV = Series("TV", [48, 52, 49, 56, 61, 58, 67, 71, 78, 74])
wtDesktop = Series("Desktop", [42, 46, 45, 49, 49, 46, 50, 51, 53, 50])
subChart = Card([subHeader, subChartComp], "card", "column", "m")
subHeader = Heading("New Subscribers vs Cancellations", "h3")
subChartComp = BarChart(subLabels, subSeries, "grouped", "Week", "Subscribers (K)")
subLabels = ["W1", "W2", "W3", "W4", "W5"]
subSeries = [subNew, subCancelled, subNet]
subNew = Series("New", [42, 38, 45, 52, 48])
subCancelled = Series("Cancelled", [18, 22, 19, 21, 24])
subNet = Series("Net", [24, 16, 26, 31, 24])
revenuePlanChart = Card([revHeader, revChart], "card", "column", "m")
revHeader = Heading("Revenue Split by Plan", "h3")
revChart = PieChart(revLabels, revValues, "donut", "circular")
revLabels = ["Premium 4K", "Standard HD", "Basic SD", "Mobile Only", "Annual"]
revValues = [42, 35, 12, 8, 3]
deviceChart = Card([devHeader, devChart], "card", "column", "m")
devHeader = Heading("Viewing Split by Device", "h3")
devChart = HorizontalBarChart(devLabels, devSeries, "grouped", "Share %", "Device")
devLabels = ["Smart TV", "Mobile", "Desktop", "Tablet", "Game Console", "Streaming Stick"]
devSeries = [devShare]
devShare = Series("Viewing Share", [42, 28, 15, 8, 4, 3])
technicalSec = SectionItem("technical", "🔧 Technical Health", [deliveryHealth, bufferingDetail, cdnStatus])
deliveryHealth = Card([dhHeader, dhTable], "card", "column", "m")
dhHeader = Heading("Delivery Health by Region", "h3")
dhTable = Table([dhRegion, dhLatency, dhErrorRate, dhAvailability, dhThroughput])
dhRegion = Col("Region", ["North America", "Europe", "Asia-Pacific", "Latin America", "Middle East", "Africa"])
dhLatency = Col("Avg Latency (ms)", [42, 58, 89, 112, 145, 178])
dhErrorRate = Col("Error Rate %", [0.12, 0.18, 0.31, 0.45, 0.67, 0.89])
dhAvailability = Col("Availability %", [99.97, 99.94, 99.89, 99.82, 99.75, 99.68])
dhThroughput = Col("Avg Throughput (Mbps)", [28.4, 24.1, 18.7, 15.2, 11.8, 9.4])
bufferingDetail = Card([bufHeader, bufChart], "card", "column", "m")
bufHeader = Heading("Buffering Rate Trend (7 Days)", "h3")
bufChart = LineChart(bufLabels, bufSeries, "natural", "Date", "Buffering %")
bufLabels = ["Dec 22", "Dec 23", "Dec 24", "Dec 25", "Dec 26", "Dec 27", "Dec 28"]
bufSeries = [bufGlobal, bufNA, bufEU, bufAPAC]
bufGlobal = Series("Global", [0.82, 0.85, 0.87, 0.91, 0.89, 0.86, 0.87])
bufNA = Series("NA", [0.45, 0.48, 0.51, 0.55, 0.52, 0.49, 0.47])
bufEU = Series("EU", [0.62, 0.65, 0.68, 0.72, 0.70, 0.66, 0.64])
bufAPAC = Series("APAC", [1.12, 1.18, 1.22, 1.31, 1.25, 1.19, 1.15])
cdnStatus = Card([cdnHeader, cdnTags], "card", "column", "m")
cdnHeader = Heading("CDN Provider Status", "h3")
cdnTags = TagBlock(["Akamai: Healthy", "Cloudflare: Healthy", "Fastly: Degraded (APAC)", "CloudFront: Healthy", "Custom: Healthy"])
businessSec = SectionItem("business", "💰 Business Metrics", [arrMetrics, ltvCac, churnReasons])
arrMetrics = Card([arrHeader, arrGrid], "card", "column", "m")
arrHeader = Heading("Key Revenue Metrics", "h3")
arrGrid = Card([arr1, arr2, arr3, arr4], "sunk", "row", "l", "stretch", "start", true)
arr1 = Card([TextContent("MRR", "small-heavy"), TextContent("$48.2M", "large-heavy")], "clear", "column", "xs")
arr2 = Card([TextContent("ARPU", "small-heavy"), TextContent("$14.87", "large-heavy")], "clear", "column", "xs")
arr3 = Card([TextContent("LTV", "small-heavy"), TextContent("$267", "large-heavy")], "clear", "column", "xs")
arr4 = Card([TextContent("CAC", "small-heavy"), TextContent("$42", "large-heavy")], "clear", "column", "xs")
ltvCac = Card([ltvHeader, ltvChart], "card", "column", "m")
ltvHeader = Heading("LTV:CAC Ratio by Cohort", "h3")
ltvChart = BarChart(ltvLabels, ltvSeries, "grouped", "Cohort", "Ratio")
ltvLabels = ["Q1'24", "Q2'24", "Q3'24", "Q4'24"]
ltvSeries = [ltvRatio]
ltvRatio = Series("LTV:CAC", [5.8, 6.2, 6.4, 6.1])
churnReasons = Card([churnHeader, churnList], "card", "column", "m")
churnHeader = Heading("Top Cancellation Reasons", "h3")
churnList = ListBlock([cr1, cr2, cr3, cr4, cr5], "number")
cr1 = ListItem("Price increase", "34% of cancellations", null, null)
cr2 = ListItem("Content library", "28% — not enough new content", null, null)
cr3 = ListItem("Technical issues", "18% — buffering/quality", null, null)
cr4 = ListItem("Competitor switch", "12% — exclusive content elsewhere", null, null)
cr5 = ListItem("Account sharing crackdown", "8% — household enforcement", null, null)
opsSec = SectionItem("ops", "⚙️ Operations & Actions", [featureFlags, promoteForm])
featureFlags = Card([ffHeader, ffTable], "card", "column", "m")
ffHeader = Heading("Feature Flags", "h3")
ffTable = Table([ffName, ffStatus, ffRollout, ffOwner])
ffName = Col("Flag", ["new_recommendation_engine", "shuffle_play", "download_quality_selector", "watch_party_v2", "ai_trailer_gen", "kids_profile_pin", "spatial_audio", "offline_sync_v2"])
ffStatus = Col("State", ["ON", "ON", "OFF", "CANARY", "OFF", "ON", "CANARY", "ON"])
ffRollout = Col("Rollout %", [100, 100, 0, 15, 0, 100, 8, 100])
ffOwner = Col("Owner", ["ML Team", "Playback", "Mobile", "Social", "ML Team", "Trust & Safety", "Audio", "Platform"])
promoteForm = Card([promoHeader, promoFormComp], "card", "column", "m")
promoHeader = Heading("Promote Title on Home Screen", "h3")
promoFormComp = Form("promote-title", promoButtons, [promoTitleField, promoSlotField, promoDurationField, promoReasonField])
promoTitleField = FormControl("Title", promoTitleSelect, "Search or select a title")
promoTitleSelect = Select("promo_title", promoTitleOptions, "Select title...")
promoTitleOptions = [pt1, pt2, pt3, pt4, pt5, pt6]
pt1 = SelectItem("crown-s6", "The Crown S6")
pt2 = SelectItem("squid-s2", "Squid Game S2")
pt3 = SelectItem("wednesday-s2", "Wednesday S2")
pt4 = SelectItem("blackmirror-s7", "Black Mirror S7")
pt5 = SelectItem("bridgerton-s3", "Bridgerton S3 Pt 2")
pt6 = SelectItem("witcher-s4", "The Witcher S4")
promoSlotField = FormControl("Home Screen Slot", promoSlotSelect, "Placement priority")
promoSlotSelect = Select("promo_slot", promoSlotOptions, "Hero Banner")
promoSlotOptions = [ps1, ps2, ps3, ps4]
ps1 = SelectItem("hero", "Hero Banner (Top)")
ps2 = SelectItem("continue", "Continue Watching Row")
ps3 = SelectItem("trending", "Trending Now Row")
ps4 = SelectItem("genre", "Genre-Specific Row")
promoDurationField = FormControl("Duration (Days)", promoDurationInput, "1-30 days")
promoDurationInput = Input("promo_duration", "7", "number", null, "7")
promoReasonField = FormControl("Reason", promoReasonArea, "Business justification for stakeholders")
promoReasonArea = TextArea("promo_reason", "e.g., License renewal push, new season launch, regional campaign...", 3)
promoButtons = Buttons([promoSubmit, promoCancel])
promoSubmit = Button("Promote Title", null, "primary")
promoCancel = Button("Cancel", null, "tertiary")