root = Card([header, regionFilter, kpiRow, sections, featureFlagsSection, promoteForm])
header = CardHeader("Streaming Operations Dashboard", "Real-time platform health · Content performance · Subscriber metrics")
regionFilter = FormControl("Focus Region", regionSelect, "Filter all region-sensitive metrics below")
regionSelect = Select("focus-region", regionOptions, "All Regions", { required: false })
regionOptions = [roAll, roUS, roEU, roAPAC, roLATAM, roMEA]
roAll = SelectItem("all", "All Regions")
roUS = SelectItem("us", "United States")
roEU = SelectItem("eu", "Europe")
roAPAC = SelectItem("apac", "Asia-Pacific")
roLATAM = SelectItem("latam", "Latin America")
roMEA = SelectItem("mea", "Middle East & Africa")
kpiRow = OverviewCardBlock([kpiViewers, kpiBuffering, kpiRecoCTR, kpiZeroSearch], "grid", true)
kpiViewers = OverviewCardItem("current-viewers", kpiViewersTop, kpiViewersMetric)
kpiViewersTop = IconText(kpiViewersIcon, "info", "m", "Current Viewers", "Live concurrent sessions", false, "vertical")
kpiViewersIcon = Icon("users", "people")
kpiViewersMetric = MetricIndicatorInline("2.84M", "▲ +12% vs 1hr ago", { direction: "up", value: 12 })
kpiBuffering = OverviewCardItem("buffering-rate", kpiBufferingTop, kpiBufferingMetric)
kpiBufferingTop = IconText(kpiBufferingIcon, "warning", "m", "Buffering Rate", "Sessions with rebuffer >1s", false, "vertical")
kpiBufferingIcon = Icon("loader", "system")
kpiBufferingMetric = MetricIndicatorInline("0.87%", "▼ -0.15pp vs yesterday", { direction: "down", value: 0.15 })
kpiRecoCTR = OverviewCardItem("reco-ctr", kpiRecoCTRTop, kpiRecoCTRMetric)
kpiRecoCTRTop = IconText(kpiRecoCTRIcon, "success", "m", "Reco Click-Through", "Recommendations clicked / shown", false, "vertical")
kpiRecoCTRIcon = Icon("mouse-pointer-click", "cursor")
kpiRecoCTRMetric = MetricIndicatorInline("4.2%", "▲ +0.3pp vs last week", { direction: "up", value: 0.3 })
kpiZeroSearch = OverviewCardItem("zero-result-search", kpiZeroSearchTop, kpiZeroSearchMetric)
kpiZeroSearchTop = IconText(kpiZeroSearchIcon, "danger", "m", "Zero-Playback Searches", "Searches with no content start", false, "vertical")
kpiZeroSearchIcon = Icon("search-x", "search")
kpiZeroSearchMetric = MetricIndicatorInline("18.7K", "▼ -2.1K vs last week", { direction: "down", value: 2.1 })
sections = SectionBlock([secContent, secSubscribers, secTechnical, secUpcoming, secDiscovery, secSplits], true)
secContent = SectionItem("content", "Content Performance", [contentHeader, mostWatchedChart, watchTimeChart, genreChart])
contentHeader = InlineHeader("Top Content & Engagement", "Most-watched titles, monthly watch-time trend, and genre performance")
mostWatchedChart = HorizontalBarChart(mwLabels, [mwSeries], "grouped", "Hours Watched (M)", "Title")
mwLabels = ["The Last Crown S3", "Neon Streets", "Quantum Break", "Midnight Protocol", "Echoes of Tomorrow", "Solar Flare", "The Archivist", "Void Runners", "Starlight Cafe", "Iron Dynasty"]
mwSeries = Series("Hours (M)", [4.2, 3.8, 3.5, 3.1, 2.9, 2.7, 2.5, 2.3, 2.1, 1.9])
watchTimeChart = LineChart(wtMonths, [wtSeries], "natural", "Month", "Watch Time (B hrs)")
wtMonths = ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr"]
wtSeries = Series("Total Watch Time", [1.82, 1.91, 2.05, 2.18, 2.34, 2.47, 2.61, 2.78, 2.65, 2.58, 2.72, 2.84])
genreChart = BarChart(genreLabels, [genreSeries], "grouped", "Genre", "Hours Watched (M)")
genreLabels = ["Drama", "Action", "Comedy", "Sci-Fi", "Thriller", "Documentary", "Horror", "Romance", "Animation", "Reality"]
genreSeries = Series("Hours (M)", [8.4, 6.7, 5.2, 4.8, 4.1, 3.6, 2.9, 2.5, 2.2, 1.8])
secSubscribers = SectionItem("subscribers", "Subscriber Health", [subHeader, subChart, revenuePlanChart])
subHeader = InlineHeader("Growth & Revenue", "New subscribers vs cancellations, and revenue split by plan tier")
subChart = AreaChart(subMonths, [subNewSeries, subCancelSeries], "natural", "Month", "Subscribers (K)")
subMonths = ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr"]
subNewSeries = Series("New Subscribers", [420, 395, 445, 480, 510, 535, 580, 620, 490, 465, 520, 545])
subCancelSeries = Series("Cancellations", [180, 195, 175, 168, 162, 158, 155, 150, 170, 185, 165, 158])
revenuePlanChart = PieChart(planLabels, planValues, "donut", "circular")
planLabels = ["Premium 4K", "Standard HD", "Basic SD", "Mobile Only", "Family Share"]
planValues = [42.3, 28.7, 12.4, 9.8, 6.8]
secTechnical = SectionItem("technical", "Technical Health", [techHeader, bufferingTrendChart, deliveryTable])
techHeader = InlineHeader("Streaming Quality & Delivery", "Buffering trend over time and regional delivery health")
bufferingTrendChart = LineChart(bufMonths, [bufSeries], "natural", "Month", "Buffering Rate (%)")
bufMonths = ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr"]
bufSeries = Series("Buffering Rate", [1.42, 1.28, 1.15, 1.08, 1.02, 0.97, 0.93, 0.89, 0.91, 0.94, 0.88, 0.87])
deliveryTable = Table([delColRegion, delColHealth, delColLatency, delColErrorRate, delColCapacity])
delColRegion = Col("Region", ["United States", "Europe", "Asia-Pacific", "Latin America", "Middle East & Africa", "Global Avg"], "string")
delColHealth = Col("Health Score", [98.7, 97.2, 95.8, 94.1, 92.3, 95.6], "number")
delColLatency = Col("Avg Latency (ms)", [42, 58, 87, 112, 145, 89], "number")
delColErrorRate = Col("Error Rate (%)", [0.08, 0.12, 0.18, 0.24, 0.31, 0.19], "number")
delColCapacity = Col("CDN Capacity Used", ["67%", "71%", "78%", "82%", "69%", "73%"], "string")
secUpcoming = SectionItem("upcoming", "Upcoming & Expiring", [upHeader, releasesList, licensesList])
upHeader = InlineHeader("Content Calendar", "Releases scheduled this month and licenses expiring within 30 days")
releasesList = ListBlock([rel1, rel2, rel3, rel4, rel5], "number", "default")
rel1 = ListItem("The Last Crown S4", "Premieres Apr 12 · 8 episodes · Drama/Thriller", null, null, { type: "continue_conversation", context: "Show me details for The Last Crown S4 release" })
rel2 = ListItem("Neon Streets: Origins", "Premieres Apr 19 · Feature film · Action/Sci-Fi", null, null, { type: "continue_conversation", context: "Show me details for Neon Streets: Origins release" })
rel3 = ListItem("Quantum Break S2", "Premieres Apr 26 · 10 episodes · Sci-Fi", null, null, { type: "continue_conversation", context: "Show me details for Quantum Break S2 release" })
rel4 = ListItem("Midnight Protocol S3", "Premieres Apr 30 · 6 episodes · Thriller", null, null, { type: "continue_conversation", context: "Show me details for Midnight Protocol S3 release" })
rel5 = ListItem("Starlight Cafe Holiday Special", "Premieres Apr 5 · 1 episode · Romance/Comedy", null, null, { type: "continue_conversation", context: "Show me details for Starlight Cafe Holiday Special release" })
licensesList = ListBlock([lic1, lic2, lic3, lic4], "number", "default")
lic1 = ListItem("Iron Dynasty S1-S3", "Expires May 15 · 36 episodes · Action/Historical", null, null, { type: "continue_conversation", context: "Show me renewal options for Iron Dynasty" })
lic2 = ListItem("Void Runners", "Expires May 22 · Feature film · Sci-Fi/Action", null, null, { type: "continue_conversation", context: "Show me renewal options for Void Runners" })
lic3 = ListItem("The Archivist S1", "Expires Jun 3 · 8 episodes · Mystery/Drama", null, null, { type: "continue_conversation", context: "Show me renewal options for The Archivist" })
lic4 = ListItem("Solar Flare", "Expires Jun 18 · Feature film · Sci-Fi/Thriller", null, null, { type: "continue_conversation", context: "Show me renewal options for Solar Flare" })
secDiscovery = SectionItem("discovery", "Discovery Metrics", [discHeader, recoDetailChart, zeroSearchChart])
discHeader = InlineHeader("Search & Recommendations", "How often recommendations convert, and searches that fail to start playback")
recoDetailChart = BarChart(recoMonths, [recoImpressionsSeries, recoClicksSeries], "grouped", "Month", "Count (M)")
recoMonths = ["Nov", "Dec", "Jan", "Feb", "Mar", "Apr"]
recoImpressionsSeries = Series("Impressions", [142, 156, 168, 154, 172, 185])
recoClicksSeries = Series("Clicks", [5.8, 6.4, 7.1, 6.2, 7.4, 7.8])
zeroSearchChart = LineChart(zsMonths, [zsSeries], "natural", "Month", "Zero-Playback Searches (K)")
zsMonths = ["Nov", "Dec", "Jan", "Feb", "Mar", "Apr"]
zsSeries = Series("Searches", [24.1, 22.8, 21.5, 20.9, 19.8, 18.7])
secSplits = SectionItem("splits", "Viewing & Revenue Splits", [splitsHeader, deviceChart, planRevenueTable])
splitsHeader = InlineHeader("Device & Plan Breakdown", "Viewing time by device type and detailed revenue by subscription tier")
deviceChart = PieChart(deviceLabels, deviceValues, "donut", "semiCircular")
deviceLabels = ["Smart TV", "Mobile", "Desktop", "Tablet", "Game Console", "Streaming Stick"]
deviceValues = [38.5, 24.2, 18.7, 9.8, 5.4, 3.4]
planRevenueTable = Table([planColTier, planColSubs, planColARPU, planColRevenue, planColChurn])
planColTier = Col("Plan Tier", ["Premium 4K", "Standard HD", "Basic SD", "Mobile Only", "Family Share"], "string")
planColSubs = Col("Subscribers (M)", [4.2, 6.8, 3.1, 2.4, 1.7], "number")
planColARPU = Col("ARPU ($)", [18.99, 12.99, 7.99, 5.99, 24.99], "number")
planColRevenue = Col("Monthly Rev ($M)", [79.8, 88.3, 24.8, 14.4, 42.5], "number")
planColChurn = Col("Monthly Churn (%)", [2.1, 3.4, 5.8, 7.2, 1.9], "number")
featureFlagsSection = SectionItem("feature-flags", "Feature Flags", [ffHeader, ffTable])
ffHeader = InlineHeader("Platform Feature Toggles", "Current state of runtime feature flags — toggle to enable/disable")
ffTable = Table([ffColName, ffColStatus, ffColDescription, ffColOwner, ffColUpdated])
ffColName = Col("Flag", ["new-reco-engine", "adaptive-bitrate-v2", "social-watch-party", "ai-dubbing-beta", "offline-downloads-4k", "kids-profile-pin", "live-sports-low-latency", "shuffle-play"], "string")
ffColStatus = Col("State", ["ON", "ON", "OFF", "ON", "OFF", "ON", "ON", "OFF"], "string")
ffColDescription = Col("Description", ["ML-based recommendation ranking", "Improved ABR ladder for 4K", "Co-viewing with sync playback", "Auto-generated dubs for top 10 langs", "4K downloads for Premium tier", "PIN protection for kids profiles", "Sub-5s latency for live sports", "Shuffle episodes within series"], "string")
ffColOwner = Col("Owner", ["ML Platform", "Video Engineering", "Product", "ML Platform", "Client Apps", "Trust & Safety", "Live Infrastructure", "Product"], "string")
ffColUpdated = Col("Last Updated", ["Apr 1", "Mar 28", "Feb 14", "Apr 3", "Mar 15", "Jan 20", "Apr 2", "Mar 10"], "string")
promoteForm = Form("promote-title", promoteButtons, [fcTitle, fcPosition, fcDuration, fcRegions, fcNote])
promoteButtons = Buttons([btnPromote, btnPreview], "row")
btnPromote = Button("Promote to Home Screen", { type: "continue_conversation", context: "Promote selected title to home screen with specified configuration" }, "primary")
btnPreview = Button("Preview Placement", { type: "continue_conversation", context: "Show me a preview of how this promotion will appear on the home screen" }, "secondary")
fcTitle = FormControl("Title to Promote", titleSelect, "Search and select a title from the catalog")
titleSelect = Select("promote-title", titleOptions, "Select a title...", { required: true })
titleOptions = [tt1, tt2, tt3, tt4, tt5, tt6, tt7, tt8, tt9, tt10]
tt1 = SelectItem("tlc-s4", "The Last Crown S4 (New Release)")
tt2 = SelectItem("ns-origins", "Neon Streets: Origins (New Release)")
tt3 = SelectItem("qb-s2", "Quantum Break S2 (New Release)")
tt4 = SelectItem("mp-s3", "Midnight Protocol S3 (New Release)")
tt5 = SelectItem("sc-holiday", "Starlight Cafe Holiday Special (New Release)")
tt6 = SelectItem("tlc-s3", "The Last Crown S3 (Top Performer)")
tt7 = SelectItem("neon-streets", "Neon Streets (Top Performer)")
tt8 = SelectItem("quantum-break", "Quantum Break (Top Performer)")
tt9 = SelectItem("midnight-protocol", "Midnight Protocol (Top Performer)")
tt10 = SelectItem("echoes-tomorrow", "Echoes of Tomorrow (Top Performer)")
fcPosition = FormControl("Home Screen Position", positionSelect, "Where on the home screen should this appear?")
positionSelect = Select("promote-position", positionOptions, "Hero Banner", { required: true })
positionOptions = [pos1, pos2, pos3, pos4, pos5]
pos1 = SelectItem("hero", "Hero Banner (Top)")
pos2 = SelectItem("continue-watching", "Continue Watching Row")
pos3 = SelectItem("trending", "Trending Now Row")
pos4 = SelectItem("recommended", "Recommended For You Row")
pos5 = SelectItem("new-releases", "New Releases Row")
fcDuration = FormControl("Promotion Duration", durationSelect, "How long should this promotion run?")
durationSelect = Select("promote-duration", durationOptions, "7 days", { required: true })
durationOptions = [dur1, dur2, dur3, dur4, dur5]
dur1 = SelectItem("3", "3 Days")
dur2 = SelectItem("7", "7 Days")
dur3 = SelectItem("14", "14 Days")
dur4 = SelectItem("30", "30 Days")
dur5 = SelectItem("custom", "Custom Date Range")
fcRegions = FormControl("Target Regions", regionChips, "Select regions where this promotion appears")
regionChips = Chips("promote-regions", "multiple", regionChipItems, {}, ["us", "eu"])
regionChipItems = [rc1, rc2, rc3, rc4, rc5, rc6]
rc1 = ChipItem("us", "United States", rc1icon)
rc1icon = Icon("flag", "flags")
rc2 = ChipItem("eu", "Europe", rc2icon)
rc2icon = Icon("flag", "flags")
rc3 = ChipItem("apac", "Asia-Pacific", rc3icon)
rc3icon = Icon("flag", "flags")
rc4 = ChipItem("latam", "Latin America", rc4icon)
rc4icon = Icon("flag", "flags")
rc5 = ChipItem("mea", "Middle East & Africa", rc5icon)
rc5icon = Icon("flag", "flags")
rc6 = ChipItem("global", "Global", rc6icon)
rc6icon = Icon("globe", "navigation")
fcNote = FormControl("Internal Notes", noteArea, "Optional: context for the team (marketing campaign, partnership, etc.)")
noteArea = TextArea("promote-notes", "e.g. Part of Q2 marketing push, partner co-branding with Samsung...", 3)