root = Card([pageHeader, regionForm, kpiBlock, chartsSection, incidentsSection, endpointsSection, alertForm, followUps])
pageHeader = CardHeader("Service Health Dashboard", "Production · Last updated 2026-04-15 14:32 UTC")
regionForm = Form("region-filter", regionButtons, [fcRegion])
regionButtons = Buttons([btnApplyRegion], "row")
btnApplyRegion = Button("Apply Region", { type: "continue_conversation", context: "Filter all metrics to us-east-1" }, "primary")
fcRegion = FormControl("Region", regionSelect, "Select a region to scope all metrics below")
regionSelect = Select("region", [reg1, reg2, reg3, reg4, reg5], "All Regions", { required: false })
reg1 = SelectItem("all", "All Regions")
reg2 = SelectItem("us-east-1", "US East (N. Virginia)")
reg3 = SelectItem("us-west-2", "US West (Oregon)")
reg4 = SelectItem("eu-west-1", "EU West (Ireland)")
reg5 = SelectItem("ap-southeast-1", "Asia Pacific (Singapore)")
kpiBlock = SnippetCardBlock([kpiUptime, kpiErrorRate, kpiP99, kpiActiveIncidents], "grid", true)
kpiUptime = SnippetCardItem("uptime-qtr", kpiUptimeLhs, kpiUptimeRhs)
kpiUptimeLhs = IconText(kpiUptimeIcon, "success", "m", "Uptime This Quarter", "Q2 2026 target ≥ 99.95%", false, "horizontal")
kpiUptimeIcon = Icon("shield-check", "security")
kpiUptimeRhs = BoldText("number", "99.97%", "+0.02% vs target", "metric")
kpiErrorRate = SnippetCardItem("error-rate-now", kpiErrorRateLhs, kpiErrorRateRhs)
kpiErrorRateLhs = IconText(kpiErrorRateIcon, "danger", "m", "Error Rate (Now)", "5-min rolling window", false, "horizontal")
kpiErrorRateIcon = Icon("alert-triangle", "alerts")
kpiErrorRateRhs = BoldText("number", "0.23%", "-0.04% vs 1h ago", "metric")
kpiP99 = SnippetCardItem("p99-latency", kpiP99Lhs, kpiP99Rhs)
kpiP99Lhs = IconText(kpiP99Icon, "warning", "m", "P99 Latency", "Global aggregate", false, "horizontal")
kpiP99Icon = Icon("timer", "time")
kpiP99Rhs = BoldText("number", "342ms", "+18ms vs 1h ago", "metric")
kpiActiveIncidents = SnippetCardItem("active-incidents", kpiActiveLhs, kpiActiveRhs)
kpiActiveLhs = IconText(kpiActiveIcon, "info", "m", "Active Incidents", "Open & acknowledging", false, "horizontal")
kpiActiveIcon = Icon("git-branch", "development")
kpiActiveRhs = BoldText("number", "3", "1 critical, 2 warning", "text")
chartsSection = SectionBlock([secResources, secErrorRate], false)
secResources = SectionItem("resources", "CPU & Memory (Last 24 Hours)", [resourcesTabs])
resourcesTabs = Tabs([tabCpu, tabMemory])
tabCpu = TabItem("cpu", "CPU Usage", [cpuChart])
cpuChart = LineChart(cpuHours, [cpuSeries], "natural", "Hour (UTC)", "CPU %")
cpuHours = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
cpuSeries = Series("CPU %", [12, 11, 10, 9, 9, 11, 18, 28, 35, 42, 48, 52, 55, 58, 61, 63, 65, 62, 58, 52, 45, 38, 28, 18])
tabMemory = TabItem("memory", "Memory Usage", [memoryChart])
memoryChart = LineChart(memHours, [memSeries], "natural", "Hour (UTC)", "Memory %")
memHours = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
memSeries = Series("Memory %", [42, 41, 40, 39, 39, 40, 44, 52, 58, 62, 65, 67, 68, 69, 70, 71, 72, 71, 69, 65, 60, 55, 50, 46])
secErrorRate = SectionItem("error-trend", "Error Rate Trend (Last 24 Hours)", [errorRateChart])
errorRateChart = AreaChart(errHours, [errSeries], "natural", "Hour (UTC)", "Error Rate %")
errHours = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
errSeries = Series("Error Rate %", [0.12, 0.11, 0.10, 0.09, 0.09, 0.10, 0.15, 0.22, 0.28, 0.31, 0.33, 0.35, 0.34, 0.32, 0.30, 0.28, 0.26, 0.25, 0.24, 0.23, 0.22, 0.21, 0.18, 0.15])
incidentsSection = SectionBlock([secIncidents], false)
secIncidents = SectionItem("incidents", "Open Incidents", [incidentsTable, incidentsActions])
incidentsTable = Table([colIncId, colIncTitle, colIncSeverity, colIncRegion, colIncSince, colIncOwner, colIncAction])
colIncId = Col("ID", ["INC-20260415-001", "INC-20260415-002", "INC-20260415-003"], "string")
colIncTitle = Col("Title", ["Payment API latency spike", "Auth service intermittent 5xx", "Cache cluster node unhealthy"], "string")
colIncSeverity = Col("Severity", ["Critical", "Warning", "Warning"], "string")
colIncRegion = Col("Region", ["us-east-1", "eu-west-1", "us-east-1"], "string")
colIncSince = Col("Since (UTC)", ["2026-04-15 13:42", "2026-04-15 12:18", "2026-04-15 11:05"], "string")
colIncOwner = Col("Owner", ["alex.chen", "priya.shah", "unassigned"], "string")
colIncAction = Col("Action", ["Acknowledge", "Acknowledge", "Acknowledge"], "action")
incidentsActions = Buttons([btnAck1, btnAck2, btnAck3], "row")
btnAck1 = Button("Acknowledge INC-001", { type: "continue_conversation", context: "Acknowledge incident INC-20260415-001: Payment API latency spike" }, "primary", "normal", "small")
btnAck2 = Button("Acknowledge INC-002", { type: "continue_conversation", context: "Acknowledge incident INC-20260415-002: Auth service intermittent 5xx" }, "secondary", "normal", "small")
btnAck3 = Button("Acknowledge INC-003", { type: "continue_conversation", context: "Acknowledge incident INC-20260415-003: Cache cluster node unhealthy" }, "secondary", "normal", "small")
endpointsSection = SectionBlock([secEndpoints], false)
secEndpoints = SectionItem("endpoints", "Five Slowest Endpoints (P99 Latency)", [endpointsTable])
endpointsTable = Table([colEpPath, colEpMethod, colEpP99, colEpP95, colEpRps, colEpErrors, colEpTrend])
colEpPath = Col("Endpoint", ["/api/v2/payments/charge", "/api/v1/auth/token", "/api/v3/orders/history", "/api/v2/users/profile", "/api/v1/search/products"], "string")
colEpMethod = Col("Method", ["POST", "POST", "GET", "GET", "GET"], "string")
colEpP99 = Col("P99 (ms)", [1240, 980, 870, 720, 650], "number")
colEpP95 = Col("P95 (ms)", [890, 720, 640, 510, 480], "number")
colEpRps = Col("RPS", [145, 320, 89, 210, 410], "number")
colEpErrors = Col("Error %", [2.1, 1.8, 0.9, 0.4, 0.2], "string")
colEpTrend = Col("Trend (1h)", ["↑ 18%", "↑ 12%", "→ 0%", "↓ 5%", "↓ 3%"], "string")
alertForm = Form("alert-thresholds", alertButtons, [fcCpuThreshold, fcMemThreshold, fcErrorThreshold, fcLatencyThreshold])
alertButtons = Buttons([btnSaveAlerts, btnResetAlerts], "row")
btnSaveAlerts = Button("Save Thresholds", { type: "continue_conversation", context: "Save alert thresholds: CPU 80%, Memory 85%, Error Rate 1%, P99 Latency 500ms" }, "primary")
btnResetAlerts = Button("Reset to Defaults", { type: "continue_conversation", context: "Reset all alert thresholds to default values" }, "secondary")
fcCpuThreshold = FormControl("CPU Alert Threshold", cpuSlider, "Trigger alert when CPU exceeds this percentage for 5 minutes")
cpuSlider = Slider("cpu-threshold", "discrete", 50, 95, 5, [80], "CPU %")
fcMemThreshold = FormControl("Memory Alert Threshold", memSlider, "Trigger alert when memory exceeds this percentage for 5 minutes")
memSlider = Slider("mem-threshold", "discrete", 50, 95, 5, [85], "Memory %")
fcErrorThreshold = FormControl("Error Rate Alert Threshold", errSlider, "Trigger alert when error rate exceeds this percentage for 2 minutes")
errSlider = Slider("error-threshold", "discrete", 0.1, 5, 0.1, [1.0], "Error Rate %")
fcLatencyThreshold = FormControl("P99 Latency Alert Threshold", latSlider, "Trigger alert when P99 latency exceeds this value for 3 minutes")
latSlider = Slider("latency-threshold", "discrete", 100, 2000, 50, [500], "Latency (ms)")
followUps = FollowUpBlock([fu1, fu2, fu3, fu4])
fu1 = FollowUpItem("Show me the full incident timeline for INC-001")
fu2 = FollowUpItem("Compare error rates across all regions")
fu3 = FollowUpItem("Generate a postmortem template for the payment API incident")
fu4 = FollowUpItem("Set up a new alert for database connection pool exhaustion")