github-actions-watcher 0.2.0 → 0.2.2

package/README.md

@@ -2,12 +2,20 @@
 
 A terminal UI for monitoring GitHub Actions workflow runs. Auto-detects the repo from your current directory, shows recent runs, and lets you drill into jobs and steps -- all without leaving the terminal.
 
+## Quick start
+
+```
+npx github-actions-watcher
+```
+
 ## Install
 
-```bash
+```
 npm install -g github-actions-watcher
 ```
 
+Then run `ghaw` from any directory with a GitHub remote.
+
 Requires the [GitHub CLI](https://cli.github.com/) (`gh`) to be installed and authenticated.
 
 ## Usage

package/dist/app.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
 import { Box, Text, useApp, useInput } from "ink";
-import Spinner from "ink-spinner";
 import { fetchRuns, fetchRunDetail } from "./lib/gh.js";
 import { useRepo } from "./hooks/use-repo.js";
 import { usePolling } from "./hooks/use-polling.js";
-import { useCountdown } from "./hooks/use-countdown.js";
 import { Header } from "./components/header.js";
 import { Footer } from "./components/footer.js";
 import { RunList } from "./components/run-list.js";
@@ -28,7 +26,8 @@ export function App({ interval }) {
         return fetchRuns(repo);
     }, [repo]);
     const { data: runs, setData: setRuns, loading: runsLoading, error: runsError, refresh: refreshRuns, } = usePolling(runsFetcher, interval, !!repo);
-    const { secondsLeft, reset: resetCountdown } = useCountdown(interval, !!repo);
+    const [resetKey, setResetKey] = useState(0);
+    const resetCountdown = useCallback(() => setResetKey((k) => k + 1), []);
     // Fetch detail
     const fetchDetail = useCallback(async () => {
         if (!repo || selectedRunId === null)
@@ -101,7 +100,7 @@ export function App({ interval }) {
     }, []);
     // Loading state
     if (repoLoading) {
-        return (_jsxs(Text, { children: [_jsx(Spinner, { type: "dots" }), " Detecting repository..."] }));
+        return _jsx(Text, { dimColor: true, children: "Detecting repository..." });
     }
     if (repoError && !repo) {
         return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "GitHub Actions Watcher" }) }), _jsx(Text, { color: "yellow", children: "No GitHub repository detected in this directory." }), _jsx(Text, { dimColor: true, children: "To get started, either:" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: ["  cd into a directory with a GitHub remote and run ", _jsx(Text, { bold: true, children: "ghaw" })] }), _jsxs(Text, { children: ["  or type a repo below (e.g. ", _jsx(Text, { bold: true, children: "owner/repo" }), ")"] })] }), _jsx(RepoInput, { currentRepo: "", onConfirm: (r) => {
@@ -111,5 +110,5 @@ export function App({ interval }) {
     }
     if (!repo)
         return null;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { repo: repo, loading: runsLoading || detailLoading }), runsError && view === "list" && (_jsxs(Text, { color: "red", children: ["Error: ", runsError] })), view === "list" && runs && (_jsx(RunList, { runs: runs, selectedIndex: selectedIndex, onSelect: setSelectedIndex, onEnter: handleDrillIn, isActive: view === "list" })), view === "detail" && (_jsx(RunDetailView, { detail: detail, loading: detailLoading, error: detailError, onBack: handleBack, onOpen: handleOpenInBrowser, onRefresh: fetchDetail, isActive: view === "detail", scrollOffset: detailScrollOffset, onScroll: setDetailScrollOffset })), view === "repo-input" && (_jsx(RepoInput, { currentRepo: repo, onConfirm: handleRepoConfirm, onCancel: handleRepoCancel, isActive: view === "repo-input" })), _jsx(Footer, { view: view, secondsLeft: secondsLeft })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { repo: repo, loading: runsLoading || detailLoading }), runsError && view === "list" && (_jsxs(Text, { color: "red", children: ["Error: ", runsError] })), view === "list" && runs && (_jsx(RunList, { runs: runs, selectedIndex: selectedIndex, onSelect: setSelectedIndex, onEnter: handleDrillIn, isActive: view === "list" })), view === "detail" && (_jsx(RunDetailView, { detail: detail, loading: detailLoading, error: detailError, onBack: handleBack, onOpen: handleOpenInBrowser, onRefresh: fetchDetail, isActive: view === "detail", scrollOffset: detailScrollOffset, onScroll: setDetailScrollOffset })), view === "repo-input" && (_jsx(RepoInput, { currentRepo: repo, onConfirm: handleRepoConfirm, onCancel: handleRepoCancel, isActive: view === "repo-input" })), _jsx(Footer, { view: view, intervalMs: interval, resetKey: resetKey })] }));
 }

package/dist/components/countdown.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    intervalMs: number;
+    enabled: boolean;
+    resetKey: number;
+}
+export declare function Countdown({ intervalMs, enabled, resetKey }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/countdown.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "ink";
+import { useCountdown } from "../hooks/use-countdown.js";
+export function Countdown({ intervalMs, enabled, resetKey }) {
+    const { secondsLeft } = useCountdown(intervalMs, enabled, resetKey);
+    if (!enabled)
+        return null;
+    return _jsxs(Text, { dimColor: true, children: [" | refresh in ", secondsLeft, "s"] });
+}

package/dist/components/footer.d.ts

@@ -1,7 +1,8 @@
 import type { View } from "../lib/types.js";
 interface Props {
     view: View;
-    secondsLeft?: number;
+    intervalMs: number;
+    resetKey: number;
 }
-export declare function Footer({ view, secondsLeft }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ view, intervalMs, resetKey }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/footer.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { Countdown } from "./countdown.js";
 const keys = {
     list: "up/down: navigate | enter: details | s: switch repo | r: refresh | q: quit",
     detail: "up/down: scroll | esc: back | o: open in browser | r: refresh | q: quit",
     "repo-input": "enter: confirm | esc: cancel",
 };
-export function Footer({ view, secondsLeft }) {
-    const showCountdown = secondsLeft !== undefined && (view === "list" || view === "detail");
-    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: keys[view] }), showCountdown && (_jsxs(Text, { dimColor: true, children: [" | refresh in ", secondsLeft, "s"] }))] }));
+export function Footer({ view, intervalMs, resetKey }) {
+    const showCountdown = view === "list" || view === "detail";
+    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: keys[view] }), showCountdown && (_jsx(Countdown, { intervalMs: intervalMs, enabled: true, resetKey: resetKey }))] }));
 }

package/dist/components/header.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import Spinner from "ink-spinner";
 export function Header({ repo, loading }) {
-    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "GitHub Actions" }), _jsx(Text, { children: " - " }), _jsx(Text, { bold: true, children: repo }), loading && (_jsxs(Text, { children: [" ", _jsx(Spinner, { type: "dots" })] }))] }));
+    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "GitHub Actions" }), _jsx(Text, { children: " - " }), _jsx(Text, { bold: true, children: repo }), _jsx(Text, { dimColor: true, children: loading ? "  fetching..." : "" })] }));
 }

package/dist/components/run-detail.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useInput } from "ink";
-import Spinner from "ink-spinner";
 import { StatusBadge } from "./status-badge.js";
 import { duration } from "../lib/format.js";
 export function RunDetailView({ detail, loading, error, onBack, onOpen, onRefresh, isActive, scrollOffset, onScroll, }) {
@@ -22,7 +21,7 @@ export function RunDetailView({ detail, loading, error, onBack, onOpen, onRefres
         }
     }, { isActive });
     if (loading && !detail) {
-        return (_jsxs(Text, { children: [_jsx(Spinner, { type: "dots" }), " Loading run details..."] }));
+        return _jsx(Text, { dimColor: true, children: "Loading run details..." });
     }
     if (error) {
         return _jsxs(Text, { color: "red", children: ["Error: ", error] });
@@ -33,7 +32,7 @@ export function RunDetailView({ detail, loading, error, onBack, onOpen, onRefres
     // Build flat list of lines to render, then apply scroll offset
     const lines = [];
     lines.push(_jsxs(Box, { gap: 1, children: [_jsx(StatusBadge, { status: detail.status, conclusion: detail.conclusion }), _jsx(Text, { bold: true, children: detail.displayTitle })] }, "title"));
-    lines.push(_jsxs(Box, { gap: 1, children: [_jsxs(Text, { dimColor: true, children: [detail.workflowName, " #", detail.number, " on ", detail.headBranch, " (", detail.event, ")"] }), loading && (_jsx(Text, { children: _jsx(Spinner, { type: "dots" }) }))] }, "meta"));
+    lines.push(_jsxs(Box, { gap: 1, children: [_jsxs(Text, { dimColor: true, children: [detail.workflowName, " #", detail.number, " on ", detail.headBranch, " (", detail.event, ")"] }), loading && _jsx(Text, { dimColor: true, children: " fetching..." })] }, "meta"));
     lines.push(_jsx(Text, { dimColor: true, children: "---" }, "sep"));
     for (const job of detail.jobs) {
         lines.push(_jsxs(Box, { gap: 1, marginTop: 1, children: [_jsx(StatusBadge, { status: job.status, conclusion: job.conclusion }), _jsx(Text, { bold: true, children: job.name }), job.startedAt && (_jsxs(Text, { dimColor: true, children: ["(", duration(job.startedAt, job.completedAt), ")"] }))] }, `job-${job.databaseId}`));

package/dist/hooks/use-countdown.d.ts

@@ -1,4 +1,3 @@
-export declare function useCountdown(intervalMs: number, enabled: boolean): {
+export declare function useCountdown(intervalMs: number, enabled: boolean, resetKey: number): {
     secondsLeft: number;
-    reset: () => void;
 };

package/dist/hooks/use-countdown.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-export function useCountdown(intervalMs, enabled) {
+export function useCountdown(intervalMs, enabled, resetKey) {
     const [secondsLeft, setSecondsLeft] = useState(Math.floor(intervalMs / 1000));
     const lastResetRef = useRef(Date.now());
     useEffect(() => {
@@ -17,10 +17,6 @@ export function useCountdown(intervalMs, enabled) {
             }
         }, 1000);
         return () => clearInterval(tick);
-    }, [intervalMs, enabled]);
-    const reset = () => {
-        lastResetRef.current = Date.now();
-        setSecondsLeft(Math.floor(intervalMs / 1000));
-    };
-    return { secondsLeft, reset };
+    }, [intervalMs, enabled, resetKey]);
+    return { secondsLeft };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "github-actions-watcher",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Terminal TUI for monitoring GitHub Actions workflow runs",
   "type": "module",
   "bin": {