oxlint-tui 1.0.18 → 1.1.0

package/README.md

@@ -2,8 +2,6 @@
 
 A lightweight, dependency-free Node.js Terminal User Interface (TUI) for browsing, toggling and visualizing [oxlint](https://github.com/oxc-project/oxc) rules and the number of warnings/errors they produce when toggled ON.
 
-![oxlint-tui-demo](https://github.com/user-attachments/assets/cefd05a6-8bda-4622-8adf-008402f856b4)
-
 It automatically loads your local configuration to show you the status of the rules toggled in your project and allows you to toggle them by selecting a rule in the Rules pane and pressing <kbd>1</kbd>, <kbd>2</kbd>, or <kbd>3</kbd>. The config file is modified in real-time.
 
 **NOTE**: At the moment, comments will be erased from your configuration file when adding or toggling rules.
@@ -16,10 +14,10 @@ Configuring linters often involves jumping between your editor, a massive JSON f
 
 ## Features
 
-* **Config Aware**: provides information about the rules used in your project by loading `.oxlintrc.json`.
-* **Details**: View category, scope, fix, default and type-aware rule parameters at a glance.
-* **View Docs**: Press <kbd>ENTER</kbd> on any rule to open its official documentation in your browser.
-* **Zero Dependencies**: Written in pure Node.js without any heavy TUI libraries.
+- **Config Aware**: provides information about the rules used in your project by loading `.oxlintrc.json`.
+- **Details**: View category, scope, fix, default and type-aware rule parameters at a glance.
+- **View Docs**: Press <kbd>ENTER</kbd> on any rule to open its official documentation in your browser.
+- **Zero Dependencies**: Written in pure Node.js without any heavy TUI libraries.
 
 ## Usage
 
@@ -51,28 +49,28 @@ oxlint-tui
 
 ## Keyboard Controls
 
-| Key | Action |
-| :--- | :--- |
-| **↑** / **k** | Move selection Up |
-| **↓** / **j** | Move selection Down |
-| **←** / **h** | Move focus Left (Categories <-> Rules) |
-| **→** / **l** | Move focus Right (Categories <-> Rules) ||
-| **1** |  Set selected rule to "off" |
-| **2** |  Set selected rule to "warn" |
-| **3** |  Set selected rule to "error" |
-| **x** |  Run "oxlint" with the selected rule |
-| **r** |  Run "oxlint with all enabled rules |
-| **Enter** | Open Rule Documentation in Browser |
-| **q** / **Esc** | Quit |
+| Key             | Action                                  |
+| :-------------- | :-------------------------------------- | --- |
+| **↑** / **k**   | Move selection Up                       |
+| **↓** / **j**   | Move selection Down                     |
+| **←** / **h**   | Move focus Left (Categories <-> Rules)  |
+| **→** / **l**   | Move focus Right (Categories <-> Rules) |     |
+| **1**           | Set selected rule to "off"              |
+| **2**           | Set selected rule to "warn"             |
+| **3**           | Set selected rule to "error"            |
+| **x**           | Run "oxlint" with the selected rule     |
+| **r**           | Run "oxlint with all enabled rules      |
+| **Enter**       | Open Rule Documentation in Browser      |
+| **q** / **Esc** | Quit                                    |
 
 ## Requirements
 
-* Node.js >= 16
-* `oxlint` (The tool runs `npx oxlint --rules --format=json` internally to fetch definitions)
+- Node.js >= 16
+- `oxlint` (The tool runs `npx oxlint --rules --format=json` internally to fetch definitions)
 
 ## Roadmap
 
-The goal is to build this into a tool that not only reads the information provided by the oxlint CLI and your configuration file -  but also allows to fully customize the configuration. Oxlint provides a lot more flexibility than just toggling rules on/off, so making this fully functional is going to require more work.
+The goal is to build this into a tool that not only reads the information provided by the oxlint CLI and your configuration file - but also allows to fully customize the configuration. Oxlint provides a lot more flexibility than just toggling rules on/off, so making this fully functional is going to require more work.
 
 If you're willing and able, please feel free to [contribute to this project](https://github.com/holoflash/oxlint-tui/blob/main/CONTRIBUTING.md).
 

package/dist/index.js

@@ -0,0 +1,340 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import readline from "readline";
+import { execSync, exec, spawn } from "node:child_process";
+import { stdout, stdin, exit, platform, argv } from "node:process";
+import {} from "./types.js";
+import { render } from "./rendering.js";
+const OXLINT_VERSION = "1.41.0";
+const TSGOLINT_VERSION = "0.11.1";
+const KEY_MAP = {
+    k: { type: "MOVE_UP" },
+    up: { type: "MOVE_UP" },
+    down: { type: "MOVE_DOWN" },
+    j: { type: "MOVE_DOWN" },
+    left: { type: "MOVE_LEFT" },
+    h: { type: "MOVE_LEFT" },
+    right: { type: "MOVE_RIGHT" },
+    l: { type: "MOVE_RIGHT" },
+    return: { type: "OPEN_DOCS" },
+    enter: { type: "OPEN_DOCS" },
+    "1": { type: "SET_STATUS", value: "off" },
+    "2": { type: "SET_STATUS", value: "warn" },
+    "3": { type: "SET_STATUS", value: "error" },
+    q: { type: "EXIT" },
+    r: { type: "RUN_LINT" },
+    x: { type: "RUN_SINGLE_RULE" },
+};
+let state = {
+    activePane: 0,
+    selectedCategoryIndex: 0,
+    selectedRuleIndex: 0,
+    categoryScroll: 0,
+    ruleScroll: 0,
+    isLintInProgress: false,
+    message: "oxlint-tui",
+    messageType: "dim",
+    ...loadRules(),
+};
+function updateConfig(rule, newStatus) {
+    if (!state.configPath || !state.config)
+        return;
+    try {
+        if (!state.config.rules)
+            state.config.rules = {};
+        const ruleName = rule.value;
+        const canonicalKey = rule.scope === "oxc2" || rule.scope === "eslint" ? ruleName : `${rule.scope}/${ruleName}`;
+        const rules = state.config.rules;
+        const existingKey = Object.keys(rules).find((key) => key === canonicalKey || key === ruleName || key.endsWith(`/${ruleName}`));
+        const targetKey = existingKey || canonicalKey;
+        rules[targetKey] = newStatus;
+        fs.writeFileSync(state.configPath, JSON.stringify(state.config, null, 2), "utf8");
+    }
+    catch {
+        state.message = "Failed to write config file";
+        state.messageType = "error";
+    }
+}
+function runLint({ rule = null } = {}) {
+    if (state.isLintInProgress)
+        return;
+    state.isLintInProgress = true;
+    let ruleName = rule ? `${rule.scope}/${rule.value}` : null;
+    const typeAware = rule
+        ? rule.type_aware
+        : Object.values(state.rulesByCategory)
+            .flat()
+            .some((ruleItem) => ruleItem.isActive && ruleItem.type_aware === true);
+    state.message = "Linting";
+    if (ruleName)
+        state.message += ` [${ruleName}]`;
+    if (typeAware)
+        state.message += " with --type-aware";
+    state.message += "...";
+    state.messageType = "info";
+    render(state);
+    const npxCmd = platform === "win32" ? "npx.cmd" : "npx";
+    const args = ["-q", "--yes", "--package", `oxlint@${OXLINT_VERSION}`];
+    if (typeAware) {
+        args.push("--package", `oxlint-tsgolint@${TSGOLINT_VERSION}`);
+    }
+    args.push("--", "oxlint");
+    if (typeAware) {
+        args.push("--type-aware");
+    }
+    if (ruleName) {
+        args.push("-A", "all", "-D", ruleName);
+    }
+    const child = spawn(npxCmd, args);
+    let stdoutData = "";
+    let stderrData = "";
+    child.stdout.on("data", (data) => {
+        stdoutData += data;
+    });
+    child.stderr.on("data", (data) => {
+        stderrData += data;
+    });
+    child.on("close", (code) => {
+        state.isLintInProgress = false;
+        const fullOutput = stdoutData + stderrData;
+        const summaryMatch = fullOutput.match(/Found (\d+) warnings? and (\d+) errors?/i);
+        if (summaryMatch) {
+            const errors = parseInt(summaryMatch[2]);
+            state.message = ruleName
+                ? `[${ruleName}] Found ${errors} issue${errors === 1 ? "" : "s"}`
+                : summaryMatch[0];
+            state.messageType = errors > 0 ? "error" : "warn";
+        }
+        else if (stdoutData.toLowerCase().includes("finished") ||
+            (code === 0 && stdoutData.length < 200)) {
+            state.message = "Linting passed! 0 issues found.";
+            if (ruleName)
+                state.message = `[${ruleName}] ${state.message}`;
+            state.messageType = "success";
+        }
+        else {
+            const cleanError = stderrData
+                .split("\n")
+                .filter((l) => !l.includes("experimental") && !l.includes("Breaking changes") && l.trim() !== "")
+                .join(" ");
+            state.message = cleanError ? `Error: ${cleanError.substring(0, 50)}...` : "Lint failed";
+            state.messageType = "error";
+        }
+        render(state);
+    });
+}
+function execute(action) {
+    if (!action)
+        return;
+    const { categories, rulesByCategory, selectedCategoryIndex, selectedRuleIndex, activePane } = state;
+    const currentCategory = categories[selectedCategoryIndex];
+    const currentCategoryRules = rulesByCategory[currentCategory] || [];
+    const viewportHeight = stdout.rows - 8;
+    const statsBoxHeight = 7;
+    const categoryListHeight = viewportHeight - statsBoxHeight;
+    switch (action.type) {
+        case "EXIT":
+            exitAltScreen();
+            exit(0);
+            return;
+        case "RUN_LINT":
+            runLint();
+            return;
+        case "RUN_SINGLE_RULE": {
+            const rule = currentCategoryRules[selectedRuleIndex];
+            if (rule)
+                runLint({ rule });
+            return;
+        }
+        case "OPEN_DOCS": {
+            if (activePane === 1) {
+                const rule = currentCategoryRules[selectedRuleIndex];
+                if (rule)
+                    openUrl(rule.docs_url || rule.url);
+            }
+            return;
+        }
+        case "SET_STATUS": {
+            if (activePane !== 1 || !action.value)
+                return;
+            const rule = currentCategoryRules[selectedRuleIndex];
+            if (!rule)
+                return;
+            updateConfig(rule, action.value);
+            const updatedRules = [...currentCategoryRules];
+            updatedRules[selectedRuleIndex] = {
+                ...rule,
+                configStatus: action.value,
+                isActive: action.value === "error" || action.value === "warn",
+            };
+            state = {
+                ...state,
+                message: `Rule '${rule.value}' set to: ${action.value}`,
+                messageType: "info",
+                rulesByCategory: {
+                    ...rulesByCategory,
+                    [currentCategory]: updatedRules,
+                },
+            };
+            render(state);
+            return;
+        }
+        case "MOVE_RIGHT":
+            if (activePane !== 1) {
+                state = { ...state, activePane: activePane + 1 };
+                render(state);
+            }
+            return;
+        case "MOVE_LEFT":
+            if (activePane !== 0) {
+                state = { ...state, activePane: activePane - 1 };
+                render(state);
+            }
+            return;
+        case "MOVE_UP":
+            if (activePane === 0) {
+                const nextIndex = selectedCategoryIndex === 0 ? categories.length - 1 : selectedCategoryIndex - 1;
+                state = {
+                    ...state,
+                    selectedCategoryIndex: nextIndex,
+                    selectedRuleIndex: 0,
+                    ruleScroll: 0,
+                    categoryScroll: updateScroll(nextIndex, state.categoryScroll, categoryListHeight),
+                };
+            }
+            else if (activePane === 1) {
+                const nextIndex = selectedRuleIndex === 0 ? currentCategoryRules.length - 1 : selectedRuleIndex - 1;
+                state = {
+                    ...state,
+                    selectedRuleIndex: nextIndex,
+                    ruleScroll: updateScroll(nextIndex, state.ruleScroll, viewportHeight),
+                };
+            }
+            render(state);
+            return;
+        case "MOVE_DOWN":
+            if (activePane === 0) {
+                const nextIndex = selectedCategoryIndex === categories.length - 1 ? 0 : selectedCategoryIndex + 1;
+                state = {
+                    ...state,
+                    selectedCategoryIndex: nextIndex,
+                    selectedRuleIndex: 0,
+                    ruleScroll: 0,
+                    categoryScroll: updateScroll(nextIndex, state.categoryScroll, categoryListHeight),
+                };
+            }
+            else if (activePane === 1) {
+                const nextIndex = selectedRuleIndex === currentCategoryRules.length - 1 ? 0 : selectedRuleIndex + 1;
+                state = {
+                    ...state,
+                    selectedRuleIndex: nextIndex,
+                    ruleScroll: updateScroll(nextIndex, state.ruleScroll, viewportHeight),
+                };
+            }
+            render(state);
+            return;
+    }
+}
+function getRuleStatus(ruleName, category, config) {
+    if (config.rules) {
+        let val = config.rules[ruleName];
+        if (val === undefined) {
+            const foundKey = Object.keys(config.rules).find((key) => key.endsWith(`/${ruleName}`));
+            if (foundKey)
+                val = config.rules[foundKey];
+        }
+        if (val !== undefined) {
+            const status = Array.isArray(val) ? val[0] : val;
+            return status;
+        }
+    }
+    if (config.categories && config.categories[category]) {
+        return config.categories[category];
+    }
+    return "off";
+}
+function stripJsonComments(json) {
+    return json.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => (g ? "" : m));
+}
+function loadRules() {
+    let rulesData = [];
+    let config = {
+        rules: {},
+        categories: {},
+    };
+    let configPath = null;
+    try {
+        const raw = execSync(`npx -q --yes oxlint@${OXLINT_VERSION} --rules --format=json`, {
+            encoding: "utf8",
+            stdio: ["ignore", "pipe", "ignore"],
+        });
+        rulesData = JSON.parse(raw);
+    }
+    catch {
+        state.message = "Error: Couldn't run 'npx oxlint'.";
+        state.messageType = "error";
+        exit(1);
+    }
+    const userConfigPath = argv[2];
+    if (userConfigPath && fs.existsSync(userConfigPath)) {
+        configPath = userConfigPath;
+    }
+    else if (fs.existsSync(".oxlintrc.json")) {
+        configPath = ".oxlintrc.json";
+    }
+    if (configPath) {
+        try {
+            config = JSON.parse(stripJsonComments(fs.readFileSync(configPath, "utf8")));
+        }
+        catch {
+            state.message = "Error: Couldn't parse config.";
+            state.messageType = "error";
+        }
+    }
+    const map = {};
+    rulesData.forEach((rule) => {
+        const cat = rule.category || "Uncategorized";
+        if (!map[cat])
+            map[cat] = [];
+        const status = getRuleStatus(rule.value, cat, config);
+        map[cat].push({
+            ...rule,
+            configStatus: status,
+            isActive: status === "error" || status === "warn",
+        });
+    });
+    const categories = Object.keys(map).toSorted();
+    return {
+        categories,
+        rulesByCategory: map,
+        config,
+        configPath,
+    };
+}
+function updateScroll(idx, currentScroll, viewHeight) {
+    if (idx < currentScroll)
+        return idx;
+    if (idx >= currentScroll + viewHeight)
+        return idx - viewHeight + 1;
+    return currentScroll;
+}
+function openUrl(url) {
+    if (!url)
+        return;
+    const openCmd = platform === "darwin" ? "open" : platform === "win32" ? "start" : "xdg-open";
+    exec(`${openCmd} "${url}"`);
+}
+const write = (str) => stdout.write(str);
+const enterAltScreen = () => write("\x1b[?1049h\x1b[?25l");
+const exitAltScreen = () => write("\x1b[?1049l\x1b[?25h");
+readline.emitKeypressEvents(stdin);
+if (stdin.isTTY)
+    stdin.setRawMode(true);
+stdin.on("keypress", (_, key) => {
+    const action = KEY_MAP[key.name] ||
+        (key.ctrl && key.name === "c" ? { type: "EXIT" } : KEY_MAP[key.sequence] || null);
+    execute(action);
+});
+stdout.on("resize", render);
+enterAltScreen();
+render(state);

package/dist/rendering.js

@@ -0,0 +1,153 @@
+import { stdout } from "node:process";
+export const COLORS = {
+    reset: "\x1b[0m",
+    dim: "\x1b[90m",
+    highlight: "\x1b[38;5;110m",
+    selectedBg: "\x1b[47m\x1b[30m",
+    borderActive: "\x1b[36m",
+    borderInactive: "\x1b[90m",
+    error: "\x1b[31m",
+    warn: "\x1b[33m",
+    success: "\x1b[32m",
+    info: "\x1b[34m",
+};
+function chunkString(str, len) {
+    if (!str)
+        return [];
+    const size = Math.ceil(str.length / len);
+    const r = Array(size);
+    for (let i = 0; i < size; i++)
+        r[i] = str.substring(i * len, (i + 1) * len);
+    return r;
+}
+function drawBox(buffer, x, y, width, height, title, items, selectedIndex, scrollOffset, isActive) {
+    const borderColor = isActive ? COLORS.borderActive : COLORS.borderInactive;
+    const titleClean = title.length > width - 6 ? title.substring(0, width - 7) + "…" : title;
+    const topBorder = `${borderColor}┌─ ${titleClean} `.padEnd(width + borderColor.length - 1, "─");
+    buffer.push(`\x1b[${y};${x}H${topBorder}┐${COLORS.reset}`);
+    for (let i = 1; i < height - 1; i++) {
+        buffer.push(`\x1b[${y + i};${x}H${borderColor}│${" ".repeat(width - 2)}│${COLORS.reset}`);
+    }
+    buffer.push(`\x1b[${y + height - 1};${x}H${borderColor}└${"─".repeat(width - 2)}┘${COLORS.reset}`);
+    const innerHeight = height - 2;
+    items.slice(scrollOffset, scrollOffset + innerHeight).forEach((item, i) => {
+        const absoluteIndex = scrollOffset + i;
+        const isRule = typeof item !== "string";
+        const rawText = isRule ? item.value : item;
+        let display = rawText.length > width - 4
+            ? rawText.substring(0, width - 5) + "…"
+            : rawText.padEnd(width - 4);
+        let itemColor = COLORS.dim;
+        if (isRule) {
+            const ruleItem = item;
+            if (ruleItem.configStatus === "error")
+                itemColor = COLORS.error;
+            else if (ruleItem.configStatus === "warn")
+                itemColor = COLORS.warn;
+            else if (ruleItem.isActive)
+                itemColor = COLORS.success;
+        }
+        buffer.push(`\x1b[${y + 1 + i};${x + 2}H`);
+        if (absoluteIndex === selectedIndex) {
+            buffer.push(isActive
+                ? `${COLORS.selectedBg}${display}${COLORS.reset}`
+                : `${COLORS.dim}\x1b[7m${display}${COLORS.reset}`);
+        }
+        else {
+            buffer.push(`${itemColor}${display}${COLORS.reset}`);
+        }
+    });
+}
+function drawStats(buffer, x, y, width, height, rules) {
+    const borderColor = COLORS.borderInactive;
+    const topBorder = `${borderColor}┌─ STATS `.padEnd(width + borderColor.length - 1, "─");
+    buffer.push(`\x1b[${y};${x}H${topBorder}┐${COLORS.reset}`);
+    for (let i = 1; i < height - 1; i++)
+        buffer.push(`\x1b[${y + i};${x}H${borderColor}│${" ".repeat(width - 2)}│${COLORS.reset}`);
+    buffer.push(`\x1b[${y + height - 1};${x}H${borderColor}└${"─".repeat(width - 2)}┘${COLORS.reset}`);
+    let counts = { error: 0, warn: 0, off: 0 };
+    rules.forEach((ruleItem) => {
+        if (ruleItem.configStatus === "error")
+            counts.error++;
+        else if (ruleItem.configStatus === "warn")
+            counts.warn++;
+        else
+            counts.off++;
+    });
+    const lines = [
+        { label: "Error", count: counts.error, color: COLORS.error },
+        { label: "Warn", count: counts.warn, color: COLORS.warn },
+        { label: "Off", count: counts.off, color: COLORS.dim },
+    ];
+    lines.forEach((line, i) => {
+        if (i < height - 2) {
+            const numStr = String(line.count).padStart(3);
+            const labelStr = line.label.padEnd(width - 8);
+            buffer.push(`\x1b[${y + 1 + i};${x + 2}H${line.color}${labelStr}${numStr}${COLORS.reset}`);
+        }
+    });
+}
+function drawDetails(buffer, x, y, width, height, rule, isActive) {
+    const borderColor = isActive ? COLORS.borderActive : COLORS.borderInactive;
+    const topBorder = `${borderColor}┌─ DETAILS `.padEnd(width + borderColor.length - 1, "─");
+    buffer.push(`\x1b[${y};${x}H${topBorder}┐${COLORS.reset}`);
+    for (let i = 1; i < height - 1; i++)
+        buffer.push(`\x1b[${y + i};${x}H${borderColor}│${" ".repeat(width - 2)}│${COLORS.reset}`);
+    buffer.push(`\x1b[${y + height - 1};${x}H${borderColor}└${"─".repeat(width - 2)}┘${COLORS.reset}`);
+    if (!rule)
+        return;
+    let statusDisplay = rule.configStatus.toUpperCase();
+    if (rule.configStatus === "error")
+        statusDisplay = `${COLORS.error}${statusDisplay}${COLORS.reset}`;
+    else if (rule.configStatus === "warn")
+        statusDisplay = `${COLORS.warn}${statusDisplay}${COLORS.reset}`;
+    else
+        statusDisplay = `${COLORS.dim}${statusDisplay}${COLORS.reset}`;
+    const labels = [
+        ["Name", rule.value],
+        ["Status", statusDisplay],
+        ["Category", rule.category],
+        ["Scope", rule.scope],
+        ["Fix", rule.fix || "N/A"],
+        ["Default", rule.default ? "Yes" : "No"],
+        ["Type-aware", rule.type_aware ? "Yes" : "No"],
+        ["Docs", `Hit ${COLORS.highlight}ENTER${COLORS.reset} to open docs`],
+    ];
+    let line = 0;
+    labels.forEach(([lbl, val]) => {
+        if (lbl === "Status" && line < height - 2) {
+            buffer.push(`\x1b[${y + 1 + line};${x + 2}H${COLORS.highlight}${lbl.padEnd(10)} ${COLORS.reset}${val}`);
+            line++;
+            return;
+        }
+        const chunks = chunkString(String(val || "N/A"), width - 15);
+        chunks.forEach((chunk) => {
+            if (line < height - 2) {
+                buffer.push(`\x1b[${y + 1 + line};${x + 2}H${COLORS.highlight}${lbl.padEnd(10)} ${COLORS.reset}${chunk}`);
+                line++;
+            }
+        });
+    });
+}
+export function render(state) {
+    const { columns = 80, rows = 24 } = stdout;
+    const currentCategory = state.categories[state.selectedCategoryIndex];
+    const rules = state.rulesByCategory[currentCategory] || [];
+    const rule = rules[state.selectedRuleIndex];
+    const boxHeight = rows - 5;
+    const categoriesColumnWidth = Math.floor(columns * 0.2);
+    const rulesColumnWidth = Math.floor(columns * 0.3);
+    const detailsColumnWidth = columns - categoriesColumnWidth - rulesColumnWidth - 2;
+    const statsHeight = 6;
+    const categoryListHeight = boxHeight - statsHeight;
+    const buffer = ["\x1b[H\x1b[J"];
+    drawBox(buffer, 1, 1, categoriesColumnWidth, categoryListHeight, "CATEGORIES", state.categories, state.selectedCategoryIndex, state.categoryScroll, state.activePane === 0);
+    drawStats(buffer, 1, 1 + categoryListHeight, categoriesColumnWidth, statsHeight, rules);
+    drawBox(buffer, categoriesColumnWidth + 1, 1, rulesColumnWidth, boxHeight, `RULES (${rules.length})`, rules, state.selectedRuleIndex, state.ruleScroll, state.activePane === 1);
+    drawDetails(buffer, categoriesColumnWidth + rulesColumnWidth + 1, 1, detailsColumnWidth, boxHeight, rule, state.activePane === 2);
+    const msgColor = COLORS[state.messageType] || COLORS.reset;
+    buffer.push(`\x1b[${rows - 3};2H${msgColor}● ${state.message}${COLORS.reset}`);
+    const footerConfig = state.configPath ? `Config: ${state.configPath}` : "No config loaded";
+    buffer.push(`\x1b[${rows - 1};2H${COLORS.dim}Arrows/HJKL: Nav | 1-3: Status | R: Lint | X: Run rule | Enter: Docs | Q: Quit | ${footerConfig}${COLORS.reset}`);
+    stdout.write(buffer.join(""));
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,29 +1,44 @@
 {
   "name": "oxlint-tui",
-  "version": "1.0.18",
+  "version": "1.1.0",
   "description": "A Node TUI Oxlint rules and configuration browser",
-  "type": "module",
+  "keywords": [
+    "cli",
+    "configuration",
+    "lint",
+    "linter",
+    "oxlint",
+    "tui"
+  ],
+  "license": "MIT",
+  "author": "holoflash",
   "bin": {
-    "oxlint-rules-tui": "./tui.js"
+    "oxlint-tui": "dist/index.js"
   },
   "files": [
-    "tui.js"
+    "dist"
   ],
+  "type": "module",
   "scripts": {
-    "start": "node tui.js",
-    "dev": "node tui.js .oxlintrc.example.json"
+    "prepare": "husky",
+    "dev": "tsx src/index.ts src/.oxlintrc.test.json",
+    "lint": "oxlint --type-aware --format=stylish",
+    "type-check": "tsgo --noEmit",
+    "format": "oxfmt",
+    "format-check": "oxfmt --check",
+    "build": "rm -rf dist && tsc",
+    "build-run": "npm run build && node dist/index.js src/.oxlintrc.test.json"
   },
-  "keywords": [
-    "oxlint",
-    "lint",
-    "tui",
-    "cli"
-  ],
-  "dependencies": {
-    "oxlint-tsgolint": "0.11.1"
+  "devDependencies": {
+    "@types/node": "25.0.10",
+    "@typescript/native-preview": "7.0.0-dev.20260124.1",
+    "husky": "9.1.7",
+    "oxfmt": "0.26.0",
+    "oxlint": "1.41.0",
+    "oxlint-tsgolint": "0.11.1",
+    "tsx": "4.21.0",
+    "typescript": "5.9.3"
   },
-  "author": "holoflash",
-  "license": "MIT",
   "engines": {
     "node": ">=16"
   }

package/tui.js

@@ -1,640 +0,0 @@
-#!/usr/bin/env node
-
-import { execSync, exec, spawn } from "node:child_process";
-import { stdout, stdin, exit, platform, argv } from "node:process";
-import readline from "readline";
-import fs from "node:fs";
-
-const OXLINT_VERSION = "1.41.0";
-const TSGOLINT_VERSION = "0.11.1";
-
-const COLORS = {
-  reset: "\x1b[0m",
-  dim: "\x1b[90m",
-  highlight: "\x1b[38;5;110m",
-  selectedBg: "\x1b[47m\x1b[30m",
-  borderActive: "\x1b[36m",
-  borderInactive: "\x1b[90m",
-  error: "\x1b[31m",
-  warn: "\x1b[33m",
-  success: "\x1b[32m",
-  info: "\x1b[34m",
-};
-
-const KEY_MAP = {
-  k: { type: "MOVE_UP" },
-  up: { type: "MOVE_UP" },
-  down: { type: "MOVE_DOWN" },
-  j: { type: "MOVE_DOWN" },
-  left: { type: "MOVE_LEFT" },
-  h: { type: "MOVE_LEFT" },
-  right: { type: "MOVE_RIGHT" },
-  l: { type: "MOVE_RIGHT" },
-  return: { type: "OPEN_DOCS" },
-  enter: { type: "OPEN_DOCS" },
-  1: { type: "SET_STATUS", value: "off" },
-  2: { type: "SET_STATUS", value: "warn" },
-  3: { type: "SET_STATUS", value: "error" },
-  q: { type: "EXIT" },
-  r: { type: "RUN_LINT" },
-  x: { type: "RUN_SINGLE_RULE" },
-};
-
-let state = {
-  activePane: 0,
-  selectedCatIdx: 0,
-  selectedRuleIdx: 0,
-  scrollCat: 0,
-  scrollRule: 0,
-  isLinting: false,
-  message: "oxlint-tui",
-  messageType: "dim",
-  ...loadRules(),
-};
-
-// TODO: Nukes comments in the json file. Find the most minimal way to avoid this, while preserving formatting
-function updateConfig(rule, newStatus) {
-  if (!state.configPath) return;
-  try {
-    if (!state.config.rules) state.config.rules = {};
-    const ruleName = rule.value;
-    const canonicalKey =
-      rule.scope === "oxc2" || rule.scope === "eslint"
-        ? ruleName
-        : `${rule.scope}/${ruleName}`;
-    const existingKey = Object.keys(state.config.rules).find(
-      (key) =>
-        key === canonicalKey ||
-        key === ruleName ||
-        key.endsWith(`/${ruleName}`),
-    );
-    const targetKey = existingKey || canonicalKey;
-    state.config.rules[targetKey] = newStatus;
-    fs.writeFileSync(
-      state.configPath,
-      JSON.stringify(state.config, null, 2),
-      "utf8",
-    );
-  } catch (e) {
-    state.message = "Failed to write config file";
-    state.messageType = "error";
-  }
-}
-
-function runLint({ typeAware = false, rule = null } = {}) {
-  if (state.isLinting) return;
-
-  state.isLinting = true;
-
-  let ruleName = rule ? `${rule.scope}/${rule.value}` : null;
-  typeAware = typeAware || rule?.type_aware;
-
-  state.message = "Linting";
-  if (ruleName) state.message += ` [${ruleName}]`;
-  if (typeAware) state.message += " with --type-aware";
-  state.message += "...";
-
-  state.messageType = "info";
-
-  render();
-
-  const npxCmd = platform === "win32" ? "npx.cmd" : "npx";
-
-  const args = ["-q", "--yes", "--package", `oxlint@${OXLINT_VERSION}`];
-
-  if (typeAware) {
-    args.push("--package", `oxlint-tsgolint@${TSGOLINT_VERSION}`);
-  }
-
-  args.push("--", "oxlint");
-
-  if (typeAware) {
-    args.push("--type-aware");
-  }
-
-  if (ruleName) {
-    args.push("-A", "all", "-D", ruleName);
-  }
-
-  const child = spawn(npxCmd, args);
-
-  let stdoutData = "";
-  let stderrData = "";
-
-  child.stdout.on("data", (data) => {
-    stdoutData += data;
-  });
-  child.stderr.on("data", (data) => {
-    stderrData += data;
-  });
-
-  child.on("close", (code) => {
-    state.isLinting = false;
-
-    const fullOutput = stdoutData + stderrData;
-    const summaryMatch = fullOutput.match(
-      /Found (\d+) warnings? and (\d+) errors?/i,
-    );
-
-    if (summaryMatch) {
-      const errors = parseInt(summaryMatch[2]);
-      state.message = ruleName
-        ? `[${ruleName}] Found ${errors} issue${errors === 1 ? "" : "s"}`
-        : (state.message = summaryMatch[0]);
-      state.messageType = errors > 0 ? "error" : "warn";
-    } else if (
-      stdoutData.toLowerCase().includes("finished") ||
-      (code === 0 && stdoutData.length < 200)
-    ) {
-      state.message = "Linting passed! 0 issues found.";
-      if (ruleName) state.message = `[${ruleName}] ${state.message}`;
-      state.messageType = "success";
-    } else {
-      const cleanError = stderrData
-        .split("\n")
-        .filter(
-          (l) =>
-            !l.includes("experimental") &&
-            !l.includes("Breaking changes") &&
-            l.trim() !== "",
-        )
-        .join(" ");
-
-      state.message = cleanError
-        ? `Error: ${cleanError.substring(0, 50)}...`
-        : "Lint failed";
-      state.messageType = "error";
-    }
-    render();
-  });
-}
-
-function execute(action) {
-  if (!action) return;
-
-  const {
-    categories,
-    rulesByCategory,
-    selectedCatIdx,
-    selectedRuleIdx,
-    activePane,
-  } = state;
-  const currentCat = categories[selectedCatIdx];
-  const currentRules = rulesByCategory[currentCat] || [];
-  const viewHeight = stdout.rows - 8;
-  const statsHeight = 7;
-  const catViewHeight = viewHeight - statsHeight;
-
-  switch (action.type) {
-    case "EXIT":
-      exitAltScreen();
-      exit(0);
-      return;
-
-    case "RUN_LINT":
-      const allRules = Object.values(state.rulesByCategory).flat();
-      const hasActiveTypeAwareRule = allRules.some(
-        (rule) => rule.isActive && rule.type_aware === true
-      );
-
-      runLint({ typeAware: hasActiveTypeAwareRule });
-      return;
-
-    case "RUN_SINGLE_RULE": {
-      const rule = currentRules[selectedRuleIdx];
-      if (rule) runLint({ rule });
-      return;
-    }
-
-    case "OPEN_DOCS": {
-      if (activePane === 1) {
-        const rule = currentRules[selectedRuleIdx];
-        if (rule) openUrl(rule.docs_url || rule.url);
-      }
-      return;
-    }
-
-    case "SET_STATUS": {
-      if (activePane !== 1) return;
-      const rule = currentRules[selectedRuleIdx];
-      if (!rule) return;
-      updateConfig(rule, action.value);
-      const updatedRules = [...currentRules];
-      updatedRules[selectedRuleIdx] = {
-        ...rule,
-        configStatus: action.value,
-        isActive: action.value === "error" || action.value === "warn",
-      };
-      state = {
-        ...state,
-        message: `Rule '${rule.value}' set to: ${action.value}`,
-        messageType: "info",
-        rulesByCategory: {
-          ...rulesByCategory,
-          [currentCat]: updatedRules,
-        },
-      };
-      render();
-      return;
-    }
-
-    case "MOVE_RIGHT":
-      if (activePane !== 1) {
-        state = { ...state, activePane: activePane + 1 };
-        render();
-      }
-      return;
-
-    case "MOVE_LEFT":
-      if (activePane !== 0) {
-        state = { ...state, activePane: activePane - 1 };
-        render();
-      }
-      return;
-
-    case "MOVE_UP":
-      if (activePane === 0) {
-        const nextIdx =
-          selectedCatIdx === 0 ? categories.length - 1 : selectedCatIdx - 1;
-        state = {
-          ...state,
-          selectedCatIdx: nextIdx,
-          selectedRuleIdx: 0,
-          scrollRule: 0,
-          scrollCat: updateScroll(nextIdx, state.scrollCat, catViewHeight),
-        };
-      } else if (activePane === 1) {
-        const nextIdx =
-          selectedRuleIdx === 0 ? currentRules.length - 1 : selectedRuleIdx - 1;
-        state = {
-          ...state,
-          selectedRuleIdx: nextIdx,
-          scrollRule: updateScroll(nextIdx, state.scrollRule, viewHeight),
-        };
-      }
-      render();
-      return;
-
-    case "MOVE_DOWN":
-      if (activePane === 0) {
-        const nextIdx =
-          selectedCatIdx === categories.length - 1 ? 0 : selectedCatIdx + 1;
-        state = {
-          ...state,
-          selectedCatIdx: nextIdx,
-          selectedRuleIdx: 0,
-          scrollRule: 0,
-          scrollCat: updateScroll(nextIdx, state.scrollCat, catViewHeight),
-        };
-      } else if (activePane === 1) {
-        const nextIdx =
-          selectedRuleIdx === currentRules.length - 1 ? 0 : selectedRuleIdx + 1;
-        state = {
-          ...state,
-          selectedRuleIdx: nextIdx,
-          scrollRule: updateScroll(nextIdx, state.scrollRule, viewHeight),
-        };
-      }
-      render();
-      return;
-  }
-}
-
-function getRuleStatus(ruleName, category, config) {
-  if (config.rules) {
-    let val = config.rules[ruleName];
-    if (val === undefined) {
-      const foundKey = Object.keys(config.rules).find((key) =>
-        key.endsWith(`/${ruleName}`),
-      );
-      if (foundKey) val = config.rules[foundKey];
-    }
-    if (val !== undefined) return Array.isArray(val) ? val[0] : val;
-  }
-  return (config.categories && config.categories[category]) || "off";
-}
-
-function stripJsonComments(json) {
-  return json.replace(
-    /\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,
-    (m, g) => (g ? "" : m),
-  );
-}
-
-function loadRules() {
-  let rulesData;
-  let config = {
-    rules: {},
-    categories: {},
-  };
-  let configPath = null;
-
-  try {
-    const raw = execSync(
-      `npx -q --yes oxlint@${OXLINT_VERSION} --rules --format=json`,
-      {
-        encoding: "utf8",
-        stdio: ["ignore", "pipe", "ignore"],
-      },
-    );
-    rulesData = JSON.parse(raw);
-  } catch (e) {
-    console.error(
-      `${COLORS.error}Error: Could not run 'npx oxlint'.${COLORS.reset}`,
-    );
-    exit(1);
-  }
-
-  const userConfigPath = argv[2];
-  if (userConfigPath && fs.existsSync(userConfigPath)) {
-    configPath = userConfigPath;
-  } else if (fs.existsSync(".oxlintrc.json")) {
-    configPath = ".oxlintrc.json";
-  }
-
-  if (configPath) {
-    try {
-      config = JSON.parse(
-        stripJsonComments(fs.readFileSync(configPath, "utf8")),
-      );
-    } catch (e) { }
-  }
-
-  const map = {};
-  rulesData.forEach((rule) => {
-    const cat = rule.category || "Uncategorized";
-    if (!map[cat]) map[cat] = [];
-    const status = getRuleStatus(rule.value, cat, config);
-    map[cat].push({
-      ...rule,
-      configStatus: status,
-      isActive: status === "error" || status === "warn",
-    });
-  });
-
-  const categories = Object.keys(map).sort();
-  return {
-    categories,
-    rulesByCategory: map,
-    config,
-    configPath,
-  };
-}
-
-function updateScroll(idx, currentScroll, viewHeight) {
-  if (idx < currentScroll) return idx;
-  if (idx >= currentScroll + viewHeight) return idx - viewHeight + 1;
-  return currentScroll;
-}
-
-function openUrl(url) {
-  if (!url) return;
-  const cmd =
-    platform === "darwin"
-      ? "open"
-      : platform === "win32"
-        ? "start"
-        : "xdg-open";
-  exec(`${cmd} "${url}"`);
-}
-
-function chunkString(str, len) {
-  if (!str) return [];
-  const size = Math.ceil(str.length / len);
-  const r = Array(size);
-  for (let i = 0; i < size; i++) r[i] = str.substring(i * len, (i + 1) * len);
-  return r;
-}
-
-const write = (str) => stdout.write(str);
-const enterAltScreen = () => write("\x1b[?1049h\x1b[?25l");
-const exitAltScreen = () => write("\x1b[?1049l\x1b[?25h");
-
-function drawBox(
-  buffer,
-  x,
-  y,
-  width,
-  height,
-  title,
-  items,
-  selectedIdx,
-  scrollOffset,
-  isActive,
-) {
-  const borderColor = isActive ? COLORS.borderActive : COLORS.borderInactive;
-  const titleClean =
-    title.length > width - 6 ? title.substring(0, width - 7) + "…" : title;
-  const topBorder = `${borderColor}┌─ ${titleClean} `.padEnd(
-    width + borderColor.length - 1,
-    "─",
-  );
-  buffer.push(`\x1b[${y};${x}H${topBorder}┐${COLORS.reset}`);
-
-  for (let i = 1; i < height - 1; i++) {
-    buffer.push(
-      `\x1b[${y + i};${x}H${borderColor}│${" ".repeat(width - 2)}│${COLORS.reset}`,
-    );
-  }
-  buffer.push(
-    `\x1b[${y + height - 1};${x}H${borderColor}└${"─".repeat(width - 2)}┘${COLORS.reset}`,
-  );
-
-  const innerHeight = height - 2;
-  items.slice(scrollOffset, scrollOffset + innerHeight).forEach((item, i) => {
-    const absIdx = scrollOffset + i;
-    const rawText = (item.value || item).toString();
-    let display =
-      rawText.length > width - 4
-        ? rawText.substring(0, width - 5) + "…"
-        : rawText.padEnd(width - 4);
-    let itemColor = COLORS.dim;
-    if (item.configStatus === "error") itemColor = COLORS.error;
-    else if (item.configStatus === "warn") itemColor = COLORS.warn;
-    else if (item.isActive) itemColor = COLORS.success;
-
-    buffer.push(`\x1b[${y + 1 + i};${x + 2}H`);
-    if (absIdx === selectedIdx) {
-      buffer.push(
-        isActive
-          ? `${COLORS.selectedBg}${display}${COLORS.reset}`
-          : `${COLORS.dim}\x1b[7m${display}${COLORS.reset}`,
-      );
-    } else {
-      buffer.push(`${itemColor}${display}${COLORS.reset}`);
-    }
-  });
-}
-
-function drawStats(buffer, x, y, width, height, rules) {
-  const borderColor = COLORS.borderInactive;
-  const topBorder = `${borderColor}┌─ STATS `.padEnd(
-    width + borderColor.length - 1,
-    "─",
-  );
-  buffer.push(`\x1b[${y};${x}H${topBorder}┐${COLORS.reset}`);
-  for (let i = 1; i < height - 1; i++)
-    buffer.push(
-      `\x1b[${y + i};${x}H${borderColor}│${" ".repeat(width - 2)}│${COLORS.reset}`,
-    );
-  buffer.push(
-    `\x1b[${y + height - 1};${x}H${borderColor}└${"─".repeat(width - 2)}┘${COLORS.reset}`,
-  );
-
-  let counts = { error: 0, warn: 0, off: 0 };
-  rules.forEach((r) => {
-    if (r.configStatus === "error") counts.error++;
-    else if (r.configStatus === "warn") counts.warn++;
-    else counts.off++;
-  });
-
-  const lines = [
-    { label: "Error", count: counts.error, color: COLORS.error },
-    { label: "Warn", count: counts.warn, color: COLORS.warn },
-    { label: "Off", count: counts.off, color: COLORS.dim },
-  ];
-
-  lines.forEach((line, i) => {
-    if (i < height - 2) {
-      const numStr = String(line.count).padStart(3);
-      const labelStr = line.label.padEnd(width - 8);
-      buffer.push(
-        `\x1b[${y + 1 + i};${x + 2}H${line.color}${labelStr}${numStr}${COLORS.reset}`,
-      );
-    }
-  });
-}
-
-function drawDetails(buffer, x, y, width, height, rule, isActive) {
-  const borderColor = isActive ? COLORS.borderActive : COLORS.borderInactive;
-  const topBorder = `${borderColor}┌─ DETAILS `.padEnd(
-    width + borderColor.length - 1,
-    "─",
-  );
-  buffer.push(`\x1b[${y};${x}H${topBorder}┐${COLORS.reset}`);
-  for (let i = 1; i < height - 1; i++)
-    buffer.push(
-      `\x1b[${y + i};${x}H${borderColor}│${" ".repeat(width - 2)}│${COLORS.reset}`,
-    );
-  buffer.push(
-    `\x1b[${y + height - 1};${x}H${borderColor}└${"─".repeat(width - 2)}┘${COLORS.reset}`,
-  );
-
-  if (!rule) return;
-
-  let statusDisplay = rule.configStatus.toUpperCase();
-  if (rule.configStatus === "error")
-    statusDisplay = `${COLORS.error}${statusDisplay}${COLORS.reset}`;
-  else if (rule.configStatus === "warn")
-    statusDisplay = `${COLORS.warn}${statusDisplay}${COLORS.reset}`;
-  else statusDisplay = `${COLORS.dim}${statusDisplay}${COLORS.reset}`;
-
-  const labels = [
-    ["Name", rule.value],
-    ["Status", statusDisplay],
-    ["Category", rule.category],
-    ["Scope", rule.scope],
-    ["Fix", rule.fix],
-    ["Default", rule.default ? "Yes" : "No"],
-    ["Type-aware", rule.type_aware ? "Yes" : "No"],
-    ["Docs", `Hit ${COLORS.highlight}ENTER${COLORS.reset} to open docs`],
-  ];
-
-  let line = 0;
-  labels.forEach(([lbl, val]) => {
-    if (lbl === "Status" && line < height - 2) {
-      buffer.push(
-        `\x1b[${y + 1 + line};${x + 2}H${COLORS.highlight}${lbl.padEnd(10)} ${COLORS.reset}${val}`,
-      );
-      line++;
-      return;
-    }
-    const chunks = chunkString(String(val || "N/A"), width - 15);
-    chunks.forEach((chunk) => {
-      if (line < height - 2) {
-        buffer.push(
-          `\x1b[${y + 1 + line};${x + 2}H${COLORS.highlight}${lbl.padEnd(10)} ${COLORS.reset}${chunk}`,
-        );
-        line++;
-      }
-    });
-  });
-}
-
-function render() {
-  const { columns, rows } = stdout;
-  const currentCat = state.categories[state.selectedCatIdx];
-  const rules = state.rulesByCategory[currentCat] || [];
-  const rule = rules[state.selectedRuleIdx];
-  const boxHeight = rows - 5;
-  const col1W = Math.floor(columns * 0.2);
-  const col2W = Math.floor(columns * 0.3);
-  const col3W = columns - col1W - col2W - 2;
-  const statsHeight = 6;
-  const catListHeight = boxHeight - statsHeight;
-
-  const buffer = ["\x1b[H\x1b[J"];
-  drawBox(
-    buffer,
-    1,
-    1,
-    col1W,
-    catListHeight,
-    "CATEGORIES",
-    state.categories,
-    state.selectedCatIdx,
-    state.scrollCat,
-    state.activePane === 0,
-  );
-  drawStats(buffer, 1, 1 + catListHeight, col1W, statsHeight, rules);
-  drawBox(
-    buffer,
-    col1W + 1,
-    1,
-    col2W,
-    boxHeight,
-    `RULES (${rules.length})`,
-    rules,
-    state.selectedRuleIdx,
-    state.scrollRule,
-    state.activePane === 1,
-  );
-  drawDetails(
-    buffer,
-    col1W + col2W + 1,
-    1,
-    col3W,
-    boxHeight,
-    rule,
-    state.activePane === 2,
-  );
-
-  const msgColor = COLORS[state.messageType] || COLORS.reset;
-  buffer.push(
-    `\x1b[${rows - 3};2H${msgColor}● ${state.message}${COLORS.reset}`,
-  );
-
-  const footerConfig = state.configPath
-    ? `Config: ${state.configPath}`
-    : "No config loaded";
-  buffer.push(
-    `\x1b[${rows - 1};2H${COLORS.dim}Arrows/HJKL: Nav | 1-3: Status | R: Lint | X: Run rule | Enter: Docs | Q: Quit | ${footerConfig}${COLORS.reset}`,
-  );
-  write(buffer.join(""));
-}
-
-readline.emitKeypressEvents(stdin);
-if (stdin.isTTY) stdin.setRawMode(true);
-
-stdin.on("keypress", (_, key) => {
-  const action =
-    KEY_MAP[key.name] ||
-    (key.ctrl && key.name === "c"
-      ? { type: "EXIT" }
-      : KEY_MAP[key.sequence] || null);
-  execute(action);
-});
-
-stdout.on("resize", render);
-enterAltScreen();
-render();