github-actions-watcher 0.1.1 → 0.2.1

package/README.md

@@ -0,0 +1,77 @@
+# GitHub Actions Watcher
+
+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
+
+```
+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
+
+```bash
+# Run from any directory with a GitHub remote
+ghaw
+
+# Custom polling interval (default: 10s)
+ghaw --interval 5
+ghaw -i 30
+
+# Or use without installing
+npx github-actions-watcher
+```
+
+## Features
+
+- **Auto-detects repo** from git remote (SSH or HTTPS)
+- **Live polling** with countdown timer showing next refresh
+- **Drill into runs** to see individual jobs and steps with durations
+- **Switch repos** on the fly with `s`
+- **Open in browser** with `o` from the detail view
+- **Responsive layout** -- columns adapt to terminal width
+
+## Keybindings
+
+### List view
+
+| Key | Action |
+|-----|--------|
+| Up/Down | Navigate runs |
+| Enter | View jobs and steps |
+| s | Switch repository |
+| r | Refresh now |
+| q | Quit |
+
+### Detail view
+
+| Key | Action |
+|-----|--------|
+| Up/Down | Scroll |
+| Esc | Back to list |
+| o | Open run in browser |
+| r | Refresh |
+| q | Quit |
+
+## Development
+
+```bash
+git clone git@github.com:dzoba/github-actions-watcher.git
+cd github-actions-watcher
+npm install
+npx tsx src/cli.tsx
+```
+
+## License
+
+MIT

package/dist/app.js

@@ -5,6 +5,7 @@ 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";
@@ -27,6 +28,7 @@ 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);
     // Fetch detail
     const fetchDetail = useCallback(async () => {
         if (!repo || selectedRunId === null)
@@ -67,6 +69,7 @@ export function App({ interval }) {
         }
         else if (input === "r" && view === "list") {
             refreshRuns();
+            resetCountdown();
         }
     }, { isActive: view === "list" || view === "detail" });
     const handleDrillIn = useCallback((run) => {
@@ -90,8 +93,9 @@ export function App({ interval }) {
         setRepo(newRepo);
         setRuns(null);
         setSelectedIndex(0);
+        resetCountdown();
         setView("list");
-    }, [setRepo, setRuns]);
+    }, [setRepo, setRuns, resetCountdown]);
     const handleRepoCancel = useCallback(() => {
         setView("list");
     }, []);
@@ -100,12 +104,12 @@ export function App({ interval }) {
         return (_jsxs(Text, { children: [_jsx(Spinner, { type: "dots" }), " Detecting repository..."] }));
     }
     if (repoError && !repo) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["Error: ", repoError] }), _jsx(Text, { dimColor: true, children: "Run from a directory with a git remote, or press s to enter a repo manually." }), _jsx(RepoInput, { currentRepo: "", onConfirm: (r) => {
+        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) => {
                         setRepo(r);
                         setView("list");
-                    }, onCancel: () => exit(), isActive: true })] }));
+                    }, onCancel: () => exit(), isActive: true }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "enter: confirm | esc/q: quit" }) })] }));
     }
     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 })] }));
+    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 })] }));
 }

package/dist/components/footer.d.ts

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

package/dist/components/footer.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 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 }) {
-    return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: keys[view] }) }));
+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"] }))] }));
 }

package/dist/components/run-list.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, useInput } from "ink";
+import { Box, Text, useInput, useStdout } from "ink";
 import { StatusBadge } from "./status-badge.js";
 import { relativeTime, truncate } from "../lib/format.js";
 export function RunList({ runs, selectedIndex, onSelect, onEnter, isActive }) {
+    const { stdout } = useStdout();
+    const cols = stdout?.columns ?? 120;
     useInput((input, key) => {
         if (key.upArrow) {
             onSelect(Math.max(0, selectedIndex - 1));
@@ -19,8 +21,14 @@ export function RunList({ runs, selectedIndex, onSelect, onEnter, isActive }) {
     if (runs.length === 0) {
         return _jsx(Text, { dimColor: true, children: "No workflow runs found." });
     }
+    // Progressive column hiding based on terminal width
+    // Full: selector(2) + status(14) + workflow(20) + branch(18) + title(flex) + time(8) ~ 62+ cols
+    const showTime = cols >= 70;
+    const showBranch = cols >= 55;
+    const showWorkflow = cols >= 40;
+    const titleMax = Math.max(15, cols - (2 + 14 + (showWorkflow ? 21 : 0) + (showBranch ? 19 : 0) + (showTime ? 9 : 0)));
     return (_jsx(Box, { flexDirection: "column", children: runs.map((run, i) => {
             const selected = i === selectedIndex;
-            return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { children: selected ? ">" : " " }), _jsx(Box, { width: 14, children: _jsx(StatusBadge, { status: run.status, conclusion: run.conclusion }) }), _jsx(Box, { width: 20, children: _jsx(Text, { color: "blue", children: truncate(run.workflowName, 20) }) }), _jsx(Box, { width: 18, children: _jsx(Text, { color: "magenta", children: truncate(run.headBranch, 18) }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { children: truncate(run.displayTitle, 40) }) }), _jsx(Box, { width: 8, children: _jsx(Text, { dimColor: true, children: relativeTime(run.createdAt) }) })] }, run.databaseId));
+            return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { children: selected ? ">" : " " }), _jsx(Box, { width: 14, children: _jsx(StatusBadge, { status: run.status, conclusion: run.conclusion }) }), showWorkflow && (_jsx(Box, { width: 20, children: _jsx(Text, { color: "blue", children: truncate(run.workflowName, 20) }) })), showBranch && (_jsx(Box, { width: 18, children: _jsx(Text, { color: "magenta", children: truncate(run.headBranch, 18) }) })), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { children: truncate(run.displayTitle, titleMax) }) }), showTime && (_jsx(Box, { width: 8, children: _jsx(Text, { dimColor: true, children: relativeTime(run.createdAt) }) }))] }, run.databaseId));
         }) }));
 }

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

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

package/dist/hooks/use-countdown.js

@@ -0,0 +1,26 @@
+import { useState, useEffect, useRef } from "react";
+export function useCountdown(intervalMs, enabled) {
+    const [secondsLeft, setSecondsLeft] = useState(Math.floor(intervalMs / 1000));
+    const lastResetRef = useRef(Date.now());
+    useEffect(() => {
+        if (!enabled)
+            return;
+        lastResetRef.current = Date.now();
+        setSecondsLeft(Math.floor(intervalMs / 1000));
+        const tick = setInterval(() => {
+            const elapsed = Date.now() - lastResetRef.current;
+            const remaining = Math.max(0, Math.ceil((intervalMs - elapsed) / 1000));
+            setSecondsLeft(remaining);
+            if (remaining === 0) {
+                lastResetRef.current = Date.now();
+                setSecondsLeft(Math.floor(intervalMs / 1000));
+            }
+        }, 1000);
+        return () => clearInterval(tick);
+    }, [intervalMs, enabled]);
+    const reset = () => {
+        lastResetRef.current = Date.now();
+        setSecondsLeft(Math.floor(intervalMs / 1000));
+    };
+    return { secondsLeft, reset };
+}

package/package.json

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