@kud/incidents-cli 0.0.0-stage → 0.1.0

package/dist/src/ui/app.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import { PAGE_CHROME, Page, SelectableRow, Spinner, colors, useAppKeys, useListCursor, } from "@kud/ink-ui";
+import { ageOf, isClear, whenLabel, worstFirst, } from "../core/index.js";
+import { declaredText, statusLabel, wordLabel } from "../labels.js";
+const TONE = {
+    error: colors.error,
+    warning: colors.warning,
+    info: colors.info,
+    success: colors.success,
+    muted: colors.muted,
+};
+const MAX_DETAIL_ROWS = 12;
+const FOOTER_AND_COUNTER_ROWS = 3;
+const keepHistory = (previous, next) => previous?.historyLoaded && !next.historyLoaded
+    ? {
+        ...next,
+        recent: previous.recent,
+        historyLoaded: true,
+        historyFailed: previous.historyFailed,
+    }
+    : next;
+const OverviewRow = ({ row, active, nameWidth, }) => {
+    if (!row.record)
+        return (_jsx(SelectableRow, { active: active, children: _jsxs(Box, { children: [_jsx(Box, { width: 16, flexShrink: 0, children: _jsx(Text, { color: colors.muted, children: "\u25CC checking" }) }), _jsx(Box, { width: nameWidth, flexShrink: 0, children: _jsx(Text, { children: row.service.name }) })] }) }));
+    const label = statusLabel(row.record.indicator);
+    const loud = row.record.indicator !== "none" && row.record.indicator !== "link";
+    return (_jsx(SelectableRow, { active: active, children: _jsxs(Box, { children: [_jsx(Box, { width: 16, flexShrink: 0, children: _jsx(Text, { color: TONE[label.tone], children: label.text }) }), _jsx(Box, { width: nameWidth, flexShrink: 0, children: _jsx(Text, { bold: loud, children: row.service.name }) }), _jsx(Text, { bold: loud, color: loud ? undefined : colors.muted, wrap: "truncate-end", children: declaredText(row.record) })] }) }));
+};
+const Overview = ({ rows, cursor, height, note, }) => {
+    const nameWidth = Math.max(...rows.map((r) => r.service.name.length), 7) + 2;
+    const start = Math.max(0, Math.min(cursor - Math.floor(height / 2), rows.length - height));
+    return (_jsxs(Box, { flexDirection: "column", children: [rows.slice(start, start + height).map((row, i) => (_jsx(OverviewRow, { row: row, active: start + i === cursor, nameWidth: nameWidth }, row.service.id))), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: colors.muted, children: "Declared status only: green is not proof your calls work." }), note ? _jsx(Text, { color: colors.muted, children: note }) : null] })] }));
+};
+const Detail = ({ record, busy, }) => {
+    if (!record)
+        return (_jsx(Box, { children: _jsx(Spinner, { label: "Reading the status page\u2026" }) }));
+    const status = statusLabel(record.indicator);
+    const broken = record.components.filter((c) => c.status !== "operational");
+    const healthy = record.components.length - broken.length;
+    const happening = [
+        ...broken.map((c) => ({
+            word: wordLabel(c.status),
+            what: c.name,
+            when: "now",
+        })),
+        ...record.active.map((i) => {
+            const since = ageOf(i.date);
+            return {
+                word: wordLabel(i.impact),
+                what: i.title,
+                when: since ? `since ${since}` : "",
+            };
+        }),
+    ];
+    const current = new Set(record.active.flatMap((i) => [i.link, i.title]).filter(Boolean));
+    const earlier = record.recent
+        .filter((i) => !current.has(i.link) && !current.has(i.title))
+        .slice(0, 7);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: TONE[status.tone], children: status.text }), _jsx(Text, { bold: true, children: `  ${record.description}  ` }), _jsx(Text, { color: colors.muted, children: record.url.replace(/^https:\/\//, "") })] }), happening.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 14, flexShrink: 0, children: _jsx(Text, { color: colors.muted, children: "Status" }) }), _jsx(Box, { width: 44, flexShrink: 0, children: _jsx(Text, { color: colors.muted, children: "What" }) }), _jsx(Text, { color: colors.muted, children: "When" })] }), happening.slice(0, MAX_DETAIL_ROWS).map((h, i) => (_jsxs(Box, { children: [_jsx(Box, { width: 14, flexShrink: 0, children: _jsx(Text, { color: TONE[h.word.tone], children: h.word.text }) }), _jsx(Box, { width: 44, flexShrink: 0, children: _jsx(Text, { wrap: "truncate-end", children: h.what }) }), _jsx(Text, { children: h.when })] }, i))), happening.length > MAX_DETAIL_ROWS ? (_jsx(Text, { color: colors.muted, children: `+${happening.length - MAX_DETAIL_ROWS} more` })) : null] })) : null, broken.length === 0 && healthy > 0 ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.muted, children: `${healthy} components operational` }) })) : null, earlier.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Box, { width: 58, flexShrink: 0, children: _jsx(Text, { color: colors.muted, children: "Earlier" }) }), _jsx(Text, { color: colors.muted, children: "When" })] }), earlier.map((i, n) => (_jsxs(Box, { children: [_jsx(Box, { width: 58, flexShrink: 0, children: _jsx(Text, { color: colors.muted, wrap: "truncate-end", children: i.title }) }), _jsx(Text, { color: colors.muted, children: whenLabel(i.date) })] }, n)))] })) : null, busy && !record.historyLoaded ? (_jsx(Box, { marginTop: 1, children: _jsx(Spinner, { label: "Loading history\u2026" }) })) : null, record.historyFailed ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.muted, children: "History unavailable: its feed could not be read." }) })) : null, record.note ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.muted, children: record.note }) })) : null] }));
+};
+export const App = ({ source, initialDetail, }) => {
+    const { stdout } = useStdout();
+    const [records, setRecords] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [updatedAt, setUpdatedAt] = useState(null);
+    const [detailId, setDetailId] = useState(initialDetail ?? null);
+    const [detailBusy, setDetailBusy] = useState(false);
+    const loadRef = useRef(null);
+    const detailRef = useRef(null);
+    const load = useCallback(() => {
+        loadRef.current?.abort();
+        const controller = new AbortController();
+        loadRef.current = controller;
+        setLoading(true);
+        source
+            .readAll({
+            signal: controller.signal,
+            onRecord: (record) => setRecords((prev) => ({
+                ...prev,
+                [record.id]: keepHistory(prev[record.id], record),
+            })),
+        })
+            .then(() => {
+            setLoading(false);
+            setUpdatedAt(new Date());
+        })
+            .catch(() => undefined);
+    }, [source]);
+    const loadDetail = useCallback((id) => {
+        const service = source.services.find((s) => s.id === id);
+        if (!service)
+            return;
+        detailRef.current?.abort();
+        const controller = new AbortController();
+        detailRef.current = controller;
+        setDetailBusy(true);
+        source
+            .readDetail(service, { signal: controller.signal })
+            .then((record) => {
+            setRecords((prev) => ({ ...prev, [id]: record }));
+            setDetailBusy(false);
+        })
+            .catch(() => undefined);
+    }, [source]);
+    useEffect(() => {
+        load();
+        if (initialDetail)
+            loadDetail(initialDetail);
+        return () => {
+            loadRef.current?.abort();
+            detailRef.current?.abort();
+        };
+    }, []);
+    const rows = useMemo(() => {
+        const known = worstFirst(Object.values(records));
+        const pending = source.services.filter((s) => !(s.id in records));
+        return [
+            ...known.map((record) => ({
+                record,
+                service: source.services.find((s) => s.id === record.id),
+            })),
+            ...pending.map((service) => ({ service })),
+        ];
+    }, [records, source]);
+    const { cursor } = useListCursor(rows.length, {
+        vimKeys: true,
+        isActive: detailId === null,
+    });
+    const openDetail = (id) => {
+        setDetailId(id);
+        if (!records[id]?.historyLoaded)
+            loadDetail(id);
+    };
+    const closeDetail = () => {
+        detailRef.current?.abort();
+        setDetailBusy(false);
+        setDetailId(null);
+    };
+    useAppKeys({
+        onBack: () => {
+            if (detailId === null)
+                return false;
+            closeDetail();
+            return true;
+        },
+    });
+    useInput((input, key) => {
+        if (input === "r")
+            return detailId ? loadDetail(detailId) : load();
+        if (key.return && detailId === null && rows[cursor])
+            openDetail(rows[cursor].service.id);
+    });
+    const trouble = Object.values(records).filter((r) => !isClear(r.indicator));
+    const status = loading
+        ? {
+            text: Object.keys(records).length ? "↻ refreshing…" : "↻ checking…",
+            tone: "busy",
+        }
+        : {
+            text: `updated ${updatedAt?.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }) ?? ""}`,
+            tone: "quiet",
+        };
+    const alert = trouble.length
+        ? `${trouble.length} declaring trouble`
+        : undefined;
+    const critical = trouble.some((r) => ["major", "critical"].includes(r.indicator));
+    if (detailId !== null) {
+        const service = source.services.find((s) => s.id === detailId);
+        return (_jsx(Page, { icon: "\u25C6", title: "Incidents", scope: service?.name, status: status, alert: alert, critical: critical, page: "nested", help: false, hints: [["r", "refresh"]], children: _jsx(Detail, { record: records[detailId], busy: detailBusy }) }));
+    }
+    const height = Math.max(3, (stdout?.rows || 30) - PAGE_CHROME - FOOTER_AND_COUNTER_ROWS - 4);
+    return (_jsx(Page, { icon: "\u25C6", title: "Incidents", count: source.services.length, noun: "service", status: status, alert: alert, critical: critical, counter: rows.length ? `${cursor + 1} of ${rows.length}` : undefined, page: "root", help: false, hints: [
+            ["↑↓", "move"],
+            ["⏎", "open"],
+            ["r", "refresh"],
+        ], children: _jsx(Overview, { rows: rows, cursor: cursor, height: height, note: source.note }) }));
+};

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@kud/incidents-cli",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Which of the services you depend on are declaring trouble right now: vendor status pages in one terminal view.",
+  "type": "module",
+  "bin": {
+    "incidents": "dist/bin/incidents.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsx bin/incidents.ts",
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "node --import tsx --test 'test/**/*.test.ts' 'test/**/*.test.tsx'",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "status",
+    "statuspage",
+    "incidents",
+    "outage",
+    "cli",
+    "tui",
+    "terminal"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kud/incidents-cli"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@kud/ink-ui": "0.44.0",
+    "chalk": "5.6.2",
+    "commander": "14.0.0",
+    "ink": "7.1.0",
+    "js-yaml": "4.3.2",
+    "react": "19.2.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@types/js-yaml": "4.0.9",
+    "@types/node": "24.3.1",
+    "@types/react": "19.2.17",
+    "eslint": "10.14.0",
+    "ink-testing-library": "4.0.0",
+    "prettier": "3.10.1",
+    "tsx": "4.20.5",
+    "typescript": "5.9.2",
+    "typescript-eslint": "8.72.2"
+  }
+}