oxlint-tui 1.0.6 → 1.0.7

package/README.md

@@ -1,8 +1,10 @@
 # oxlint-tui
 
-A lightweight, dependency-free Node.js Terminal User Interface (TUI) for browsing and visualizing [oxlint](https://github.com/oxc-project/oxc) rules.
+A lightweight, dependency-free Node.js Terminal User Interface (TUI) for browsing, toggling and visualizing [oxlint](https://github.com/oxc-project/oxc) rules.
 
-It automatically loads your local configuration to show you the status of the rules toggled in your project.
+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.
 
 ![screenshot](https://raw.githubusercontent.com/holoflash/oxlint-tui/refs/heads/main/screenshot.png)
 
@@ -52,7 +54,10 @@ oxlint-tui
 | **↑** / **k** | Move selection Up |
 | **↓** / **j** | Move selection Down |
 | **←** / **h** | Move focus Left (Categories <-> Rules) |
-| **→** / **l** | Move focus Right (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" |
 | **Enter** | Open Rule Documentation in Browser |
 | **q** / **Esc** | Quit |
 
@@ -63,7 +68,7 @@ oxlint-tui
 
 ## 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 create 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oxlint-tui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A Node TUI Oxlint rules and configuration browser",
   "type": "module",
   "bin": {

package/tui.js

@@ -2,7 +2,7 @@
 
 import { execSync, exec } from 'node:child_process';
 import { stdout, stdin, exit, platform, argv } from 'node:process';
-import readline from 'node:readline';
+import readline from 'readline';
 import fs from 'node:fs';
 
 const OXLINT_VERSION = "1.41.0"
@@ -30,10 +30,38 @@ const KEY_MAP = {
     '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' },
     'escape': { type: 'EXIT' }
 };
 
+// TODO: Nukes comments in the json file. Find the most minimal way to avoid this, while preserveing formatting
+function updateConfig(rule, newStatus) {
+    if (!state.configPath) return;
+
+    try {
+        if (!state.config.rules) state.config.rules = {};
+        const ruleName = rule.value;
+        const scope = rule.scope;
+        const canonicalKey = scope === 'oxc' ? ruleName : `${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 {
+        // TODO: Show errors in the tui
+    }
+}
+
 function reducer(state, action) {
     const { categories, rulesByCategory, selectedCatIdx, selectedRuleIdx, activePane } = state;
     const currentCat = categories[selectedCatIdx];
@@ -44,12 +72,38 @@ function reducer(state, action) {
     const catViewHeight = viewHeight - statsHeight;
 
     switch (action.type) {
+        case 'SET_STATUS': {
+            if (activePane !== 1) return state;
+            const rule = currentRules[selectedRuleIdx];
+            if (!rule) return state;
+
+            updateConfig(rule, action.value);
+
+            const updatedRules = [...currentRules];
+            updatedRules[selectedRuleIdx] = {
+                ...rule,
+                configStatus: action.value,
+                isActive: action.value === 'error' || action.value === 'warn'
+            };
+
+            return {
+                ...state,
+                rulesByCategory: {
+                    ...rulesByCategory,
+                    [currentCat]: updatedRules
+                }
+            };
+        }
+
         case 'MOVE_RIGHT':
             if (activePane !== 1)
-                return { ...state, activePane: Math.min(2, activePane + 1) };
+                return { ...state, activePane: activePane + 1 };
+            return state;
 
         case 'MOVE_LEFT':
-            return { ...state, activePane: Math.max(0, activePane - 1) };
+            if (activePane !== 0)
+                return { ...state, activePane: activePane - 1 };
+            return state;
 
         case 'MOVE_UP':
             if (activePane === 0) {
@@ -100,7 +154,6 @@ function getRuleStatus(ruleName, category, config) {
     if (config.rules) {
         let val = config.rules[ruleName];
 
-        // Ignore the prefix to match format in --rules
         if (val === undefined) {
             const foundKey = Object.keys(config.rules).find(key => key.endsWith(`/${ruleName}`));
             if (foundKey) {
@@ -127,73 +180,56 @@ function stripJsonComments(json) {
 function loadRules() {
     let rulesData;
     let config = { rules: {}, categories: {} };
+    let configPath = null;
 
     try {
         const raw = execSync(`npx --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'. Ensure oxlint is installed.${COLORS.reset}`);
+        console.error(`${COLORS.error}Error: Could not run 'npx oxlint'.${COLORS.reset}`);
         exit(1);
     }
 
     const userConfigPath = argv[2];
-    let configPathToLoad = null;
-
     if (userConfigPath) {
         if (!fs.existsSync(userConfigPath)) {
             console.error(`${COLORS.error}Error: Config file '${userConfigPath}' not found.${COLORS.reset}`);
             exit(1);
         }
-        configPathToLoad = userConfigPath;
+        configPath = userConfigPath;
     } else if (fs.existsSync('.oxlintrc.json')) {
-        configPathToLoad = '.oxlintrc.json';
+        configPath = '.oxlintrc.json';
     }
 
-    if (configPathToLoad) {
+    if (configPath) {
         try {
-            const configFile = fs.readFileSync(configPathToLoad, 'utf8');
+            const configFile = fs.readFileSync(configPath, 'utf8');
             const cleanConfig = stripJsonComments(configFile);
             config = JSON.parse(cleanConfig);
-
         } catch (e) {
-            console.error(`${COLORS.error}Error: Failed to parse '${configPathToLoad}'.${COLORS.reset}`);
-            console.error(`${COLORS.warn}${e.message}${COLORS.reset}`);
+            console.error(`${COLORS.error}Error: Failed to parse '${configPath}'.${COLORS.reset}`);
             exit(1);
         }
     }
 
-    try {
-        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();
+    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' });
+    });
 
-        categories.forEach(c => {
-            map[c].sort((a, b) => {
-                if (a.isActive && !b.isActive) return -1;
-                if (!a.isActive && b.isActive) return 1;
-                return a.value.localeCompare(b.value);
-            });
+    const categories = Object.keys(map).sort();
+    categories.forEach(c => {
+        map[c].sort((a, b) => {
+            if (a.isActive && !b.isActive) return -1;
+            if (!a.isActive && b.isActive) return 1;
+            return a.value.localeCompare(b.value);
         });
+    });
 
-        return { categories, rulesByCategory: map };
-    } catch (e) {
-        console.error(`${COLORS.error}Error: Something went wrong processing rules.${COLORS.reset}`);
-        console.error(e);
-        exit(1);
-    }
+    return { categories, rulesByCategory: map, config, configPath };
 }
 
 function updateScroll(idx, currentScroll, viewHeight) {
@@ -224,7 +260,6 @@ 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}`);
 
@@ -234,23 +269,18 @@ function drawBox(buffer, x, y, width, height, title, items, selectedIdx, scrollO
     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}`);
+            buffer.push(isActive ? `${COLORS.selectedBg}${display}${COLORS.reset}` : `${COLORS.dim}\x1b[7m${display}${COLORS.reset}`);
         } else {
             buffer.push(`${itemColor}${display}${COLORS.reset}`);
         }
@@ -259,10 +289,8 @@ function drawBox(buffer, x, y, width, height, title, items, selectedIdx, scrollO
 
 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}`);
 
@@ -290,10 +318,8 @@ function drawStats(buffer, x, y, width, height, rules) {
 
 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}`);
 
@@ -317,18 +343,15 @@ function drawDetails(buffer, x, y, width, height, rule, isActive) {
 
     let line = 0;
     labels.forEach(([lbl, val]) => {
-        if (lbl === 'Status') {
-            if (line < height - 2) {
-                buffer.push(`\x1b[${y + 1 + line};${x + 2}H${COLORS.highlight}${lbl.padEnd(10)} ${COLORS.reset}${val}`);
-                line++;
-            }
+        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, i) => {
+        chunks.forEach((chunk) => {
             if (line < height - 2) {
-                buffer.push(`\x1b[${y + 1 + line};${x + 2}H${i === 0 ? COLORS.highlight + lbl.padEnd(10) : ' '.repeat(10)} ${COLORS.reset}${chunk}`);
+                buffer.push(`\x1b[${y + 1 + line};${x + 2}H${COLORS.highlight}${lbl.padEnd(10)} ${COLORS.reset}${chunk}`);
                 line++;
             }
         });
@@ -340,23 +363,21 @@ function render() {
     const currentCat = state.categories[state.selectedCatIdx];
     const rules = state.rulesByCategory[currentCat] || [];
     const rule = rules[state.selectedRuleIdx];
-
     const boxHeight = rows - 4;
-
     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);
-    buffer.push(`\x1b[${rows - 2};2H${COLORS.dim}Nav: Arrows/HJKL | Enter: Docs | Q: Quit${COLORS.reset}`);
+
+    const footerConfig = state.configPath ? `Config: ${state.configPath}` : 'No config loaded';
+    buffer.push(`\x1b[${rows - 2};2H${COLORS.dim}Nav: Arrows/HJKL | 1:Off 2:Warn 3:Err | Enter: Docs | Q: Quit | ${footerConfig}${COLORS.reset}`);
     write(buffer.join(''));
 }
 
@@ -373,7 +394,7 @@ 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' } : null);
+    const action = KEY_MAP[key.name] || (key.ctrl && key.name === 'c' ? { type: 'EXIT' } : (KEY_MAP[key.sequence] || null));
     if (!action) return;
 
     if (action.type === 'EXIT') {
@@ -381,7 +402,7 @@ stdin.on('keypress', (_, key) => {
         exit(0);
     }
 
-    if (action.type === 'OPEN_DOCS') {
+    if (action.type === 'OPEN_DOCS' && state.activePane === 1) {
         const currentCat = state.categories[state.selectedCatIdx];
         const rule = state.rulesByCategory[currentCat]?.[state.selectedRuleIdx];
         if (rule) openUrl(rule.docs_url || rule.url);