@amiable-dev/docusaurus-plugin-stentorosaur 0.20.0 → 0.21.0

package/lib/context/StatusDataProvider.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: StatusDataProvider Context
+ *
+ * Centralized context provider for status data fetching.
+ * Fetches daily-summary.json and current.json once, provides merged data to children.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+import React, { type ReactNode } from 'react';
+import type { DailySummaryFile } from '../types';
+/**
+ * Compact reading format from current.json
+ */
+interface CurrentReading {
+    t: number;
+    svc: string;
+    state: 'up' | 'down' | 'degraded' | 'maintenance';
+    code: number;
+    lat: number;
+    err?: string;
+}
+/**
+ * Current status file structure
+ */
+interface CurrentStatus {
+    readings: CurrentReading[];
+}
+/**
+ * Day status for UptimeBar visualization
+ */
+export interface DayStatus {
+    /** ISO date string (YYYY-MM-DD) */
+    date: string;
+    /** Uptime percentage (0-100) */
+    uptimePercent: number;
+    /** Number of incidents */
+    incidents: number;
+    /** Total checks performed */
+    checksTotal: number;
+    /** Successful checks */
+    checksPassed: number;
+    /** Computed status based on uptime thresholds */
+    status: 'operational' | 'degraded' | 'outage' | 'no-data';
+    /** Average latency in ms (optional) */
+    avgLatencyMs?: number | null;
+    /** P95 latency in ms (optional) */
+    p95LatencyMs?: number | null;
+}
+/**
+ * Context value shape for StatusDataProvider
+ */
+export interface StatusDataContextValue {
+    /** Daily summary data (days 1-89) */
+    dailySummary: DailySummaryFile | null;
+    /** Current status data (today's readings) */
+    currentStatus: CurrentStatus | null;
+    /** Whether data is being fetched */
+    loading: boolean;
+    /** Error if data fetch failed */
+    error: Error | null;
+    /**
+     * Get merged 90-day data for a service.
+     * Combines today from current.json with history from daily-summary.json.
+     */
+    getMerged90Days: (serviceName: string) => DayStatus[];
+    /** Refetch data */
+    refresh: () => Promise<void>;
+}
+/**
+ * Props for StatusDataProvider
+ */
+export interface StatusDataProviderProps {
+    /** Base URL for status data files (e.g., '/status-data') */
+    baseUrl: string;
+    /** Children to render */
+    children: ReactNode;
+}
+/**
+ * StatusDataProvider component
+ *
+ * Provides centralized status data fetching and caching for child components.
+ * Implements the hybrid read pattern from ADR-002:
+ * - Fetches daily-summary.json for historical data (days 1-89)
+ * - Fetches current.json for today's live data
+ * - Merges them for complete 90-day view
+ */
+export declare function StatusDataProvider({ baseUrl, children, }: StatusDataProviderProps): React.ReactElement;
+/**
+ * Hook to access status data context
+ *
+ * @throws Error if used outside StatusDataProvider
+ */
+export declare function useStatusData(): StatusDataContextValue;
+export type { CurrentReading, CurrentStatus };
+//# sourceMappingURL=StatusDataProvider.d.ts.map

package/lib/context/StatusDataProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDataProvider.d.ts","sourceRoot":"","sources":["../../src/context/StatusDataProvider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAqB,MAAM,UAAU,CAAC;AAEpE;;GAEG;AACH,UAAU,cAAc;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,UAAU,aAAa;IACrB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,MAAM,EAAE,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1D,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,6CAA6C;IAC7C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,oCAAoC;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,eAAe,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;IACtD,mBAAmB;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgID;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAgK9C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,IAAI,sBAAsB,CAMtD;AAGD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC"}

package/lib/context/StatusDataProvider.js

@@ -0,0 +1,266 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusDataProvider = StatusDataProvider;
+exports.useStatusData = useStatusData;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: StatusDataProvider Context
+ *
+ * Centralized context provider for status data fetching.
+ * Fetches daily-summary.json and current.json once, provides merged data to children.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+const react_1 = require("react");
+// Create context with undefined default (will throw if used outside provider)
+const StatusDataContext = (0, react_1.createContext)(undefined);
+/**
+ * Uptime thresholds for status calculation (from ADR-004)
+ */
+const THRESHOLDS = {
+    OPERATIONAL: 99, // >= 99% = operational
+    DEGRADED: 95, // >= 95% = degraded, < 95% = outage
+};
+/**
+ * Stale data threshold (24 hours in milliseconds)
+ */
+const STALE_THRESHOLD_MS = 24 * 60 * 60 * 1000;
+/**
+ * Calculate status from uptime percentage
+ */
+function calculateStatus(uptimePercent, checksTotal) {
+    if (checksTotal === 0)
+        return 'no-data';
+    if (uptimePercent >= THRESHOLDS.OPERATIONAL)
+        return 'operational';
+    if (uptimePercent >= THRESHOLDS.DEGRADED)
+        return 'degraded';
+    return 'outage';
+}
+/**
+ * Calculate p95 latency from an array of latency values
+ */
+function calculateP95(latencies) {
+    if (latencies.length === 0)
+        return null;
+    const sorted = [...latencies].sort((a, b) => a - b);
+    const index = Math.ceil(sorted.length * 0.95) - 1;
+    return sorted[Math.max(0, index)];
+}
+/**
+ * Group readings by date for a specific service
+ */
+function groupReadingsByDate(readings, serviceName) {
+    const groups = new Map();
+    const lowerServiceName = serviceName.toLowerCase();
+    for (const reading of readings) {
+        if (reading.svc.toLowerCase() !== lowerServiceName)
+            continue;
+        const date = new Date(reading.t).toISOString().split('T')[0];
+        if (!groups.has(date)) {
+            groups.set(date, []);
+        }
+        groups.get(date).push(reading);
+    }
+    return groups;
+}
+/**
+ * Aggregate readings for a specific day into a DayStatus
+ */
+function aggregateDayReadings(date, readings) {
+    const checksTotal = readings.length;
+    const checksPassed = readings.filter((r) => r.state === 'up' || r.state === 'maintenance').length;
+    const uptimePercent = checksTotal > 0 ? (checksPassed / checksTotal) * 100 : 0;
+    const latencies = readings.filter((r) => r.state === 'up').map((r) => r.lat);
+    const avgLatencyMs = latencies.length > 0
+        ? Math.round(latencies.reduce((sum, lat) => sum + lat, 0) / latencies.length)
+        : null;
+    const p95LatencyMs = calculateP95(latencies);
+    // Count incidents (transitions from up to down)
+    let incidentCount = 0;
+    for (let i = 1; i < readings.length; i++) {
+        if (readings[i - 1].state === 'up' && readings[i].state === 'down') {
+            incidentCount++;
+        }
+    }
+    return {
+        date,
+        uptimePercent,
+        incidents: incidentCount,
+        checksTotal,
+        checksPassed,
+        status: calculateStatus(uptimePercent, checksTotal),
+        avgLatencyMs,
+        p95LatencyMs,
+    };
+}
+/**
+ * Convert DailySummaryEntry to DayStatus
+ */
+function summaryEntryToDayStatus(entry) {
+    const uptimePercent = entry.uptimePct * 100;
+    return {
+        date: entry.date,
+        uptimePercent,
+        incidents: entry.incidentCount,
+        checksTotal: entry.checksTotal,
+        checksPassed: entry.checksPassed,
+        status: calculateStatus(uptimePercent, entry.checksTotal),
+        avgLatencyMs: entry.avgLatencyMs,
+        p95LatencyMs: entry.p95LatencyMs,
+    };
+}
+/**
+ * StatusDataProvider component
+ *
+ * Provides centralized status data fetching and caching for child components.
+ * Implements the hybrid read pattern from ADR-002:
+ * - Fetches daily-summary.json for historical data (days 1-89)
+ * - Fetches current.json for today's live data
+ * - Merges them for complete 90-day view
+ */
+function StatusDataProvider({ baseUrl, children, }) {
+    const [dailySummary, setDailySummary] = (0, react_1.useState)(null);
+    const [currentStatus, setCurrentStatus] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [summaryFailed, setSummaryFailed] = (0, react_1.useState)(false);
+    const [currentFailed, setCurrentFailed] = (0, react_1.useState)(false);
+    /**
+     * Fetch both data files in parallel
+     */
+    const fetchData = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        setError(null);
+        setSummaryFailed(false);
+        setCurrentFailed(false);
+        let summaryOk = false;
+        let currentOk = false;
+        try {
+            // Fetch both files in parallel
+            const [summaryResponse, currentResponse] = await Promise.all([
+                fetch(`${baseUrl}/daily-summary.json`).catch(() => null),
+                fetch(`${baseUrl}/current.json`).catch(() => null),
+            ]);
+            // Handle summary response
+            if (summaryResponse?.ok) {
+                try {
+                    const data = await summaryResponse.json();
+                    setDailySummary(data);
+                    summaryOk = true;
+                    // Check for stale data
+                    if (data.lastUpdated) {
+                        const lastUpdatedTime = new Date(data.lastUpdated).getTime();
+                        const now = Date.now();
+                        if (now - lastUpdatedTime > STALE_THRESHOLD_MS) {
+                            console.warn(`[StatusDataProvider] Data is stale (last updated: ${data.lastUpdated})`);
+                        }
+                    }
+                }
+                catch {
+                    setSummaryFailed(true);
+                }
+            }
+            else {
+                setSummaryFailed(true);
+            }
+            // Handle current response
+            if (currentResponse?.ok) {
+                try {
+                    const data = await currentResponse.json();
+                    // Handle both array and object with readings property
+                    const readings = Array.isArray(data) ? data : data.readings || [];
+                    setCurrentStatus({ readings });
+                    currentOk = true;
+                }
+                catch {
+                    setCurrentFailed(true);
+                }
+            }
+            else {
+                setCurrentFailed(true);
+            }
+            // Only set error if both files failed
+            if (!summaryOk && !currentOk) {
+                setError(new Error('No data available'));
+            }
+            setLoading(false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error('Network error'));
+            setLoading(false);
+        }
+    }, [baseUrl]);
+    // Fetch data on mount
+    (0, react_1.useEffect)(() => {
+        fetchData();
+    }, [fetchData]);
+    /**
+     * Get merged 90-day data for a service
+     */
+    const getMerged90Days = (0, react_1.useCallback)((serviceName) => {
+        // Return empty array if no data or unknown service
+        const lowerServiceName = serviceName.toLowerCase();
+        const entries = [];
+        const today = new Date().toISOString().split('T')[0];
+        // Get historical data from summary
+        const historicalEntries = dailySummary?.services?.[lowerServiceName] ||
+            dailySummary?.services?.[serviceName] ||
+            [];
+        // Get today's readings from current.json
+        const todayReadings = currentStatus?.readings
+            ? groupReadingsByDate(currentStatus.readings, serviceName).get(today) ||
+                []
+            : [];
+        // Add today's aggregated data if we have readings
+        if (todayReadings.length > 0) {
+            // Sort by timestamp for accurate incident counting
+            todayReadings.sort((a, b) => a.t - b.t);
+            entries.push(aggregateDayReadings(today, todayReadings));
+        }
+        // Add historical entries (filter out today if it exists in summary)
+        for (const entry of historicalEntries) {
+            if (entry.date !== today) {
+                entries.push(summaryEntryToDayStatus(entry));
+            }
+        }
+        // Sort by date descending (most recent first)
+        entries.sort((a, b) => b.date.localeCompare(a.date));
+        // Limit to 90 days
+        return entries.slice(0, 90);
+    }, [dailySummary, currentStatus]);
+    /**
+     * Refresh data (re-fetch)
+     */
+    const refresh = (0, react_1.useCallback)(async () => {
+        await fetchData();
+    }, [fetchData]);
+    // Memoize context value
+    const value = (0, react_1.useMemo)(() => ({
+        dailySummary,
+        currentStatus,
+        loading,
+        error,
+        getMerged90Days,
+        refresh,
+    }), [dailySummary, currentStatus, loading, error, getMerged90Days, refresh]);
+    return ((0, jsx_runtime_1.jsx)(StatusDataContext.Provider, { value: value, children: children }));
+}
+/**
+ * Hook to access status data context
+ *
+ * @throws Error if used outside StatusDataProvider
+ */
+function useStatusData() {
+    const context = (0, react_1.useContext)(StatusDataContext);
+    if (context === undefined) {
+        throw new Error('useStatusData must be used within a StatusDataProvider');
+    }
+    return context;
+}

package/lib/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../src/options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,8BAA8B,CAAC;AACjD,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAC,aAAa,EAAc,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnE,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,aAAa,CAqBlD,CAAC;AAmIF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,6BA2CzB,CAAC;AAEL;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,UAAU,CAoCb;AA8CD,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,OAAO,GACR,EAAE,uBAAuB,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG,aAAa,CAEvE"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../src/options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,8BAA8B,CAAC;AACjD,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAC,aAAa,EAAc,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnE,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,aAAa,CAqBlD,CAAC;AAmIF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,6BA2CzB,CAAC;AAEL;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,UAAU,CAoCb;AA+CD,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,OAAO,GACR,EAAE,uBAAuB,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG,aAAa,CAEvE"}

package/lib/options.js

@@ -257,6 +257,7 @@ const pluginOptionsSchema = utils_validation_1.Joi.object({
     defaultSLO: utils_validation_1.Joi.number().min(0).max(100).default(exports.DEFAULT_OPTIONS.defaultSLO),
     systemSLOs: utils_validation_1.Joi.object().pattern(utils_validation_1.Joi.string(), utils_validation_1.Joi.number().min(0).max(100)).default(exports.DEFAULT_OPTIONS.systemSLOs),
     statusView: utils_validation_1.Joi.string().valid('default', 'upptime').default('default'),
+    statusCardLayout: utils_validation_1.Joi.string().valid('minimal', 'detailed').default('minimal'),
     uptimeConfig: utils_validation_1.Joi.object({
         sections: utils_validation_1.Joi.array().items(utils_validation_1.Joi.object({
             id: utils_validation_1.Joi.string().valid('active-incidents', 'live-status', 'charts', 'scheduled-maintenance', 'past-maintenance', 'past-incidents').required(),

package/lib/theme/StatusBadge/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: StatusBadge Component
+ *
+ * Status indicator badge with status text and icon.
+ * Supports i18n via customizable labels and size variants.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+import React from 'react';
+/**
+ * Status types supported by the badge
+ */
+export type StatusType = 'up' | 'degraded' | 'down' | 'maintenance';
+/**
+ * Custom labels for i18n support
+ */
+export interface StatusLabels {
+    up?: string;
+    degraded?: string;
+    down?: string;
+    maintenance?: string;
+}
+/**
+ * Size variants
+ */
+export type StatusBadgeSize = 'sm' | 'md' | 'lg';
+/**
+ * Props for StatusBadge component
+ */
+export interface StatusBadgeProps {
+    /** Current status */
+    status: StatusType;
+    /** Custom labels for i18n */
+    labels?: StatusLabels;
+    /** Size variant (default: 'md') */
+    size?: StatusBadgeSize;
+    /** Optional additional className */
+    className?: string;
+}
+/**
+ * StatusBadge Component
+ *
+ * Displays a status indicator with colored dot and label text.
+ * Designed for accessibility with ARIA role and visual icon.
+ */
+export declare function StatusBadge({ status, labels, size, className, }: StatusBadgeProps): React.ReactElement;
+export default StatusBadge;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/StatusBadge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/StatusBadge/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,qBAAqB;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,mCAAmC;IACnC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyCD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,MAAM,EACN,IAAW,EACX,SAAS,GACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAuBvC;AAGD,eAAe,WAAW,CAAC"}

package/lib/theme/StatusBadge/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBadge = StatusBadge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Default labels for each status
+ */
+const DEFAULT_LABELS = {
+    up: 'Operational',
+    degraded: 'Degraded',
+    down: 'Major Outage',
+    maintenance: 'Maintenance',
+};
+/**
+ * Status icons for visual indication (accessible, works with or without color)
+ */
+const STATUS_ICONS = {
+    up: '●',
+    degraded: '●',
+    down: '●',
+    maintenance: '●',
+};
+/**
+ * CSS class mapping for status types
+ */
+const STATUS_CLASS_MAP = {
+    up: styles_module_css_1.default.statusUp,
+    degraded: styles_module_css_1.default.statusDegraded,
+    down: styles_module_css_1.default.statusDown,
+    maintenance: styles_module_css_1.default.statusMaintenance,
+};
+/**
+ * CSS class mapping for sizes
+ */
+const SIZE_CLASS_MAP = {
+    sm: styles_module_css_1.default.sizeSm,
+    md: styles_module_css_1.default.sizeMd,
+    lg: styles_module_css_1.default.sizeLg,
+};
+/**
+ * StatusBadge Component
+ *
+ * Displays a status indicator with colored dot and label text.
+ * Designed for accessibility with ARIA role and visual icon.
+ */
+function StatusBadge({ status, labels, size = 'md', className, }) {
+    // Merge custom labels with defaults
+    const resolvedLabels = {
+        ...DEFAULT_LABELS,
+        ...labels,
+    };
+    const label = resolvedLabels[status];
+    const icon = STATUS_ICONS[status];
+    const statusClass = STATUS_CLASS_MAP[status];
+    const sizeClass = SIZE_CLASS_MAP[size];
+    return ((0, jsx_runtime_1.jsxs)("span", { className: `${styles_module_css_1.default.statusBadge} ${statusClass} ${sizeClass} ${className || ''}`, role: "status", children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.statusIcon, "aria-hidden": "true", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.statusLabel, children: label })] }));
+}
+// Default export for easier imports
+exports.default = StatusBadge;

package/lib/theme/StatusBadge/styles.module.css

@@ -0,0 +1,120 @@
+/**
+ * ADR-004: StatusBadge Styles
+ *
+ * Status indicator badge with status text and icon.
+ * Uses CSS variables for theming.
+ */
+
+/* CSS Variables for status colors (can be overridden by theme) */
+:root {
+  --status-operational: #22c55e;
+  --status-degraded: #eab308;
+  --status-outage: #ef4444;
+  --status-maintenance: #3b82f6;
+  --status-no-data: #9ca3af;
+}
+
+/* Base badge styles */
+.statusBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  white-space: nowrap;
+}
+
+/* Status icon (colored dot) */
+.statusIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+/* Status label */
+.statusLabel {
+  font-family: inherit;
+}
+
+/* Size variants */
+.sizeSm {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.5rem;
+}
+
+.sizeSm .statusIcon {
+  font-size: 0.5rem;
+}
+
+.sizeMd {
+  font-size: 0.875rem;
+  padding: 0.25rem 0.75rem;
+}
+
+.sizeMd .statusIcon {
+  font-size: 0.625rem;
+}
+
+.sizeLg {
+  font-size: 1rem;
+  padding: 0.375rem 1rem;
+}
+
+.sizeLg .statusIcon {
+  font-size: 0.75rem;
+}
+
+/* Status colors */
+.statusUp {
+  color: var(--status-operational);
+  background-color: rgba(34, 197, 94, 0.1);
+}
+
+.statusUp .statusIcon {
+  color: var(--status-operational);
+}
+
+.statusDegraded {
+  color: var(--status-degraded);
+  background-color: rgba(234, 179, 8, 0.1);
+}
+
+.statusDegraded .statusIcon {
+  color: var(--status-degraded);
+}
+
+.statusDown {
+  color: var(--status-outage);
+  background-color: rgba(239, 68, 68, 0.1);
+}
+
+.statusDown .statusIcon {
+  color: var(--status-outage);
+}
+
+.statusMaintenance {
+  color: var(--status-maintenance);
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+.statusMaintenance .statusIcon {
+  color: var(--status-maintenance);
+}
+
+/* Dark mode support */
+[data-theme='dark'] .statusUp {
+  background-color: rgba(34, 197, 94, 0.15);
+}
+
+[data-theme='dark'] .statusDegraded {
+  background-color: rgba(234, 179, 8, 0.15);
+}
+
+[data-theme='dark'] .statusDown {
+  background-color: rgba(239, 68, 68, 0.15);
+}
+
+[data-theme='dark'] .statusMaintenance {
+  background-color: rgba(59, 130, 246, 0.15);
+}