hlidskjalf 0.0.1

package/README.md

@@ -0,0 +1,28 @@
+# hlidskjalf
+
+A terminal dashboard for monitoring Turborepo dev processes, built with [Ink](https://npm.im/ink).
+
+## Usage
+
+Add it to your root `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev": "hlidskjalf"
+  }
+}
+```
+
+Then run it:
+
+```sh
+pnpm dev
+```
+
+## Options
+
+| Option | Description |
+| --- | --- |
+| `--filter=<name>` | Only include matching workspaces. Can be passed multiple times. Append `...` to include transitive dependencies (e.g. `--filter=web...`). |
+| `--order=<mode>` | `alphabetical` (default) or `run` (dependency order). |

package/dist/index.js

@@ -0,0 +1,493 @@
+#!/usr/bin/env node
+
+// src/index.tsx
+import { render } from "ink";
+
+// src/app.tsx
+import { useApp, useInput } from "ink";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/processes.ts
+import { spawn } from "child_process";
+import { EventEmitter } from "events";
+
+// src/parser.ts
+var DTS = /\bDTS\b/;
+var matchers = [
+  { pattern: /running on (https?:\/\/\S+)/, status: "ready" },
+  { pattern: /listening on (https?:\/\/\S+)/, status: "ready" },
+  { pattern: /started.*(https?:\/\/localhost:\d+)/, status: "ready" },
+  { pattern: /\bVITE\b.*\bready in\b/i, status: "ready" },
+  { pattern: /\bLocal:\s+(https?:\/\/\S+)/, status: "ready" },
+  // ⚡ may include U+FE0F variation selector
+  { pattern: /⚡\uFE0F?\s*Build success/, status: "watching" },
+  { pattern: /Build start/, status: "building" },
+  { pattern: /Watching for changes/, status: "watching" },
+  { pattern: /[Ee]rror[\s:]/, status: "error" },
+  { pattern: /process exit/, status: "error" }
+];
+function parseLine(line) {
+  if (DTS.test(line)) return {};
+  for (const { pattern, status } of matchers) {
+    const match = line.match(pattern);
+    if (match) return { status, url: match[1] };
+  }
+  return {};
+}
+function stripAnsi(text) {
+  return text.replace(/\x1b(?:\[[0-9;]*[A-Za-z]|\].*?(?:\x07|\x1b\\))/g, "");
+}
+
+// src/processes.ts
+var MAX_LOGS = 500;
+var ERROR_RECOVERY_MS = 5e3;
+var MAX_CRASH_RETRIES = 3;
+var ProcessRunner = class extends EventEmitter {
+  children = /* @__PURE__ */ new Map();
+  state = /* @__PURE__ */ new Map();
+  errorTimers = /* @__PURE__ */ new Map();
+  lastGoodStatus = /* @__PURE__ */ new Map();
+  crashRetries = /* @__PURE__ */ new Map();
+  pendingRebuilds = /* @__PURE__ */ new Set();
+  root;
+  stopping = false;
+  constructor(root) {
+    super();
+    this.root = root;
+  }
+  get(name) {
+    return this.state.get(name);
+  }
+  async start(workspaces) {
+    const packages = workspaces.filter((w) => w.kind === "package");
+    const apps = workspaces.filter((w) => w.kind === "app");
+    for (const workspace of workspaces) {
+      this.state.set(workspace.name, { workspace, status: "pending", logs: [] });
+    }
+    for (const workspace of packages) {
+      this.spawn(workspace);
+    }
+    if (packages.length > 0) {
+      await this.waitForPackages(packages.map((p) => p.name));
+    }
+    for (const workspace of apps) {
+      this.spawn(workspace);
+    }
+  }
+  async shutdown() {
+    this.stopping = true;
+    for (const timer of this.errorTimers.values()) clearTimeout(timer);
+    this.errorTimers.clear();
+    for (const child of this.pendingRebuilds) child.kill("SIGTERM");
+    const waiting = [];
+    for (const [, child] of this.children) {
+      if (child.exitCode !== null || child.signalCode !== null) continue;
+      waiting.push(
+        new Promise((resolve) => {
+          const escalate = setTimeout(() => {
+            if (child.exitCode === null) child.kill("SIGKILL");
+          }, 5e3);
+          child.on("close", () => {
+            clearTimeout(escalate);
+            resolve();
+          });
+          child.kill("SIGTERM");
+        })
+      );
+    }
+    await Promise.all(waiting);
+  }
+  waitForPackages(names) {
+    const remaining = new Set(names);
+    return new Promise((resolve) => {
+      const check = () => {
+        for (const name of [...remaining]) {
+          const s = this.state.get(name)?.status;
+          if (s === "watching" || s === "error" || s === "stopped") remaining.delete(name);
+        }
+        if (remaining.size === 0) {
+          this.off("change", check);
+          resolve();
+        }
+      };
+      this.on("change", check);
+      check();
+    });
+  }
+  spawn(workspace) {
+    const child = spawn("pnpm", ["--filter", workspace.name, "run", "dev"], {
+      cwd: this.root,
+      stdio: "pipe",
+      env: { ...process.env, FORCE_COLOR: "1" }
+    });
+    this.children.set(workspace.name, child);
+    this.setStatus(workspace.name, "building");
+    let buffer = "";
+    const onData = (data) => {
+      buffer += data.toString();
+      const lines = buffer.split("\n");
+      buffer = lines.pop();
+      for (const raw of lines) {
+        const line = raw.trimEnd();
+        if (line) this.handleLine(workspace.name, line);
+      }
+    };
+    child.stdout?.on("data", onData);
+    child.stderr?.on("data", onData);
+    child.on("close", (code, signal) => {
+      if (buffer.trim()) this.handleLine(workspace.name, buffer.trimEnd());
+      buffer = "";
+      if (this.stopping) return;
+      if (signal === "SIGABRT") {
+        this.handleCrash(workspace);
+        return;
+      }
+      this.setStatus(workspace.name, code === 0 ? "stopped" : "error");
+    });
+    child.on("error", () => this.setStatus(workspace.name, "error"));
+  }
+  handleLine(name, line) {
+    const proc = this.state.get(name);
+    if (!proc) return;
+    proc.logs.push(line);
+    if (proc.logs.length > MAX_LOGS) proc.logs.splice(0, proc.logs.length - MAX_LOGS);
+    const { status, url } = parseLine(stripAnsi(line));
+    if (status) {
+      if (status === "error") {
+        this.scheduleErrorRecovery(name);
+      } else {
+        this.lastGoodStatus.set(name, status);
+        this.clearErrorTimer(name);
+      }
+      proc.status = status;
+    }
+    if (url) proc.url = url;
+    this.emit("change");
+  }
+  handleCrash(workspace) {
+    const retries = (this.crashRetries.get(workspace.name) ?? 0) + 1;
+    this.crashRetries.set(workspace.name, retries);
+    const proc = this.state.get(workspace.name);
+    if (retries <= MAX_CRASH_RETRIES) {
+      if (proc) {
+        proc.logs.push(
+          `[hlidskjalf] fsevents crash detected (attempt ${retries}/${MAX_CRASH_RETRIES}) \u2014 rebuilding...`
+        );
+      }
+      this.emit("change");
+      this.rebuildFsevents().then(() => {
+        if (!this.stopping) this.spawn(workspace);
+      }).catch(() => this.setStatus(workspace.name, "error"));
+    } else {
+      if (proc) {
+        proc.logs.push(
+          `[hlidskjalf] fsevents still crashing after ${MAX_CRASH_RETRIES} attempts \u2014 giving up.`
+        );
+      }
+      this.setStatus(workspace.name, "error");
+    }
+  }
+  rebuildFsevents() {
+    return new Promise((resolve) => {
+      const child = spawn("pnpm", ["rebuild", "fsevents"], {
+        cwd: this.root,
+        stdio: "pipe"
+      });
+      this.pendingRebuilds.add(child);
+      const done = () => {
+        this.pendingRebuilds.delete(child);
+        resolve();
+      };
+      child.on("close", done);
+      child.on("error", done);
+    });
+  }
+  scheduleErrorRecovery(name) {
+    this.clearErrorTimer(name);
+    const timer = setTimeout(() => {
+      this.errorTimers.delete(name);
+      const proc = this.state.get(name);
+      if (proc?.status === "error") {
+        this.setStatus(name, this.lastGoodStatus.get(name) ?? "ready");
+      }
+    }, ERROR_RECOVERY_MS);
+    timer.unref();
+    this.errorTimers.set(name, timer);
+  }
+  clearErrorTimer(name) {
+    const timer = this.errorTimers.get(name);
+    if (timer) {
+      clearTimeout(timer);
+      this.errorTimers.delete(name);
+    }
+  }
+  setStatus(name, status) {
+    const proc = this.state.get(name);
+    if (!proc) return;
+    proc.status = status;
+    this.emit("change");
+  }
+};
+function createRunner(root) {
+  return new ProcessRunner(root);
+}
+
+// src/views/dashboard.tsx
+import { Box, Text, useStdout } from "ink";
+import { jsx, jsxs } from "react/jsx-runtime";
+var kindLabel = {
+  package: "pkg",
+  app: "app"
+};
+var statusDisplay = {
+  pending: { color: "gray", label: "pending" },
+  building: { color: "yellow", label: "building" },
+  watching: { color: "green", label: "watching" },
+  ready: { color: "green", label: "ready" },
+  error: { color: "red", label: "error" },
+  stopped: { color: "gray", label: "stopped" }
+};
+var HINTS = "\u2191/\u2193  j/k  select    q  quit";
+function Dashboard({ processes, selectedIndex }) {
+  const { stdout } = useStdout();
+  const cols = stdout?.columns ?? 80;
+  const rows = stdout?.rows ?? 24;
+  const allReady = processes.length > 0 && processes.every((p) => p.status === "ready" || p.status === "watching");
+  const nameWidth = Math.max(14, ...processes.map((p) => p.workspace.name.length + 2));
+  const logHeight = Math.max(3, rows - processes.length - 5);
+  const safeIndex = Math.min(selectedIndex, Math.max(0, processes.length - 1));
+  const selected = processes[safeIndex];
+  const logLines = selected?.logs.slice(-logHeight) ?? [];
+  const showHints = cols >= 10 + HINTS.length + 4;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Box, { flexGrow: 1, children: [
+        /* @__PURE__ */ jsx(Text, { color: allReady ? "yellow" : "gray", children: allReady ? "\u{1F3D4}" : "\u25E6" }),
+        /* @__PURE__ */ jsx(Text, { bold: true, children: allReady ? "  Hlidskjalf" : " Hlidskjalf" })
+      ] }),
+      showHints && /* @__PURE__ */ jsx(Text, { dimColor: true, children: HINTS })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(cols) }),
+    /* @__PURE__ */ jsxs(Box, { marginLeft: 1, children: [
+      /* @__PURE__ */ jsx(Box, { width: nameWidth, children: /* @__PURE__ */ jsx(Text, { dimColor: true, bold: true, children: "Name" }) }),
+      /* @__PURE__ */ jsx(Box, { width: 6, children: /* @__PURE__ */ jsx(Text, { dimColor: true, bold: true, children: "Kind" }) }),
+      /* @__PURE__ */ jsx(Box, { width: 14, children: /* @__PURE__ */ jsx(Text, { dimColor: true, bold: true, children: "Status" }) }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, bold: true, children: "URL" })
+    ] }),
+    processes.map((proc, i) => {
+      const isSelected = i === safeIndex;
+      const { color, label } = statusDisplay[proc.status];
+      return /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : void 0, children: isSelected ? "\u25B8" : " " }),
+        /* @__PURE__ */ jsx(Box, { width: nameWidth, children: /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : void 0, bold: isSelected, wrap: "truncate", children: proc.workspace.name }) }),
+        /* @__PURE__ */ jsx(Box, { width: 6, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: kindLabel[proc.workspace.kind] }) }),
+        /* @__PURE__ */ jsx(Box, { width: 14, children: /* @__PURE__ */ jsxs(Text, { color, children: [
+          "\u25CF ",
+          label
+        ] }) }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: proc.url ?? "" })
+      ] }, proc.workspace.name);
+    }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(cols) }),
+    selected && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Box, { marginLeft: 1, children: /* @__PURE__ */ jsxs(Text, { bold: true, children: [
+        "Logs: ",
+        selected.workspace.name
+      ] }) }),
+      logLines.map((line, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: log lines have no stable identity
+        /* @__PURE__ */ jsxs(Text, { wrap: "truncate", children: [
+          " ",
+          line
+        ] }, i)
+      )),
+      Array.from({ length: logHeight - logLines.length }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: fill lines have no stable identity
+        /* @__PURE__ */ jsx(Text, { children: " " }, `fill-${i}`)
+      ))
+    ] })
+  ] });
+}
+
+// src/views/loading.tsx
+import { Box as Box2, Text as Text2, useStdout as useStdout2 } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Loading() {
+  const { stdout } = useStdout2();
+  const cols = stdout?.columns ?? 80;
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { color: "gray", children: "\u25E6 " }),
+      /* @__PURE__ */ jsx2(Text2, { bold: true, children: "Hlidskjalf" })
+    ] }),
+    /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "\u2500".repeat(cols) }),
+    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, marginLeft: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Discovering workspaces..." }) })
+  ] });
+}
+
+// src/workspaces.ts
+import { existsSync, readdirSync, readFileSync } from "fs";
+import { join } from "path";
+function readJson(path) {
+  try {
+    return JSON.parse(readFileSync(path, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+function workspaceDeps(pkg) {
+  return Object.entries(pkg.dependencies ?? {}).filter(([, v]) => v.startsWith("workspace:")).map(([name]) => name);
+}
+var kindOrder = { package: 0, app: 1 };
+function discover(root) {
+  const results = [];
+  for (const dir of ["packages", "apps"]) {
+    const base = join(root, dir);
+    const kind = dir === "apps" ? "app" : "package";
+    if (!existsSync(base)) continue;
+    for (const entry of readdirSync(base, { withFileTypes: true })) {
+      if (!entry.isDirectory()) continue;
+      const pkg = readJson(join(base, entry.name, "package.json"));
+      if (!pkg?.name) continue;
+      if (pkg.name === "hlidskjalf") continue;
+      if (!pkg.scripts?.dev) continue;
+      results.push({
+        name: pkg.name,
+        kind,
+        deps: workspaceDeps(pkg)
+      });
+    }
+  }
+  return results;
+}
+function sortByDeps(workspaces) {
+  const names = new Set(workspaces.map((w) => w.name));
+  return [...workspaces].sort((a, b) => {
+    if (a.kind !== b.kind) return kindOrder[a.kind] - kindOrder[b.kind];
+    const aDeps = a.deps.filter((d) => names.has(d)).length;
+    const bDeps = b.deps.filter((d) => names.has(d)).length;
+    return aDeps - bDeps;
+  });
+}
+function sortByName(workspaces) {
+  return [...workspaces].sort((a, b) => {
+    if (a.kind !== b.kind) return kindOrder[a.kind] - kindOrder[b.kind];
+    return a.name.localeCompare(b.name);
+  });
+}
+function filterWorkspaces(workspaces, patterns) {
+  const byName = new Map(workspaces.map((w) => [w.name, w]));
+  const matches = /* @__PURE__ */ new Set();
+  for (const pattern of patterns) {
+    const transitive = pattern.endsWith("...");
+    const name = transitive ? pattern.slice(0, -3) : pattern;
+    if (byName.has(name)) matches.add(name);
+    if (transitive) collectDeps(name, byName, matches);
+  }
+  return workspaces.filter((w) => matches.has(w.name));
+}
+function collectDeps(name, byName, collected) {
+  const workspace = byName.get(name);
+  if (!workspace) return;
+  for (const dep of workspace.deps) {
+    if (byName.has(dep) && !collected.has(dep)) {
+      collected.add(dep);
+      collectDeps(dep, byName, collected);
+    }
+  }
+}
+
+// src/app.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function App({ options }) {
+  const { exit } = useApp();
+  const [loading, setLoading] = useState(true);
+  const [processes, setProcesses] = useState([]);
+  const [cursor, setCursor] = useState(0);
+  const runnerRef = useRef(null);
+  const stoppingRef = useRef(false);
+  const stop = useCallback(() => {
+    if (stoppingRef.current) return;
+    stoppingRef.current = true;
+    const runner = runnerRef.current;
+    if (runner) {
+      void runner.shutdown().finally(() => exit());
+    } else {
+      exit();
+    }
+  }, [exit]);
+  useEffect(() => {
+    const run = async () => {
+      let workspaces = discover(options.root);
+      if (options.filter) {
+        workspaces = filterWorkspaces(workspaces, options.filter);
+      }
+      if (workspaces.length === 0) {
+        console.error("No matching workspaces found.");
+        exit();
+        return;
+      }
+      const startOrder = sortByDeps(workspaces);
+      const sorted = options.order === "run" ? startOrder : sortByName(workspaces);
+      const displayOrder = sorted.map((w) => w.name);
+      const runner = createRunner(options.root);
+      runnerRef.current = runner;
+      setProcesses(sorted.map((w) => ({ workspace: w, status: "pending", logs: [] })));
+      runner.on("change", () => {
+        setProcesses(
+          displayOrder.flatMap((name) => {
+            const p = runner.get(name);
+            return p ? [p] : [];
+          })
+        );
+      });
+      setLoading(false);
+      await runner.start(startOrder);
+    };
+    run().catch((err) => {
+      console.error("Fatal:", err);
+      exit();
+    });
+    process.on("SIGTERM", stop);
+    return () => {
+      process.off("SIGTERM", stop);
+    };
+  }, [exit, options.filter, options.order, options.root, stop]);
+  useInput((input, key) => {
+    if (loading) return;
+    if (input === "q" || key.ctrl && input === "c") {
+      stop();
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      setCursor((i) => Math.max(0, i - 1));
+    } else if (key.downArrow || input === "j") {
+      setCursor((i) => Math.min(processes.length - 1, i + 1));
+    }
+  });
+  if (loading) return /* @__PURE__ */ jsx3(Loading, {});
+  return /* @__PURE__ */ jsx3(Dashboard, { processes, selectedIndex: cursor });
+}
+
+// src/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function parseArgs(argv) {
+  const root = process.cwd();
+  const filter = [];
+  let order = "alphabetical";
+  for (const arg of argv) {
+    if (arg.startsWith("--filter=")) {
+      const value = arg.slice("--filter=".length).replace(/^\{(.+)\}$/, "$1");
+      filter.push(value);
+    } else if (arg.startsWith("--order=")) {
+      const value = arg.slice("--order=".length);
+      if (value === "run" || value === "alphabetical") order = value;
+    }
+  }
+  return { root, order, filter: filter.length > 0 ? filter : void 0 };
+}
+var { waitUntilExit } = render(/* @__PURE__ */ jsx4(App, { options: parseArgs(process.argv.slice(2)) }), {
+  exitOnCtrlC: false
+});
+await waitUntilExit();
+process.exit(0);

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "hlidskjalf",
+	"version": "0.0.1",
+	"description": "Terminal UI for monitoring Turborepo workspaces",
+	"type": "module",
+	"license": "MIT",
+	"keywords": [
+		"turborepo",
+		"monorepo",
+		"terminal",
+		"tui",
+		"dev",
+		"pnpm"
+	],
+	"engines": {
+		"node": ">=22"
+	},
+	"bin": {
+		"hlidskjalf": "dist/index.js"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsup",
+		"dev": "tsup --watch",
+		"lint": "biome check --config-path=../.. .",
+		"lint:fix": "biome check --config-path=../.. --write .",
+		"format": "biome format --config-path=../.. --write ."
+	},
+	"dependencies": {
+		"ink": "^5.2.1",
+		"react": "^18.3.1"
+	},
+	"devDependencies": {
+		"@types/node": "^22.15.33",
+		"@types/react": "^18.3.23",
+		"tsup": "^8.5.1",
+		"typescript": "^5.9.3"
+	}
+}